@charset "utf-8";

/* Base */
#mainpage {background: #141414; color: white;}

.slide-controls .wrapper {display: flex; align-items: center; gap: 32px;}
.slide-controls .slide-button {position: relative; display: flex; align-items: center; padding: 10px;}
.slide-controls .slide-button::before,
.slide-controls .slide-button::after {display: block; content: '';}
.slide-controls .slide-button::before {width: 14px; height: 14px; border-top: 2px solid white; border-right: 2px solid white;}
.slide-controls .slide-button::after {width: 80px; height: 2px; background: white;}

.slide-controls .slide-button-prev::before {transform: rotate(-135deg); margin-right: -14px;}
.slide-controls .slide-button-prev::after {}
.slide-controls .slide-button-next::before {transform: rotate(45deg); margin-left: -14px; order: 1;}
.slide-controls .slide-button-next::after {order: 0;}

.slide-controls .slide-paging {display: flex; position: static; width: auto; display: flex; gap: 30px; margin-inline: 32px;}
.slide-controls .slide-paging .swiper-pagination-bullet {width: 10px; height: 10px; border-radius: 0px; border: 1px solid white; opacity: 1; margin: 0; background: transparent;}
.slide-controls .slide-paging .swiper-pagination-bullet-active {background: #fff;}

.fp-section {background: #141414;}
.fp-tableCell {padding-block: 200px 70px;}
.section-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover;}
.fp-content {position: relative; z-index: 1;}

.mp-section-head {--indent: 72px; position: relative; padding-left: var(--indent);}
.mp-section-title {position: relative; font-size: 48px; font-weight: 700; font-family: var(--font-secondary); text-transform: uppercase; line-height: 1.3;}
.mp-section-title::before {position: absolute; top: 0.65em; width: 40px; height: 2px; background: var(--primary); left: calc(-1 * var(--indent)); content: '';}
.mp-section-desc {font-weight: 300; color: #fff; margin-top: 1.5em;}
.mp-section-head-2 {}
.mp-section-head-2 .mp-section-title::before {display: none;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .mp-section-title {font-size: 32px;}
  .fp-tableCell {padding-block: 100px 50px;}
  .mp-section-head {--indent: 53px;}
}
@media screen and (max-width: 767px) {
  .slide-controls .slide-paging {position: absolute; left : 50%; transform: translateX(-50%); margin: 0;}
  .slide-controls .slide-button::after {width: 18px;}
  .mp-section-desc {word-break: keep-all;}
  .mp-section-title {font-size: 25px;}
  .mp-section-title::before {width: 18px;}
  .mp-section-head {--indent: 30px;}

}

/* Main Visual */
.fp-tableCell:has(.main-visual) {padding-block: 0;}
.main-visual {height: 100%;}
.main-visual-slide {}
.main-visual-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.1); transition: transform 20s;}
.main-visual-slide .content {color: #fff; padding-block: 182px;}
.main-visual-slide .content .title {font-size: 58px; font-weight: 700; line-height: 1.1; opacity: 0; transform: translateX(100px); transition: opacity 0.5s, transform 0.5s;}
.main-visual-slide .content .title small {display: block; font-size: 0.42em; font-weight: 500; color: var(--secondary); margin-bottom: 1em;}
.main-visual-slide .content .title span {display: block; font-family: var(--font-secondary); letter-spacing: 0.15em; text-transform: uppercase;}
.main-visual-slide.swiper-slide-active .content .title {opacity: 1; transform: translateX(0);}
.main-visual-slide.swiper-slide-active .main-visual-bg {transform: scale(1);}

.main-visual .slide-controls {position: absolute; bottom: 62px; right: 0; z-index: 50; width: 100%;}
.main-visual .slide-controls .wrapper {justify-content: flex-end;}
.main-visual-slide:nth-child(2) .content .title {text-align: right;}
.main-visual-slide:nth-child(3) .content {height: 100%; display: flex; flex-direction: column; justify-content: center;}


@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .main-visual-slide .content .title {font-size: 44px;}
}
@media screen and (max-width: 767px) {
  .main-visual-slide .content .title {font-size: 34px;}
  .main-visual .slide-controls {bottom: 37px;}
  .main-visual .slide-controls .wrapper {justify-content: space-between;}
  .fp-tableCell {padding-block: 80px 50px;}

  .main-visual-slide:nth-child(2) .main-visual-bg  {object-position: 38%;}
}


