@media (min-width:320px){ .products{ background-color: #212121; } .products .swiper{ width: 92%; margin: 0 auto; max-width: 1560px; background-color: #282828; height: 1.3rem; position: relative; top: -0.65rem; z-index: 3; } .products .swiper .box{ width: 20%; float: left; position: relative; height: 1.3rem; cursor: pointer; } .products .swiper .box .pic{ width: .5rem; height: .5rem; margin: 0.18rem auto .12rem; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .swiper .box .title{ font-size: .26rem; color: #999999; line-height: 1.2; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .swiper .box .pic img{ max-width:100%; max-height:100%; } .products .swiper .box .pic .img1{ opacity:1; } .products .swiper .box .pic .img2{ opacity:0; } .products .swiper .box .pic.on .img1{ opacity:0; } .products .swiper .box.on .pic .img2,.products .swiper .box:hover .pic .img2{ opacity:1; } /*.products .swiper .box.icon1 .pic{ background: url(../img/img-35.png) center/cover no-repeat; } .products .swiper .box.icon2 .pic{ background: url(../img/img-36.png) center/cover no-repeat; } .products .swiper .box.icon3 .pic{ background: url(../img/img-37.png) center/cover no-repeat; } .products .swiper .box.icon4 .pic{ background: url(../img/img-38.png) center/cover no-repeat; } .products .swiper .box.icon5 .pic{ background: url(../img/img-39.png) center/cover no-repeat; } .products .swiper .box.icon1:hover .pic, .products .swiper .box.icon1.on .pic{ background: url(../img/img-35.1.png) center/cover no-repeat; } .products .swiper .box.icon2:hover .pic, .products .swiper .box.icon2.on .pic { background: url(../img/img-36.1.png) center/cover no-repeat; } .products .swiper .box.icon3:hover .pic, .products .swiper .box.icon3.on .pic { background: url(../img/img-37.1.png) center/cover no-repeat; } .products .swiper .box.icon4:hover .pic, .products .swiper .box.icon4.on .pic { background: url(../img/img-38.1.png) center/cover no-repeat; } .products .swiper .box.icon5:hover .pic, .products .swiper .box.icon5.on .pic { background: url(../img/img-39.1.png) center/cover no-repeat; }*/ .products .swiper .box:hover:before, .products .swiper .box.on:before{ background-color: #ffec40; } .products .swiper .box:hover .title, .products .swiper .box.on .title { color: #ffec40; } .products .swiper .box:before{ display: block; content: ''; position: absolute; left: calc(50% - .6rem); bottom: 0; height: 2px; background-color: transparent; z-index: 2; width: 1.2rem; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .crumbs, .pro_info .crumbs{ padding:.05rem 4% .2rem; font-size: .26rem; line-height: 1.5; } .products .crumbs a, .pro_info .crumbs a{ padding-left: .3rem; display: inline-block; color: #999999; } .products .crumbs .home, .pro_info .crumbs .home{ background: url(../img/img-31.png) left center/.21rem no-repeat; } .products .crumbs .title, .pro_info .crumbs .title{ margin-left: .08rem; padding-left: .27rem; background: url(../img/img-3.png) left center/.16rem no-repeat; } .products .category{ width: 92%; margin:0 auto; max-width:1560px; border:1px solid rgba(255,255,255,.1); border-radius: 6px; } .products .category .unit{ display: none; } .products .category .unit img{ display: block; width: .25rem; margin: 0.3rem auto .15rem; } .products .category .unit .title{ font-size: .26rem; color: #999999; line-height: 1.2; text-align: center; } .products .category .content{ width: 100%; background-color: #212121; padding: .28rem .3rem; box-sizing:border-box; } .products .category span{ display: inline-block; float: left; font-size: .24rem; color: #fffffe; padding:0 .29rem; line-height: .5rem; margin: 0 .1rem .1rem 0; } .products .category span.on{ background-color: #ffec40; color: #212121; border-radius: 4px; } .products .mian, .pro_info .mian{ width: 92%; max-width: 1560px; margin:0 auto 1rem; } .products .mian .nav-title, .pro_info .mian .nav-title{ margin: 0.5rem 0% 0.6rem; font-size: 0.4rem; color: #ebd93e; line-height: 1.1; } .products .mian .list li, .pro_info .mian .list li{ margin:0 4% .3rem 0; background-color: #181818; border-radius: 6px; width: 48%; overflow: hidden; } .products .mian .list li:nth-child(2n), .pro_info .mian .list li:nth-child(2n){ margin-right: 0; } .products .mian .list li a, .pro_info .mian .list li a{ display: block; width: 100%; } .products .mian .list li .pic, .pro_info .mian .list li .pic{ width: 100%; height:3.5rem; } .products .mian .list li .pic .tip, .pro_info .mian .list li .pic .tip{ /*display: none;*/ width:1.6rem; height:1.6rem; line-height:1.6rem; text-align:center; color:#333; border-radius:50%; background:#ffec40; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity:0; transition: all .4s; } .products .mian .list li .box, .pro_info .mian .list li .box{ padding: .15rem .2rem; } .products .mian .list li .box .title{ line-height:.32rem; height:.64rem; overflow: hidden; } .products .mian .list li .box .title, .pro_info .mian .list li .box .title{ font-size: .26rem; color: #ffec40; line-height: 1.3; text-align: center; margin-bottom: .2rem; } .products .mian .list li .box .tit, .pro_info .mian .list li .box .tit{ font-size: .24rem; line-height:.32rem; height:.64rem; overflow: hidden; color: #666666; text-align: center; } .pro_info{ background-color: #212121; } .pro_info .crumbs.on{ margin-top: 1.6rem; } .pro_info .centent{ width: 92%; max-width: 1560px; margin: 0 auto; } .pro_info .centent .imges{ width: 100%; } .pro_info .centent .imges .pic{ width: 100%; height: 6.9rem; border-radius: 6px; margin-bottom: .2rem; overflow: hidden; background-color: #fff; } .pro_info .centent .imges .pic img{ display: block; width: 100%; height: 100%; background-size: cover; } .pro_info .centent .swiper-container{ height: 1.2rem; } .pro_info .centent .swiper-container .swiper-slide{ height: 1.2rem; border-radius: 6px; box-sizing:border-box; } .pro_info .centent .swiper-container .swiper-slide.on{ border:3px solid #ffec40; } .pro_info .centent .swiper-container .swiper-button-next, .pro_info .centent .swiper-container .swiper-button-prev{ width: .6rem; height: .6rem; border-radius: 50%; top: 50%; margin-top: -.3rem; } .pro_info .centent .swiper-container .swiper-button-next{ background:#ffec40 url(../img/img-33.1.png) center/8px no-repeat; right: .1rem; } .pro_info .centent .swiper-container .swiper-button-prev{ background:#ffec40 url(../img/img-32.1.png) center/8px no-repeat; left: .1rem; } .pro_info .centent .swiper-container .swiper-button-next.swiper-button-disabled, .pro_info .centent .swiper-container .swiper-button-prev.swiper-button-disabled{ opacity:1; cursor: pointer; pointer-events: auto; } .pro_info .centent .swiper-container .swiper-button-next.on, .pro_info .centent .swiper-container .swiper-button-prev.on{ opacity:.35; cursor: auto; pointer-events: none; } .pro_info .centent .box{ width: 100%; padding: .5rem 0; } .pro_info .centent .box .title{ font-size: .4rem; color: #ffec40; line-height: 1.2; margin-bottom: .15rem; } .pro_info .centent .box .tit{ font-size: .24rem; color: #999999; line-height: 1.2; margin-bottom: .5rem; } .pro_info .centent .box .buy{ width: 2.1rem; height:.8rem; line-height: .8rem; background-color: #262626; cursor: pointer; border-radius: 30px; font-size: .24rem; padding-left: .45rem; color: #ffffff; margin-bottom: .8rem; display:inline-block; transition: all .3s; } .pro_info .centent .box .buy 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_info .centent .box .buy:hover{ background:#eedb31; color:#333; } .pro_info .centent .box .fa{ font-size: .28rem; color: #fff; line-height: 1.2; padding-bottom: .18rem; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: .2rem; } .pro_info .centent .box .detaile{ font-size: .24rem; color: #999999; line-height: 1.5; } .pro_info .parameter{ width: 92%; margin: 0 auto; max-width: 1560px; overflow: hidden; } .pro_info .parameter .tablebox{ overflow-x:auto; color:#fff; font-size:14px; line-height:1.8; } .pro_info .parameter .tablebox table{ width:98% !important; min-width:800px !important; } .pro_info .parameter .tablebox .firstRow{ background:#1d1d1d; color:#fff; } .pro_info .parameter .tablebox .firstRow td{ padding:10px; border-right:1px solid #282828; border-bottom:1px solid #282828; text-align: center; } .pro_info .parameter .tablebox .firstRow td:last-child{ border-right:none; } .pro_info .parameter .tablebox tr{ background:#212121; } .pro_info .parameter .tablebox tr td{ padding:10px; border-right:1px solid #282828; border-bottom:1px solid #282828; color:#fff; font-size:14px; text-align: center; } .pro_info .parameter .title{ font-size: .35rem; color: #fffc31; line-height: 1.2; margin-bottom: .3rem; } .pro_info .parameter .table{ background-color: #282828; padding: .3rem; overflow: hidden; } .pro_info .parameter .table .sub-tit{ font-size: .26rem; color: #eedb31; padding-left: .6rem; position: relative; line-height: .5rem; margin-bottom: .3rem; } .pro_info .parameter .table .sub-tit:before{ display: block; width: .5rem; height: .5rem; box-sizing:border-box; border-radius: 50%; border:2px solid #eedb31; content: ''; position: absolute; left: 0; top:0; background: url(../img/img-47.png) center/.26rem no-repeat; } .pro_info .parameter .table .scroll_box{ overflow-x: auto; } .pro_info .parameter .table .scroll_box table{ font-size: .24rem; overflow-x:auto; width: 600px; color: #ffffff; text-align: center; } .pro_info .parameter .table .scroll_box table th{ text-align: center; background-color: #1d1d1d; line-height: 45px; width: 85px; padding: 0; font-weight: 300; } .pro_info .parameter .table .scroll_box table th .icon{ display: inline-block; margin: auto; width: 35px; } .pro_info .parameter .table .scroll_box table td{ background-color: #212121; padding:10px 5px; line-height: 1.4; } .pro_info .parameter .table .scroll_box table th.fa{ width:150px; } .pro_info .parameter .table .detaile{ font-size: .24rem; color: #999999; line-height: 1.5; margin-bottom: .3rem; } .pro_info .parameter .table .imges img{ display: inline-block; float: left; width: 48%; margin:0 4% .2rem 0; border-radius: 6px; } .pro_info .parameter .table .imges img:nth-child(2n){ margin-right: 0; } .about{ background-color: #212121 } .about .nav-box{ background-color: #282828; text-align: center; overflow-x:auto; } .about .scroll_box{ width:520px; overflow-x:auto; } .about .nav-box .box{ display: inline-block; line-height: 0.9rem; margin: 0 0.25rem; font-size: 0.3rem; color: #ffffff; padding-left: 0.55rem; position: relative; cursor: pointer; } .about .nav-box .box span{ display: block; width: 0.32rem; height: 0.32rem; border-radius: 50%; border:2px solid #999999; position: absolute; left: 0; top: 50%; transform:translateY(-50%); } .about .nav-box .box.on{ color: #ffec40; } .about .nav-box .box.on span{ border:2px solid #ffec40; } .about .nav-box .box.contact span{ background: url(../img/img-18.png) center/0.15rem no-repeat; } .about .nav-box .box.contact.on span{ background: url(../img/img-18.1.png) center/0.15rem no-repeat !important; } .about .nav-box .box.servers span{ background: url(../img/img-19.png) center/0.14rem no-repeat; } .about .nav-box .box.servers.on span{ background: url(../img/img-19.1.png) center/0.14rem no-repeat!important; } .about .nav-box .box.people span{ background: url(../img/img-49.png) center/0.14rem no-repeat; } .about .nav-box .box.people.on span{ background: url(../img/img-49.1.png) center/0.14rem no-repeat!important; } .about .nav-box .box.cultures span{ background: url(../img/img-50.png) center/0.13rem no-repeat; } .about .nav-box .box.cultures.on span{ background: url(../img/img-50.1.png) center/0.13rem no-repeat!important; } .about .mian .nav{ width: 92%; max-width: 1560px; margin: 0.3rem auto .45rem; } .about .mian .nav .en{ font-size: 0.4rem; color: #ebd93d; line-height: 1.1; margin-bottom: 0.05rem; text-transform: uppercase; } .about .mian .nav .title{ font-size: 0.4rem; color: #ebd93e; line-height: 1.1; } .about .mian .detaile{ font-size: .24rem; color: #999999; line-height: 1.5; width: 92%; max-width: 1560px; margin: 0 auto .6rem; } .about .mian .imges{ margin:0 auto .5rem; width: 92%; max-width: 1560px; } .about .mian .imges .img{ display: block; width: 100%; } .about .mian .imges .pic{ padding: .3rem .3rem 1rem; } .about .mian .imges .pic .detailes{ font-size: .26rem; color: #12171e; line-height: 1.5; } .about .mian .data{ width: 92%; max-width: 1560px; margin: 0 auto .6rem; } .about .mian .data .box{ width: 48%; float: left; margin:0 4% .3rem 0; } .about .mian .data .box:nth-child(2n){ margin-right: 0 } .about .mian .data .box .num{ font-size: .6rem; color: #eedb31; line-height: 1; margin-bottom: .15rem; } .about .mian .data .box .num span{ font-size: .3rem; display: inline-block; font-weight: 600; position: relative; top: -.12rem; left: .05rem; } .about .mian .data .box .number .fa{ font-size: .26rem; line-height: 1; color: #eedb31; display: none; } .about .mian .data .box .detailes{ font-size: .24rem; color: #eedb31; line-height: 1.5; margin-top: .2rem; } .about .history{ width: 100%; background: url(../img/img-53.jpg) center/cover no-repeat; min-height: 3rem; } .about .history .warp{ width: 92%; margin: 0 auto; max-width: 1560px; position: relative; overflow: hidden; padding-bottom: .7rem; } .about .history .mbox{ margin-top:1rem; } .about .history .mbox .en, .introduction .en, .culture .en{ font-size: .4rem; color: #ebd93d; line-height: 1.2; text-transform: uppercase; font-weight: bold; margin-bottom: .1rem; } .about .history .mbox .title, .introduction .title, .culture .title{ font-size: .4rem; color: #ebd93e; line-height: 1; } .about .history #yaer_list, .about .history #time_list{ width: 140%; height: 230px; margin: 0px auto; position: relative; left: -20%; } .about .history #yaer_list .swiper-slide, .about .history #time_list .swiper-slide{ text-align: center; font-size: 18px; width: 80%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .about .history #yaer_list .swiper-slide:nth-child(2n) { width: 40%; } .about .history #yaer_list .swiper-slide:nth-child(3n) { width: 20%; } .about .history #yaer_list .swiper-slide .year{ font-size: 1rem; color: #ebd93e; font-family: arial; line-height: 1; margin-bottom: .1rem; } .about .history #yaer_list .swiper-slide .year span{ font-size: .3rem; position: relative; top: -.4rem; left: .06rem; } .about .history #yaer_list .swiper-slide .detailes{ font-size: .3rem; color: #ebd93e; line-height: 1.4; } .about .history #yaer_list .swiper-button-next, .about .history #yaer_list .swiper-button-prev{ width: 30px; height: 30px; margin-top: 0; border-radius: 50%; border: 2px solid #fff; margin-top: -6%; } .about .history #yaer_list .swiper-button-prev{ left: 15%; background: url(../img/img-51.png) center no-repeat; } .about .history #yaer_list .swiper-button-prev:hover{ border: 2px solid #eedc3e; background: url(../img/img-51.1.png) center no-repeat; } .about .history #yaer_list .swiper-button-next{ right: 15%; background: url(../img/img-52.png) center no-repeat; } .about .history #yaer_list .swiper-button-next:hover{ background: url(../img/img-52.1.png) center no-repeat; border: 2px solid #eedc3e; } .about .history #time_list{ height: 43px; width: 100%; left: 0; } .about .history #time_list .swiper-button-next, .about .history #time_list .swiper-button-prev{ display: none; } .about .history #time_list .swiper-slide{ line-height: 20px; height: 20px; padding-bottom: 20px; font-size: 18px; color: #ffffff; width: 120px; background: url(../img/img-53.png) left bottom no-repeat; } .about .history #time_list .swiper-slide span{ display: inline-block; font-family: arial; } .about .history #time_list .swiper-slide.on{ color: #eedb31; } .about .history #time_list .swiper-slide:nth-child(1){ background: url(../img/img-53.png) 60px bottom no-repeat; } .about .history #time_list .swiper-slide:nth-child(1).on{ background: url(../img/img-53.1.png) 60px bottom no-repeat; } .about .history #time_list .swiper-slide.on{ background: url(../img/img-53.1.png) left bottom no-repeat; } .introduction, .culture{ width: 92%; margin: 0 auto .5rem; max-width: 1560px; } .introduction .en, .culture .en{ margin-top: 0.4rem; } .introduction .fa{ font-size: .24rem; line-height: 1.5; color: #eedb31; margin: .25rem 0 .5rem; } .introduction .centent{ background-color: #2a2a2a; padding: .3rem; border-radius: 8px; margin-bottom: .3rem; } .introduction .centent .tit{ font-size: .3rem; color: #ffffff; line-height: .5rem; position: relative; padding-left: .7rem; margin-bottom: .3rem; } .introduction .centent .tit:before{ display: block; width: .5rem; height: .5rem; background: #d8c731 url(../img/img-54.png) center/.18rem no-repeat; position: absolute; left: 0; top:0; content: ''; border-radius: 50%; } .introduction .centent .detailes{ font-size: .24rem; line-height: 1.5; color: #c0c0c0; } .introduction .centent .detailes .foot{ margin-top: .35rem; } .introduction .character{ background:#d8c731 url(../img/img-55.png) center top/100% auto no-repeat; border-radius: 8px; padding: .3rem; } .introduction .character img{ display: block; width: 1.2rem; height: 1.2rem; border-radius: 50%; margin: 0 auto .15rem; } .introduction .character .tit{ font-size: .32rem; color: #12171e; line-height: 1; text-align: center; margin-bottom: .25rem; } .introduction .character .sub-tt{ font-size: .24rem; color: #12171e; line-height: 1; margin-bottom: .1rem; text-align: center; } .introduction .character .detailes{ font-size: .26rem; color: #12171e; line-height: 1.5; text-align: center; margin-bottom: .5rem; } .introduction .character .honor .tt{ font-size: .3rem; color: #000000; line-height: .5rem; padding-left: .5rem; position: relative; padding-bottom: .2rem; border-bottom: 1px solid rgba(0,0,0,.2); margin-bottom: .2rem; } .introduction .character .honor .tt:before{ display: block; content: ''; position: absolute; left: 0; top: 0; height:.5rem; width: .5rem; background: url(../img/img-56.png) left center/.24rem no-repeat ; } .introduction .character .honor .list{ font-size: .24rem; color: #2c2c2c; line-height: 1.5; } .culture ul{ margin-top: .4rem; } .culture ul li{ width: 100%; margin-bottom: .3rem; background-color: #282828; text-align: center; padding: .45rem 0 .6rem; } .culture ul li .mbox{ width: 2.3rem; height: 2.3rem; background-color: #1d1d1d; display: inline-block; margin: 0 auto; border-radius: 100%; } .culture ul li .mbox img{ display: block; width:1rem; margin: 0.4rem auto .1rem; } .culture ul li .mbox .fa{ font-size: .28rem; color: #ebd93e; line-height: 1; } .culture ul li .detailes{ font-size: .26rem; color: #999999; line-height: 1.2; margin-top:.3rem; } .products .mian .list li .box .title, .pro_info .mian .list li .box .title { font-size: .28rem; line-height:.32rem; height:.64rem; overflow: hidden; } } @media (min-width:768px){ .pro_info .parameter .table .scroll_box table{ width: 100%; } .about .scroll_box{ width: 100%; } .about .history #yaer_list{ height: 270px; } .about .history #yaer_list .swiper-button-next, .about .history #yaer_list .swiper-button-prev{ margin-top: -3%; } } @media (min-width:992px){ } @media (min-width:1025px){ .products .swiper { height: 130px; top: -65px; } .products .swiper .box{ height: 130px; } .products .swiper .box .pic { width: 50px; height: 50px; margin: 18px auto 12px; } .products .swiper .box .title { font-size: 16px; } .products .crumbs { padding: 5px 0% 24px; font-size: 15px; } .products .crumbs .title { margin-left: 8px; padding-left: 17px; background: url(../img/img-3.png) left center/8px no-repeat; } .products .crumbs .home { background: url(../img/img-31.png) left center/17px no-repeat; } .products .crumbs a { padding-left: 25px; } .products .mian, .pro_info .mian { margin: 0 auto 130px; } .products .category{ background-color: #292929; position: relative; } .products .category .unit{ display: block; width: 160px; position: absolute; left: 0; top: 0; height: 100%; min-height: 120px; display: flex; justify-content: center; align-items: center; } .products .category .unit .title { font-size: 15px; } .products .category .unit img { width: 25px; margin: 0px auto 10px; } .products .category .content { width: calc(100% - 160px); padding: 28px 28px 28px 50px; min-height: 120px; } .products .category span { font-size: 15px; padding: 0 28px; line-height: 34px; margin: 0 10px 10px 0; cursor: pointer; } .products .mian .nav-title, .pro_info .mian .nav-title { margin: 75px 0% 40px; font-size: 38px; } .products .mian .list li, .pro_info .mian .list li{ margin: 0 2% 30px 0; width: 18.4%; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .mian .list li:nth-child(2n), .pro_info .mian .list li:nth-child(2n) { margin-right:2%; } .products .mian .list li:nth-child(5n), .pro_info .mian .list li:nth-child(5n) { margin-right:0; } .products .mian .list li .pic, .pro_info .mian .list li .pic { height: 17vw; max-height: 290px; } .products .mian .list li .box, .pro_info .mian .list li .box { padding: 15px 10px; } .products .mian .list li .box .title, .pro_info .mian .list li .box .title { font-size: 18px; margin-bottom: 25px; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .mian .list li .box .tit, .pro_info .mian .list li .box .tit { font-size: 15px; line-height:25px; height:50px; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .products .mian .list li:hover, .pro_info .mian .list li:hover{ background-color: #ffec40; } .products .mian .list li:hover .tip, .pro_info .mian .list li:hover .tip{ opacity:1; } .products .mian .list li:hover .box .title, .pro_info .mian .list li:hover .box .title{ color: #111111 } .products .mian .list li:hover .box .tit, .pro_info .mian .list li:hover .box .tit{ color: #666666 } .pro_info .crumbs.on { margin-top: 185px; } .pro_info .crumbs { padding: 0 0% 60px; font-size: 15px; } .pro_info .centent{ margin-bottom: 90px; } .pro_info .centent .imges{ width: 52%; } .pro_info .centent .imges .pic{ float: right; width: calc(100% - 120px); max-width: 600px; height: 486px; margin-bottom: 0; } .pro_info .centent .swiper-container{ width: 100px; height: 446px; float: left; padding: 20px 0; } .pro_info .centent .swiper-container .swiper-button-next{ width: 100%; height: 20px; background:#212121 url(../img/img-45.png) center bottom/8px no-repeat; right: 0; top: auto; bottom: 0; margin: 0; border-radius: 0; } .pro_info .centent .swiper-container .swiper-button-prev{ width: 100%; height: 20px; background:#212121 url(../img/img-46.png) center top/8px no-repeat; left: 0; top: 0; margin: 0; bottom: 0; border-radius: 0; } .pro_info .centent .box{ width: 43.5%; padding: 0; height: 486px; position: relative; } .pro_info .centent .box .title { font-size: 40px; margin-bottom: 15px; } .pro_info .centent .box .tit { font-size: 18px; margin-bottom: 45px; } .pro_info .centent .box .buy { width: 135px; height: 50px; line-height: 50px; font-size: 15px; padding-left: 45px; margin-bottom: 0; } .pro_info .centent .box .buy span { width: 35px; height: 35px; margin: 8px 7px 0 0; } .pro_info .centent .detiale-box{ position: absolute; bottom: 0; left:0; width: 100%; } .pro_info .centent .box .fa{ font-size: 18px; padding-bottom: 22px; margin-bottom: 20px; } .pro_info .centent .box .detaile{ font-size: 16px; } .pro_info .parameter .title{ font-size: 35px; margin-bottom: 35px; } .pro_info .parameter .table{ padding: 48px 60px 22px; } .pro_info .parameter .table:last-child{ padding-bottom:60px; } .pro_info .parameter .table .sub-tit { font-size: 24px; padding-left: 50px; line-height: 40px; margin-bottom: 40px; } .pro_info .parameter .table .sub-tit.on{ margin-bottom: 30px; } .pro_info .parameter .table .sub-tit:before { width: 40px; height: 40px; background: url(../img/img-47.png) center/22px no-repeat; } .pro_info .parameter .table .scroll_box table { font-size: 15px; } .pro_info .parameter .table .scroll_box table th { line-height: 60px; width: 12.5%; } .pro_info .parameter .table .scroll_box table th.fa{ width: 37.5%; } .pro_info .parameter .table .scroll_box table th .icon { width: 48px; } .pro_info .parameter .table .scroll_box table td{ padding: 18px 7px; line-height: 1.5; } .pro_info .parameter .table .detaile { font-size: 16px; margin-bottom: 45px; } .pro_info .parameter .table .imges img { width: 23.5%; margin: 0 2% 0 0; } .pro_info .parameter .table .imges img:nth-child(2n) { margin-right: 2%; } .pro_info .parameter .table .imges img:nth-child(4n) { margin-right: 0%; } .about .nav-box{ margin: 60px 0 150px; } .about .scroll_box{ width: 890px; margin: 0 auto; } .about .nav-box .box { line-height: 90px; margin: 0 49px; font-size: 16px; padding-left: 47px; } .about .nav-box .box.on span { border: 3px solid #ffec40; } .about .nav-box .box span { width: 32px; height: 32px; border: 3px solid #999999; } .about .nav-box .box:hover{ color: #ffec40; } .about .nav-box .box:hover span{ border:3px solid #ffec40; } .about .nav-box .box.contact span{ background: url(../img/img-18.png) center/15px no-repeat; } .about .nav-box .box.contact:hover span,.about .nav-box .box.contact.on span{ background: url(../img/img-18.1.png) center/15px no-repeat !important; } .about .nav-box .box.servers span{ background: url(../img/img-19.png) center/14px no-repeat; } .about .nav-box .box.servers:hover span,.about .nav-box .box.servers.on span{ background: url(../img/img-19.1.png) center/14px no-repeat !important; } .about .nav-box .box.people span{ background: url(../img/img-49.png) center/12px no-repeat; } .about .nav-box .box.people:hover span,.about .nav-box .box.people.on span{ background: url(../img/img-49.1.png) center/12px no-repeat !important; } .about .nav-box .box.cultures span{ background: url(../img/img-50.png) center/13px no-repeat; } .about .nav-box .box.cultures:hover span,.about .nav-box .box.cultures.on span{ background: url(../img/img-50.1.png) center/13px no-repeat !important; } .about .mian .nav{ margin: 0 auto 50px } .about .mian .nav .en{ font-size: 40px; margin-bottom: 5px; } .about .mian .nav .title{ font-size: 40px; } .about .mian .detaile { font-size: 15px; margin: 0 auto 50px; } .about .mian .imges{ position: relative; margin: 0 auto 140px; overflow: hidden; } .about .mian .imges .img{ width: 50%; float: left; } .about .mian .imges .pic{ width: 50%; position: absolute; right: 0; top: 0; height: 100%; padding: 0; border-radius: 8px; } .about .mian .imges .pic:before{ content: ''; position: absolute; left:-30px; top: 0; height:100%; width:70px; background-color: #eedb31; z-index: 2; border-radius: 8px; -webkit-transform: skew(-5deg,0); -ms-transform: skew(-5deg,0); transform: skew(-5deg,0); } .about .mian .imges .pic .detailes{ width: 86%; margin:4vw 5.3% 0 0; float: right; font-size: 16px; position: relative; z-index: 5 } .about .mian .data{ width: 100%; margin: 0 auto 110px; padding-left: 10px; text-align: center; } .about .mian .data .box{ display: inline-block; width: 21vw; height: 21vw; max-width: 270px; max-height: 270px; border:2px dashed #eedb31; /*border-radius: 50%;*/ border-radius:270px; margin: 0 auto; position: relative; margin-left: -16px; float: none; /*-webkit-transition: all 0.3s; transition: all 0.3s;*/ } .about .mian .data .box .mbox{ display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .about .mian .data .box .number{ width: 100%; text-align: center; float: left; } .about .mian .data .box .num{ font-size: 50px; font-family: arial; margin-bottom: 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .about .mian .data .box .number .fa{ display: block; font-size: 18px; -webkit-transition: all 0.3s; transition: all 0.3s; } .about .mian .data .box .detailes{ display: none; text-align: left; font-size: 16px; color: #222222; -webkit-transition: all 0.3s; transition: all 0.3s; } .about .mian .data .box:hover{ background-color: #eedb31; width: 26vw; padding: 0 35px 0 20px; max-width: 600px; } .about .mian .data .box:hover .number{ width: 220px; display: inline-block; margin-right: 35px; } .about .mian .data .box:hover .num, .about .mian .data .box:hover .number .fa{ color: #222222; } .about .mian .data .box:hover .detailes{ display: inline-block; width:calc(100% - 255px); } .about .history{ width: 92%; max-width: 1560px; margin: 0 auto; min-height: auto; } .about .history .warp{ width: 100%; padding-bottom: 90px; } .about .history .mbox { position: relative; margin:5vw 0 0 5vw; } .about .history .mbox .en { font-size: 40px; margin-bottom: 10px; } .about .history .mbox .title { font-size: 40px; } .about .history #yaer_list{ height: 560px; width: 120%; left: -10%; margin-bottom: 25px; } .about .history #yaer_list .swiper-slide .year { font-size: 100px; margin-bottom: 5px; position: relative; } .about .history #yaer_list .swiper-slide .year span{ position: absolute; right: -27px; top:15px; text-align: right; left: auto; font-size: 30px } .about .history #yaer_list .swiper-slide .detailes { font-size: 18px; } .about .history #yaer_list .swiper-button-next, .about .history #yaer_list .swiper-button-prev { width: 46px; height: 46px; } .about .history #yaer_list .swiper-button-next { right: 18%; } .about .history #yaer_list .swiper-button-prev{ left: 18%; } .about .history #time_list{ width: 100%; left: 0; } .introduction .en, .culture .en{ font-size: 40px; margin:105px 0 5px; } .introduction .title, .culture .title{ font-size: 40px; } .introduction .fa { font-size: 18px; margin: 25px 0 50px; } .introduction .centent{ width: 48.5%; box-sizing:border-box; padding: 75px 30px 0; margin-bottom: 0; height: 720px; } .introduction .character{ width: 48.5%; box-sizing:border-box; height: 720px; padding: 70px 30px 0; } .introduction .centent .tit { font-size: 20px; line-height: 50px; padding-left: 70px; margin-bottom: 30px; } .introduction .centent .tit:before { width: 50px; height: 50px; background: #d8c731 url(../img/img-54.png) center/18px no-repeat; } .introduction .centent .detailes { font-size: 16px; } .introduction .centent .foot{ margin-top: 140px; } .introduction .character .tit { font-size: 22px; margin-bottom: 15px; } .introduction .character .sub-tt { font-size: 15px; margin-bottom: 2px; } .introduction .character .detailes { font-size: 16px; margin-bottom: 60px; } .introduction .character .honor .tt { font-size: 20px; line-height: 30px; padding-left: 30px; padding-bottom: 15px; margin-bottom: 15px; } .introduction .character .honor .tt:before { height: 30px; width: 30px; background: url(../img/img-56.png) left center/24px no-repeat; } .introduction .character .honor .list { font-size: 12px; } .introduction .character .honor .list li{ width: 48%; float: left; margin: 0 4% 5px 0; } .introduction .character .honor .list li:nth-child(2n){ margin-right: 0% } .introduction .centent .detailes .foot{ margin-top: 70px; } .culture{ margin: 0 auto 110px; } .culture ul li{ width: 23%; margin:0 2.5% 0 0; height: 320px; padding: 50px 10px 0; box-sizing: border-box; } .culture ul li:nth-child(4n){ margin-right: 0; } .culture ul li .mbox { width: 160px; height: 160px; transition: all .3s; } .culture ul li .mbox img { width: 50px; margin: 45px auto 10px; } .culture ul li .mbox .fa { font-size: 20px; } .culture ul li .detailes { font-size: 16px; line-height:1.6; max-width:80%; margin:26px auto 0; } .products .mian .list li .box .title, .pro_info .mian .list li .box .title { font-size: 22px; line-height:28px; height:56px; overflow: hidden; } .culture ul li:hover .mbox{ transform:translate(0px,-20px); } } @media (min-width:1300px){ .products .mian .list li .box .title, .pro_info .mian .list li .box .title { font-size: 22px; line-height:28px; height:56px; overflow: hidden; } .pro_info .centent .imges { width: 50%; } .pro_info .centent .imges .pic, .pro_info .centent .box{ height: 520px; } .pro_info .centent .swiper-container{ height: 480px; } .about .mian .data .box{ margin-left: -20px; } .about .mian .data .box .num { font-size: 60px; } .about .history #yaer_list .swiper-slide .year { font-size: 120px; } .about .history #yaer_list .swiper-slide .detailes { font-size: 20px; } .about .history #yaer_list .swiper-slide .year span{ font-size: 32px; right: -35px; } .introduction .character .honor .list { font-size: 14px; } } @media (min-width:1400px){ .pro_info .centent .swiper-container { height: 520px; width: 110px; } .pro_info .centent .imges .pic { height: 560px; width: calc(100% - 130px); } .pro_info .centent .box{ height: 560px; } /* .about .mian .data .box .num { font-size: 70px; }*/ .about .history #yaer_list .swiper-slide .year { font-size: 130px; } .about .history #yaer_list .swiper-slide .detailes { font-size: 22px; } .about .history #yaer_list .swiper-slide .year span{ font-size: 34px; } } @media (min-width:1500px){ .pro_info .centent .imges .pic { height: 600px; width: calc(100% - 140px); } .pro_info .centent .box{ height: 600px; } .pro_info .centent .swiper-container { height: 540px; width: 120px; padding: 30px 0; } .pro_info .centent .swiper-container .swiper-button-prev, .pro_info .centent .swiper-container .swiper-button-next{ height: 30px; } /*.about .mian .data .box .num { font-size: 80px; }*/ .about .history #yaer_list .swiper-slide .year { font-size: 150px; } .about .history #yaer_list .swiper-slide .detailes { font-size: 24px; } .about .history #yaer_list .swiper-slide .year span{ top:20px; right: -40px; font-size: 36px; } .introduction .character, .introduction .centent { padding: 70px 60px 0; } .introduction .character .honor .list { font-size: 15px; } } @media (min-width:1600px){ .pro_info .centent .imges{ width: 48.5%; } .about .history #yaer_list .swiper-slide .year { font-size: 170px; } .about .history #yaer_list .swiper-slide .detailes { font-size: 28px; } .about .history #yaer_list .swiper-slide .year span { font-size: 38px; } } @media (min-width:1700px){ .about .history .mbox{ margin: 115px 0 0 180px } .about .history #yaer_list .swiper-slide .year { font-size: 200px; } .about .history #yaer_list .swiper-slide .detailes { font-size: 30px; } .about .history #yaer_list .swiper-slide .year span { font-size: 40px; top: 22px; } }