@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

.char { display:inline-block; opacity:0; transform:translateY(1rem); filter: blur(6rem); }
.char.space { width:0.4em; }
.split-text { overflow:hidden; }
.section .blur-effect{opacity:0;filter:blur(6rem);transform:translateY(10rem);transition:all 1.2s ease;transition-delay:.5s;}


/* **************************************** *
 * main-visual section
 * **************************************** */

/* main popup */
.main-popup{position: absolute; right: 50rem; bottom: 186rem; z-index: 40; width: 302rem; overflow: hidden; border-radius: 20rem; box-shadow: 10rem 10rem 20rem 0 rgba(0, 0, 0, 0.10);}
.main-popup figure{height: 200rem;}
.main-popup__conts{background-color: var(--w); padding: 20rem;}
.main-popup__conts strong{margin-bottom: 30rem; display: block;}
.main-popup__conts .btn-default{background-color: var(--bg-gray); min-width: 100%;}
.main-popup .close{position: absolute; top: 15rem; right:15rem; width: 31rem; height: 31rem; background: url(../img/layout/close_w.svg) no-repeat; background-size: contain; }
.main-popup.is-hide{display:none;}

/* main visual */
.main-visual{height:100svh; position: relative;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ display: block; position: absolute; top:0; left:0; width:100%; height:var(--height-full); object-fit: cover; }
.main-visual__video video{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 22rem;height: 22rem;background: url(../img/main/main-nav.svg) no-repeat 50% 52%;background-size: contain;}
.main-visual__btn > i{}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 80rem;left:0;z-index:999;width:100%;}
.main-visual__controls .swiper-controls{justify-content: flex-start; gap: 20rem;}
.main-visual__controls .line{margin-bottom: 31rem;}
.main-visual__count{display:flex; align-items:center; gap: 18rem; font-size:17rem; color:#fff; position: relative;}
.main-visual__count > *{width: 10rem; display: inline-flex;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count em{}
.main-visual__count::before{content:"/"; position: absolute; left: 50%; transform: translateX(-50%); display:block; font-size: 15rem; font-family: var(--lang-en2);opacity: 0.3; }
.main-visual__btn.button-next::after{/* transform:rotate(-90deg); */}
.main-visual__btn.button-prev::after{transform: rotate(180deg);}

.main-visual__text{position:absolute; bottom: 200rem; width:100%;  color:#fff;}
.main-visual__text h2{overflow:hidden;line-height:1.1;font-weight:700;letter-spacing:-0.5rem;}
.main-visual__text h2 > span{font-weight:700;}
.main-visual__text p{margin-bottom: 8rem; font-size: var(--font-60); font-family: var(--lang-en1);}
.main-visual__text p span{font-weight: 500;}

.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap-wide{width:100%;}
.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--w);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}
.swiper-slide-active  .char { opacity:1; transform:translateY(0); filter: blur(0); transition:all 1.5s ease; }
.swiper-slide-active .char:nth-child(20n+1)  { transition-delay:.20s; }
.swiper-slide-active .char:nth-child(20n+2)  { transition-delay:.24s; }
.swiper-slide-active .char:nth-child(20n+3)  { transition-delay:.28s; }
.swiper-slide-active .char:nth-child(20n+4)  { transition-delay:.32s; }
.swiper-slide-active .char:nth-child(20n+5)  { transition-delay:.36s; }
.swiper-slide-active .char:nth-child(20n+6)  { transition-delay:.40s; }
.swiper-slide-active .char:nth-child(20n+7)  { transition-delay:.44s; }
.swiper-slide-active .char:nth-child(20n+8)  { transition-delay:.48s; }
.swiper-slide-active .char:nth-child(20n+9)  { transition-delay:.52s; }
.swiper-slide-active .char:nth-child(20n+10) { transition-delay:.56s; }
.swiper-slide-active .char:nth-child(20n+11) { transition-delay:.60s; }
.swiper-slide-active .char:nth-child(20n+12) { transition-delay:.64s; }
.swiper-slide-active .char:nth-child(20n+13) { transition-delay:.68s; }
.swiper-slide-active .char:nth-child(20n+14) { transition-delay:.72s; }
.swiper-slide-active .char:nth-child(20n+15) { transition-delay:.76s; }
.swiper-slide-active .char:nth-child(20n+16) { transition-delay:.80s; }
.swiper-slide-active .char:nth-child(20n+17) { transition-delay:.84s; }
.swiper-slide-active .char:nth-child(20n+18) { transition-delay:.88s; }
.swiper-slide-active .char:nth-child(20n+19) { transition-delay:.92s; }
.swiper-slide-active .char:nth-child(20n+20) { transition-delay:.96s; }

a.scroll-down{position:absolute;bottom:50rem;right: 50rem;z-index:30;font-weight:700;color:var(--w);}

@media (max-width:1800px){
.main-visual__video video{transform: scale(1.2);}
}
@media (max-width:1200px){

    .main-popup figure{height: 160rem;}
    .main-popup{width: 270rem; right: 20rem; bottom: 31%;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
}

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

@media (max-width:540px){
	
    .main-visual__text{bottom: 160rem;}
	.main-visual__text h2{line-height:1.2; font-size:31rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}
    .main-visual__controls .swiper-controls{gap: 10rem;}
    .main-visual__count{font-size: 14rem;}

    .main-popup{width: 220rem; border-radius: 14rem;}
    .main-popup__conts{padding: 14rem;}
    .main-popup__conts strong{margin-bottom: 16REM;}
    .main-visual__btn::after{width: 18rem; height: 18rem;}
    .main-popup .close{width: 22rem; height: 22rem; top: 8rem; right: 8rem;}
    a.scroll-down{right: 22rem; bottom: 30rem;}
    .main-visual__controls .line{margin-bottom: 20rem;}
	
}

/* **************************************** *
 * about us section
 * **************************************** */

.flex-hover{gap: 20rem;}
.flex-hover__item{padding: 40rem; overflow: hidden; position: relative; height: 520rem; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--bg-gray); width:100%; border-radius: var(--bd-radius20);transition:var(--trans-01);}
.flex-hover__item > *:not(.flex-hover__bg){position: relative; z-index: 2;}
.flex-hover__item *{transition: var(--trans-01);}
.flex-hover__item p{transform: translateY(100rem); font-weight: 300; overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.flex-hover__item .btn-default{margin-top: 20rem;}
.flex-hover__item > .main-about__tt  *{transition: var(--trans-01);}
.flex-hover__item > .main-about__tt,
.flex-hover__item > div:has(.btn-default){overflow: hidden;}
.flex-hover__item .btn-default{transform: translateY(100rem);}
.flex-hover__bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; transition: var(--trans-01); opacity: 0;}
.flex-hover__bg.bg01{background-image: url(../img/main/business01.jpg);}
.flex-hover__bg.bg02{background-image: url(../img/main/business02.jpg);}
.flex-hover__bg.bg03{background-image: url(../img/main/business02-1.jpg);}
.flex-hover__bg.bg04{background-image: url(../img/main/business02-2.jpg);}

.main-aboutus{padding-top: var(--space180);}
.main-aboutus__title{text-align: center; margin-bottom: 65rem;}
.main-aboutus__title .caption +  h3{margin-top: 30rem;}
.main-about__tt i{width: 62rem; height: 62rem; margin-bottom: 20rem; border-radius: 100%; background-color: var(--w); display: flex; align-items: center; justify-content: center;}

.main-interaction strong{display:inline-block;font-size:200rem;font-weight:800;background:linear-gradient(94deg,#00A5AE 24.15%,#004554 142.08%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.main-interatcion--wrap{height:var(--height-full);}
.main-video{height:var(--height-full);border-radius:var(--bd-radius20) var(--bd-radius20) 0 0;}

@media (max-width:1480px){
    .flex-hover__item{padding:32rem;}
}

@media (min-width:1201px) and (hover:hover) and (pointer:fine){
    .flex-hover__item:hover h4{font-size:28rem;}
}

@media all and (max-width:1200px){
    .flex-hover__item{padding:26rem;}
}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
    .flex-hover__item:hover{width:220%;}
    .flex-hover__item:hover .flex-hover__bg{opacity:1;}
    .flex-hover__item:hover .main-about__tt *{transform:translateY(0);}
    .flex-hover__item:hover .main-about__tt i{display:none;}
    .flex-hover__item:hover > div:has(.btn-default) *{transform:translateY(0);}
    .flex-hover__item:hover h4{color:var(--w);font-size:35rem;}
    .flex-hover__item:hover p{color:var(--w);}
}

@media all and (max-width:1023px){
    .flex-hover{display:grid;grid-template-columns:1fr 1fr;}
    .flex-hover__bg{position:relative;opacity:1;height:inherit;aspect-ratio:16/9;margin-bottom:24rem;}
    .flex-hover__item{height:auto;padding:0 0 24rem;}
    .flex-hover__item .btn-default{transform:none;}
    .flex-hover__item > *:not(figure){padding-left:24rem;padding-right:24rem;}
    .flex-hover__item > .main-about__tt,.flex-hover__item > div:has(.btn-default){overflow:visible;}
    .flex-hover__item p{transform:none;}
    .flex-hover__item p br{display:none;}
    .main-about__tt h4{margin-bottom:12rem;}
    .main-about__tt i{width:52rem;height:52rem;}
    .main-aboutus__title .caption +  h3{margin-top:20rem;}
    .main-aboutus__title{margin-bottom: 32rem;}
}

@media (max-width:860px){
    .main-popup{display:none;}
    .point-pin__box.is-active{display:none;}
}

@media (max-width:540px){
    .flex-hover{grid-template-columns:1fr;gap:14rem;}
    .flex-hover__bg{margin-bottom:22rem;}
    .flex-hover__item{padding-bottom:22rem;}
    .flex-hover__item .btn-default{margin-top:34rem;}
    .flex-hover__item > *:not(figure){padding:0 22rem;}
    .main-about__tt h4{margin-bottom:7rem;}
    .main-about__tt i{width:40rem;height:40rem;margin-bottom:14rem;}
    .main-about__tt i img{max-width:30rem;}
    .main-aboutus__title{margin-bottom:28rem;}
    .main-aboutus__title .caption +  h3{margin-top:8rem;}
}

/* **************************************** *
 * main slogan section
 * **************************************** */
.main-slogan{display:flex;align-items:center;flex-direction:column;margin-block:auto;position:relative;}
.main-slogan--wrap{height:100vh;position:relative;overflow:clip;display:flex;align-items:center;justify-content:center;}
.main-slogan__text{background-color:var(--w);padding:4rem 0; width: 100%; position: relative;} 
.main-slogan__text img{width: 100%;}
.main-slogan__text.bottom{position:absolute;left:0;bottom:-100%;overflow:hidden;transform:translateX(120%);}
.main-slogan__text.center{transform:translateX(-120%);z-index:2; }
.main-slogan__text.top{position:absolute;left:0;top:-100%; overflow:hidden;transform:translateX(120%);}

.main-video{position:absolute;left:0;bottom:0;width:100%;border-radius:var(--bd-radius20) var(--bd-radius20) 0 0;overflow:hidden;transform:translateY(100%);opacity:1;}
.main-video video{ position: absolute; left: 0; top: 0; width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.main-video__inr {height: 100%;}
.main-video__inr .wrap {height: 100%;justify-content: flex-end; padding: var(--space150) 0;}
.main-video .btn-wrap {gap: 0 10rem;}

@media (max-width:1600px){

    .main-slogan__text > img{width: 94%; position: relative; margin: 0 auto;}

}

@media (max-width:860px){
    .main-slogan--wrap{display:none !important;}
    .main-video{position:relative;transform:none;margin-top:var(--space150);}
}

@media (max-width:540px){
    .main-video{position:relative; height: 400rem;}
}

/* **************************************** *
 * main global section
 * **************************************** */

.main-global{background-color: var(--bg-primary); margin-top: -20rem; overflow: hidden; border-radius: var(--bd-radius20); position: relative; padding-top: 257rem; padding-bottom: 240rem;}
.main-global .comm-title{position: absolute; width: 100%; left: 0; top: var(--space150);}
.main-global .comm-title h3{margin-top: 20rem;}
.main-global .rolling-img{position: absolute; z-index:2; bottom: 113rem; } 
.main-global .rolling-img *{color: var(--w);}
.main-rolling{text-align: center; min-width: 420rem; border-right: 1px dashed var(--op-w30); }
.main-rolling .number{margin-bottom: 21rem; display: flex; justify-content: center; font-size: 70rem; font-weight: 600}
.main-rolling .number *{font-size: 70rem; font-weight: 600}
.main-rolling em{display: block; margin-bottom: 5rem; }
.main-rolling p{font-size: 16rem; font-weight: 300;}

.pin-link{display:block; position:relative; width:42rem; height:42rem; border-radius: 100%; background-color: var(--w); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25);}
.pin-link::before{content:""; position:absolute; top:50%; left:50%; z-index:2; width:14rem; height:14rem;  transform:translate(-50%, -50%); background-image: url(../img/layout/ic-plus.svg); background-size: cover;}

.map-popup{display:block; position:relative;}
.map-popup__img{display:block; width:100%;}
.map-popup__img img{width: 100%;}
.map-popup__pin-wrap{position:absolute;inset:0;width: 100%;height: 100%;left: 0;top: 0;}
.map-popup__pin{position:absolute; transform:translate(-50%, -50%);}
.map-popup__pin::after{content:"";position:absolute;left:100%;top:50%;width:var(--line-w,0rem);border-top:1px dashed var(--op-w30);transform:translateY(-50%);opacity:0;}
.map-popup__pin:has(.is-active){z-index: 10;}
/* .map-popup__pin.pin01{top: 39%;left: 39%;}
.map-popup__pin.pin02{top: 37%;left: 42.6%;}
.map-popup__pin.pin03{top: 42%;left: 34%;}
.map-popup__pin.pin04{top: 43%;left: 15%;}
.map-popup__pin.pin05{top: 62%;left: 38.5%;}
.map-popup__pin.pin06{top: 38%;left: 25%} */
.map-popup__pin.pin01{top:39%;left:39%;--line-w:362rem;}
.map-popup__pin.pin02{top:37%;left:42.6%;--line-w:297rem;}
.map-popup__pin.pin03{top:42%;left:34%;--line-w:453rem;}
.map-popup__pin.pin04{top:43%;left:15%;--line-w:796rem;}
.map-popup__pin.pin05{top:62%;left:38.5%;--line-w:373rem;}
.map-popup__pin.pin06{top:38%;left:25%;--line-w:616rem;}

.map-popup__pin.is-current::after{opacity: 1;}
.map-popup__pin.is-current .pin-link{background-color: var(--c-primary);}
.map-popup__pin.is-current .pin-link::before{background-image: url(../img/layout/ic-plus_w.svg);}

.point-pin__box{ position: absolute; width:clamp(320rem,38vw,717rem);max-width:717rem;min-width:auto; z-index:10; right: 0; transform:translateY(-50rem) scale(0.9); opacity:0; visibility:hidden; padding:35rem 30rem 30rem; background:#fff; border:1px solid #ccc; /* white-space:nowrap; */ transition:all 0.5s ease;  border-radius:var(--bd-radius20); pointer-events:none;}
.point-pin__box.is-active{opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;}

.point-pin__close{display:block; position:absolute; top: 20rem; right: 20rem; width:30rem; height:30rem; box-sizing:border-box;  cursor:pointer;}
.point-pin__close::before,
.point-pin__close::after{content:""; position:absolute; top:50%; left:50%; width:22rem; height:2rem; background:#333; transform-origin:center;}
.point-pin__close::before{transform:translate(-50%, -50%) rotate(45deg);}
.point-pin__close::after{transform:translate(-50%, -50%) rotate(-45deg);}

.point-pin__box.box01{top:20.5%;}
.point-pin__box.box02{top:25.6%;}
.point-pin__box.box03{top:34.4%;}
.point-pin__box.box04{top:31.7%;}
.point-pin__box.box05{top:50.7%;}
.point-pin__box.box06{top:26.7%;}

.logo_list{gap: 5rem;}
.logo_list > li{height:clamp(44rem,4vw,62rem); min-width:0;border-radius: 8rem; border:1px solid var(--op-b10); display: flex; align-items: center; justify-content: center;}
.logo_list > li img{max-width: 90%; max-height: 90%; object-fit: contain;}
.logo_list > li.color{background-color: #0068ac;}

@keyframes pinRipple{
    0%{opacity:0.35; transform:translate(-50%, -50%) scale(1);}
    80%{opacity:0; transform:translate(-50%, -50%) scale(2);}
    100%{opacity:0; transform:translate(-50%, -50%) scale(2.2);}
}

.main-pop__tit strong{font-size: 27rem; font-weight: 600; font-family: var(--lang-en2); display: block;}
.main-pop__tit p{margin-top: 9rem; color: var(--c-default);}
.main-pop__tit:has(p){margin-bottom: 40rem;}
.main-pop__tit:not(:has(p)){margin-bottom: 20rem;}


@media (max-width:1600px){
    .logo_list{grid-template-columns: 1fr 1fr 1fr;}
    .main-pop__tit strong{font-size: 22rem;}
    .main-pop__tit p{margin-top: 5rem;}
    .main-pop__tit:has(p){margin-right: 20rem;}
}
@media (max-width:1480px){
    .pin-link{width: 36rem; height: 36rem;}
    .pin-link::before{width: 12rem; height: 12rem; background-size: contain;}
    .main-rolling .number,
    .main-rolling .number *{font-size: 62rem;}
    .main-rolling .number{margin-bottom: 3rem;}
     .main-pop__tit:has(p){margin-bottom: 30rem;}
}
@media (max-width:1200px){
	 .logo_list{grid-template-columns: 1fr 1fr}
     .point-pin__box {padding: 24rem;}
}
@media all and (max-width:1023px){
    .main-rolling{min-width: 350rem;}
    .main-rolling .number *{font-size: 54rem;}
    .main-global .comm-title h3{margin-top: 12rem;}
    .main-rolling.last .number,
    .main-rolling.last .number *{font-size: 44rem;}
    .main-rolling p{font-size: 15rem;}
    .main-pop__tit:has(p){margin-bottom: 20rem;}

    .pin-link{width: 27rem; height: 27rem;}
    .point-pin__box.box01 .logo_list > li{ width: 32%;}
    .point-pin__box:not(.box01) .logo_list > li{ width: 49%;}
    .point-pin__box {padding: 20rem;}
    .logo_list{display: flex; flex-wrap: wrap;}
    .logo_list > li{min-width: inherit;}
}
@media (max-width:860px){
    .pin-link::before{display: none;}
    .pin-link{width: 14rem; height: 14rem;}
    .point-pin__box{left: 20rem;}
}
@media (max-width: 540px){
    .main-rolling .number *{font-size: 36rem;}
    .main-rolling.last .number,
    .main-rolling.last .number *{font-size: 28rem;}
    .main-rolling{min-width: inherit; padding: 0 33rem;}
    .main-rolling p{font-size: 14rem;}
    .main-global{padding-top: 140rem; padding-bottom: 180rem;}
    .main-global .rolling-img{bottom: 40rem;}
    .pin-link{width: 6rem; height: 6rem;}
}

/* **************************************** *
 * main-board section
 * **************************************** */
.main-board{padding-top: 185rem;position: relative;overflow: hidden;}
.main-board .wrap{position: relative; z-index: 2;}
.main-board .comm-title{margin-top: 25rem;}
.main-board .comm-title .caption + h3{margin-top: 25rem;}
.main-board .comm-title .btn-wrap{margin-top: 36rem;}
.main-board__smallTT{position: relative; padding-left: 15rem; margin-bottom: 20rem; display: block;}
.main-board__smallTT::before{content: ""; width:5rem; height: 5rem; border-radius: 30rem; background-color: var(--c-primary); position: absolute; left: 0; top: 8rem;}
.main-board__conts{margin-top: 130rem;}

.main-baord__video--wrap{position: absolute;right: 160rem;top: -40rem;}
.main-baord__video--wrap i{width:1400rem;aspect-ratio:1/1;border-radius:100%;border:1px solid var(--bd-01);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.4);opacity:0;animation:ripple 4s linear infinite;}
.main-baord__video--wrap i:nth-of-type(1){animation-delay:0s;}
.main-baord__video--wrap i:nth-of-type(2){animation-delay:1s;}
.main-baord__video--wrap i:nth-of-type(3){animation-delay:2s;}
.main-board__video{ width: 488rem; height: 822rem; position: relative; overflow: hidden; border-radius: 400rem; }
.main-board__video::before{content: "";width: 100%;height: 60rem;background-color: var(--w);bottom: 0;left: 0;position: absolute;z-index: 1;}
.main-board__video video{width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
 .gallery-list__title i{font-size: 13rem;}

@keyframes ripple{
    0%{transform:translate(-50%,-50%) scale(0);opacity:0.3;}
    70%{opacity:0.9}
    100%{transform:translate(-50%,-50%) scale(1.2);opacity:0;}
}

@media (max-width:1600px){

     .main-baord__video--wrap{right: 80rem; top: 0rem;}

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

    .main-board__video{width: 400rem; height: 720rem;}
    .main-baord__video--wrap i{width: 1000rem;}
    .main-board{padding-top: 170rem;}

}
@media all and (max-width:1200px){
	.main-board{padding-top: var(--space180)}
    .main-board__video{width: 340rem; height: 620rem;}
    .main-baord__video--wrap{right: 30rem; top: -40rem;}
    .main-baord__video--wrap i{width: 900rem;}
    .main-board__conts{margin-top: var(--space120);}
}
@media all and (max-width:1023px){
	.main-board__video{height: 490rem; width: 310rem;;}
    .main-baord__video--wrap i{width: 780rem;}
    .main-board .comm-title{margin-top: 0;}
    .main-board .comm-title .caption + h3{margin-top: 12rem;}
}
@media (max-width:860px){

}
@media (max-width: 540px){
    .main-board__conts .gallery-list{grid-template-columns: 1fr;}
    .main-board__conts .gallery-list__img{height: inherit; aspect-ratio: 16 / 10;}
    .gallery-list__title{padding-top: 12rem;}
    .gallery-list__title i{}
    .gallery-list__title strong{margin-top: 3rem;}
    .main-board__smallTT{margin-bottom: 10rem;}

    .main-board__video{width: 180rem; height: 360rem; right: 0;}
    .main-board .comm-title *.btn-default{display: inline-flex;}
    .main-baord__video--wrap{right: 0;}
    .main-baord__video--wrap i{width:600rem;}
    .main-board__video::before{height: 26rem;}
    .main-board .comm-title .caption + h3{margin-top: 7rem;}

}