@import url("https://at.alicdn.com/t/font_1758256_iuu4ucn4oa7.css");

ul,li{padding: 0; margin: 0; list-style: none;}
.ggBox{position: absolute; width: 100%; height: auto; left: 0; bottom: 0px;z-index: 9999;height:60px; background: url("../images/ggBg.png")}
.txtScroll-left{ position:relative;z-index: 99999;  height:60px; width:100%;overflow:hidden; display: block; text-align: left; padding-left: 40px;}
.txtScroll-left i{position: absolute; left: 0;top: 0; height: 60px; line-height: 60px; color: #F7F7F7; font-size: 28px}
.txtScroll-left .dbd{ padding:0; width:100%; overflow:hidden; display: block;height: 60px;}
.txtScroll-left .dbd ul.ggList{ overflow:hidden; display: block; height: 60px; width: 100%;  padding: 0; margin: 0;  position: relative}
.txtScroll-left .dbd ul li{ margin-left:20px;  float:left; height:60px; line-height:60px; width: 250px;  text-align:left; z-index: 99999; display:inline-block; float: left;}
.txtScroll-left .dbd ul li a{ display: block; height: auto;overflow: hidden; color: #F7F7F7}
.txtScroll-left .dbd ul li span{ color:#999;  }
.txtScroll-left .dbd .tempWrap{ width:100% !important; }


/*第二屏*/

.iAboutBox{ width:100%; text-align:left; height: 100%; padding-top:10%; display: block; overflow: hidden;position: relative;}
.iAboutBox .hd{ height:1080px; background:#5498fe; display: block;  position:relative; width: 240px; z-index: 1; float: left;box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);}
.iAboutBox .hd ul{ float:left; position:absolute; left:0; top:100px; height:auto;width: 100%;}
.iAboutBox .hd ul li{ float:left;cursor:pointer; width: 100%; background-color: none;  height:80px; position: relative; margin-bottom: 30px; color: #fff}
.iAboutBox .hd ul li *{box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}
.iAboutBox .hd ul li .text{ padding: 10px  20px; width: 100%; }
.iAboutBox .hd ul li .text .num{width: 60px; height: 60px; display: block; float: left; border-radius: 30px; line-height: 60px; text-align: center;font-size: 30px;}
.iAboutBox .hd ul li .text .zh{line-height: 40px;font-size: 24px; font-weight: bold; width: 120px; float: right;display: block;}
.iAboutBox .hd ul li .text .en{line-height: 20px;font-size: 14px;width: 120px; float: right;display: block;}
.iAboutBox .hd ul li.on .text .num{background: #00ac55}
.iAboutBox .hd ul li.on:after{position: absolute; content: '';border-top: 40px transparent dashed;border-right: 0px transparent dashed;border-bottom: 40px transparent dashed;border-left: 40px #5498fe solid;top: 0; right: -40px;}
.iAboutBox .abBd {height: 100%; width: 530px; margin-left:300px; padding-top: 80px;}
.iAboutBox .abBd span,.iAboutBox .abBd p{ width: 100%; height: auto; display: block;}
.iAboutBox .abBd span{ padding-bottom: 20px;}
.iAboutBox .abBd span img{ width: 100%; height: auto; display: block;}
.iAboutBox .abBd p{text-indent: 2em; text-align: justify; font-size: 18px;line-height: 30px; padding-bottom: 15px}
/*第二屏*/


.player {
margin: 0px auto;
position: relative;
width: 100%;
height: 100%;
}
.player video{width: 100%}
.page-four{
    width: 100%;
    height: 100%;
    padding: 110px 5%;
}
.page-four-sidebar{
    width: 40%;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10%;
}

.four-sidebar-col{
position: relative;   
}
.page-four-case{
    width: 60%;
    float: right;
    
    height: 100%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}
.four-case-col{
    width: 100%;
    height: auto;
    padding:10px 20px;
    background-color: #fff;
}
@media (max-height:800px) {
.four-case-col{
    padding-top:90px;
}
}


.four-case-title{
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #f5f5f5;
}
.case-title-label{
    float: left;
    line-height: 40px;
    padding: 20px 0;
    font-size: 18px;
    color: #333;
}
.case-title-function{
    float: right;
}
.case-func-box{
    float: left;
    height: 30px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 25px;
    min-width: 10px;
    font-size: 16px;
    color: #fff;
    margin: 15px 2px;
	border: 1px solid #f5f5f5;
}
.case-func-box a{
    color: #e84d29; 
}
.case-func-box:hover a{
    color: #fff; 
}
.case-func-box:hover{
    background-color:rgba(231, 0, 17, 0.7);
}
.case-func-box:hover a{
    text-decoration: none;
}
.case-func-more{
    background-color: #f5f5f5;
    width: 88px;
    height: 30px;
    color: #999;
    float: left;
    line-height: 30px;
    margin: 25px 2px;
    font-size: 12px;
}
.four-case-list{
    width: 100%;
    min-height: 100px;
}
.four-case-list ul{
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.four-case-list ul li{
    width: 30%;
    min-height: 80px;
    border: 1px solid #f5f5f5;
    float: left;
    transition: all 0.8s ease 0s;
    margin-bottom: 20px;
}
.four-case-img{
    width: 100%;
    position: relative;
    float: left;
}
.case-img-slide{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.case-img-slide i{
    display: inline-block;
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 9;
    opacity: .8;
    background: url(../images/ic12.png)center no-repeat;
}
.case-img-slide:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.8s ease 0s;
    background-color: rgba(231, 0, 17, 0.7);
}
.four-case-list ul li:hover{
    border: 1px solid rgba(231,0,17,0.7);
}
.four-case-list ul li:hover h6 i{
    background: url(../images//ic11-1.png)center no-repeat;
}
.four-case-list ul li:hover .case-img-slide{
    opacity: 1;
}
.four-case-list ul li:hover .case-img-slide:after{
    content: '';
    opacity: 1;
}
.four-case-img img{
    width: 100%;
    display: block;
    float: left;
}
.four-case-text{
    width: 100%;
    float: left;
    padding: 0 10px;
}
.four-case-text h5{ width:70%; float:left;
    line-height:22px;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    text-align: left;
    margin: 6px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.four-case-text h6{
    margin: 0; float:right;
}
.four-case-text h6 i{
    display: inline-block;
    width: 30px;
    transition: all 0.8s ease 0s;
    height: 30px;
    background: url(../images/ic11.png)center no-repeat;
    float: right;
}
.wrap {
    margin-top: 150px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
  }
  .cube {
    margin: auto;
    position: relative;
    height: 300px;
    width: 300px;
    transform-style: preserve-3d;
  }
   
@media (max-width:1600px) {
  .cube {
    height: 200px;
    width: 200px;
  }
}



  .cube > div {
    position: absolute;
    box-sizing: border-box;
    padding: 0px;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    color: #ffffff;
  }
  .cube > div>img{
      width: 100%;
      height: 100%;
  }
  .front {
    transform: translateZ(100px);
  }
   
  .back {
    transform: translateZ(-100px) rotateY(180deg);
  }
   
  .right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
  }
   
  .left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
  }
   
  .top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
  }
   
  .bottom {
    transform: rotateX(270deg) translateY(100px);
    transform-origin: bottom center;
  }
  @keyframes rotate {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
     
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
   
  .cube {
    animation: rotate 20s infinite linear;
  }
  .wrap:hover .front {
    transform: translateZ(200px);
  }
   
  .wrap:hover .back {
    transform: translateZ(-200px) rotateY(180deg);
  }
   
  .wrap:hover .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
  }
   
  .wrap:hover .left {
    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
  }
   
  .wrap:hover .top {
    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
  }
   
  .wrap:hover .bottom {
    transform: rotateX(270deg) translateZ(100px) translateY(100px);
  }
  .cube > div {
    transition: transform 0.2s ease-in;
  }
.wrap-two{
    margin-top: 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -50px;
    transform: translateZ(-100px);
}
.wrap-two .cube {
    margin: auto;
    position: relative;
    height: 100px;
    width: 100px;
    transform-style: preserve-3d;
  }


.about_box{text-align:center;position:relative; width: 100%; height:100%; display: block; overflow: hidden; background: #F5F3F3;}
.about_box *{box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ }
.about_box>div{height:100%;width:25%;padding: 0 0px; margin: 0; float: left; display:block;position:relative;-webkit-transform:translateY(100px);-ms-transform:translateY(100px);-moz-transform:translateY(100px);transform:translateY(100px);-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-ms-transition:all .4s ease-out;transition:all .4s ease-out;opacity:0; margin: 0;}
.about_box>div:nth-child(2){-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}
.about_box>div:nth-child(3){-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-ms-transition-delay:.2s;transition-delay:.2s}
.about_box>div:nth-child(4){-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-ms-transition-delay:.3s;transition-delay:.3s}
.con .about_box>div{opacity:1;-webkit-transform:none;-ms-transform:none;-moz-transform:none;transform:none}
.cont{cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform;transition:box-shadow .3s ease;display: block; overflow: hidden;}
.cont.hover-in{-webkit-transition:-webkit-transform .2s ease-out;-moz-transition:-moz-transform .2s ease-out;-ms-transition:-ms-transform .2s ease-out;transition:transform .2s ease-out}
.cont.hover-out{-webkit-transition:-webkit-transform .2s ease-in;-moz-transition:-moz-transform .2s ease-in;-ms-transition:-ms-transform .2s ease-in;transition:transform .2s ease-in}
.card:hover .cont{box-shadow:0 10px 30px rgba(0,0,0,.4)}

@keyframes slowScale{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@-webkit-keyframes slowScale{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.1)}}

.card_image{z-index:1;display:block;position:relative;width:100%;height:100%;position:absolute;left:0;top:0;background-repeat:no-repeat;background-size:100% 100%;background-position:right bottom;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

.card_image:after{content:" ";width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.4));transition:opacity .3s ease;opacity:0}

.card:hover .card_image{animation: slowScale 2s forwards;-webkit-animation: slowScale 2s forwards;}

.card_detail{ z-index:2;position:absolute;left:0;right:0;top:30px;bottom:0;pointer-events:none;-webkit-transform:translateZ(30px);-moz-transform:translateZ(30px);-ms-transform:translateZ(30px);transform:translateZ(30px)}
.card_detail a{display:block;width:100%;height:100%;text-decoration:none;overflow:hidden}
.card_detail .text{padding:36px 26px 30px 0px;position:absolute;/*bottom:0;*/left:140px;top:90px;text-align:left}
.card_detail h3{font-size:24px;font-weight:700;color:#14a6e0;margin:0 0 8px 0;line-height:1.4}
.card_detail p{font-size:14px;color:#14a6e0;line-height:1.6;padding:35px 0 5px 0}
.card_detail .icon{font-size:70px;color:#333;position:absolute;left:40px;top:130px;line-height:1}

.card:hover .card_detail h3,
.card:hover .card_detail p,
.card:hover .card_detail .icon{color: #00ac55}



@media screen and (min-width:768px) and (max-width:1366px){.about_box>div{}
.card_detail h3{font-size:20px}
.card_detail p{font-size:12px;line-height:1.6;padding:3px 0 3px 0}
.card_detail .icon{font-size:60px}
.card_detail .text{padding:0 30px 20px 30px}
}
@media screen and (max-width:767px){.about_box>div{width:90%;padding-top:0;margin:0 auto 10px auto;min-height:10px}
.cont{min-height:10px}
.card_detail,.card_detail .icon,.card_detail .text,.cont{position:relative;left:auto;top:auto;right:auto;bottom:auto;display:block}
.card_detail{-webkit-transform:translateZ(10px);-moz-transform:translateZ(10px);-ms-transform:translateZ(10px);transform:translateZ(10px)}
.card_detail .icon{margin:20px 0 10px 20px;text-align:left}
.card_detail .text{padding:0 20px 10px 20px}
.card_detail h3{font-size:16px;margin-bottom:2px}
.card_detail p{font-size:12px;line-height:1.6;padding:5px 0 5px 0}
.card_detail .icon{font-size:40px}
}

@media screen and (min-height:401px) and (max-height: 500px)  and ( max-width: 767px) {
        .card_detail .icon{ font-size: 30px; }
        .card_detail p.line{ display: none; }
}

@media screen and (max-height: 400px)  and ( max-width: 767px) {
    .card_detail a{ text-align: left; }
        .card_detail .icon{ font-size: 30px; line-height: 40px; margin: 10px !important; display: inline-block; vertical-align: top;}
        .card_detail .text{ display: inline-block; line-height: 40px; margin: 10px; padding: 0 !important; vertical-align:top; }
        .card_detail .text h3{ line-height: 40px; }
        .card_detail p{ display: none; }
}

@media screen and (max-height:1200px) and (-webkit-min-device-pixel-ratio:2){
.card_detail{-webkit-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;}
.card_detail .icon{margin:16px 0 0 16px}
.card_detail .text{padding:5px 16px 10px 16px;}
.card_detail p{font-size:10px;line-height:1.4;padding:3px 0 3px 0}
.card_detail p{line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}



@media screen and (max-width:767px){.nav_index{left:10px}
.nav_index>div>span{width:5px;height:5px;margin:3px 0}
}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.slide>div{position:relative;overflow:hidden;}
.slide>div>.bgs{width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;background-position:center center;background-repeat:no-repeat;background-size:cover;-webkit-transition:all 3s ease-out;-moz-transition:all 3s ease-out;-ms-transition:all 3s ease-out;transition:all 3s ease-out}
.current .slide>div.current .bgs{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1)}
.index_inner .solgan h3{font-family:'Titillium-Regular';font-size:30px;color:#ea5106;margin:-200px auto 20px 300px;position:relative;opacity:0;font-weight:400; float: left}
.index_inner .solgan h3:after{content:"";height:3px;width:75px;background:#ea5106;display:block;margin:20px auto 0 auto;}
.index_inner .solgan h2{color:#fff;font-size:46px;font-weight:700;position:relative;opacity:0 ;}
.current .slide .current .solgan h2{-webkit-animation:fadeInDown ease .4s forwards .2s;-moz-animation:fadeInDown ease .4s forwards .2s;-ms-animation:fadeInDown ease .4s forwards .2s;animation:fadeInDown ease .4s forwards .2s}
.current .slide .current .solgan h3{-webkit-animation:fadeInDown ease .4s forwards;-moz-animation:fadeInDown ease .4s forwards;-ms-animation:fadeInDown ease .4s forwards;animation:fadeInDown ease .4s forwards}
.index_nav ul{margin:200px auto 0 auto;display:inline-block}
.index_nav ul li{float:left;width:76px;height:76px;cursor:pointer}
.index_nav ul li:nth-child(2),.index_nav ul li:nth-child(4){margin:60px -20px 0 -20px}
.index_nav ul li a{overflow:hidden;width:100%;height:100%;display:block;position:relative;border:2px solid #fff;border-radius:5px;

    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
        -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

	-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background .2s ease-out,border-color .2s ease-out;-moz-transition:background .2s ease-out,border-color .2s ease-out;-ms-transition:background .2s ease-out,border-color .2s ease-out;transition:background .2s ease-out,border-color .2s ease-out}
.index_nav ul li a:after{background:#ea5106;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:5px;display:block;content:"";

    -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    -o-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
    opacity: 0;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
transition:all .2s ease-out

}
.index_nav ul li a:hover{border-color:transparent}
.index_nav ul li a:hover::after{opacity: 1;	-webkit-transform:none;-ms-transform:none;-moz-transform:none;transform:none}



.index_nav ul li i{position:absolute;left:0;top:0;width:76px;height:76px;font-size:46px;text-align:center;line-height:76px;display:block;color:#fff;z-index:1;opacity:1;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out}
.index_nav ul li a:hover i{opacity:0}
.index_nav ul li span{width:76px;height:76px;display:block;position:absolute;left:0;top:0;z-index:2;font-size:20px;font-weight:700;text-align:center;line-height:76px;color:#fff;opacity:0;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.index_nav ul li a:hover span{opacity:1}
.arrow{width:42px;height:42px;position:absolute;bottom:30px;left:50%;margin-left:-21px;z-index:3; opacity: 0;

}
.arrow span{width:42px;height:42px;border-radius:5px;display:block;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);background:#ea5106}
.arrow i{color:#fff;font-size:20px;position:absolute;left:0;top:0;width:42px;height:42px;text-align:center;line-height:42px}
.current .arrow{-webkit-animation:arrow ease 2s infinite .4s;-moz-animation:arrow ease 2s infinite .4s;-ms-animation:arrow ease 2s infinite .4s;animation:arrow ease 2s infinite .4s}