/* style.css */
main {
  --gap-50: 50px; 
}

@media screen and (max-width:1260px) {
  main {--gap-50:40px; }
}
@media screen and (max-width:1024px) {
  main {--gap-50:36px; }
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:480px) {
  main {--gap-50:24px; }
}


/******** about ********/
#about {}
#about .page-top {padding: 60px 0; }
#about .page-top .inner {max-width: 1800px; width: 90%; margin: auto;}
#about .page-top h2 {font-size: 60px; line-height: 1.5; margin-bottom: 100px; font-family: var(--ff-aboreto);}
#about .page-top p {font-size: var(--font-18); margin-top: 40px;}

#about .inner {margin: auto; width: 90%; position: relative;}

#about .page-top {overflow: visible; }
#about .page-top .inner {max-width: 1800px; }
#about .page-top .img-wrap {position: relative;}
#about .page-top .img-box {font-size: 0; position: relative;}
#about .page-top .parallax-item {aspect-ratio: 1/0.366; overflow: hidden;}
#about .page-top .parallax-item .parallax-cont {aspect-ratio: 1/0.38; overflow: hidden;} 
#about .page-top .parallax-item .parallax-cont img {transition-delay: 0.6s; object-position: center; }
#about .page-top .circle {font-size: 0; width: 200px; position: absolute; right: 0; top: 0; transform: translate(-90%, -50%); transition-delay: 0.8s; }
#about .page-top.ani-started .circle img {animation: rollingAni 15s 1.2s linear infinite;}
@keyframes rollingAni {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* #about .sect1 {overflow: visible; }
#about .sect1 .inner {max-width: 1800px; }
#about .sect1 .img-box {font-size: 0; }
#about .sect1 .parallax-item {aspect-ratio: 1/0.366; overflow: hidden;}
#about .sect1 .parallax-item .parallax-cont {aspect-ratio: 1/0.38; overflow: hidden;} 
#about .sect1 .parallax-item .parallax-cont img {transition-delay: 0.6s; object-position: 65% center; }
#about .sect1 .circle {font-size: 0; width: 200px; position: absolute; right: 0; top: 0; transform: translate(-90%, -50%); transition-delay: 0.8s; }
#about .sect1.ani-started .circle img {animation: rollingAni 15s 1.2s linear infinite;}
@keyframes rollingAni {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
} */

#about .sect2 {padding: calc(var(--gap-50)*4) 0;}
#about .sect2 .inner {max-width: 1380px; }
#about .sect2 ul {justify-self: center; }
#about .sect2 .item {position: relative; overflow: hidden;}
#about .sect2 .item .img-box {font-size: 0; filter: blur(0px); transition: filter 0.5s; }
#about .sect2 .item .text-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; padding: 30px;  display: flex; align-items: end;  color: #fff;} 
#about .sect2 .item .text-box::before {content:""; background: linear-gradient(to top, var(--primary) 0%, rgba(0,0,0,0) 50%); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.5s;}
#about .sect2 .item .text-box .inwrap {position: relative; transform: translateY(100%); transition: transform 0.5s; z-index: 1;}
#about .sect2 .item .text-box .tit {color: #fff; font-size: var(--font-24); line-height: 1; position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-100%); transition: color 0.5s;}
#about .sect2 .item .text-box p {font-size: var(--font-18); padding-top: 20px; opacity: 0; transition: opacity 0.5s;}

#about .sect2 .item .parallax-item {aspect-ratio: 1/1.1548; overflow: hidden;}
#about .sect2 .item .parallax-item .parallax-cont {aspect-ratio: 1/1.2;}

#about .sect2 .item:hover .img-box {filter: blur(3px);}
#about .sect2 .item:hover .text-box::before {background: rgba(71, 52, 41, 0.4); }
#about .sect2 .item:hover .text-box .inwrap {transform: translateY(0);}
#about .sect2 .item:hover .text-box p {opacity: 1;}

#about .sect3 {padding: calc(var(--gap-50)*3) 0 calc(var(--gap-50)*4); background: #fff; text-align: center;}
#about .sect3 .inner {max-width:1000px; } 
#about .sect3 .sect-head {margin-bottom: 60px;}
#about .sect3 .sect-head .deco {display: block; margin: 0 auto 60px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--primary); } 
#about .sect3 .sect-cont .img-box {font-size: 0; margin: auto; width: 80%; max-width: 432px; }
#about .sect3 .sect-cont .parallax-item {aspect-ratio: 1/1.29; overflow: hidden;}
#about .sect3 .sect-cont .parallax-item .parallax-cont {aspect-ratio: 1/1.32; }
#about .sect3 .sect-cont .bar {display: block; margin: 60px auto; width: 1px; height: 80px;  opacity: 0.5; position: relative;}
#about .sect3 .sect-cont .bar::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--primary); transition: height 0.6s 0.4s;}
#about .sect3 .sect-cont p {font-size: var(--font-20); padding: 0 50px; }
#about .sect3 .btn-box {margin-top: 80px; text-align: center;}
#about .sect3 .btn-box .btn-ty3 {display: inline-flex; align-items: center; justify-content: center; height: 62px; font-size: var(--font-20); border-radius: 31px; padding: 0 40px; }

#about .sect3 .sect-cont.ani-started .bar {}
#about .sect3 .sect-cont.ani-started .bar::before {height: 100%;}

#about .sect4 {padding: calc(var(--gap-50)*3) 0;}
#about .sect4 .inner {max-width: 1520px;}
#about .sect4 .sect-head {margin-bottom: 80px;}
#about .sect4 .sect-cont {display: flex; align-items: end;}
#about .sect4 .sect-cont .left {width: 52%;}
#about .sect4 .sect-cont .left .img-list {position: relative; aspect-ratio: 1/0.658; font-size: 0; width: 100%; }
#about .sect4 .sect-cont .left .img-list .parallax-item {overflow: hidden; aspect-ratio: 1/0.658;}
#about .sect4 .sect-cont .left .img-list .parallax-item .parallax-cont {aspect-ratio: 1/0.69;}
#about .sect4 .sect-cont .left li {position: absolute; left: 0; top: 0; opacity: 0; transition: 0.3s;}
#about .sect4 .sect-cont .left li.active {opacity: 1;}
#about .sect4 .sect-cont .left li .text-box {font-size: 20px; font-family: var(--ff-aboreto); line-height: 1; text-transform: uppercase; text-align: center; display: none;} 
#about .sect4 .sect-cont .left li .text-box::before {content:""; display: block; margin: 0 auto 10px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box;}
#about .sect4 .sect-cont .right {width: 48%; }
#about .sect4 .sect-cont .right .text-list {text-align: right;}
#about .sect4 .sect-cont .right .text-list li {padding: 25px 0; font-family: var(--ff-aboreto); font-size: 30px; line-height: 1; text-transform: uppercase; opacity: 0.3; transition: opacity 0.3s;}
#about .sect4 .sect-cont .right .text-list li span {position: relative; display: inline-block;}
#about .sect4 .sect-cont .right .text-list li span::before {content:""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; border: 2px solid var(--primary); border-radius: 50%; transform: translate(-30px, -50%); opacity: 0; transition: opacity 0.3s; box-sizing: border-box; }
#about .sect4 .sect-cont .right .text-list li:hover {opacity: 1;}
#about .sect4 .sect-cont .right .text-list li:hover span::before {opacity: 1;}

#about .sect4 .sect-cont .right .text-list li:nth-child(2) span {transition-delay: 0.2s;}
#about .sect4 .sect-cont .right .text-list li:nth-child(3) span {transition-delay: 0.3s;}
#about .sect4 .sect-cont .right .text-list li:nth-child(4) span {transition-delay: 0.5s;}
#about .sect4 .sect-cont .right .text-list li:nth-child(5) span {transition-delay: 0.6s;}
#about .sect4 .sect-cont .right .text-list li:nth-child(6) span {transition-delay: 0.8s;}

/* #about .sect5 {background: #fff; padding: calc(var(--gap-50)*4) 0 calc(var(--gap-50)*5); } */
#about .sect5 {background: #fff; padding: calc(var(--gap-50)*4) 0 calc(var(--gap-50)*2); }
#about .sect5 .inner {max-width: 1420px; }
#about .sect5 .sect-head {text-align: center; margin-bottom: 100px;}
#about .sect5 .sect-cont {}
#about .sect5 .sect-cont ul {display: flex; gap: 56px; justify-content: center; align-items: start;}
#about .sect5 .sect-cont ul li {max-width: 313px; flex: 1 1 0;}
#about .sect5 .sect-cont .item {text-align: center;}
#about .sect5 .sect-cont .item .icon {width: 100px; margin: 0 auto 40px; font-size: 0;}
#about .sect5 .sect-cont .item .tit {font-size: var(--font-24); line-height: 1.3; }
#about .sect5 .sect-cont .item p {font-size: var(--font-16); margin-top: 20px;}

#about .sect5 .sect-cont ul li:nth-child(2) .item {transition-delay: 0.2s;}
#about .sect5 .sect-cont ul li:nth-child(3) .item {transition-delay: 0.4s;}
#about .sect5 .sect-cont ul li:nth-child(4) .item {transition-delay: 0.6s;}
@media screen and (max-width:1280px) {
  #about .page-top h2 {font-size: 48px;}
  #about .page-top .circle {width: 140px;}
  /* #about .sect1 .circle {width: 140px;} */
  #about .sect4 .sect-cont .right .text-list li {padding: 20px 0; font-size: 26px;}
}
@media screen and (min-width:1025px) {
  #about .sect2 li:nth-child(1) .item .text-box {transition-delay: 0.2s;}
  #about .sect2 li:nth-child(2) .item .parallax-item .parallax-cont img {transition-delay: 0.2s;}
  #about .sect2 li:nth-child(2) .item .text-box {transition-delay: 0.4s;}
  #about .sect2 li:nth-child(3) .item .parallax-item .parallax-cont img {transition-delay: 0.4s;}
  #about .sect2 li:nth-child(3) .item .text-box {transition-delay: 0.6s;}
  
}
@media screen and (max-width:1024px){
  #about .page-top h2 br {display: none;}

  #about .sect2 .item .img-box {filter: blur(3px);}
  #about .sect2 .item .text-box::before {background: rgba(71, 52, 41, 0.4); }
  #about .sect2 .item .text-box .inwrap {transform: translateY(0);}
  #about .sect2 .item .text-box p {opacity: 1;}

  #about .sect4 .sect-head {text-align: center;}
  #about .sect4 .sect-cont .left {width: 100%;}
  #about .sect4 .sect-cont .left li {position: relative; opacity: 1; margin-bottom: 40px;}
  #about .sect4 .sect-cont .left li:last-child {margin-bottom: 0;}
  #about .sect4 .sect-cont .left li .text-box {display: block; margin-top: 20px;}
  #about .sect4 .sect-cont .right {display: none;}

  #about .sect5 .sect-cont ul {gap: 40px; flex-wrap: wrap; }
  #about .sect5 .sect-cont ul li {flex: unset; width: calc(50% - 20px); }

}
@media screen and (max-width:768px){
  #about .page-top {padding-bottom: 70px;}
  #about .page-top h2 {font-size: 36px; width: 90%; margin: 0 auto 60px;}
  #about .page-top .inner {width: 100%;}
  #about .page-top .parallax-item {aspect-ratio: 1/1;}
  #about .page-top .parallax-item .parallax-cont {aspect-ratio: 1/1.2;}
  #about .page-top .circle {width: 100px; transform: translate(-55%, -50%);}
  #about .page-top p {width: 90%; margin: 40px auto 0;}

  /* #about .sect1 .inner {width: 100%;}
  #about .sect1 .parallax-item {aspect-ratio: 1/1;}
  #about .sect1 .parallax-item .parallax-cont {aspect-ratio: 1/1.2;}
  #about .sect1 .circle {width: 100px; transform: translate(-55%, -50%);} */

  #about .sect5 .sect-cont .item .icon {width: 64px; margin-bottom: 20px;}
  #about .sect5 .sect-cont .item p {display: none;}
}
@media screen and (max-width:480px){
  #about .page-top h2 {font-size: 30px;}
  #about .page-top .circle {width: 70px;}

  /* #about .sect1 .circle {width: 70px;} */

  #about .sect2 .slide2 {width: 250px; margin: auto;}
  #about .sect2 .item .text-box {padding: 20px;}
  #about .sect2 .item .text-box .tit {font-size: 15px;}
  #about .sect2 .item .text-box p {font-size: 12px; padding-top: 12px;}

  #about .sect3 .sect-cont p {padding: 0 5%;}
  #about .sect3 .btn-box .btn-ty3 {height: 50px; padding: 0 30px;}
}


/******** offer ********/
#offer {}
#offer .page-top {padding-top: 80px; margin-bottom: 60px;}
#offer .page-top .inner {max-width: 1800px; width: 90%; margin: auto;}
#offer .page-top h2 {font-size: 80px; font-family: var(--ff-aboreto);}
#offer .page-top p {font-size: var(--font-20); margin-top: 1.5em;}
@media screen and (max-width:1600px){
  #offer .page-top h2 {font-size: 56px;}
}
@media screen and (max-width:768px) {
  #offer .page-top h2 {font-size: 42px;}
}
@media screen and (max-width:480px) {
  #offer .page-top h2 {font-size: 32px;}
}

#offer.list {padding-bottom: calc(var(--gap-50)*5);}
#offer.list .page-top {margin-bottom: calc(var(--gap-50)*3);}
#offer.list .page-top h2 {display: flex; justify-content: space-between; }
#offer.list .page-top p {text-align: right;}
#offer.list .offer-content {}
#offer.list .offer-content .inner {display: flex; gap: 60px; align-items: stretch; justify-content: space-between; max-width: 1800px; width: 90%; margin: auto;}
#offer.list .offer-content .side-menu {width: 400px; position: relative;}
#offer.list .offer-content .side-menu .sticky-box {position: sticky; left: 0; top: var(--headerH); }
#offer.list .offer-content .side-menu li {opacity: 0; transform: translateY(50%); transition-property: opacity, transform;  transition-duration: 0.3s, 0.3s;}
#offer.list .offer-content .side-menu li + li {margin-top: 20px;}
#offer.list .offer-content .side-menu li a {display: inline-flex; min-width: 120px; padding: 8px 15px; justify-content: center; align-items: center; text-align: center; opacity: 0.4; font-size: var(--font-20); border-radius: 24px;}
#offer.list .offer-content .side-menu li a.active {background: #fff; opacity: 1; }

#offer.list .offer-content .side-menu.ani-started li {opacity: 1; transform: translateY(0);}

#offer.list .offer-content .list {width: calc(100% - 460px); flex: 1 1 0; text-align: right; overflow: hidden;}
#offer.list .offer-content .list ul {display: flex; gap: 80px 60px; flex-wrap: wrap;}
#offer.list .offer-content .list ul li {width: calc(50% - 30px); }
#offer.list .offer-content .list .item {}
#offer.list .offer-content .list .item .img-box {font-size: 0; width: 100%;  overflow: hidden;}
#offer.list .offer-content .list .item .img-box img { width: 100%; height: 100%; object-fit: cover;}
#offer.list .offer-content .list li:nth-child(2n) .item .img-box img {transition-delay: 0.3s;}
#offer.list .offer-content .list .item .parallax-item {aspect-ratio: 3/4;}
#offer.list .offer-content .list .item .parallax-item .parallax-cont {aspect-ratio: 3/4.2;}
#offer.list .offer-content .list .item .parallax-item .parallax-cont span {display: block; transition: transform 0.3s; width: 100%; height: 100%;}
#offer.list .offer-content .list .item:hover .parallax-item .parallax-cont span {transform: scale(1.03);}
#offer.list .offer-content .list .item .text-box {margin-top: 20px;}
#offer.list .offer-content .list .item .text-box .tit {font-size: var(--font-24); }
#offer.list .offer-content .list .item .text-box .keyword { margin-top: 5px; font-size: var(--font-16); text-align: right; display: flex; justify-content: end; flex-wrap: wrap;  gap: 5px 10px; max-height: 3.2em; overflow: hidden; }
#offer.list .offer-content .list .item .text-box .keyword span::before {content:"#"; }

#wrap:has(#offer.detail) {padding-bottom: 80px; }
#offer.detail {}
#offer.detail section {}
#offer.detail .inner {width: 90%; margin: auto;}

#offer.detail .page-top {text-align: center;}

#offer.detail .intro {padding-bottom: calc(var(--gap-50)*4);}
#offer.detail .intro .inner {max-width: 1800px; }
#offer.detail .intro .img-box {font-size: 0; text-align: center; overflow: hidden;}
#offer.detail .intro .parallax-item {aspect-ratio: 1/0.45;}
#offer.detail .intro .parallax-item .parallax-cont {aspect-ratio: 1/0.48; }
#offer.detail .intro .sect-head {margin: calc(var(--gap-50)*3) auto 0; text-align: center; max-width: 740px; width: 100%; position: relative; padding-top: 38px;}
#offer.detail .intro .sect-head::before {content:""; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--primary); position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;}
#offer.detail .intro .sect-head .tit {line-height: 1.5; }
#offer.detail .intro .sect-head p {margin-top: 30px; transition-delay: 0.2s;}
#offer.detail .intro .sect-head .keyword {font-size: var(--font-18); display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 15px; padding-top: 60px; position: relative; transition-delay: 0.2s;}
#offer.detail .intro .sect-head .keyword::before {content:""; width: 64px; height: 1px; background: var(--primary); opacity: 0.5; position: absolute; left: 50%; top: 30px; transform: translateX(-50%); } 
#offer.detail .intro .sect-head .keyword span::before {content:"#";}

#offer.detail .intro .sect-head.ani-started::before {opacity: 1;}

#offer.detail .gallery {padding: calc(var(--gap-50)*3) 0 calc(var(--gap-50)*5); background: #fff; --gap:70px; }
#offer.detail .gallery .inner {max-width: 1418px; }
#offer.detail .gallery .sect-head {margin-bottom: calc(var(--gap-50)*2); text-align: center;}
#offer.detail .gallery .sect-cont .gallery-slide {position: relative;}
#offer.detail .gallery .sect-cont .gallery-slide .slide-arr {position: absolute; width: 100%; height: 0px; display: flex; justify-content: space-between; align-items: center; left: 0; top: 50%; z-index: 5; }
#offer.detail .gallery .sect-cont .gallery-slide .slide-arr a {display: none; width: 30px; height: 30px; font-size: 1px; color: rgba(0,0,0,0); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/img/com/arrow_left.svg); }
#offer.detail .gallery .sect-cont .gallery-slide .slide-arr a.next {background-image: url(/img/com/arrow_right.svg);}
#offer.detail .gallery .sect-cont ul {display: flex; flex-wrap: wrap; gap: var(--gap); }
#offer.detail .gallery .sect-cont ul li {width: calc((100% - (var(--gap)*2))/3);}
#offer.detail .gallery .sect-cont a {display: block; font-size: 0;}
#offer.detail .gallery .sect-cont a .img-box {width: 100%; }
#offer.detail .gallery .sect-cont a .parallax-item {aspect-ratio: 3/4; overflow: hidden;}
#offer.detail .gallery .sect-cont a .parallax-item .parallax-cont {aspect-ratio: 3/4.2; }
#offer.detail .gallery .sect-cont a .img-box img {width: 100%; height: 100%; object-fit: cover; }

#offer.detail .gallery .sect-cont .swiper-progress { display: none; position: relative; width: calc(100% - 60px); margin: 20px auto 0; background: rgba(71, 52, 41, 0.2); height: 3px;}
#offer.detail .gallery .sect-cont .swiper-progress .swiper-pagination-progressbar-fill {background: var(--primary);}
#offer.detail .gallery .sect-cont .btn-box {display: none;}

#offer.detail .offer {padding: calc(var(--gap-50)*3) 0 calc(var(--gap-50)*5); }
#offer.detail .offer .inner {max-width: 1200px; }
#offer.detail .offer .sect-head {text-align: center; margin-bottom: calc(var(--gap-50)*2);}
#offer.detail .offer .sect-cont {position: relative;}
#offer.detail .offer .sect-cont .swiper-pagination {margin-top: 40px;}
#offer.detail .offer .sect-cont .slide-area {position: relative;}
#offer.detail .offer .sect-cont .img-slide {}
#offer.detail .offer .sect-cont .img-slide .item {}
#offer.detail .offer .sect-cont .img-slide .item .img-box {max-width: 516px; font-size: 0; aspect-ratio: 1/1.147; margin: 0 auto;  overflow: hidden; background: #fff;}
#offer.detail .offer .sect-cont .img-slide .item .img-box img {width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: transform 0.3s;}
#offer.detail .offer .sect-cont .offer-slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5;}
#offer.detail .offer .sect-cont .offer-slide .swiper-wrapper {height: 100%;}
#offer.detail .offer .sect-cont .offer-slide .slide-arr {position: absolute; width: 100%; height: 0px; display: flex; justify-content: space-between; align-items: center; left: 0; top: 50%; z-index: 5;}
#offer.detail .offer .sect-cont .offer-slide .slide-arr a {display: block; width: 30px; height: 30px; font-size: 1px; color: rgba(0,0,0,0); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/img/com/arrow_left.svg); opacity: 0.6; transition: opacity 0.3s;}
#offer.detail .offer .sect-cont .offer-slide .slide-arr a.next {background-image: url(/img/com/arrow_right.svg);}
#offer.detail .offer .sect-cont .offer-slide .slide-arr a:hover {opacity: 1;}

#offer.detail .offer .sect-cont .offer-slide .item {position: relative; text-align: center; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#offer.detail .offer .sect-cont .offer-slide .item .text-box {font-family: var(--ff-aboreto); font-size: 70px; line-height: 1.2; width: 100%; padding: 0 5%; opacity: 0.2; transition: opacity 0.3s; }
#offer.detail .offer .sect-cont .offer-slide .item .text-box span {display: inline-block; font-weight: 700; font-size: var(--font-18); vertical-align: top; margin-left: 0.5em;}
#offer.detail .offer .sect-cont .offer-slide .swiper-slide-active .item .text-box {opacity: 1;}

.fixed-btn {position: fixed; z-index: 900; left: 0; bottom: 0; width: 100%; }
.fixed-btn a {display: flex; background: #6C5D54; transition: background-color 0.4s; justify-content: center; align-items: center; gap: 10px; color: #fff; height: 80px; font-size: var(--font-24);}
.fixed-btn a i.icon { width: 20px; height: 20px; font-size: 0; display: block; transition: transform 0.3s;}
.fixed-btn a i.icon::before {content:""; width: 100%; height: 100%; display: block; background: url(/img/com/arrow_left_w.svg); background-position: center; background-repeat: no-repeat; transform: scaleX(-1); background-size: cover;}
.fixed-btn a:hover {background-color: var(--primary); }
.fixed-btn a:hover i.icon {transform: translateX(10px); }

.gallery-modal {position: fixed; z-index: 10000; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s; overscroll-behavior: contain; }
.gallery-modal.open {opacity: 1; pointer-events: auto;}
.gallery-modal .modal-wrap {max-width: 800px; width: 90%; position: relative;}
.gallery-modal .modal-wrap .close-btn {position: absolute; width: 40px; height: 40px; right: 0; top: 0; transform: translateY(-100%); font-size: 1px; color: rgba(0,0,0,0); }
.gallery-modal .modal-wrap .close-btn::before,
.gallery-modal .modal-wrap .close-btn::after {content:""; position: absolute; width: 80%; height: 2px; background: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); }
.gallery-modal .modal-wrap .close-btn::after {transform: translate(-50%,-50%) rotate(-45deg);}
.gallery-modal .modal-cont {position: relative; padding: 30px 50px; overflow: hidden;}
.gallery-modal .modal-cont .swiper-container {overflow: hidden;}
.gallery-modal .modal-cont .img-box {font-size: 0; max-width: 100%; max-height: auto; margin: 0 auto;}
.gallery-modal .modal-cont .img-box img {width: 100%; height: 800px; max-height: 85vh; object-fit: contain; vertical-align: middle;}
.gallery-modal .modal-cont .slide-arr {position: absolute; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 0; left: 0; top: 50%; z-index: 5;}
.gallery-modal .modal-cont .slide-arr a {display: block; width: 42px; height: 42px; font-size: 1px; color: rgba(0,0,0,0); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/img/com/arrow_left_w.svg);}
.gallery-modal .modal-cont .slide-arr a.next {transform: scaleX(-1);}
.gallery-modal .modal-cont .pagination {position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; font-size: 16px; color: #fff; }

.package-view {display: flex; height: 100%; background: #EDEBEB;}
.package-view .left {width: 540px; flex-shrink: 0; font-size: 0; height: 100%;}
.package-view .left .img-box,
.package-view .left .img-box span {display: block; width: 100%; height: 100%; overflow: hidden;}
.package-view .left .img-box span img {width: 100%; height: 100%;object-fit: cover;}
.package-view .right {width: calc(100% - 540px); height: 100%; }
.package-view .package-wrap {width: 100%; height: 100%;  display: flex; flex-direction: column; --tabH:62px; padding: 60px; } 
.package-view .package-wrap .package-top {width: 100%; padding: 0 40px; flex-shrink: 0; }
.package-view .package-wrap .tab-menu { height: var(--tabH);  border-bottom: 1px solid rgba(71, 52, 41, 0.3); overflow: hidden;}
.package-view .package-wrap .tab-menu ul { }
.package-view .package-wrap .tab-menu ul li {}
.package-view .package-wrap .tab-menu ul li a {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0.3; font-size: var(--font-20); width: 100%; height: calc(var(--tabH) - 2px); padding: 0 10px; line-height: 1.3;}
.package-view .package-wrap .tab-menu ul li a::before {content:""; width: 100%; height: 2px; background: var(--primary); position: absolute; left: 0; bottom: -1px;   overflow: hidden; opacity: 0;}
.package-view .package-wrap .tab-menu ul li.active a {opacity: 1;}
.package-view .package-wrap .tab-menu ul li.active a::before {opacity: 1;}
.package-view .package-wrap .package-btm {height: calc(100% - var(--tabH) - 80px); position: relative;}
.package-view .package-wrap .package-btm:has(.overScroll)::before {display: block;}
.package-view .package-wrap .package-btm::before {content:""; width: 100%; height: 100px; background: linear-gradient(to top, #EDEBEB, rgba(0,0,0,0)); position: absolute; left: 0; bottom: 0; z-index: 1; pointer-events: none; display: none;}
.package-view .package-wrap .package-btm .tab-cont-wrap {height: 100%; overflow-y: auto;  padding: 0 40px; position: relative;}
.package-view .package-wrap .package-btm .tab-cont-wrap::-webkit-scrollbar {width: 6px;}
.package-view .package-wrap .package-btm .tab-cont-wrap::-webkit-scrollbar-thumb {width: 6px; border-radius: 4px; background: #ccc; }

.package-view .package-wrap .package-btm .tab-cont {display: none; padding: 40px 0;}
.package-view .package-wrap .package-btm .tab-cont .intro {font-size: var(--font-20); margin-bottom: 40px; white-space: wrap !important;}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area {display: flex; flex-wrap: wrap; gap: 40px;}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box {width: calc(50% - 20px); }
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-tit {font-size: var(--font-20); margin-bottom: 1em; padding-left: 18px; position: relative;}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-tit::before {content:""; width: 8px; height: 8px; position: absolute; left: 0; top: 0.8em; transform: translateY(-50%); border-radius: 50%; box-sizing: border-box; border: 1px solid var(--primary); }
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-cont {background: rgba(248, 248, 248, 0.4); padding: var(--font-20); height: calc(100% - (var(--font-20)*2.6));}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-cont ul {font-size: var(--font-18);}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-cont ul li + li {margin-top: 10px;}
.package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box .box-cont .info {font-size: var(--font-16); opacity: 0.8; margin-top: 40px;}
.package-view .package-wrap .package-btm .tab-cont .total-price {margin-top: 30px;padding: 0 20px; font-size: var(--font-24); }

.package-view .package-wrap .package-btm .btm-box {position: absolute; left: 0; bottom: 0; transform: translate(0, 80px); display: flex; align-items: center; justify-content: space-between; z-index: 2; gap: 12px; width: 100%; padding: 0 40px; }
.package-view .package-wrap .package-btm .btm-box .total {font-size: var(--font-24);}
.package-view .package-wrap .package-btm .btm-box .contact-box {display: flex; justify-content: end; align-items: center; margin-top: 0px; gap: 40px;  }
.package-view .package-wrap .package-btm .btm-box .contact-box .call {display: flex; gap: 20px; align-items: center;}
.package-view .package-wrap .package-btm .btm-box .contact-box .call a {display: block; width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.package-view .package-wrap .package-btm .btm-box .contact-box .call a.app {background-image: url(/img/com/icon_app.svg);}
.package-view .package-wrap .package-btm .btm-box .contact-box .call a.mail {background-image: url(/img/com/icon_mail.svg);}
.package-view .package-wrap .package-btm .btm-box .contact-box .btn-box a {display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-20); height: 62px; padding: 0 20px; width: 210px; border-radius: 32px; }

@media screen and (max-width:1600px){
  .package-view .left {width: 28%;}
  .package-view .right {width: 72%;}
  .package-view .package-wrap {padding-right: 44px;}
  .package-view .package-wrap .package-top {padding: 0; padding-right: 16px;}
  .package-view .package-wrap .package-btm .tab-cont-wrap {padding: 0; padding-right: 16px;}
  .package-view .package-wrap .package-btm .tab-cont {padding: 32px 0;}
}
@media screen and (max-width:1280px){
  #offer.list .offer-content .side-menu {width: 160px;}
  #offer.list .offer-content .list {width: calc(100% - 200px);}
  #offer.list .offer-content .list ul {gap: 60px 40px; }
  #offer.list .offer-content .list ul li {width: calc(50% - 20px);}

  #offer.detail .gallery {--gap:20px; } 
  #offer.detail .gallery .sect-cont ul {}

  .package-view .package-wrap {padding: 60px 40px;}
  .package-view .package-wrap .package-btm .btm-box {padding: 0 10px;}
}
@media screen and (min-width:1025px){
  #offer.list .offer-content .side-menu li:nth-child(2) {transition-delay: 0.1s;}
  #offer.list .offer-content .side-menu li:nth-child(3) {transition-delay: 0.2s}
  #offer.list .offer-content .side-menu li:nth-child(4) {transition-delay: 0.3s}
  #offer.list .offer-content .side-menu li:nth-child(5) {transition-delay: 0.4s}
  #offer.list .offer-content .side-menu li:nth-child(n+6) {transition-delay: 0.6s}


  #offer.detail .gallery .sect-cont ul li:nth-child(3n-1) .img-box img {transition-delay: 0.2s;}
  #offer.detail .gallery .sect-cont ul li:nth-child(3n) .img-box img {transition-delay: 0.3s;}
}
@media screen and (max-width:1024px){
  #wrap:has(#offer.detail) {padding-bottom: 52px;}
  .fixed-btn a {height: 52px; font-size: 18px;}

  #offer.list .page-top h2 {flex-direction: column; }
  #offer.list .page-top h2 span:last-child {margin-left: auto;}

  #offer.list .offer-content {overflow: hidden;}
  #offer.list .offer-content .inner {flex-wrap: wrap; }
  #offer.list .offer-content .side-menu {width: 100%; overflow-x: auto;}
  #offer.list .offer-content .side-menu::-webkit-scrollbar {display: none;}
  #offer.list .offer-content .side-menu .sticky-box {position: relative; left: 0; top: 0; width: max-content;}
  #offer.list .offer-content .side-menu ul {display: flex; gap: 12px; justify-content: center; align-items: center; width: max-content;}
  #offer.list .offer-content .side-menu li {flex-shrink: 0;}
  #offer.list .offer-content .side-menu li + li {margin: 0;}
  #offer.list .offer-content .side-menu li a {min-width: 80px; }
  #offer.list .offer-content .list {width: 100%;}

  #offer.detail .offer .sect-cont .offer-slide .item .text-box {font-size: 42px; padding: 0 30px;}
  #offer.detail .offer .sect-cont .offer-slide .slide-arr a {opacity: 1;}
  .gallery-modal .modal-cont .img-box img {height: auto; max-height: auto;}

  .package-view .left {display: none;}
  .package-view .right {width: 100%;}
  .package-view .package-wrap {padding: 40px;}
  .package-view .package-wrap .package-btm {height: calc(100% - var(--tabH) - 60px);}

  .package-view .package-wrap .package-btm .btm-box {transform: translate(0px, 60px);}
  .package-view .package-wrap .package-btm .btm-box .contact-box {gap: 24px; }
  .package-view .package-wrap .package-btm .btm-box .contact-box .call a {width: 26px; height: 26px;}
}
@media screen and (max-width:768px){
  #offer.list .offer-content .list ul {gap: 40px 12px; }
  #offer.list .offer-content .list ul li {width: calc(50% - 6px); }

  #offer.detail .gallery {--gap:8px; }
  #offer.detail .gallery .sect-cont .gallery-slide {overflow: hidden; }
  #offer.detail .gallery .sect-cont .gallery-slide .slide-arr a {display: block;}
  #offer.detail .gallery .sect-cont ul {flex-wrap: nowrap; gap: 0;}
  #offer.detail .gallery .sect-cont ul li {width: auto;}
  #offer.detail .gallery .sect-cont .gallery-slide .swiper-slide a {padding: 0 35px;}
  #offer.detail .gallery .sect-cont .swiper-progress {display: block;}

  #offer.detail .gallery .sect-cont.show-all .gallery-slide {}
  #offer.detail .gallery .sect-cont.show-all .gallery-slide .slide-arr a {display: none;}
  #offer.detail .gallery .sect-cont.show-all .gallery-slide ul {flex-wrap: wrap; gap: 20px; }
  #offer.detail .gallery .sect-cont.show-all .gallery-slide ul li {width: 100%;}
  #offer.detail .gallery .sect-cont.show-all .gallery-slide .swiper-slide a {padding: 0;}
  #offer.detail .gallery .sect-cont.show-all .swiper-progress {display: none;}
  /* #offer.detail .gallery .sect-cont.show-all .btn-box {display: none;} */
  
  
  #offer.detail .gallery .sect-cont .btn-box {display: block; margin-top: 20px;  text-align: center; }
  #offer.detail .gallery .sect-cont .btn-box a {display: inline-flex; color: var(--primary); font-size: 16px; opacity: 0.8; text-decoration: underline; text-underline-position: under; justify-content: center; align-items: center; gap: 5px;}
  #offer.detail .gallery .sect-cont .btn-box a::after {content: ""; width: 16px; height: 16px; margin-top: 3px; background: url(/img/com/arrow_right.svg) center center / cover no-repeat;}

  #offer.detail .offer .sect-cont .img-slide .item .img-box {max-width: calc(100% - 65px);}

  .gallery-modal .modal-cont .slide-arr a {display: none;}

  .package-view .package-wrap {padding: 26px; --tabH:52px;}
  .package-view .package-wrap .package-top {padding-right: 0;}
  .package-view .package-wrap .package-btm {height: calc(100% - var(--tabH) - 80px);}
  .package-view .package-wrap .package-btm::before {height: 80px;}
  .package-view .package-wrap .package-btm .tab-cont-wrap {padding-right: 0;}
  .package-view .package-wrap .package-btm .tab-cont-wrap::-webkit-scrollbar {width: 4px;}
  .package-view .package-wrap .package-btm .tab-cont-wrap::-webkit-scrollbar-thumb {width: 4px;}
  .package-view .package-wrap .package-btm .tab-cont {padding: 22px 0;}
  .package-view .package-wrap .package-btm .tab-cont .prd-cont-area .prd-box {width: 100%; }
  .package-view .package-wrap .package-btm .btm-box {padding: 0; flex-direction: column; height: 80px; overflow: hidden; justify-content: end; align-items: start; transform: translate(0,80px); gap: 8px; }
  .package-view .package-wrap .package-btm .btm-box .contact-box {gap: 16px; width: 100%; justify-content: end;}
  .package-view .package-wrap .package-btm .btm-box .contact-box .call {gap: 10px;}
  .package-view .package-wrap .package-btm .btm-box .contact-box .btn-box a {height: 38px; width: 98px; font-size: 16px;}
}
@media screen and (max-width:480px) {
  .fixed-btn a {font-size: 16px; gap: 5px;}
  .fixed-btn a i.icon {width: 16px; height: 16px;}

  #offer.list .offer-content .list .item .text-box .keyword {font-size: 12px;}

  .gallery-modal .modal-wrap {width: 95%;}
  .gallery-modal .modal-wrap .close-btn {width: 30px; height: 30px;}
  .gallery-modal .modal-cont {padding: 0; }
  .gallery-modal .modal-cont .pagination {display: none;}
  /* .gallery-modal .modal-cont .slide-arr a {width: 32px; height: 32px;} */

  /* #offer.detail .intro .sect-head p br {display: none;} */

  #offer.detail .offer .sect-cont .offer-slide .item .text-box {font-size: 26px;}
  #offer.detail .offer .sect-cont .offer-slide .item .text-box span {font-size: 14px;}
  #offer.detail .offer .sect-cont .swiper-pagination {margin-top: 24px;}
}

/******** blog ********/
#blog.list {padding-top: 60px; padding-bottom: calc(var(--gap-50)*5);}
#blog.list .page-top {margin-bottom: calc(var(--gap-50)*4);}
#blog.list .page-top .inner {max-width: 1800px; width: 90%; margin: auto; display: flex; gap: 120px; align-items: start;}
#blog.list .page-top .text-box {width: 760px; flex-shrink: 0;}
#blog.list .page-top h2 {display: flex; justify-content: space-between; font-size: 80px; font-family: var(--ff-aboreto); line-height: 1.3; flex-direction: column; }
#blog.list .page-top h2 span {display: block; width: 100%;}
#blog.list .page-top h2 span:last-child {text-align: right; margin-top: var(--gap-50);}
#blog.list .page-top p { font-size: var(--font-20); margin-top: 80px;}
#blog.list .page-top .img-box {width: calc(100% - 760px - 120px); font-size: 0;}
#blog.list .page-top .parallax-item {aspect-ratio: 1/0.82; overflow: hidden; }
#blog.list .page-top .parallax-item .parallax-cont {aspect-ratio: 1/0.84;}

#blog.list .blog-content {}

#blog.list .review-box {}
#blog.list .review-box a {display: block; position: relative;}
#blog.list .review-box .img-box {font-size: 0; overflow: hidden;}
#blog.list .review-box .img-box span {display: block; width: 100%; overflow: hidden;}
#blog.list .review-box .img-box span img {width: 100%; height: 100%; object-fit: cover;}
#blog.list .review-box .img-box .parallax-cont span {display: block; width: 100%; height: 100%; transition: transform 0.5s;}
#blog.list .review-box:hover .img-box .parallax-cont span {transform: scale(1.03);}
#blog.list .review-box .text-box .badge {font-size: 15px; margin-bottom: 20px; background: #F8F8F8CC; opacity: 0.8; padding: 4px 12px; border-radius: 5px; display: inline-block; text-transform: uppercase; width: fit-content; }
#blog.list .review-box .text-box .tit { font-size: var(--font-20); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
#blog.list .review-box .text-box .info {display: flex; align-items: center; gap: 10px; font-size: 15px;  opacity: 0.8;}
#blog.list .review-box .text-box .info span {position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#blog.list .review-box .text-box .info span.bar {content:""; width: 1px; height: 12px; background: #fff; flex-shrink: 0;}
#blog.list .review-box .text-box .info span:last-child {flex-shrink: 0; }
#blog.list .review-box .text-box .info:has(span:last-child:empty) span.bar {display: none;}

#blog.list .featured { overflow: hidden; margin-bottom: calc(var(--gap-50)*4);}
#blog.list .featured .inner {max-width: 1220px; width: 90%; margin: auto;}
#blog.list .featured .sect-cont {position: relative;}
#blog.list .featured .sect-cont .back {position: absolute; width: 100vw; padding: 40px 0; font-size: 0; overflow: hidden; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(71, 52, 41, 0.2); }
#blog.list .featured .sect-cont .back .rolling-wrapper {display: flex; width: max-content; animation: rolling 100s linear infinite;}
#blog.list .featured .sect-cont .back .rolling-wrapper .item { flex-shrink: 0; }
#blog.list .featured .sect-cont .back .rolling-wrapper .item img {display: block; height: 220px;}
@keyframes rolling {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}
#blog.list .featured .sect-cont .freivews {display: flex; gap: 60px; position: relative;}
#blog.list .featured .sect-cont .freivews .r-item {width: calc(50% - 30px); }
#blog.list .featured .sect-cont .freivews .r-item:last-child img {transition-delay: 0.2s; }
#blog.list .featured .sect-cont .freivews .r-item .img-box.parallax-item {aspect-ratio: 1/1.327;}
#blog.list .featured .sect-cont .freivews .r-item .img-box span.parallax-cont { aspect-ratio: 1/1.37;}
#blog.list .featured .sect-cont .freivews .r-item .text-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: end; padding: 30px; background: linear-gradient(to top, var(--primary), rgba(0,0,0,0) 50%);}
#blog.list .featured .sect-cont .freivews .r-item .text-box .tit {color: #fff; }
#blog.list .featured .sect-cont .freivews .r-item .text-box .info {color: #fff; }

#blog.list .review {position: relative;}
#blog.list .review::before {content:""; width: 95%; height: 1px; max-width: 1800px; margin: 0 auto; background: var(--primary); opacity: 0.5; display: block;}
#blog.list .review .inner {margin: auto; width: 90%; max-width: 1500px; padding-top: 60px;}
#blog.list .review .category {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 80px; text-transform: uppercase; text-align: center; flex-wrap: wrap;}
#blog.list .review .category a {display: inline-block; padding: 4px 12px; min-width: 117px; border-radius: 20px; opacity: 0.4; color: var(--primary);}
#blog.list .review .category a.active {background: #F8F8F8; opacity: 1;}
#blog.list .review .list {display: flex; flex-wrap: wrap; gap: 80px 60px; }
#blog.list .review .list li {width: calc((100% - 120px)/3);}
#blog.list .review .list li .item .img-box.parallax-item {aspect-ratio: 1/1.217;}
#blog.list .review .list li .item .img-box span.parallax-cont {aspect-ratio: 1/1.26;}
#blog.list .review .list li .item .text-box {margin-top: var(--font-20); }
#blog.list .review .list li .item .text-box .btm {display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#blog.list .review .list li .item .text-box .info .bar {background: var(--primary);}
#blog.list .review .list li .item .text-box .btm .info {width: calc(100% - 90px);}
#blog.list .review .list li .item .text-box .btm .date {opacity: 0.8; font-size: 15px; flex-shrink: 0; width: 80px; text-align: right;}
#blog.list .review .list li .item .text-box p {display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; margin-top: 4px; margin-bottom: 20px;}
#blog.list .review .pagination {margin-top: calc(var(--gap-50)*2);}

@media screen and (max-width:1600px){
  #blog.list .page-top .inner {gap: 60px; }
  #blog.list .page-top h2 {font-size: 56px;}
  #blog.list .page-top .text-box {width: calc(100% - 560px);}
  #blog.list .page-top .img-box {width: 500px;}
}
@media screen and (max-width:1260px){
  #blog.list .page-top .inner { }
  #blog.list .page-top .text-box {width: 100%; max-width: 1024px; }
  #blog.list .page-top p {margin-top: 60px;}
  #blog.list .page-top .img-box {display: none;}
}
@media screen and (min-width:1025px){
  #blog.list .review .list li:nth-child(3n-1) .item .img-box img {transition-delay: 0.2s;}
  #blog.list .review .list li:nth-child(3n) .item .img-box img {transition-delay: 0.3s;}
}
@media screen and (max-width:1024px){

  #blog.list .review .list {gap: 60px; }
  #blog.list .review .list li {width: calc(50% - 30px);}
  #blog.list .review .list li:nth-child(2n) .item .img-box img {transition-delay: 0.2s;}
  
}
@media screen and (max-width:768px){
  #blog.list .page-top h2 {font-size: 42px;}

  #blog.list .review-box .text-box .badge {font-size: 12px; padding: 4px 10px 3px; margin-bottom: 12px;}
  #blog.list .review-box .text-box .info {font-size: 13px;}
  #blog.list .review-box .text-box .info span.bar {height: 10px;}

  #blog.list .featured .sect-cont .freivews {gap: 40px; flex-direction: column; align-items: center;}
  #blog.list .featured .sect-cont .freivews .r-item {width: 100%; max-width: 400px;}
  #blog.list .featured .sect-cont .freivews .r-item .text-box {padding: 24px;}
  #blog.list .featured .sect-cont .back .rolling-wrapper .item img {height: 120px;}

  #blog.list .review .category {gap: 12px;}
  #blog.list .review .category .cate-item:first-child {margin: 0 calc((100% - 117px)/2);}

  #blog.list .review .list {gap: 60px 24px;}
  #blog.list .review .list li {width: calc(50% - 12px);}
  #blog.list .review .list li .item .text-box p {display: none;}
  #blog.list .review .list li .item .text-box .btm {flex-direction: column; gap: 4px; align-items: start; margin-top: 8px;}
  #blog.list .review .list li .item .text-box .btm .info {width: 100%;}
  #blog.list .review .list li .item .text-box .btm .date {margin-left: auto; font-size: 13px;}
}
@media screen and (max-width:480px){
  #blog.list .page-top h2 {font-size: 32px;}

  #blog.list .review .list {gap: 40px 12px;}
  #blog.list .review .list li {width: calc(50% - 6px);}
}

#blog.detail {padding-bottom: calc(var(--gap-50)*5);}
#blog.detail .inner {width: 90%; max-width: 1100px; margin: auto; }
#blog.detail .top {text-align: center; padding-bottom: 20px;  padding-top: calc(var(--gap-50)*3);}
#blog.detail .top .title {margin-bottom: 40px;}
#blog.detail .top .title h2 {font-family: var(--ff-aboreto); font-size: 36px; line-height: 1.3;}
#blog.detail .top .board-info {display: flex; justify-content: center; align-items: center; gap: 40px; }
#blog.detail .top .board-info > div {padding-left: 30px; background-position: center left; background-repeat: no-repeat; background-size: 20px; opacity: 0.6; font-size: 15px;}
#blog.detail .top .board-info .customer {background-image: url(/img/com/icon_people.svg);}
#blog.detail .top .board-info .date {background-image: url(/img/com/icon_calendar.svg);}
#blog.detail .top .board-info .view {background-image: url(/img/com/icon_view.svg);}

#blog.detail .content {}
#blog.detail .content .details {border: 1px solid rgba(71, 52, 41, 0.3); border-width: 1px 0; padding: 60px; padding-bottom: 120px; --gap:30px;}
#blog.detail .content .details .cont {margin: var(--gap) 0;}
#blog.detail .content .details .cont:first-child {margin-top: 0;}
#blog.detail .content .details .cont:last-child {margin-bottom: 0;}
#blog.detail .content .details .cont.text {}
#blog.detail .content .details .cont.text p {font-size: var(--font-18); } 
#blog.detail .content .details .cont span {display: block; font-size: 0; width: 100%; text-align: center;}
#blog.detail .content .details .cont span video,
#blog.detail .content .details .cont span img {width: 100%;}
#blog.detail .content .details .cont.img.ty2 {display: flex; gap: var(--gap);}
#blog.detail .content .details .cont.img.ty2 span {width: calc((100% - var(--gap))/2);}
#blog.detail .content .btn-box {margin-top: 60px; text-align: center;}
#blog.detail .content .btn-box a {display: inline-flex; justify-content: center; align-items: center; height: 46px; padding: 0 40px; font-size: var(--font-20); border-radius: 23px; }

#blog.detail .recommend {margin-top: calc(var(--gap-50)*3);}
#blog.detail .recommend .item a {display: block;}
#blog.detail .recommend .item .img-box {font-size: 0;}
#blog.detail .recommend .item .img-box span {display: block; aspect-ratio: 1/1.218; overflow: hidden; }
#blog.detail .recommend .item .img-box span img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s;}
#blog.detail .recommend .item .text-box {margin-top: 15px;}
#blog.detail .recommend .item .text-box .tit {font-size: var(--font-18); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#blog.detail .recommend .item .text-box .info {opacity: 0.6; font-size: 15px; margin-top: 10px; display: flex; align-items: center; gap: 10px;}
#blog.detail .recommend .item .text-box .info span {position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#blog.detail .recommend .item .text-box .info span.bar {content:""; width: 1px; height: 12px; background: var(--primary); }
#blog.detail .recommend .item .text-box .info span:last-child {flex-shrink: 0;}

#blog.detail .recommend .item:hover .img-box span img { transform: scale(1.05); }
@media screen and (max-width:1024px){
  #blog.detail .top .title h2 {font-size: 30px;}
  #blog.detail .top .board-info {gap: 24px;}
  #blog.detail .content .details {padding: 42px;}
}
@media screen and (max-width:768px) {
  #blog.detail .top .title h2 {font-size: 24px;}
  #blog.detail .top .board-info {gap: 16px; flex-wrap: wrap;}
  #blog.detail .top .board-info > div {font-size: 14px; padding-left: 24px; background-size: 16px; }
  #blog.detail .top .board-info .customer {width: 100%; padding: 0; background-image: none;}
  #blog.detail .content .details {padding: 24px 12px; --gap:24px; }
  #blog.detail .content .details .cont.text p {font-size: 15px;}
  #blog.detail .content .btn-box {margin-top: 42px;}
  #blog.detail .recommend .item .text-box .info {margin-top: 6px; font-size: 13px;  gap: 5px;}
}
@media screen and (max-width:768px){
  #blog.detail .content .details .cont.img.ty2 {gap: 12px;}
  #blog.detail .content .details .cont.img.ty2 span {width: calc(50% - 6px); }
}

/******** mypage ********/
#mypage {padding-bottom: calc(var(--gap-50)*5);}
#mypage .page-top {padding: 60px 0; margin-bottom: 90px; }
#mypage .page-top .inner {max-width: 1800px; width: 90%; margin: 0 auto;}
#mypage .page-top h2 {font-family: var(--ff-aboreto); font-size: 80px; line-height: 1.3; margin-bottom: 30px;}
#mypage .page-top p {font-size: var(--font-20); }
#mypage .page-top p em {font-weight: 700;}

#mypage .my-content {display: flex; max-width: 1800px; width: 90%; margin: 0 auto; gap: 100px; align-items: stretch; }
#mypage .my-content .side-menu {width: 330px; position: relative;}
#mypage .my-content .side-menu .sticky-box {background: rgba(71, 52, 41, 0.1); position: sticky; padding: 20px 0; left: 0; top: var(--headerH);}
#mypage .my-content .side-menu .sticky-box ul li {}
#mypage .my-content .side-menu .sticky-box ul li a {padding: 20px 50px; font-weight: 400; font-size: var(--font-20); display: block; color: var(--primary); }
#mypage .my-content .side-menu .sticky-box ul li.active a {font-weight: 700;}

#mypage .my-content .content-box {width: calc(100% - 430px); }
#mypage .my-content .content-box .tab-menu {border-bottom: 1px solid rgba(71, 52, 41, 0.5); margin-bottom: 60px;}
#mypage .my-content .content-box .tab-menu ul {display: flex; align-items: stretch; height: 69px;}
#mypage .my-content .content-box .tab-menu ul li a {display: flex; align-items: center; justify-content: center; padding: 8px 50px; height: 100%; font-size: var(--font-18); position: relative;}
#mypage .my-content .content-box .tab-menu ul li a::before {content:""; width: 100%; height: 3px; position: absolute; left: 0; bottom: -1px; background: var(--primary); opacity: 0;}
#mypage .my-content .content-box .tab-menu ul li.active a::before {opacity: 1;}

#mypage .my-content .badge {display: inline-block; font-size: 16px; padding: 5px 10px; border-radius: 5px; border: 1px solid rgba(0,0,0,0);}
#mypage .my-content .badge.ty1 {background: rgba(71, 52, 41, 0.8); color: #fff; border-color: rgba(71, 52, 41, 0.8);}
#mypage .my-content .badge.ty2 {background: #F6F5F5; color: rgba(71, 52, 41, 0.8); border-color: #F6F5F5;}
#mypage .my-content .badge.ty3 {background: rgba(0,0,0,0); color: #999; border-color: #999; }

/* list */
#mypage .detail-list {}
#mypage .detail-list li + li {margin-top: 30px;}
#mypage .detail-list .list-item {border-bottom: 1px solid rgba(71, 52, 41, 0.3); padding: 30px 0; color: var(--primary);}
#mypage .detail-list li:first-child .list-item {padding-top: 0;}


#mypage .detail-list .list-item .item-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
#mypage .detail-list .list-item .item-top .state {display: flex; align-items: center; gap: 15px; }
#mypage .detail-list .list-item .item-top .state span {text-transform: uppercase; font-size: var(--font-18); }
#mypage .detail-list .list-item .item-top .date {font-size: var(--font-16); color: rgba(71, 52, 41, 0.6); }
#mypage .detail-list .list-item .item-detail {}
#mypage .detail-list .list-item .item-detail .tit {font-family: var(--ff-aboreto); font-size: 30px; text-transform: uppercase; margin-bottom: 0.5em;} 
#mypage .detail-list .list-item .item-detail .info {font-size: var(--font-18); }
#mypage .detail-list .list-item .item-detail .info li + li {margin-top: 5px;}
#mypage .detail-list .list-item .item-detail .view-btn {margin-top: 40px; display: inline-block; color: rgba(71, 52, 41, 0.4); text-decoration: underline; text-underline-position: under; }

#mypage .detail-list .list-item.cancel {color: #999; }
#mypage .detail-list .list-item.cancel .item-top .date { color: #999; }

#mypage .empty-list {padding: 60px 0; text-align: center;}
#mypage .empty-list .tit {font-family: var(--ff-aboreto); font-size: 30px; line-height: 1.3; color: #000; margin-bottom: 20px;}
#mypage .empty-list p {font-size: var(--font-16); }
#mypage .empty-list .btn-box {margin-top: 40px; text-align: center;}
#mypage .empty-list a {font-size: var(--font-20); display: inline-flex; padding: 0 40px; align-items: center; justify-content: center; height: 52px; margin: 0 auto;  border-radius: 26px; }

/* detail */
#mypage .detail-view {}
#mypage .detail-view .top {display: flex; align-items: center; justify-content: space-between; color: #685950; margin-bottom: 20px;}
#mypage .detail-view .top .back {display: inline-block; padding-left: 20px; font-size: var(--cont-18); background-image: url(/img/com/icon_back.svg); background-position: left center; background-repeat: no-repeat; }
#mypage .detail-view .top p {font-size: var(--font-16);  }

#mypage .detail-view article {border-bottom: 1px solid rgba(71, 52, 41, 0.3); }
#mypage .detail-view article + article {margin-top: 60px;}
#mypage .detail-view article .head {border: 1px solid var(--primary); border-width: 1px 0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; min-height: 70px; }
#mypage .detail-view article .head h3 {text-transform: uppercase; font-size: var(--font-20); line-height: 1; font-weight: 700;} 

#mypage .detail-view article ul.dot-marker { font-size: 15px;}
#mypage .detail-view article ul.dot-marker li {position: relative; padding-left: 13px;}
#mypage .detail-view article ul.dot-marker li + li {margin-top: 5px;}
#mypage .detail-view article ul.dot-marker li::before {content:""; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 0; top: 0; transform: translateY(calc(0.8em - 4px)); border: 1px solid var(--primary); box-sizing: border-box;}

#mypage .detail-view article .cont-box {padding: 30px 20px 40px; position: relative;}
/* #mypage .detail-view article .cont-box + .cont-box::before {content:""; height: 1px; width: calc(100% - 40px); background-color: rgba(71, 52, 41, 0.3); position: absolute; left: 20px; top: 0;} */
#mypage .detail-view article .cont-box p {font-size: var(--font-18); }
#mypage .detail-view article .cont-box p.info {font-size: 14px; margin-top: 0.5em;}
#mypage .detail-view article .cont-box .btn-box {margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px;}
#mypage .detail-view article .cont-box .btn-box.ta-c {text-align: center;}
#mypage .detail-view article .cont-box .btn-box a.underline {display: inline-block; font-size: var(--font-16); color: #685950; text-decoration: underline; text-underline-position: under; }
#mypage .detail-view article .cont-box .btn-ty3 {display: inline-flex; padding: 0 40px; align-items: center; justify-content: center; font-size: var(--font-20); height: 46px; border-radius: 23px;}
#mypage .detail-view article .cont-box .list {font-size: var(--font-18); }
#mypage .detail-view article .cont-box .list li {display: flex; justify-content: space-between; }
#mypage .detail-view article .cont-box .list li + li {margin-top: 12px;}
#mypage .detail-view article .cont-box .list li .tit {}
#mypage .detail-view article .cont-box .list li .cont {color: #685950; }
#mypage .detail-view article .cont-box .list.consult-request li {display: flex; justify-content: space-between; gap: 1rem;}
#mypage .detail-view article .cont-box .list.consult-request li .tit {min-width: max-content;}
#mypage .detail-view article .cont-box .info {font-size: var(--font-16); opacity: 0.6; margin-top: 30px;}
#mypage .detail-view article .cont-box .product-box {background: rgba(71, 52, 41, 0.05); padding: 20px 20px 30px; }
#mypage .detail-view article .cont-box .product-box + .product-box {margin-top: 20px; }
#mypage .detail-view article .cont-box .noti-box {padding: 20px 20px 30px; margin-top: 30px; background: rgba(255, 255, 255, 0.4);}
#mypage .detail-view article .cont-box .noti-box:first-child {margin-top: 0;}
#mypage .detail-view article .cont-box .noti-box + .noti-box {margin-top: 30px;}
#mypage .detail-view article .cont-box .noti-box .tit {font-size: var(--font-18); margin-bottom: 10px;}
#mypage .detail-view article .cont-box .noti-box p {opacity: 0.6; font-size: var(--font-16); line-height: 1.4;}
#mypage .detail-view article .cont-box .noti-box.ty2 p {padding-left: 26px; background-image: url(/img/sub/icon_info.svg); background-position: left 3px; background-size: 16px; background-repeat: no-repeat;}
#mypage .detail-view article .cont-box .noti-box.ty3 {background: rgba(71, 52, 41, 0.05); }
#mypage .detail-view article .cont-box .noti-box.ty3 .tit {font-weight: 700;}
#mypage .detail-view article .cont-box .noti-box.ty4 {background: rgba(0,0,0,0); padding: 0 20px; }
#mypage .detail-view article .cont-box .noti-box.ty4 .tit {font-weight: 700;}

#mypage .detail-view article .progress {}
#mypage .detail-view article .progress .current {display: flex; align-items: center; justify-content: space-between; line-height: 1; font-size: var(--font-18); padding: 24px 20px; border-bottom: 1px solid rgba(71, 52, 41, 0.3); background-color: rgba(255, 255, 255, 0.2); flex-wrap: wrap; gap: 10px;}
#mypage .detail-view article .progress .current dl {display: flex; gap: 10px; align-items: center;}
#mypage .detail-view article .progress .current dl dd {opacity: 0.6;}
#mypage .detail-view article .progress .step {padding: 60px 10px; }
#mypage .detail-view article .progress .step ul {display: flex; gap: 124px; align-items: start; justify-content: center;}
#mypage .detail-view article .progress .step li {width: 170px; text-align: center; font-size: var(--font-16); position: relative;}
#mypage .detail-view article .progress .step li::before {content:""; display: block; opacity: 0.4; width: 50px; aspect-ratio: 1; border-radius: 50%; background: url(/img/sub/mypage_chk.svg); margin: auto;}
#mypage .detail-view article .progress .step li:not(:last-child)::after {content:""; width: 124px; height: 1px; position: absolute; right: 0; top: 0; transform: translate(100%, 25px); background: linear-gradient(to right, transparent 50%, rgba(71, 52, 41, 0.3) 50%);  background-size: 20px 1px;}
#mypage .detail-view article .progress .step li p {opacity: 0.3; margin-top: 20px;}

#mypage .detail-view article .progress .step li.pass {}
#mypage .detail-view article .progress .step li.pass::before {opacity: 1;}
#mypage .detail-view article .progress .step li.pass p {opacity: 0.8;}

#mypage .detail-view article .quote { padding: 30px 20px 40px; border-bottom: 1px solid rgba(71, 52, 41, 0.3);}
#mypage .detail-view article .quote .tit {font-size: var(--font-18); font-weight: 700; margin-bottom: 20px;}
#mypage .detail-view article .quote .total {color: #000; font-size: 40px;}
#mypage .detail-view article .quote .total span {font-size: var(--font-24);}
#mypage .detail-view article .quote ul {margin-top: 10px; opacity: 0.6; }

#mypage .detail-view article .payment {background: rgba(255, 255, 255, 0.4); padding: 30px; text-align: center; margin-top: 20px;}
#mypage .detail-view article .payment ul {display: flex; justify-content: center; align-items: start;}
#mypage .detail-view article .payment ul li {flex: 1 1 0; max-width: 350px; position: relative;}
#mypage .detail-view article .payment ul li:not(:last-child)::before {content:""; width: 1px; height: 70%; background: rgba(71, 52, 41, 0.2); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#mypage .detail-view article .payment ul li .tit {opacity: 0.8; font-size: var(--font-16); margin-bottom: 10px;}
#mypage .detail-view article .payment ul li .cont {font-size: var(--font-24);}
#mypage .detail-view article .payment ul li .cont.red {color: #C61717;}

/* account */
#mypage .account-form {display: flex; gap: 80px; }
#mypage .account-form .box {width: calc(50% - 40px); }
#mypage .account-form .box .sub-tit {font-size: var(--font-24); font-family: var(--ff-aboreto); line-height: 1; margin-bottom: 30px;}
#mypage .form-box .txt-btn {opacity: 0.6;}

/* 팝업 */
.accunt-popup {padding-top: 80px; text-align: center; background: #EDEBEB;}
.accunt-popup .text-box {padding: 20px 5% 30px; }
.accunt-popup .text-box .tit {font-size: 30px; font-family: var(--ff-aboreto);}
.accunt-popup .text-box p {font-size: 15px; margin-top: 12px;} 
.accunt-popup .btn-box {padding: 30px 0 40px; display: flex; gap: 8px; justify-content: center;}
.accunt-popup .btn-box .button {display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 42px; font-size: var(--font-20); border-radius: 21px;} 

@media screen and (max-width:1480px) {
  #mypage .my-content {gap: 60px; }
  #mypage .my-content .side-menu {width: 240px;}
  #mypage .my-content .side-menu .sticky-box ul li a {padding: 16px 26px;}
  #mypage .my-content .content-box {width: calc(100% - 300px); }
  #mypage .my-content .content-box .tab-menu ul {height: 60px;}
  #mypage .my-content .content-box .tab-menu ul li a {padding: 6px 32px;}
}
@media screen and (max-width:1280px){
  /* account */
  #mypage .account-form {flex-direction: column;}
  #mypage .account-form .box {width: 100%;}
  #mypage .form-box {max-width: 600px; margin: auto;}
}
@media screen and (max-width:1024px) {
  #mypage .page-top h2 {font-size: 56px;}
  #mypage .page-top {margin-bottom: 50px;}
  #mypage .my-content {flex-direction: column; gap: 40px; }
  #mypage .my-content .side-menu {width: 100%;}
  #mypage .my-content .side-menu .sticky-box {position: relative; left: 0; top: 0; padding: 0; }
  #mypage .my-content .side-menu .sticky-box ul {display: flex;}
  #mypage .my-content .side-menu .sticky-box ul li a {padding: 12px 20px;}
  #mypage .my-content .side-menu .sticky-box ul li:last-child {position: absolute; right: 0; top: 50%; transform: translate(-20px, -50%); }
  #mypage .my-content .side-menu .sticky-box ul li:last-child a {padding: 0; opacity: 0.6; text-decoration: underline;}

  #mypage .my-content .content-box {width: 100%;}
  #mypage .my-content .content-box .tab-menu {margin-bottom: 40px;}

  #mypage .detail-list .list-item .item-detail .tit {font-size: 24px;}

  #mypage .detail-view article .progress .step ul {gap: 60px;}
  #mypage .detail-view article .progress .step li:not(:last-child)::after {display: none;}

  /* account */
  #mypage .account-form {margin-top: 40px;}
}
@media screen and (max-width:768px) {
  #mypage .page-top h2 {font-size: 42px;}
  #mypage .page-top {margin-bottom: 0;}

  
  #mypage .my-content .content-box .tab-menu ul {height: 52px;}
  #mypage .my-content .content-box .tab-menu ul li a {padding: 4px 16px; font-size: 14px; }
  
  #mypage .my-content .badge {font-size: 13px; padding: 3px 8px;}

  #mypage .detail-list li + li {margin-top: 8x;}
  #mypage .detail-list .list-item {padding: 24px 0;}
  #mypage .detail-list .list-item .item-top { gap: 5px; align-items: end;}
  #mypage .detail-list .list-item .item-top .state {flex-direction: column; gap: 5px; align-items: start;}
  #mypage .detail-list .list-item .item-top .state span {font-size: 15px;}
  
  #mypage .detail-list .list-item .item-detail .tit {font-size: 20px;}
  #mypage .detail-list .list-item .item-detail .info {font-size: 14px;}
  
  #mypage .empty-list .tit {font-size: 24px;}

  #mypage .empty-list a {padding: 0 30px; height: 48px;}

  #mypage .detail-view article .progress .step {padding: 40px 0;}
  #mypage .detail-view article .progress .step ul {gap: 24px; }

  #mypage .detail-view article .head {min-height: unset; padding: 12px 10px;}
  #mypage .detail-view article .cont-box {padding: 16px 0px 24px;}
  #mypage .detail-view article .cont-box .list li {flex-wrap: wrap;}
  #mypage .detail-view article .cont-box .list li .tit {width: 100%;}
  #mypage .detail-view article .cont-box .noti-box {padding: 16px 16px 24px; }
  #mypage .detail-view article .cont-box .noti-box.ty4 {padding: 0px 8px;}

  #mypage .detail-view article .progress .current {padding: 20px 12px;}
  #mypage .detail-view article .progress .current dl {width: 100%; justify-content: space-between;}

  #mypage .detail-view article .quote .total {font-size: 32px;}

  #mypage .detail-view article .payment {padding: 24px; }
  #mypage .detail-view article .payment ul {flex-direction: column; gap: 12px;}
  #mypage .detail-view article .payment ul li {width: 100%; display: flex; justify-content: space-between; align-items: center; max-width: 100%;}
  #mypage .detail-view article .payment ul li:not(:last-child)::before {display: none;}
  #mypage .detail-view article .payment ul li .tit {margin-bottom: 0;}

  .accunt-popup {padding-top: 60px;}
  .accunt-popup .text-box {padding: 8px 5% 20px;}
  .accunt-popup .text-box .tit {font-size: 20px;}
  .accunt-popup .text-box p {font-size: 14px;}
  .accunt-popup .btn-box {padding: 12px 0 32px;}
  .accunt-popup .btn-box .button {width: 120px; height: 38px;}
}
@media screen and (max-width:480px){
  #mypage .my-content .side-menu {padding-bottom: 32px;}
  #mypage .my-content .side-menu .sticky-box ul {flex-wrap: wrap;}
  #mypage .my-content .side-menu .sticky-box ul li { text-align: left; width: 100%;}
  #mypage .my-content .side-menu .sticky-box ul li:last-child {position: relative; right: 0; top: 0; transform: translate(0, 0); }
  #mypage .my-content .side-menu .sticky-box ul li:last-child a {font-size: 14px; padding: 12px 20px;}
 
  #mypage .detail-view article .head {padding: 16px 0;}
  #mypage .detail-view article .cont-box p {font-size: 14px;}
  #mypage .detail-view article .cont-box .product-box {padding: 16px 14px 24px;}
}

/* mypage 팝업 */
.reservation-modal .modal-cont {overflow-y: auto; padding: 50px 70px 100px; font-size: var(--font-18); position: relative; overscroll-behavior: contain;}

.reservation-modal .modal-cont .logo {text-align: center; font-size: 0;}
.reservation-modal .modal-cont .logo img {height: 47px;}
.reservation-modal .modal-cont .top-tit {font-family: var(--ff-aboreto); font-size: var(--font-24); text-align: center; margin: 60px 0; padding-top: 30px; position: relative;}
.reservation-modal .modal-cont .top-tit::before {content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(71, 52, 41, 0.6); top: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; position: absolute;}

.reservation-modal .item-box {padding: 27px 0; border-top: 1px solid rgba(71, 52, 41, 0.3);}
.reservation-modal .item-box .item-tit {font-weight: 700; margin-bottom: 20px; margin-top: 13px;}
.reservation-modal .item-box .inbox {margin-bottom: 30px;}

.reservation-modal .list {}
.reservation-modal .list li {display: flex; justify-content: space-between; align-items: start; gap: 16px;}
.reservation-modal .list li + li {margin-top: 10px;}
.reservation-modal .list li .tit {flex-shrink: 0; }
.reservation-modal .list li .cont {color: #685950; max-width: 60%; text-align: right;}

.reservation-modal .dot {}
.reservation-modal .dot li {padding-left: 18px; position: relative; font-size: var(--font-16);}
.reservation-modal .dot li::before {content:""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box; position: absolute; left: 0; top: 0.8em; transform: translateY(-50%); }

.reservation-modal .product-box {margin-bottom: 30px;}
.reservation-modal .product-box .prd-tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.reservation-modal .product-box .prd-tit .tit {font-size: var(--font-20); font-family: var(--ff-aboreto); }
.reservation-modal .product-box .prd-tit .badge {font-size: 15px; padding: 4px 10px; border: 1px solid var(--primary); border-radius: 5px; opacity: 0.6;}
.reservation-modal .product-box .prd-cont {background: rgba(71, 52, 41, 0.1); padding: var(--font-20); }
.reservation-modal .product-box .prd-cont .noti-box {padding: 20px 20px 30px; margin-top: 30px; background-color: rgba(255, 255, 255, 0.4);}
.reservation-modal .product-box .prd-cont .noti-box p {opacity: 0.6; font-size: var(--font-16); line-height: 1.4;}
.reservation-modal .product-box .prd-cont .noti-box.ty2 p {padding-left: 26px; background-image: url(/img/sub/icon_info.svg); background-position: left 3px; background-size: 16px; background-repeat: no-repeat;}

.reservation-modal .infomation-box {background: #e9e5e3; padding: 18px 20px; font-size: 16px; }

.reservation-modal .btn-box {text-align: center; margin-top: 80px;}
.reservation-modal .print-btn {font-size: var(--font-20); padding: 0 40px; height: 62px; border-radius: 31px; display: inline-flex; align-items: center; justify-content: center; text-align: center;}

@media screen and (max-width:768px){
  .reservation-modal .modal-cont {padding: 40px 36px 80px; }

  .reservation-modal .print-btn {height: 48px;}
}
@media screen and (max-width:480px){
  .reservation-modal .modal-cont {padding: 40px 24px 60px; }
  .reservation-modal .modal-cont .logo img {height: 32px;}
  .reservation-modal .modal-cont .top-tit {margin: 40px 0;}

  .reservation-modal .list li {flex-direction: column; gap: 3px; }
  .reservation-modal .list li .cont {max-width: 100%; text-align: left;}
  .reservation-modal .product-box .prd-tit .badge {display: none;}
}

/* receipt 팝업 */

/******** member ********/
#member {padding: calc(var(--gap-50)*2) 0 calc(var(--gap-50)*5); }
#member section .inner {max-width: 600px; margin: auto; width: 90%;}

#member .page-top {margin-bottom: 60px;}
#member .page-top h2 {font-size: 60px; font-family: var(--ff-aboreto); text-transform: uppercase; }
#member .page-top p {font-size: 16px; margin-top: 10px;}

#member .button {display: inline-flex; justify-content: center; align-items: center; height: 46px; border-radius: 23px; padding: 0 40px; font-size: var(--font-20);}

#member .complete-box {}


#member .complete-area {}
#member .complete-area .comp-box { text-align: center;}
#member .complete-area .comp-box .icon {width: 64px; height: 64px; border: 1px solid var(--primary); border-radius: 50%; margin: 0 auto 40px; background-image: url(/img/sub/icon_checker.svg); background-size: cover; background-position: center; background-repeat: no-repeat;}
#member .complete-area .comp-box .icon.send {background-image: url(/img/sub/icon_send.svg);}
#member .complete-area .comp-box .tit {font-size: 40px; font-family: var(--ff-aboreto); text-transform: uppercase;}
#member .complete-area .comp-box p {margin-top: 10px;}
#member .complete-area .comp-box p span {font-weight: 700;}
#member .complete-area .comp-box .btn-box {margin-top: 80px; }

/* login */
#member .login-area {}
#member .login-area .forget-ps {margin-top: 5px; text-align: right; opacity: 0.8;}


#member .login-area .sns-login {}
#member .login-area .sns-login .top {text-align: center; margin: 60px 0; position: relative;}
#member .login-area .sns-login .top::before {content:""; width: 100%; height: 1px; background: var(--primary); opacity: 0.3; position: absolute; left: 0; top: 50%; }
#member .login-area .sns-login .top span {display: inline-block; background: #EDEBEB; font-size: var(--font-16); padding: 0 40px; position: relative; z-index: 1;}
#member .login-area .sns-login .btn-box {}
#member .login-area .sns-login .btn-box .button { height: 72px; border-radius: 36px; border: 1px solid rgba(71, 52, 41, 0.3); gap: 10px; font-size: var(--font-20); width: 100%;}
#member .login-area .sns-login .btn-box .button .icon {width: 28px; height: 28px; background: url(/img/sub/icon_google.svg) center no-repeat; background-size: cover;}

/* sign up */
#member .signUp-area {}
#member .signUp-area .chker {}
#member .signUp-area .chker li + li {margin-top: 5px;}
#member .signUp-area .chker li label {display: inline-flex; vertical-align: middle; margin-right: 5px;}
#member .signUp-area .chker li a {display: inline-block; font-size: 14px; color: rgba(71, 52, 41, 0.6); vertical-align: middle;}

/* reset ps */
#member .reset-ps {}
#member .reset-ps .list {font-size: 15px; margin-top: 40px;}
#member .reset-ps .list li {position: relative; padding-left: 11px;}
#member .reset-ps .list li + li {margin-top: 5px;}
#member .reset-ps .list li::before {content:""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--primary); box-sizing: border-box; position: absolute; left: 0; top: 0.8em; transform: translateY(-50%); }

@media screen and (max-width:768px) {

  #member .page-top h2 {font-size: 48px;}

  #member .button {height: 42px;}

  #member .complete-area .comp-box .icon { width: 50px; height: 50px; }
  #member .complete-area .comp-box .tit {font-size: 32px;}
  #member .complete-area .comp-box p {font-size: 15px;}

  /* login */
  #member .login-area .sns-login .btn-box .button {height: 60px;}
  #member .login-area .sns-login .btn-box .button .icon {width: 20px; height: 20px;}
}
@media screen and (max-width:480px) {
  #member .page-top h2 {font-size: 32px;}
  #member .page-top p {font-size: 14px;}

  #member .complete-area .comp-box .icon { width: 46px; height: 46px; }
  #member .complete-area .comp-box .tit {font-size: 28px;}
  #member .complete-area .comp-box p {font-size: 14px;}
}


/* form-box write */
.form-box.form-write {--formH:60px;}
.form-box.form-write input::placeholder {color: #999;}
.form-box.form-write input[type="text"],
.form-box.form-write input[type="password"] { appearance: none; width: 100%; height: var(--formH); border: none; border-bottom: 1px solid var(--primary); padding: 0 5px; font-size: var(--font-18); background: none;}
.form-box.form-write select {appearance: none; width: 100%; height: var(--formH); border: none; border-bottom: 1px solid var(--primary); padding: 5px; padding-right: 45px; background-color: rgba(0,0,0,0); font-size: var(--font-18); color: var(--primary); background-image: url(/img/com/arrow_select.svg); background-repeat: no-repeat; background-position: right 12px center; }
.form-box.form-write select:has(option[value=""]:checked) {color: #999; }
.form-box.form-write select option[value=''] { display: none;}

.form-box.form-write .item-box {}
.form-box.form-write .line + .line {margin-top: 30px;}
.form-box.form-write .item-box .error {font-size: 15px; margin-top: 5px; display: none; color: #C61717;}
.form-box.form-write .item-box label {display: flex; align-items: center; align-items: center; text-align: center; gap: 8px; }
.form-box.form-write .grid-box {display: flex; gap: 30px; align-items: start;}
.form-box.form-write .grid-box .half {width: calc(50% - 15px); }

.form-box.form-write .input-box {position: relative;}
.form-box.form-write .input-box .btn-view {position: absolute; width: 20px; height: 20px; right: 12px; top: 50%; transform: translateY(-50%); background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url(/img/com/icon_view.svg); opacity: 0.6; font-size: 1px; color: rgba(0,0,0,0);}
.form-box.form-write .input-box .btn-view.hide {background-image: url(/img/com/icon_view_hide.svg);}

.form-box.form-write .unverified input[type="text"],
.form-box.form-write .unverified input[type="password"] {border-color: #C61717;}
.form-box.form-write .unverified .error {display: block;}

.form-box.form-write .btm-btn-box {display: flex; justify-content: end; align-items: center; gap: 20px; margin-top: 60px;}
.form-box.form-write .btm-btn-box .txt-btn {font-size: var(--font-16);}
.form-box.form-write .button {display: inline-flex; justify-content: center; align-items: center; height: 46px; border-radius: 23px; padding: 0 40px; font-size: var(--font-20);}

@media screen and (max-width:768px){
  .form-box.form-write {--formH:46px; }
  .form-box.form-write .item-box .error {font-size: 14px;}
  .form-box.form-write .grid-box {flex-wrap: wrap;}
  .form-box.form-write .grid-box .half {width: 100%;}

  .form-box.form-write .button {height: 42px;}
}