/* ======================== header ======================== */
header{
	position: fixed; left: 0; top: 0; width: 100%;
	z-index: 999;
}
header .wrap{
	padding: 16px 0;
	display: flex; align-items: flex-start; justify-content: space-between;
}
header .wrap .logo{position: relative; margin-top: 4px; z-index: 101;}
header .wrap .logo img{height: 44px;}
header .wrap .logo img.white{position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;}

header.bg .wrap .logo img.black{opacity: 1;}
header.bg .wrap .logo img.white{opacity: 0;}

header .wrap nav{display: flex;}
header .wrap nav > ul{display: flex; align-items: stretch; justify-content: center; gap: 0;}
header .wrap nav > ul li{position: relative;}
header .wrap nav > ul li .depth01{
	font-size: 18px; color: #fff; /*color: #000;*/ font-weight: 700; letter-spacing: -0.025em; padding: 20px 30px; box-sizing: border-box;
}
header .wrap nav > ul li .depth02{display: none; padding-top: 20px;}
header .wrap nav > ul li .depth02 li{}
header .wrap nav > ul li .depth02 li a{
	font-size: 15px; font-weight: 400; color: #6b6b6b; text-align: center; padding: 8px 0;
}
header .wrap nav > ul li .depth02 li:last-child a{padding-bottom: 12px;}
header .wrap nav > ul li .depth02 li a:hover{color: var(--gold);}

