@charset "utf-8";
*{transition: .25s;}
html,body{
min-width: 1200px;
}
.head{
height: 100px;
background: #4a2723;
font-size: 20px;
}
.head .wrap{
position: relative;
z-index: 9;
}
.wrap{
width: 100%;
padding: 0 60px;
}
.head .line{
z-index: 8;
width: 1600px;
position: absolute;
left: 50%;
margin-left: -800px;
bottom: 10px;
}
.head .line img{
display: block;
width: 1460px;
margin: auto;
}
.logo{
display: inline-block;
height: 60px;
margin-top: 19px;
}
.logo img{
display: block;
height: 100%;
}
.nav{
line-height: 100px;
}
.nav a{
color: #fff;
float: left;
line-height: 24px;
display: inline-block;
margin-top: 38px;
}
.nav span{
color: #fff;
display: block;
margin: 0 15px;
line-height: 24px;
float: left;
height: 22px;
margin-top: 39px;
}
.nav span img{
height: 100%;
display: block;
}
.hdr1{
margin-left: 10px;
position: relative;
height: 100px;
}
.hdr1 span{
color: #fff;
float: left;
line-height: 24px;
display: inline-block;
margin-top: 38px;
cursor: pointer;
}
.hdr1 span img{
height: 15px;
}
.hdr1hide{
width: 100px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -50px;
top: 80px;
background: #f39242;
padding: 5px 0;
opacity: 0;
visibility: hidden;
transition: .25s;
z-index: 99;
}
.hdr1:hover .hdr1hide{
opacity: 1;
visibility: inherit;
}
.hdr1hide a{
color: #fff;
line-height: 40px;
font-size: 16px;
display: block;
}
.hdr1hide a:hover{
color: #ff7300;
}
.hdr2{
margin-left: 25px;
}
.hdr2 a{
color: #ff7300;
float:left;
line-height: 24px;
display: inline-block;
margin-top: 38px;
}
.bnapb{
position: absolute;
left: 50%;
margin-left: -155px;
bottom: 20px;
}
.bna{
display: inline-block;
width: 310px;
height: 46px;
text-align: center;
line-height: 46px;
border-radius: 46px;
background: #4a2723;
color: #fff;
font-size: 22px;
letter-spacing: 5px;
overflow: hidden;
}
.bna span{
display: block;
width: 60%;
height: 100%;
margin: 0 auto;
background: #ff7300;
transition: .5s;
}
.bna:hover span{
width: 100%;
}
.bna:hover{
box-shadow: 0 0 25px rgba(0,0,0,.5);
}
.md{
padding: 75px 0;
}
.m1{
background: url(../image/m1bg_02.png) no-repeat left top #f2f2f2;
background-size: 460px;
}
.mr10{
margin-right: 10px;
}
.ml10{
margin-left: 10px;
}
.m1top{
font-size: 50px;
font-weight: bold;
color: #5e5e5e;
letter-spacing: 10px;
}
.m1top img{
margin: 0 20px;
height: 60px;
margin-top: -5px;
}
.m1w{
margin-top: 110px;
}
.mdtop h3{
font-size: 42px;
color: #fff;
font-weight: normal;
}
.mdtop p{
font-size: 14px;
text-transform: uppercase;
margin-top: 10px;
}
.mdtop img{
width: 240px;
margin-top: -10px;
}
.m1txt{
background: url(../image/m1txt_03.png) no-repeat center;
background-size: 100% 100%;
padding: 30px 50px;
font-size: 17px;
color: #3d3d3d;
line-height: 42px;
}
.m1txt p{
text-indent: 2em;
}
.m2{
background: #ff7300;
}
.swiper-button-next-public{
width: 60px;
height: 100px;
background: url(../image/m2r_03.png) no-repeat center;
background-size: 45px;
margin-top: -50px;
margin-right: -100px;
transition: .25s;
}
.swiper-button-prev-public{
width: 60px;
height: 100px;
background: url(../image/m2r_03.png) no-repeat center;
background-size: 45px;
margin-top: -50px;
margin-left: -100px;
transform:rotate(180deg);
transition: .25s;
}
.swiper-button-next-public:hover{
margin-right: -105px;
}
.swiper-button-prev-public:hover{
margin-left: -105px;
}
.m2aimg_vd{
width: 126px;
height: 126px;
background: url(../image/vdico_03.png) no-repeat center;
background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -63px 0 0 -63px;
}
.m2{
padding-bottom: 40px;
}
.m2ap{
font-size: 18px;
color: #000;
margin-top: 40px;
text-align: center;
}
.videohide{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: .5s;
}
.videohide_class{
visibility: visible;
opacity: 1;
}
.videohidebg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.7);
z-index: 10;
}
.videohidebox i{
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 26px;
border-radius: 30px;
background: #e0b211;
color: #fff;
position: absolute;
right: 0;
top: 0;
margin-right: -15px;
margin-top: -15px;
border: 2px solid #fff;
cursor: pointer;
}
.videohidebox i:hover{
-webkit-filter: brightness(110%);
}
.videohidebox{
width: 50%;
height: 600px;
background: #fff;
position: absolute;
top: 50%;
left: 25%;
z-index: 20;
padding: 10px;
margin-top: -600px;
transition: .5s;
}
.videohidebox_class{
margin-top: -300px;
}
.videohidebox_1{
width: 100%;
}
.videohidebox_1 video{
width: 100%;
height: 100%;
object-fit: fill;
}
.videohidebox_1 p{
font-size: 16px;
color: #000;
height: 50px;
line-height: 50px;
text-align: center;
}
.m3{
background: url(../image/m3bg_02.jpg) no-repeat bottom center #f2f2f2;
background-size: 100% 145px;
padding-bottom: 0;
}
.mdmore a{
font-size: 16px;
line-height: 40px;
}
.mdmore a img{
vertical-align: middle;
margin-top: -3px;
margin-left: 10px;
}
.m3a img{
height: 650px;
}
.swiper-container-m3 .swiper-slide{
width: auto!important;
}
.m3atxt{
padding: 20px 0;
height: 145px;
text-align: center;
}
.m3atxt h3{
font-size: 24px;
font-weight: normal;
line-height: 30px;
height: 30px;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.m3atxt p{
font-size: 16px;
line-height: 30px;
height: 30px;
margin-top: 5px;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.m4{
background: url(../image/m1bg_02.png) no-repeat left top #f2f2f2;
background-size: 460px;
padding-bottom: 90px;
}
.m4w{
width: 102%;
}
.m4a{
width: 18%;
float: left;
margin-right: 2%;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,.1);
padding: 40px 20px 80px 20px;
transition: .25s;
}
.m4a:hover{
box-shadow: 0 4px 44px rgba(0,0,0,.15);
}
.m4a h3{
font-size: 78px;
color: #848484;
font-weight: normal;
}
.m4atxt{
margin-top: 90px;
line-height: 62px;
font-size: 24px;
color: #000;
transition: .25s;
}
.m4a:hover .m4atxt{
color: #ff7300;
font-weight: bold;
}
.m4ai{
width: 130%;
display: block;
position: absolute;
left: -15%;
top: -37%;
transition: .5s;
transform: scale(0);
}
.m4a:hover .m4ai{
transform: scale(1);
}
.m4ai img{
display: block;
width: 100%;
}
.yun{
display: block;
position: absolute;
right: 30px;
top: 70px;
animation: myfirst 3s infinite;
}
.yun img{
height: 165px;
display: block;
}
@keyframes myfirst {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -20px);
}
100% {
transform: translate(0px, 0px);
}
}
.m5{
background: url(../image/m5bg_02.png) no-repeat left top #fff;
background-size: 260px;
padding-bottom: 0;
}
.m5w{
width: 100%;
height: 350px;
background: url(../image/m5b_02.png) no-repeat center;
background-size: 100% 100%;
}
.m5a{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.m5ul li{
width: 40%;
text-align: left;
cursor: pointer;
}
.m5ul li:last-child{
text-align: right;
}
.m5ul li h3{
font-size: 28px;
color: #fff;
font-weight: bold;
line-height: 56px;
}
.m5ul li p{
line-height: 38px;
font-size: 17px;
color: #fff;
}
.m5ul li i{
display: inline-block;
height: 5px;
width: 250px;
background: #fff;
margin: 10px 0;
}
.m6ul li{
display: none;
}
.m6ul li.active{
display: block;
}
.m6{
background: url(../image/m6bg_03.jpg?v=1) no-repeat center;
background-size: cover;
}
/* .m6a{
width: 236px;
height: 268px;
background: url(../image/m6abg_0.png) no-repeat center;
background-size: 100% 100%;
padding-top: 50px;
} */
.m6a {
width: 290px;
height: 340px;
background: url(../image/m6abg_03.png) no-repeat center;
background-size: 100% 100%;
padding-top: 50px;
}
.m6a h3{
/* font-size: 30px; */
margin-top:20px;
padding:0 20px;
font-size: 18px;
color: #000;
font-weight: normal;
}
.m6a i{
font-size: 18px;
color: #000;
display: block;
margin: 1px 0;
}
.m6a p{
font-size: 14px;
color: #666;
letter-spacing: 2px;
}
.m6a p b{
font-size: 32px;
color: #ff7300;
}
.m6a img{
width: 190px;
margin: 10px auto;
}
.m6a span{
font-size: 13px;
line-height:18px;
color: #666;
}
.m6boxw{
display: inline-block;
margin-top: -60px;
}
.m6w{
margin-top: 120px;
}
.m6more{
margin-top: 70px;
}
.m6more a{
display: inline-block;
animation: myfirst 3s infinite;
}
.m6more a img{
display: block;
height: 120px;
}
.m7{
background: url(../image/m7bg_03.jpg) no-repeat right top #ff7300;
background-size: 350px;
padding-bottom: 40px;
}
.m7w{
width: 101%;
}
.m7a{
width: 19%;
margin-right: 1%;
color: #000;
}
.m7a img{
display: block;
width: 100%;
}
.m7a h3{
font-size: 22px;
font-weight: normal;
margin-top: 20px;
}
.m7a p{
line-height:26px;
font-size: 16px;
margin-top: 20px;
}
.m7a span{
display: block;
font-size: 18px;
margin-top: 5px;
}
.m8{
background: #ff7300;
}
.m81{
width: 1660px;
background: #f2f2f2;
padding-bottom: 40px;
}
.m9{
background: url(../image/m9bg_03.png) no-repeat center;
background-size: cover;
}
.m9w{
font-size: 22px;
color: #fff;
line-height: 65px;
}
.m9 .yun{
top: 30%;
}
.foot{
background: #f0e3dc;
color: #636362;
line-height: 36px;
padding: 20px 0;
}
.foot h3{
font-weight: normal;
font-size: 20px;
margin-bottom: 10px;
}
.foot p{
line-height: 30px;
}
.foot p span{
margin: 0 20px;
}
.lt{
background: #ff7300;
border: 2px solid #f0e3dc;
border-radius: 50px;
padding: 10px 0;
position: fixed;
left: 10px;
bottom: 5%;
z-index: 9999;
}
.lta{
position: relative;
margin-top: 15px;
padding: 0 10px;
}
.lta:first-child{
margin-top: 0;
}
.lta .lta_a img{
height: 46px;
display: block;
margin: 0 auto;
}
.ltewm{
position: absolute;
left: 70%;
top: 0;
padding: 5px;
background: #1a1a1a;
transition: .25s;
opacity: 0;
visibility: hidden;
}
.lta:hover .ltewm{
opacity: 1;
visibility: inherit;
left: 100%;
}
.ltewm i{
display: inline-block;
width: 9px;
height: 11px;
position: absolute;
left: -8px;
top: 17px;
background: url(../image/lico.png) no-repeat center;
}
.ltewm img{
display: block;
width: 120px;
}
/*info*/
.swiper1{
background: #636362;
border-radius: 100px;
overflow: hidden;
padding: 2px;
}
.swiper1 .swiper-slide{
width: 100%;
height: 94px;
text-align: center;
color: #fff;
cursor: pointer;
transition: .25s;
border-radius: 100px;
overflow: hidden;
background: url(../image/libg_03.png) no-repeat center;
background-position-y: 60px;
position: relative;
}
.swiper1 .swiper-slide i{
display: inline-block;
width: 54px;
height: 26px;
background: url(../image/li_i_03.png) no-repeat center;
position: absolute;
left: 50%;
margin-left: -27px;
bottom: 0;
margin-bottom: -2px;
opacity: 0;
transition: .25s;
}
.swiper1 .swiper-slide.selected i{
opacity: 1;
}
.swiper1 .swiper-slide.selected{
background: url(../image/libg_03.png) no-repeat center #ff7300;
background-position-y: 60px;
}
.swiper1 .swiper-slide h3{
font-size: 28px;
font-weight: normal;
color: #fff;
transition: .25s;
margin-top: 10px;
}
.swiper1 .swiper-slide.selected h3{
color: #fff;
}
.swiper1 .swiper-slide p{
font-size: 12px;
color: #fff;
text-transform: uppercase;
margin-top: 5px;
}
.swiper2{
/* background: url(../image/ifyun_03.png) no-repeat right bottom #ff7300; */
background: #ff7300;
font-size: 22px;
line-height: 45px;
color: #fff;
border-radius: 30px;
margin-top: 20px;
}
.swiper2 .swiper-slide{
width: 100%;
padding: 70px;
}
.swiper2 .swiper-slide:nth-child(1){
padding-bottom: 70px;
}
.ifmd{
background: #F2F2F2;
}
.if1w span{
font-size: 32px;
position: absolute;
left: 0;
top: 0;
}
.if1w{
padding-left: 60px;
margin-top: 50px;
}
.if1w:first-child{
margin-top: 0;
}
.if1a{
border-left: 2px solid #000;
padding-left: 30px;
font-size: 24px;
line-height: 55px;
}
.if2{
padding-left: 10px;
font-size: 24px;
line-height: 55px;
}
.if3{
padding-left: 10px;
font-size: 24px;
line-height: 55px;
}
.if4{
padding-left: 10px;
font-size: 24px;
line-height: 55px;
}
::-webkit-scrollbar{width:0;height:8px;background-color:#fff}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:4px;background-color:#ddd}::-webkit-scrollbar-thumb:hover{background-color:#bbb}
@media only screen and (min-width: 1921px) {
html {
zoom:1.12
}
.m81 {
margin: auto;
width: 1920px;
}
.m81 .g_ssw {
float: none!important;
}
}
@media only screen and (max-width:1700px) {
.m81{
width: 100%;
}
.m81 .wrap{
float: none;
}
/*.swiper-button-next-public{*/
/* margin-right: 0;*/
/*}*/
/*.swiper-button-next-public:hover{*/
/* margin-right: 0;*/
/*}*/
/*.swiper-button-prev-public{*/
/* margin-left: 0;*/
/*}*/
/*.swiper-button-prev-public:hover{*/
/* margin-left: 0;*/
/*}*/
.m3w .swiper-button-next-public{
margin-top: -120px;
}
.m3w .swiper-button-prev-public{
margin-top: -120px;
}
.head .line{
width: 100%;
left: 0;
margin-left: 0;
}
}
@media only screen and (max-width:1670px) {
.wrap{
width: 100%;
padding: 0 60px;
max-width: 1260px;
}
.m7,.m4,.m1{
background-size: 20%;
}
.head .line img {
width: 1260px;
}
.head {
font-size: 18px;
}
html {
zoom: .9;
}
}
@media screen and (min-width: 1500px) {
.wrap{
max-width: 1600px;
}
.head .line img {
display: block;
width: 1600px;
margin: auto;
}
}
@media screen and (max-width: 1500px) {
.m6a {
width: 228px;
height: 260px;
background: url(../image/m6abg_03.png) no-repeat center;
background-size: 100% 100%;
padding-top: 50px;
}
}
@media only screen and (max-width:1399px) {
.wrap{
width: 1300px;
}
.m1w{
margin-top: 70px;
}
.m1top{
font-size: 44px;
margin-top: 20px;
}
.m1top img{
height: 50px;
}
.m1txt{
font-size: 16px;
line-height: 40px;
}
.mdtop h3{
font-size: 38px;
}
.m3a img{
height: 510px;
}
.m4atxt{
font-size: 26px;
line-height: 50px;
margin-top: 60px;
}
.m4a h3{
font-size: 70px;
}
.yun img{
height: 120px;
}
.m6a{
width: 210px;
height: 235px;
padding-top: 40px;
}
.m6a h3{
font-size: 26px;
}
.m6a i{
margin: 5px 0;
}
.m6a p b{
font-size: 26px;
}
.m6a img{
width: 180px;
}
.m6more{
margin-top: 50px;
}
.m6more a img{
height: 100px;
}
.m9w{
font-size: 20px;
line-height: 50px;
}
/*info*/
.swiper1 .swiper-slide{
height: 80px;
}
.swiper1 .swiper-slide h3{
font-size: 22px;
}
.swiper1 .swiper-slide p{
margin-top: 0;
}
.swiper1 .swiper-slide{
background-position-y: 40px;
}
.swiper1 .swiper-slide.selected{
background-position-y: 40px;
}
.swiper2{
font-size: 24px;
}
}
@media screen and (max-width: 1200px) {
.swiper-button-next-public{
margin-right: -70px;
}
.swiper-button-prev-public{
margin-left: -70px;
}
.swiper-button-next-public:hover{
margin-right: -70px;
}
.swiper-button-prev-public:hover{
margin-left: -70px;
}
.wrap {
width: auto;
}
}
.m5ul li:hover h3 {
color: #000;
}
.m5ul li:hover i {
background: #000;
}
.m5ul li:hover p {
color: #000;
}
.m5ul .active h3 {
color: #000;
}
.m5ul .active i {
background: #000;
}
.m5ul .active p {
color: #000;
}