@charset "utf-8";

/* **************************************** *
 * 공통클래스_Layout
 * **************************************** */
@import url('reset.css');
@import url('common.css');
@import url('font.css');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Montserrat:100,200,300,400,500,600,700,800,900|play:400,700&display=swap');

#wrap {position:relative; overflow:hidden; width:100%; min-width:320px;} /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
#container {position:relative; width:100%;}
#content{position:relative; min-height: 50vh;}

.area {position:relative; max-width:1400px; margin:0px auto; *zoom:1;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area:after{clear:both; display:block; content:"";}

.area_page {max-width:1200px;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */

/* PC & 모바일 노출 */
.mShow{display:none !important}
.pcShow{display:block !important}

@media all and (max-width:1500px){
	.area {padding:0 50px 0 50px;}
}
@media all and (max-width:1100px){
	.area {padding:0 30px 0 30px;}
}
@media all and (max-width:900px){
	.mShow{display:block !important}
	.pcShow{display:none !important}

	.area {padding:0 15px 0 15px;}
}




/* **************************************** *
 * HEADER
 * **************************************** */
#header {position:fixed; left:0; width:100%; top:-100px; z-index:99999; transition:top .6s ease-in-out; -webkit-transition:top .6s ease-in-out;}
#header:after {content: ''; position: absolute; top: 100px; right:0; bottom:0 ; left:0;margin: 0 auto;width:100%; border-top: 1px solid rgba(255,255,255,0.12);}
#header.load {top:0;}
#header .gnbWrap {max-width:900px; height: 100px; margin: 0 auto; text-align: center;}
#header h1 {z-index:999; position:absolute; width:120px; height:50px; background-image:url("../images/common/logo_white.png"); background-repeat:no-repeat; -webkit-background-size: cover;
background-size:cover; left:50px; top:20px;}
#header h1 a {display:block; height:100%;}
#header #gnb > li {position:relative; float:left; width:20%; line-height:100px;}
#header #gnb > li > a {display:block;color:#fff; font-size:18px; font-weight:500;}
#header #gnb > li .depth2 {position:absolute; display:none; width:180px;padding: 20px 0;}
#header #gnb > li:hover > a{background-color:#fff; color:#102d69; font-weight:500;}
#header #gnb > li:hover .depth2{display:block; background-color:#102d69;}
#header #gnb > li .depth2 > li > a {display:block; color:#687d9a; font-size:15px; line-height:36px; font-weight:400;}
#header #gnb > li:hover .depth2 > li:hover > a {color:#fff; font-weight:400;}

#header  .btn_all_menu {z-index: 99;position: absolute;width: 36px;height: 34px;right: 50px;top: 50%;margin-top: -17px;}
#header  .btn_all_menu span{position: absolute;right: 0;height: 3px;height: 3px;background-color: #fff;
transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;}
#header  .btn_all_menu span.barTop{width: 100%;top: 11px;}
#header  .btn_all_menu span.barBot{width: 70%;top: 21px;}
#header  .btn_all_menu:hover span.barTop {width: 70%;}
#header  .btn_all_menu:hover span.barBot{width: 100%;}
#header  .btn_all_menu.on .barTop{width: 100%;transform:rotate(45deg);-webkit-transform:rotate(45deg);top:16px;}
#header  .btn_all_menu.on .barBot{width: 100%;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:16px;}
#header  .btn_all_menu.on:hover span.barTop {width:100%;}
#header  .btn_all_menu.on:hover span.barBot{width: 100%;}

#header.active {background-color: #fff;}
#header.active h1 {background-image:url("../images/common/logo.png");}
#header.active.fff h1 {background-image:url("../images/common/logo_white.png");}
#header.active #gnb > li > a{color: #000;}
#header.active #gnb > li:hover > a{color: #074398;}
#header.active .btn_all_menu span {background-color: #000;}

