html{
	font-family: "Noto Serif KR", serif;
	word-break: keep-all;
}
a{display: block;}
button{margin: 0; padding: 0; cursor: pointer; background: none;}

.wrap{width: 95%; margin: 0 auto;}
.wrap[max='full']{max-width: calc(100% - 100px);}
.wrap[max='1820']{max-width: 1820px;}
.wrap[max='1760']{max-width: 1760px;}
.wrap[max='1520']{max-width: 1520px;}
.wrap[max='1280']{max-width: 1280px;}

header{
	position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; mix-blend-mode: difference; color: #fff;
}
header .wrap{position: relative; margin-top: 30px; display: flex; align-items: center; justify-content: space-between;}
header .wrap .logo{}
header .wrap .logo svg{width: 120px;}
header .wrap .logo svg > *{fill: #fff;}
header .wrap nav{
	position: absolute; left: 50%; transform: translateX(-50%);
	font-size: 18px; display: flex; gap: 60px;
	justify-content: center;
}
header .wrap nav div{ position: relative; } 
header .wrap nav div .depth2{  position: absolute; top: calc(100% + 20px); left: 50%; background-color: rgba(45, 45, 45, 0.5); min-width: 180px; box-sizing: border-box; padding: 10px 0; display: none; transform: translateX(-50%); }
header .wrap nav div .depth2 li > a{ display: block; text-align: center; padding: 15px 10px; box-sizing: border-box; font-size: 16px; letter-spacing: -0.02em; }
header .wrap nav > div > a{ position: relative; display: block; }
header .wrap nav > div > a::after{ content: ''; display: block; width: 100%; height: 1px; position: absolute; top: calc(100% + 10px); left: 0; background-color: #fff; transition-duration: 0.4s; transform: scaleX(0); }
header .wrap .menuIco{width: 32px; height: 18px; display: none; align-items: center; justify-content: center; position: relative; cursor: pointer;}
header .wrap .menuIco div{width: 100%; height: 2px; background-color: #fff; position: absolute; transition-duration: 0.4s; }
header .wrap .menuIco div:nth-child(1){top: 0;}
header .wrap .menuIco div:nth-child(2){}
header .wrap .menuIco div:nth-child(3){bottom: 0;}

header.ham .wrap .menuIco div:nth-child(1){top: 50%; transform: rotate(45deg);}
header.ham .wrap .menuIco div:nth-child(2){opacity: 0; transform: translateX(-100%);}
header.ham .wrap .menuIco div:nth-child(3){top: 50%; transform: rotate(-45deg); bottom: auto;}
header.ham ~ .total{ transform: translateX(0); opacity: 1; }

@media screen and (min-width: 821px){
    header .wrap nav > div:hover > a::after{ transform: scaleX(1); }
}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	header .wrap nav{gap: 50px; font-size: 16px;}
}
@media screen and (max-width:1024px) {
	header .wrap nav{display: none;}
	header .wrap .menuIco{display: flex;}
}
@media screen and (max-width:820px) {
	.wrap{width: 90%;}
}
@media screen and (max-width:500px) {
	header .wrap{margin-top: 20px;}
	header .wrap .logo svg{width: 80px;}
	header .wrap .menuIco{width: 30px; height: 16px;}
}
@media screen and (max-width:320px) {}







footer{font-family: "Urbanist", sans-serif; background-color: #fff;}
footer .wrap{
	padding-top: 65px; padding-bottom: 50px;
}
footer h4{font-size: 20px; font-weight: 300; color: #351d06;}
footer .top{
	font-size: 40px; font-weight: 300;
	display: flex; align-items: flex-start; justify-content: space-between;
	border-bottom: 1px solid #d7d2cd; box-sizing: border-box;
	padding-bottom: 60px; margin-bottom: 60px;
	gap: 30px 60px; flex-wrap: wrap;
}
footer .top h4{margin-bottom: 12px;}
footer .top .menu{}
footer .top nav{line-height: calc(60/40);}
footer .top nav a{}
footer .top .info{}
footer .top .info p{line-height: calc(60/40);}
footer .bottom{
	display: flex; justify-content: space-between;
	gap: 30px 40px; flex-wrap: wrap;
}
footer .bottom .left{
	display: flex; flex-direction: column; justify-content: space-between;
}
footer .bottom .left .link{margin-bottom: 20px;}
footer .bottom .left .link p{
	font-size: 20px; font-weight: 300; color: #351d06; margin-bottom: 1em;
}
footer .bottom .left .link .btn{display: flex; gap: 15px;}
footer .bottom .left .link .btn a{filter: grayscale(1);}
html.pc footer .bottom .left .link .btn a:hover{filter: grayscale(0);}
footer .bottom .left .link .btn a img{width: auto; height: 25px;}
footer .bottom .logo{width: 1040px; display: flex; align-items: flex-end;}
footer .bottom .logo svg{width: 100%;}

@media screen and (max-width:1600px) {
	footer .bottom .logo{width: 500px;}
}
@media screen and (max-width:1440px) {
	footer .wrap{padding: 30px 0;}
	footer .top{font-size: 30px; padding-bottom: 1em; margin-bottom: 1em;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	footer .top{font-size: 24px;}
	footer .bottom .logo{max-width: 200px;}
	footer .bottom .left .link{margin-bottom: 16px;}
	footer .bottom .left .link p{font-size: 16px;}
	footer h4{font-size: 16px;}
}
@media screen and (max-width:500px) {
	footer .top{font-size: 18px;}
	footer .bottom .logo{max-width: 120px;}
}
@media screen and (max-width:320px) {}



/* max-width */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}
}
@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* min-width */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}





/* total menu */
.total{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; box-sizing: border-box; z-index: 9997; display: flex; flex-direction: column; background-color: #fff; color: #000; padding-top: 110px; padding-bottom: 40px; transform: translateX(100%); opacity: 0; transition-duration: 0.6s; }
.total .flx{ display: flex; height: 100%; }
.total .flx .lbx{ width: calc(200 / 480 * 100%); padding: 25px 0; box-sizing: border-box; overflow-y: auto; }
.total .flx .lbx .dep1{ width: 100%; }
.total .flx .lbx .dep1 li{ padding: 20px; box-sizing: border-box; width: 100%; display: flex; align-items: center; cursor: pointer; }
.total .flx .lbx .dep1 li em{ display: inline-flex; width: 23px; padding-right: 7px; box-sizing: border-box; transition-duration: 0.4s; justify-content: flex-end; width: 0; overflow: hidden; }
.total .flx .lbx .dep1 li.on em{ width: 23px; }
.total .flx .lbx .dep1 li i{ width: 5px; height: 5px; border-radius: 50%; background-color: #000; display: block; flex-shrink: 0; }
.total .flx .lbx .dep1 li span{ font-size: 20px; letter-spacing: -0.02em; font-weight: 600;  line-height: 1.4; }

.total .flx .rbx{ position: relative; width: calc(280 / 480 * 100%); background-color: #ececec; overflow: hidden; overflow-y: auto }
.total .flx .rbx .dep2{ padding: 25px 0; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(-20%); transition-duration: 0.4s; pointer-events: none; }
.total .flx .rbx .dep2.on{ opacity: 1; transform: translateX(0); pointer-events: unset; }
.total .flx .rbx .dep2 li > a{ width: 100%; padding: 20px 30px; box-sizing: border-box; font-size: 20px; letter-spacing: -0.02em; line-height: 1.4; }

.total .bot{ flex-shrink: 0; padding-top: 50px; }
.total .bot p{ font-size: 20px; color: #351d06; font-family: 'Urbanist'; font-weight: 300; text-align: center; }
.total .bot .sns{ margin-top: 12px; display: flex; align-items: center; justify-content: center; width: 100%;}
.total .bot .sns li > a{ padding: 6px; }

@media screen and (max-width: 1024px){
    /* .total{ display: block; } */
}

@media screen and (max-width: 820px){
   
    .total .flx .lbx .dep1 li span{ font-size: 18px; }
    .total .flx .rbx .dep2 li > a{ font-size: 18px; }
}

@media screen and (max-width: 500px){
    .total{ padding-top: 70px; }
    .total .flx .lbx .dep1 li{ padding: 10px 15px; }
    .total .flx .lbx .dep1 li.on em{ width: 10px; }
    .total .flx .lbx .dep1 li em{ padding-right: 3px;}
    .total .flx .lbx .dep1 li span{ font-size: 14px; }
    .total .flx .rbx .dep2 li > a{ font-size: 14px; padding: 10px 20px; }

    .total .bot p{ font-size: 16px; }
}