@charset "utf-8";
@import url("base.css");/* 重置&常用样式 */

/* 全局变量 */
:root{
   --max-width: 1600;
   --background-cover: no-repeat center center / cover;
   --background-contain: no-repeat center center / contain;
   --default-color__rgb: 42,151,255;
   --default-color: rgba(var(--default-color__rgb), 1);
   --primary-color__rgb: 64,158,255;
   --primary-color: rgba(var(--primary-color__rgb), 1);
   --font-family: 'HarmonyOS', sans-serif;
}

@font-face {
    font-family: "Urbanist";
    src: url("fonts/Urbanist-Bold.ttf");
}
.theadNew,
.popup-box__detail .inner .detail .thead,
.content .title aside,
.content .group .cardtit aside {
  
   font-family: 'Urbanist' !important;
}

/*超过1920px时，比例不变  默认*/
html{font-size: 100px;}
main{max-width: 1920px;margin: 0 auto;}
.container {max-width: calc(var(--max-width) / 1px);}
@media (max-width:1920px){
   html{font-size: calc(100 / 1920 * 100vw);}
}
@media (min-width:769px) and (max-width:1024px) {
  html{font-size: calc((100 / 1200) * 100vw);} 
}
@media (max-width:768px) {
  html{font-size: calc((100 / 768) * 100vw);} 
}
@media (max-width:480px){
   html{font-size:calc(100 / 480 * 100vw);}
}

body {font-family:sans-serif; line-height: 1.5; color: var(--default-color);font-size: 0.833vw;height: 100%;background: url(../images/bodybg.jpg) no-repeat center center/cover;overflow-x: hidden;}

.container {width: 100%;margin: 0 auto;height: 55.729vw;position: relative;overflow: hidden;}

/* Start
   ========================================================================== */


/* main-header */
.main-header{height: 4.531vw;padding-bottom: 0.521vw;background: url(../images/headerbg.png) no-repeat center bottom/cover;position: fixed;left: 0;top: 0;z-index: 100;width: 100%;}
.main-header img{height: 1.927vw;}

/* main */
.yuansu1{background: url(../images/yuansu1.png) no-repeat center center/contain;width: 7.135vw;height: 7.135vw;top: 8vw;left: 17vw;position: absolute;z-index: 1;    animation: turn 10s linear infinite;opacity: 0.3;}
.yuansu2{background: url(../images/yuansu2.png) no-repeat center center/contain;width: 12.708vw;height: 12.708vw;top: 6.354vw;right: 2.813vw;position: absolute;z-index: 1;    animation: turn 15s linear infinite;opacity: 0.3;}
.yuansu3{background: url(../images/yuansu3.png) no-repeat center center/contain;width: 9.531vw;height: 9.531vw;bottom: 8.385vw;left: 5.313vw;position: absolute;z-index: 1;    animation: turn 20s linear infinite;opacity: 0.3;}
.yuansu4{background: url(../images/yuansu4.png) no-repeat center center/contain;width: 32.292vw;height:15.208vw;bottom: 0.677vw;left: 0;position: absolute;z-index: 1;}
.yuansu5{background: url(../images/yuansu5.png) no-repeat center center/contain;width: 10.104vw;height:6.302vw;bottom: 13.177vw;right: 6.979vw;position: absolute;z-index: 1;opacity: 0.5;}

