@import url("common.css");


.container.ver2{padding: 138px 0 0;}

@media (max-width: 1300px) {
.container.ver2{padding: 90px 0 0;}
} 
@media (max-width: 680px) {
.container.ver2{padding: 60px 0 0;}
}
@media (max-width: 480px) {
.container.ver2{padding: 51px 0 0;}
}



#main_pop {position:fixed; top:0; left:0; z-index:9999999999; min-width:320px; width:100%; height:100%;}
#main_pop .layer_pop_close {display:block; margin:0 0 0 auto;}
#main_pop .layer_pop_close::before {content:'\e5cd'; font-size:45px; display:block; line-height:1; color:var(--white); font-family:var(--icon); font-weight:300; transition:all 0.3s linear;}
#main_pop .layer_pop_close:hover::before {opacity:0.6; transition:all 0.3s linear;}
#main_pop .pop_mask {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); }
#main_pop .main_pop_in {max-width:1208px; width:90%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);  z-index:999; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; gap:23px 0;}
#main_pop .main_pop_inner { padding:10px; box-sizing:border-box; border-radius: 5px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(2px); width:100%;}
#main_pop .popup_inner {overflow:hidden; position:relative; }
#main_pop .popup_inner .slick-list {height: auto !important;}
#main_pop .popup_inner .slick-track {display: flex !important; height: auto !important; align-items: stretch;}
#main_pop .popup_inner .slick-slide {float: none; height: auto !important; flex-shrink: 0;}
#main_pop .popup_inner > li,
#main_pop .popup_inner .slick-slide {position: relative; overflow: hidden; aspect-ratio: 1320 / 550; min-height: 0;}
#main_pop .popup_inner li a {display: block; position: absolute; inset: 0; overflow: hidden;}
#main_pop .popup_inner li img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#main_pop .popup_inner li img.mo {display:none;}
#main_pop .popup_inner .slick-dots {position:absolute; bottom:20px; left:5%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:90%;  z-index:50;}
#main_pop .popup_inner .slick-dots li {width:10px; height:10px; margin-left:4px; overflow:hidden; box-sizing:border-box; overflow:hidden;}
#main_pop .popup_inner .slick-dots li.slick-active {margin-left:8px;}
#main_pop .popup_inner .slick-dots li:first-child {margin-left:0 !important;}


#main_pop .slick-arrow {position:absolute; top:45%; z-index:9999; border:none;  font-size:0; overflow:hidden; cursor:pointer;padding:0; background-color:transparent !important; font-weight:300;}
#main_pop .slick-arrow::before {font-size:35px; display:block; line-height:1; font-family:var(--icon); color:var(--white); opacity:0.4; transition: all 0.3s;}
#main_pop .slick-arrow:hover::before {opacity:1; transition: all 0.3s;}
#main_pop .slick-prev{left:20px; transition: all 0.3s;}
#main_pop .slick-prev::before {content:'arrow_back_ios';}
#main_pop .slick-next{right:20px; transition: all 0.3s;}
#main_pop .slick-next::before {content:'arrow_forward_ios';}


#main_pop .popup_inner .slick-dots li button {position:relative; left:5px; font-size:0; border:0; background:rgba(255,255,255,0.5);  display:block; width:100%; height:100%; padding:0; margin:0;  border-radius:100%; transition:all 0.3s linear;  cursor:pointer;}
#main_pop .popup_inner .slick-dots li.slick-active button {left:0; background:#fff; transition:all 0.3s linear;}

#main_pop .popup_nav{margin:10px 0 0;}
#main_pop .popup_nav .slick-track{width:100% !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap:5px 0;}
#main_pop .popup_nav span {display:block; width: auto !important; text-align:center; padding:5px 0 7px; cursor:pointer; font-weight: 500; opacity: 0.3; color:var(--black);  transition:all 0.3s linear;}
#main_pop .popup_nav span:hover{opacity: 1; transition:all 0.3s linear;}
#main_pop .popup_nav span.slick-current{opacity: 1;}

