@charset "utf-8";
/*
 * File       : layout.css
 * Author     : gylee
 * Guideline  : BKstyle.1.1
 *
 * Dependency : css/reset.css

 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) SCROLL TOP
 * 06) CONTAINER
 * 07) PAGE
 * 08) SEARCH
 * 09) PRIVACY
 * 10) 404
 */

/*  @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
 

/* **************************************** *
 * GLOBAL
 * **************************************** */
 

html{font-size: 6.25%; width: 100%;}

body.lang-ko {font-family:  'Montserrat' ,'NanumSquareNeo-Medium', 'Gothic A1', 'NotoSansKR', sans-serif;}
body.lang-en {font-family:  'Montserrat' ,'NanumSquareNeo-Medium', sans-serif;}
body {overflow-x: hidden;word-break: keep-all; font-size: 16px; }

a {color: #222;text-decoration: none;}
[lang="en"] {font-family: 'Montserrat', sans-serif;}

/* WRAP */
.wrap {max-width: 1520px;margin: 0 auto; position: relative;}

/* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;height: 100px; background: #fff;position: fixed;  border-bottom: 1px solid rgba(255,255,255, .3); top: 0;left: 0;
	-webkit-transition: all .3s, -webkit-box-shadow 400ms, background .3s;
    transition: all .3s, -webkit-box-shadow 400ms, background .3s;
    -webkit-transition: all .3s, background .3s, -webkit-box-shadow 400ms;
    transition: all .3s, background .3s, -webkit-box-shadow 400ms;
    transition: all .3s, box-shadow 400ms, background .3s;
    transition: all .3s, box-shadow 400ms, background .3s, -webkit-box-shadow 400ms;
    transition: all .3s, box-shadow 400ms, -webkit-box-shadow 400ms, background .3s;
	z-index: 500; box-shadow:4px 15px 15px 0 rgba(0,0,0,0.035) }

.header_inner{height: 100%;max-width:1520px;margin: 0 auto;position: relative;}
.sub_header .header_inner{max-width: 1280px;}
.menu_container_wrap{ position: relative;z-index: 1;font-size: 0;line-height: 1; text-align: right;}
.menu_container {display: inline-block; vertical-align: top; position: relative;}
.header-container-bg {position: fixed;top: 100px;left: 0;right: 0;background: #fff;opacity: 0;visibility: hidden;z-index: 1;-webkit-transition: all .3s;transition: all .3s;-webkit-box-shadow: 0 15px 10px rgba(34, 34, 34, .02);box-shadow: 0 15px 10px rgba(34, 34, 34, .02);}
body.menu-open #header{background: #fff}
body.menu-open .header-container-bg {opacity:1; visibility:visible;-webkit-transition: all .3s;transition: all .3s;}

/* LOGO */
#logo {width: 200px;height: 35px;position: absolute;left: 0;top: 50%; margin-top: -17px ;z-index: 2;-webkit-transition: top .3s;transition: top .3s;float:left; }
#logo a {display: block;width: 100%;height: 100%; font-size: 0; background: url(../images/common/logo.png) no-repeat; background-size: 100%;width:200px; }
#logo a svg, #logo a img {display: block;width: 100%;height: 100%;}

/* MENU */
.menu_container_wrap{position: relative; z-index: 1; font-size: 0; line-height: 1; text-align: right;}
.menu_container {position: relative;font-size: 0;text-align: right;z-index: 1;}
#menu {display: inline-block;vertical-align: top;position:relative;z-index:10; padding-right: 100px;}
#menu:after { right: 0; background: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(40%, #ffffff)); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);}
#menu a {display: block;line-height: 1.7; -webkit-transition: all 0.3s;transition: all 0.3s; }

/* login */
.top_nav{position: absolute; right: 0; top: 40px;  z-index: 11; height: 20px; display:inline-block; }
.top_nav .login{background: url(../images/common/icon_login.svg) no-repeat left top; padding-left: 25px; background-size: 18px 18px; display:none;}
.top_nav .logout{background: url(../images/common/icon_logout.svg) no-repeat left top; padding-left: 25px; background-size: 18px 18px;}
.top_nav .text{padding-right: 10px;font-size: 10px; display:none;}
/* 1depth */
#menu > li {display: inline-block;vertical-align: top;position: relative;  text-align: center;}
#menu > li > a {line-height:99px;padding: 0 40px;position: relative;font-size: 17px;font-weight: 500;color: #222; font-family: 'NanumSquareNeo-Bold'; }  
/* #menu > li:last-child>a{padding-right:0;} */
/* 2depth */
#menu ul.sub_menu {width: 100%;padding:20px 0 30px; transition: all 0.3s;display:none;}
html body.menu-open #menu > li:hover > ul, html #menu > li.focusin > ul {display:block;}
#menu > li > ul { position: absolute;left:0;top: 100%;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#menu > li > ul > li > a {padding: 6px 20px;font-size: 16px;color: #222; }

/* 메뉴 하단 줄 */
html #menu > li:after{  clear:both;content:'';display:block;  height: 0; width: 0; background: #222; -webkit-transition: all 0.3s;transition: all 0.3s;bottom: 0; }
html body.menu-open #menu > li:hover:after{ height:2px; width: 100%; bottom: 2px}

/* mobile */
#all_menu, #small_menu-close, #smal-menu-overlay, #small_menu_container {display: none;}
#all_menu {display: none; position: absolute; right: 0; width: 60px; height: 60px; line-height: 0;}

/* ----------------------------------------------------------------
    aside
----------------------------------------------------------------- */
.side_menu {height: 100%;overflow: auto;}
.top_area {position: fixed;left: 0;width: 100%;height: 100px;padding: 0 24px; background: #000;z-index: 100;
	border-bottom: 1px solid rgba(225,225,255, .3);}
.top_area > * {height: 100%;}
.top_area #logo{left: 24px;}
.top_area .all_close {display: block; width: 24px;height: 24px;position: absolute;
    top: 50%; margin-top: -12px;right: 24px;z-index: 550;cursor: pointer;}
.all_close .small_menu span:nth-child(1){top: 10px;transform: rotate(45deg);  -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); background: #fff;}
.all_close span:nth-child(2){top: 10px;transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); background: #fff;}
.side_menu .scroll-y {margin: 90px 0 20px;overflow-x: hidden;overflow-y: auto;}
.side_gnb {padding: 20px 0;}
.side_gnb li{line-height: 60px;}
.side_gnb a {display: inline-block;padding: 0 0 0 30px;font-weight: 400;color: #fff;letter-spacing: -.05px;font-size: 18px;width: 100%;}
.side_gnb a span{width: 80%; display:inline-block;}
#aside_cont {
	position: fixed;top: 0;right: 0;bottom: 0;width: 90%;max-width: 340px;background: #000;
	visibility: hidden;
	-webkit-transform: translate(400px, 0);-moz-transform: translate(400px, 0);-ms-transform: translate(400px, 0);-o-transform: translate(400px, 0);transform: translate(400px, 0);
 -webkit-transition: all .2s ease;-moz-transition: all .2s ease; -ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;
	z-index: 20001;
}
#aside_cont.slide_left {
	-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	visibility: visible;
}
.aside_overlay {
	position: fixed;top: 0;left: 0;width: 100%;height: 100%;visibility: hidden;
 -webkit-transition: all .2s ease;
 -moz-transition: all .2s ease;
 -ms-transition: all .2s ease;
 -o-transition: all .2s ease;
 transition: all .2s ease;
}
aside .aside_overlay {background: rgba(0, 0, 0, .3);visibility: visible;z-index: 20000;}

