@charset 'utf-8';

/* 공통 */
/*
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Montserrat', sans-serif;
*/
#wrap { overflow:hidden;}


.clearfix:after { content:""; display:block; clear:both; }
.inner { max-width:1400px; position:relative; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.inner2 { max-width:1200px; position:relative; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.inner3 { max-width:1300px; position:relative; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.inner4 { max-width:1000px; position:relative; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}


/* 헤더 */
header { position:fixed; width:100%; left:0; top:0; z-index:9999; background:url("/img/common/top_backbg.jpg") repeat-y center center;  *background:rgba(0,0,0,0.2);
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-ms-transition:all 0.4s;
}
header #hd_top { border-bottom:0px solid rgba(255,255,255,0.1); }
header .logo { position:absolute; left:56px; top:15px;}
header nav { text-align:center; }
header nav .gnb { display:inline-block; }
header nav .gnb > li { float:left; position:relative;}
header nav .gnb > li > a {  font-size:18px; font-weight:500; letter-spacing:-0.5px; *text-shadow:2px 2px 2px rgba(0,0,0,0.5); color:#fff; font-family: 'Noto Sans KR', sans-serif; text-transform:uppercase; display:block; padding:31px 40px; position:relative;}
header nav .gnb > li > a:after { content:""; width:100%; height:3px; background:#45b6fe; display:block; position:absolute; left:0; margin-left:-8px; bottom:-3px; z-index:11;  opacity:0;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-ms-transition:all 0.4s;
}
header nav .gnb > li:hover > a:after { 
opacity:1;
}
header nav .gnb > li > .depth2 { position:absolute; text-align:left; padding-left:40px; z-index:10; padding-top:35px; display:none; width:100%;}
header nav .gnb > li > .depth2 > li { margin-bottom:12px;}
header nav .gnb > li > .depth2 > li:last-child { margin:0; }
header nav .gnb > li > .depth2 > li > a { color:#ddd; font-size:15px;}
header nav .gnb > li > .depth2 > li > a:hover { color:#45b6fe; }
header nav .gnb > li .depth3 {display: none;}


header .lang { position:absolute; right:100px; top:33px;}
header .lang ul { }
header .lang ul li { margin-right:16px; float:left;}
header .lang ul li:last-child { margin:0;}
header .lang ul li a { font-family: 'Kanit', sans-serif; font-weight:700; color:#bbb; text-transform:uppercase; font-size:15px; }
header .lang ul li.on a { color:#1395e8; }
header .menu_btn { width:85px; height:81px; position:absolute; right:0; top:0; border-left:1px solid rgba(255,255,255,0.1); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-ms-transition:all 0.4s;
}
header .menu_btn button { width:100%; height:100%; border:none; background:#fff url("/img/common/menu_btn.png") no-repeat center; }


header.on { *background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2)}
header.on .lang ul li.on a { color:#1395e8;}
header.on .lang ul li a { color:#666;}
header.on nav .gnb > li > a  { color:#fff;}
header.on .menu_btn  {*background:#4e4e50;}
header nav .top { display:none;}
.gnbBg { position:fixed; width:100%; height:238px; background:rgba(0,0,0,0.7); display:none;}

#all_menu { position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; padding-top:115px; display:none;}
#all_menu .gnb { }
#all_menu .gnb > li { width:23%; padding:0 1%; margin-bottom:5%; float:left; text-align:center;}
#all_menu .gnb > li > a {  color:#fff; font-size:30px; font-family: 'Kanit', sans-serif; display:block; border-bottom:1px solid #515253; padding:0 20px 37px 20px; position:relative;}
#all_menu .gnb > li:hover  > a { color:#45b6fe; }
#all_menu .gnb > li:hover > a:after { content:""; width:160px; height:3px; background:#45b6fe; display:block; position:absolute; left:50%; bottom:-2px; margin-left:-80px;}
#all_menu .gnb > li > .depth2 { text-align:left; padding:30px 0 0 100px;}
#all_menu .gnb > li > .depth2 > li {  line-height:1.4; margin-bottom:12px;}
#all_menu .gnb > li > .depth2 > li > a { font-weight:300; color:#eee; font-size:18px;}
#all_menu .gnb > li > .depth2 > li:hover > a { color:#45b6fe; }
#all_menu .close_btn { text-align:center; margin-bottom:96px;}
#all_menu .close_btn button { width:43px; height:43px; background:url("/img/sub/all_close.png") no-repeat center; border:none; display:inline-block; 
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-ms-transition:all 0.4s;
}
#all_menu .close_btn button:hover { 
}
#all_menu .depth3 {display: none;}

/* .gnbBg.on {} */


@media screen and (max-width:1400px){
	.inner { padding:0 15px;}
    header nav .gnb > li > a {  font-size:16px; padding:31px 30px;}
	header .lang { position:absolute; right:116px; top:33px;}
	header .logo { left:10px; top:15px;}
}

@media screen and (max-width:1200px){
    .inner2 { padding:0 15px;}
    
	header .lang { display:none; }
	header { height:70px; border-bottom:1px solid rgba(255,255,255,0.15);}
	header .logo { left:10px; top:10px;}
	header nav { position:fixed; width:90%; max-width:426px; background:#fff; height:100%; right:0; top:0; z-index:300; padding:30px 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  right:-426px;}
	header nav .gnb { display:block; }
	header nav .gnb > li { float:none; text-align:left; border-bottom:1px solid #e1e1e1;}
	header nav .gnb > li > a { padding:0 40px; height:46px; line-height:46px; }
	header nav .gnb > li.on > a { background:#acacac; color:#fff;}
	header nav .gnb > li > .depth2 { position:static; display:block; padding-top:0; background:#f5f5f5; padding:26px 60px; border-top:1px solid #e1e1e1; display:none;}
	header nav .gnb > li > a:after { display:none; }
	header .lang ul li a, 
	header nav .gnb > li > a {
		color: #222;
    }
    header.on .lang ul li.on a {color: #fff;}
	header nav .gnb > li > .depth2 > li > a {position:relative; color:#666;}
	header nav .gnb > li > .depth2 > li > a:focus,
	header nav .gnb > li > .depth2 > li > a:hover { font-weight:500;}
	header nav .gnb > li > .depth2 > li > a:hover:before { content:""; width:6px; height:6px; background:#45b6fe; display:block; position:absolute; left:-18px; top:8px; }
	header { }
	.gnbBg { height:100%; left:0; top:0;}
	header nav .top {background:#2b3e64; display:block; position:relative;}
	header nav .top .nav_logo { text-align:left;}
	header nav .top .nav_logo img {}
	header nav .top .close_btn { position:absolute; right:0; top:-10px;}
	header nav .top .close_btn button { width:48px; height:48px; background:url("/img/common/close_btn.png") no-repeat center; border:none;}
	header nav .lang { position:static; margin:30px 0 7px;}
	header nav .lang ul {}
	header nav .lang ul li { margin:0; width:25%; text-align:center; border-right:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	header nav .lang ul li:last-child { border:none; }
	header nav .lang ul li a { background:#acacac; color:#fff; height:40px; line-height:40px; display:block;}
	header nav .lang ul li.on a { background:#45b6fe; color:#fff;}
	#all_menu { display:none !important;}
	header .menu_btn { width:70px; height:70px; }
}


/* subTopWrap */
.subTopWrap {position: relative; z-index: 30; }
.subTopWrap .bigTitle {transition:1s all; opacity:0; transform:translate(0,-30px); position: relative; z-index: 1;padding-top:0px; text-align: center; font-size:40px; line-height:40px; color:#ffffff; font-weight:500; text-shadow:2px 2px 8px black;}

.subTopWrap .bgBox {position: absolute; left:0; top:0; width: 100%; height: 100%; overflow:hidden;}
.subTopWrap .bgBox span {transition:2s all; transform:scale(1.1); position: absolute; left:0; top:0; width: 100%; height: 100%;  }

body.load .subTopWrap .bigTitle { transform:translate(0,0); opacity:1;}
body.load .subTopWrap .bgBox span { transform:scale(1);}

.subTopWrap .lnbWrap {position: absolute; left:0; bottom:0; width:100%; z-index: 10; border-bottom:1px solid #dddddd; }
.subTopWrap .lnbWrap .in {width:1400px; margin:0 auto;  background:#fff; height:60px; }
.subTopWrap .lnbWrap .btnHome {float:left; width:60px; height: 60px; background:#bd1c25 url('/img/common/btn_home.png') center no-repeat; text-indent:-999em;}
.subTopWrap .lnbWrap .lnbList {position: relative; float:left; width: 21%; margin-left:-1px; }
.subTopWrap .lnbWrap .lnbList p a {position: relative; display: block; font-size: 18px;  font-weight:600; height: 60px; line-height:60px; padding-left: 20px; color:#444444;  border-right:1px solid #dddddd; }
.subTopWrap .lnbWrap .lnbList p a:after {content:''; position: absolute; right:20px; top:50%; margin-top:-4px; width: 12px; height: 7px; background:url('/img/common/ico_subn.png') no-repeat;}
.subTopWrap .lnbWrap .lnbList ul {position: absolute; left:0; top:60px; width: calc(100% - 2px);  background:#fff; border:1px solid #dddddd; border-top:none; display: none;}
.subTopWrap .lnbWrap .lnbList ul li {border-top:1px solid #dddddd;}
.subTopWrap .lnbWrap .lnbList ul li:first-child {/* border-top:none; */}
.subTopWrap .lnbWrap .lnbList ul a {display: block; font-size: 16px;  height: 49px; line-height:49px; padding-left: 20px; color:#555555; }
.subTopWrap.active .lnbWrap {position: fixed; left:0; bottom:auto; top:0; background:#fff; width: 100%; transition:.3s all; }
.subTopWrap.active .in {}
.subTopWrap.active  {}

@media all and (max-width:1400px) {
   .subTopWrap .lnbWrap {width: 100%; margin-left: 0; left:0;}
   .subTopWrap .lnbWrap .in {width: 100%; margin:0 auto;  background:#fff; height:60px; }
}

@media all and (max-width:1024px) {
   .subTopWrap .lnbWrap .in {width: 100%; margin:0 auto;  background:#fff; height:40px; }
   .subTopWrap .lnbWrap .btnHome {width:40px; height: 40px; }
   .subTopWrap .lnbWrap .lnbList p a {height: 40px; line-height:40px; padding-left: 20px; font-size: 15px;}
   .subTopWrap .lnbWrap .lnbList {position: relative; float:left; width: 30%; margin-left:-1px; }
   .subTopWrap .lnbWrap .lnbList ul a {font-size: 15px;  height: 39px; line-height:39px; padding-left: 20px; }
}

@media all and (max-width:767px) {
   .subTopWrap .lnbWrap .lnbList {position: relative; float:left; width: 40%; margin-left:-1px; }
}

/* footer */
footer { background:#222; font-size:14px; }
footer #ft_top { padding:50px 0 0px; border-bottom:1px solid #333; }
footer #ft_top .ft_logo { width:250px;}
footer #ft_top address { line-height:1.6;
width:calc(100% - 250px);
width:-webkit-calc(100% - 250px);
width:-moz-calc(100% - 250px);
}
footer section { position:relative;}
footer #ft_top address p { margin-bottom:25px; color:#c5c4c4; line-height:1.8}
footer #ft_top address p span { display:inline-block; margin-right:30px;}
footer #ft_top address p span:last-child { margin:0; }
footer #ft_top .ft_logo,
footer #ft_top address { float:left;} 
footer #ft_top .topBtn { position:absolute; right:0; top:0; }
footer #ft_top .topBtn button { background:url("/img/common/topBtn.png") no-repeat center #666; width:27px; height:27px; border:none;}


footer #ft_bot { padding:20px 0 30px;}
footer #ft_bot .copy { text-align:center; font-weight:600; font-size:12px; color:#666; text-transform:uppercase;}
footer #ft_bot .ft_menu { position:absolute; right:0; top:10px}
footer #ft_bot .ft_menu ul { }
footer #ft_bot .ft_menu ul li { float:left; border-right:1px solid #ccc; margin-right:10px; padding-right:10px;}
footer #ft_bot .ft_menu ul li:last-child { margin:0; padding:0; border-right:0px solid #ccc;}
footer #ft_bot .ft_menu ul li a { color:#fff;}

@media screen and (max-width:1200px){
    footer #ft_top { padding:30px 0 20px; border-bottom:1px solid #333; }
	footer #ft_top address p span { display:inline-block; margin-right:10px;}
	footer #ft_top .ft_logo, 
	footer #ft_top address { float:none; text-align:left; width:95%; margin:0 auto}
	footer #ft_top address { margin-top:25px;}
	footer #ft_bot .ft_menu { position:static; text-align:center; margin-top:20px;}
	footer #ft_bot .ft_menu ul { display:inline-block; }
	}