@charset "utf-8";

#skipNavi{position:relative;}
#skipNavi a{display:block;position:absolute;left:0;top:-30px;width:150px;text-align:center;color:#fff;background:#000;z-index:1000;}
#skipNavi a:focus, #skipNavi a:hover{top:0px;}

#wrap {position:relative;}
.inner {position:relative;width:100%;margin: 0 auto;}

#header {position:fixed;width:100%;height:99px;background:transparent;border-bottom:1px solid rgba(255,255,255,.2);z-index:100}
#header .inner {max-width:1760px;}
#logo a {font-size:35px;color:#fff;display:inline-block;padding-top:15px;position: absolute; z-index: 100;width:140px;}
#logo a img{ width:100%; }
#header .tel {position:absolute;right:0;top:43px;color:#26cbe4;font-size:22px;font-family:'sans-serif';}
#header .mobile-button {display:none;}
#gnb {position:absolute;top:0;right: 150px;transition:all .3s;}
#gnb .gnb-depth1:after {content: "";display: table;table-layout: fixed;clear: both;}
#gnb .gnb-depth1 > li {float:left;position:relative;width:170px;}
#gnb .gnb-depth1 > li > a {position:relative;display:block;width:100%;/* height:69px;line-height:59px; */text-align:center;font-size:20px;color:#fff;font-family:'Noto Sans KR';padding:42px 0 36px;}
#gnb .gnb-depth1 {}
#gnb .gnb-depth1>li {}
#gnb .gnb-depth1:after {}
#gnb .gnb-depth1 li a {}
#gnb .gnb-depth2 {display: none;position:absolute;top:99px;left:0;width:159px;height:0;z-index:100;text-align: center;}
#gnb .gnb-depth1 .active .gnb-depth2 {background: #fff;top: 98px;border-top:1px solid #e7a800;}
#gnb .gnb-depth2 li {}
#gnb .gnb-depth2 li a {display: block;padding: 13px 0 11px;font-size: 16px;color: #777;font-family: 'Noto Sans KR';}
.gnb-bg {position:absolute;left:0;top:99px;width:100%;background:#fff;opacity:0.4;height:0;z-index:-1;webkit-transition:all 0.1s ease;-moz-transition:all 0.1s ease;-o-transition:all 0.1s ease;-ms-transition:all 0.1s ease;transition:all 0.1s ease}
#gnb .gnb-depth2 li a:hover {color:#000;}

.gnb-on #gnb .gnb-depth1 > li > a {color:#000;}
.gnb-on #gnb .gnb-depth1 > li > a:hover {color:#e7a800}
.gnb-on #header {background:#fff;}


#footer .inner {max-width:1320px;font-size:13px;color:#7f7f7f;padding:60px 0;}
#footer * {font-family:'Noto Sans KR';}
.f-logo {position:absolute;right:0;top:50px;}
.f-logo img{width:120px}
.site-area {margin-bottom:15px;}
.site-area a {font-size:14px;color:#000;display:inline-block;margin-right:13px;font-weight:bold;}
.corp-area {overflow:hidden;margin-bottom:10px;}
.corp-area li {float:left;margin-right:16px;}
#gnb .gnb-depth2{height:auto; background-color:#fff;}
#gnb .gnb-depth2 li:hover a{font-weight:600;}
@media only screen and (max-width: 1240px){
	#gnb {padding-left:20%}

}

@media only screen and (max-width: 1300px){
	#header {height:65px;position:inherit;}
	#header .inner{height:100%; }
	.main-container {margin-top: -65px;z-index: 1;}
	#logo{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
	#logo a {display: block; padding-top:unset; position:unset; width:100px; }
	#header .tel {top: 50%;font-size: 14px; right:10px;transform: translateY(-50%); }
	#header .mobile-button {position: absolute;left: 10px;
    top: 50%;
    width: 50px;
    height: 50px;
    display: block;
    transform: translateY(-50%);}
	#header .mobile-button a{display: block;z-index: 1;height: 100%;}
	#header .mobile-button a i{width:44px;display:inline-block;position:absolute;left:50%;margin-left:-22px;margin-top:-10px;top:50%;height:2px;background:#000;border-radius:5px;}
	#header .mobile-button a i:before{content:'';width:100%;top:13px;height:2px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	#header .mobile-button a i:after{content:'';width:100%;bottom:13px;height:2px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	#header .mobile-button a em{display:inline-block;width:100%;position:absolute;bottom:0;text-align:center;font-style:normal;font-weight:bold;color:#000;}
	.gnb-bg {display:none;}
	.gnb-on #gnb {left:0;}
	#gnb {padding-left:0;background:#fff;z-index: 1;top: 65px;left: -100%; right:unset; width:100% ;}
	#gnb .inner {/* position:fixed;height:100%; */}
	#gnb .gnb-depth1>li {float: none;width: 100%;}
	#gnb .gnb-depth1 li a {padding: 10px 0;font-size: 16px;}
	#gnb .gnb-depth1 .gnb-depth2 {position:initial;}
	#gnb .gnb-depth1 .tit {background: linear-gradient(270deg, #2892b1 30%, #fff);}
	#gnb .gnb-depth1 a.tit:hover {color:#fff !important;}
	#gnb .gnb-depth1 .gnb-depth2 {width: inherit;height: inherit;padding-top:0;}

	.f-logo {right:10px;top:10px;}
	#footer .inner {padding: 30px 5%;}
	.f-logo img{width:80px; }
.gnb-on .gnb-bg {height:260px;}
	.gnb-on #logo a,
.gnb-on #gnb .gnb-depth1 > li > a {color:#000;}

.gnb-on #gnb .gnb-depth2 {height: 260px;padding-top: 15px;display:block;}
}


/* 공통 레이아웃 */ 
@media screen and (min-width:1200px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:120px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:60px 0 30px 0;margin-bottom:30px; position:relative;}
	#subvisual h2::after {content:"";position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:15px;color:#fff;line-height:1.5;padding-bottom:100px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-color:#2792b2; color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

	#subvisual .sub-tabmenu li a {display:block; font-size:20px; font-weight:900; line-height:70px; letter-spacing:-1px; color:#fff; position:relative;}
}
@media screen and (min-width:800px) and (max-width:1199px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:120px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:60px 0 30px 0;margin-bottom:30px; position:relative;}
	#subvisual h2::after {content:"";position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:15px;color:#fff;line-height:1.5;padding-bottom:100px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-color:#2792b2; color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

	#subvisual .sub-tabmenu li a {display:block; font-size:20px; font-weight:900; line-height:70px; letter-spacing:-1px; color:#fff; position:relative;}
}
@media screen and (max-width:799px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:40px;}
	#subvisual h2 {color:#fff;font-size:30px;font-weight:900;padding:30px 0 15px 0;margin-bottom:30px; position:relative;}
	#subvisual h2::after {content:"";position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:13px;color:#fff;line-height:1.5;padding-bottom:50px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-color:#2792b2; color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

	#subvisual .sub-tabmenu li a {display:block; font-size:15px; line-height:50px; letter-spacing:-1px; color:#fff; position:relative;}
}