header .hoverBg{
	position: absolute; width: 100%; left: 0; top: 0;
	height: 360px; background-color: #fff;
	transform-origin: center top; transform: scaleY(0);
	box-shadow: 0 0 8px -4px gray;
}
header .hover_img{
	display: flex; align-items: center; justify-content: center; gap: 12px;
	position: absolute; left: max(calc((100vw - 1440px) / 2),2.5vw); bottom: 90px;
	opacity: 0;
}
header .hover_img .img{width: 240px; height: 138px; background-position: center; background-size: contain;}
header .hover_img .txtBx{padding-top: 26px;}
header .hover_img .txtBx p{font-weight: 500; letter-spacing: -0.025em; color: #333333; margin-bottom: 12px;}
header .hover_img .txtBx span{letter-spacing: -0.025em; font-size: 14px; line-height: calc(20/14); color: #a6a6a6;}



/* 메뉴아이콘 */
header .menuIco {display: none;font-size: 1px;width: 36em; height: 20em;align-items: center; justify-content: center;position: relative; z-index: 1001; }
header .menuIco::before {content:''; display: block; position: absolute; width: 100%; height: 100%; padding: 10em; }
header .menuIco div {width: 100%; height: 2px; background-color: #000; border-radius: 30px;position: absolute;transition: opacity 0.5s,transform 0.5s,top 0.5s,bottom 0.5s,background-color 0.5s; }
header.bg .menuIco div{background-color: #000;}
header.menuOn .menuIco div{background-color: #000;}
header .menuIco div:nth-child(1) { top: 0; }
header .menuIco div:nth-child(2) { }
header .menuIco div:nth-child(3) { bottom: 0; }
header.menuOn .menuIco div:nth-child(1) { transform: rotate(45deg); top: 9em; }
header.menuOn .menuIco div:nth-child(2) { opacity: 0; transform: translateX(-50%); }
header.menuOn .menuIco div:nth-child(3) { transform: rotate(-45deg); bottom: 9em; }

/* 모바일 메뉴 */
header.menuOn .mo_menu{ opacity: 1; visibility: visible; pointer-events: auto;}
header .mo_menu{opacity: 0; background: #fff; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 100; box-sizing: border-box; transition: opacity .5s; pointer-events: none; }
header .mo_menu .wrap{ display: block; height: 100%; box-sizing: border-box;}
header .mo_menu .wrap .logo{ padding-top: 1em;  }
header .mo_menu .wrap .logo img{ height: 50px; }
header.menuOn .wrap .logo img.white{opacity: 0; pointer-events: none;}
header.menuOn .wrap .logo img.black{opacity: 1; pointer-events: auto;}
header .mo_menu .wrap ul{ box-sizing: border-box; width: 100%; font-size: 1px; font-size: 1px; overflow: auto; }
header .mo_menu .wrap>ul{ padding-top: 90px; }
header .mo_menu .wrap ul>li>div{
    font-size: 16em; font-weight: 600; letter-spacing: -0.04em; padding: 0.8em 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; padding-right: 14px;
    border-bottom: 1px solid #eee;
    position: relative; transition: color .3s, padding-left .3s;
}
header .mo_menu .wrap ul>li>div::before{}
header .mo_menu .wrap ul>li>div p{ position: relative; }
header .mo_menu .wrap ul>li>div .ico{
    display: flex; align-items: center; justify-content: center; position: relative;
}
.mo_menu .wrap > ul > li > div .ico::before,
.mo_menu .wrap > ul > li > div .ico::after{
    content: ''; display: block; width: 14px; height: 2px; background: #000;
    position: absolute; transform-origin: center center;
    transition: transform .5s, background .3s;
}
.mo_menu .wrap > ul > li > div .ico::after{
    transform: rotate(90deg);
}
.mo_menu .wrap > ul > li > div.on p{
    color: #e59623;
}
.mo_menu .wrap > ul > li > div.on .ico::before,
.mo_menu .wrap > ul > li > div.on .ico::after{
    background: #e59623;
}
.mo_menu .wrap > ul > li > div.on .ico::after{
    transform: rotate(0deg);
}
.mo_menu .wrap > ul > li > ul{
    display: none;
}
.mo_menu .wrap > ul > li > ul > li a{
    font-size: 14em; letter-spacing: -0.04em;
    padding: 10px 14px; box-sizing: border-box;
    display: flex; align-items: center; gap: 6px;
}
.mo_menu .wrap > ul > li > ul > li:first-child a{padding-top: 14px;}
.mo_menu .wrap > ul > li > ul > li:last-child a{padding-bottom: 14px;}
.mo_menu .wrap > ul > li > ul > li a::before{
    /* content: ''; width: 4px; height: 4px; */
    /* border-radius: 50%; background: #000; */
}

/* transition */
header{transition: background-color 0.5s, transform 0.5s, opacity 0.5s;}
header .wrap .logo img{transition: opacity 0.5s;}
header .wrap nav > ul{transition: gap 0.8s;}
/* header .wrap nav > ul li .depth01{transition: color 0.5s padding 0.5s;} */
header .wrap nav > ul li .depth01{transition: all 0.5s;}
header .hoverBg{transition: transform 0.5s;}
header .hover_img{transition: opacity 0.5s;}

/* 흰배경 */
header.bg{background-color: rgba(255,255,255,0.5);}
header.bg .wrap nav > ul li .depth01{color: #000;}

/* 사라짐 */
header.hide{transform: translateY(-100%); opacity: 0;}

/* 로고 흰색 */
header.white .wrap .logo img.white{opacity: 1; pointer-events: auto;}
header.white .wrap .logo img.black{opacity: 0; pointer-events: none;}
header.white .menuIco div{background-color: #fff;}

/* 호버시 */
header.hover{background-color: transparent; position: 9999;}
header.hover .hoverBg{transform: scaleY(1);}
header.hover .hover_img{opacity: 1; transition-delay: 0.3s;}
/* header.hover .wrap nav > ul{gap: 10px;} */
header.hover .wrap nav > ul li .depth01{color: #000; padding: 20px 35px;  }
/* header.hover .wrap .logo img.white{opacity: 0; pointer-events: none;} */
/* header.hover .wrap .logo img.black{opacity: 1; pointer-events: auto;} */

header.hover .wrap .logo img.white,
header.white.hover .wrap .logo img.white{
	opacity: 0; pointer-events: none;
}
header.hover .wrap .logo img.black,
header.white.hover .wrap .logo img.black{
	opacity: 1; pointer-events: auto;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	header .wrap{padding: 10px 0;}
	header .wrap .logo{margin-top: 8px;}
	header .wrap .logo img{height: 40px;}

	header .hover_img{flex-direction: column; align-items: flex-start; gap: 0; bottom: 50px;}
	header .hover_img .txtBx{padding-top: 0;}
}
@media screen and (max-width:1024px) {
	header .wrap{align-items: center;}
	header .wrap .logo{margin-top: 0;}
	header .wrap nav{display: none;}
	header .wrap .menuIco{display: flex;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	header .wrap .logo img{height: 30px;}
	header .menuIco{font-size: 0.8px; }
    header .mo_menu{
        background: #fff;
    }
}
@media screen and (max-width:320px) {}







/* ======================== footer ======================== */
footer{
	/*padding: 70px 0;*/ padding: 40px 0;  box-sizing: border-box;
	border-top: 1px solid #ccc;
}
footer .wrap{
	display: flex; align-items: flex-start; justify-content: space-between;
}
footer .logo{}
footer .logo img{height: 60px;}
footer .infoArea{
	font-size: 17px; letter-spacing: -0.025em; line-height: 1.4;
	display: flex; flex-direction: column; align-items: flex-start; /*gap: 14px;*/ gap: 8px;
	margin-right: 300px;
}
footer .infoArea .row{
	display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px;
	flex-wrap: wrap; line-height: 1.4;
}
footer .infoArea .row em{}
footer .infoArea .row p{}
footer .infoArea .privacy{
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	flex-wrap: wrap;
}
footer .infoArea .privacy div{cursor: pointer; border: 1px solid #ddd; box-sizing: border-box; padding: 4px 10px; border-radius: 4px; overflow: hidden; font-size: 14px; }
footer .infoArea .privacy div:hover{background-color: #000; color: #fff; border-color: transparent;}
footer .infoArea .privacy div:nth-child(1){position: relative;}
footer .infoArea .privacy div:nth-child(1)::after {
	content:''; display: block; width: 1px; height: 1em; background-color: #000;
	position: absolute; left: 100%; margin-left: 20px; top: 50%; transform: translateY(-50%);
	display: none;
}
footer .family{position: relative;}
footer .family .box{
	width: calc(210/18*1em); height: calc(60/18*1em); font-size: 16px;
	display: flex; align-items: center; justify-content: center; gap: 2em;
	border: 1px solid #000;  box-sizing: border-box; cursor: pointer;
}
footer .family .box p{}
footer .family .box i{ transition: trnasform .3s;}
footer .family.on .box i{ transform: rotate(180deg); }
footer .family ul{
	border: 1px solid #000; box-sizing: border-box;
	position: absolute; left: 0; bottom: 100%; margin-bottom: 10px;
	background-color: #fff; min-width: 100%;
	display: none;
}
footer .family ul.on{ opacity: 1; }
footer .family ul li{width: 100%;}
footer .family ul li a{
	width: 100%; box-sizing: border-box; text-align: center;
	padding: 14px 10px; border-bottom: 1px solid #ddd;
}
html.pc footer .family ul li a:hover{
	background-color: #444; color: #fff; border-color: #444;
}
footer .family ul li:last-child a{border: 0;}

@media screen and (max-width:1600px) {
	footer .infoArea{margin-right: 0; font-size: 16px; }
	footer .family .box{font-size: 16px; }
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	footer .wrap{flex-direction: column; gap: 60px;}
	footer .infoArea{font-size: 18px; }
}
@media screen and (max-width:1024px) {
	footer{padding: 20px 0;}
	footer .infoArea{font-size: 16px; }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	footer .wrap{ /*gap: 40px;*/ gap: 20px; }
	footer .logo img{height: 40px;}
	footer .infoArea{font-size: 14px; }
	footer .infoArea .row{gap: 10px;}
	footer .infoArea .row:nth-child(1){flex-direction: column;}
	footer .infoArea .privacy{gap: 10px; align-items: flex-start;}
	footer .infoArea .privacy div{border: 1px solid #ddd; box-sizing: border-box; min-width: 9em; text-align: center; padding: 6px 0; border-radius: 4px; font-size: 14px; }
	footer .infoArea .privacy div:nth-child(1)::after{display: none;}
	footer .family .box{font-size: 14px; padding: 10px 14px; width: auto; height: auto;}
}
@media screen and (max-width:320px) {}





/* 개인정보처리방침 팝업 */
._privacyPopup{
	position: fixed; z-index: 9999999;
	width: 100%; height: 100%; left: 0; top: 0;
	align-items: center; justify-content: center; flex-direction: column; gap: 10px;
	display: flex; pointer-events: none; opacity: 0;
	transition: opacity 0.5s;
}
._privacyPopup.on{pointer-events: auto; opacity: 1;}
._privacyPopup .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background-color: #000; opacity: 0.8; cursor: pointer;
}
._privacyPopup .cancel{
	color: #fff; position: relative; z-index: 2;
	font-size: 30px; cursor: pointer; pointer-events: none;
}
._privacyPopup .popupCont{
	position: relative; z-index: 2;
	width: 90%; max-width: 940px; max-height: min(800px,calc(90% - 40px));
	background-color: #fff; border-radius: 10px; overflow: hidden;
	line-height: 1.4;
}
._privacyPopup .popupCont .inner{display: none; overflow: auto; height: auto; max-height: 100%; padding: 60px 20px; box-sizing: border-box;}
._privacyPopup .popupCont .inner.on{display: block;}
._privacyPopup .popupCont .inner .tit{
	font-size: 30px; font-weight: 600; margin-bottom: 40px; text-align: center;
}
._privacyPopup .popupCont .inner .p{}
._privacyPopup .popupCont .inner .p.center{text-align: center;}

._privacyPopup .popupCont .inner .tableBx{
	border-collapse: collapse; margin-top: 20px;
}
._privacyPopup .popupCont .inner .tableBx table{}
._privacyPopup .popupCont .inner .tableBx table tr{}
._privacyPopup .popupCont .inner .tableBx table th{border: 1px solid #000; padding: 4px; box-sizing: border-box; background-color: #ddd;}
._privacyPopup .popupCont .inner .tableBx table th:nth-child(1){min-width: 8em;}
._privacyPopup .popupCont .inner .tableBx table td{border: 1px solid #000; padding: 4px; box-sizing: border-box;}

._privacyPopup .popupCont .inner .box{margin-top: 40px;}
._privacyPopup .popupCont .inner .box > em{display: block; font-size: 20px; font-weight: 600; margin-bottom: 16px;}
._privacyPopup .popupCont .inner .box .num{
	display: flex; align-items: flex-start; justify-content: flex-start; gap: 4px;
	margin-top: 14px;
}
._privacyPopup .popupCont .inner .box .num b{}
._privacyPopup .popupCont .inner .box .num p{}
._privacyPopup .popupCont .inner .box > p{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._privacyPopup .popupCont .inner .tit{font-size: 24px; margin-bottom: 20px;}
	._privacyPopup .popupCont .inner .p{font-size: 14px; }
	._privacyPopup .popupCont .inner .box > em{font-size: 18px; }
	._privacyPopup .popupCont .inner .box .num{font-size: 14px; }
	._privacyPopup .popupCont .inner .tableBx{font-size: 14px; }
	._privacyPopup .popupCont .inner .box > p{font-size: 14px; }
}
@media screen and (max-width:500px) {
	._privacyPopup .popupCont .inner{padding: 40px 20px;}
	._privacyPopup .popupCont .inner .tableBx{font-size: 12px; }
	._privacyPopup .popupCont .inner .tableBx table th:nth-child(1){min-width: unset;}

	._privacyPopup .popupCont .inner .box > em{font-size: 16px; }
	._privacyPopup .popupCont .inner .box .num{font-size: 13px; }
	._privacyPopup .popupCont .inner .tableBx{font-size: 13px; }
	._privacyPopup .popupCont .inner .box > p{font-size: 13px; }
}
@media screen and (max-width:320px) {}