﻿

@keyframes borderColorChange {
   0% {border-color: #29ac80;}
   50% {border-color: #bcc399;}
   100% {border-color: #29ac80;}
}

/***/
#homeFocus{background:#161616;width:100%;overflow:hidden;position:relative;z-index:2;}
#homeFocus .mainPic{width:100%;height:auto;position:relative;z-index:1;}
#homeFocus .mainTxt{position:absolute;width:28%;z-index:3;
                    left: 50%;top:45%; transform: translate(-50%,-45%);}
#myVideo{display:none;width:100%;height:1200px;z-index:10;position:absolute;
         left: 50%;top:50%; transform: translate(-50%,-50%);
}
/***history*/
.hisExt{height:900px;z-index:1;background:#fff;position:relative;}

#history{background:#fff; position:relative;left:0;top:0;width:100%; height:600px; z-index:1;overflow:hidden;padding:200px 0 300px 0;}
#history .lbox{width:82%;margin:0px auto;}
#history .hLeft h2{font-size:60px; font-style:italic;}
#history .hLeft h2 i{font-size:180px;}
#history .hLeft p{font-size:50px;line-height:150%;}
#history .hisRight{position:absolute;right:0;top:100px;height:700px;width:45%;z-index:2;}
#history .showBox {
    position: absolute; width: 500px;height: 600px;
    left: 50%;top: 50%;
    transform: translate(-50%,-50%);
    background:#fff;
}
#history .showBox img{position:absolute;left:0;top:0;width:100%;height:100%;}

 /*proIntrs**/
 .proIntrs{position:relative;z-index:10;background:#fff;padding-bottom:50px;overflow:hidden;}
 .proIntrs .pisBox{ background:#161616;width:96%; height:450px; margin:0px auto;border-radius:15px; overflow:hidden;}
 #myVideo2{display:none;width:100%;height:600px;position:relative;margin-top:-30px;}
 /**proItems*/
.proItems{position:relative;z-index:10;background:#fff;width:100%;overflow:hidden;}
.proItems .pisBox{width:96%; margin:0px auto;}
.proItems .viewBox{width:100%;position:relative;padding-top:50px;}

.viewBox img{display:block;width:100%;z-index:2;}
.viewBox .arrow{position:absolute;left:8.6%;bottom:8%;z-index:3;width:92px;height:92px;text-align:center;box-sizing:border-box;padding-top:35px;}
.viewBox .arrow span{position:relative;z-index:3;font-size:20px;}
.viewBox .arrow::after{width:90px;height:90px;z-index:1;}

.pisBox .listBox{background:#efefef;border-radius:15px; height:135px; margin-bottom:16px;position:relative;overflow:hidden;}

.series,.colour{position:relative;z-index:10;}
.listBox .bg{background:#000;position:absolute;left:0;bottom:-135px;border-radius:15px;width:100%;height:135px;z-index:1;}
.listBox .pLeft{width:15%;float:left;}
.listBox .txt{padding-left:20%;font-size:38px;line-height:135px;font-weight:bold;}
.listBox .pCenter{width:72%;float:left;height:84px;padding-top:20px;}
.listBox ul{width:100%;position:relative;height:105px;overflow:hidden;}
.listBox li{width:208px;height:105px;position:absolute;right:0;top:0;}
.listBox li img{cursor:pointer;width:100%;}
.listBox .colour ul{height:102px;}
.listBox .colour li{height:102px;}

.listBox .pRight{width:13%;float:left;padding-top:14px;}
.listBox .arrow{width:106px;height:106px;background:#fff;margin:0px auto;text-align:center;line-height:106px;position:relative;overflow:hidden;}
.listBox .arrow::after{display:none;}
.listBox .icon-arrowright{font-size:18px;color:#282828;}
.listBox .arrow span{display:block;position:absolute;left:0;top:0;width:106px;height:106px;}
#proEnd{z-index:2;background:#fff;padding-bottom:20px;}
#proEnd .proItems{left:0;top:0;}
/***/
 .proLines{position:relative;z-index:10;background:#fff;padding:100px 0px;}
 .proLines .pisBox{width:82%;margin:0 auto;position:relative;}
 .proLines .fLeft{width:60%;padding-top:100px;}
 .proLines .fLeft p{font-size:70px;line-height:150%;font-weight:bold;}
 .proLines .fRight{width:40%;}
 .proLines .fRight video{display:none;margin-left:auto;}

 /***/
.layer7{background:#fff;z-index:11;position:relative;padding:20px 0;}
.layer7 .lBox{width:96%;background:#fff;margin:0 auto;position:relative;}
.layer7 ul{width:100%;}
.layer7 li{float:left;width:24%;position:relative;height:400px;border-radius:15px;overflow:hidden; margin-right:1.3%;}
.layer7 .last{margin-right:0;}
.layer7 .bgImg{width:100%;height:100%;position:absolute;left:0px;top:0;z-index:1;}
.layer7 .txt{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2;}

/**/
.layer8 {background:#fff; z-index:10;position:relative;padding:48px 0 110px 0;}
.layer8 .lBox{width:96%;background:#161616;margin:0 auto;border-radius:15px;padding:20px 0;position:relative;}
.layer8 .lBox .bg{position:absolute;z-index:10;top:0px;width:150px; height:150px;}
.layer8 .lBox .bg img{width:100%;height:160px;}
.layer8 .lBox .bgl {left: 0px;background: linear-gradient(to right, rgba(22, 22, 22, 1), rgba(22, 22, 22, 0));}
.layer8 .lBox .bgr{right:0px;background: linear-gradient(to right, rgba(22, 22, 22, 0), rgba(22, 22, 22, 1));}

.marqueeBox{width:90%; height:150px; margin:0px auto;position:relative;z-index:1;}
.scroll-container{height:80px;width:100%;line-height:80px;overflow:hidden;}

.scroll-text{font-size:56px;color:#fff;font-weight:bold;}
#marquee2{height:70px;line-height:70px;}
#marquee2 .scroll-text{color:#333;font-size:52px;}
.ly8_img { width:73%;margin:0 auto;}
.ly8_img img{width:100%;}