.infotxt{position:absolute;font-size: 0.938vw;text-align: center;width: 67.917vw;left: 50%;transform: translateX(-50%);bottom: 2.469vw;color: #fff;display: none;}
.infotxt p{margin:0;}

.carbg{position: absolute;left: 0;top: 2vw;width: 100%;height: 100%;background: url(../images/car.png) no-repeat center top/contain;z-index: 0;}
.content{width: 65.417vw;height: 37.344vw;position: relative;top: 9.865vw;margin: 0px auto;color: #fff;z-index: 10;left: -1.042vw;/*zoom:1.1*/;}

.content .title{width: 16.146vw;height: 5.729vw;position: absolute;right: 17.8vw;top: 15.9vw;font-size: 1.667vw;cursor: pointer;text-align: center;z-index: 100;}
.content .title:before{width: 100%;height: 100%;background: url(../images/titlebg.png) no-repeat center top/contain;position: absolute;z-index: 0;content: "";transition: all 0.5s ease-in-out;left:0;}
.content .title .finger-hint{left: 50%;margin-left: -0.7vw;}
.content .title aside{line-height: 3.333vw;position: relative;z-index: 2;}
.content .title:hover{color: #ffa200;}
.content .title span{position: absolute;left: 0;top: 1px;width: 100%;z-index: 10;}
.content .title img{height: 1.354vw;transform: translateY(-2px);display: block;margin: 0px auto;line-height: normal;position: relative;z-index: 2;transition: all 0.5s ease-in-out;}
.content .title:hover:before{transform: scale(1.05);}
.content .title:hover img{transform: scale(1.05);}

.content .group{position: absolute;}
.content .group .line{
  background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;
}
.content .group .cardtit{width: 8.854vw;height: 8.906vw;font-size: 1.354vw;position: relative;z-index: 10;}
.content .group .cardtit:before{width: 100%;height: 100%;background: url(../images/cardtitbg.png) no-repeat center top/contain;position: absolute;z-index: 0;content: "";transition: all 0.5s ease-in-out;left: 0;}
.content .group .cardtit aside{margin-bottom: 0.521vw;font-weight: bold;line-height: 3.542vw;display: flex;align-items: center;justify-content: center;position: relative;z-index: 2;}
.content .group .cardtit aside:before,
.content .group .cardtit aside:after{width: 0.25rem;height: 0.14rem;content: "";background-position: center center;background-repeat: no-repeat;background-size: contain;}
.content .group .cardtit aside:before{background-image: url(../images/arr_left.png);margin-right: 0.521vw;}
.content .group .cardtit aside:after{background-image: url(../images/arr_right.png);margin-left: 0.521vw}
.content .group .cardtit figure img{height: 3.333vw;position: relative;z-index: 2;transition: all 0.5s ease-in-out;}
.content .group .cardtit:hover figure img{transform: scale(1.15);}
.content .group .cardtit:hover:before{transform: scale(1.15);}

.content .group .video a{position: absolute;width: 4.896vw;height: 4.896vw;z-index: 100;
   animation: icon-shaking 2s linear 0.5s infinite alternate;
   -webkit-animation: icon-shaking 2s linear 0.5s infinite alternate;}
.content .group .video a:after{content: "";width: 3.438vw;height: 3.438vw;background: url(../images/video.png) no-repeat center center/contain;position: absolute;left:50%;top: 50%;z-index: 2;transform: translate(-50%,-50%);}
.content .group .video a:before{content: "";width: 100%;height: 100%;background: url(../images/videobg.png) no-repeat center center/contain;position: absolute;left: 0;top: 0;}
.content .group .video a:hover{animation-play-state: paused;}
.content .group .video a:hover:before{animation: turn 10s linear infinite;}

.content .group .list a{position: absolute;width: 6.979vw;height: 5.104vw;background: url(../images/cardtitbg2.png) no-repeat center center/contain;padding-bottom: 1.563vw;}
.content .group .list a:first-child{display: none;}
.content .group .list a img{opacity: 0.6;}
.content .group .list a span{color: #fff;background-color: rgba(0,177,65,0.4);font-size: 0.911vw;line-height: 1.14;padding: 0 0.365vw;font-weight: lighter;position: absolute;z-index: 1;min-width: 3.125vw;text-align: center;bottom: 0.313vw;left: 50%;transform: translateX(-50%);}
.content .group .list a:hover img{opacity: 1;}
.content .group .list a:hover span{background-color:  rgba(0,177,65,1);}
.content .group .list a:After{content: "";position: absolute;background-position: 0 top;background-repeat: no-repeat;background-size: 100% 100%;}

.content .group:nth-child(1){top: 0.9vw;right: 22.792vw;}
.content .group:nth-child(1) .cardtit .line{width: 0.313vw;top: 100%;right: 4.375vw;height: 7.45vw;position: absolute;z-index: -1;}
.content .group:nth-child(1) .cardtit:after{width: 0.521vw;top: 99%;content: "";right: 2.76vw;height: 7.292vw;background-image: url(../images/line_10.png);position: absolute;z-index: -1;}
.content .group:nth-child(1) .list a:nth-child(2){left: -18.615vw;top: 3.6vw;}
/* .content .group:nth-child(1) .list a:nth-child(2):After{width: 3.125vw;height: 6.354vw;top: 2.9vw;right: 0;background-image: url(../images/line_1.png);} */

.content .group .list a .line{display: none;}
.content .group:nth-child(1) .list a:nth-child(2) .line{display: block;}

.content .group:nth-child(1) .list .line{background: none !important;animation: none 0.8s linear 0s infinite normal;height: 5vw;position: absolute;width: 5.125vw;top: 4.9vw;right: -1.615vw;}
.content .group:nth-child(1) .list .line em{position: absolute;width: 100%;height: 0.05rem;}
.content .group:nth-child(1) .list .line em:nth-child(2){height: 70%;bottom: 0;width: 0.05rem;right: 0;}
.content .group:nth-child(1) .list .line em:nth-child(3){height: 0.05rem;top: 30%;width: 100%;left: 0;}
.content .group:nth-child(1) .list .line em:nth-child(1){ background-size: 7px 7px;left: 0;width: 0.05rem;height: 30%;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;}
.content .group:nth-child(1) .list .line em:nth-child(2){background-size: 7px 7px;
 background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;
}
.content .group:nth-child(1) .list .line em:nth-child(3){background-size: 7px 7px;
 background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;
}



.content .group:nth-child(1) .open .line{background: none !important;animation: none 0.8s linear 0s infinite normal;}
.content .group:nth-child(1) .open .line span{position: absolute;left: 0;width: 100%;}
.content .group:nth-child(1) .open .line span:nth-child(1){height: 59%;}
.content .group:nth-child(1) .open .line span:nth-child(2){height: 35%;bottom: 0.208vw;}
.content .group:nth-child(1) .open .line span:nth-child(1){ background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;}
.content .group:nth-child(1) .open .line span:nth-child(2){background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-ms-animation: zi-antBorder2 0.8s linear infinite;
-moz-animation: zi-antBorder2 0.8s linear infinite;
-webkit-animation: zi-antBorder2 0.8s linear infinite;
animation: zi-antBorder2 0.8s linear infinite;
}

.content .group:nth-child(1) .list a:nth-child(2) img{height:1.198vw;}
.content .group:nth-child(1) .list a:nth-child(3){left: -8.927vw;top: 3.58vw;}
.content .group:nth-child(1) .list a:nth-child(3):After{width: 7.604vw;height: 2.344vw;top: 4.8vw;right: -4.15vw;background-image: url(../images/line_2.png);}
.content .group:nth-child(1) .list a:nth-child(3) img{width: 3.177vw;}
.content .group:nth-child(1) .video a:nth-child(1){right: -6.117vw;top: -2.615vw;}
.content .group:nth-child(1) .list a:nth-child(n+4) {display: none;}

.content .group:nth-child(2){top: 15.323vw;right: -3.021vw;}
.content .group:nth-child(2) .cardtit .line{width: 7.35vw;top: 4.531vw;right: 99%;height: 0.313vw;position: absolute;z-index: -1;}
.content .group:nth-child(2) .list a:nth-child(2){left: -3.867vw;top: -8.1vw;}
.content .group:nth-child(2) .list a:nth-child(2) img{height: 2.656vw;}
.content .group:nth-child(2) .list a:nth-child(2):After{width: 4.271vw;height: 3.281vw;bottom: -3.021vw;left: 3.51vw;background-image: url(../images/line_3.png);}
.content .group:nth-child(2) .list a:nth-child(3){left: -3.667vw;bottom: -8vw;}
.content .group:nth-child(2) .list a:nth-child(3) {padding-top: 1.563vw;padding-bottom: 0;background-image: url(../images/cardtitbg3.png);}
.content .group:nth-child(2) .list a:nth-child(3) span{bottom: auto;top: 0.313vw;}
.content .group:nth-child(2) .list a:nth-child(3) img{height: 2.656vw;}
.content .group:nth-child(2) .list a:nth-child(3):After{width: 4.271vw;height: 3.229vw;top: -2.9vw;left: 3.458vw;background-image: url(../images/line_4.png);}
.content .group:nth-child(2) .list a:nth-child(4){left: -14vw;top: -10.8vw;}
.content .group:nth-child(2) .list a:nth-child(4) img{height: 1.875vw;}
.content .group:nth-child(2) .list a:nth-child(4):After{width: 12.031vw;height: 9.688vw;top: 4.8vw;left: 2vw;background-image: url(../images/line_5.png);}
.content .group:nth-child(2) .video a:nth-child(1){right: -6.6vw;top: 1.823vw;}
.content .group:nth-child(2) .video a:nth-child(2){right: 13.81vw;bottom: -11.104vw;}
.content .group:nth-child(2) .list a:nth-child(n+5) {display: none;}

.content .group:nth-child(3){bottom: -1.823vw;right: 22.792vw;}
.content .group:nth-child(3) .cardtit .line{width: 0.313vw;bottom: 99%;right: 4.375vw;height: 7.8vw;position: absolute;z-index: -1;}
.content .group:nth-child(3) .cardtit:after{width: 0.521vw;bottom: 100%;content: "";right: 2.76vw;height: 7.552vw;position: absolute;z-index: -1;background-image: url(../images/line_9.png);}
.content .group:nth-child(3) .list a:nth-child(2){left: -11.9vw;top: -0.3vw;}
.content .group:nth-child(3) .list a:nth-child(2) {padding-top: 1.563vw;padding-bottom: 0;background-image: url(../images/cardtitbg3.png);}
.content .group:nth-child(3) .list a:nth-child(2) img{height: 1.927vw;}
.content .group:nth-child(3) .list a:nth-child(2) span{bottom: auto;top: 0.313vw;}
.content .group:nth-child(3) .list a:nth-child(2):After{width: 10.208vw;height: 2.344vw;top: -2vw;right: -6.8vw;background-image: url(../images/line_6.png);}
.content .group:nth-child(3) .list a:nth-child(3){right: -5.854vw;top: -6.9vw;display: none;}
.content .group:nth-child(3) .video a:nth-child(1){left: -6.9vw;bottom: -3.504vw;}
.content .group:nth-child(3) .video a:nth-child(2){left: -7.823vw;top: -15.417vw;}
.content .group:nth-child(3) .list a:nth-child(n+4) {display: none;}

.content .group:nth-child(3) .open .line{background: none !important;animation: none 0.8s linear 0s infinite normal;}
.content .group:nth-child(3) .open .line span{position: absolute;left: 0;width: 100%;}
.content .group:nth-child(3) .open .line span:nth-child(1){height: 32%;top: 0.208vw;}
.content .group:nth-child(3) .open .line span:nth-child(2){height: 62%;bottom: 0.104vw;}
.content .group:nth-child(3) .open .line span:nth-child(1){ background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;}
.content .group:nth-child(3) .open .line span:nth-child(2){background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-ms-animation: zi-antBorder2 0.8s linear infinite;
-moz-animation: zi-antBorder2 0.8s linear infinite;
-webkit-animation: zi-antBorder2 0.8s linear infinite;
animation: zi-antBorder2 0.8s linear infinite;
}


.content .group:nth-child(4){top: 15.523vw;left: 0.521vw;}
.content .group:nth-child(4) .cardtit:after{width: 22.3vw;top: 4.5vw;content: "";left: 97.8%;height: 0.469vw;background: url(../images/line_11.png) no-repeat right center;position: absolute;z-index: -1;}
.content .group:nth-child(4) .cardtit .line{width: 10.8vw;top: 3.5vw;left: 99%;height: 0.313vw;position: absolute;z-index: -1;}
.content .group:nth-child(4) .list a:nth-child(2){left: 4.458vw;top: -7.869vw;}
.content .group:nth-child(4) .list a:nth-child(2) img{height: 2.448vw;}
.content .group:nth-child(4) .list a:nth-child(2):After{width: 4.271vw;height: 3.229vw;top: 4.813vw;right: 3.5vw;background-image: url(../images/line_7.png);}
.content .group:nth-child(4) .list a:nth-child(3){left: 4.658vw;bottom: -8vw;padding-top: 1.563vw;padding-bottom: 0;background-image: url(../images/cardtitbg3.png);}
.content .group:nth-child(4) .list a:nth-child(3) img{height: 2.656vw;}
.content .group:nth-child(4) .list a:nth-child(3) span { bottom: auto; top: 0.313vw;}
.content .group:nth-child(4) .list a:nth-child(3):After{width: 4.271vw;height:3.229vw;top: -2.9vw;left: -0.6vw;background-image: url(../images/line_8.png);}
.content .group:nth-child(4) .video a:nth-child(1){left: -5.99vw;top: 1.354vw;}
.content .group:nth-child(4) .list a:nth-child(n+4) {display: none;}

.content .linebox{position: absolute;top: 14.12vw;width: 18vw;height: 11.302vw;z-index: 10;pointer-events: none;}
.content .linebox .btn{position: absolute;width: 1.563vw;height: 1.563vw;background: url(../images/ico_link1.svg) no-repeat center center/0.833vw 0.833vw;cursor: pointer;background-color: #cc0000;border-radius: 50%;z-index: 10;transition: all 0.5s;pointer-events: auto;}
.content .linebox .btn:hover{transform: scale(1.25);}
.content .linebox .line{width: 100%;height: 100%;position: absolute;right: 0;top: 0;}
.content .linebox .line span{position: absolute;/*background-color: #cc0000;*/
   background-size: 7px 7px;
   background-image: -ms-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #cc0000 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #cc0000 50%, #cc0000 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;
}
.content .linebox .line span:nth-child(1){right: 2px;top: 0;width: 100%;height: 0.313vw;}
.content .linebox .line span:nth-child(2){right: 18vw;top: 0;width: 0.313vw;height: 45%;}
.content .linebox .line span:nth-child(3){right: 18vw;bottom: 0;width: 0.313vw;height: 55%;}
.content .linebox .line span:nth-child(4){right: 2px;bottom: 0;width: 100%;height: 0.313vw;}
.content .linebox.left{left: 20.33vw;}
.content .linebox.left .btn{left: 2.5vw;bottom: -0.7vw;}
.content .linebox.right{right: 12.8vw;}
.content .linebox.right .line{width: 14.3vw;}
.content .linebox.right .btn{right: 4.5vw;top: -0.7vw;}
.content .linebox.right span:nth-child(1){right: auto;left: -2px;}
.content .linebox.right span:nth-child(2){right: 0;height: 54%;}
.content .linebox.right span:nth-child(3){right: 0;height: 46%;}
.content .linebox.right span:nth-child(4){right: auto;left: -2px;}

.content .linebox.on .btn{background-color: #999;background-image: url(../images/ico_link2.svg);}
.content .linebox.left.on .line span:nth-child(3),.content .linebox.left.on .line span:nth-child(4){
   background-image: -ms-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -moz-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: -webkit-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
   -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
   -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
   animation: zi-antBorder 0.8s linear 0s infinite normal;animation-play-state: paused;
}
.content .linebox.right.on .line span:nth-child(1),.content .linebox.right.on .line span:nth-child(2){
  background-image: -ms-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-image: -webkit-linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(-45deg, #999999 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #999999 50%, #999999 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  -ms-animation: zi-antBorder 0.8s linear 0s infinite normal;
  -moz-animation: zi-antBorder 0.8s linear 0s infinite normal;
  -webkit-animation: zi-antBorder 0.8s linear 0s infinite normal;
  animation: zi-antBorder 0.8s linear 0s infinite normal;animation-play-state: paused;
}

.icon-bounce:hover img{
   -webkit-animation: icon-bounce 0.5s alternate;
   -moz-animation: icon-bounce 0.5s alternate;
   -o-animation: icon-bounce 0.5s alternate;
   animation: icon-bounce 0.5s alternate;
 }

@keyframes zi-antBorder {
	0% {
			background-position: 0px 0px;
	}

	50% {
			background-position: 0px -10px;
	}

	100% {
			background-position: 0px -20px;
	}
}
@keyframes zi-antBorder2 {
	0% {
			background-position: 0px 0px;
	}

	50% {
			background-position: 0px 10px;
	}

	100% {
			background-position: 0px 20px;
	}
}

@keyframes turn {
   0% {
     -webkit-transform: rotate(0deg);
   }

   25% {
     -webkit-transform: rotate(90deg);
   }

   50% {
     -webkit-transform: rotate(180deg);
   }

   75% {
     -webkit-transform: rotate(270deg);
   }

   100% {
     -webkit-transform: rotate(360deg);
   }
 }

 @-webkit-keyframes icon-bounce {

   0%,
   100% {
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }

   25% {
     -moz-transform: rotate(15deg);
     -ms-transform: rotate(15deg);
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg);
   }

   50% {
     -moz-transform: rotate(-15deg);
     -ms-transform: rotate(-15deg);
     -webkit-transform: rotate(-15deg);
     transform: rotate(-15deg);
   }

   75% {
     -moz-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
     -webkit-transform: rotate(5deg);
     transform: rotate(5deg);
   }

   85% {
     -moz-transform: rotate(-5deg);
     -ms-transform: rotate(-5deg);
     -webkit-transform: rotate(-5deg);
     transform: rotate(-5deg);
   }
 }

 @-moz-keyframes icon-bounce {

   0%,
   100% {
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }

   25% {
     -moz-transform: rotate(15deg);
     -ms-transform: rotate(15deg);
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg);
   }

   50% {
     -moz-transform: rotate(-15deg);
     -ms-transform: rotate(-15deg);
     -webkit-transform: rotate(-15deg);
     transform: rotate(-15deg);
   }

   75% {
     -moz-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
     -webkit-transform: rotate(5deg);
     transform: rotate(5deg);
   }

   85% {
     -moz-transform: rotate(-5deg);
     -ms-transform: rotate(-5deg);
     -webkit-transform: rotate(-5deg);
     transform: rotate(-5deg);
   }
 }

 @-o-keyframes icon-bounce {

   0%,
   100% {
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }

   25% {
     -moz-transform: rotate(15deg);
     -ms-transform: rotate(15deg);
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg);
   }

   50% {
     -moz-transform: rotate(-15deg);
     -ms-transform: rotate(-15deg);
     -webkit-transform: rotate(-15deg);
     transform: rotate(-15deg);
   }

   75% {
     -moz-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
     -webkit-transform: rotate(5deg);
     transform: rotate(5deg);
   }

   85% {
     -moz-transform: rotate(-5deg);
     -ms-transform: rotate(-5deg);
     -webkit-transform: rotate(-5deg);
     transform: rotate(-5deg);
   }
 }

 @-webkit-keyframes icon-shaking {

   0%,
   100% {
     -moz-transform: rotate(0deg) translateY(-10px);
     -ms-transform: rotate(0deg) translateY(-10px);
     -webkit-transform: rotate(0deg) translateY(-10px);
     transform: rotate(0deg) translateY(-10px);
   }

   25% {
     -moz-transform: rotate(0) translateY(0);
     -ms-transform: rotate(0) translateY(0);
     -webkit-transform: rotate(0) translateY(0);
     transform: rotate(0) translateY(0);
   }
 }

 
 /* tanchuang */
.popup-box__detail{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;background-color: rgba(0,0,0,0.35);color: #fff;opacity: 0;transition: all 0s;pointer-events: none;visibility: hidden;}
.popup-box__detail .allclose{position: absolute;left: 0;z-index: 0;top: 0;width: 100%;height:100%;}
.popup-box__detail .close{position: absolute;width: 3.333vw;height: 3.333vw;right: -4.792vw;top: -2.5vw;background: url(../images/close.png) no-repeat center center/contain;transition: all 0.5s;cursor: pointer;}
.popup-box__detail .close:hover{opacity: 0.7;}
.popup-box__detail .inner{position: fixed;top: 50%;transform: translateY(-50%);width: 50vw;height: 30vw;padding: 1.5vw 2.083vw 1.563vw 2.083vw;background: url(../images/popbg.png) no-repeat center center/100% 100%;transition: all 0.5s;z-index: 10;}
.popup-box__detail .inner .load-info{height: 22.688vw;overflow-y: auto;padding-right: 1.667vw;margin-top: -0.25rem;}

.load-info {}
.popup-box__detail .inner .detail .is-pic{width: 100%;display: none;}
.popup-box__detail .inner .detail .thead{text-align: center;}
.popup-box__detail .inner .detail .info ul{margin-left: -1.563vw;}
.popup-box__detail .inner .detail .info li{width: calc(100% / 3 - 1.563vw);margin:0 0 1.563vw 1.563vw;display: flex;align-items: center;padding: 0.26vw 0.26vw 0.26vw  0.26vw;background: url(../images/libg.png) no-repeat center center/100% 100%;}
.popup-box__detail .inner .detail .info p{flex:1;margin: 0;min-height: 2.917vw;border-top: 1px solid rgba(255,255,255,0.1);position: relative;display: flex;align-items: center;}
.popup-box__detail .inner .detail .info p:before{position: absolute;left: 0;top: -1px;content: "";width: 1.042vw;background-color: #5df1ff;height: 1px;}
.popup-box__detail .inner .detail .info img{width: 4.688vw;height: 4.688vw;padding: 0.781vw;background: url(../images/linebg.png) no-repeat center center/100% 100%;}
.popup-box__detail .inner .detail.more ul{margin-left: -0.677vw;}
.popup-box__detail .inner .detail.more li{width: calc(100% / 4 - 0.677vw);margin-left: 0.677vw;}


.popup-box__detail .inner .detail2 h2{font-size: 1.458vw;font-weight: 500;margin: 0 0 0.95vw !important;line-height: 2.448vw;color: #5df1ff;background: url(../images/f_titbg.png) no-repeat 0 top !important;padding-left: 0.573vw;height: auto !important;text-align: left !important;padding-top: 0 !important;padding-left: 0.573vw !important;}

.popup-box__detail .inner .thead{font-size: 1.875vw;margin: 0;line-height: 1;opacity: 0.8;height: 3.021vw;transform: translateY(-0.2vw);padding-left: 1.823vw;}
.popup-box__detail .inner h3{font-size: 1.458vw;font-weight: 500;margin: 0 0 0.95vw;line-height: 2.448vw;color: #5df1ff;background: url(../images/f_titbg.png) no-repeat 0 top;padding-left: 0.573vw;}
.popup-box__detail .inner .txt{font-size: 0.938vw;line-height: 1.7;color: #fff;}
.popup-box__detail .inner video{display:block;width:100%;height: 22.688vw;object-fit: contain;}

.popup-box__detail .tab li{cursor: pointer;margin: 0 0.2rem;font-size: 1.042vw;padding-bottom: 1.042vw;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;}
.popup-box__detail .tab li.on{color: #5df1ff;font-weight: bold;}

.popup-box__detail.show{opacity: 1;z-index: 999;visibility: visible;pointer-events: auto;}
.popup-box__detail.zjt .inner{width: 30vw;}
.popup-box__detail.yjt .inner{width: 30vw;}
.popup-box__detail.left .inner{left: 0;}
.popup-box__detail.right .inner{right: 0 !important;}
.popup-box__detail.right .close{right: auto;left: -4.792vw;}
.popup-box__detail.center .inner{left: 50%;transform: translate(-50%,-50%);}



.yunduo{position: absolute;right: -1vw;top: -49%;zoom: 0.4;width: 4.427vw;height: 4.427vw;background: url(../images/yun.png) no-repeat center center/contain;}
.yunduo:After{position: absolute;width: 45%;bottom: 0;left: 50%;transform: translateX(-50%);height: 45%;background: url(../images/yun1.png) no-repeat center center/contain;content:"";animation: changeBg 1s steps(4) infinite;}

#bottom-line {
  animation: blink 1s infinite;
}
@keyframes changeBg {
  0% { background-image: url(../images/yun1.png); }
  25% { background-image: url(../images/yun2.png); }
  50% { background-image: url(../images/yun3.png); }
  75% { background-image: url(../images/yun4.png); }
  100% { background-image: url(../images/yun1.png); } /* 循环 */
}

.finger-hint {position: absolute;font-size: 1.563vw;animation: floatAndFade 5s infinite;top: 50%;opacity: 0;z-index: 10;width: 1.51vw;height: 1.667vw;background: url(../images/hand.png) no-repeat center center/contain;}
.content .group:nth-child(1) .list a:nth-child(3) .finger-hint{display: none;}
.content .group:nth-child(4) .list a:nth-child(3) .finger-hint{display: none;}
.content .group:nth-child(3) .list a:nth-child(3) .finger-hint{display: none;}
.content .group:nth-child(4) .list a:nth-child(2) .finger-hint{left: 0.817vw;}
.content .group:not(:nth-child(1)) .video .finger-hint{display: none;}
.content .group .video .finger-hint{left: 1.485vw;}

.tipscroll{position: absolute;right: 0.521vw;top: 0;height: 100%;display: flex;align-items: center;justify-content: center;width: 1.1vw;color: #fff;color: #ffcc00;text-align: center;}
.tipscroll:before{width: 100%;height: 2.604vw;left: 0;top: 30%;content: "";position: absolute;background: url(../images/toparr.svg) no-repeat center center/contain;animation: floatAndFade 2s infinite;}
.tipscroll:after{width: 100%;height: 2.604vw;left: 0;bottom: 30%;content: "";position: absolute;background: url(../images/toparr.svg) no-repeat center center/contain;transform: rotate(180deg);animation: floatAndFade2 2s infinite;}
.tipscroll span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(90deg);width: 10.417vw;}

.clickMore{width: 26vw;height: 3.021vw;text-align: center;display: flex;align-items: center;justify-content: center;position: absolute;left: 8vw;top: 7.2vw;background: url(../images/clickmore.png) no-repeat center center/contain;color: #5df1ff;font-size: 0.938vw;animation: fadecolor 2s infinite;}
.clickMore span{width: 1.51vw;height: 1.51vw;background: url(../images/hand.png) no-repeat center center/contain;margin: 0 0.26vw;animation: floatAndFade 5s infinite;position: relative;bottom: -20%;}

@keyframes floatAndFade {
  0%, 100% {
    opacity: 0; 
    transform: translateY(0);
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1; 
    transform: translateY(-20px);
  }
  80% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes floatAndFade2 {
  0%, 100% {
    opacity: 0; 
    transform: translateY(0) rotate(180deg);
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1; 
    transform: translateY(20px) rotate(180deg);
  }
  80% {
    opacity: 0;
    transform: translateY(20px) rotate(180deg);
  }
}
@keyframes fadecolor {
  0%, 100% {
   color: #ffa200;
  }
  10% {
    color: #5df1ff;
  }
  70% {
    color: #ffa200;
  }
  80% {
    color: #5df1ff;
  }
}

.theadNew{
	background-image: url(../images/headBg.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 1.17rem;
	padding-top: 0.15rem;
	padding-left: 0;
	text-align: center;
	margin-top: -1.5vw;
	font-size: 1.875vw;
	margin-bottom: 0;
	opacity: 0.8;
}
.popup-box__detail .inner .load-info2 {
    height: 25.688vw;
    overflow-y: auto;
    padding-right: 1.667vw;
    margin-top: 0;
}