:root{
	--vh:1vh;
	--vh100:calc(var(--vh,1vh) * 100);
}


.wrap{ width: 95%; margin: 0 auto; }
.wrap[max="1720"]{ max-width: 1720px; }
.wrap[max="1520"]{ max-width: 1520px; }
.wrap[max="1440"]{ max-width: 1440px; }
.wrap[max="1280"]{ max-width: 1280px; }
.wrap[max="960"]{ max-width: 960px; }
.wrap[max="945"]{ max-width: 945px; }
.wrap[max="695"]{ max-width: 695px; }
.wrap[max="500"]{ max-width: 500px; }
.wrap[max="400"]{ max-width: 400px; }

@media screen and (max-width: 820px){
    .wrap{ width: 90%; }
}

/* br */
@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:400px) {
	.max-400{display: block;}
	.min-401{display: none;}
	.max-400-none{display: none;}
}
@media screen and (max-width:360px) {
	.max-360{display: block;}
	.min-361{display: none;}
	.max-360-none{display: none;}
}

@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


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


/* 드래그 커서 */
#cursor{ position: fixed; z-index: 30; left: 0; top: 0; width: 46.5px; height: 46.5px; pointer-events: none;  }
#cursor .icon{ width: 100%; height: 100%; border-radius: 50%; border: 1px solid #c63527; box-sizing: border-box; padding: 5px; position: absolute; transform: translate(-50%, -50%); opacity: 0; transition-duration: 0.2s; }
#cursor .icon span{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; border-radius: 50%; background-color: #c63527; }



