@charset "utf-8";

/* 공통 레이아웃 */ 
@media screen and (min-width:1200px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:90px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:150px 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:#255bbd; 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:50px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:50px 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:#255bbd; 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:40px 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: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:#255bbd; 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:13px; line-height:50px; letter-spacing:-1px; color:#fff; position:relative;}
}

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


@media screen and (min-width:1200px){
	.sub_inner {position:relative;max-width:1200px !important; padding:80px 0; margin:0 auto; font-size:17px; color:#777; line-height:30px; white-space:normal; word-break:keep-all; }
}
@media screen and (min-width:800px) and (max-width:1199px){
	.sub_inner {width:100%; padding:80px 50px; font-size:17px; color:#777; line-height:30px; white-space:normal; word-break:keep-all;}
}
@media screen and (max-width:799px){ 
	.sub_inner {position:relative;max-width:100% !important;margin:0 auto; padding:40px 20px; font-size:14px; color:#777; line-height:22px; white-space:normal; word-break:keep-all;}
} 

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



#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:155px;z-index:100;background:#fff;}
#header>.inner {max-width:1200px;padding: 30px 0 19px;}
#logo a {font-size:48px;color:#000;display:inline-block;font-family:'RaleWay';font-weight:800;letter-spacing: -1px;}
#header .top-user {position:absolute;right:0;top:30px;color:#9999a3;overflow:hidden;}
#header .top-user .user-name {float:left;line-height:40px;margin-right:25px;}
#header .top-user .user-name strong {color:#000;}
#header .top-user .user-btn {float:left;overflow:hidden;min-width:120px;border:1px solid #ddd;border-radius:25px;}
#header .top-user .user-btn a {float:left;width:50%;text-align:center;padding:12px 0 13px;}
#header .top-user .user-btn .btn-left {}
#header .top-user .user-btn .btn-right {background:#fafafa;border-left:1px solid #ddd}

#gnb {border-top:1px solid #ddd;}
#gnb .gnb-wrap {position:relative;width:100%;margin: 0 auto;max-width:1200px;}
#gnb .gnb-wrap .mobile-button {position:absolute;left:0;top:0;}
#gnb .gnb-wrap .mobile-button a {display: block;width: 58px;height: 57px;border-right: 1px solid #ddd;border-left: 1px solid #ddd;}
	.gnb-wrap .mobile-button a i{width:21px;display:inline-block;position:absolute;left:50%;margin-left:-11px;top:27px;height:3px;background:#000;border-radius:5px;}
	.gnb-wrap .mobile-button a i:before{content:'';width:100%;top:-6px;height:3px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	.gnb-wrap .mobile-button a i:after{content:'';width:100%;bottom:-6px;height:3px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
#gnb .gnb-depth1 {padding-left: 19%}
#gnb .gnb-depth1:after {content: "";display: table;table-layout: fixed;clear: both;}
#gnb .gnb-depth1 > li {float:left;position:relative;width:220px;}
#gnb .gnb-depth1 > li > a {display:block;width:100%;text-align:center;font-size:18px;color:#000;font-family:'NanumSquare';padding:20px 0 19px;}

#footer .inner {max-width:1320px;font-size:13px;color:#7f7f7f;padding:60px 0;}
#footer * {font-family:'Noto Sans KR';text-align:center;}
.site-area {margin-bottom:15px;}
.site-area a {font-size:14px;color:#000;display:inline-block;margin-right:13px;font-weight:bold;}
.corp-area {margin-bottom:10px;}
.corp-area li {display: inline-block;margin-right:16px;}

.header-menu{width:100%; background-color:#fff; display:none; position:absolute;   }
.header-menu > ul:after{content:''; display:block; clear:both; visibility:hidden;}
.header-menu > ul{/* width:80%; margin: 0 auto; */ padding:20px 0;padding-left:23%;}
.header-menu > ul > li{width:24%; float:left; padding-left:15px;  }
.header-menu > ul > li > a{font-size:15px; padding:15px; display:block;  }
.header-menu > ul > li > ul > li{line-height:25px; font-size:14px; padding-left:15px; }

@media only screen and (min-width:800px) and (max-width: 1230px){

	#header {position:inherit;height:auto;}
	#logo a {font-size: 38px;margin-left: 15px;}
	#gnb .gnb-wrap .mobile-button a {width: 38px;}
	#gnb .gnb-depth1 {padding-left:10%;}
	#gnb .gnb-depth1 > li {width:-webkit-calc(100% / 4);width:-moz-calc(100% / 4);width:calc(100% / 4);}
	#gnb .gnb-depth1 > li > a { font-size: 15px;}

}
@media screen and (max-width:799px){
	.header-menu > ul > li{width:100%;  padding-left:15px;  }
	#header {position:inherit;height:auto;}
	#logo a {font-size: 38px;}
	#logo a img{width:77%; margin-bottom:10px;}
	#gnb .gnb-wrap .mobile-button a {width: 38px;}
	#gnb .gnb-depth1 {padding-left:10%;}
	#gnb .gnb-depth1 > li {width:-webkit-calc(100% / 4);width:-moz-calc(100% / 4);width:calc(100% / 4);}
	#gnb .gnb-depth1 > li > a { font-size: 15px;}

}