.side_gnb .sub_menu{display:none; padding: 0 0 20px 10px;}
.side_gnb .sub_menu li{line-height: 36px;}
.side_gnb .sub_menu li a{font-size: 16px; }
.side_gnb li.main_menu.has_2depth > a span{position: relative; padding-right: 40px; width: 100%;}
.side_gnb li.main_menu.has_2depth > a span:after {display: block;height: 18px;position: absolute;right: 30px;top: 50%;margin-top: -8px;font-family: 'bk-font';
	content: '\e90a';font-size: 18px;font-weight: normal;text-align: center;line-height: 18px;color: #fff;
	-webkit-transition: -webkit-transform 350ms;transition: -webkit-transform 350ms;transition: transform 350ms;transition: transform 350ms, -webkit-transform 350ms; will-change:transform;}
.side_gnb li.main_menu.has_2depth.active > a span:after {
	-webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg); 
}
body.no-scroll{position: fixed; width:100%; height: 100%; overflow: hidden;}
/* -------- Header :: Sub 헤더  숨기기  -------- */
#header.sub-hidden{/* top:-106px; */ 
	-ms-transform: translateY(-100px); 
    -o-transform: translateY(-100px); 
    -moz-transform: translateY(-100px);
    -webkit-transform: translateY(-100px); 
     transform: translateY(-100px);
}
#header.sub-hidden.up{/* top:0px; */
	-ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0); 
     transform: translateY(0);	
}
/* state */