#main_pop .hideToday_wrap {/* margin:20px 0 0;  */display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative; z-index:999;}
#main_pop .hideToday_wrap label,
#main_pop .hideToday_wrap .hideToday_btn { display: flex; align-items: center; gap: 9px; cursor: pointer; border: none; background: transparent; padding: 0; font: inherit; color: inherit; }
#main_pop .hideToday_wrap input[type="checkbox"] { display: none; }
#main_pop .hideToday_wrap .chk_box { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 5px; background: var(--white); box-sizing: border-box; flex-shrink: 0; }
#main_pop .hideToday_wrap input:checked + .chk_box { background: var(--main); border-color: var(--main); opacity: 1; }
#main_pop .hideToday_wrap input + .chk_box::before { content: '\e5ca'; font-family: var(--icon); font-size: 22px; line-height: 1; color: var(--border); font-weight: 500; }
#main_pop .hideToday_wrap input:checked + .chk_box::before { color: var(--white); }
#main_pop .hideToday_wrap .fs16 {color:var(--white); position:relative; top:-2px;}



.nav-arrows { display: flex; gap: 0 40px; }
.nav-arrows button { display: grid; place-items: center; position: relative; width: 20px; height: 50px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.nav-arrows button::before { font-family: var(--icon); font-weight: normal; font-style: normal; font-size: 50px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; color:var(--black); opacity:0.3; transition: all 0.4s ease-in-out;  position: relative;}
.nav-arrows button:hover::before {opacity: 1; transition: all 0.4s ease-in-out;}

.nav-arrows button:first-of-type::before {left:-16px; content: "\e2ea"; }
.nav-arrows button:last-of-type::before {right:16px; content: "\e5e1"; }


.layout-row { display: flex; align-items: stretch; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.imgBox { position: relative; overflow: hidden; background: var(--black_bg); }
.imgBox img { width: 100%; height: 100%; object-fit: cover; display: block; }

.section-tit { text-align: center; margin-bottom: 60px; }
.section-tit .fs60 { margin: 0 0 10px; text-transform: uppercase; }



body, #youtube .card, #youtube .card .fs18, #space *, .section-tit p.fs16, .section-tit .fs60, .nav-arrows button::before, #location .location-info .fs60, #location .location-info .fs18, #location .block-title, #location .fs25, #location .fs16, #location .hours-table, #location .hours-table b { transition: all 0.5s ease-in-out; }
.darkmode { background: var(--black_bg); }
.darkmode #youtube .card { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.darkmode #youtube .card .fs18 { color: var(--white) !important; }
.darkmode #space * { color: var(--white) !important; }
.darkmode .section-tit p.fs16, .darkmode .section-tit .fs60 { color: var(--white) !important; }
.darkmode .nav-arrows button::before { color: var(--white); }
.darkmode #location .location-info .fs60, .darkmode #location .location-info .fs18, .darkmode #location .block-title, .darkmode #location .fs25, .darkmode #location .fs16, .darkmode #location .hours-table b { color: var(--white) !important; }
.darkmode #location .hours-table { color: rgba(255, 255, 255, 0.7); }


/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999;}

#visual .visual_in .roll .v_txt .fs75 {font-family:var(--eng);  color:var(--white);  transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs75 span {opacity:0.5;}
#visual .visual_in .roll .v_txt .fs18{color:rgba(255,255,255,0.7); padding:20px 0 0; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;-webkit-transition:transform 5000ms  linear; -moz-transition:transform 5000ms linear;  -ms-transform: scale(1); -webkit-transform: scale(1); -o-transition:transform 5000ms linear; -ms-transition:transform 5000ms linear; transition:transform 5000ms linear;}
#visual .visual_in .roll .v_bg .jarallax{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}
@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@keyframes v_bg {
	0% { transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
	100% {transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);}
}


#visual .progress-wrap {position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;  background-color: rgba(255, 255, 255, 0.2);  z-index: 99999;}
#visual .progress-bar {width: 0%; height: 100%; background-color: var(--white);}



#visual.ver2{height: auto !important; aspect-ratio: 16 / 9; background:none;}
#visual.ver2 .visual_in{width: 100%; height: 100%; z-index: 9; background:var(--black);}
#visual.ver2 .visual_in .roll{height: 100%;}
#visual.ver2 .visual_in .roll .v_bg picture{display:block; width:100%; height:100%;}
#visual.ver2 .visual_in .roll .v_bg img{width:100%; height:100%; object-fit:cover;}
#visual.ver2 .visual_in .roll .v_bg .bg{animation:v_bg 1s 0s linear forwards;}
#visual.ver2 .visual_in .roll .v_txt h2{animation:v_txt 0.6s 0.3s linear forwards;}
#visual.ver2 .visual_in .roll .v_txt p{animation:v_txt 0.6s 0.6s linear forwards;}


#visual.ver2 .visual_video{width: 100%; max-width: 100%; position: relative;}
#visual.ver2 .visual_video .v_video{position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
#visual.ver2 .visual_video .v_video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none;}

#visual.ver2 .visual_video .v_video.pc {
  display: block;
}
#visual.ver2 .visual_video .v_video.mo {
  display: none;
}

