/*全局样式*/
@charset "utf-8";
body {font:14px/1.6 "微软雅黑",黑体,"AlibabaPuHuiTi", "Arial", "Impact";color: #222;letter-spacing: 1px;-webkit-text-size-adjust: 100%;background-color:#02082c;overflow-x: hidden;min-width: 320px;}
.container-fluid {
    max-width:1430px !important;
    padding-left: 15px;
    padding-right: 15px;
}



.main{width: 1400px;max-width: 100%;margin: 0 auto;min-height: 600px;padding-top: 120px;}
.box1{display: flex;justify-content: space-between;padding: 0 40px 44px;}
.box1 .zuo{width: calc(17% + 106px);margin-top: 70px;position: relative;padding:30px 35px;top:-22px;transition: all .6s;}
.box1 .zhong{width: calc(66% - 212px);padding: 0 40px;}
.box1 .you{width: calc(17% + 106px);margin-top: 70px;position: relative;padding: 35px 35px 30px;top:-22px;transition: all .6s;}



.box1 .bjimg{width: 100%;display: block;position:absolute;left: 0;top:0;z-index: 1;}
.box1 .zuo .ul{position: relative;z-index: 3;}
.box1 .zuo .ul a{display: block;color: #fff;position: relative;font-size: 16px;color: #2393ea;}
.box1 .zuo .ul a:after{content: "";width: calc(100% - 28px);height: 1px;background:#02082c;background: linear-gradient(to right, #042a7f, #0390d0);position: absolute;right: 8px;bottom: 0;border-radius: 0 11px 11px 11px;overflow: hidden;}
.box1 .zuo .ul a:before{content: "";width:23px;height: 1px;background: #042a7f;position: absolute;left: -1px;bottom: 4.8px;transform:rotate(26deg);border-radius: 11px;overflow: hidden;}
.box1 .zuo .ul a img{display: block;position: absolute;left: 30px;top:22px;z-index: 5;}
.box1 .zuo .ul a span{width: 100%;height: 100%;border: 1px solid #0167a8;border-radius: 11px;position: absolute;left: 0;top:0;background:#02082c;background: linear-gradient(to right, #042a7f, #0390d0);z-index: 2;transition: all .3s;transform:rotateX(90deg);opacity: 0;}
.box1 .zuo .ul a div{display: block;position: relative;z-index: 4;padding: 12px 20px 12px 56px;line-height: 28px;}
.box1 .zuo .ul a:hover span{transform:rotateX(0deg);opacity: 1;}
.box1 .zuo .ul a:hover{color: #00d8ff;}
.box1 .zuo .ul a.active span{transform:rotateX(0deg);opacity: 1;}
.box1 .zuo .ul a.active{color: #00d8ff;}
.box1 .zhong .img {margin-bottom: 28px;}
.box1 .zhong .img img{height: 180px;display: block;margin: 0 auto;transition: all 3s;transform:rotate(0deg)}
.box1 .zhong .ttbox{overflow: hidden;}
.box1 .zhong .ttbox .tt{display: none;}
.box1 .zhong .ttbox .tt.active{display: block;}
.box1 .zhong .ttbox .tt img{display: block;width: 100%;}
.box1 .you .ul2{display: flex;flex-wrap: wrap;justify-content: space-between;padding-bottom:11px;}
.box1 .you .ul2 .tt{width: calc(50% - 10px);position: relative;display: flex;align-items: center;justify-content: center;position: relative;text-align: center;margin-bottom: 20px;}
.box1 .you .ul2 .tt img{display: block;position: relative;z-index: 1;animation:xx 2s linear infinite;;}
.box1 .you .ul2 .tt div{display: block;position: absolute;z-index: 2;font-size: 16px;color: #8bb6d7;}
.box1 .you .ul2 .tt div span{display: block;color: #00d2ff;}
.box1 .you .more{position: relative;height:45px;width: 100%;display: block;font-size: 17px;letter-spacing: 2px;color: #fff;border-radius:8px;overflow: hidden;top: 0;transition: all .2s!important;}
.box1 .you .more > img{display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 1;}
.box1 .you .more span{display: flex;align-items: center;justify-content: center;width: 100%;z-index: 2;position: relative;height: 100%;transition: all .3s;animation:fd .6s alternate infinite;}
.box1 .you .more span img{display: block;margin-right: 11px;}
.box1 .you .more:hover{top:4px;}
/*.box1 .you .more span{background: #0390d0;}*/


@keyframes xx {
  from {
    transform: rotate(0deg); /* 开始时旋转0度 */
  }
  to {
    transform: rotate(360deg); /* 结束时旋转360度 */
  }
}
@keyframes fd {
    0%{background: transparent;}
    100%{background: #2472a7;}
    0%{background: transparent;}
}



.box2{text-align: center;font-size: 14px;color: #fff;padding: 18px 15px;border-top: 1px solid rgba(255, 255, 255, .2);}


.main{transition: all .6s;}
body.active .box1 .zhong .img img{transform:rotateY(360deg)}
body.active .box1 .zuo{top: 0;}
body.active .box1 .you{top: 0;}
body.active .main{background-position:  center 0!important;}



.box1 .you .ul2box2{display: none;}
.box1 .you .ul2box2.active{display: block;}










/*02082c*/
/*0390d0*/


@media (max-width:991px) {
    .main{min-height: inherit;padding-top:210px;background-size:1000px !important;background-position: 46% 0 !important;}
    .box1{padding:0 15px 30px;flex-wrap: wrap;}
    .box1 .zuo{width: 100%;margin-top: 0;position: relative;padding: 20px;top:-22px;transition: all .6s;overflow: hidden;}
    .box1 .zhong{width: 100%;padding: 0 15px;margin-top: 20px;}
    .box1 .you{width: 100%;margin-top: 30px;position: relative;padding:20px;top:-22px;transition: all .6s;overflow: hidden;}

    body.active .main{background-position: 46% 0 !important;}




    .box1 .bjimg{width: 100%;display: block;position:absolute;left: 0;top:0;z-index: 1;}
    .box1 .zuo .ul{position: relative;z-index: 3;}
    .box1 .zuo .ul a{display: block;color: #fff;position: relative;font-size: 16px;color: #2393ea;}
    .box1 .zuo .ul a:after{content: "";width: calc(100% - 28px);height: 1px;background:#02082c;background: linear-gradient(to right, #042a7f, #0390d0);position: absolute;right: 8px;bottom: 0;border-radius: 0 11px 11px 11px;overflow: hidden;}
    .box1 .zuo .ul a:before{content: "";width:23px;height: 1px;background: #042a7f;position: absolute;left: -1px;bottom: 4.8px;transform:rotate(26deg);border-radius: 11px;overflow: hidden;}
    .box1 .zuo .ul a img{display: block;position: absolute;left: 30px;top:22px;z-index: 5;}
    .box1 .zuo .ul a span{width: 100%;height: 100%;border: 1px solid #0167a8;border-radius: 11px;position: absolute;left: 0;top:0;background:#02082c;background: linear-gradient(to right, #042a7f, #0390d0);z-index: 2;transition: all .3s;transform:rotateX(90deg);opacity: 0;}
    .box1 .zuo .ul a div{display: block;position: relative;z-index: 4;padding: 12px 20px 12px 56px;line-height: 28px;}
    .box1 .zuo .ul a:hover span{transform:rotateX(0deg);opacity: 1;}
    .box1 .zuo .ul a:hover{color: #00d8ff;}
    .box1 .zuo .ul a.active span{transform:rotateX(0deg);opacity: 1;}
    .box1 .zuo .ul a.active{color: #00d8ff;}
    .box1 .zhong .img {margin-bottom: 0;position: absolute;left: 0;right: 0;top:80px;}
    .box1 .zhong .img img{height: 110px;}
    .box1 .zhong .ttbox{overflow: hidden;}
    .box1 .zhong .ttbox .tt{display: none;height: auto!important;}
    .box1 .zhong .ttbox .tt.active{display: block;}
    .box1 .zhong .ttbox .tt img{display: block;width: 100%;}
    .box1 .you .ul2{display: flex;flex-wrap: wrap;justify-content: space-between;padding-bottom:11px;}
    .box1 .you .ul2 .tt{width: calc(50% - 10px);position: relative;display: flex;align-items: center;justify-content: center;position: relative;text-align: center;margin-bottom: 20px;}
    .box1 .you .ul2 .tt img{display: block;position: relative;z-index: 1;animation:xx 2s linear infinite;;}
    .box1 .you .ul2 .tt div{display: block;position: absolute;z-index: 2;font-size: 16px;color: #8bb6d7;}
    .box1 .you .ul2 .tt div span{display: block;color: #00d2ff;}
    .box1 .you .more{position: relative;height:45px;width: 100%;display: block;font-size: 17px;letter-spacing: 2px;color: #fff;border-radius:8px;overflow: hidden;top: 0;transition: all .2s!important;}
    .box1 .you .more > img{display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 1;}
    .box1 .you .more span{display: flex;align-items: center;justify-content: center;width: 100%;z-index: 2;position: relative;height: 100%;transition: all .3s;animation:fd .6s alternate infinite;}
    .box1 .you .more span img{display: block;margin-right: 11px;}
    .box1 .you .more:hover{top:4px;}
    /*.box1 .you .more span{background: #0390d0;}*/



.box2{font-size: 12px;}





}

@media (max-width:767px) {


}