@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(0,0,0,.1); z-index:100; background-color:rgba(255,255,255,.5);}
#header .inner {max-width:1760px;}
#logo a {width:140px; font-size:35px;color:#fff;display:inline-block;padding-top:20px;position: absolute; z-index: 100;}
#logo a img{width:100%;}
#header .tel {position:absolute;right:0;top:55px;color:#3289ff;font-size:22px; font-family:'Noto Sans Medium'; font-weight:900;}
#header .tel:nth-of-type(2){top:25px;}
#header .mobile-button {display:none;}
#gnb {position:absolute;top:0;left: 0;width:100%;padding-left:40%;transition:all .3s;}
#gnb .gnb-depth1:after {content: "";display: table;table-layout: fixed;clear: both;}
#gnb .gnb-depth1 > li {float:left;position:relative;padding:0 15px;}
#gnb .gnb-depth1 > li > a {position:relative;display:block;width:100%;/* height:69px;line-height:59px; */text-align:center;font-size:20px;color:#000;font-family:'Noto Sans Medium';padding:42px 0 36px;}
#gnb .gnb-depth1 {}
#gnb .gnb-depth1>li {}
#gnb .gnb-depth1:after {}
#gnb .gnb-depth1 li a {}
#gnb .gnb-depth1 li a strong{font-weight:400;}
#gnb .gnb-depth2 {display: none;position:absolute;top:99px;left:50%;transform:translateX(-50%);width:159px;height:0;z-index:100;text-align: center;}
#gnb .gnb-depth1 .active .gnb-depth2 {background: #fff;top: 98px;border-top:1px solid #3289ff;}
#gnb .gnb-depth2 li {}
#gnb .gnb-depth2 li a {display: block;padding: 13px 0 11px;font-size: 16px;color: #777;font-family: 'Noto Sans Medium';}
.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-bg {height:260px;}
.gnb-on #header {background:#fff;}
.gnb-on #logo a,
.gnb-on #gnb .gnb-depth1 > li > a {color:#000;}
.gnb-on #gnb .gnb-depth1 > li > a:hover {color:#3289ff}
.gnb-on #gnb .gnb-depth2 {height: 260px;padding-top: 15px;display:block;}

#footer .inner {max-width:1320px;font-size:13px;color:#7f7f7f;padding:60px 0;}
#footer * {font-family:'Noto Sans Medium';}
.f-logo {position:absolute;right:0;top:75px;}
.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;}

.sub_top_blank {width:100%; height:99px;}

@media only screen and (max-width: 1240px){
	#gnb {padding-left:20%}

}

@media only screen and (max-width: 985px){
	#header {height:65px;position:inherit;}
	.main-container {margin-top: -65px;z-index: 1;}
	#logo a {width:120px; font-size: 30px;text-align: center;display: block;  left:50%; transform:translateX(-50%); padding-top:5px;}
	#header .tel {top: 35px;font-size: 14px;}
	#header .tel:nth-of-type(2){top:15px;}
	#header .mobile-button {position: absolute;left: 10px;top: 7px;width: 40px;height:50px;display:block;}
	#header .mobile-button a{display: block;z-index: 1;height: 100%;}
	#header .mobile-button a i{width:30px;display:inline-block;position:absolute;left:50%;margin-left:-17px;margin-top:-10px;top:50%;height:2px;background:#000;border-radius:5px;}
	#header .mobile-button a i:before{content:'';width:100%;top:7px;height:2px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	#header .mobile-button a i:after{content:'';width:100%;bottom:7px;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:7px;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%;}
	#gnb .inner {/* position:fixed;height:100%; */}
	#gnb .gnb-depth1 > li {float: none;width: 100%; padding:0}
	#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, #3289ff 30%, #fff);}
	#gnb .gnb-depth1 a.tit:hover {color:#fff !important;}
	#gnb .gnb-depth1 .gnb-depth2 {width: inherit;height: inherit;padding-top:0; transform:inherit;}
	
	.sub_top_blank {width:100%; height:65px;}

	.f-logo {right:10px;top:10px;}
	#footer .inner {padding: 30px 5%;}
}


/* 공통 레이아웃 */ 

@media screen and (min-width:1200px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:40px;}
	#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:150px;}
	#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:#3289ff; 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:40px;}
	#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:150px;}
	#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:#3289ff; 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:20px;}
	#subvisual h2 {color:#fff;font-size:30px;font-weight:900;padding:30px 0 15px 0;margin-bottom:15px; 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:70px;}
	#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:#3289ff; 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:1320px){
	#container .inner{position:relative;max-width:1320px !important;margin:0 auto; font-size:17px; color:#777; line-height:30px; white-space:normal; word-break:keep-all; }
	#subvisual .inner {position:relative;max-width:1320px !important;margin:0 auto;}
}
@media screen and (min-width:800px) and (max-width:1319px){
	#container .inner{position:relative;max-width:90% !important;margin:0 auto; font-size:17px; color:#777; line-height:30px; white-space:normal; word-break:keep-all; }
	#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;  font-size:14px; color:#777; line-height:22px; white-space:normal; word-break:keep-all; }
	#subvisual .inner {position:relative;max-width:90%!important;margin:0 auto;}
} 

.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;}

/* 링크모듈 */
#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%;}

#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;}