*{font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif, PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial, "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;}
body { /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif, PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;margin: 0;text-decoration: none;padding: 0;color: #333;background: #fff;}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 60%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
#search{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);box-sizing:content-box;color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAAhlJREFUSA3tVsFKQkEU9an5A0oKtewTjBYVIcgTdBVtC4q2QdsWLgSDqGU/UFCroKUiD0UiWoQu2lbbIBX9AE20cx4OvGRm3ntRrhwYZrx3zj13zszcZyAwb3MF/kkBw0/carUaH41G5ng8jhNnGEY7GAxa6XS67SeOjfUCsCxrHYQFEK1ifQnELRtsGAmMOfxuIIGCaZpPXuLZWLeFIN0H6RVID6PR6E0ymfxyYprN5kKv19uDrYh+nslkLp1+1VwrNUiPsZvTUCi04iZnrVZbGg6Hr0jwCDu/VhEKu5KY8oL0LhKJrKVSqQ8B0I28AyBvQfYNN9mDqkA8UxDnvZIyDlXhkRCriivsUmJmzosUi8VuxUKvI+8BsYyhw0iJkTGfTHn6IukCCd8EU2IMYZONYZkRoEVkbT8Zmd/NhqSJ9b9jt8B/4ZdKjVvZQdYsDr9qUCuBrq1mKmILwCyLg1/mCSbHUqrDSon5LLDjRrfb3dWBZT5WMWLdCo6UmAFZe7Hrs3q97llyVi9Ai8Qyhq4piVl5QHwyGAzeQb6sC0IfE0TVegPmwq1qcb2SmE7WXATKg/y5UqkcyM6cNvr6/f4nIEP0F2LdmrJWO4HOzyLOr4xk7DfOm495lmc6kTeM+T1sO0j6wRljeu6JWIDEHwEWGNpA1kH/8UcASW6RHF+0bVywR4GdyUhyyE/pZ9+gzubsWeeMcwWgwDcwY/ak9MElrAAAAABJRU5ErkJggg==) no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}

.shujia{height: 50px;width: 50px; float: right;display: flex;flex-direction: column;justify-content: center;display: none;cursor: pointer;}
.shujia img{height: 50px;width: 50px;}

/*轮播图*/

/*轮播图css*/
.swiper-container {padding-bottom:40px;cursor: pointer;}
.swiper-container{background-color: #333240;}
.swiper-wrapper{height : 50%;width: 100%;}
.swiper-slide {width:50%;height: 50%;transition-timing-function:linear;}

.swiper-slide>img{width:100%;height: 400px;}
@media only screen and (max-width:1200px){  .swiper-slide {width:770px;}  }
@media only screen and (max-width:980px){  .swiper-slide {width:471px;}  }
@media only screen and (max-height:480px){  .swiper-slide {width:471px;}  }
.swiper-slide img{width:100%;border-radius: 4px;}
.swiper-slide .title{position:absolute;transform:rotate(90deg);transform-origin:left top;left:-3px;font-size:11px;color: rgb(106, 95, 95);}
.swiper-button-next, .swiper-button-prev{width:86px;height:112px;margin-top:-56px;outline:none;width: 64px;height: 64px;}
.swiper-button-next:hover{display: block;} .swiper-button-prev:hover{display: block;}
.swiper-button-next{background-image:url(../../../../img/swiper_next1de2f3d.png); background-size: cover;}
.swiper-button-prev{background-image:url(../../../../img/swiper_prev516fbba.png); background-size: cover;}
.swiper-pagination-bullet{background:none;opacity:1;margin:0 6px !important;width:9px;height:9px;position:relative;outline:none;vertical-align:middle;}
.swiper-pagination-bullet span{width:3px;height:3px;background:#CCC;display:block;border-radius:50%;margin-top:3px;margin-left:3px;}
.swiper-pagination-bullet i{background:#000;height:1px;width:20px;position:absolute;top:4px;transform:scaleX(0);transform-origin:left;z-index:3;transition-timing-function:linear;}
.swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{width:9px;height:9px;margin-top:0;margin-left:0;background:#000;position:relative;z-index:1;}
.swiper-pagination-bullet-active i{animation:middle 6s;}
.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{animation:first 6s;}
.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{animation:last 6s;}
@keyframes first{ 0% {transform:scaleX(0.5);left:0px;}/*091*/ 100% {transform:scaleX(1);left:2px;} /*0915*/}
@keyframes last{ 0% {transform:scaleX(0.7);left:-10px;}/*1090*/ 20% {transform:scaleX(0.3);left:2px;} /*090*/ 100% {transform:scaleX(0.3);left:0px;} /*090*/}
@keyframes middle{ 0% {transform:scaleX(0.7);left:-10px;}/*1091*/ 20% {transform:scaleX(0.45);left:2px;}/*092*/ 100% {transform:scaleX(1);left:2px;} /*0913*/}

<!--下部导航栏-->
.unders{height: 64px;width:100%;background-color: #333240;}
.unders .under_li{height: 64px;width:80%;margin: 0 auto;background-color: #333240;display: flex;justify-content: space-evenly;line-height: 64px;color: white;}
.unders .under_li a{color: white;font-size: 1.5rem;}
.unders .under_li a:hover{color: #3498db;}

/*app 导航*/
.app-div{width: 100%;height: 70px;line-height: 100px;    font-size: 0.8rem;display: none;    background-size: 100% 100%;}
.app-div .app-div-left{width: 40%;height: 30px;float: left;text-align: center;cursor: pointer;}
.app-div .app-div-right{width: 40%;height: 30px;float: right;text-align: center;cursor: pointer;}
.app-div img{height: 100%;width: 30px;}

/*肚子*/
.article{width: 80%;margin: 0 auto;padding: 0;clear: both;}
/*第一大行*/
.article .articl-1{width: 100%;padding: 0;clear:both; margin-top: 30px;}
.article .articl-1 .articl-1-1 .articl-1-1-h3{float: left;font-size: 1.7rem;font-weight: bold;}
.article .articl-1 .articl-1-1 .articl-1-1-left{float: left;margin-left: 7%;cursor:pointer; font-size: 1.5rem;}
.article .articl-1 .articl-1-1 .articl-1-1-left:hover{color:#3498db;}
.article .articl-1 .articl-1-1 .articl-1-1-right{float: right; font-size: 1.5rem;}
.article .articl-1 .articl-1-1 .articl-1-1-right:hover{color:#3498db;}

.articl-1-2{width: 100%;padding: 0; margin-top: 30px;display: flex;justify-content: space-between;flex-wrap:wrap;}
.articl-1-2 .articl-1-2-box{ margin-top: 30px;height: 289px;width: 14%;}
.articl-1-2 .articl-1-2-box a img{height: 270px;width: 100%;border-radius: 5px; transition: all 1s; }
.articl-1-2 .articl-1-2-box a img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
.articl-1-2 .articl-1-2-box a div{height: 20px;width: 100%; position:relative;top: 0px;color: white;margin: 0;}
.articl-1-2 .articl-1-2-box a div span{font-size: 0.5em;}
.articl-1-2 .articl-1-2-box a div span:hover{color:#3498db;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-left{float: left;margin-left: 3px;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-right{float: right; margin-right: 3px;}
.articl-1-2 .articl-1-2-box a span{position:relative;top: -20px;}
.articl-1-2 .articl-1-2-box a span:hover{color:#3498db;}

/*第二大行*/
.article .articl-2{width: 100%;padding: 0;clear:both; margin-top: 30px;background: #ff585b;clear: both;}
/*右*/
.article .articl-2 .articl-2-1-left{height: 700px;float: left;width: 60%;}
.articl-2-1-left-box{width: 100%;display:flex;justify-content: space-between;margin-top: 20px;}

.article2div-left{height: 270px;width: 100%;border: 5px solid #FFF;margin-bottom: 5px;box-shadow: 0 0 12px rgba(0,0,0,0.1);}
.article2div-left a,.article2div-span span{font-size: 0.7em;}
.article2div-left a:hover{color:#3498db;}
.article2div-img{width: 100%;height: 80%;overflow: hidden;box-shadow: 0 0 12px rgba(0,0,0,0.1);}
.article2div-img>a>img{cursor: pointer;transition: all 1s;width: 100%;}
.article2div-img>a>img:hover{transform: scale(1.3);}
.article2div-span{width: 100%; color: #999999; }
.author-name{float: left;}
.article2div-kan{background-position: -10px -553px;background-position-x: -10px;background-position-y: -553px;background-image: url(../../../../img/spritesheet.png);background-repeat: no-repeat;float: right;width: 23px;height: 20px;margin-left: 2%;}
.article2div-kan-shuju{float: right;margin-left: 2%;}
.article2div-shouchang{background-position: -10px -866px;background-position-x: -10px;background-position-y: -866px;background-image: url(../../../../img/spritesheet.png);background-repeat: no-repeat;float: right;width: 23px;height: 20px;margin-left: 2%;}
.article2div-shouchang-shuju{float: right;margin-left: 2%;}

/*左*/
.article .articl-2 .articl-2-2-right{height: 700px;float: right;width: 35%;}
.articl-2-2-right-1{width: 100%;height: 200px;}
.articl-2-2-left-box{height:100%;width: 40%;float: left;}
.articl-2-2-left-box img{height: 185px;width: 100%;border-radius: 5%;transition: all 1s;}
.articl-2-2-left-box img:hover{transform: scale(1.03);}
.articl-2-2-right-box{height: 100%;width: 50%;float: right;}
.articl-2-2-right-box a{padding: 0px;margin: 0px;    white-space: nowrap;font-size: 18px;display: block;}
.articl-2-2-right-box span{padding-right: 5px;font-size: 0.9rem;}
.articl-2-2-right-box p{ color: #999999; font-size: 0.8rem;}
.articl-2-2-right-box p span{ font-size: 0.7rem;}
.red{color: red;font-size: 0.8rem;}

/*第三大行*/
.articl-3{height: 700px;width: 100%;clear: both;}

/*第四大行*/
.articl-4{height: 180px;width: 100%;}
.articl-4 img{height: 100%;width: 100%;}


/*第六大行*/
.articl-6{width: 100%;height: 600px;clear: both;}
.articl-6-box{width: 100%;height: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.articl-6-box .box-6-article2div-left{height: 80%;margin-bottom: 5px;border-radius: 5%;width: 23%;}
.articl-6-box .box-6-article2div-left:hover{box-shadow: 3px 3px 10px rgba(0,0,0,0.5);}
.box-6-article2div-img{width: 100%;height: 80%;overflow: hidden;box-shadow: 0 0 12px rgba(0,0,0,0.1);}
.box-6-article2div-img img{width: 100%;height: 100%;border-top-left-radius:  5%;border-top-right-radius: 5%;}
.article2div-span p{padding: 0px;margin: 0px;float: left;color: #666666; font-size: 0.8rem;    line-height: 18px;}

/*第七大行*/
.articl-7{width: 100%;height: 700px;background: #686367;color: white;margin-bottom: 30px;clear: both;}
.articl-7-box{height: 100%;width: 80%;margin: 0 auto;}
.articl-7-box h3{color: white;}
.articl-7-box-demo{width: 100%;display: flex;justify-content: space-between;margin-top: 10px;}

.articl-7-2-left-box{height:100%;width: 40%;float: left;}
.articl-7-2-left-box img{height: 100%;width: 100%;border-top-left-radius: 5%;border-bottom-left-radius:5%;transition: all 1s;}
.articl-7-2-right-box{height: 100%;width: 50%;float: left;background:  rgba(0,0,0,0.1);border-top-right-radius: 5%;border-bottom-right-radius:5%;padding-left: 10px;}
.articl-7-2-right-box a{padding: 0px;margin: 0px;    white-space: nowrap;font-size: 18px;display: block;}
.articl-7-2-right-box a:hover{color:#3498db;}
.articl-7-2-right-box span{padding-right: 5px;font-size: 0.8rem;}
.articl-7-2-right-box p{font-size: 0.8rem;}
.articl-7-2-right-box a{color: white;}



/*底部*/
footer{text-align: center;color: white;font-size: 1em;height: 200px;width: 100%;background: #282828;"微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";margin-top: 70px;}

/*响应式*/
@media screen and (max-width: 1100px) {
    .homeheader .centre{width: 100%;}
    .article{width: 100%;padding-right: 20px;padding-left: 20px;}
}

@media screen and (max-width:900px){
    .homeheader .centre .left{display: none;}
    .homeheader .centre .right-img{display: none;}
    .homeheader .centre{width: 80%;}
    .articl-1-2 .articl-1-2-box a img{ max-width: 100%;max-height: 100%;}
    .article-1 .right{width: 90%;}
    .articl-7-box{width: 100%;}
}
@media screen and (max-width: 800px) {
    .homeheader .centre .homeheader_centre{display: none;}
    .homeheader .centre{width: 100%;}
    .homeheader .centre .right{   width: 290px;margin: 0 auto;float:none;}
}
@media screen and (max-width: 700px) {
    .article{padding:0px;}
     body{padding-right: 10px;padding-left: 10px;font-size: 0.75rem;}
    .article-1 .left{float: none;margin: 0 auto;}
    .article-1 .right{width:100%;padding:0px;margin: 0 auto;float: none; }
    .articl-1-2 .articl-1-2-box{width: 33%;margin-top: 5px;height: 209px;}
    .articl-1-2 .articl-1-2-box a img{height: 190px;}
    .articl-1-2{margin-top: 10px;}
    .article-1 ul li a {padding-top: 2px;padding-bottom: 2px;padding-left: 5px;padding-right: 5px;font-size: 0.7rem;width: 14%; text-align: center;margin-bottom: 5px;}
    .homeheader{height: 40px;background: #ffffff;margin-top: 10px;}
    .homeheader .centre .right input{height: 10px; margin-bottom: 16px;}
     #search{background: #eeeeee;}
    .unders{display: none;}
    .homeheader .centre .left{display: block;height: 40px;}
    .homeheader .centre .left img{height: 40px;border-radius: 10%;}
    .shujia{height: 30px;width: 70px;display: block;margin-top: -40px;}
    .shujia span{color: #333333;}
    .shujia img{height: 40px;width: 40px;color: white;}
    .articl-1-2 .articl-1-2-box a span {top: -14px;}
    .swiper-container{display: none;}
    .fa-angle-double-up{display: none;}
    .app-div{display: block;}
    /*第二大行*/
    .article .articl-2 .articl-2-1-left,.articl-3{height: auto;}
    .article .articl-2 .articl-2-1-left,.article .articl-2 .articl-2-2-right{width: 100%;}
    .articl-2-1-left-box{flex-wrap: wrap;}
    .article2div-left{width: 50%;}
    .articl-3 .articl-2-1-left-box .article2div-left:last-child{display: none;}
     iframe{display: none;}
    .articl-6{height: auto;}
    .articl-6-box .box-6-article2div-left{width: 48%;}

    .articl-7{height: auto;}

    /*.articl-7-2-right-box p{display: none;}*/
    .articl-7-box .articl-7-2-right-box a{font-size: 10px;}
    .articl-7-box .articl-2-2-right-1{display: flex;justify-content: space-between;height: 400px;flex-direction: column;   }
    .articl-7-2-left-box img{ border-top-left-radius: 0%;border-bottom-left-radius: 0%;border-top-right-radius: 5%;border-top-left-radius: 5%;}
    .articl-7-box .articl-7-2-left-box{width: 98%;}
    .articl-7-box .articl-7-2-right-box{width: 98%;    border-top-right-radius: 0%;border-bottom-right-radius: 0%;border-bottom-right-radius: 5%;border-bottom-left-radius: 5%;}


}