@media screen and (min-width:1200px){
	#container .inner{position:relative;max-width:1420px !important;margin:0 auto;}
	#subvisual .inner {position:relative;max-width:1420px !important;margin:0 auto;}
}
@media screen and (min-width:800px) and (max-width:1199px){
	#container .inner{position:relative;max-width:90% !important;margin:0 auto;}
	#subvisual .inner {position:relative;max-width:90% !important;margin:0 auto;}
}
@media screen and (max-width:799px){ 
	#container .inner{position:relative;max-width:90%!important;margin:0 auto;}
	#subvisual .inner {position:relative;max-width:90%!important;margin:0 auto;}
} 


@media screen and (min-width:1320px){
	#container .sub_inner{position:relative;max-width:1320px !important;margin:0 auto; padding:80px 0; font-size:17px; line-height:30px; color:#777; white-space:normal; word-break:keep-all; }
	#quick-link {position:fixed;right:20px;bottom:70px;z-index:9999;}
	#quick-link a {display:block;margin-top:10px;}
	#quick-link .ka-ico-fi:after{content:"kakaotalk 오픈카톡문의"; margin-left: 10px; font-size: 20px; line-height: 40px; display: table-cell; vertical-align: middle; float: right; }
	#quick-link img {width:40px;border-radius:100%;}
}
@media screen and (min-width:800px) and (max-width:1319px){
	#container .sub_inner{position:relative;max-width:100% !important;margin:0 auto; padding:80px 50px; font-size:17px; line-height:30px; color:#777; white-space:normal; word-break:keep-all;}
	#quick-link {position:fixed;right:20px;bottom:70px;z-index:9999;}
#quick-link a {display:block;margin-top:10px;}
#quick-link .ka-ico-fi:after{content:"kakaotalk 오픈카톡문의"; margin-left: 10px; font-size: 20px; line-height: 40px; display: table-cell; vertical-align: middle; float: right; }
#quick-link img {width:40px;border-radius:100%;}
}
@media screen and (max-width:799px){ 
	#container .sub_inner{position:relative;max-width:100% !important;margin:0 auto; padding:40px 20px; font-size:14px; line-height:22px; color:#777; white-space:normal; word-break:keep-all;}
	#quick-link {position:fixed;right:20px;bottom:70px;z-index:9999;}
#quick-link a {display:block;margin-top:10px;}
#quick-link img {width:40px;border-radius:100%;}
} 

.inner:after{content:''; display:block; clear:both; visibility:hidden;}

#container .inner{padding:50px 0;}

/* 서브 - 콘텐츠 */ 
#container {display:block;position:relative;background:#fff;} 

/* 서브페이지 - 타이틀 */ 
#container .sub-title {color:#111;font-size:32px;text-align:left;padding-bottom:50px;margin-top:0px;}

/* 서브페이지 - 이용약관, 개인정보취금방침, 이메일수집거부 */ 
#container .sub-privacy {}
#container .sub-privacy .subject {color:#1a1a1a;font-size:15px;margin-bottom:10px;font-weight:500;}
#container .sub-privacy .content {color:#9a9a9a;font-size:13px;margin-bottom:50px;line-height:150%;text-align:justify;}

/* 링크모듈 */


#scroll-link {display:none;position:fixed;right:20px;bottom:20px;width:40px;height:40px;line-height:20px;font-size:10px;color:#fff;text-align:center;background:#000;border-radius:100px;padding:10px;cursor:pointer;opacity:0.6;z-index:99999;}
#scroll-link:hover {filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}