@media (max-width: 768px) {
  #visual.ver2{aspect-ratio: 1/1;}
  #visual.ver2 .visual_video .v_video.pc {display: none;}
  #visual.ver2 .visual_video .v_video.mo {display: block; aspect-ratio: 1/1;}
  #visual.ver2 .visual_in .roll .v_bg img{height:auto; object-fit:contain;}
}


/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:38px;}
#visual .slick-arrow:hover{opacity: 0.5;}



/* 도트 */
#visual .slick-dots{font-size:0; position: absolute; left: 50%; bottom:40px; transform:translate(-50%,0); z-index: 9999; max-width:1590px; width:90%; display:flex; flex-wrap:wrap; gap:0 20px;}
#visual .slick-dots li {}
#visual .slick-dots li button {background:transparent; border:0; padding:0; margin:0; font-family:var(--eng); font-size: 1rem; line-height: 1.75;  color:rgba(255,255,255,0.5); cursor:pointer; transition: all 0.4s ease-in-out; font-weight: 400;
line-height: 162.5%; letter-spacing: 0.8px;}
#visual .slick-dots li.slick-active button {color:rgba(255,255,255,1); transition: all 0.4s ease-in-out;}



/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}




    #intro .layout-row {}
    #intro .intro-text { flex: 1 1 420px; max-width: 670px; position: relative; z-index: 1; display:flex; flex-wrap:wrap; justify-content: space-between; flex-direction:column; padding-top: 60px; box-sizing: border-box;}
    #intro .intro-text .kicker { margin: 0 0 20px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--main); }
    #intro .intro-text h2 { margin: 0 0 40px; text-transform: uppercase; }
    #intro .intro-text .lead { margin: 0 0 90px; color: var(--basic); }
    #intro .layout-row > .imgBox {position:relative;  flex: 1 1 400px; max-width: 915px; border-radius: 0; aspect-ratio: 915 / 610; overflow:visible;}
    #intro .symbol-bg { position: absolute; width: 291px; overflow: hidden; aspect-ratio: 291 / 339; left: 0; transform: translate(-80%, -35%); top: 50%;  mix-blend-mode: luminosity; pointer-events: none; z-index: 0; }
    #intro .symbol-bg img { width: 100%; height: 100%; object-fit: contain; filter:grayscale(1);}


    #philosophy {}
    #philosophy .basic_in {display:flex; flex-wrap: wrap;}
    #philosophy .pho { display: flex; flex-wrap: nowrap; flex:1;}
    #philosophy .imgBox.tBox { width: 55.74%; max-width: 510px;}
    #philosophy .stk { display: flex; flex-direction: column; width: 44.27%; max-width: 405px;}
    #philosophy .stk .imgBox {flex:1;}
    #philosophy .philosophy-panel { max-width:675px; width:44%; background: var(--black); color: var(--white); padding: 60px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;  box-sizing: border-box;}
    #philosophy .philosophy-panel h3 { text-transform: uppercase; color: var(--white); }
    #philosophy .philosophy-panel .panel-body .fs16 { margin: 45px 0 0; opacity: 0.7; color: var(--white); }
    #philosophy .philosophy-panel .panel-btm {margin: 80px 0 0;}
    #philosophy .philosophy-watermark { position: absolute; right: -50px; bottom: 0; width: 366px;}



    #inside { background: var(--grayBg);  overflow:hidden;}
    #inside .inside_in { display: flex; flex-wrap: wrap; align-items:center; padding: 0 30px 0 calc((100% - 1590px) / 2); box-sizing: border-box; }

    #inside .inside-lead {flex: 0 0 540px; display: flex; flex-direction: column; justify-content: space-between; gap:103px 0;}
    #inside .inside-lead .stacked-titles .tit-lines { margin: 0; text-transform: uppercase; }
    #inside .inside-lead .stacked-titles .tit-lines span { opacity: 0.3; }
    #inside .inside-lead .stacked-titles > .fs16 { margin-top: 60px; color: var(--basic); text-transform: none; letter-spacing: -0.05em; }

    #inside .insideSwiper {flex: 1; min-width: 0; overflow: hidden; margin: 0;}
    #inside .insideSwiper .swiper-slide { height: auto; box-sizing: border-box; }
    #inside .inside-item { display: block; border-bottom: 1px solid var(--border); padding-bottom: 20px; height: 100%; box-sizing: border-box; }
    #inside .inside-item > .imgBox { aspect-ratio: 375 / 480; margin-bottom: 20px; overflow: hidden;}
    #inside .inside-item > .imgBox img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all 0.4s ease-in-out;}
    #inside .inside-item .fs18 { margin: 0 0 5px;  color:var(--black); text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
    #inside .inside-item .fs16.tenor { display: flex; align-items: center; gap: 5px; color: var(--basic); letter-spacing: 0.06em; }
    #inside .inside-item .fs16.tenor::before { content: "calendar_month"; font-family: var(--icon); font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; }


    #inside .inside-item:hover > .imgBox img {transform: scale(1.1); transition: all 0.4s ease-in-out;}






    #signature .signature-grid { display:flex; flex-wrap:wrap; gap: 30px; }
	#signature .treatment-card {flex:1;}
    #signature .treatment-card .imgBox { aspect-ratio: 375 / 500;}
	#signature .treatment-card .imgBox img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all 0.4s ease-in-out;}
    #signature .treatment-card h3 { margin: 30px 0 0; text-align: center; font-weight: 400; }
    #signature .treatment-card p.fs16 { margin: 0; text-align: center; color: var(--basic); }
	#signature .treatment-card:hover  .imgBox img {transform: scale(1.1); transition: all 0.4s ease-in-out;}



