@charset "utf-8";

.m-section{}
.m-cmn-pd{padding: 12rem 0;}
.top-tit{display: block; font-size: var(--fontSize-45);line-height: 54px;text-transform: uppercase;}
.btn-wr{display: inline-block;}
.view-btn{min-width: 32.6rem; display: flex;align-items: center;justify-content: center;gap: 1rem;padding: 1.5rem 3.2rem}
.view-btn span{display: inline-block;font-size: var(--fontSize-26);font-weight: 700;line-height: 26px;}
.btn-ct-bx p{font-size: var(--fontSize-45);color: #fff;font-weight: 700;line-height: 54px;letter-spacing: -1.35px;}

@media all and (max-width:960px) {
  .top-tit{font-size: var(--fontSize-38);line-height: 49px;}
  .btn-ct-bx p{font-size: var(--fontSize-35);line-height: 48px;}
  .view-btn span{font-size: var(--fontSize-22);}
}
@media all and (max-width:768px) {
  .m-cmn-pd{padding: 8rem 0;}
  .top-tit{font-size: var(--fontSize-23);line-height: 30px;}
  .btn-ct-bx p{font-size: var(--fontSize-25);line-height: 35px;}
  .view-btn{min-width: auto;padding: 1rem 2rem}
  .view-btn span{font-size: var(--fontSize-16);}
}


/* ********************************** */
/*  */
.m-slide{position: relative;}
.m-slide,
.m-slide .img{width: 100%;height: 100vh; }
.m-slide .img{object-fit: cover;object-position: center;}
.m-slide .titBx{position: absolute;left: var(--cmn-left);bottom: 22.8rem;z-index: 2;opacity: 0;transform: translateY(40px);transition: all 0.8s ease;}
.m-slide .titBx.active{opacity: 1;transform: translateY(0);}
.m-slide .titBx h2,
.m-slide .titBx p{color: #fff;}
.m-slide .titBx h2{font-family: 'HappinessSans';font-size: var(--fontSize-48);line-height: 57px;letter-spacing: -0.96px;font-weight: 700;}
.m-slide .titBx p{font-size: var(--fontSize-24);line-height: 36px;margin-top: .9rem;}
.m-slide .scroll-txt{position: absolute; left: 50%;bottom: 3rem;transform: translateX(-50%); animation: upDown 1.6s ease-in-out infinite;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 5;will-change: transform;}
.m-slide .scroll-txt span{display: inline-block;font-size: var(--fontSize-16);color: #BFBFBF;font-weight: 700;line-height: 32px;}
@keyframes upDown {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
}

@media all and (max-width:960px) {
  .m-slide .titBx h2{font-size: var(--fontSize-40);}
}
@media all and (max-width:768px) {

}
@media all and (max-width:640px) {
  .m-slide .titBx h2{font-size: var(--fontSize-32);line-height: 38px;}
  .m-slide .titBx p{font-size: var(--fontSize-18);line-height: 26px;}
  .m-slide .titBx br.br_mo{display: inline-block;}
  .m-slide .scroll-txt span{font-size: var(--fontSize-14);line-height: 24px;}
  .m-slide .scroll-txt .icon{width: 1.3rem;}
}


/*  */
.m-sec01{position: relative;width: 100%;min-height: 100vh;overflow: hidden;background-color: #fff;}
.m-sec01 .video-bx{position: absolute;inset: 0;width: 100%;height: 100%;overflow: hidden;will-change: transform; transform-origin: 50% 50%;}
.m-sec01 .video-bx video{width: 100%;height: 100%;object-fit: cover;display: block;}
.m-sec01 strong{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  font-size: var(--fontSize-45);
  line-height: 54px;
  letter-spacing: -1.35px;
  color: #fff;
  z-index: 3;
  transition: color .35s ease;
}
.m-sec01 strong i{transition: color .3s ease;}
.m-sec01 strong.active{ color:#000; }
.m-sec01 strong i.active{ color: var(--color-point); }
.m-sec01 strong.active i.active{ color: var(--color-point); }
.m-sec01 strong.active.overlap,
.m-sec01 strong.active.overlap i{ color:#fff; }
.m-sec01 strong.hl-base { z-index: 3; }
.m-sec01 strong.hl-clone{color:#fff;pointer-events:none;clip-path: inset(100% 0 0 0);transition: clip-path .1s linear;z-index: 4;}
.m-sec01 strong.hl-clone i{ color:#fff !important; }


@media all and (max-width:960px) {
  .m-sec01 strong{font-size: var(--fontSize-40);}
}
@media all and (max-width:768px) {
  .m-sec01 strong{font-size: var(--fontSize-25);line-height: 36px;width: 90%}
}






/*  */
.m-sec02{background-color: #E8F1EF;}
.m-sec02 .top-tit{color: #4AAEA2;padding-bottom: 8.2rem;}
.m-sec02 .sec02-list{grid-gap: 6.9rem}
.m-sec02 .sec02-list > li{min-height: 42rem;transition: .4s; padding: 6rem 3.4rem;border-radius: var(--radius-10);background: linear-gradient(33deg, #36C2B1 1.54%, #F0B22B 50.77%, #FF5E24 100%);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3rem;}
.m-sec02 .sec02-list strong{display: block;font-size: var(--fontSize-26);color: #fff;line-height: 36px;text-align: center;}
.m-sec02 .sec02-list p{display: none; font-size: var(--fontSize-2);color: #7C7D80;line-height: 30px;}
.m-sec02 .sec02-list > li:hover{background: #fff;padding: 3.7rem 3.4rem; box-shadow: 10px 24px 54px rgba(147, 87, 147, 0.3);align-items: flex-start;justify-content: space-between;}
.m-sec02 .sec02-list > li:hover .icon{display: none;}
.m-sec02 .sec02-list > li:hover strong{color: #3E3E3F;}
.m-sec02 .sec02-list > li:hover p{display: block;}


@media all and (max-width:1400px) {
  .m-sec02 .sec02-list{grid-gap: 3rem}
  .m-sec02 .sec02-list .icon{width: 10rem;}
}
@media all and (max-width:960px) {
  .m-sec02 .top-tit{padding-bottom: 6rem;}
  .m-sec02 .sec02-list{grid-template-columns: repeat(2,1fr);grid-gap: 2rem;}
}
@media all and (max-width:768px) {
  .m-sec02 .top-tit{padding-bottom: 3rem;}
  .m-sec02 .sec02-list > li{padding: 3rem 2rem;min-height: 38rem;}
}
@media all and (max-width:640px) {
  .m-sec02 .sec02-list{grid-template-columns: 1fr;grid-gap: 1.5rem}
  .m-sec02 .sec02-list > li{min-height: 30rem;gap: 2rem}
  .m-sec02 .sec02-list .icon{width: 6.5rem;}
  .m-sec02 .sec02-list strong{font-size: var(--fontSize-20);line-height: 28px;}
}
@media all and (max-width:480px) {
  .m-sec02 .sec02-list > li{min-height: 23rem}
}




/*  */
.m-sec03{overflow: hidden;}
.m-sec03 .top-titBx{display: flex;flex-direction: column;align-items: center;justify-content: center;padding-bottom: 6rem;}
.m-sec03 .top-titBx .tit{font-family: "Outfit", sans-serif;font-size: 6.5rem;font-weight: 700;text-transform: uppercase;color: #333;line-height: 78px;letter-spacing: -1.3px;}
.m-sec03 .top-titBx .txt{font-size: var(--fontSize-20);font-weight: 300;line-height: 40px;margin-top: 2rem;text-align: center;}

.m-sec03 ul.tabs {display: flex;align-items: center;justify-content: center;gap: 8rem;padding-bottom: 5.8rem;}
.m-sec03 ul.tabs li button {position: relative;font-size: var(--fontSize-20);line-height: 40px;white-space: nowrap;}
.m-sec03 ul.tabs li.current {position: relative;}
.m-sec03 ul.tabs li.current button{font-weight: 700; border-bottom: 2px solid #36C2B1;}
.m-sec03 .tab_cont {position: relative;width: 100%;text-align: center;}
.m-sec03 .tab-content {display: none !important;}
.m-sec03 .tab-content.current {display: block !important;}

.bs-cont{display: flex;align-items: flex-start;justify-content: center; gap: 4rem}
.bs-cont > li > a{width: 100%;height: 100%;display: block;position: relative;}
.bs-cont > li.side > a{pointer-events: none;cursor: default;}
.bs-cont > li.side .box-img{width: 720px;}
.bs-cont > li.center .box-img{width: 960px;}
.bs-cont > li.side .tit-wr{opacity: 0;}
.bs-cont .box-img{border-radius: var(--radius-30);overflow: hidden;}
.bs-cont .tit-wr{position: absolute;left: 7rem;top: 50%;transform: translateY(-50%); display: grid;grid-gap: 1.1rem;z-index: 2;}
.bs-cont .tit-wr .titBx{gap: 10px;}
.bs-cont .tit-wr .titBx .tit,
.bs-cont .tit-wr .txt{color: #fff;text-align: left;}
.bs-cont .tit-wr .titBx .tit{display: block;font-size: var(--fontSize-30);font-weight: 600;line-height: 40px;}
.bs-cont .tit-wr .txt{font-size: var(--fontSize-20);line-height: 30px;text-align: left;}
.bs-cont .mo-arrow{display: none;}

.bs-cont > li:hover .icon{animation: leftRight 1.6s ease-in-out infinite;}
@keyframes leftRight {
  0%, 100% {
    transform: translateX(15px);
  }
  50% {
    transform: translateX(0);
  }
}



@media all and (max-width:1400px) {
  .bs-cont > li.side .box-img{width: 430px;}
  .bs-cont > li.center .box-img{width: 650px;}
  .bs-cont .tit-wr{left: 4rem;}
}
@media all and (max-width:960px) {
  .m-sec03 .top-titBx .tit{font-size: 5rem;}
  .m-sec03 ul.tabs{gap: 4rem}

  .bs-cont{gap: 2rem}
  .bs-cont > li.side .box-img{width: 300px;height: 290px;}
  .bs-cont > li.center .box-img{width: 500px;height: 360px;}
  .bs-cont > li .box-img .img{width: 100%;height: 100%;object-position: center;object-fit: cover;}
  .bs-cont .tit-wr .titBx .tit{font-size: var(--fontSize-23);line-height: 38px}
  .bs-cont .tit-wr .txt{font-size: var(--fontSize-18);line-height: 24px;}
}
@media all and (max-width:768px) {
  .m-sec03 .top-titBx .tit{font-size: var(--fontSize-35);line-height: 42px;}
  .m-sec03 .top-titBx .txt{font-size: var(--fontSize-18);line-height: 26px;margin-top: 1.5rem}
  .m-sec03 .top-titBx .txt br.br_mo{display: inline-block;}

  .m-sec03 ul.tabs{gap: 2rem;flex-wrap: wrap;}
  .m-sec03 ul.tabs li button{font-size: var(--fontSize-16);line-height: 28px;}
}
@media all and (max-width:640px) {
  .bs-cont > li.side .box-img{width: 280px;}
  .bs-cont > li.center .box-img{width: 400px;}

  .bs-cont .tit-wr{left: 2rem;;}
  .bs-cont .tit-wr .icon{width: 2.5rem;}
  .bs-cont .tit-wr .titBx{gap: 5px}

  .bs-cont .tit-wr .titBx .tit{font-size: var(--fontSize-18);line-height: 28px;}
  .bs-cont .tit-wr .titBx .icon{display: none;}
  .bs-cont .tit-wr .txt{font-size: var(--fontSize-16);line-height: 25px;}
  .bs-cont .tit-wr .txt br.br_mo{display: inline-block;}
  .bs-cont .mo-arrow{display: block;}

}
@media all and (max-width:480px) {
  .bs-cont > li.side .box-img{width: 180px;height: 250px;}
  .bs-cont > li.center .box-img{width: 310px;height: 300px;}
}
@media all and (max-width:400px) {
  .m-sec03 ul.tabs{gap: 1.5rem;padding-bottom: 3rem;}
  .bs-cont{gap: 1.5rem}
  .bs-cont > li .box-img{border-radius: var(--radius-20);}
  .bs-cont > li.side .box-img{width: 150px;height: 250px;}
  .bs-cont > li.center .box-img{width: 230px;height: 300px;}
  .bs-cont .tit-wr .titBx br.br_mo{display: inline-block;}
}




/*  */
.m-sec04{ position: relative;background-color: #000;padding: 12.9rem 0 19.2rem;height: 1168px; overflow:hidden;}
.m-sec04 .btn-ct-bx{position: absolute;width: 90%;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 5; display: flex;flex-direction: column;align-items: center;justify-content: center; grid-gap: 11.5rem;}
.m-sec04 .btn-ct-bx p{text-align: center;}
.m-sec04 .view-btn{background:linear-gradient(73deg, #36C2B1 24.54%, #F0B22B 63.08%, #FF5E24 97.86%);;border-radius: .5rem;}
.m-sec04 .view-btn span{color: #fff;}
.m-sec04 .deco-img{position:absolute;opacity:0;will-change: transform, opacity;transform: translateY(60px);pointer-events:none;z-index: 3;}
.m-sec04 .img1{top:89px; left:170px;}
.m-sec04 .img2{top:150px; left:50%;transform: translateX(-50%);}
.m-sec04 .img3{top:92px; right:240px;}
.m-sec04 .img4{top:140px; left:380px;z-index: 4;}
.m-sec04 .img5{top:580px; left:60px;}
.m-sec04 .img6{top:580px; left:445px}
.m-sec04 .img7{top:880px; right:178px;}
.m-sec04 .img8{top:570px; right:29px;z-index: 4;}


@media all and (max-width:1400px) {
  .m-sec04 .img1{left: 5%;width: 28rem;}
  .m-sec04 .img2{top: -10%; width: 20rem;}
  .m-sec04 .img3{right: 8%;width: 25rem;}
  .m-sec04 .img4{left: 23%;width: 16rem;}
  .m-sec04 .img5{left: 4%; width: 20rem;}
  .m-sec04 .img6{left: 30%; width: 35rem;}
  .m-sec04 .img7{right: 10%;top: 47%; width: 25rem;}
  .m-sec04 .img8{right: 4%;width: 24rem;}
}
@media all and (max-width:960px) {
  .m-sec04 .btn-ct-bx{grid-gap: 6rem}
}
@media all and (max-width:640px) {
  .m-sec04{height: 100vh;}
  .m-sec04 .btn-ct-bx{gap: 3rem}
  .m-sec04 .img1{width: 9rem;left: 1rem;}
  .m-sec04 .img2{width: 9rem;}
  .m-sec04 .img3{width: 10rem;}
  .m-sec04 .img4{width: 8rem;top: 50px;}
  .m-sec04 .img5{width: 13rem;top: 375px;}
  .m-sec04 .img6{width: 12rem;top: 414px;left: 39%;}
  .m-sec04 .img7{width: 10rem;top: 68%;right: 2rem;}
  .m-sec04 .img8{width: 8rem;top: 420px;}
}





/*  */
.m-sec05{background: url(/theme/basic/img/main/m_sec05_bg.jpg?v=1) no-repeat center / cover;width: 100%;padding: 13.2rem 0 7.2rem}
.m-sec05 .btn-ct-bx{display: grid;grid-gap: 1.4rem}
.m-sec05 .btn-wr{margin-left: auto;}
.m-sec05 .view-btn{background-color: #fff;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);}


@media all and (max-width:1400px) {
  .m-sec05 .btn-ct-bx{grid-gap: 3rem;}
  .m-sec05 .btn-wr{margin-left: 0;}
  .m-sec05 .view-btn{min-width: auto;width: 32rem;}
}
@media all and (max-width:768px) {
  .m-sec05{padding: 8rem 0}
  .m-sec05 .view-btn{width: 20rem;}
}