/* **************************************** *
 * footer
 * **************************************** */
 #footer{position: relative;padding: 60px 0 50px 0; border-top: 1px solid rgb(238, 238, 238);}
 #footer h4{ width:100%; padding-bottom: 50px; display: block;width: 100%;height: 100%; font-size: 0; background: url(../images/common/logo_footer.png) no-repeat; background-size: 100%;width:150px;}
 #footer .copyright{display: block;}
#footer .info{ float:left; width: 100%; padding-bottom: 50px;}
#footer dl dt, #footer dl dd{float:left; font-size: 14px; padding: 4px 0;} 
#footer dl dt{padding-right: 10px; }
#footer dl dt::after{content:":";  position: relative; top: 0; width: 20px; height: 20px; padding-left: 10px;}
#footer dl dd{padding-right: 20px; }
#footer dl dt.clr{clear:both;}
#footer .footer_link{width: 100%; display:block;}
#footer .footer_link ul li{float:left;  padding: 15px 20px 15px 50px; background: url(../images/common/icon_note.gif) no-repeat 20px 50%; border-radius: 5px;}
#footer .footer_link ul li a{color: #fff; font-size:14px;}
#footer .footer_link ul li:first-child{background-color: #d52027;}
#footer .footer_link ul li:last-child{background-color: #7a7a7a; margin-left: 20px;}
#footer .copyright{width:100%; clear:both; padding-top: 30px;}
.sub_wrapper #footer .wrap{max-width:1280px;} 
/* btn top */
.scroll_path{display:block; position:fixed; opacity:0; visibility:hidden; right:30px; bottom:30px; z-index:499; width:48px; height:48px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1); transition:all 200ms linear; transform:translateY(15px); cursor:pointer; border-radius:50px; -webkit-transition:all 200ms linear;}
.scroll_path.active{opacity:1; visibility:visible; transform:translateY(0);}
.scroll_path::after,
.on .fix .scroll_path::after{content:""; display:block; position:absolute; opacity:1; top:50%; left:0; left:50%; z-index:1; width:24px; height:24px; margin:-12px 0 0 -12px; 
    color: #ff8382; background:url('../images/common/btn_top.svg') no-repeat 50% 50%; background-size: 100%; /*transform:rotate(90deg); */ transition:all 200ms linear; cursor:pointer; -webkit-transition:all 200ms linear;}
.scroll_path a{display:block; width:100%; height:100%;}
.scroll_path::before{position:absolute;}
.scroll_path:hover::before{opacity:1;}
.scroll_path svg path{fill:none;}
.scroll_path svg.progress-circle path,
.on .fix .scroll_path svg.progress-circle path{box-sizing:border-box; transition:all 200ms linear; stroke:#ff8382; stroke-width:3; -webkit-transition:all 200ms linear;}

/* **************************************** *
 * CONTAINER
 * **************************************** */
 .main_container {padding-bottom: 240px; overflow:hidden;}

 /* **************************************** *
 * CONTAINER
 * **************************************** */
#container{padding-top: 100px; overflow-x: hidden;}
#container section{min-height: auto;}

/* login */
.login_wrap{background: #ecf0f3 url('../images/common/login_bg.png') no-repeat 50% bottom; background-size: cover; text-align: center; display: flex;
    justify-content: center;align-items: center; height: 100vh;}
.login_wrap h2{font-size: 36px; margin-bottom: 40px;}
.login_wrap .login_box{position: relative; width: 600px;height: 460px;padding: 100px;background-color: #fff;border-radius: 12px; overflow: hidden;}
.login_wrap input[type="submit"]{background: #ee3837; height: 50px; border:none; border-radius: 5px; color: #fff; width: 100%; font-size: 16px; margin-top: 30px;}
.login_wrap .login{margin: 20px 0;}
.login_wrap .login div{margin: 5px 0;}
.login_wrap .login label{width: 60px; text-align: left;}
.login_wrap .login label.error{width: auto; font-size: 14px; color : #ee3837; position: relative; left: 71px; top: 3px; text-align: left;width: 100%;}
.login_wrap input[type="text"], .login_wrap input[type="password"]{width: 340px;}
.login_wrap input[type="text"].error, .login_wrap input[type="password"].error{border: 2px solid red;}
/* **************************************** *
 * sub visual
 * **************************************** */
#container .visual{position: relative; height: 300px; background: #e7e7e7;}

#container .visual .bg{min-height: 300px; text-align: center; transform:scale(1.07); width: 100%; transition:transform 10s; position: absolute;}
#contents{ margin: 0 auto; overflow: hidden; margin-bottom: 60px;}
#contents .wrap, #container .visual .wrap{ max-width: 1280px; }
#visual.visual.visual_loaded.visual_01 .bg{background: url(../images/sub/sub_visual01.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s; }
#visual.visual.visual_loaded.visual_02 .bg{background: url(../images/sub/sub_visual02.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s; }
#visual.visual.visual_loaded.visual_03 .bg{background: url(../images/sub/sub_visual03.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s;}
#visual.visual.visual_loaded.visual_04 .bg{background: url(../images/sub/sub_visual04.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s;}
#visual.visual.visual_loaded.visual_05 .bg{background: url(../images/sub/sub_visual05.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s; }
#visual.visual.visual_loaded.visual_06 .bg{background: url(../images/sub/sub_visual06.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s; }
#visual.visual.visual_loaded.visual_07 .bg{background: url(../images/sub/sub_visual07.png) no-repeat 50% 50%; background-size: cover; transform:scale(1);transition:transform 1.8s; }
#visual.visual .sub_tit{position: relative; z-index: 100; color: #fff; height: 100px;top:90px;}

#visual .sub_tit p{text-align:left; color: #fff; font-size: 18px;}
#visual .sub_tit p.tit1 strong{position:relative;display:block;font-size:40px;font-weight: 700;text-transform:uppercase; padding-bottom: 15px;}
/* 
.sub_tit strong.tit1:before {content:"";position:absolute;top: 50%;right: -30px;width:9px;height:9px;border:2px solid #fff;border-top:none;border-left:none;box-sizing: border-box;transform: rotate(45deg);margin-top: -5px;display: none;}
*/
/* splitting */
#visual .splitting .char{
	-webkit-animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay:calc(0.1s + var(--char-index) * 30ms);;
}

@keyframes text-active-animation {
	from {
		opacity:0;
		filter:Alpha(opacity=0);
		-webkit-transform: translateX(30px); 
		transform: translateX(30px); 
	}
	to {
		opacity:1.0;
		filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
/*  SUB LAYOUT :: 헤더 서브메뉴 */
.sub-wrapper #gnb{border-bottom:0}
.sub-wrapper .header-lang > ul > li > a,
.sub-wrapper .header-lang .lang-open-btn{color:#fff}
.sub-wrapper #headerInnerWrap{background:#0056a4}

#headerSubMenu{position:relative; width:100%;height:50px; z-index:12;  background-color: #f5f5f5; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; }
#headerSubMenu .side_menu_wrapper{width:100%; height:48px;z-index:11; max-width: 1280px;}
#headerSubMenu .con_top_menu{max-width:1480px;margin:0 auto;padding:0 18px 0 0;}
#headerSubMenu .location_home{float:left; width:36px; height:48px; line-height: 48px; }
#headerSubMenu .location_home:before{font-family: 'bk-font'; font-size: 24px;content: '\e905'; }
#headerSubMenu .menu_location{position:relative; float:left;line-height: 48px;}
#headerSubMenu .menu_location:before{position:absolute; top:18px; bottom:18px; left:0; width:1px; background-color:#d2d2d2; content:"";} /* page navigation */
#headerSubMenu .menu_location{position:relative; display:block; height:48px; padding:0 15px; text-align:left}

#headerSubMenu.fixed{position:fixed;top:0px;left:0;right:0}
.error{display: flex; justify-content: center; align-items: center; text-align: center; height: 100vh; background: #f7f6f2;}
.error_page {width:800px; height: 700px;}
.error_page img {width:100%;}
.bg_404 {background: url(../images/common/error_01.png) no-repeat 50% bottom; height: 650px;}
.bg_error {background: url(../images/common/error_02.png) no-repeat 50% bottom; height: 650px;}
.error_page h1 {font-size:80px; font-weight: bold;}
.error_page h3 {font-size:24px;}
.link_error {color: #fff!important;padding: 10px 20px;background: #d52027;margin: 20px 0;display: inline-block; border-radius: 5px}
.contant_box {margin-top:00px;}

/* **************************************** *
* 1480px
* **************************************** */
@media screen and (max-width: 1480px) {
     .header_inner, .wrap {margin: 0 60px; }
}
 /* **************************************** *
* 12000px
* **************************************** */
@media screen and (max-width: 1200px) {
	/* 1depth */
	#menu > li {width: 120px;}
	#menu > li > a {padding: 0 ;font-size: 16px;}  
}
	  
/* **************************************** *
* 1023px
* **************************************** */
@media screen and (max-width: 1024px) {
	/* 모바일 메뉴 보임 */
    header{width: 100%; overflow: hidden;}
	.header_inner, .wrap {margin: 0 24px;}
	.top_nav{display:none;}
	.side_menu .top_nav{
    display: block;
    position: absolute; top: 45px; left: 30px; z-index: 550; width:50%;}
	.side_menu .top_nav a span, .side_menu .top_nav .text, .side_menu .top_nav a {color: #fff;}
	.side_menu .top_nav .login, .side_menu .top_nav .logout {background: none; padding-left: 0;}
	.menu_container {display: none;}
	#all_menu {display: block;width: 24px;height:20px;position: absolute;top: 50%; margin-top: -10px;right: 0px;z-index: 550;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;}
	.small_menu span{position: absolute; width: 100%; height: 1px; background: #111; left: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
   .small_menu span:nth-child(1){top:1px;}
   .small_menu span:nth-child(2){top:10px;}
   .small_menu span:nth-child(3){top:19px;}
   .small_menu.show span:nth-child(1){top:18px; transform: rotate(45deg);  -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); background: #fff;}
   .small_menu.show span:nth-child(2){display:none;  color: #fff;}
   .small_menu.show span:nth-child(3){top:18px; transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);  background: #fff;}
	#header.mobile, body.menu-open #header.mobile{background: #000; height: 100%; overflow-y: scroll;}
	.menu_container_wrap{text-align: left; width:100%;}
	.menu_container.mobile-container {text-align: left; display: block;}
	#header.mobile #menu {width: 100%; padding: 150px 0 50px 0;}
	#menu > li {width: 100%; display: block;}
	#header.mobile  #menu ul.sub_menu li a span{color: #fff; font-size: 30px;}
	#header.mobile #menu > li > a {line-height: 70px;  font-size:36px; padding:0; color: #fff;}  
	#header.mobile  .header-container-bg {background:none;}
	#header.mobile  #menu ul.sub_menu {display:none;position: relative; padding: 0; transition: all 0.3s; }  
	#header.mobile  #menu>li.active ul.sub_menu  {margin-bottom: 20px} 
	#header.mobile  #menu>li ul.sub_menu  > li > a{padding: 0; }
	#header.mobile #menu > li:hover:after { height:0; display:none;}
	.login_wrap .login_box{width: 80%; padding: 30px; height: auto;}
	.login_wrap input[type="text"], .login_wrap input[type="password"]{width: 100%;}
	.login_wrap .login label{display:none; font-size:0; width:0; height:0;}
	.api_section{width: 100%; overflow-x: scroll;}
}
/* **************************************** *
* 860px
* **************************************** */
@media screen and  (max-width: 860px){     
     .slide01 {background-position:26% center;}
     .slide02 {background-position:0% center;}
}
/* **************************************** *
* 540px
* **************************************** */
@media screen and  (max-width: 540px){
    #footer dl dt, #footer dl dd{font-size: 12px;} 
	#footer dl dt{clear:both;}
	#footer .copyright{font-size:13px;}
}