.allMenuWrap {display: none;z-index: 98;position: absolute;width: 100%;top: 0;box-sizing:border-box;background-color: rgba(12,40,81,.95);}
.allMenuWrap .allMenuWrap_inner {display: table;table-layout: fixed;height: 100%;width: 100%;overflow-y: auto;}
.allMenuWrap .allMenu_inner{display: table-cell;vertical-align: middle;height: 100%;}
.allMenu{width: 1500px;margin: 0 auto;}
.allMenu > li {float: left;width: 20%;color: #fff;padding: 0 20px;box-sizing:border-box;cursor:pointer}
.allMenu > li > p {display: none;font-size: 36px;line-height: 38px;font-weight: bold;}
.allMenu > li > a {font-size: 25px;line-height: 38px;font-weight: bold;}
.allMenu .dep2 > li {margin-top: 29px;}
.allMenu .dep2 > li > a{font-size: 22px;line-height: 30px;}
.allMenu .dep3 {margin-top: 4px;}
.allMenu .dep3 > li > a{font-size: 18px;line-height: 30px;font-weight: 300;}
.allMenu .dep3 > li > a:before{content:'-';margin-right: 4px;}
.allMenu > li  a {color: #fff;display: inline-block;vertical-align: top;}
.depth2s {margin-top:20px;}
.depth2 li a{font-weight: 100; }

/* -------- 미디어쿼리 -------- */
@media screen and (max-width:1500px){
	.allMenu {width:100%; padding:0 30px; box-sizing:border-box}
}
@media screen and (max-width:1200px){
	#header {height:80px;}
	#header:after {top:80px;}
	.gnbWrap {display: none;}

	#header h1 {width:100px; height:42px; margin-top:-5px; left:30px;}
	#header .btn_all_menu{right:30px;}
	
	.allMenu {padding: 0;}
	.allMenu > li{float: none;width: auto;padding: 20px 30px;text-align: center;}
	.allMenuWrap {padding-bottom: 80px; }
	.allMenuWrap .allMenuWrap_inner{padding-top: 80px;display: block;box-sizing:border-box;}
	.allMenuWrap .allMenu_inner {display: block;}
	.allMenu .dep2 {display: none;background-color: #0d213f;padding: 10px 0 }
	.allMenu > li > p {display: block;font-size: 18px;line-height: 50px;font-weight: 500;padding: 0 30px;}

	.allMenu .dep2 > li {margin-top: 0;}
	.allMenu .dep2 > li > a{font-size: 15px;line-height: 40px;padding: 0 30px;} 
	.allMenu .dep3 {margin-top: 0;}
	.allMenu .dep3 > li > a{font-size: 13px;line-height: 32px;padding: 0 30px;}
	.allMenu > li > a {}
}
@media screen and (max-width:800px){
	#header {height:60px;}
	#header:after {top:60px;}

	#header h1 {width:90px; height:38px;left:15px; top:15px;}
	#header .btn_all_menu{right:15px;}
}





/* **************************************** *
 * 서브 비주얼
 * **************************************** */
#visual {position:relative; width:100%; height:400px; overflow:hidden;}
.sub-visual-img {height:450px; background-size:cover !important; -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 3000ms  ease-in-out ;
	-moz-transition:transform 3000ms ease-in-out ;
	-o-transition:transform 3000ms ease-in-out ;
	-ms-transition:transform 3000ms ease-in-out ;
    transition:transform 3000ms ease-in-out ;}
#visual.sub .sub-visual-img {
	-ms-transform: scale(1.0,1.0) rotate(0.01deg);
    -o-transform: scale(1.0,1.0) rotate(0.01deg);
    -moz-transform: scale(1.0,1.0) rotate(0.01deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.01deg);
     transform: scale(1.0,1.0) rotate(0.01deg);
}
.visual-img-wrap {overflow:hidden;}
#visual .visual-txt-con {position:absolute; top:-30px; left:50%; width:100%; max-width:600px; height:100%; margin-left:-300px; overflow:hidden; color:#fff; letter-spacing:-0.5px; opacity:0;filter:Alpha(opacity=0); -webkit-transition:all 1.0s; -moz-transition:all 1.0s; -o-transition:all 1.0s; transition:all 1.0s;}
#visual .visual-tit {position:relative; font-weight:400; text-align:center; font-size:44px; letter-spacing:-0.5px; padding-top:180px; line-height:60px; color:#fff;  font-family: 'play', sans-serif;
	opacity:0; filter:Alpha(opacity=0); -webkit-transition:all 1.5s; -moz-transition:all 1.5s;-o-transition:all 1.5s; transition:all 1.5s;}
#visual .visual-sub-txt {font-size:14px; text-align:center; letter-spacing:2.5px; opacity:0.7; filter:Alpha(opacity=70); font-family: 'play', sans-serif; font-weight:400; text-transform:uppercase;}
#visual.active .visual-txt-con {top:0; opacity:1;filter:Alpha(opacity=100);}
#visual.active .visual-tit {top:0; opacity:1;filter:Alpha(opacity=100);}
 
@media all and (max-width:800px){
	#visual .visual-txt-con {max-width:300px; height:100%; margin-left:-150px;}
	#visual, .sub-visual-img {height:240px;}
	#visual .visual-tit {padding-top:90px; font-size:28px; line-height:30px;}
	#visual .visual-sub-txt {font-size:12px; line-height:17px;padding-top:10px;}
}





/* **************************************** *
 * 서브 메뉴
 * **************************************** */
#sideMenuM {display:none}
#sideMenu {position: relative; z-index: 1; width:100%; height:60px; background-color: rgba(0,0,0,0.55); margin-top: -60px;}
#sideMenu .side-menu-inner{text-align:center;}
#sideMenu .side-menu-inner > ul{position: relative; *display:inline;*zoom:1;}
#sideMenu .side-menu-inner3 > ul > li {width: 21% !important;}
#sideMenu .side-menu-inner > ul > li {position: relative;display: inline-block;  width: 12%;}
#sideMenu .side-menu-inner > ul > li > a{display: block; color:#fff; font-size:16px; letter-spacing:0.25px; height: 60px; font-weight:400;}
#sideMenu .side-menu-inner > ul > li > a span{display: table; width: 100%; height: 60px;}
#sideMenu .side-menu-inner > ul > li > a span em{display: table-cell; vertical-align: middle; line-height: 1.2;}
#sideMenu .side-menu-inner > ul > li > a:hover {color:#00aeef;}
#sideMenu .side-menu-inner > ul > li.on > a{color:#00aeef;font-weight:600}

.nav-on-icon.main-move-line {width:100%; height: 5px; position: absolute; left: 0; right: 0; top: 55px;}
.nav-on-icon.main-move-line > span {position: absolute; width: 16px; height: 18px; bottom: -10px; left: 0; background: url("../images/common/snb_menu_on.png") no-repeat; background-position: 50%;}
#sideMenu .side-menu-inner > ul > li.on:before {content: '';position: absolute; left: 0; right: 0; bottom: -10px; width: 16px; height: 18px; margin: 0 auto; background: url("../images/common/snb_menu_on.png") no-repeat; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}

@media all and (max-width:800px){
	#sideMenu{display:none}
	#sideMenuM{display:block; position:relative; background-color: rgba(0,0,0,0.55); height: 40px;}
	#sideMenuM .location-to-home-btn{position:absolute; width:39px; height:40px; left:0px; top:0px; background-color:#fff; text-align:center; border-right:1px solid #ddd;}
	#sideMenuM .location-to-home-btn i{color:#797979; font-size:20px; line-height:40px;}
	#sideMenuM .menu-location{position:relative; margin-top: -40px;}
	#sideMenuM .menu-location > .cur-location{position:relative; display:block; height:40px; padding-left:15px; }
	#sideMenuM .menu-location.location1 > .cur-location{border-right:1px solid #ddd;}
	#sideMenuM .menu-location > .cur-location span{line-height:40px; color:#fff; font-weight:500; font-size:15px;}
	#sideMenuM .menu-location > .cur-location .arrow{position:absolute; top:50%; color: #fff; right:10px; width:20px; height:20px;margin-top:-8px; font-size:20px;}
	#sideMenuM .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
	#sideMenuM .menu-location .location-menu-con{display:none; position:absolute; top:40px; left:-1px; width:calc(100% - 1px); border:1px solid #ddd; background-color:#fff; z-index:11; }
	#sideMenuM .menu-location .location-menu-con li a{display:block; padding:10px; font-size:14px;}
	#sideMenuM .menu-location .location-menu-con li.on{position:relative;}
	#sideMenuM .menu-location .location-menu-con li.on a{padding-left:25px; color:#00aeef; font-weight:500;}
	#sideMenuM .menu-location .location-menu-con li.on a:before{content:""; position:absolute; top:50%; left:10px; width:7px; height:3px; margin-top:-1px; background-color:#000}
}





/* **************************************** *
 * FOOTER
 * **************************************** */
#footer{padding:0 50px;background:#13161f;}
#footerPartnerListContent + #footer{border-top:0}
#footerInner{position:relative;}
.footer-left-con{float:left;}
.footer-right-con{float:right;}

/* -------- FOOTER :: 상단 -------- */
#footerTop{height:110px; border-bottom: 1px solid rgba(255,255,255,0.12);}
.to-top-btn{
	position:fixed; bottom:-150px; right:50px; display:block; width:46px; height:46px; background-color:#0bbbef; text-align:center; line-height:46px; color:#fff; z-index:99;
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;transition:all 0.6s
}
.to-top-btn.fixed{bottom:50px; opacity:1.0;filter:Alpha(opacity=100);}

.family-site {z-index:100; position:absolute; top:40px; left:0; width:200px; height:50px; border:1px solid rgba(255,255,255,0.15);}
.family-site button {display:block; position:relative; width:100%; height:50px; color:#fff; font-size:14px; line-height:48px; text-align:left; text-indent:20px;  
	background:url("../images/common/img_family_site_arr.png") no-repeat  right 20px;}
.family-site .active_content {display:none; position:absolute; bottom:49px; left:0; width:100%; padding:20px; border:1px solid rgba(255,255,255,0.15); box-sizing:border-box; background-color:#102d69;}
.family-site.active .active_content {display:block;}
.family-site ul li a {display: block; font-size:12px; color:#ddd;}


.lang_all_wrap {position: absolute;top: 30px;right: 120px;height: 50px;z-index: 3;height: 36px;}
.lang_box {border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 0px;}
.lang_sub_wrap {display: none;border-top: 1px solid rgba(255,255,255,0.15);}
.lang_box .lang_box_a {font-size: 16px;padding:0px 40px 0 20px;height: 36px;line-height: 36px;color: #fff;position: relative;top: 0px;left: 0px;}
.lang_box .lang_box_a:after {content: "";position: absolute;right: 15px;top: 8px;width: 6px;height: 6px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;transform:rotate(-45deg);transition:all .3s ease}

.lang_box:hover {}
.lang_box:hover .lang_box_a {}
.lang_box:hover .lang_box_a:after {transform:rotate(135deg);top: 11px;}
.lang_box:hover .lang_sub_wrap {display: block;background-color: #f5f5f5;}
.lang_sub_box a {font-size: 12px;color: #555;height: 30px;line-height: 30px;display: inline-block;margin: 0 auto;}
.lang_sub_box a:hover {color: #00aeef}
.lang_sub_box { display: flex; }

#header.active .lang_box {border: 1px solid rgb(0 0 0 / 15%);border-radius: 0px;}
#header.active .lang_sub_wrap {border-top: 1px solid rgba(255,255,255,0.15);}
#header.active .lang_box .lang_box_a {font-size: 16px;padding:0px 40px 0 20px;height: 36px;line-height: 36px;color: #999;position: relative;top: 0px;left: 0px;}
#header.active .lang_box .lang_box_a:after {content: "";position: absolute;right: 15px;top: 8px;width: 6px;height: 6px;border-left: 1px solid #999;border-bottom: 1px solid #999;transform:rotate(-45deg);transition:all .3s ease}


/* -------- FOOTER :: 하단 -------- */
#footerBottom{padding:20px 0 50px 0; }
.footer-address-list dl{display:inline-block; vertical-align:middle; color:#aaa; font-size:13px; line-height:22px; margin-left:0px; }
.footer-address-list dl:first-child{margin-left:0}
.footer-address-list dl dt,
.footer-address-list dl dd{vertical-align:middle; display:inline-block;}
.footer-address-list dl dt.en{font-family: 'play', sans-serif;font-size:15px;}
.footer-address-list dl dd.en{font-family: 'play', sans-serif;font-size:14px;}
.footer-address-list dl dt{margin-right:15px; color:#666;}
.footer-address-list span{display:inline-block; margin-right:15px}
.footer-address-list a{color:inherit}
.footer-copyright{font-family: 'play', sans-serif;font-size:14px; color:#999;padding-top:20px }
.footer-copyright b{color:#0bbbef}

@media all and (max-width:1300px){
	#footer{padding:0 30px}
	.to-top-btn.fixed{bottom:190px;}
	#footerBottom .footer-left-con,
	#footerBottom .footer-right-con{float:none;}
	.footer-address-list{margin-bottom:10px}
}

@media all and (max-width:1024px){
	#footer{padding:0 15px}
	#footerTop{padding:20px 0}
	.to-top-btn.fixed{bottom:5%; right:5%}
	.footer-left-con,.footer-right-con{float:none;}

	#footerBottom{padding:18px 0;}
	.footer-address-list dl{display:block; margin-left:0; font-size:13px;}
	/*.footer-address-list dl dt {width:90px}*/
	.footer-address p{font-size:12px; line-height:18px;}
	.footer-address span{display:inline-block;}
	.footer-address a{display:block;}
	.footer-address .copyright, .footer-copyright{font-size:12px;}
}

@media all and (max-width:430px){
	.footer-address-list dl{display:block; margin-left:0; font-size:11px;}
	.footer-address .copyright, .footer-copyright{font-size:11px;}
}