@charset "utf-8";
b{font-weight:bold;}
.fl{float: left}
.fr{float: right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {	display:block;}
.active-banner{height: 646px; background: url("../assets/active/banner.jpg") no-repeat center top; overflow: hidden }
.active-wrapper{
    width: 1100px; margin: 0 auto;
}
.active-banner .bd{height: 100px;  width: 750px; margin: 310px auto 0 auto; text-align: center;}
.active-banner .bd p{line-height: 40px; font-size: 22px; color: #808080; text-align: center}
.active-banner .hd{height: 46px; margin-top: 70px; background: url("../assets/active/line-bg.gif") repeat-x center center; text-align: center;}
.active-banner .hd li{ display: inline-block; position: relative; margin: 0 5px; cursor: pointer; background: url("../assets/active/item-bg.png") no-repeat center top}
.active-banner .hd li i{width: 46px; height: 46px; display: block;}
.active-banner .hd li.on i{
    background: url("../assets/active/cur-bg.png") no-repeat center center;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
.active-container1{ background: url("../assets/active/red-bg.gif") repeat-x left top;
}
.active-container1 .left{width: 509px; height: 520px; margin-top: 20px;
    float: left; background: url("../assets/active/shadow-bg.png") no-repeat left top; padding-top: 76px;}
.active-container1 .left .container{width: 420px; margin: 0 auto}
.active-container1 .left .list{ padding-bottom: 80px;}
.active-container1 .left .list li{height: 40px; line-height: 40px; margin-bottom: 12px; font-size: 18px; color: #525252}
.active-container1 .left .list .icon{width: 40px; height: 40px; display: inline-block; margin-right: 10px;float: left;}
.active-container1 .left .list .icon.icon01{background: url("../assets/active/icon01.png") no-repeat center center;}
.active-container1 .left .list .icon.icon02{background: url("../assets/active/icon02.png") no-repeat center center;}
.active-container1 .left .list .icon.icon03{background: url("../assets/active/icon03.png") no-repeat center center;}
.active-container1 .left .list .icon.icon04{background: url("../assets/active/icon04.png") no-repeat center center;}
.active-container1 .left .list .icon.icon05{background: url("../assets/active/icon05.png") no-repeat center center;}
.active-container1 .left .list .icon.icon06{background: url("../assets/active/icon06.png") no-repeat center center;}
.active-container1 .left .list .icon.icon07{background: url("../assets/active/icon07.png") no-repeat center center;}
.active-container1 .left .list li b{font-weight:bold;}
.active-container2{ background:url("../assets/active/red-bg.gif") repeat-x left bottom #cc3333; padding: 0px 0 50px 0}
.active-title{ height: 70px; line-height: 70px; font-size: 40px; color: #fff; padding: 40px 0 0 20px; text-align: left; font-weight: bold}
.active-subtitle{ font-size: 20px; font-weight: bold; color: #fff; text-align: left; padding-left:10px;}
.active-container2 .list{width: 950px; height: 800px; overflow: hidden; margin: 0px auto; padding: 20px 50px}
.active-container2 .list ul{width: 120%;}
.active-container2 .list ul li{width: 310px; height: 360px; float: left; margin: 20px 10px 20px 0; position: relative;}
.active-container2 .list ul li a{position: absolute; left: 0px; top:0px; width: 310px; height: 300px; background: #fff; -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; padding: 30px 0; text-align: center }
.active-container2 .list ul li a img{width: 96px; height: 96px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%; margin-top: 30px}
.active-container2 .list ul li a:before{
    content: " ";
    display: block;;
    width: 117px; height: 164px; background: url("../assets/active/bg-tp-rt.png") no-repeat; background-size: cover;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:10px; position: absolute;; right: 0; top:0px;
}
.active-container2 .list ul li a:after{
    content: " ";
    display: block;;
    width: 100px; height:135px; background: url("../assets/active/bg-bt-lt.png") no-repeat left bottom; background-size: cover;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:10px; position: absolute;; left: 0; bottom:0px;
}
.active-container2 .list ul li a:hover{left: -30px; top: -30px; width: 370px; height: 380px; -webkit-border-radius: 10px;
    -moz-border-radius: 10px; z-index: 999;
    border-radius:10px;padding:20px 0; }
.active-container2 .list .title{ font-size: 16px;color: #ae2d2d}
.active-container2 .list .name{ font-size: 14px; margin-top: 20px;color: #ae2d2d}
.active-container2 .list .info{ font-size: 14px; margin-top: 20px; color: #e67612}
.active-container2 .list .btn{ width: 100px; height: 40px; line-height: 40px; text-align: center; color: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px; display: inline-block; background: #fb675a}
.active-container2 .list .margin-t{margin-top: 20px;}
.active-container2 .list ul li a:hover .margin-t{margin-top: 30px;}
.active-container2 .moreBtn{width: 220px; height: 45px; line-height: 45px; display: inline-block; text-align: center; background: #fff; color:#e67612;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px; font-size: 14px; }
.active-container3{height: 710px; padding-top: 50px; background: url("../assets/active/red-bg2.gif") repeat-x left bottom #fff; position: relative}
.active-container3 .top-l{ width: 500px; float: left; padding-top: 80px;}
.active-container3 .top-l .title{font-size: 40px; font-weight: bold; color: #cc3333; text-align: right}
.active-container3 .top-l .subtitle{font-size: 20px; font-weight: bold;color: #cc3333; text-align: right}
.active-container3 .top-r{ width: 530px; height: 390px; float: right;
    background: url("../assets/active/bottom-box.png") no-repeat}
.active-container3 .top-r .pic{ width: 498px; height: 354px; overflow: hidden;padding-top: 5px; padding-left: 8px;}
.active-container3 .hd-bg{ width: 1059px; height: 257px; margin: 20px auto; background: url("../assets/active/bg-box.png") no-repeat}
.active-container3 .hd{ width: 900px; height: 145px; padding-top:60px; padding-bottom: 30px; padding-left: 80px; overflow: hidden; text-align: center;}
.active-container3 .hd ul{width:900px}
.active-container3 .hd li{ margin:0  4px; position: relative; height: 135px; display: inline-block; cursor: pointer}
.active-container3 .hd li img{display: inline-block; -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    transition: transform 0.3s;}
.active-container3 .hd li.on{-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333; z-index: 99 }
.active-container3 .hd li.on img{-webkit-transform: scale(1.1);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);}


/*pad*/
@media only screen and (min-width:768px) and (max-width:1219px){

}
/*mobile*/
@media only screen and (min-width:320px) and (max-width:767px){

}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        transition: all 5s;
    }
}