@media (min-width:320px){ body{ background-color: #212121; } #baner-pc{ width: 100%; } #baner-pc .swiper-slide img{ display: block; width: 100%; height: auto; object-fit: cover } #baner-pc .swiper-pagination-bullet{ background-color: #fff; opacity: 1 } #baner-pc .swiper-pagination-bullet-active{ background-color: #eedb31; } #baner-pc .swiper-button-next, #baner-pc .swiper-button-prev{ display: none; } .introducs{ width: 92%; margin: 0.3rem auto .6rem; max-width: 1560px; } .introducs .left{ background-color: #eedb31; border-radius: 8px; padding: .3rem; } .introducs .left .en{ font-size: .4rem; color: #12171e; line-height: 1.2; text-transform: uppercase; margin-bottom: .05rem; } .introducs .left .title{ font-size: .4rem; color: #12171e; font-weight: bold; line-height: 1; margin-bottom: .3rem; } .introducs .left .detaile{ font-size: .24rem; color: #12171e; line-height: 1.6; } .introducs .left .ul{ display: block; width: 100%; margin-top: .4rem; } .introducs .left .ul a{ font-size: .28rem; color: #12171e; box-sizing:border-box; padding-left: .75rem; width: 50%; position: relative; line-height: .6rem; margin-bottom: .2rem; transition: all .3s ease; } .introducs .left .ul a:before{ display: block; width: .6rem; height: .6rem; box-sizing:border-box; position: absolute; left: 0; top: 0; border:2px solid #1a2026; content: ''; border-radius: 50%; } .introducs .left .ul a:nth-child(1):before{ background: url(../img/img-61.png) center/.24rem no-repeat; } .introducs .left .ul a:nth-child(2):before{ background: url(../img/img-63.png) center/.24rem no-repeat; } .introducs .left .ul a:nth-child(3):before{ background: url(../img/img-64.png) center/.24rem no-repeat; } .introducs .left .ul a:nth-child(4):before{ background: url(../img/img-62.png) center/.24rem no-repeat; } .introducs .left .ul a:hover{ padding-left:.9rem; } .introducs .right{ width: 100%; position: relative; margin-top: .3rem; } .introducs .right img{ display: block; width: 100%; border-radius: 8px; } .advert{ width: 92%; margin: 0 auto .6rem; max-width: 1560px; background: url(../img/img-69.jpg) center/cover no-repeat; text-align: center; padding: .5rem 0; border-radius: 8px; } .advert .title{ font-size: .4rem; color: #eedb31; line-height:1.2; font-weight: bold; margin-bottom: .3rem; } .advert .fa{ font-size: .24rem; color: #eedb31; line-height: 1.2; } .pro-list{ width: 92%; max-width: 1560px; margin: 0 auto .6rem; } .pro-list .en, .new .en{ font-size: .4rem; color: #ebd93d; line-height: 1.2; text-transform: uppercase; font-weight: bold; margin-bottom: .1rem; text-align: center; } .pro-list .title, .new .title{ font-size: .4rem; text-align: center; color: #fff; line-height: 1; margin-bottom: .5rem; } .pro-list .warp .pic{ width: 100%; border-radius:8px; overflow: hidden; } .pro-list .warp .pic .img{ display: block; width: 100%; } .pro-list .warp .pic .line{ /*display: none;*/ } .pro-list .warp .pic .mline{ width:100%; height:auto; left:0; height:1rem; margin-top: -.5rem; } .pro-list .warp .right{ margin-top: .5rem; } .pro-list .warp .mright{ margin-top:-.5rem; background-color:#121212; padding:0 5% 1.5rem; } .pro-list .warp .right .icon{ width: 50px; height: 50px; border-radius: 50%; border:3px solid #eedb31; margin-bottom:.3rem; padding: .2rem; /*margin-top:-.8rem;*/ background-color:#000; box-sizing:border-box; } .pro-list .warp .right .micon{ margin-top:-.8rem; } .pro-list .warp .right .tit{ font-size: .4rem; color: #ffec40; line-height: 1; font-weight: bold; margin-bottom: .2rem; } .pro-list .warp .right .detaile{ font-size: .24rem; color: #ffffff; line-height: 1.6; } .pro-list .warp .right .mdetaile{ text-align:center; } .pro-list .warpbox .swiper-pagination-clickable .swiper-pagination-bullet{ background:#fff; } .pro-list .warpbox .swiper-pagination-clickable span.swiper-pagination-bullet-active{ background:#ffec40; } .pro-list .warp .right .btn, .new .btn{ width: 2.1rem; height: .8rem; line-height: .8rem; background-color: #262626; cursor: pointer; border-radius: 30px; font-size: .24rem; padding-left: .45rem; color: #ffffff; display: block; margin-top: .4rem; } .pro-list .warp .right .btn span, .new .btn span{ display: block; width: .62rem; height: .62rem; border-radius: 50%; float: right; margin: .09rem .09rem 0 0; background: #eedb31 url(../img/img-33.1.png) center/8px no-repeat; } .pro-list .table{ margin-top: .3rem; } .pro-list .table .box{ height: .9rem; line-height: .9rem; background-color: #1d1d1d; width: 20%; float: left; font-size: .24rem; color: #ffffff; text-align: center; } .pro-list .table .box:nth-child(1){ border-radius: 0 0 0 6px; } .pro-list .table .box:nth-child(2){ background-color: #212121 } .pro-list .table .box:nth-child(3){ background-color: #262626 } .pro-list .table .box:nth-child(4){ background-color: #282828 } .pro-list .table .box:nth-child(5){ background-color: #2b2b2b; border-radius: 0 0 6px 0; } .pro-list .table .box.on{ color: #1a2026; background-color:#ffec40; } .pro-list .table .box span{ display: inline-block; /*padding-left: .35rem;*/ } /*.pro-list .table .box:nth-child(1) span{ background: url(../img/img-35.1.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(2) span{ background: url(../img/img-36.1.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(3) span{ background: url(../img/img-37.1.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(4) span{ background: url(../img/img-38.1.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(5) span{ background: url(../img/img-39.1.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(1).on span{ background: url(../img/img-35.2.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(2).on span{ background: url(../img/img-36.2.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(3).on span{ background: url(../img/img-37.2.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(4).on span{ background: url(../img/img-38.2.png) left center/.3rem no-repeat; } .pro-list .table .box:nth-child(5).on span{ background: url(../img/img-39.2.png) left center/.3rem no-repeat; }*/ .pro-list .table .box .img{ width:24px; height:24px; margin-right:10px; } .pro-list .table .box .img1,.pro-list .table .box .img2{ width:24px; height:24px; } .pro-list .table .box .img1{ opacity:1; } .pro-list .table .box .img2{ opacity:0; } .pro-list .table .box.on .img1{ opacity:0; } .pro-list .table .box.on .img2,.pro-list .table .box:hover .img2{ opacity:1; } .new{ width: 92%; margin: 0 auto 1rem; max-width: 1560px; } .new ul li{ width: 100%; border-radius: 0.1rem; background-color: #181818; margin-bottom: 0.5rem; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; background-color: #181818; overflow: hidden; border-radius: 8px; } .new ul li .pic img{ display: block; width: 100%; } .new ul li .pic .label{ width: 1.2rem; height: .5rem; line-height:.5rem; text-align: center; color: #000000; background-color:#ffec40; position: absolute; bottom: .2rem; font-size: .24rem; left: .2rem; border-radius: 4px; } .new ul li .box{ padding: 0.2rem 0.2rem 0.3rem; } .new ul li .box .tit{ font-size: .3rem; color: #ffffff; line-height: 1.4; margin-bottom: .15rem; } .new ul li .box .time{ font-size: 0.24rem; color: #999999; line-height: 1.2; -webkit-transition: all 0.3s; transition: all 0.3s; } .new .btn{ margin: .4rem auto 0; background-color: #181818; } } @media (min-width:768px){ } @media (min-width:992px){ } @media (min-width:1025px){ #baner-pc .swiper-slide img{ height: auto; } #baner-pc .swiper-button-next, #baner-pc .swiper-button-prev{ display: block; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; } #baner-pc .swiper-button-next{ right: 4%; background: url(../img/img-52.png) center no-repeat; } #baner-pc .swiper-button-prev{ left: 4%; background: url(../img/img-51.png) center no-repeat; } #baner-pc .swiper-button-next:hover{ right: 4%; border: 2px solid #eedb31; background: url(../img/img-52.1.png) center no-repeat; } #baner-pc .swiper-button-prev:hover{ left: 4%; border: 2px solid #eedb31; background: url(../img/img-51.1.png) center no-repeat; } #baner-pc .swiper-pagination{ bottom: 25px; } .introducs{ margin: 60px auto 10vw; } .introducs .left { padding: 95px 5.5% 0; width: 50%; box-sizing: border-box; height: 660px; position: relative; } .introducs .left:before{ content: ''; position: absolute; right: -30px; top: 0; height: 100%; width: 70px; background-color: #eedb31; z-index: 2; border-radius: 8px; -webkit-transform: skew(0,5deg); -ms-transform: skew(0,5deg); transform: skew(-5deg,0); } .introducs .left .en { font-size: 40px; margin-bottom: 5px; } .introducs .left .title { font-size: 40px; margin-bottom: 25px; } .introducs .left .detaile { font-size: 15px } .introducs .left .ul{ margin-top: 55px; } .introducs .left .ul a { font-size: 18px; padding-left: 70px; line-height: 60px; margin-bottom: 24px; } .introducs .left .ul a:before { width: 60px; height: 60px; } .introducs .left .ul a:nth-child(1):before { background: url(../img/img-61.png) center/24px no-repeat; } .introducs .left .ul a:nth-child(2):before{ background: url(../img/img-63.png) center/24px no-repeat; } .introducs .left .ul a:nth-child(3):before{ background: url(../img/img-64.png) center/24px no-repeat; } .introducs .left .ul a:nth-child(4):before{ background: url(../img/img-62.png) center/24px no-repeat; } .introducs .right{ width: 48%; position: relative; margin-top: 0; height: 660px; z-index: 5; } .introducs .right .tilt{ position: absolute; top: 51%; width: 100%; transform: translateY(-50%); margin-left:-68px; } .introducs .right .tilt:before{ content: ''; position: absolute; width: 54px; height: 100%; left: -23px; bottom: 0; border-radius: 8px 8px 0px 8px; background: url(../img/img-65.jpg) left center/auto 100% no-repeat; -webkit-transform: skew(-5deg,0); -ms-transform: skew(-5deg,0); transform: skew(-5deg,0); display:none; } .introducs .right img{ border-radius: 8px 8px 8px 0px; } .advert{ margin-bottom: 100px; } .advert .title { font-size: 40px; margin-bottom: 25px; } .advert .fa { font-size: 16px; } .pro-list{ margin-bottom:120px } .pro-list .en, .new .en{ font-size: 40px; margin-bottom: 5px; } .pro-list .title, .new .title{ font-size: 40px; margin-bottom: 60px; } .pro-list .warp{ display:none; } .pro-list .warp .pic{ width: 50%; border-top-left-radius: 6px; overflow: hidden; position: relative; } .pro-list .warp .pic .line{ display: block; height: 100%; position: absolute; right: 0; z-index: 3; top: 0; } .pro-list .warp .right{ margin-top: 0; width: 50%; background-color: #121212; padding-left: 3.8%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; height: 100%; padding-right:5%; } .pro-list .warp .right .mbox{ width:100%; } .pro-list .warp .right .icon { width: 80px; height: 80px; margin-bottom: 20px; padding: 15px; } .pro-list .warp .right .tit { font-size: 40px; margin-bottom: 15px; } .pro-list .warp .right .detaile { font-size: 16px; width: 80%; } .pro-list .warp .right .btn, .new .btn{ width: 135px; height: 50px; line-height: 50px; font-size: 15px; padding-left: 45px; margin-top: 40px; } .pro-list .warp .right .btn span, .new .btn span{ width: 35px; height: 35px; margin: 8px 7px 0 0; } .pro-list .table{ margin-top: 0; } .pro-list .table .box{ height: 70px; line-height: 70px; font-size: 16px; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .pro-list .table .box:hover{ color: #1a2026; background-color:#ffec40; } .pro-list .table .box .img{ width:24px; height:24px; margin-right:10px; } .pro-list .table .box .img1,.pro-list .table .box .img2{ width:24px; height:24px; } .pro-list .table .box .img1{ opacity:1; } .pro-list .table .box .img2{ opacity:0; } .pro-list .table .box.on .img1{ opacity:0; } .pro-list .table .box.on .img2,.pro-list .table .box:hover .img2{ opacity:1; } /*.pro-list .table .box span{ padding-left: 30px; }*/ /*.pro-list .table .box:nth-child(1) span{ background: url(../img/img-35.1.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(2) span{ background: url(../img/img-36.1.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(3) span{ background: url(../img/img-37.1.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(4) span{ background: url(../img/img-38.1.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(5) span{ background: url(../img/img-39.1.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(1).on span, .pro-list .table .box:nth-child(1):hover span{ background: url(../img/img-35.2.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(2).on span, .pro-list .table .box:nth-child(2):hover span{ background: url(../img/img-36.2.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(3).on span, .pro-list .table .box:nth-child(3):hover span{ background: url(../img/img-37.2.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(4).on span, .pro-list .table .box:nth-child(4):hover span{ background: url(../img/img-38.2.png) left center/24px no-repeat; } .pro-list .table .box:nth-child(5).on span, .pro-list .table .box:nth-child(5):hover span{ background: url(../img/img-39.2.png) left center/24px no-repeat; } */ .new{ margin-bottom: 105px; } .new ul li{ width: 32%; margin: 0 2% 0 0; border-radius: 10px; } .new ul li:nth-child(3n) { margin-right: 0; } .new ul li .box { padding: 20px 25px 25px; } .new ul li .box .tit{ font-size: 20px; margin-bottom: 50px; height: 56px; overflow: hidden; } .new ul li .box .time{ font-size: 14px; } .new ul li .pic .label { width: 86px; height: 28px; line-height: 28px; bottom: 20px; font-size: 14px; left: 20px; } .new ul li:hover{ background-color: #fffc31; } .new ul li:hover .box .tit, .new ul li:hover .box .time{ color: #1a2026 } .new .btn { margin-top: 60px; } } @media (min-width:1300px){ .introducs .right .tilt:before { width: 60px; left: -37px; } .pro-list .warp .right .icon { margin-bottom: 25px; } } @media (min-width:1400px){ } @media (min-width:1500px){ .introducs{ margin: 60px auto 180px; } } @media (min-width:1600px){ } @media (min-width:1700px){ } @media (max-width:425px){ .pro-list .table .box .img{ margin-right:0; width:100%; } .pro-list .table .box span{ line-height:1.5; } /*.pro-list .table .box span{ line-height:.45rem; height:.45rem; }*/ } @media (max-width:768px){ .pro-list .warp .mright{ width:100%; box-sizing: border-box; } } @media (max-width:1024px){ .pro-list .warp .right{ width:100%; } .pro-list .table .box span{ width: 120px; line-height: 1.2; } .footer .content .tel-module .tel-box{ margin-bottom:.5rem; } #cs{ display:none; } }