#promotion { background: var(--grayBg); overflow: hidden; }
#promotion .promotion-slider { position: relative; min-height: 0; width: 100%; }
#promotion .promotionSwiper { width: 100%; overflow: visible;}

#promotion .promotionSwiper .swiper-slide { width: 1050px; max-width: 100%; height: auto; flex-shrink: 0; z-index: 1; }
#promotion .promotionSwiper .swiper-slide-active { z-index: 10; }
#promotion .promotion-feature { width: 100%; margin: 0 auto; z-index: 2;  transition: transform 0.6s ease, opacity 0.6s ease; will-change: transform, opacity; }
#promotion .promotionSwiper .swiper-slide-active .promotion-feature { transform: translateX(0) scale(1);}

#promotion .promotion-feature { display: flex; flex-direction: column; justify-content: center; height: 100%; }
#promotion .promotion-feature > .imgBox { aspect-ratio: 1050 / 600; width: 100%; background: #000; transition: transform 0.6s ease; transform-origin: center center; }

#promotion .promotionSwiper .swiper-slide-active .promotion-feature > .imgBox { transform: translateX(0) scale(1); }

#promotion .promotionSwiper .swiper-slide-next .promotion-feature > .imgBox { transform: translateX(-12.86%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide-next + .swiper-slide .promotion-feature > .imgBox { transform: translateX(-38.57%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide-next + .swiper-slide + .swiper-slide .promotion-feature > .imgBox { transform: translateX(-64.28%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide .promotion-feature > .imgBox { transform: translateX(-90%) scale(0.7428); }

