@charset "UTF-8";
/* font */
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 100;
	src: url(/resources/fonts/notokr-thin.eot);
	src: url(/resources/fonts/notokr-thin.eot?#iefix) format('embedded-opentype'),
	url(/resources/fonts/notokr-thin.woff) format('woff'),
	url(/resources/fonts/notokr-thin.ttf) format('truetype');
}
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 300;
	src: url(/resources/fonts/notokr-light.eot);
	src: url(/resources/fonts/notokr-light.eot?#iefix) format('embedded-opentype'),
	url(/resources/fonts/notokr-light.woff) format('woff'),
	url(/resources/fonts/notokr-light.ttf) format('truetype');
}
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 500;
	src: url(/resources/fonts/notokr-regular.eot);
	src: url(/resources/fonts/notokr-regular.eot?#iefix) format('embedded-opentype'),
	url(/resources/fonts/notokr-regular.woff) format('woff'),
	url(/resources/fonts/notokr-regular.ttf) format('truetype');
}
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 700;
	src: url(/resources/fonts/notokr-medium.eot);
	src: url(/resources/fonts/notokr-medium.eot?#iefix) format('embedded-opentype'),
	url(/resources/fonts/notokr-medium.woff) format('woff'),
	url(/resources/fonts/notokr-medium.ttf) format('truetype');
}
@font-face {
	font-family: 'NotoSans';
	font-style: normal;
	font-weight: 900;
	src: url(/resources/fonts/notokr-bold.eot);
	src: url(/resources/fonts/notokr-bold.eot?#iefix) format('embedded-opentype'),
	url(/resources/fonts/notokr-bold.woff) format('woff'),
	url(/resources/fonts/notokr-bold.ttf) format('truetype');
}
html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select{padding:0; margin:0;}
body{font-family:'NotoSans', '돋움', Dotum, '굴림', Gulim, Helvetica, sans-serif; font-size:16px; color:#333; -webkit-text-size-adjust:none; -webkit-overflow-scrolling: touch; word-break: break-all;}
h1, h2, h3, h4, h5, h6, strong,p,li,a,span{font-weight:normal; font-size:100%; line-height:100%;}
fieldset, img, button{border:0;}
img, input, button{vertical-align:top;}
table{border-collapse:collapse;}
address, em{font-style:normal;}
ol, ul{list-style:none;}
hr{display:none;}
a{text-decoration:none; color:#444; -webkit-tap-highlight-color: transparent; outline:none;}
a:hover, a:active{text-decoration:none;}
legend{position:absolute; left:-9999px; top:0}
caption{overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
button{background:none; cursor:pointer; -webkit-tap-highlight-color: transparent; outline:none;}
button::-moz-focus-inner{padding:0; border:0;}

.c_both:after{display:block; content:''; clear:both;}
body.gnb_open{overflow:hidden; width:100%; height:100%;}
input:focus ,select:focus{font-size:16px} 
/* GNB */
#wrap.top_banner_open #header{position:relative;}
#wrap.top_banner_open #header.fixed{position:fixed;}
#header{position:absolute; left:0; top:0; z-index:3000; width:100%;}
#header.fixed{position:fixed;}
#header.fixed.on .menu{background:none;}
#header .logo{display:block; width:128px; height:24px; background:url("/resources/images/common/logo.png") 0 0 no-repeat; background-size:cover;}
#header.fixed .menu .logo{background-image:url("/resources/images/common/logo_02.png");}
#header .menu{position:absolute; width:100%; height:66px; padding:20px 25px;  box-sizing:border-box;}
#header.fixed .menu{background:#fff; border-bottom:1px solid #e5e5e5;}
#header .menu .btn_menu{position:absolute; right:25px; top:20px; display:block; width:24px; height:17px; background:url("/resources/images/common/btn_menu.png") 0 0 no-repeat; background-size:cover;}
#header.fixed .menu .btn_menu{background-image:url("/resources/images/common/btn_menu_02.png");}
#header #gnb .btn_menu{position:absolute; right:25px; top:20px; width:16px; height:16px; background:url("/resources/images/common/btn_close.png") 0 0 no-repeat; background-size:cover;}
#header #gnb{overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling: touch; position:fixed; left:100%; z-index:200; width:76.6%; height:100%; background:#fff; transition:left .5s;}
#header.on #gnb{left:23.4%;}
#header #gnb .gnb_wrap{ position:absolute; left:0; top:0; width:100%; height:101%;}
#gnb .gnb_top{padding:20px 25px; background:#1d3a74;}
#gnb a{display:block; width:100%;}
#gnb .depth1{padding:0 25px;}
#gnb .depth1.on{background:#f3f3f3;}
#gnb .depth1 > a{position:relative; padding:20px 0; border-top:1px solid #c9c9c9; font-weight:700; font-size:18px; color:#333; box-sizing:border-box;}

#gnb .depth1:first-child > a{border-top:0;}
#gnb .depth1 > a:before{content:''; position:absolute; right:0; width:16px; height:9px; background:url("/resources/images/common/gnb_arrow_down.png") 0 0 no-repeat; background-size:cover; transition:.5s;}
#gnb .depth1.on > a:before{transform:rotate(180deg);}
#gnb .depth1.on > a{border-top:0; border-bottom:1px solid #c9c9c9}
#gnb .depth1.on + .depth1 a{border-top:0;}
#gnb .depth1 .sub_box{display:none; padding-top:20px;}
#gnb .depth2{position:relative; padding:0 0 20px 15px; margin-top:25px;}
#gnb .depth2:after{position:absolute; left:15px; bottom:0; width:90%; height:1px; background:#c9c9c9; content:'';}
#gnb .depth2:first-child{margin-top:0;}
#gnb .depth2:last-child:after{display:none;}
#gnb .depth2 > a{font-size:15px; color:#666;}
#gnb .depth3 > li{padding-top:20px;}
#gnb .depth3 > li a{position:relative; padding-left:8px; font-weight:300; font-size:14px;}
#gnb .depth3 > li a:before{position:absolute; left:0; top:5px; width:3px; height:3px; background:#666; border-radius:50%; content:'';}
#gnb .depth3 > li a:hover:before{background:#1d3a74;}
.gnb_inner{margin-bottom:25px;}
.gb_wrap{padding:0 25px 50px;}
.gb_wrap a{display:block; padding:13px 15px; background:url("/resources/images/common/gnb_arrow_right.png") right 15px center no-repeat; background-size:auto 14px; border:1px solid #e5e5e5; font-size:15px; color:#666; box-sizing:border-box;}
#header .gnb_bg{display:none; position:absolute; left:0; top:0; z-index:100; width:100%; height:100vh; background:rgba(0,0,0,.9);}
#header.on .gnb_bg{display:block;}

/* footer */
#footer{position:relative; left:0; bottom:0; z-index:200; width:100%; background:#93979f;}
#footer .footer_wrap{padding:20px 25px;}
.footer_wrap{font-size:13px;}
.footer_wrap .f_logo{float:left; width:130px; margin-right:40px;}
.footer_wrap .f_logo img{width:100%;}
.link_wrap{margin-bottom:20px;}
.link_wrap li{float:left; border-left:1px solid #aeb1b7; text-align:center; box-sizing:border-box;}
.link_wrap li.link01{width:36%; text-align:left;}
.link_wrap li.link02{width:42%;}
.link_wrap li.link03{width:22%; text-align:right;}
.link_wrap li:first-child{padding-left:0; margin-left:0; border-left:none;}
.link_wrap li a{font-weight:300; font-size:12px; color:#fff;}
.link_wrap li.link01 a{font-weight:700;}
.address{margin-bottom:7px; font-size:12px; color:#fff; letter-spacing:-.05em;}
.copy{font-weight:300; font-size:12px; color:#fff; letter-spacing:-.05em;}
.sns_wrap{margin-bottom:15px;}
.sns_inner{float:left; display: flex; align-items: center; margin-top: 20px; }
.sns_inner a{display:inline-block; height:20px;}
.sns_inner a.youtube { height: 18px; }  
.sns_inner a + a { margin-left: 14px; }
.sns_inner a img{ height: 100%; object-fit: center;}
.sns_inner a.coo_logo { width: 100%; height: 30px; }
.sns_inner a.coo_logo img { height: 100%; object-fit: contain; }
.family_wrap{margin-bottom:20px;}
.family_box{float:left; position:relative; background:#93979f;}
.family_box a{display:block; width:185px; padding:10px 0 10px 10px; border:1px solid #bbb; font-weight:300; color:#e1e1e1; letter-spacing:-.05em; box-sizing:border-box;}
.family_box .open_btn{background:url("/resources/images/common/f_arrow_up.png") 160px center no-repeat; background-size:12px auto;}
.family_box.on .open_btn{background-image:url("/resources/images/common/f_arrow_down.png");}
.family_box ul{display:none; position:absolute; left:0; bottom:35px; z-index:10; background:#93979f;}
.family_box ul li a{border-top:none; border-bottom:none;}
.family_box ul li:first-child a{border-top:1px solid #bbb;}
.family_box.on ul{display:block;}
.family{margin-right:4px;}
.lang{float:left;}
.lang a{width:80px;}
.lang .open_btn{background-position:60px center;}

.main_banner{display:none;}
.btn_top{float:right; display:block; z-index:500; width:35px; height:35px; padding-top:17px; background:url("/resources/images/common/f_arrow_top.png") center 5px no-repeat; background-size:10px auto; border:1px solid #aaa; font-size:11px; color:#fff; text-align:center; box-sizing:border-box; -webkit-transition:bottom .3s; transition:bottom .3s;}
.hidden{position: absolute; left: -10000px; top: auto; height: 1px; overflow: hidden;}
.tts ,.hide {position:absolute; width:1px; height:1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

/* radio */
input.radioBtn{position:absolute; left:-9999em;}

input.radioBtn + label{position:relative; padding-left:24px; font-weight:300; font-size:13px; cursor:pointer;}
input.radioBtn + label:before{position:absolute; left:0; top:-2px; width:14px; height:14px; background:#fff; border:2px solid #aaa; border-radius:50%; content:""; text-align:center;}
input.radioBtn:checked + label:before{background:#fff; border-color:#062f87; outline:none;}
input.radioBtn:checked + label:after{position:absolute; left:4px; top:2px; width:10px; height:10px; background:#062f87; border-radius:50%; content:"";}

/* checkbox */
input.custom_chk{position:absolute; left:-9999px;}
input.custom_chk + label{position:relative; padding-left:28px; cursor:pointer; font-weight:300; font-size:16px}
input.custom_chk + label:before{content:""; position:absolute; left:0; top:1px; width:14px; height:14px; text-align:center; background:#fff; border:2px solid #aaa;}
input.custom_chk:checked + label:after{content:"\2714\fe0e"; position:absolute; left:4px; top:1px; font-size:14px; color:#062f87;  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;}


#blockUi{display:none; position:fixed; left:0; top:0; z-index:100; width:100%; height:100%; background-color:rgba(255,255,255,.5);}
#blockUi.on{display:block;}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
#blockUi:before {
  content: '';
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 3px solid #eee;
  border-top-color: #003087;
  animation: spinner 1s linear infinite;
}

@media all and (max-width:320px){
	.family_box a{width:145px;}
	.lang a{width:80px;}
	.family_box .open_btn{background-position:120px center;}
}