@charset "utf-8";

body{position:relative;}

/* header .*/
#header_wrap{position:fixed;top:0;left:0;width:100%;z-index: 99;background: transparent;padding: 0 15px; box-sizing:border-box; border-bottom: 1px solid rgb(255 255 255 / 30%);}
#header_wrap.ov{background: #FFF;box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);}
#header_wrap .header_inner{max-width:1600px;width:100%;margin:0 auto;display: flex;justify-content: flex-start;align-items: center;box-sizing:border-box;}
.logo{width: 8%;min-width: 200px;}
.logo > a {display:block; color: #FFF; background-image: url('/common/img/common/logo_w.png'); background-position: center; background-size: contain; 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: flex-start;width: 75%;box-sizing: border-box;}
#gnb > li{width:15%;text-align:center;cursor: pointer;position:relative;}
#gnb > li > a{display:block;font-weight:500;font-size:1.25rem;color:#FFF;transition:0.3s;position:relative;line-height:79px;}
#header_wrap.ov #gnb > li > a{color:#000;}
#gnb > li:hover > a:after{content:'';display:block;width:100px;height:5px;background:#8b8bc3;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: 15px 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);}
#gnb > li.on .lnb{opacity:1;visibility:visible;height: auto;z-index:55;transition:height .3s ease-in-out, opacity .2s .1s ease-in-out; background:#FFF;}
.lnb > li{transition:0.3s;width:100%;text-align:center;}
.lnb > li > a{display:block;padding:10px;box-sizing:border-box;font-size:18px;color:#000;line-height:1.4; font-weight: 500;}
.lnb > li:hover > a{color:#8b8bc3; text-decoration: underline;}
/* 헤더 숨김 */
#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_mobileMenu{display:none;color:#FFF;font-size:2rem;}
.btn_mobileMenu > i.xi-bars {margin-bottom:3px;}
.btn_mobileMenu > i.xi-close {}
/* mo_menu_wrap */
.mo_menu_wrap{display:none;}
.mo_menu_wrap.on{display:block;background:#FFF;padding-top:81px;}
.mo_menu{}
.mo_menu > ul > li{border-bottom:1px solid #DDD;}
.mo_menu > ul > li > a{display:flex;justify-content: space-between;align-items: center;padding:20px;box-sizing:border-box;font-size:1.2rem;}
.mo_menu > ul > li > a > i{font-size:2rem;}
.mo_menu > ul > li.on > a > i:before{content:'\e945';}
.mo_menu > ul > li > .lnb{position:initial;border-top: 0;box-shadow:none;display:none;opacity: 1;visibility: visible;height:auto;padding:0 !important; border-top: 3px solid #8b8bc3;}
.mo_menu > ul > li > .lnb.slideUp{}
.mo_menu > ul > li > .lnb > li{border-bottom:1px solid #DDD;background: #f7f7fb;}
.mo_menu > ul > li > .lnb > li:last-child{border-bottom:0;}
.mo_menu > ul > li > .lnb > li > a{color: #000;font-size:1.15rem;padding:15px 20px;text-align:left;}
@media screen and (max-width:1200px){
	#header_wrap{position:absolute; padding: 10px;}
	#header_wrap.ov{background:transparent;border:0;}
	#header_wrap.on{box-shadow:none;border-bottom: 1px solid #DDD;background:rgba(0,0,0,0.7);}
	#header_wrap.on .bg_menu{display: none;}
	#header_wrap .header_inner{justify-content: space-between;}
	.mo_menu_wrap.on {}
	.logo {width: 160px; min-width:160px; }
	#gnb{display:none;}
	.btn_mobileMenu{display:block;}
	.mo_menu_wrap.on {padding-top: 69px;}
	.mo_menu > ul > li > a{padding:13px 15px}
	.mo_menu > ul > li > .lnb > li > a{padding:10px 20px;font-size:1rem;}
}
@media screen and (max-width:640px){
	.logo {width: 160px;}
}


/* btn-scroll */
.btn-scroll{display: none;width: 50px;height: 50px; position: fixed;bottom: 100px; left: 90%;z-index: 999;border-radius: 30px;box-shadow: 4px 4px 17px 0px #71717145;background:#FFF;justify-content:center; align-items: center;}
.btn-scroll > i{display:flex;justify-content:center; align-items: center;font-size:1.5rem;}
@media screen and (max-width:1200px){
	.btn-scroll{display: none !important;}
}
@media screen and (max-width:640px){
	.btn-scroll {left: auto; right: 5%;}
}
@media screen and (max-width:480px){
	.btn-scroll {width: 40px; height: 40px;}
}	


/* quick */
.quick {position:fixed;line-height: 0;top: 33%;right: 0;z-index:55;width: 80px;}
.quick i.xi-plus {display:none; justify-content:center; align-items:center; margin-bottom:10px; width: 55px;height: 55px; background: #8b8bc3;border-radius:50%; padding:10px; box-sizing:border-box;box-shadow: 3px 10px 10px rgb(0 0 0 / 8%);}
.quick a {display:flex; justify-content:center; align-items:center; margin-bottom:10px; width: 55px;height: 55px; background: #8b8bc3;border-radius:50%; padding:10px; box-sizing:border-box;box-shadow: 3px 10px 10px rgb(0 0 0 / 8%);}
.quick a.ico_kakao {background: url('/common/img/main/ico_quick01.png') center / contain no-repeat;}
.quick a.ico_blog {background: url('/common/img/main/ico_quick02.png') center / contain no-repeat;}
.quick a.ico_insta {background: url('/common/img/main/ico_quick03.png') center / contain no-repeat;}
.quick a.ico_youtube {background: url('/common/img/main/ico_quick04.png') center / contain no-repeat;}
.quick i {color: #FFF; font-size: 1.3em;}
@media screen and (max-width:1200px){
	.quick {top: auto; bottom: 20px; width: 60px;}
	.quick a {margin-bottom: 5px; width: 45px; height: 45px; }
	.quick i {font-size: 1.15em;}
	.quick i.xi-plus {width: 45px;height: 45px; display:flex; margin-bottom: 0; transition: all .3s;}
	.quick i.xi-plus.on {transform: rotate(45deg);}
	.quick .open {display: none;}
}


/* footer .*/
footer{background:#333;color:#d7d7d7;font-size:0.9rem;padding: 50px 15px;box-sizing: border-box;}
footer > .inner{max-width: 1400px; width: 100%; margin: 0 auto; display:flex; align-items: center;}
footer > .inner > h2 {min-width: 200px; font-size: 2em;}
footer ul {width: 80%; margin-left: 10%;text-align:left;}
footer ul > li{margin-bottom:10px;display:flex;font-size:0.9rem;}
footer ul > li.copy{color:#bbb;}
footer ul > li:last-child{margin-bottom:0;}
footer ul > li > div{margin-right: 10px;padding-right: 10px;box-sizing: border-box;position:relative;font-weight:200;}
footer ul > li > div:after{content:'';position:absolute;top:30%;right:0;width:1px;height:10px;background:#d7d7d7;}
footer ul > li > div:last-child{margin-right:0;padding-right:0;}
footer ul > li > div:last-child:after{display:none;}
footer ol{text-align:right}
footer ol > li{}
footer ol > li:first-child{font-size:1.05rem;margin-bottom:5px;font-weight:200;}
footer ol > li.color{font-size:1.3rem;font-weight:600;color:#c88d47;}
@media screen and (max-width:1200px){
	footer > .inner{flex-direction:column;}
	footer ul{width:90%;margin-left:0;margin:20px 0;}
	footer ul > li{justify-content:center;flex-wrap:wrap;}
	footer ul > li > div {text-align:center;}
	footer ul > li.copy {text-align: center;}
	footer ol{text-align:center;}
	footer ol > li{line-height:1.3;}
}
@media screen and (max-width:1024px){
	footer ul{width:100%;}
}
@media screen and (max-width:480px){
	footer{padding:30px 15px;}
	footer > .inner > h2 {width: 150px;min-width: auto;}
	footer ul > li{font-size:0.8rem;}
	footer ul > li > div{margin-right: 5px;padding-right: 5px; line-height: 1.5;}
	footer ul > li > div:after{top:20%;}
	footer ol > li{font-size:0.8rem;}
	footer ol > li:first-child{font-size:0.9rem;}
	footer ol > li.color{font-size:1.25rem;}
}


/* 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;}