#promotion .promotionSwiper .swiper-slide-prev .promotion-feature > .imgBox { transform: translateX(12.86%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide:has(+ .swiper-slide-prev) .promotion-feature > .imgBox { transform: translateX(38.57%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev) .promotion-feature > .imgBox { transform: translateX(64.28%) scale(0.7428); }
#promotion .promotionSwiper .swiper-slide:has(+ .swiper-slide + .swiper-slide + .swiper-slide-prev) .promotion-feature > .imgBox { transform: translateX(90%) scale(0.7428); }


#promotion .promotion-feature > .imgBox { aspect-ratio: 1050 / 600; width: 100%; background:#000;}
#promotion .promotion-feature > .imgBox img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity:0.5; transition: all 0.4s ease-in-out;}
#promotion .promotionSwiper .swiper-slide-active .imgBox img {opacity:1; transition: all 0.4s ease-in-out;}

/* 캡션 애니메이션 유지 */
#promotion .promotion-caption { display: flex; align-items: center; justify-content: space-between; padding: 0 25px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 16px; margin: 60px 0 0; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; }
#promotion .swiper-slide-active .promotion-caption { transform: translateY(0); opacity: 1; visibility: visible; transition: all 0.4s ease-in-out; transition-delay: 0.1s;}

#promotion .promotion-caption .fs20 { margin: 0; font-weight: 400; letter-spacing: -0.05em; color: var(--black); }
#promotion .promotion-caption .moreBtn { background: transparent; }

/* 네비게이션 */
#promotion .promotion-nav { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: min(1050px, 100%); aspect-ratio: 1050 / 600; display: flex; justify-content: space-between; align-items: center; z-index: 20; pointer-events: none; }
#promotion .promotion-nav button { pointer-events: auto; width: 60px; height: 60px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; position: relative; }
#promotion .promotion-nav button::before { font-family: var(--icon); font-weight: normal; font-style: normal; font-size: 60px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased;  color:var(--white);  opacity: 0.8; transition: all 0.4s ease-in-out;}
#promotion .promotion-nav button:hover::before {opacity: 1; transition: all 0.4s ease-in-out;}
.promo-prev {position:relative; left:-30px; transform:translateX(-100%);}
.promo-prev::before { content: "arrow_back_ios_new"; }
.promo-next {position:relative; right:-30px; transform:translateX(100%);}
.promo-next::before { content: "arrow_forward_ios"; }





#youtube .section-tit { text-align: left;}
#youtube .section-tit-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 60px; }
#youtube .youtubeSwiper .swiper-slide .card { width: 100%; max-width: 100%; }
#youtube .card { border-bottom: 1px solid var(--border); padding-bottom: 25px; }
#youtube .card .imgBox { position: relative; aspect-ratio: 16 / 9; }
#youtube .card .imgBox > img { opacity: 0.6; transition: all 0.4s ease-in-out;}
#youtube .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 61px; height: 61px; background: var(--main); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
#youtube .play-btn::before {content:'\e037'; font-size:30px; line-height:1; font-family:var(--icon); color:var(--white);}
#youtube .card .fs18 { text-align: center; margin: 20px 0 0; color:var(--black); text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
#youtube .youtubeSwiper .swiper-slide .card:hover  .imgBox > img {transform: scale(1.1); transition: all 0.4s ease-in-out;}


#space { position: relative;}

#space .space-copy { position:absolute; top:0; left:0; z-index:90;}
#space .space-copy .fs80 { margin: 0 0 50px; text-transform: uppercase; }
#space .space-copy .fs16 { color:var(--black);}
#space .space-bg {position:relative;  inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding:48px 105px 0; box-sizing:border-box;}
#space .space-bg .spaceMainSwiper { pointer-events: auto; -webkit-mask-image: linear-gradient(180deg, #000 70.43%, rgba(0, 0, 0, 0.00) 100.91%); mask-image: linear-gradient(180deg, #000 70.43%, rgba(0, 0, 0, 0.00) 100.91%);}
#space .space-bg .spaceMainSwiper .swiper-slide .imgBox { width: 100%; aspect-ratio: 1380 / 610;  overflow: hidden; }

