

.optop{text-align:center; background:url('../box/131447070.jpg') center; padding:48px 0; animation:bg 8s ease-in-out infinite;}
.optop h1{font-weight:bold; font-size:40px; margin-bottom:20px;}
.optop h2{font-size:20px; margin-bottom:50px;}
.optop a.ri-share-circle-line{background:#3763dd; color:#fff; display:inline-block; padding:10px 40px; border-radius:54px; line-height:1.75; font-size:18px;}
.optop a.ri-share-circle-line:before{padding-right:4px; position:relative; left:-4px;}
.optop a.ri-share-circle-line:hover{background:#5691f5;}
.optop aside{margin-top:40px;}
.optop p a{color:#3763dd;}
.optop p a:hover{text-decoration:underline;} 
@keyframes bg {
    0% { background-size:100% 110%;}
    60% {background-size:110% 120%;}
    100% {background-size:100% 110%;}
}

.optop h4{margin-top:20px;}
.optop h4 a{display:inline-block; font-size:14px; background:#e8e8e8; padding:2px 8px; border-radius:3px; margin-right:5px;
box-shadow:0 0 3px rgba(0,0,0,.08); transition:.3s; color:#fff;
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#eae066), color-stop(100%,#9a8917));
background:-moz-linear-gradient(to right bottom, #eae066 0%, #9a8917 100%);
background:-webkit-linear-gradient(to right bottom, #eae066 0%, #9a8917 100%);
background:-o-linear-gradient(to right bottom, #eae066 0% #9a8917 100%);
background:-ms-linear-gradient(to right bottom, #eae066 0%, #9a8917 100%);
background:linear-gradient(to right bottom, #eae066 0%, #9a8917 100%);}
.optop h4 a:hover{
box-shadow:0 0 3px rgba(0,0,0,.08);
background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,#eae066), color-stop(100%,#9a8917));
background:-moz-linear-gradient(to left top, #eae066 0%, #9a8917 100%);
background:-webkit-linear-gradient(to left top, #eae066 0%, #9a8917 100%);
background:-o-linear-gradient(to left top, #eae066 0% #9a8917 100%);
background:-ms-linear-gradient(to left top, #eae066 0%, #9a8917 100%);
background:linear-gradient(to left top, #eae066 0%, #9a8917 100%);}
.optop h4 a + a{
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#e8a8a8), color-stop(100%,#a22a2a));
background:-moz-linear-gradient(to right bottom, #e8a8a8 0%, #a22a2a 100%);
background:-webkit-linear-gradient(to right bottom, #e8a8a8 0%, #a22a2a 100%);
background:-o-linear-gradient(to right bottom, #e8a8a8 0% #a22a2a 100%);
background:-ms-linear-gradient(to right bottom, #e8a8a8 0%, #a22a2a 100%);
background:linear-gradient(to right bottom, #e8a8a8 0%, #a22a2a 100%);}
.optop h4 a + a:hover{
box-shadow:0 0 3px rgba(0,0,0,.08);
background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,#e8a8a8), color-stop(100%,#a22a2a));
background:-moz-linear-gradient(to left top, #e8a8a8 0%, #a22a2a 100%);
background:-webkit-linear-gradient(to left top, #e8a8a8 0%, #a22a2a 100%);
background:-o-linear-gradient(to left top, #e8a8a8 0% #a22a2a 100%);
background:-ms-linear-gradient(to left top, #e8a8a8 0%, #a22a2a 100%);
background:linear-gradient(to left top, #e8a8a8 0%, #a22a2a 100%);}
.optop h4 a i{margin-right:2px;}
@media(max-width:767px){
.optop{padding:28px 0;}
.optop h1{font-size:21px; margin-bottom:10px;}
.optop h2{font-size:15px; margin-bottom:25px;}
.optop aside{margin-top:20px; font-size:14px;}
}

 

.banlist1{padding:38px 0;}
.banlist1 article{width:1380px;}
.banlist1 ol{float:right; width:12%; border-left:1px dashed #d8d8d8; min-height:588px;}
.banlist1 ol li{font-size:20px; padding:8px 0 8px 18px; cursor:pointer; position:relative; transition:.2s;}
.banlist1 ol li:before{position:absolute; left:-7px; top:50%; margin-top:-7px; width:13px; height:13px; border:1px solid #d8d8d8; border-radius:50%; content:'';}
.banlist1 ol li.on{font-size:24px; font-weight:bold; color:rgb(65,93,138);}
.banlist1 ol li.on:before{border:2px solid rgb(65,93,138);}
.banlist1 ul{float:left; width:88%; padding-right:38px;}
.banlist1 ul li{padding:20px; display:none; background:url('../box/121059299.jpg') center; border-radius:12px;}
.banlist1 ul li.on{display:block;}
.banlist1 ul li img{display:block; width:100%;}
.banlist1.left ol{float:left; text-align:right; border-left:0; border-right:1px dashed #d8d8d8;}
.banlist1.left ol li{padding:8px 18px 8px 0;}
.banlist1.left ol li:before{left:auto; right:-7px;}
.banlist1.left ul{padding-right:0; padding-left:38px;}
.banlist1.left ul li{background-image:url('../box/131447070.jpg');}
@media(max-width:1200px){
.bansan ul{margin:0 -12px;}
.bansan ul>li{padding:0 12px;}
.banlist1 ol{width:14%; min-height:488px;}
.banlist1 ol li{font-size:18px; padding:8px 0 8px 16px;}
.banlist1 ol li:before{left:-6px; margin-top:-6px; width:11px; height:11px;}
.banlist1 ol li.on{font-size:22px;}
.banlist1 ul{width:86%; padding-right:28px;}
.banlist1.left ol li:before{left:auto; right:-6px;}
.banlist1.left ul{padding-right:0; padding-left:28px;}
}
@media(max-width:992px){
.banlist1 ol li{font-size:15px; padding:5px 0 5px 16px;}
.banlist1 ol li.on{font-size:18px;}
.banslide .slide>article{height:auto; display:block; padding:28px 18px 58px 18px;}
.banslide .slide>article>aside{width:100%; padding-bottom:18px; text-align:center;}
.banslide .slide>article>ins{width:100%;}
.swiper>.wrapper>.slide img{margin:0 auto;}
.bansan ul{margin:0 -8px;}
.bansan ul>li{padding:0 8px;}
.banlist1.left ol li{padding:5px 16px 5px 0;}
}
@media(max-width:992px) and (min-width:768px){
.bansan ul>li>a{padding:18px; text-align:center;}
.bansan ul>li>a>i{float:none; margin:0 auto;}
.bansan ul>li>a>b{padding:0; margin-top:18px;}
.bansan ul>li>a>p{padding:0;}
}
@media(max-width:767px){
.bansan ul>li{width:100%; margin-bottom:8px;}
.banlist1 ol{width:22%; min-height:188px;}
.banlist1 ol li{font-size:14px; padding:2px 0 2px 8px;}
.banlist1 ol li:before{left:-5px; margin-top:-5px; width:9px; height:9px;}
.banlist1 ol li.on{font-size:14px;}
.banlist1 ul{width:78%; padding-right:8px;}
.banlist1.left ul{padding-right:0; padding-left:8px;}
.banlist1.left ol li:before{left:auto; right:-5px;}
.banlist1.left ol li{padding:2px 8px 2px 0;}
}

.cmbg{background:#f7f8fa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAQMAAABsABwUAAAABlBMVEUAAADd3uHogCXTAAAAAXRSTlMAQObYZgAAAA9JREFUCNdjOMDAAMQUAwBnyAGBGdiqIAAAAABJRU5ErkJggg==');
padding:0 0 50px 0;}
.community article{width:1300px;}
.community ul{margin:10px -10px 0 -10px;}
.community li{float:left; width:33.333%; margin-top:20px; padding:0 10px;}
.community li>span{background:#fff; display:block; padding:30px; border-radius:8px; text-align:center;}
.community li>span>img{display:block; height:80px; margin:auto;}
.community li>span>b{display:block; font-size:22px; margin:15px 0;}
.community li>span>p{display:block;}
.community li>span>a{display:block; line-height:38px; color:#fff; margin:15px 0; font-size:15px; background:#3763dd; border-radius:50px; font-weight:bold;}
.community li>span>a:before{font-weight:normal; margin-right:4px;}
.community li>span>a:hover{opacity:.8;}
@media(max-width:767px){
.community ul{margin:10px 0 0;}
.community li{float:none; width:auto; margin-top:10px; padding:0;}

}