/* 비율설정 */
.ratio{aspect-ratio: var(--ratio,16/9)}

/* ======================> 메인공통 <====================== */
.arr-box{display: flex;align-items: center;}
.slide-btn{border-radius: 50%;padding:1em;width:3em;box-shadow: 0 0 0.5em rgba(0,0,0,0.1); background:#fff; transition: background 0.3s;cursor: pointer;}
.slide-btn:hover{background:#000}
.slide-btn:not(.slide-btn-point):hover img{filter:invert(1)}
.slide-btn+.slide-btn{margin-left:1em}
.slide-btn-point{background:var(--pointcolor)}
.slide-btn-point img{filter:invert(1)}


.tabBox{flex-shrink: 0;}
.tabBox li{cursor: pointer; padding:1em; border-radius: 0.8em; box-shadow: 0 0 0.5em rgba(0,0,0,0.1); color: #777;;}
.tabBox li+li{margin-top:1em}
.tabBox li.current{background: var(--pointcolor);color: #fff;}

@media(max-width:990px){
    .tabBox.sm-w100{display: flex;flex-wrap:wrap;gap:10px}
    .tabBox.sm-w100 li {width: calc(100% / 3 - (10px * 2) / 3); padding:1em 0.5em}
    .tabBox.sm-w100 li+li{margin-top:0}
}
@media(max-width:500px){
    .titwrap span.point-font.font-80{font-size:4rem}
}

/* ======================> Sec01 <====================== */
.BannSwiper .slide-btn{position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;padding: 3em 1em;width:3em;border-radius: 1em 0 0 1em; cursor: pointer;}
.BannSwiper .slide-prev{border-radius: 0 1em 1em 0;left:0;background: #fff url(/images/main/btn-prev.png) no-repeat center center / 1.2em}
.BannSwiper .slide-next{right:0;;background: #fff url(/images/main/btn-next.png) no-repeat center center / 1.2em}

@media (max-width:990px)  and (min-width:501px) { /*모바일(500px미만) 에서는 100vh하면 글자 잘림 */
    .BannSwiper .parallax{height: 100vh;}
    .BannSwiper .parallax img{object-fit: cover;height: 100%;}
}

/* ======================> Sec02 <====================== */
.sbjSwiper .swiper-slide{display: flex;min-height: 27em;border-radius: 2em;overflow: hidden;z-index: 2;} 
.sbjSwiper .card{width:100%;color: #fff;text-align: center;padding:2em 1em}
.sbjSwiper .bgImg{width: 100%;height: 100%;object-fit: cover;position: absolute;z-index: -1;pointer-events: none;filter: blur(2px) grayscale(1) ;-webkit-filter: blur(2px) grayscale(1);transform: scale(1.1);transition: all 0.5s;}

.sbjSwiper .swiper-slide-active .bgImg, .sbjSwiper .swiper-slide:hover .bgImg{filter: none;transform:scale(1)}

@media (max-width:500px) {
    .Sec02 .arr-box{align-self: flex-start;}
}

/* ======================> Sec03 <====================== */
.docSwiper .swiper-wrapper{flex-wrap:nowrap}
.docSwiper .swiper-slide{background: #eaedf5;border-radius: 2em;color:#cad0e4; overflow: hidden;padding:2em;display: block;}
.docSwiper .docImg{position: absolute;bottom: 0;left: 0; max-height: 90%;}
.docSwiper .docTxt{min-height: 28em;opacity: 0;position: relative;z-index: 2; padding-top: 3em;display: flex; flex-direction: column;justify-content: flex-end;}
.docSwiper .docTxt li+li{margin-top:0.5em}
.docSwiper .docTxt > *{transition: all 0.6s ease;opacity: 0;transform: translateY(1em);}
.docSwiper .docTxt .slide-btn{position: absolute;top: 0;right: 0;}
.docSwiper figure {position: absolute;top: 0;left: 0;bottom: 0;right: 0;padding:2em;display: flex;}
.docSwiper figure figcaption{display: flex;flex-direction: column; justify-content:space-between;width:100%}
.docSwiper figure figcaption p{visibility: visible}


/* Hover & active 효과 */
.docSwiper .swiper-slide:before {  background: #000000; opacity: 0.75;position: absolute;content: '';-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;-webkit-transition-delay: 0s;transition-delay: 0s; z-index: 1;left: 50%; right: 50%;top: 0;bottom: 0;} 

.docSwiper .swiper-slide-active:before,
.docSwiper .swiper-slide:hover:before{ left: 0;right: 0;}
.docSwiper .swiper-slide-active figure figcaption p,
.docSwiper .swiper-slide:hover figure figcaption p{visibility: hidden;}
.docSwiper .swiper-slide-active .docTxt,.docSwiper .swiper-slide-active .docTxt *,
.docSwiper .swiper-slide:hover .docTxt,.docSwiper .swiper-slide:hover .docTxt *{opacity: 1;transform: translateY(0);}
.docSwiper .swiper-slide-active .docTxt h6,
.docSwiper .swiper-slide:hover .docTxt h6{transition-delay: 0.2s;}
.docSwiper .swiper-slide-active .docTxt ul,
.docSwiper .swiper-slide:hover .docTxt ul{transition-delay: 0.3s;}

.docSwiper {overflow: visible;}
.docSwiper .flexList{gap:0}
.docSwiper .pagi{position: relative;bottom: auto;height: 6px;background: #ededed;}
.docSwiper .pagi .swiper-pagination-progressbar-fill{background: var(--pointcolor);}

@media(max-width:990px){
    .docSwiper {overflow: visible;}
    .docSwiper .flexList{gap:0}
    .docSwiper .pagi{position: relative;bottom: auto;height: 6px;background: #ededed;}
    .docSwiper .pagi .swiper-pagination-progressbar-fill{background: var(--pointcolor);}
}


/* ======================> Sec04 <====================== */

.Sec04 .floatingBox .imgbox{border-radius: 2em;overflow: hidden;}
@media (min-width:769px) {
    .Sec04 .floatingBox > .leftbox > li {padding-top:5em}
    .Sec04 .floatingBox > .leftbox > li:nth-child(odd) {padding-right:7em}
    .Sec04 .floatingBox > .rightbox >li {padding-bottom:10em}
    .Sec04 .floatingBox > .rightbox > li:nth-child(even) {padding-left:7em}
    .Sec04 .floatingBox > .rightbox > li:last-child{padding-bottom:0}
}
@media (max-width:768px) {
    .Sec04 .floatingBox li{margin-bottom:3em}
    .Sec04 .floatingBox li:nth-child(odd) {padding-right:10%}
    .Sec04 .floatingBox li:nth-child(even) {padding-left:10%;text-align: right;}
    .Sec04 .floatingBox li:nth-child(even) [data-aos="reveal-line-half"]{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
    .Sec04 .floatingBox li:nth-child(even) [data-aos="reveal-line-half"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0% 100%)}
}

/* ======================> Sec05 <====================== */
.Sec05 .tab_txt{display: none}
.Sec05 .tab_txt.current{display: block}
.Sec05 .tabContent .swiper-slide{display: flex;gap:1em }
.Sec05 .tabContent .empty_slide{aspect-ratio: 3/1;align-items: center;justify-content: center;}
.Sec05 .tabContent .titbox{padding:0.5em 1em;background: var(--pointcolor); color: #fff; border-radius: 0.8em;}
.Sec05 .tabContent .radiusImg{border-radius: 1em;overflow: hidden;position: relative;}
.Sec05 .tabContent .loginLink{position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.8);display: flex;align-items: center;justify-content: center;flex-direction: column;color: #fff;}
.Sec05 .tabContent .loginLink a{background:#fff; color: #000;padding:0.5em;width:8em;display: block;border-radius: 0.5em;}

/* @media (max-width:990px) {
    .Sec05 .tabContent {max-width:500px;margin-left:auto;margin-right:auto}
} */

/* ======================> Sec06 <====================== */
.Sec06{position: relative;z-index: 2;}
.Sec06 .bg-txt{font-weight: 800;color: transparent;-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #ebebeb;white-space: nowrap;line-height: 1.2;font-size: 14.8vw;}
.Sec06 .content-txt{max-width: var(--layoutwidth);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;margin: auto;}

@media (max-width:990px) { 
    .Sec06 .bg-txt{font-size:22vw;}
}

/* ======================> Event <====================== */
.Sec07 .swiper-slide{overflow: hidden;border-radius: 2em;}
.Sec07 .empty_slide{width:100% !important;display: flex; align-items: center; justify-content: center;aspect-ratio: 5/2; padding-right:5vw}
.Sec07 .linkbox{position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0,0,0,0.7); color: #fff;display: flex;padding:1em; opacity: 0; transition: opacity 0.3s}
.Sec07 .linkbox:hover{opacity: 1;}

/* ======================> Youtube <====================== */
.Sec08 .play_video {position: relative;overflow: hidden;width : 100%;height : 0;padding-bottom: 56.25%;margin : 0 auto;}
.Sec08 .play_video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.Sec08 .playSwiper {padding-right: 1.5em; aspect-ratio:8/5}
.Sec08 .playSwiper .swiper-slide {height: auto !important;}
.Sec08 .playSwiper .thumb{display: flex; align-items: center;justify-content: center;}
.Sec08 .imgdiv {width:35%;margin-right:1em;flex-shrink: 0;}

    /* Drag PC 관련 */
    .Sec08 .swiper-scrollbar{top: 0;bottom: 0;right:0;height: 100%;width: 6px;border-radius: 0;}
    .Sec08 .swiper-scrollbar-drag{background:var(--pointcolor);border-radius: 0;}

@media (max-width:990px) {
}


/* ======================> Interior <====================== */
.Sec09 .swiper-slide{overflow: hidden;border-radius: 2em;}

/* parallaxSec */
.Sec10 {position: relative; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);overflow: hidden;}
.Sec10:before{content: '';background: url(/images/main/parallax-bg.jpg) no-repeat center center / cover;position: fixed;width: 100%;height: 100vh;left: 0;top: 0;z-index: -1;}
.Sec10 .lettering{display: inline-block;letter-spacing: 0.5em;mix-blend-mode: overlay;text-transform: uppercase; margin-bottom:1em}

/* ======================> mediaSwiper <====================== */
.mediawrap{position: relative;}
.mediawrap .slide-btn{position: absolute; z-index: 2; top:50%;transform: translateY(-50%);}
.mediawrap .slide-prev{left:0}
.mediawrap .slide-next{right:0}

.mediawrap .mediaSwiper{padding:5em 1.5em}
.mediawrap .mediaSwiper .swiper-slide {opacity: 0.5; aspect-ratio: 369/278; border-radius: 1.5em; overflow: hidden;}
.mediawrap .mediaSwiper .swiper-slide-active {transform: scale(1.4) !important;z-index: 3 !important;opacity: 1;}
.mediawrap .mediaSwiper .swiper-slide img {object-fit: cover; width: 100%;;height: 100%;;}

@media (max-width:1240px) {
    .mediawrap .mediaSwiper{overflow: visible;}
}

/* ======================> Community <====================== */
.Sec11 .tab_txt{display: none}
.Sec11 .tab_txt.current{display: block}

.Sec11 .arr-box{position: absolute;width:100%;height: 100%;background:#000;display: none;;}
.Sec11 .slide-btn{position: absolute;top: 1em;right: 1em;visibility: hidden;}

.Sec11 .swiper-slide{padding:0.5em;display: flex;}
.Sec11 .card{width:100%;box-shadow: 0 0 0.5em rgba(0,0,0,0.1); border-radius: 2em;padding: 3.5em 2em;transition :background 0.2s;min-height: 18em;}
.Sec11 .card .txt{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.Sec11 .card:hover{background:  var(--pointcolor); color: #fff;}
.Sec11 .card:hover .slide-btn{visibility: visible;}
.Sec11 .card h6{ overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.Sec11 .empty_slide{width:100% !important;}
.Sec11 .empty_slide .card{display: flex; align-items: center;justify-content: center;}
@media (max-width:990px) {
    .Sec11 .swiper{overflow: visible;}
}

/* ======================> Information <====================== */
.Sec12 {position: relative;}
.Sec12:before {position: absolute;;content:'';position: absolute;bottom: -1px;left: 0;right: 0;;background: #000;height: 4em;}
.Sec12 .mapbox{border-radius: 2em; overflow: hidden;filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.1));}
.Sec12 .time{display: flex}
.Sec12 .time dt{margin-right:1em;width: 6.5em}
.Sec12 .time dd{letter-spacing: 0.15em;}
.Sec12 .info_icon{width:2em; flex-shrink: 0; margin-right: 1.5em;}
.Sec12 .call_li .info_icon{margin-top:0.2em}

@media (max-width:990px) {
    .Sec12 .infobox{padding-bottom:0}
    .Sec12 .infobox .info{display: flex;flex-wrap:wrap; gap:10px;align-items: flex-start;justify-content: space-between;}
    .Sec12 .infobox .info >li{margin-top:0;min-width :48%}
    .Sec12 .call_li{order:-1}
    
    .Sec12 .mapbox{min-height: 300px;height: 45vw;order: 2;}
}