#space 	.space-btm-wrap {display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap: 0 32px; transform:translateY(-50%); z-index:99999; position:relative;}
#space .space-thumbs { z-index: 3; max-width:805px;  margin:0; width:calc(100% - 118px);}
/*     #space .spaceThumbSwiper { overflow: visible; } */
#space .spaceThumbSwiper .swiper-slide {cursor: pointer; }
#space .space-thumb { width: 100%; aspect-ratio: 150 / 84; overflow: hidden; position:relative;}
#space .space-thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter:grayscale(1); transition: all 0.4s ease-in-out;}
#space .space-thumb::after {content:''; width:100%; height:100%; border: 3px solid transparent;  box-sizing: border-box; position:absolute; top:0; left:0; transition: all 0.4s ease-in-out;}
#space .space-thumb.swiper-slide-thumb-active img {filter:grayscale(0); transition: all 0.4s ease-in-out;}
#space .space-thumb.swiper-slide-thumb-active::after { border-color: var(--main); transition: all 0.4s ease-in-out;}
#space .space-arrows {  display: flex; gap: 16px; }
#space .space-arrows button { width: 35px; height: 35px; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; position: relative; }
#space .space-arrows button::before { font-family: var(--icon); font-weight: normal; font-style: normal; font-size: 35px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased;  opacity:0.5; transition: all 0.4s ease-in-out;}
#space .space-arrows button:hover::before {opacity:1; transition: all 0.4s ease-in-out;}
.space-prev::before { content: "arrow_back_ios_new"; }
.space-next::before { content: "arrow_forward_ios"; }
#space .space-side-label { position: absolute; right: 0; top: 48px; color: var(--main); text-transform: uppercase; letter-spacing: 0.05em; transform: rotate(-90deg); transform-origin: right top; white-space: nowrap; }









	
/*******************************************************************************
 @media ~1500px
*******************************************************************************/
@media all and (max-width:1700px) {

#inside .inside_in {padding:0 30px 0 5%;}

}
/*******************************************************************************
 @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) {



  #intro .symbol-bg { width: 240px; }
  
  #inside .inside-lead {flex: 0 0 400px;}  
  

  
  
}
/*******************************************************************************
 @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) {

#philosophy .philosophy-panel {padding:40px;}
#philosophy .philosophy-watermark {width:50%; max-width:260px; right:0; text-align:right;}
#philosophy .philosophy-watermark img {max-width:100%;}

#intro .intro-text { max-width: 100%; flex: 1 1 100%; }
#intro .layout-row > .imgBox { max-width: 100%; }


#promotion .basic_in {overflow:hidden;}
#promotion .promotion-slider {width:80%; margin:0 auto;}
#promotion .promotion-nav button {width:12.5%;}
.promo-prev {left:0;}
.promo-next {right: 0;}




}

/*******************************************************************************
 @media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {


#main_pop .main_pop_in {max-width:500px; gap:12px;}
#main_pop .popup_nav {display:none !important;}
#main_pop .layer_pop_close::before {font-size:45px;}
#main_pop .popup_inner > li,
#main_pop .popup_inner .slick-slide {aspect-ratio: 720 / 1000;}
#main_pop .popup_inner li img.pc {display:none;}
#main_pop .popup_inner li img.mo {display:block;}
#main_pop .hideToday_wrap .chk_box {width:24px; height:24px;}
#main_pop .hideToday_wrap input + .chk_box::before {font-size:18px;}
#main_pop .hideToday_wrap .fs16 {top:0;}


  #intro .layout-row { flex-direction: column; align-items: stretch; gap: 50px; }
  #intro .intro-text { padding-top: 0; }
  #intro .intro-text .lead { margin: 0 0 60px; }
  
  
#inside .layout-row { flex-direction: column; }
#inside .inside_in {padding:0 5%;}
#inside .inside-lead {flex:none; width:100%; position:relative; margin:0 0 30px;}
#inside .inside-lead  .nav-arrows {position:absolute; bottom:0; right:0;}
#inside .inside-lead .stacked-titles > .fs16 {margin-top:25px;}
#inside .insideSwiper { flex: 1 1 auto; width: 100%; overflow:visible;}




#philosophy .layout-row { flex-direction: column; align-items: stretch; gap: 0; }
#philosophy .pho {flex:none;  flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; max-width: 100%; width: 100%; aspect-ratio: 38 / 24;}
#philosophy .philosophy-panel {flex:none; width:100%; max-width:100%; padding: 30px; }
#philosophy .philosophy-panel br {display:none;}
#philosophy .philosophy-watermark { right:0;}



#signature .signature-grid { gap: 30px; }
#signature .treatment-card {flex:calc(50% - 15px);}


#promotion .promotion-nav button {height:40px;}
#promotion .promotion-nav button::before {font-size:40px;}

#space .space-bg {flex-wrap:wrap; padding:0;}
#space .space-copy .fs80 {margin:0 0 30px;}
#space .space-copy {position:relative; width:100%; margin:0 0 60px;}
#space .space-side-label {display:none;}
#space .space-btm-wrap {transform:translateY(0); margin:30px 0 0;}







}

/*******************************************************************************
 @media 481~680px
*******************************************************************************/
@media all and (max-width:680px) {



#main_pop .slick-prev{left:10px;}
#main_pop .slick-next{right:0;}




.nav-arrows {gap:0 26px;}
.nav-arrows button {width:12px; height:30px;}
.nav-arrows button::before {font-size:30px;}
.nav-arrows button:first-of-type::before {left:-9px; }
.nav-arrows button:last-of-type::before {right:9px; }


.section-tit .fs60 {margin:0;}
.section-tit {margin-bottom:50px;}


	#visual .visual_in .roll .v_txt {text-align:center;}
	#visual .visual_in .roll .v_txt .fs18 {padding:10px 0 0;}
	#visual .slick-dots {bottom:30p2026-05-13x; gap:10px; justify-content:center;}


  #intro .intro-text .in { width: 100%; }
  #intro .layout-row {gap:30px;}
  #intro .intro-text .kicker {margin:0 0 5px;}
  #intro .symbol-bg { width: 200px; left: 72%; top: 42%;}
  #intro .intro-text .lead {margin:0 0 40px;}
  #intro .layout-row > .imgBox { flex: 1 1 100%; max-width: 100%;}



#philosophy .philosophy-panel .panel-body .fs16 {margin:30px 0 0;}
#philosophy .philosophy-panel .panel-btm {margin:30px 0 0;}
#philosophy .philosophy-watermark { right:-2%; max-width:200px;}
#philosophy .philosophy-panel h3 {font-size:2em}

#inside .inside-item > .imgBox {margin-bottom:15px;}
#inside .inside-item {padding-bottom:15px;}
#inside .inside-item .fs16.tenor {gap:3px; letter-spacing: 0.13px;}
#inside .inside-item .fs16.tenor::before {font-size:14px;}


#signature .signature-grid { gap: 30px 10px; }
#signature .treatment-card {flex:calc(50% - 5px);}
#signature .treatment-card h3 {margin:10px 0 0;}


#promotion .promotion-caption {padding:12px 0 15px; margin:0; justify-content:center;}
#promotion .promotion-caption .moreBtn {display:none;}
#promotion .promotion-nav button {height:30px;}
#promotion .promotion-nav button::before {font-size:30px;}


#youtube {overflow:hidden;}
#youtube .section-tit-actions {margin-top:30px;}
#youtube .youtubeSwiper  {overflow:visible; width:170%; margin:0;}
#youtube .card .fs18 {margin:12px 0 0;}
#youtube .card {padding-bottom:15px;}
#youtube .play-btn {width:44px; height:44px;}
#youtube .play-btn::before {font-size:22px;}

  
  
#space .space-bg {flex-wrap:wrap; padding:0;}
#space .space-copy .fs80 {margin:0 0 10px;}
#space .space-copy {position:relative; width:100%; margin:0 0 30px;}
#space .space-side-label {display:none;}
#space .space-btm-wrap {transform:translateY(0); margin:20px 0 0;}
#space .space-arrows {display:none;}
#space .space-thumbs {width:100%; max-width:100%;}







}