@charset "utf-8";

body{position:relative;width:100%;height:100%;}
body.lock{height:100vh;overflow:hidden;}
#wrap{overflow:hidden;}

/* header .*/
#header_wrap{position:fixed;top:0;left:0;width:100%;z-index: 99;background: transparent;}
#header_wrap.ov{background:#fff;border-bottom:1px solid #e3e3e3;box-shadow: 5px 5px 15px rgb(0 0 0 / 3%);}
#header_wrap .header_inner{width:100%;margin:0 auto;display: flex;justify-content: space-between;align-items: center;padding: 0 50px;box-sizing:border-box;}
#header_wrap .bg_menu{opacity:0;visibility:hidden;position: absolute;top: 79px;left: 0;width: 100%;height: 0;border-bottom: 1px solid #dcdcdc;background:#FFF}
#header_wrap.on .bg_menu{opacity:1;visibility:visible;height:230px;box-shadow: 0 10px 10px rgb(0 0 0 / 10%);border-top:1px solid #DDD;}
.logo{width: 8%;min-width: 150px;}
.logo > a {display:block;background-image:url('/common/img/common/logo_w.png');background-size:contain;background-position:50%;background-repeat:no-repeat;padding: 15%;box-sizing: border-box;}
#header_wrap.ov .logo > a{background-image:url('/common/img/common/logo_b.png');}
#gnb{display:flex;align-items: center;justify-content: center;width: 50%;box-sizing: border-box;margin-right:5%;}
#gnb > li{width:18%;text-align:center;cursor: pointer;position:relative;}
#gnb > li > a{display:block;font-weight:500;font-size:1.2rem;color:#FFF;transition:0.3s;position:relative;line-height:79px;}
#header_wrap.ov #gnb > li > a{color:#000;}
#header_wrap.ov #gnb > li:hover > a{color:#4eacee;}
#gnb > li:hover > a:after{content:'';display:block;width:100px;height:5px;background:#4eacee;position:absolute;bottom:-3px;left:50%;transform: translate(-50%, -50%);}
.lnb{opacity:0;visibility:hidden;position:absolute;top:100%;left: 0;height:0;text-align: left;box-sizing:border-box;width:100%;padding:20px 0;}
#header_wrap.on .lnb{opacity:1;visibility:visible;height:auto;z-index:55;transition:height .3s ease-in-out, opacity .2s .1s ease-in-out;}
.lnb > li{box-sizing:border-box;transition:0.3s;width:100%;text-align:center;}
.lnb > li > a{display:block;padding: 10px;box-sizing:border-box;font-size:1.05rem;}
.lnb > li:hover > a{color: #4eacee;}
/* 헤더 숨김 */
#header_wrap.hid{background:rgb(78, 172, 238);border-bottom:0;}
#header_wrap.hid h1,
#header_wrap.hid ul{opacity:0;height:0;}
#header_wrap.hid.on .bg_menu{opacity:0;}
/* btn sitemap */
.btn_menu {width:30px;height:21px;flex-direction:column;cursor: pointer;display:flex;justify-content:space-between;align-items:center;cursor:pointer;z-index: 1000; }
.btn_menu > span{width: 100%;height:3px;background:#fff;transition: all 0.2s ease-in; }
#header_wrap.ov .btn_menu > span {background:#000;}
#header_wrap.sub .btn_menu > span {background:#000;}
#header_wrap.ani .btn_menu > span {background:#000;}
.btn_menu.on {display: block;position:absolute;right:calc(20% - 130px);top:103px;width:50px;height:55px;}
.btn_menu.on > span{background-color:#fff !important;display:block;width:54px;height:3px;}
.btn_menu.on > span:nth-child(1){transform:rotate(45deg) translateY(4px) translateX(3px)}
.btn_menu.on > span:nth-child(2){opacity: 0;}
.btn_menu.on > span:nth-child(3){transform:rotate(-45deg)}
/* sitemap */
.sitemap {background:#4eacee; height:100vh; width:100%; position:fixed;top:-100%;z-index:5;display:flex;align-items:center;transition:all 0.4s ease-out;z-index: -1;opacity: 0;}
.sitemap.act {top:0;z-index: 5;opacity: 1;}
.sitemap .inner{max-width:1400px;width:100%;height:100%;margin:80px auto;display:flex;flex-direction:column;justify-content:space-between;padding:80px 0;box-sizing:border-box;}
.stm_top {display:flex;margin-right:7%;}
.stm_logo {width:200px;height:43px;background:url('/common/img/common/logo_w.png') no-repeat left/contain;margin-right:2%;}
.stm_menu{width:calc(100% - 260px);}
.stm_menu > ul{display:flex;}
.stm_menu > ul > li {width:220px;}
.stm_menu > ul > li > a {display:flex;align-items:flex-end;font-size:30px;font-weight:700;color:#fff;height:52px;line-height:1;position:relative;}
.stm_menu > ul > li > a::before {content:'';display:block;position:absolute;top:0;width:40px;height:3px;background:#fff;left:0;}
.stm_menu_list {padding-top:37.5px;}
.stm_menu_list li a {display:block;font-size:18px;color:#fff;line-height:1;padding:8.5px 0;}
.stm_info{}
.stm_info p {font-size:18px;color:#fff;margin-left:15%;}
.stm_info p a{color: #fff;}
@media screen and (max-width:1200px){
	/* btn sitemap */
	.btn_menu.on{left:auto;right:15px;}
	.btn_menu.on > span{width:45px;}
	/* sitemap */
	.sitemap .inner{padding: 80px 15px;}
	.stm_top {flex-direction: column;margin-right:0;}
	.stm_logo{margin-bottom:50px;}
	.stm_menu{width:100%;max-width: 95%;margin: 0 auto;}
	.stm_menu > ul > li{width:20%;margin-right:10px;}
	.stm_menu > ul > li:last-child{margin-right:0;}
	.stm_menu > ul > li > a{font-size:25px;height:45px;}
	.stm_menu_list{padding-top:20px;}
	.stm_menu_list li a{font-size:15px;}
	.stm_info{text-align:center;}
	.stm_info p{margin-left:0;}
}
@media screen and (max-width:1024px){
	/* header .*/
	#header_wrap .header_inner{padding:15px 50px;}
	#gnb{display:none;}
	/* 헤더 숨김 */
	#header_wrap.hid > .header_inner{padding:0;}
}
@media screen and (max-width:768px){
	/* header .*/
	#header_wrap .header_inner{padding:22.5px  15px;}
	.logo {min-width: 100px;}
	/* btn sitemap */
	.btn_menu.on{top: 50px;}
	/* sitemap */
	.sitemap .inner{max-width: 400px;margin: 0 auto;padding:30px 15px;}
	.stm_menu > ul{flex-wrap:wrap;}
	.stm_menu > ul > li{width:50%;margin-right:0;margin-bottom:30px;}
	.stm_menu > ul > li > a{font-size:18px;height:30px;}
	.stm_menu > ul > li > a::before{width: 30px;height: 2px;}
	.stm_info p{font-size:15px;}
}
@media screen and (max-width:480px){
	/* btn sitemap */
	.btn_menu.on {width: 40px;height: 25px;top:40px;}
	.btn_menu.on > span{width:35px;}
	/* sitemap */
	.stm_logo{margin-bottom:40px;width: 100px;height: 32px;}
	.stm_menu > ul > li > a{font-size:16px;}
	.stm_menu_list{padding-top:15px;}
	.stm_menu_list li a{font-size:14.5px;padding:5px 0;}
	.stm_info p{font-size:12px;}
}

/* footer .*/
#container.footer{height:auto;}
footer{background:#f8f8f8;font-size:0.9rem;padding: 70px 15px;box-sizing: border-box;}
footer .inner{max-width:1240px;margin:0 auto;}
footer > .inner > ul{display:flex;align-items:flex-start;width:100%;}
footer > .inner > ul > li{font-size:1rem;width:83%;}
footer > .inner > ul > li:first-child{width:17%;min-width:150px;margin-right:8%;}
footer > .inner > ul > li > ol > li {text-align:left;font-size:17px;color:#848484;}
footer > .inner > ul > li > ol > li.copy{margin-top:30px;color:#c4c4c4;font-size:16px;}
footer > .inner > ul > li > ol > li > span{color:#848484;font-weight:500;position:relative;margin-left:5px;padding-left:5px;box-sizing:border-box;}
footer > .inner > ul > li > ol > li > span:first-child{margin-left:0;padding-left:0;}
footer > .inner > ul > li > ol > li > span:before{content:'';background:#848484;position:absolute;top:6px;left:0;width:1px;height:15px;}
footer > .inner > ul > li > ol > li > span:first-child:before{display:none;}
@media screen and (max-width:1024px){
	footer{padding: 30px 15px;}
	footer > .inner > ul > li > ol > li{font-size:15px;}
	footer > .inner > ul > li > ol > li.copy{margin-top:15px;font-size:15px;}
}
@media screen and (max-width:640px){
	footer{padding: 50px 15px 70px;}
	footer > .inner > ul{display:block;}
	footer > .inner > ul > li{width:100%;}
	footer > .inner > ul > li:first-child{margin-bottom:20px;margin-right:auto;}
	footer > .inner > ul > li > ol > li{text-align:left;font-size:15px;}
	footer > .inner > ul > li > ol > li.copy{font-size:14px;}
	footer > .inner > ul > li > ol > li > span:before{top:6px;height:10px;}
}
@media screen and (max-width:480px){
	footer{padding: 20px 15px 30px;}
	footer > .inner > ul > li:first-child{min-width:120px;}
	footer > .inner > ul > li > ol > li{font-size:14px;}
	footer > .inner > ul > li > ol > li.copy{font-size:13px;margin-top:10px;}
}

/* clearfix */
.clearfix:after{content:'';display:block;clear:both;}

/* img_box > img */
.img_box > img{width:100%;height:100%;}

/* f_box */
.f_box{display:flex;}
@media screen and (max-width:640px){
	.f_box{display:block;}
}

/* 시안 선택 */
ul.tab {width:100%; border-bottom:1px solid #ddd; display:flex;}
ul.tab li {width:50%;font-size:17px; font-weight:400; line-height:43px; text-align:center; background-color:#fff; background-color:#f9f9f9; box-sizing:border-box; color:#666; border-right:1px solid #777;}
ul.tab li a {color:#666 !important; width:100%; display:inline-block; }
ul.tab li.on {background-color: #444;border: 1px solid #666;}
ul.tab li.on > a{color:#FFF !important;}