/* Product */
.mp-product-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: flex-end;}
.mp-product-item {position: relative;}
.mp-product-item-prod {padding: 30px; backdrop-filter: blur(10px); background: rgb(255,255,255,0.02); height: clamp(0px, 34vh, 325px); overflow: hidden;}
.mp-product-item-prod .title {font-size: 28px; font-weight: 600; line-height: 1.3; margin-bottom: 0.4em; display: block; text-transform: uppercase; font-family: var(--font-secondary);}
.mp-product-item-prod .desc {font-size: 14px; font-weight: 300; opacity: 0.7; display: block;}
.mp-product-item-prod .icon {position: absolute; top: 30px; right: 30px; width: 29px; height: 29px;}
.mp-product-item-prod .thumb {position: absolute; bottom: 0px; right: 30px; transition: transform .5s;}
.mp-product-item-prod.big-stick .thumb {bottom: 0; right: 40px;}
.mp-product-title .mp-section-head-2 {display: flex; flex-direction: column; align-items: flex-start; height: 100%;}
.mp-product-title .mp-section-desc {margin-bottom: 20px;}
.mp-product-title .banner {width: 100%; margin-top: auto;}
.mp-product-banner {display: flex; align-items: flex-end;}

@media (hover: hover) {
  .mp-product-item-prod:hover {}
  .mp-product-item-prod:hover .icon::after,
  .mp-product-item-prod:hover .icon::before {background: var(--primary);}
  .mp-product-item-prod:hover .thumb {transform: translate(0, 0) scale(1.1);}
}
@media screen and (max-width: 1399px) {
  .mp-product-item:has(.mp-section-head-2 ) {height: 100%;}

}
@media screen and (max-width: 767px) {
  .mp-product-title .mp-section-desc {margin-top: 1em;}
  .mp-product-grid {grid-template-columns: repeat(1,1fr);}
  .mp-product-item-prod .title {font-size: 22px;}
  .mp-product-item-prod {padding: 30px 20px;height: clamp(0px, 30vh, 200px);}
  .mp-product-item-prod .icon {top: 20px; right: 20px; width: 20px;height: 20px;}
  .mp-product-item-prod .thumb {width: 60%; right: 44px;}
}


/* Features */
.mp-features .fp-tableCell {padding: 0;}
.mp-features .container {padding-top: 200px;}
.mp-features .mp-section-head {position: relative; z-index: 1; width: 50%;}
.feature-slider {margin-top: -180px; z-index: 0;}
.feature-slider .feature-slider-controls {width: 100%; padding-block: 15px; border-top: 1px solid rgb(255,255,255,0.3);}
.feature-slider .feature-slider-controls .wrapper {justify-content: space-between;}
.feature-slider .buttons {position: absolute; top: 130px; right: 0; display: flex; z-index: 50; font-size: 18px; font-family: var(--font-secondary); font-weight: 700; text-transform: uppercase; align-items: center;}
.feature-slider .buttons button {transition: color .5s;}
.feature-slider .buttons button.active {color: var(--primary);}
.feature-slider .buttons i {width: 1px; height: 0.6em; background: white; opacity: 0.3; margin-inline: 1em;}

