@font-face{
    font-family:"GlobalProRegular"; 
    src: url("BMWTypeNext-Global-Pro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}  
@font-face{
    font-family:"GlobalProLight"; 
    src: url("BMWTypeNext-Global-Pro-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}  
@font-face{
    font-family:"GlobalProBold"; 
    src: url("BMWTypeNext-Global-Pro-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}  
:root {
    --vh: 1vh;
}
*{ margin: 0;  padding: 0;list-style: none; border: none; font-family:"GlobalProRegular", 'Heiti SC','SimHei','Microsoft YaHei',Arial,Helvetica,sans-serif!important;  vertical-align: baseline;
    -webkit-tap-highlight-color:transparent; -webkit-appearance: none; outline:none;border-radius: 0;font-weight: normal; }
:focus { outline: none; }
a {line-height:1;margin:0; outline:none;outline-offset:0;box-shadow:none;text-decoration: none!important;display: inline-block;
    -webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
img{width:100%;height: auto;display: inline-block; -webkit-user-drag: auto;}
canvas{width: 100%;height: 100%;}
html{ font-size: 10px;} 
@media only screen and (min-width: 320px){
    html {
        font-size: 8px;
    }
}
@media only screen and (min-width: 375px){
    html {
        font-size: 10px;
    }
}  
@media only screen and (min-width: 414px){
    html {
        font-size: 11px;
    }
}  
@media only screen and (min-width: 818px){
    html {
        font-size: 12px;
    }
}  
@media only screen and (min-aspect-ratio:375/620) and (max-width: 750px) {
    html  {
       font-size: 8px;
   }
}
html,body{position: relative;width: 100%; height: 100%;overflow: hidden;background: #000;}

.outterwrap,.main,.stage{position: relative;width: 100%; height: 100%; overflow: hidden;margin: 0 auto;font-size: 14px;font-size: 1.4rem;line-height: 1.2;} 

.stage{max-width:  calc((750 / 1200 * var(--vh) * 100));}

.loading{position: absolute;width: 100%; height: 100%;left:50%;top:0;transform: translateX(-50%);background: #000;z-index: 999;}
.loading .load-icon{position: absolute; width:36px;height: 36px;left:calc(50% - 18px);top:calc(50% - 18px); background:url(p-load.png) no-repeat center / contain;animation: animLoad 2s linear 0s infinite normal;}
.loading .load-num{position: absolute;left: 0;top:calc(50% + 30px); width: 100%;font-size: 1.4rem; text-align: center; color:#fff;font-family:'Heiti SC','SimHei','Microsoft YaHei'!important;}
.loading .load-num span{font-size: 1.4rem;color:#fff;font-family:'Heiti SC','SimHei','Microsoft YaHei'!important;}
  
.cssuesimg{width: 0;height: 0;position: absolute;left: -100%;top: -100%;z-index: -10;}
.cssuesimg img{width: 0;height: 0;}
 
.img-fit{position: relative; width: 100%;height: 100%;object-position:center;object-fit: contain;}
.img-fill{position: relative; width: 100%;height: 100%;object-position:center;object-fit: cover;}
 
.sectionBase{position: relative;width: 100%; height: 100%;}
.part{position: absolute;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;}
.part .content{position: absolute;width: 100%;height: 100%;left: 0;bottom: 0;}
.part .content .btnForm{ background: #fff;color: #000;padding:0.5rem 1.4rem;font-size: 1.5rem;line-height: 1.2;font-weight: normal;letter-spacing: 0.4rem;border-radius: 0.6rem;font-family:'GlobalProRegular'!important; }
.part .content .btnOrder{ background: #ececec;color: #000;padding:0.5rem 1.4rem;font-size: 1.5rem;line-height: 1.2;font-weight: normal;letter-spacing: 0.4rem;border-radius: 0.6rem;font-family:'GlobalProRegular'!important; }
 
.part3{display: ;}
.part3 .content{position: absolute;height: calc(100% - 62px);display: flex;flex-direction: column; justify-content: center; background:;}
.part3 .content .pheader{opacity: 1; position: relative;width: 100%;height: 30%;padding:0 9%;box-sizing: border-box;display: flex;flex-direction: column; justify-content: space-between; background: rgba(0,0,0,0);}/*1624*.3=487.2*/
.part3 .content .pcards{opacity: 1;position: relative;width: 100%;height: 56.5%;margin-top:6%;perspective: 1000px;background: rgba(0,0,0,0);}/*1624*.6=974.4*/
.part3 .content .toBack{position: absolute;right: 0;bottom: 5%;padding: 0.5rem 1rem 2rem 1rem;background: #fff;border-radius: 0.8rem 0 0 0.8rem;font-size: 1.2rem;box-shadow: 0.2rem 0.2rem 0.4rem rgba(0,0,0,0.2);background:#fff url(pi-back.png) no-repeat center / contain;background-size: 1rem;/* background-position: center calc(100% - 0.6rem); */}
.part3 .content .toBack{display: none;}
.part3 .pcards.activeC1 + .toBack,
.part3 .pcards.activeC2 + .toBack,
.part3 .pcards.activeC3 + .toBack,
.part3 .pcards.activeC4 + .toBack,
.part3 .pcards.activeC5 + .toBack{display: block;}
.part3.cssapp .content{height: 100%;}

.part3 .content .btnForm{ box-shadow: 0.2rem 0.4rem 0.5rem rgba(0,0,0,0.2);} 
.part3 .content .btnOrder{ background: #ececec;color: #000;box-shadow: 0.2rem 0.4rem 0.5rem rgba(0,0,0,0.2);}

.part3 .content > p{position: absolute;bottom:2%;left:9.5%; font-size: 1rem;line-height: 1;transform: scale(0.8); transform-origin: center left;}
.part3 .content .pheader .hcon{ position: relative;height: 34%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.part3 .content .pheader .hcon .the{width: calc((355 / 1500 * var(--vh) * 100));height:100%;}
.part3 .content .pheader .hcon .buttons{height:100%; display: flex;flex-direction: column;justify-content:space-evenly;}
.part3 .content .pheader .hcon .buttons .btnForm{background: #7bfe00;}
.part3 .content .pheader .cars{position: relative;width:100%;height: calc(66% - 2rem);}
.part3 .content .pheader .cars .car360{ position: absolute;width: calc((750 / 1500 * var(--vh) * 100));height: calc((312 / 1500 * var(--vh) * 100));left: 50%;top: 50%; transform:translate(-50%,-50%) scale(0.7);transform-origin: center 70%; }
.part3 .content .pheader .cars .car360 canvas{object-position:center;object-fit: contain;}
.part3 .content .pheader .cars .icon360{ position: absolute; right: 3rem;top: 1rem;width: 2.8rem;height: 2.8rem;background: url(p3-i360.png) no-repeat center top / contain; }
.part3 .content .pheader .title{ font-size: 1.2rem;line-height: 1;text-align: center; }

.part3 .content .pcards .cards3d{position: absolute;width: 100%;height: 100%;left: 0;top: 0;transform-style: preserve-3d;transition: transform .05s linear; }
.part3 .content .pcards .card{position: absolute;background: #fff;border-radius: 2rem;box-sizing: border-box;box-shadow: 0.2rem 0.6rem 1rem rgba(0,0,0,0.2);transition: all 0.5s cubic-bezier(0,0,0.58,1);overflow: hidden;}
.part3 .content .pcards .card1{left:9%;top:0%;width:82%;height: 39%;}
.part3 .content .pcards .card2{left:9%;top:41%;width:53%;height: 18.6%;}
.part3 .content .pcards .card3{left:9%;top:61%;width:53%;height: 18.6%;}
.part3 .content .pcards .card4{left:9%;top:81%;width:53%;height: 18.6%;}
.part3 .content .pcards .card5{right:9%;top:41%;width:27%;height:59%;}

.part3 .content .pcards .card .green{opacity: 1; position: absolute;width: 100%;height: 100%;left: 0;top:0;overflow: hidden;transition: opacity 0.5s; }  
.part3 .content .pcards .card .green .gmask{display: none; position: absolute;width: 120vw;height: 120vw;left: 50%;top:50%;background: #fff; transform:rotate(60deg) translate(-50%,-50%); transform-origin: left top; transition: all 0.5s ease-out;} 
.part3 .content .pcards .card .green .gmask.animgreen{left: 120vw;top:150vw;} 
.part3 .content .pcards .card .green .gline{position: absolute;width: 100vw;height: 100vw;left: 50%;top:50%;background-color: #7bfe00;transform-origin: left top;transition: all 0.5s;} 
.part3 .content .pcards .card .green .gline1{ transform: rotate(60deg) translate(-50%,80%); }
.part3 .content .pcards .card .green .gline2{ transform: rotate(60deg) translate(-50%,-160%); }

.part3 .content .pcards .card .cont-icons{ opacity: 0; position: absolute;width: 100%;height: 100%;left: 0;top:0;transition: opacity 0.5s; }
.part3 .content .pcards .card .cont-icons .cflex{ width: 100%;height: 100%; display: flex;flex-direction: row;align-items: center;justify-content: center;}
.part3 .content .pcards .card .cont-icons .cflex .iconline{width: 10vw;margin:0 0.1rem;}
.part3 .content .pcards .card .cont-icons .cflex .txt{font-size: 1.2rem;margin:0 0.1rem;} 

.part3 .content .pcards .card .cont-default{ opacity: 1; position: absolute;width: 100%;height: 100%;left: 0;top:0;overflow: hidden;border-radius: 2rem; transition: opacity 0.5s;}
.part3 .content .pcards .card .cont-default .ctip{position: absolute;width: auto; right: 11%;top:74%;font-size:1rem;transform: scale(0.6);transform-origin: center right;z-index: 5; }
.part3 .content .pcards.activeC4 .card .cont-default .ctip{display: none; }
.part3 .content .pcards .card .cont-default .ctitle{position: absolute;left: 5%;top:5%;font-size: 1.4rem;line-height: 1.4;}
.part3 .content .pcards .card .cont-default .ctitle span{display: none;}
.part3 .content .pcards .card .cont-default .ctitle .btmbd{position: relative; width: 100%;height: 1px;margin-top:0.3rem;background: #2c50a8;}
.part3 .content .pcards .card .cont-default .ctitle .btmbd::after{content: "";position: absolute;left: -1px;top:-1px;width: 2.0rem;height: 3px;background: #7bfe00;border-left: 2px solid #fff;border-right: 2px solid #fff;transform: skewX(30deg);}
.part3 .content .pcards .card .cont-default .cpic{display: block; position: absolute;width: 100%;height: 100%;left: 0;top:0;transform: scale(1.2); }
.part3 .content .pcards .card .cont-default .cpic img{ transition: all 0.5s; }

.part3 .content .pcards .card .cont-default .cdetail{display: none; position: absolute;width: 88%;height:calc(90% - 3.8rem);left:6%;bottom:5%;z-index: 2; }
.part3 .content .pcards .card .cont-default .cdetail .dflex{position: absolute;width: 100%;height: 100%;left: 0;top:0;display: flex;flex-direction: row;flex-wrap: wrap;align-items: flex-start;justify-content: space-between;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem{width: calc(50% - 0.5rem);height: calc(33.3% - 1rem);border-radius: 1rem;box-shadow: 0rem 0.5rem 0.5rem rgba(0,0,0,0.2); box-sizing: border-box; overflow: hidden; position: relative;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem img{position: relative; width: 100%;height: 100%;object-position:center;object-fit: cover;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem_col1{width: 100%;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem_row1{width: 100%;height: 80%;margin-top:10%;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem .btnplay{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 4.6rem;height: 4.6rem;background: url(p3-play.png) no-repeat center / contain;}
.part3 .content .pcards .card .cont-default .cdetail .dflex .ditem .txt{position: absolute;left: 0;bottom: 0;font-size: 1rem;padding:0.4rem 1.2rem;line-height: 1.2; background: linear-gradient(to right,#7bfe00,#fff);border-radius: 0 1rem 0 0;}

.part3 .content .pcards.toggle .card .cont-default .ctitle{left: 6%;top:5%;width: auto; }
.part3 .content .pcards.toggle .card5 .cont-default .ctitle .btmbd::after{ border-color: #fff;background: #7bfe00;  }

.part3 .content .pcards .card1 .cont-default .ctitle{left: 8%;top:10%;}
.part3 .content .pcards .card1 .cont-default .cpic{width: 66%;height: 58%;left: 25%;top: 30%;} 
.part3 .content .pcards .card2 .cont-default .ctitle{ left: 32%;top:10%;}
.part3 .content .pcards .card2 .cont-default .ctitle .btmbd::after{ left:calc(50% - 1rem);width: 2.6rem; }
.part3 .content .pcards .card2 .cont-default .cpic{width: 110%;height:116%;left:-5%;top:-8%;}
.part3 .content .pcards .card3 .cont-default .ctitle{left: 8%;top:15%;}
.part3 .content .pcards .card3 .cont-default .ctitle .btmbd::after{ left:calc(58% );  }
.part3 .content .pcards .card3 .cont-default .cpic{width: 48%;height: 100%;left: 52%;top: 10%;}
.part3 .content .pcards .card3 .cont-default .cpic img{object-position: right bottom;}
.part3 .content .pcards .card4 .green{z-index: 5;}
.part3 .content .pcards.activeC4 .card4 .green{z-index: 0;} 
.part3 .content .pcards .card4 .cont-default .ctitle{width: calc(1.4rem * 4); left: 62%;top:10%;z-index: 10;}
.part3 .content .pcards .card4 .cont-default .ctitle .btmbd::after{ left:calc(100% - 2.4rem);border-color: #7bfe00;background: #fff;  }
.part3 .content .pcards .card4 .cont-default .cpic{width: 74%;height:118%;left:-10%;top: -4%;}
.part3 .content .pcards .card4 .cont-default .cpic img{object-position: left center;}
.part3 .content .pcards .card5 .cont-default .ctitle{width: calc(1.4rem * 4); left: 10%;top:75%; }
.part3 .content .pcards .card5 .cont-default .ctitle .btmbd::after{ left:calc(100% - 2.4rem);border-color: #7bfe00;background: #fff;  }
.part3 .content .pcards .card5 .cont-default .cpic{width: 80%;height:62%;left:24%;top:4%;}
.part3 .content .pcards .card5 .cont-default .cpic img{object-position: top right;}

.part3 .content .pcards.activeC5 .card5 .cont-default{display: block;}
.part3 .content .pcards.activeC5 .card5 .cont-default .cpic{display: none;}
.part3 .content .pcards.activeC5 .card5 .cont-default .cdetail{display: block;}

.part3 .content .pcards.cardInit .card1 .green .gline1{ transform: rotate(60deg) translate(-50%,34%); }
.part3 .content .pcards.cardInit .card1 .green .gline2{ transform: rotate(60deg) translate(-50%,-120%); }
.part3 .content .pcards.cardInit .card2 .green .gline1{ transform: rotate(60deg) translate(-50%,5%); }
.part3 .content .pcards.cardInit .card3 .green .gline2{ transform: rotate(60deg) translate(-50%,-118%); }
.part3 .content .pcards.cardInit .card4 .green .gline2{ transform: rotate(60deg) translate(-50%,-100%); }
.part3 .content .pcards.cardInit .card5 .green .gline1{ transform: rotate(60deg) translate(-50%,3%); }

.part3 .content .pcards.activeC1 .card1 .green .gline1,
.part3 .content .pcards.activeC2 .card2 .green .gline1,
.part3 .content .pcards.activeC3 .card3 .green .gline1,
.part3 .content .pcards.activeC4 .card4 .green .gline1,
.part3 .content .pcards.activeC5 .card5 .green .gline1{ transform: rotate(60deg) translate(-50%,35%); }

.part3 .content .pcards.activeC1 .card1 .green .gline2,
.part3 .content .pcards.activeC2 .card2 .green .gline2,
.part3 .content .pcards.activeC3 .card3 .green .gline2,
.part3 .content .pcards.activeC4 .card4 .green .gline2,
.part3 .content .pcards.activeC5 .card5 .green .gline2{ transform: rotate(60deg) translate(-50%,-135%); }

.part3 .content .pcards.activeC1 .card .green,
.part3 .content .pcards.activeC2 .card .green,
.part3 .content .pcards.activeC3 .card .green,
.part3 .content .pcards.activeC4 .card .green,
.part3 .content .pcards.activeC5 .card .green{ opacity: 0; } 
.part3 .content .pcards.activeC1 .card .cont-icons,
.part3 .content .pcards.activeC2 .card .cont-icons,
.part3 .content .pcards.activeC3 .card .cont-icons,
.part3 .content .pcards.activeC4 .card .cont-icons,
.part3 .content .pcards.activeC5 .card .cont-icons{ opacity: 1;z-index: 2; } 
.part3 .content .pcards.activeC1 .card .cont-default,
.part3 .content .pcards.activeC2 .card .cont-default,
.part3 .content .pcards.activeC3 .card .cont-default,
.part3 .content .pcards.activeC4 .card .cont-default,
.part3 .content .pcards.activeC5 .card .cont-default{ opacity: 0;z-index: 1; } 
.part3 .content .pcards.activeC1 .card .cont-default .cpic,
.part3 .content .pcards.activeC2 .card .cont-default .cpic,
.part3 .content .pcards.activeC3 .card .cont-default .cpic,
.part3 .content .pcards.activeC4 .card .cont-default .cpic,
.part3 .content .pcards.activeC5 .card .cont-default .cpic{display: none; } 
.part3 .content .pcards.activeC1 .card .cont-default .cdetail,
.part3 .content .pcards.activeC2 .card .cont-default .cdetail,
.part3 .content .pcards.activeC3 .card .cont-default .cdetail,
.part3 .content .pcards.activeC4 .card .cont-default .cdetail,
.part3 .content .pcards.activeC5 .card .cont-default .cdetail{ display: none; } 

.part3 .content .pcards.activeC1 .card1 .green,
.part3 .content .pcards.activeC2 .card2 .green,
.part3 .content .pcards.activeC3 .card3 .green,
.part3 .content .pcards.activeC4 .card4 .green,
.part3 .content .pcards.activeC5 .card5 .green{opacity: 1;}
.part3 .content .pcards.activeC1 .card1 .cont-icons,
.part3 .content .pcards.activeC2 .card2 .cont-icons,
.part3 .content .pcards.activeC3 .card3 .cont-icons,
.part3 .content .pcards.activeC4 .card4 .cont-icons,
.part3 .content .pcards.activeC5 .card5 .cont-icons{ opacity: 0;z-index: 1; } 
.part3 .content .pcards.activeC1 .card1 .cont-default,
.part3 .content .pcards.activeC2 .card2 .cont-default,
.part3 .content .pcards.activeC3 .card3 .cont-default,
.part3 .content .pcards.activeC4 .card4 .cont-default,
.part3 .content .pcards.activeC5 .card5 .cont-default{opacity: 1;z-index: 2;} 
.part3 .content .pcards.activeC1 .card1 .cont-default .cpic,
.part3 .content .pcards.activeC2 .card2 .cont-default .cpic,
.part3 .content .pcards.activeC3 .card3 .cont-default .cpic,
.part3 .content .pcards.activeC4 .card4 .cont-default .cpic,
.part3 .content .pcards.activeC5 .card5 .cont-default .cpic{display: none;}
.part3 .content .pcards.activeC1 .card1 .cont-default .cdetail,
.part3 .content .pcards.activeC2 .card2 .cont-default .cdetail,
.part3 .content .pcards.activeC3 .card3 .cont-default .cdetail,
.part3 .content .pcards.activeC4 .card4 .cont-default .cdetail,
.part3 .content .pcards.activeC5 .card5 .cont-default .cdetail{ display: block;}
.part3 .content .pcards.activeC1 .card1 .cont-default .ctitle,
.part3 .content .pcards.activeC2 .card2 .cont-default .ctitle,
.part3 .content .pcards.activeC3 .card3 .cont-default .ctitle,
.part3 .content .pcards.activeC4 .card4 .cont-default .ctitle,
.part3 .content .pcards.activeC5 .card5 .cont-default .ctitle{left: 6%;top:5%;width: auto; }
.part3 .content .pcards.activeC4 .card4 .cont-default .ctitle .btmbd::after{ border-color: #fff;background: #7bfe00;  }
.part3 .content .pcards.activeC5 .card5 .cont-default .ctitle .btmbd::after{left: calc(50% - 2.4rem);border-color: #fff;background: #7bfe00;}
.part3 .content .pcards.activeC2 .card2 .cont-default .ctitle span,
.part3 .content .pcards.activeC4 .card4 .cont-default .ctitle span,
.part3 .content .pcards.activeC5 .card5 .cont-default .ctitle span{display: inline-block;}

/* .part3 .content .pcards.activeC .card1{width:;height:;}
.part3 .content .pcards.activeC .card2{top:0%;width:;height:;}
.part3 .content .pcards.activeC .card3{left:;top:;width:;height:;}
.part3 .content .pcards.activeC .card4{left:;top:;width:;height:;}
.part3 .content .pcards.activeC .card5{top:;width:;height:;} */

.part3 .content .pcards.activeC1 .card1{width:82%;height:67%;}
.part3 .content .pcards.activeC1 .card2{top:68.5%;width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC1 .card3{left:9%;top:85%;width:50%;height:14.8%;}
.part3 .content .pcards.activeC1 .card4{left:61%;top:85%;width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC1 .card5{top:68.5%;width:50%;height:14.8%;}
 

.part3 .content .pcards.activeC2 .card1{width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC2 .card2{left: 9%; top: 16.5%;width: 82%; height: 67%;}
.part3 .content .pcards.activeC2 .card3{left:9%;top:85%;width:50%;height:14.8%;}
.part3 .content .pcards.activeC2 .card4{left:61%;top:85%;width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC2 .card5{top:0%;width:50%;height:14.8%;}  


.part3 .content .pcards.activeC3 .card1{width:26.5%;height:15%;}
.part3 .content .pcards.activeC3 .card2{left: 37.25%; top: 0%;width: 26.5%; height: 15%;}
.part3 .content .pcards.activeC3 .card3{left: 9%; top: 16.5%;width: 82%; height: 67%;}
.part3 .content .pcards.activeC3 .card4{left:9%;top:85%;width:82%;height:15%;}
.part3 .content .pcards.activeC3 .card5{top:0%;width:25%;height:15%;}

.part3 .content .pcards.activeC4 .card1{width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC4 .card2{left:9%;top:16.5%;width:50%;height:14.8%;}
.part3 .content .pcards.activeC4 .card3{left:61%;top:16.5%;width:29.8%;height:14.8%;}
.part3 .content .pcards.activeC4 .card4{left: 9%; top:33%;width: 82%; height: 67%;}
.part3 .content .pcards.activeC4 .card5{top:0%;width:50%;height:14.8%;}

.part3 .content .pcards.activeC5 .card1{width:82%;height:15%;}
.part3 .content .pcards.activeC5 .card2{left: 9%;top:85%; width:26.5%;height:15%;}
.part3 .content .pcards.activeC5 .card3{left:37.25%;top:85%;width: 26.5%; height: 15%;}
.part3 .content .pcards.activeC5 .card4{left:65.8%;top:85%;width:25%;height:15%;}
.part3 .content .pcards.activeC5 .card5{top: 16.5%;width: 82%; height: 67%;}


/* --------swiper------- */
.popCard{display: ;}
.popCard .bglayer{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.popCard .bglayer .head{position: absolute;left: 0;top: 5%;width: 100%;height: 10.5%;padding:0 7%;box-sizing: border-box;display: flex;flex-direction: column; justify-content: space-between;}
.popCard .bglayer .head .hcon{ position: relative;height: 100%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.popCard .bglayer .head .hcon .the{width: calc((355 / 1500 * var(--vh) * 100));height:100%;}
.popCard .bglayer .head .hcon .buttons{height:100%; display: flex;flex-direction: column;justify-content:space-evenly;}
.popCard .bglayer .head .hcon .buttons .btnForm{background: #7bfe00;}
.popCard .bglayer .head .hcon .buttons .btnOrder{ background: #ececec;color: #000;}
.popCard .bglayer .btnTomore{position: absolute;left: 50%;bottom:6%;transform: translateX(-50%); background: #7bfe00;color: #000;padding:0.6rem 1.2rem;font-size: 1.4rem;letter-spacing: 0.3rem;font-weight: normal;border-radius: 0.6rem;font-family:'GlobalProRegular'!important;}
.popCard .bglayer .inners{position: absolute; width: 100%;height:calc((967 / 1500 * var(--vh) * 100));left: 0;top:calc((280 / 1500 * var(--vh) * 100)); background: rgba(255,255,255,0); }
.popCard .bglayer .inners .title{position: absolute;width: calc((670 / 1500 * var(--vh) * 100));width: auto;padding-right: 4rem; height: calc((75 / 1500 * var(--vh) * 100));left: 7%;top: 2rem; font-size: 1.4rem;line-height: 2; color: #fff; background:linear-gradient(to right,transparent 0%,#7bfe00 93%,transparent 93% , transparent 93.9%, #7bfe00 93%, #7bfe00 97%, transparent 97%,transparent 97.9%, #7bfe00 98%, #7bfe00 100%); }
.popCard .bglayer .inners .title span{display: inline-block;position: relative;}
.popCard .bglayer .inners .title span:before{content: "";position: absolute;left: 0;top: 100%;width: 4rem;height: 2px;background: #7bfe00;}
.popCard .bglayer .inners .title span:after{content: "";position: absolute;left: 4.2rem;top: calc(100% + 1px);width: calc(100% - 4.2rem);height: 1px;background: #fff;}
.popCard .bglayer .inners .text{position: absolute; width: 98%; left: 1%;font-size: 1.0rem;line-height: 1.6; bottom: 1rem; color: #fff;text-align: center;}
.popCard .bglayer .inners .text .tip{font-size: 1rem;transform: scale(0.6);width: 130%;margin-left: -13%;transform-origin: center;}

.popCard .swiper{position: absolute; width: 100%;height:calc((967 / 1500 * var(--vh) * 100));left: 0;top:calc((280 / 1500 * var(--vh) * 100)); background: rgba(255,255,255,0);overflow: visible;}
.popCard .swiper .swiper-wrapper{width:calc(194vw * 4 + 100vw + 5vw * 3 + 100vw); height: 100%;overflow: hidden;}
.popCard .swiper .slide-inner{ width: 194vw;height: 100%;margin:0;margin-right:5vw; display: flex;flex-direction: row;position: relative; }
.popCard .swiper .slide-inner .list{position: relative;width: 100%; height: 100%; overflow: hidden;border-radius: 0;  }
.popCard .swiper .slide-inner:first-of-type{margin: 0;width: 100vw;} 
.popCard .swiper .slide-inner:last-of-type{margin: 0;width: 100vw;} 
.popCard .swiper .slide-inner .list .maskcolors{position: absolute; width: 100%;height: 50%;left: 0;bottom: 0;background: linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0));}
.popCard .swiper .slide-inner .list .context{position: absolute; left:0;top:0; width: 100%;height: 100%;}
.popCard .swiper .slide-inner .list .context .title{position: absolute;width: auto;height: calc((75 / 1500 * var(--vh) * 100));padding-right: 5rem;left: 50%;top: 2rem; transform: translateX(-50%); font-size: 1.4rem;line-height: 2; color: #fff; background:linear-gradient(to right,transparent 0%,#7bfe00 93%,transparent 93% , transparent 93.9%, #7bfe00 93%, #7bfe00 97%, transparent 97%,transparent 97.9%, #7bfe00 98%, #7bfe00 100%); }
.popCard .swiper .slide-inner .list .context .title span{display: inline-block;position: relative;}
.popCard .swiper .slide-inner .list .context .title span:before{content: "";position: absolute;left: 0;top: 100%;width: 4rem;height: 2px;background: #7bfe00;}
.popCard .swiper .slide-inner .list .context .title span:after{content: "";position: absolute;left: 4.2rem;top: calc(100% + 1px);width: calc(100% - 4.2rem);height: 1px;background: #fff;}

.popCard .swiper .slide-inner .list .context .text{position: absolute; width: 96vw; left: calc(50% - 48vw);font-size: 1.0rem;line-height: 1.6; bottom: 2rem; color: #fff;text-align: center;}
.popCard .swiper .slide-inner .list .context .text .tip{ font-size: 1rem; transform: scale(0.7); transform-origin: center bottom;}
.popCard .swiper .swiper-scrollbar{display: none;} 
.popCard .swiper .swiper-pagination{bottom:-3rem; } 
.popCard .swiper .swiper-pagination .swiper-pagination-bullet{background: #808282;margin:0 2vw;opacity: 1;width: 0.6rem;height: 0.6rem;}
.popCard .swiper .swiper-pagination .swiper-pagination-bullet:first-of-type{display: ;}
.popCard .swiper .swiper-pagination .swiper-pagination-bullet:last-of-type{display: none;}
.popCard .swiper .swiper-pagination .swiper-pagination-bullet-active{background: #22fa46;} 
.popCard .popClose{position: absolute; width: 2.2rem;height: 2.2rem;top: 1rem;right: 1rem;background: url(pi-close.png) no-repeat center / cover;z-index: 10;}

.part9{display: ;background: url(p1-bgc.jpg) no-repeat center / cover;z-index: 15;}
.part9 .content{ height: 100%;overflow-y: auto; }
.part9 .content .title{width: 80%; font-size: 2.2rem;line-height: 1.2;color:#000;margin:0 auto; margin-top: calc(100 / 1500 * var(--vh) * 100);margin-bottom: calc(20 / 1500 * var(--vh) * 100);font-family: "GlobalProRegular"!important;}
.part9 .content .title span{display: inline-block;font-size: 1.6rem;line-height: 1.2;}
.part9 .content .formWrap{width: 80%;height: auto;margin: 0 auto;}
.part9 .content .formWrap iframe{width: 100%;height: 550px;margin-bottom: 10vw;}
.part9 .fclose{position: absolute;width: 2.4rem;height: 2.4rem;right:1rem;top: 1rem;background: url(pi-close.png) no-repeat center / 90%;z-index: 15;}

.popCard#popCard1 .swiper .swiper-wrapper{width:calc(194vw * 5 + 100vw + 5vw * 4 + 100vw);}
.popCard#popCard5 .swiper .swiper-wrapper{width:calc(194vw * 2 + 100vw + 5vw * 1 + 100vw);}
.popCard#popCard4 .content{background: rgba(0,0,0,0.95);}
.popCard#popCard4 .content video{position: absolute;left: 0;top: 50%; width: 100%;height:auto;object-fit: contain;object-position: center;transform: translateY(-50%);}
.popCard#popCard4 .content .vclose{position: absolute; width: 2.2rem;height: 2.2rem;top: 1rem;right: 1rem;background: url(pi-close.png) no-repeat center / cover;z-index: 10;}


@keyframes animArr{
    0%{
       top:58%;
    }
    100%{
        top:60%;
    }
}
@keyframes animArr2{
    0%{
       bottom:2%;
    }
    100%{
        bottom:1%;
    }
}

@keyframes animLoad {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}