/* 나이확인팝업 */
.enterbx{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99997; background-color: rgba(0,0,0,0.8); color: #fff; overflow: auto; word-break: keep-all; display: none; }
.enterbx .wrap{ height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0; box-sizing: border-box; align-items: center; }
.enterbx .logo{ flex-shrink: 0; }
.enterbx .realbx{ display: flex; flex-direction: column; width: 100%; text-align: center; height: 100%; justify-content: center; max-width: 355px; box-sizing: border-box; margin: 0 auto; }

.enterbx .realbx > p{ font-family: 'Gestura Display'; font-size: 22px; letter-spacing: -0.03em; line-height: calc(32 / 22); }
.enterbx .realbx > p span{ color: #e03a2e; }

.enterbx .realbx .enterform{ margin-top: 45px; }
.enterbx .realbx .enterform > ul{ width: 100%; }
.enterbx .realbx .enterform > ul > li{ width: 100%; margin-bottom: 30px; cursor: pointer; line-height: 1.3; }
.enterbx .realbx .enterform > ul > li:last-of-type{ margin-bottom: 0; }
.enterbx .realbx .enterform > ul > li .select{ position: relative; width: 100%; font-size: 17px; letter-spacing: -0.03em; color: #e8e8e8; }
.enterbx .realbx .enterform > ul > li .select .bx{ width: 100%; border: 1px solid #787878; box-sizing: border-box; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background-color: rgba(76, 76, 76, 0.38); transition-duration: 0.2s; }
.enterbx .realbx .enterform > ul > li .select .bx span{ text-align: left; }
.enterbx .realbx .enterform .select{ position: relative; }
.enterbx .realbx .enterform .select > ol{ position: absolute; left: 0; top: calc(100% + 10px); width: 100%; height: 250px; overflow: auto; z-index: 10; background-color: rgba(76,76,76,0.9); border: 1px solid #787878; box-sizing: border-box; padding: 10px 0; display: none; text-align: left; }
.enterbx .realbx .enterform .select > ol::-webkit-scrollbar{ width: 5px; background-color: rgba(255,255,255,0); }
.enterbx .realbx .enterform .select > ol::-webkit-scrollbar-thumb{ width: 5px; background-color: rgba(255,255,255,0.5); border-radius: 10px; }
.enterbx .realbx .enterform .select > ol > li{ padding: 7px 20px; box-sizing: border-box;  cursor: pointer; }
.enterbx .realbx .enterform > ul > li.triple{ display: flex; gap: 12px; }
.enterbx .realbx .enterform .notice{ margin-top: 75px; }
.enterbx .realbx .enterform .notice > p{ font-size: 17px; letter-spacing: -0.03em; line-height: calc(32 / 17); font-weight: 300; color: #c3c3c3; }
.enterbx .realbx .enterform .notice > p em{ font-weight: 500; color: #e8e8e8; }

.enterbx .moreBtn{ margin-top: 35px; }

@media screen and (min-width: 821px){
    .enterbx .realbx .enterform > ul > li .select .bx:hover{ background-color: rgba(255,255,255,0.2); }
    .enterbx .realbx .enterform .select > ol > li:hover{ background-color: rgba(255,255,255,0.1); }
}

@media screen and (max-width: 1280px){
    .enterbx .realbx > p{ font-size: 20px; }
    .enterbx .realbx .enterform{ margin-top: 30px; }
    .enterbx .realbx .enterform > ul > li{ margin-bottom: 20px; }
    .enterbx .realbx .enterform > ul > li .select{ font-size: 16px; }
    .enterbx .realbx .enterform > ul > li .select .bx{ height: 50px;  }
    .enterbx .realbx .enterform .notice{ margin-top: 30px; }
    .enterbx .realbx .enterform .notice > p{ font-size: 16px; }
}


@media screen and (max-width: 820px){
    .enterbx .logo{ width: 40px; }
    .enterbx .realbx > p{ font-size: 16px; }
    .enterbx .realbx .enterform{ margin-top: 20px; }
    .enterbx .realbx .enterform > ul > li{ margin-bottom: 10px; }
    .enterbx .realbx .enterform > ul > li .select{ font-size: 14px; }
    .enterbx .realbx .enterform > ul > li .select .bx{ height: 47px;  }
    .enterbx .realbx .enterform .notice{ margin-top: 20px; }
    .enterbx .realbx .enterform .notice > p{ font-size: 14px; }

    #cursor{ display: none; }
}




.moreBtn{ width: 190px; height: 64px; display: flex; align-items: center; padding: 3px; box-sizing: border-box; position: relative; background-color: #fff; color: #000;  margin: 0 auto; cursor: pointer; }
.moreBtn::after{ content: ''; display: block; width: 100%; height: 100%; background-color: #c63527; z-index: 0; transition-duration: 0.4s; position: absolute; left: 0; top: 0; transform: scaleX(0); transform-origin: 0 0; }
.moreBtn > .img{ width: 56px; height: 56px; overflow: hidden; flex-shrink: 0; z-index: 1; position: relative; }
.moreBtn > .flx{ width: 100%; display: flex; justify-content: center; align-items: center; z-index: 1; position: relative; gap: 10px; font-size: 16px; letter-spacing: -0.03em; transition-duration: 0.4s; color: #000; font-family: 'Cerapro'; font-weight: 500; }

.moreBtn.black{ background-color: #000; }
.moreBtn.black > .flx{ color: #fff; }

@media screen and (min-width: 821px){
    .moreBtn:hover > .flx{ color: #fff; }
    .moreBtn:hover::after{ transform: scaleX(1); }
}

@media screen and (max-width: 820px){
    .moreBtn > .flx{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .moreBtn{ width: 175px; height: 55px; }
    .moreBtn > .img{ width: 48px; height: 48px; }
}



/* header */
.header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 9997; height: 86px; transition-duration: 0.6s; }
.header.hide{ transform: translateY(-100%); }
.header .wrap{ display: flex; border-bottom: 1px solid #fff; box-sizing: border-box; height: 100%; align-items: center; justify-content: space-between; transition-duration: 0.2s; }
.header .hamWrap{ width: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.header .hamWrap .hambtn{ width: 100%; height: 18px;  margin-top: -5px; position: relative; }
.header .hamWrap .hambtn span{ width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; transition-duration: 0.4s; transform-origin: 50% 50%; display: block; border-radius: 10px; }
.header .hamWrap .hambtn span:nth-of-type(1){ top: 0; }
.header .hamWrap .hambtn span:nth-of-type(2){ top: 50%; }
.header .hamWrap .hambtn span:nth-of-type(3){ top: 100%; }

.header .logo{ position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.header .logo > a{ display: block; padding: 15px 0; text-align: center; }
.header .logo > a img{ filter: invert(1); transition-duration: 0.2s; }

.signbx{ display: flex; margin-right: -12px; color: #fff; align-items: center; transition-duration: 0.2s; flex-shrink: 0; }
.signbx.black{ color: #000; }
.signbx > a{ display: flex; padding: 12px; box-sizing: border-box; position: relative; font-family: 'Gestura Display'; font-size: 18px; letter-spacing: -0.03em; transition-duration: 0.2s; }

.header.black{ background-color: #fcf0d6; }
.header.black .wrap{ border-color: rgba(255,255,255,0); }
.header.black .signbx{ color: #000; }
.header.black .hamWrap .hambtn span{ background-color: #000; }
.header.black .logo > a img{ filter: invert(0); }
.header.black .signbx > a{ color: #000; }

.header.ham{ box-shadow: none; }

.header.ham ~ .enterbx ~ .menubx{ transform: translateY(0); opacity: 1; }

@media screen and (min-width: 821px){
    .signbx > a:hover{ color: #bc3329; }
}


@media screen and (max-width: 1280px){
    .header{ height: 70px; }
    .header .logo{ width: 50px; }
    .signbx > a{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    .header{ height: 50px; }
    .header .logo{ width: 35px; }
    .header .logo > a{ padding: 10px 0; }
    .header .signbx{ margin-right: -7px; }
    .signbx > a{ padding: 7px; }
}


/* 전체메뉴 */
.menubx{ position: fixed; top: 0; left: 0;width: 100%; 
    /* height: var(--vh100);  */
    min-height:100svh;
    max-height:100lvh;
    background-color: #fcf0d6; z-index: 9998; display: flex; opacity: 0; transform: translateY(-100%); transition-duration: 0.6s; }
.menubx .lbx{ width: 50%; }
.menubx .lbx img{ width: 100%; height: 100%; object-fit: cover; }
.menubx .rbx{ width: 50%; padding: 45px 80px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.menubx .rbx .top{ display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.menubx .rbx .top .close{ padding: 5px; font-size: 30px; letter-spacing: -0.03em; cursor: pointer; transition-duration: 0.2s; color: #000; }

.menubx .rbx nav{ font-size: 36px; letter-spacing: -0.03em; font-weight: 700; font-family: 'Gestura Display'; height: 100%; margin-top: 65px; }
/* .menubx .rbx nav .menu > li{ display: flex; align-items: baseline; flex-wrap: wrap; } */
.menubx .rbx nav .menu > li > a{ display: flex; padding: 20px 0; color: #000; transition-duration: 0.2s; line-height: 1.3; margin-right: 20px; align-items: center; }
.menubx .rbx nav .menu > li > a span{ font-family: Georgia, 'Times New Roman', Times, serif; }
.menubx .rbx nav .menu > li > a i{ margin-left: 10px; transition-duration: 0.4s; }
.menubx .rbx nav .menu > li.on > a i{ transform: rotate(180deg); }
.menubx .rbx nav .menu > li.on > a{ color: #bc3329; }
/* .menubx .rbx nav .menu > li > ol{ display: flex; position: relative; font-size: 20px; padding-left: 20px; gap: 30px; }
.menubx .rbx nav .menu > li > ol::before{ content: ''; display: block; width: 2px; height: 15px; background-color: #000; position: absolute; left: 0; bottom: 2px; }
.menubx .rbx nav .menu > li > ol > li > a{ color: #000; transition-duration: 0.2s; } */
.menubx .rbx nav .menu > li > ol{ box-sizing: border-box; display: none; }
.menubx .rbx nav .menu > li > ol > li > a{ display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; padding: 15px 0; color: #000; transition-duration: 0.2s; }



@media screen and (min-width: 821px){
    .menubx .rbx .top .close:hover{ color: #bc3329; }
    .menubx .rbx nav .menu > li > a:hover{ color: #bc3329; }
    .menubx .rbx nav .menu > li > ol > li > a:hover{ color: #bc3329; }
    .menubx .rbx nav .menu > li:hover > a{ color: #bc3329; }
}

@media screen and (max-width: 1280px){
    .menubx .rbx{ padding: 30px 50px; }
    .menubx .rbx nav{ font-size: 28px; }
    .menubx .rbx nav .menu > li > a{ padding: 15px 0; }
}

@media screen and (max-width: 820px){
    .menubx .lbx{ display: none; }
    .menubx .rbx{ width: 100%; padding: 30px 40px; }
    .menubx .rbx .top .close{ font-size: 28px; }
    .menubx .rbx nav .menu > li > ol > li > a{ font-size: 16px; padding: 10px 0; }
}

@media screen and (max-width: 500px){
    .menubx .rbx{ width: 100%; padding: 30px 5%; }
    .menubx .rbx .top{ align-items: flex-start; }
    .menubx .rbx nav{ font-size: 24px; }
    .menubx .rbx nav .menu > li > a{ padding: 10px 0; }
    .menubx .rbx .top .close{ font-size: 22px; }
}



/* footer */
.footer{ background-color: #fffcf5; padding-top: 70px; padding-bottom: 25px; box-sizing: border-box; position: relative; word-break: keep-all; }
.footer .wrap{ position: relative; }
.footer .topbtn{ position: absolute; top: 0; right: 0; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: #000; text-align: center; font-size: 20px; cursor: pointer; }

.footer .flxbx{ display: flex; width: 50%;  box-sizing: border-box; }
.footer .flxbx > span{ font-size: 17px; font-family: 'Figtree', sans-serif; letter-spacing: -0.03em; font-weight: 600; width: 105px; flex-shrink: 0; }
.footer .flxbx .nav{ font-size: 17px; letter-spacing: -0.03em; color: #242424; margin-top: -10px; font-family: 'Figtree', sans-serif; }
.footer .flxbx .nav > li > a{ display: block; padding: 10px 0; }

.footer .flxbx > em{ font-size: 17px; font-weight: 300; letter-spacing: -0.03em; line-height: calc(29 / 17); margin-top: -0.3em; }

.footer .topbx{ width: 100%; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; padding-bottom: 65px; box-sizing: border-box; }
.footer .topbx > p{ font-size: 24px; letter-spacing: -0.03em; font-weight: 700; line-height: calc(34 / 24); font-family: 'Gestura Display'; }
.footer .topbx .flxbx{ padding-left: 15px; }
.footer .topbx .flxbx > span{ color: #bc3329; }

.footer .botbx{ display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 40px; }
.footer .botbx .flxbx:nth-of-type(2){ padding-left: 15px; }

.footer .lastbx{ width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.footer .lastbx > small{ font-size: 14px; letter-spacing: -0.03em; line-height: 1.3; color: #c6c6c6; padding-right: 15px; box-sizing: border-box; }
.footer .lastbx .logo{ flex-shrink: 0; }

@media screen and (max-width: 1280px){
    .footer{ padding-top: 50px; }
    .footer .topbx{ padding-bottom: 20px; }
    .footer .topbx > p{ font-size: 20px; }
    .footer .flxbx > span{ font-size: 16px; width: 85px; }
    .footer .flxbx .nav{ font-size: 16px; }
    .footer .flxbx > em{ font-size: 16px; }
    .footer .botbx{ padding-top: 30px; }
}

@media screen and (max-width: 820px){
    .footer{ padding-top: 40px; }
    .footer .topbx > p{ font-size: 16px; }
    .footer .flxbx{ flex-direction: column; gap: 20px; }
    .footer .flxbx > span{ font-size: 14px; width: 65px; }
    .footer .flxbx .nav{ font-size: 14px; }
    .footer .flxbx > em{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .footer .topbx{ flex-direction: column; }
    .footer .flxbx{ width: 100%; margin-top: 20px; }
    .footer .topbx .flxbx{ padding-left: 0; display: none; }
    .footer .botbx{ padding-top: 10px; }
    .footer .botbx .flxbx:nth-of-type(2){ padding-left: 0; }

    .footer .lastbx{ margin-top: 30px; }
}



/* 레이어팝업 기본형 */
.layerbasic{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; word-break: keep-all; z-index: 9999; }
.layerbasic .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.layerbasic .inner{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1250px; background-color: #fff; padding: 15px; box-sizing: border-box; height: calc(800 / 960 * 100%); }
.layerbasic .inner .close{ position: absolute; z-index: 4; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: #000; font-size: 20px; right: 0; top: 0; cursor: pointer; }
.layerbasic .inner .cont{ padding: 40px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-top: 25px; gap: 35px; }
.layerbasic .inner .cont .subject{ font-size: 24px; letter-spacing: -0.03em; font-weight: 700; display: block; width: 100%;  box-sizing: border-box;  box-sizing: border-box; flex-shrink: 0; padding-right: 20px; }
.layerbasic .inner .cont .subject strong{ display: block; border-bottom: 1px solid #000; box-sizing: border-box; padding-bottom: 20px; }

.layerbasic .inner .cont .details{ height: 100%; overflow: auto; line-height: calc(26 / 16); font-size: 16px; letter-spacing: -0.025em; padding-right: 20px; box-sizing: border-box; }
.layerbasic .inner .cont .details::-webkit-scrollbar{ width: 5px; background-color: rgba(0,0,0,0.1); }
.layerbasic .inner .cont .details::-webkit-scrollbar-thumb{ width: 5px; background-color: rgba(0,0,0,0.3); }
.layerbasic .inner .cont .details strong{ display: block; font-weight: 700; margin: 25px 0; }


@media screen and (max-width: 1280px){
    .layerbasic .inner .cont{ padding: 20px; padding-right: 0; }
}

@media screen and (max-width: 820px){
    .layerbasic .inner{ padding: 5px; }
    .layerbasic .inner .cont{ gap: 10px; }
    .layerbasic .inner .cont .subject{ font-size: 20px; padding-bottom: 10px; }
    .layerbasic .inner .cont .details{ font-size: 14px; }
    .layerbasic .inner .cont .details strong{ margin: 10px 0; }
}