/* .feature-slide {overflow: hidden;} */
.feature-slide img {display: block; margin: 0 auto; transform: translate(0, 100px); opacity: 0; transition: .5s var(--cubic-pop1);}
.feature-slide.swiper-slide-active img {transform: translate(0); opacity: 1;}
.feature-slide .slogan {position: absolute; font-size: 36px; font-weight: 700; line-height: 1.3; transition: .5s var(--cubic-pop1); opacity: 0;}
.feature-slide .slogan span {display: block;}
.feature-slide .slogan strong {display: block; color: var(--secondary);}
.feature-slide .desc {position: absolute; color: #9b9b9b; line-height: 1.8; transition: .5s var(--cubic-pop1); opacity: 0;}
.feature-slide.swiper-slide-active .slogan {transform: translate(0)!important; opacity: 1; transition-delay: 0.2s;}
.feature-slide.swiper-slide-active .desc {transform: translate(0)!important; opacity: 1; transition-delay: 0.2s;}

.feature-slide.unique .slogan {bottom: 170px; left: 50px; transform: translateY(100px);}
.feature-slide.unique .slogan strong {margin-left: 3.7em;}
.feature-slide.unique .desc {top: 510px; right: 80px; transform: translateY(100px);}

.feature-slide.smart .slogan {bottom: 100px; left: 50px; transform: translateY(100px);}
.feature-slide.smart .desc {bottom: 100px;right: 80px; transform: translateY(100px);}

.feature-slide.smart img {margin-top: 230px;}

.feature-slider {overflow: visible;}
.feature-slide {overflow: visible;}
.feature-slide.easy img {max-width: none; margin-left: -77px;}
.feature-slide.easy .slogan {bottom: 170px}
.feature-slide.easy .desc {bottom: 60px;}
.feature-slide.easy .slogan strong {margin-left: 0;}

.mp-features .fp-content {display: flex; align-items: center; height: 100%;}
.mp-features:has(.smart.swiper-slide-active) .features-smart-bg {opacity: 1; transition-delay: .3s;}
.mp-features .features-smart-bg {position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0;; transition: opacity 1s 0s ease ;    background: no-repeat center / contain;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .mp-features .container {padding-top: 100px;}
  .mp-features .fp-tableCell {padding-top: 0;}
  .feature-slider .buttons {top: 0;}
  .feature-slider {margin-top: 0;}
  .feature-slide.easy img {max-width: 100%; margin-left: 0; min-height: 396px; object-fit: contain;}
  
  .feature-slide .slogan {position: static;; font-size: 28px; padding: 20px; padding-bottom: 0; text-align: center;}
  .feature-slide .slogan strong {margin: 0 !important;}
  .feature-slide .desc  {position: static; word-break: keep-all; width: 90%; padding: 10px 20px 20px; margin: 0 auto; text-align: center;}
  .feature-slide.smart img {margin-top: 120px;}
}
@media screen and (max-width: 767px) {
  .feature-slider {margin-top: 20px;}
  .feature-slider .buttons {font-size: 15px;}
  .feature-slide.easy img {min-height: 0;}
  .feature-slide .slogan {font-size: 23px; text-align: left; padding: 20px 10px; padding-bottom: 0;}
  .feature-slide .desc {width: 100%; padding: 20px 10px; text-align: left; font-size: 15px;}
  .mp-features .slide-controls .slide-paging {bottom: 25px;}
  .feature-slide.smart img {margin-top: 80px;}
  .mp-features .features-smart-bg {background-position-y: 41%;}
}


/* App */
.mp-app {}
.mp-app .fp-tableCell {padding: 0;}
.mp-app .fp-content {height: 100%;}
.mp-app .container {height: 100%; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; position: relative; padding-block: 200px 30px;}

.app-slider-nav {display: flex; gap: 5px; align-items: flex-end;}
.app-slider-button {width: 100%; padding: 20px; background: rgb(255,255,255,0.1); backdrop-filter: blur(10px); position: relative; text-align: left;  height: 133px; display: flex; align-items: flex-start; transition: background .5s, height .5s;}
.app-slider-button span {font-size: 18px; line-height: 1.3; transition: transform .5s; transform-origin: left;}
.app-slider-button img {position: absolute; width: 62px; bottom: 10px; right: 10px; transition: transform .5s; transform-origin: bottom right;}
.app-slider-button.active {background: var(--secondary); height: 162px;}
.app-slider-button.active span {transform: scale(1.2);}
.app-slider-button.active img {transform: scale(1.2);}

.app-slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.app-slider .swiper-slide {}
.app-slider .swiper-slide .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.app-slider .swiper-slide .bullets {}
.app-slider .swiper-slide .bullet {position: absolute; top: 50%; left: 50%;}
.app-slider .swiper-slide .bullet .radial {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; display: flex; align-items: center; justify-content: center;}
.app-slider .swiper-slide .bullet .radial img {display: block; animation: rotate 10s linear infinite;}
.app-slider .swiper-slide .bullet .radial::before {content: ''; position: absolute; width: 45%; height: 45%; border-radius: 50%; background: rgba(255, 255, 255, 0.4); z-index: -1;}

@keyframes rotate {
  to {transform: rotate(360deg);}
}
.app-slider .swiper-slide .bullet .core {width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--secondary); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.app-slider .swiper-slide .bullet .core .ico--plus {width: 20px; height: 20px;}
.app-slider .swiper-slide .bullet .core .ico--plus::after,
.app-slider .swiper-slide .bullet .core .ico--plus::before {background: black;}
.app-slider .swiper-slide .bullet .core .ico--plus::after {height: 2px;}
.app-slider .swiper-slide .bullet .core .ico--plus::before {width: 2px;}
.app-slider .swiper-slide .bullet .tag {position: absolute; width: 145px; height: 30px; border-radius: 15px; background: var(--secondary); color: black; padding-inline: 20px; font-weight: 700; display: flex; align-items: center; top: -66px; left: 72px;}
.app-slider .swiper-slide .bullet .tag .line {position: absolute; background: var(--secondary); height: 1px;}
.app-slider .swiper-slide .bullet .tag .line-1 {top: 50%; right: 100%; width: 18px;}
.app-slider .swiper-slide .bullet .tag .line-2 {top: 0; right: 100%; transform-origin: right; transform: rotate(-45deg); width: 60px;}


.app-slider .electron-car .bullet .radial::before {background: rgba(0, 0, 0, 0.4);}
.app-slider .electron-car .bullet:nth-child(1) {transform: translate(-40vw, -20px);}
.app-slider .electron-car .bullet:nth-child(2) {transform: translate(-10vw, 20px);}
.app-slider .electron-car .bullet:nth-child(3) {transform: translate(12vw, 22vh);}

.app-slider .ups .bullet .radial::before {background: rgba(0, 0, 0, 0.5);}
.app-slider .ups .bullet:nth-child(1) {transform: translate(-12vw, 4vh);}
.app-slider .ups .bullet:nth-child(2) {transform: translate(24vw, -11vh);}

.app-slider .market .bullet:nth-child(1) {transform: translate(-25vw, 7vh);}
.app-slider .market .bullet:nth-child(2) {transform: translate(10vw, -15vh);}

.app-slider .hospital .bullet:nth-child(1) {transform: translate(0vw, 7vh);}
.app-slider .hospital .bullet:nth-child(2) {transform: translate(27vw, -8vh);}

.app-slider .plant .bullet {transform: translate(-25vw, -5vh);}
.app-slider .ess .bullet {transform: translate(30vw, -5vh);}


@media (hover: hover) {}
@media screen and (max-width: 1799px) { 
  /* .app-slider .electron-car .bullet:nth-child(1) {transform: translate(-25vw, -20px);} */

}
@media screen and (max-width: 1399px) {
  .app-slider-nav {display: grid; grid-template-columns: repeat(3,1fr);}
  .app-slider-button {height: 90px;}
  .app-slider-button span {font-size: 15px;}
  .app-slider-button.active {height: 90px;}
  .mp-app .container {padding-block: 100px 30px;}
  .app-slider-button img {width: 50px;}

  .app-slider .electron-car .bg {object-position: 43%;}
  .app-slider .ups .bg {object-position: 40%;}
  .app-slider .market .bg {object-position: 40%;}
  .app-slider .hospital .bg {object-position: 70%;}
  .app-slider .plant .bg {object-position: 50%;}
  .app-slider .ess .bg {object-position: 79%}


  .app-slider .electron-car .bullet:nth-child(3) {transform: translate(12vw,18vh);}
  .app-slider .ess .bullet:nth-child(1) {transform: translate(9vw, -5vh);}
}
@media screen and (max-width: 767px) {
  .mp-app .container {padding-block: 80px 30px;}
  .app-slider-button {padding: 12px; height: 60px;}
  .app-slider-button.active {height: 60px;}
  .app-slider-button span {font-size: 14px;}
  .app-slider-button img {display: none;}
  .app-slider-button.active span {transform: scale(1.1);}

  .app-slider .swiper-slide .bullet .radial {width: 70px; height: 70px;}
  .app-slider .swiper-slide .bullet .core {width: 20px;height: 20px;}
  .app-slider .swiper-slide .bullet .core .ico--plus {width: 10px;height: 10px;}
  .app-slider .swiper-slide .bullet .tag {font-size: 13px; padding-inline: 15px; width: 110px; top: -42px; left: 37px;}
  .app-slider .swiper-slide .bullet .tag .line-1 {width: 10px;}
  .app-slider .swiper-slide .bullet .tag .line-2 {width: 30px;}

  .app-slider .electron-car .bg {object-position: 40%;}
  .app-slider .ups .bg {object-position: 40%;}
  .app-slider .market .bg {object-position: 40%;}
  .app-slider .hospital .bg {object-position: 80%;}
  .app-slider .plant .bg {object-position: 59%;}
  
  .app-slider .electron-car .bullet:nth-child(3) {transform: translate(16vw , 20vh);}
  .app-slider .hospital .bullet:nth-child(1) {transform: translate(-33vw, 7vh);}
  .app-slider .hospital .bullet:nth-child(2) {transform: translate(2vw, -8vh);}
  .app-slider .plant .bullet:nth-child(1) {transform: translate(-25vw, -8vh);}
  .app-slider .ess .bullet:nth-child(1) {transform: translate(9vw, -5vh);}
}


/* Customer */
.mp-customer {}
.mp-customer .mp-section-head {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; margin-bottom: 80px; padding-inline: var(--indent); gap: 20px;}
.mp-customer .mp-section-head .mp-section-desc {margin-top: 0;}

.mp-customer-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; min-height: 474px;}
.mp-customer-item {padding: 30px; position: relative; overflow: hidden;}
.mp-customer-item .title {font-size: 32px; font-weight: 700; line-height: 1.3; margin-bottom: 0.3em; display: block;}
.mp-customer-item .btn-more {display: flex; justify-content: space-between; width: 123px; height: 34px; border-radius: 17px; padding-inline: 1em; font-size: 15px; font-weight: 700; line-height: 1; align-items: center; background: white; color: var(--secondary);}
.mp-customer-item .btn-more i {font-style: normal;}

