@charset "utf-8";
html, body {height:100%; width:100%; height:100%;  min-height: 100%;}
@import url(http://fonts.googleapis.com/earlyaccess/notosansgothic.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;300;400;500;600;700;800;900&display=swap');

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,button{margin:0;padding:0;color:#666;font-size:14px;line-height:22px; font-family:"Pretendard Variable", Pretendard,'Noto Sans KR',"NanumBarunGothic", nbg, dotum, sans-serif; font-weight: 500 }

@media all and (max-width:768px) and (min-width:100px) {

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,button{margin:0;padding:0;color:#666;font-size:12px;line-height:18px; font-family: "Pretendard Variable", Pretendard,'Noto Sans KR',"NanumBarunGothic", nbg, dotum, sans-serif; letter-spacing:-1px ; }
}


header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block}
button,input[type=submit],input[type=reset],input[type=button]{cursor:pointer;overflow:visible}

a{line-height:1.25em;text-decoration:none;}
a:hover{}
form,fieldset,img{border:0 none;}
table{ border-collapse:collapse;table-layout:fixed;border-collapse:collapse;border-spacing:0}
em{font-style:normal}
ul,ol,li{list-style:none;}
input,select{vertical-align:middle;}
button{border:0;margin:0;padding:0;overflow:visible;background:none;*padding:0 .25em  0 .25em;}
caption, .skip, .hide{visibility:hidden;overflow:hidden;position:absolute;left:-1000em;width:0;height:0;font-size:0;line-height:0;margin:0;padding:0;}
legend, caption { display:none; }
img{vertical-align:top}




.container { width:100%; float:left;  position:relative;   }
@media all and (min-width:1280px) {
#allbody{ width:100%;float:left; box-sizing:border-box;  border-left:80px solid #fff; border-right: 80px solid #fff;  height:100%;  min-height: 100%;}
}
@media all and (max-width:1279px) and (min-width:1025px) {
#allbody{ width:100%;float:left; box-sizing:border-box;  border-left:40px solid #fff; border-right:40px solid #fff;  height:100%;  min-height: 100%;}
}
@media all and (max-width:1024px) and (min-width:769px) {
#allbody{ width:100%;float:left; box-sizing:border-box;  border-left:0px solid #fff; border-right:0px solid #fff;  height:100%;  min-height: 100%;}
}
@media all and (max-width:768px) and (min-width:100px) {
#allbody{ width:100%;float:left; box-sizing:border-box;  border-left:0px solid #fff; border-right:0px solid #fff;  height:100%;  min-height: 100%;}
}

@media all and (min-width:1280px) {
#allbody2{ width:100%;float:left; box-sizing:border-box; border-left:0px solid #fff; border-right:0px solid #fff; height:100%;  min-height: 100%; }
#allbody2 .inm {width:100%;float:left;  }	
}
@media all and (max-width:1279px) and (min-width:1025px) {
#allbody2{ width:100%;float:left; box-sizing:border-box;  border-left:0px solid #fff; border-right:0px solid #fff;  height:100%;  min-height: 100%;}
#allbody2 .inm {width:100%;float:left;  border-left:40px solid #fff; border-right:40px solid #fff;}		
}
@media all and (max-width:1024px) and (min-width:769px) {
#allbody2{ width:100%;float:left; box-sizing:border-box;  border-left:0px solid #fff; border-right:0px solid #fff;  height:100%;  min-height: 100%;}
#allbody2 .inm {width:100%;float:left;  border-left:40px solid #fff; border-right: 40px solid #fff;}		
}
@media all and (max-width:768px) and (min-width:100px) {
#allbody2{ width:100%;float:left; box-sizing:border-box;  border-left:0px solid #fff; border-right:0px solid #fff;  height:100%;  min-height: 100%;}
}


@media all and (min-width:1025px) {
.cs_box {	width:100%;	float:left;	position:relative;	height:438px;	background-image: url(../_img/common/cs_bg.jpg);	background-repeat: no-repeat;	background-position: center top; }
.cs_01{
	width:100%;
	float:left;
	background-image: url(../_img/common/cs_line.png);
	background-repeat: no-repeat;
	padding-left:35px;
	margin-top:80px;
	background-position: left center;
}
.cs_01 .text1{	width:100%;	float:left; font-size:36px; color:#fff; margin-bottom:15px; font-weight:500}
.cs_01 .text2{	width:100%;	float:left; font-size:18px; color:#fff; margin-bottom:25px}
.cs_01 .text3{	width:100%;	float:left; }
.cs_01 .text3 .btn_01{	float:left; margin-right:5px  }
.cs_01 .text3 .btn_01 a{  	float:left; padding:8px 20px 8px 22px; box-sizing:border-box; border:1px solid rgba(255, 255, 255, 0.7); color:#fff; font-size:14px  } 
.cs_01 .text3 .btn_01 a i{ float:left; color:#00def2; font-size:20px;  margin-right: 5px } 
.cs_01 .text3 .btn_01 a p{ float:left;color:#fff; font-size:14px   } 

.cs_01 .text3 .btn_01 a:hover{	float:left;  padding:8px 20px 8px 22px;  box-sizing:border-box; border:1px solid rgba(255, 255, 255, 1); color:#fff; font-size:14px; background-color:rgba(0, 0, 0,0.5); } 
.cs_01 .text3 .btn_01 a:hover i{ float:left;color:#00def2; font-size:20px ;  margin-right: 5px }
.cs_01 .text3 .btn_01 a:hover p{ float:left;color:#fff; font-size:14px   } 

.cs_02{	background-image: url(../_img/common/cs_line.png);	background-repeat: no-repeat; padding-left:25px;  margin-top:60px }
.cs_02 img{ width:90%}
.cs_box_m { display:none }
.cs_box_t { display:none }
}
@media all and (max-width:1024px) and (min-width:769px) {
.cs_box { display:none  }
.cs_01{	width:100%;	float:left;	background-image: url(../_img/common/cs_line.png);	background-repeat: no-repeat; padding-left:15px; margin-top:15px ; margin-bottom:30px}
.cs_01 .text1{	width:100%;	float:left; font-size:26px; color:#fff; margin-bottom:5px; font-weight:500}
.cs_01 .text2{	width:100%;	float:left; font-size:12px; color:#fff; margin-bottom:10px}
.cs_01 .text3{	width:100%;	float:left; }
.cs_01 .text3 .btn_01{	float:left; margin-right:5px  }
.cs_01 .text3 .btn_01 a{  	float:left;padding:8px 10px 8px 16px; box-sizing:border-box; border:1px solid rgba(255, 255, 255, 0.7); color:#fff; font-size:12px  } 
.cs_01 .text3 .btn_01 a i{ float:left;color:#00def2; font-size:20px   ;  margin-right: 5px } 
.cs_01 .text3 .btn_01 a p{ float:left;color:#fff; font-size:12px   } 

.cs_01 .text3 .btn_01 a:hover{	float:left;  padding:8px 10px 8px 16px;; box-sizing:border-box; border:1px solid rgba(255, 255, 255, 1); color:#fff; font-size:12px; background-color:rgba(0, 0, 0,0.5); } 
.cs_01 .text3 .btn_01 a:hover i{ float:left;color:#00def2; font-size:20px; margin-right: 5px } 
.cs_01 .text3 .btn_01 a:hover p{ float:left;color:#fff; font-size:12px   } 

.cs_02{
	background-image: url(../_img/common/cs_line.png);
	background-repeat: no-repeat;
	padding-left:25px;
	margin-top:20px;
	background-position: left center;
}
.cs_02 img{ width:90%}
.cs_box_m { display:none }
.cs_box_t {width:100%;	float:left;	position:relative;		background-image: url(../_img/common/cs_bg.jpg);	background-repeat: no-repeat;	background-position: center top; height:230px }
}
@media all and (max-width:768px) and (min-width:100px) {
.cs_box {display:none 	 }
.cs_box_m {width:100%;	float:left;	position:relative;		background-image: url(../_img/common/cs_bg.jpg);	background-repeat: no-repeat;	background-position: center top; }
.cs_box_t { display:none }
.cs_01{	width:100%;	float:left;	background-image: url(../_img/common/cs_line.png);	background-repeat: no-repeat; padding:0px 20px; margin-top:20px }
.cs_01 .text1{	width:100%;	float:left; font-size:20px; color:#fff; margin-bottom:15px; font-weight:500}
.cs_01 .text2{	width:100%;	float:left; font-size:12px; color:#fff; margin-bottom:15px}
.cs_01 .text3{	width:100%;	float:left; }
.cs_01 .text3 .btn_01{	float:left; margin-right:5px  }
.cs_01 .text3 .btn_01 a{  	float:left;padding:5px 10px; box-sizing:border-box; border:1px solid rgba(255, 255, 255, 0.7); color:#fff; font-size:12px; margin-bottom:5px  } 
.cs_01 .text3 .btn_01 a i{ float:left;color:#00def2; font-size:16px; margin-right: 3px} 
.cs_01 .text3 .btn_01 a p{ float:left;color:#fff; font-size:12px   } 

.cs_01 .text3 .btn_01 a:hover{	float:left;  padding:5px 10px; box-sizing:border-box; border:1px solid rgba(255, 255, 255, 1); color:#fff; font-size:12px; background-color:rgba(0, 0, 0,0.5); } 
.cs_01 .text3 .btn_01 a:hover i{ float:left;color:#00def2; font-size:16px  ; margin-right: 3px } 
.cs_01 .text3 .btn_01 a:hover p{ float:left;color:#fff; font-size:12px   } 

.cs_02{
	background-image: url(../_img/common/cs_line.png);
	background-repeat: no-repeat;
	padding-left:25px;
	margin-top:20px;
	margin-bottom:40px;
	background-position: left center;background-position: left center;
}
.cs_02 img{ width:70%}
}





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
#bottom{	width:100%;	float:left; background-color:#2b2d33; padding:50px 50px 180px; box-sizing:border-box}
.sitemap{	width:100%;	float:left;  }	

.sitemap>ul{	width:100%;	float:left; display: grid; grid-template-columns: repeat(7, 1fr);}	

	
.sitemap>ul>li{	float:left; padding:0px 20px; box-sizing:border-box; border-left:1px solid #47484c ; min-height:200px; min-width:100%; margin-bottom: 20px}


.sitemap>ul>li .title{	width:100%;	float:left; margin-bottom:15px; font-size:16px;color:#fff;}
.sitemap>ul>li .list{	width:100%;	float:left; line-height:20px}
.sitemap>ul>li .list a{	width:100%;	float:left;color:#ababab; }
.sitemap>ul>li .list a:hover{	width:100%;	float:left;color:#00def2; }
.sitemap>ul>li .list ul li{	width:100%;	float:left;font-size:13px; margin-bottom:8px }
.sitemap>ul>li .list ul li a{	font-size:13px;color:#ababab; line-height:15px   }
.sitemap>ul>li .list ul li a:hover{	font-size:13px;color:#00def2;   }


.copy_l{ float:left; width:70%}
.copy_r{ float:right; width:30%}
.copy_r_m{ display:none}


}

@media all and (max-width:1921px) and (min-width:768px) {
#bottom{	width:100%;	float:left; background-color:#2b2d33; padding:50px 50px 10px; box-sizing:border-box}
.sitemap{	width:100%;	float:left;  }	

.sitemap>ul{	width:100%;	float:left; display: grid; grid-template-columns: repeat(5, 1fr);}	

	
.sitemap>ul>li{	float:left; padding:0px 20px; box-sizing:border-box; border-left:1px solid #47484c ; min-height:200px; min-width:100%; margin-bottom: 20px}


.sitemap>ul>li .title{	width:100%;	float:left; margin-bottom:15px; font-size:16px;color:#fff;}
.sitemap>ul>li .list{	width:100%;	float:left; line-height:20px}
.sitemap>ul>li .list a{	width:100%;	float:left;color:#ababab; }
.sitemap>ul>li .list a:hover{	width:100%;	float:left;color:#00def2; }
.sitemap>ul>li .list ul li{	width:100%;	float:left;font-size:13px; margin-bottom:8px }
.sitemap>ul>li .list ul li a{	font-size:13px;color:#ababab; line-height:15px   }
.sitemap>ul>li .list ul li a:hover{	font-size:13px;color:#00def2;   }


.copy_l{ float:left; width:70%}
.copy_r{ float:right; width:30%}
.copy_r_m{ display:none}


}


/**** pc2 ****/
@media all and (max-width:1600px) and (min-width:768px) {
#bottom{	width:100%;	float:left; background-color:#2b2d33; padding:30px 30px 100px; box-sizing:border-box}
.sitemap{	width:100%;	float:left;  }	

.sitemap>ul{	width:100%;	float:left; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px}	

}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
#bottom{	width:100%;	float:left; background-color:#2b2d33; padding:20px 20px 100px 20px; box-sizing:border-box; margin-bottom:60px}
.sitemap{ display:none}
.sitemap>ul>li{	float:left; padding:0px 20px; box-sizing:border-box; border-left:1px solid #47484c ; min-height:200px; min-width:150px}


.sitemap>ul>li .title{	width:100%;	float:left; margin-bottom:15px; font-size:16px;color:#fff;}
.sitemap>ul>li .list{	width:100%;	float:left; line-height:20px}
.sitemap>ul>li .list a{	width:100%;	float:left;color:#ababab; }
.sitemap>ul>li .list a:hover{	width:100%;	float:left;color:#00def2; }
.sitemap>ul>li .list ul li{	width:100%;	float:left;font-size:13px; margin-bottom:8px }
.sitemap>ul>li .list ul li a{	font-size:13px;color:#ababab; line-height:15px   }
.sitemap>ul>li .list ul li a:hover{	font-size:13px;color:#00def2;   }


.copy_l{ float:left; width:70%}
.copy_r{ float:right; width:30%}
.copy_r_m{ display:none}


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/







@media all and (min-width:1025px) {
.copy_l{ float:left; width:70%}
.copy_r{ float:right; width:30%}
.copy_r_m{ display:none}

.bottom_btn{	width:100%;	float:left; margin-bottom:20px }
.bottom_btn ul li{	float:right; border:1px solid #525660; margin-left:-1px }
.bottom_btn ul li a.btnst{width:100%;	float:left; padding:10px 0px; text-align:center; color:#fff; font-size:14px; background-color:#000000}

.copy_text1{	width:100%;	float:left; margin-bottom:10px; color:#fff; font-size:14px;text-align:right }

.copy_text2{	width:100%;	float:left; margin-bottom:20px; color:#999999; font-size:13px ; text-align:right}
.copy_text3{	width:100%;	float:left; ; text-align:right}
.copy_text3 img{	width:80%;	}
}
@media all and (max-width:1024px) and (min-width:769px) {
.copy_l{ float:left; width:75%}
.copy_r{ float:right; width:25%}
.copy_r_m{ display:none}

.bottom_btn{	width:100%;	float:left; margin-bottom:20px }
.bottom_btn ul li{	float:right; border:1px solid #525660; margin-left:-1px }
.bottom_btn ul li a.btnst{width:100%;	float:left; padding:8px 0px; text-align:center; color:#fff; font-size:11px; background-color:#000000}

.copy_text1{	width:100%;	float:left; margin-bottom:10px; color:#fff; font-size:12px;text-align:right }

.copy_text2{	width:100%;	float:left; margin-bottom:20px; color:#999999; font-size:12px ; text-align:right}

.copy_text3{	width:100%;	float:left; ; text-align:right}
.copy_text3 img{	width:100%;	}
}
@media all and (max-width:768px) and (min-width:100px) {
.copy_l{ display:none}
.copy_r{display:none}
.copy_r_m{ float:left; width:100%; display:block}

.bottom_btn{	width:100%;	float:left; margin-bottom:20px }
.bottom_btn ul li{	float:left; border:1px solid #525660; margin-left:-1px }
.bottom_btn ul li a.btnst{width:100%;	float:left; padding:10px 10px; text-align:center; color:#fff; font-size:12px; background-color:#000000}

.copy_text1{	width:100%;	float:left; margin-bottom:5px; color:#fff; font-size:12px;text-align:left }

.copy_text2{	width:100%;	float:left; margin-bottom:10px; color:#999999; font-size:11px ; text-align:left}
.copy_text3{	width:100%;	float:left; ; text-align:left}
.copy_text3 img{	width:80%;	}
}




@media all and (min-width:1024px) {
.sub_titlebox{	width:100%;	float:left; ; text-align: center; height:170px; margin-top:120px}
.sub_titlebox .route{	width:100%;	float:left; ; text-align: center; font-size:14px; color:#666; margin-top:30px; margin-bottom:20px}
.sub_titlebox .route em{ background-color:#666666; color:#fff; font-size:14px; margin-right:5px; padding:0px 5px}
.sub_titlebox .route em a{  color:#fff;}
.sub_titlebox .title_b{	width:100%;	float:left; ; text-align: center; font-size:46px; color:#333;  margin-bottom:30px; letter-spacing: -2px; font-weight: 700}
.sub_titlebox .title_b em{ font-weight:500}
.sub_titlebox .title_line{	width:100%;	float:left; ; text-align: center; display: none }
}
@media all and (max-width:1023px) and (min-width:769px) {
.sub_titlebox{	width:100%;	float:left; ; text-align: center; height:140px; margin-top:0px}
.sub_titlebox .route{	width:100%;	float:left; ; text-align: center; font-size:14px; color:#666; margin-top:30px; margin-bottom:10px}
.sub_titlebox .route em{ background-color:#666666; color:#fff; font-size:14px; margin-right:5px}
.sub_titlebox .route em a{  color:#fff;}
.sub_titlebox .title_b{	width:100%;	float:left; ; text-align: center; font-size:30px; color:#666;  margin-bottom:15px}
.sub_titlebox .title_b em{ font-weight:500}
.sub_titlebox .title_line{	width:100%;	float:left; ; text-align: center; }
.sub_titlebox .title_line img{	width:80px;}
}
@media all and (max-width:768px) and (min-width:100px) {

.sub_titlebox{	width:100%;	float:left; ; text-align: center; height:130px; margin-top:60px}
.sub_titlebox .route{	width:100%;	float:left; ; text-align: center; font-size:14px; color:#666; margin-top:30px; margin-bottom:10px}
.sub_titlebox .route em{ background-color:#666666; color:#fff; font-size:14px; margin-right:5px; padding:0px 3px}
.sub_titlebox .route em a{  color:#fff;}
.sub_titlebox .title_b{	width:100%;	float:left; ; text-align: center; font-size:26px; color:#666;  margin-bottom:15px}
.sub_titlebox .title_b em{ font-weight:500}
.sub_titlebox .title_line{	width:100%;	float:left; ; text-align: center; }
.sub_titlebox .title_line img{	width:80px;}
}




.tab_w9 li{  width:25%; }
.tab_w8 li{  width:12.5%; }

.tab_w7 li{  width:14%; }
.tab_w6 li{  width:16.666%; }
.tab_w5 li{  width:20%; }
.tab_w4 li{  width:150px; } 
.tab_w2 li{   width:200px;}
.tab_w3 li{  width:33%; }
@media all and (min-width:1280px) {
.tab_w8 li{  width:12.5%; }
}
@media all and (max-width:1279px) and (min-width:768px) {
.tab_w8 li{  width:25%;}
.tab_w2 li{   width:50%;}}
@media all and (max-width:768px) and (min-width:100px) {
.tab_w8 li{  width:33.333%; }
.tab_w2 li{   width:50%;}
.tab_w6 li{  width:33.333%;  }
.tab_w5 li{  width:50%; }
}


@media all and (min-width:1280px) {
.tab{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab ul{width:calc(100% - 150px); text-align: center; display: inline-block; vertical-align: middle;}
.tab ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block} 
.tab ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:60px; line-height:60px; text-decoration: none;
} 
.tab ul li.menu .icon{ display:none } 

.tab ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block
} 
.tab ul li.menu_on a:hover{
color:#fff;
} }


@media all and (max-width:1250px) and (min-width:1025px) {.tab{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab ul{width:calc(100% - 150px); text-align: center; display: inline-block; vertical-align: middle; border-top:1px solid #ccc; }
.tab ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:50px; line-height:50px;  border:1px solid #ccc; margin:-1px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block} 
.tab ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:50px; line-height:50px; text-decoration: none;
} 
.tab ul li.menu .icon{ display:none } 

.tab ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:50px; line-height:50px; border:1px solid #00cdeb;  margin:-1px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:50px;
	line-height:50px;
	text-decoration: none; ; display:block
} 
.tab ul li.menu_on a:hover{
color:#fff;
} }



@media all and (min-width:1280px) {
.tab2{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab2 ul{ text-align: center; display: inline-block; vertical-align: middle; }
.tab2 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block} 
.tab2 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:60px; line-height:60px; text-decoration: none;
} 
.tab2 ul li.menu .icon{ display:none } 

.tab2 ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab2 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab2 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block
} 
.tab2 ul li.menu_on a:hover{
color:#fff;
} }
@media all and (max-width:1280px) and (min-width:1025px) {.tab2{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab2 ul{ text-align: center; display: inline-block; vertical-align: middle;}
.tab2 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:50px; line-height:50px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block} 
.tab2 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:50px; line-height:50px; text-decoration: none;
} 
.tab2 ul li.menu .icon{ display:none } 

.tab2 ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:50px; line-height:50px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab2 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab2 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:50px;
	line-height:50px;
	text-decoration: none; ; display:block
} 
.tab2 ul li.menu_on a:hover{
color:#fff;
}}







@media all and (min-width:1280px) {

.tab3{
	width:100%;
	display:block;
	margin-bottom:80px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab3 ul{ text-align: center; display: inline-block; vertical-align: middle;}
.tab3 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:16px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block;  width:280px} 
.tab3 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:16px;  height:60px; line-height:60px; text-decoration: none;; letter-spacing:-1px
} 
.tab3 ul li.menu .icon{ display:none } 

.tab3 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:16px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  width:280px} 
.tab3 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#fff;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab3 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:16px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab3 ul li.menu_on a:hover{
color:#fff;
} 




.tab4{
	width:100%;
	display:block;
	margin-bottom:80px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab4 ul{ text-align: center; display: inline-block; vertical-align: middle;width:100%; border-left:1px solid #ccc; }
.tab4 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:16px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab4 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:16px;  height:60px; line-height:60px; text-decoration: none;; letter-spacing:-1px
} 
.tab4 ul li.menu .icon{ display:none } 

.tab4 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:16px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  } 
.tab4 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#fff;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab4 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:16px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab4 ul li.menu_on a:hover{
color:#fff;
} 


}

@media all and (max-width:1024px) and (min-width:769px) {
.tab{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab ul{width:calc(100% - 80px); text-align: center; display: inline-block; vertical-align: middle;; border-top:1px solid #ccc;}
.tab ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:40px; line-height:40px;  border:1px solid #ccc; margin:-1px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:40px; line-height:40px; text-decoration: none;
} 
.tab ul li.menu .icon{ display:none } 

.tab ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:-1px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block
} 
.tab ul li.menu_on a:hover{
color:#fff;
} 


.tab2{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab2 ul{width:calc(100% - 80px); text-align: center; display: inline-block; vertical-align: middle;; border-top:1px solid #ccc;}
.tab2 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:40px; line-height:40px;  border:1px solid #ccc; margin:-1px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab2 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:14px;  height:40px; line-height:40px; text-decoration: none;
} 
.tab2 ul li.menu .icon{ display:none } 

.tab2 ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:14px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:-1px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab2 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab2 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block
} 
.tab2 ul li.menu_on a:hover{
color:#fff;
} 

.tab3{
	width:100%;
	display:block;
	margin-bottom:80px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab3 ul{ text-align: center; display: inline-block; vertical-align: middle;}
.tab3 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:16px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block;  width:280px} 
.tab3 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:16px;  height:60px; line-height:60px; text-decoration: none;; letter-spacing:-1px
} 
.tab3 ul li.menu .icon{ display:none } 

.tab3 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:16px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  width:280px} 
.tab3 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#fff;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab3 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:16px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab3 ul li.menu_on a:hover{
color:#fff;
} 

.tab4{
	width:100%;
	display:block;
	margin-bottom:80px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab4 ul{ text-align: center; display: inline-block; vertical-align: middle;width:100%; border-left:1px solid #ccc; }
.tab4 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:16px; height:60px; line-height:60px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab4 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:16px;  height:60px; line-height:60px; text-decoration: none;; letter-spacing:-1px
} 
.tab4 ul li.menu .icon{ display:none } 

.tab4 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:16px;  height:60px; line-height:60px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  } 
.tab4 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#fff;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab4 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:16px;
	height:60px;
	line-height:60px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab4 ul li.menu_on a:hover{
color:#fff;
} 


}
@media all and (max-width:768px) and (min-width:100px) {
.tab{
	width:100%;
	display:block;
	margin-bottom:0px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab ul{width:calc(100% + 5px); text-align: center; display: inline-block; vertical-align: middle; border-top:1px solid #ccc;}

.tab ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:40px; line-height:40px;  border:1px solid #ccc; margin:-1px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:12px;  height:40px; line-height:40px; text-decoration: none;
} 
.tab ul li.menu .icon{ display:none } 

.tab ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:12px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:-1px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:12px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block
} 
.tab ul li.menu_on a:hover{
color:#fff;
}
.tab2{
	width:100%;
	display:block;
	margin-bottom:0px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab2 ul{width:calc(100% + 5px); text-align: center; display: inline-block; vertical-align: middle; border-top:1px solid #ccc;}

.tab2 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:14px; height:40px; line-height:40px;  border:1px solid #ccc; margin:-1px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; } 
.tab2 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:12px;  height:40px; line-height:40px; text-decoration: none;
} 
.tab2 ul li.menu .icon{ display:none } 

.tab2 ul li.menu_on{ float:left;  background-color:#00cdeb; text-align:center; color:#fff; font-size:12px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:-1px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block} 
.tab2 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#f7f7f7;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab2 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:12px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block
} 
.tab2 ul li.menu_on a:hover{
color:#fff;
} 

.tab3{
	width:100%;
	display:block;
	margin-bottom:20px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab3 ul{ text-align: center; display: inline-block; vertical-align: middle; 	width:100%; border-left:1px solid #ccc;}
.tab3 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:12px; height:40px; line-height:40px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block;  width:50%} 
.tab3 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:12px;  height:40px; line-height:40px; text-decoration: none;; letter-spacing:-1px
} 
.tab3 ul li.menu .icon{ display:none } 

.tab3 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:14px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  width:50%} 
.tab3 ul li.menu_on .icon{ position:absolute; bottom:-15px; width:20px; height:20px; background-color:#fff;  border-right: 20px solid transparent;
    border-top: 20px solid  transparent; z-index:9; left:50%; margin-left:-10px;   -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg); } 
.tab3 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:12px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab3 ul li.menu_on a:hover{
color:#fff;
} 

.tab4{
	width:100%;
	display:block;
	margin-bottom:30px;
	text-align: center;
	overflow: hidden;
	 z-index:9; position:relative
} 
.tab4 ul{ text-align: center; display: inline-block; vertical-align: middle;width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc;  }

.tab4 ul li.menu{ float:left; background-color:#ffffff;  text-align:center; color:#999999; font-size:12px; height:40px; line-height:40px;  border:1px solid #ccc; margin:0px 0px 0px -1px ; box-sizing:border-box   z-index:99;; display:block; border-top:none } 
.tab4 ul li.menu a{ float:left; width:100%; text-align:center; color:#999999; font-size:12px;  height:40px; line-height:40px; text-decoration: none;; letter-spacing:-1px
} 
.tab4 ul li.menu .icon{ display:none } 

.tab4 ul li.menu_on{ float:left;  background-color:#393c46; text-align:center; color:#fff; font-size:12px;  height:40px; line-height:40px; border:1px solid #00cdeb;  margin:0px 0px 0px -1px; box-sizing:border-box; position:relative ;; display:block; border:1px solid #393c46;  } 
.tab4 ul li.menu_on .icon{display:none  } 
.tab4 ul li.menu_on a{
	float:left;

	width:100%;
	text-align:center;
	color:#fff;
	font-size:12px;
	height:40px;
	line-height:40px;
	text-decoration: none; ; display:block; letter-spacing:-1px
} 
.tab4 ul li.menu_on a:hover{
color:#fff;
} 
 
}
.bottom_link{ display:none
} 
@media all and (max-width:768px) and (min-width:100px) {
	
.bottom_link{ display:block; position:fixed; bottom:0px; height:60px; background-color:#FFF; border-top:1px solid #ccc; z-index:999999999999999; width:100%
} 
.bottom_link ul li{ width:25%; float:left} 
.bottom_link ul li .img{ width:100%; float:left; text-align:center; padding:5px 0px 0px 0px} 
.bottom_link ul li .text{ width:100%; float:left; text-align:center; color:#333; font-size:12px} 

}




/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.cs_quick{width: 280px;  position: fixed; right: 20px; bottom: 20px; background-color: rgba(38,38,38,0.70); padding: 10px 0px 0px 0px!important; border-radius: 10px; overflow: hidden;   backdrop-filter: blur(10px); z-index: 9999; 
	 -webkit-animation: quick_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: quick_ani 2s forwards;animation-delay:0.5s;   bottom:-180px; border: 2px solid #333
}
.cs_quick .tel{width: 100%; float: left; text-align: center;  display: flex;  justify-content: center;  align-items: center; padding: 20px 0px;   flex-direction:column; box-sizing: border-box}
.cs_quick .tel em{width: auto; float: left;  font-size:16px; line-height: 100%; color: #fff;  margin-bottom: 10px }	
	
.cs_quick .tel .inum{width: auto; float: left; font-weight: 700; font-size:30px; line-height: 100%; color: #fff;  padding-left: 30px;  position: relative }
.cs_quick .tel .inum .icon{ position: absolute;left: -5px; top: 0px; color: #Fff; content: "\eade";   font-family: unicons-line;    width: 30px; height: 30px;  animation-name:quick_ani_icon;
            animation-duration: 0.7s;
            animation-iteration-count: infinite; display: flex;  justify-content: center;  align-items: center; }
.cs_quick .tel .inum .icon:before{ position: absolute; left: 0px; top: -3px; color: #Fff; content: "\eade";   font-family: unicons-line;  font-size: 30px; width: 30px; height: 30px;  display: flex;  justify-content: center;  align-items: center;  }

	
.cs_quick .quick_btn{width: 100%; float: left; display: grid;display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 2px }
.cs_quick .quick_btn .quick_kakao{width: 100%; float: left; padding: 20px 0px 20px 20px ;  color: #fff; font-size: 14px;  position: relative ; background-color: #2c2c2c; text-align: center; cursor: pointer}
.cs_quick .quick_btn .quick_kakao:before{ position: absolute ;left: 30px; top: 20px; content: "";   background: url("../_img/common/ka_icon.svg")no-repeat; background-size: 20px; z-index: 3; width: 30px; height: 30px;}
.cs_quick .quick_btn .quick_kakao:hover{ background-color: #41382C;}
.cs_quick .quick_btn .online{width: 100%; float: left;  padding: 20px 0px 20px 20px ;  color: #fff; font-size: 14px;   position: relative; background-color: #2c2c2c ; text-align: center; cursor: pointer}
.cs_quick .quick_btn .online:before{ position: absolute; left: 25px; top: 20px; content: "\e969"; color: #fff;  font-family: unicons-line; font-size: 20px}

.cs_quick .quick_btn .online:hover{ background-color: #41382C;}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.cs_quick{width: 100%;  position: fixed; left: 0px; bottom: 60px; background-color: rgba(38,38,38,0.70); padding: 10px 0px 0px 0px!important; overflow: hidden;   backdrop-filter: blur(10px); z-index: 9999; height:80px}
.cs_quick .tel{width: 100%; float: left; padding: 5px 20px 10px;  flex-direction:column; box-sizing: border-box ; }
.cs_quick .tel em{width: auto; float: left;  font-size:12px; line-height: 100%; color: #fff;  margin-bottom: 10px; position: absolute; left: 20px; top:20px }	
	
	
.cs_quick .tel .inum{width: auto; float:left;font-weight: 700;  font-size:24px; line-height: 100%; color: #fff;  padding-left: 30px;  position: relative;margin-top:25px }

.cs_quick .tel .inum .icon{ position: absolute;left: -5px; top: -3px; color: #Fff; content: "\eade";   font-family: unicons-line;    width: 30px; height: 30px;  animation-name:quick_ani_icon;
            animation-duration: 0.7s;
            animation-iteration-count: infinite; display: flex;  justify-content: center;  align-items: center; }
.cs_quick .tel .inum .icon:before{ position: absolute; left: 0px; top: -3px; color: #Fff; content: "\eade";   font-family: unicons-line;  font-size: 30px; width: 30px; height: 30px;  display: flex;  justify-content: center;  align-items: center;  }
	
	
.cs_quick .quick_btn{width: 30%; float: left;  position: absolute; right:20px; top: 25px}
.cs_quick .quick_btn .quick_kakao{width: 100%; float: left; padding: 10px 0px 10px 20px ;  color: #fff; font-size: 14px;  position: relative ; background-color: #2c2c2c; text-align: center; cursor: pointer; border-radius: 5px}
.cs_quick .quick_btn .quick_kakao:before{ position: absolute ;left: 10px; top: 8px; content: "";   background: url("../_img/common/ka_icon.svg")no-repeat; background-size: 20px; z-index: 3; width: 30px; height: 30px;}
.cs_quick .quick_btn .quick_kakao:hover{ background-color: #41382C;}
.cs_quick .quick_btn .online{width: 100%; float: left;  padding: 15px 0px 15px 20px ;  color: #fff; font-size: 14px;   position: relative; background-color: #2c2c2c ; text-align: center; cursor: pointer; display: none}
.cs_quick .quick_btn .online:before{ position: absolute; left: 25px; top: 15px; content: "\e969"; color: #fff;  font-family: unicons-line; font-size: 20px}

.cs_quick .quick_btn .online:hover{ background-color: #41382C;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


@keyframes  quick_ani {
  0% {
 bottom:-180px;border: 2px solid #333
  }
	95% {
 bottom: 30px;border: 2px solid #000
  }
  100% {
 bottom: 20px;border: 2px solid #000
  }
}


@keyframes  quick_ani_icon {
  0% {
 transform:rotate(0deg) 
  }
	25% {
 transform:rotate(45deg) 
  }
	 50% {
 transform:rotate(-20deg) 
  }
  100% {
 transform:rotate(0deg) 
  }
}