.mp-customer-item.mp-news {grid-row: span 2; background: white; color: black; padding-block: 40px;}
.mp-customer-item.mp-news .btn-more {border: 1px solid black; color: black; position: absolute; top: 30px; right: 30px;}
.mp-customer-item.mp-news .head {margin-bottom: 45px;}
.latest-news {border-top: 2px solid #5c5c5c;}
.latest-news > li {}
.latest-news > li > a {display: grid; grid-template-columns: 60px 1fr 150px; align-items: center; gap: 10px; padding-block: 18px; border-bottom: 1px solid #9c9c9c; line-height: 1;}
.latest-news > li > a .tag {font-size: 14px; color: #1aba9e; font-weight: 700; text-transform: uppercase; font-family: var(--font-secondary);}
.latest-news > li > a .tit {font-size: 20px;}
.latest-news > li > a .date {font-family: var(--font-secondary); font-size: 14px; color: #5c5c5c; text-align: right;}

.mp-customer-banner {display: flex; flex-direction: column;}
.mp-customer-banner .btn-more {margin-top: auto;}
.mp-customer-banner * {position: relative; z-index: 1;}
.mp-customer-banner img {position: absolute; bottom: 0; right: 0; z-index: 0;}
.mp-customer-banner.pr {background: var(--secondary);}
.mp-customer-banner.inq {background: #cacaca;}
.mp-customer-banner.inq .btn-more {background: black; color: white;}
.mp-customer-banner.inq .title {color:#333;}
.mp-customer-banner.inq .desc {color:#333;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .mp-customer .mp-section-head {grid-template-columns: repeat(1,1fr); margin-bottom: 50px;}
  .mp-customer-grid {grid-template-columns: repeat(1,1fr); min-height: 0;}
  .mp-customer-item .title {font-size: 26px;}
  .mp-customer-item.mp-news {padding-block: 30px;}
  .latest-news > li > a .tit {font-size: 16px;}
  .mp-customer-banner .btn-more {margin-top: 20px;}
}
@media screen and (max-width: 767px) {
  .mp-customer-item .title {font-size: 21px;}
  .mp-customer-item.mp-news .btn-more {position: static; margin-top: 15px;}
  .mp-customer-item.mp-news {padding: 30px 20px;}
  .latest-news > li > a { grid-template-columns: repeat(1,1fr);}
  .mp-customer-banner img {width: 50%;}
  .mp-customer-item {padding: 22px 20px;}
}


/* Foot */
.mp-footer .fp-tableCell {padding-block: 0;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}