@charset "utf-8"; .wrapper{ min-width:1200px; max-width:1920px; margin:auto; overflow: hidden; } #header,#among,#footer,.width{ max-width:1560px; margin:auto; } .among{ padding: 3% 1.7%; } #header{ position: relative; } #header.width{ max-width: 1720px; } .padding{ padding-left: 1.7%; padding-right: 1.7%; } .padding1{ padding-top: 3%; } .padding2{ padding-bottom: 3%; } .header{ background: #f7f7f9; } .header li{ line-height: 40px; font-size: 12px; color: #6a6a6a; } .header1{ background: #FFF; position: relative; z-index: 999; } .header1.on > b{ display: block; position: absolute; height: 56px; left: 0; right: 0; background: rgba(0,0,0,.7); } #header .logo{ float: left; padding: 12px 0; } #header .logo img{ height: 84px; } #header .top{ top: 54px; position: absolute; } #header form{ display: block; right: 206px; font-size: 0; z-index: 1000; letter-spacing: -1px; } #header form input{ position: absolute; top: 0; height: 36px; box-sizing: border-box; } #header form input[type='text']{ right: 36px; width: 200px; padding: 0 10px; background: #FFF; display: none; } #header form input[type='submit']{ right: 0; display: block; width: 36px; background: url(../images/s.png) center center no-repeat; overflow: hidden; text-indent: -9999px; cursor: pointer; border: 1px solid transparent; border-left: 0!important; } #header form:hover input[type='text']{ display: block; } #header form:hover input[type='submit']{ border: 1px solid #CCC; } #header i.top{ display: block; width: 1px; height: 15px; background: #a5a5a5; right: 190px; margin-top: 12px; } #header li.top{ font-size: 0; right: 0; letter-spacing: -1px; padding-left: 34px; background: url("../images/bb.png") left no-repeat; } #header li.top *{ display: inline-block; vertical-align: top; letter-spacing: 0; font-size: 16px; line-height: 36px; color: #696565; } #header li.top span{ margin: 0 9px; } #header .fl-right p a:hover{ color: #050505; } .footer{ padding-top: 3%; padding-bottom: 3%; background: #f7f7f9; } .footer1{ background: #e6e6e6; padding-top: 1%; padding-bottom: 1%; } #footer .info span{ display: block; font-size: 18px; margin-bottom: 18px; } #footer .info font{ display: block; line-height: 30px; } #footer .info1 > span{ display: block; font-size: 18px; margin-bottom: 5px; } #footer .info1 > font{ display: block; font-size: 30px; font-weight: bold; color: #002f9a; } #footer .info1 ul{ font-size: 0; letter-spacing: -1px; margin-top: 50px; } #footer .info1 ul span{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 14px; line-height: 34px; } #footer .info1 ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; width: 34px; height: 34px; cursor: pointer; position: relative; z-index: 9; margin-left: 15px; background: center no-repeat; } #footer .info1 ul li.box1{ background-image: url("../images/icon1.png"); } #footer .info1 ul li.box2{ background-image: url("../images/icon2.png"); } #footer .info1 ul li.box3{ background-image: url("../images/icon3.png"); } #footer .info1 ul li *{ position: absolute; display: none; background: #FFF; width: 120px; left: 50%; transform: translate(-50%,0); border: 1px solid #EEE; bottom: 120%; padding: 10px; } #footer .info1 ul li img{ height: 120px; border-bottom: 0; margin-bottom: 18px; } #footer .info1 ul li font{ border-top: 0; padding-top: 0; padding-bottom: 0; line-height: 28px; text-align: center; } #footer .info1 ul li:hover *{ display: block; } #footer .type > a{ display: inline-block; font-size: 18px; margin-bottom: 18px; } #footer .type li a{ display: inline-block; line-height: 30px; } #footer .copyright, #footer .copyright *{ color: #5a5a5a; font-size: 12px; } #footer .copyright a:hover{ color: #0264d4; } .banner{ position: relative; display: block; overflow: hidden; } .banner img{ width: 100%; } .banner a{ display: block; } .banner .width{ position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; box-sizing: border-box; transform: translate(-50%,0); } @media screen and (min-width:1560px){ .banner .width{ padding-left: 0; padding-right: 0; } } .banner .width li{ position: absolute; top: 50%; font-size: 0; letter-spacing: -1px; color: #FFF; transform: translate(0,-50%); } .banner .width li span, .banner .width li font{ display: inline-block; vertical-align: middle; letter-spacing: 0; color: #FFF; font-size: 30px; font-weight: bold; } .banner .width li font{ font-size: 24px; margin-left: 10px; } .banner .arrow{ position: absolute; left: 0; bottom: 0; right: 0; font-size: 0; z-index: 1; letter-spacing: -1px; text-align: center; height: 35px; } .banner .arrow span{ margin: 0 5px; width: 30px; height: 4px; border-radius: 0; background: rgba(255,255,255,.52); } .banner .arrow span.swiper-pagination-bullet-active{ background: #ff0d00; } .sidebar{ background:#f9f9f9; overflow: hidden; } .navBox ul li{ width:auto; margin-right: 4%; } .navBox ul li:last-child{ margin-right: 0!important; } .navBox ul li a{ display: block; font-size: 16px; line-height: 50px; color: #525252; position: relative; white-space: nowrap; } .navBox ul li a:hover, .navBox ul li.on a{ color: #0264d4; } .navBox ul li a:hover:after, .navBox ul li.on a:after{ content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #0264d4; } .location{ text-align: right; height: 0; } .location li{ display: inline-block; vertical-align: top; letter-spacing: 0; margin-top: -34px; position: relative; z-index: 2; } .location li span:after, .location1 li span:after{ content: ' > '; font-family: '宋体'; } .location li, .location li *, .location1 li, .location1 li *{ font-size: 14px; line-height: 28px; color: #737373; } .location1 li, .location1 li *{ color: #3f3e3e; } .location li a:hover, .location1 li a:hover{ color: red!important; } .locationBox{ border-top: 1px solid #dfdfdf; } .locationBox .location{ height: auto; } .locationBox .location li{ margin-top: 1%; } .location1{ padding-top: 1.5%; padding-bottom: 0.7%; background: #f9f9f9; } .type-name{ padding-bottom: 2.5%; } .type-name span{ display: block; font-size: 30px; line-height: 1.6; font-weight: bold; } .type-name font{ display: block; font-size: 18px; color: #121212; line-height: 1.6; } .type-name1 > span{ display: block; text-align: center; font-size: 42px; font-weight: bold; line-height: 1.2; } .type-name1 > font{ display: block; text-align: center; font-size: 20px; line-height: 1.2; margin-top: 1%; } .companyBox .box{ background: #f7f7f7; padding: 2.3%; } .companyBox .box > li{ position: relative; padding-left: 51%; } .companyBox .box > li > video{ display: block; position: absolute; left: 0; width: 48%; height: 100%; background: #000; } .companyBox .box > li > span{ display: block; font-size: 24px; color: #002f9a; font-weight: bold; line-height: 1.4; } .companyBox .box > li > ul{ margin-top: 6%; min-height: 330px; } .companyBox .box > li > ul, .companyBox .box > li > ul *{ font-size: 16px; line-height: 30px; color: #1f1f1f; } .philosophyBox .type-name *{ text-align: center; } .philosophyBox .box{ position: relative; background: url("../images/bg.jpg") no-repeat; -webkit-background-size: cover; background-size: cover; font-size: 0; letter-spacing: -1px; } .philosophyBox .box > li{ display: inline-block; vertical-align: top; letter-spacing: 0; width: 33.3333%; background: rgba(1,1,1,.3); box-sizing: border-box; padding: 3% 3%; } .philosophyBox .box > li > *{ display: block; text-align: center; color: #FFF; } .philosophyBox .box > li > span{ font-size: 28px; font-weight: bold; color:#00ffd8; } .philosophyBox .box > li > ul{ height: 120px; overflow: hidden; margin-top: 3.5%; } .philosophyBox .box > li > ul, .philosophyBox .box > li > ul *{ font-size: 18px; line-height: 30px; } .philosophyBox .box .xian{ position: absolute; width: 1px; height: 100%; left: 33.3333%; top: 0; background: rgba(255,255,255,.5); } .philosophyBox .box .xian1{ left: 66.66666%; } .philosophyBox .box .xian2{ position: absolute; height: 1px; width: 100%; left: 0; top: 50%; background: rgba(255,255,255,.5); } .historyBox .type-name *{ text-align: center; } .historyBox .box{ padding: 70px 0 0; background: url("../images/bg1.jpg") center repeat-y; } .historyBox .box > i{ width: 45px; height: 21px; display: block; margin: 31px auto 0; background: url("../images/arrow.jpg"); } .historyBox .box > b{ display: block; width: 130px; height: 5px; background: #ababab; margin: 4% auto 0; } .historyBox .box .list{ position: relative; } .historyBox .box .list1 > span, .historyBox .box .list1 > ul{ margin-left: 54%; } .historyBox .box .list2 > span, .historyBox .box .list2 > ul{ margin-right: 54%; text-align: right; } .historyBox .box .list > span{ display: block; font-size: 30px; font-weight: bold; line-height: 1; } .historyBox .box .list > ul{ margin-top: 12px; min-height: 166px; } .historyBox .box .list > ul, .historyBox .box .list > ul *{ font-size: 18px; color: #121212; } .historyBox .box .list > p{ position: absolute; top: 0; font-size: 0; width: 46%; letter-spacing: -1px; text-align: right; } .historyBox .box .list2 > p{ left: auto; right: 0; text-align: left; } .historyBox .box .list > p img{ display: inline-block; vertical-align: top; letter-spacing: 0; width: 49%; background: center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .historyBox .box .list > p img:nth-child(2){ margin-left: 2%; } .content{ min-height: 400px; } .list_news div{ padding: 3.2% 0; border-bottom: 1px solid #f0f0f0; } .list_news div:nth-child(1){ padding-top: 0; } .list_news div > a{ display: block; float: left; overflow: hidden; } .list_news div > a img{ width: 460px; height: 305px; display: block; transition: all .3s; } .list_news div > a:hover img{ transform: scale(1.1); } .list_news div ul{ float: right; width: calc(95% - 460px); } .list_news div ul > font{ display: block; color: #737373; font-size: 14px; } .list_news div ul > .ellipsis{ font-size: 24px; } .list_news div ul > li{ font-size: 14px; line-height: 24px; height: 96px; color: #828282; margin: 38px 0 58px; } .list_news div ul > .more{ display: inline-block; vertical-align: top; letter-spacing: 0; line-height: 34px; padding: 0 45px; border-radius: 34px; transition: all .3s; color: #464646; border: 1px solid #787777; } .list_news div ul > .more:hover{ border-color: #08369d; background: #08369d; color: #FFF; } .honorBox{ background: #f9f9f9; min-height: 450px; padding: 2.6%; } .honorBox .type{ text-align: center; font-size: 0; letter-spacing: -1px; border-bottom: 1px solid #cbcbcb; } .honorBox .type a{ display: inline-block; vertical-align: top; letter-spacing: 0; font-size: 16px; color: #202020; line-height: 38px; border-radius: 38px; padding: 0 3%; margin: 0 0 2.6% 3%; } .honorBox .type a:nth-child(1){ margin-left: 0; } .honorBox .type a:hover, .honorBox .type a.on{ background: #0262d2; color: #FFF; } .honorBox .box{ margin: 0 2% 2%; } .honorBox .box a{ display: block; float: left; width:20.5%; text-align: center; margin: 2.7% 0 0 6%; } .honorBox .box a:nth-child(4n+1){ clear: both; margin-left: 0; } .honorBox .box a div{ border: 1px solid #cbcbcb; } .honorBox .box a img{ width: 100%; } .honorBox .box a span{ text-align: center; font-size: 16px; margin: 12px 0 0; } .list_share{ margin: 0 0 2%; } .list_share a{ display: block; float: left; width:22%; text-align: center; margin: 2.7% 0 0 4%; } .list_share a:nth-child(-n+4){ margin-top: 0; } .list_share a:nth-child(4n+1){ clear: both; margin-left: 0; } .list_share a div{ border: 1px solid #cbcbcb; } .list_share a img{ width: 100%; } .list_share a span{ text-align: center; font-size: 16px; margin: 12px 0 0; } .newsinfoBox > h1{ font-size: 28px; text-align: center; font-weight: normal; } .newsinfoBox > .info{ font-size: 14px; text-align: center; color: #737373; padding: 0 0 1%; border-bottom: 1px solid #EEE; } .newsinfoBox > .cont{ max-width: 980px; margin: 3% auto 0; } .newsinfoBox > .prev-next{ max-width: 980px; margin: 4% auto 0; } .prev-next{ border-top: 1px solid #EEE; margin-top: 4%; padding-top: 2%; } .serviceBox{ padding-bottom: 1%; } .serviceBox .cont, .serviceBox .cont *{ font-size: 18px; } .serviceBox .img img{ width: 100%; margin-top: 3%; } .serviceBox1 .cont{ float: left; width: calc(82% - 442px); } .serviceBox1 .cont, .serviceBox1 .cont *{ font-size: 18px; color: #727272; line-height: 1.8; } .serviceBox1 .cont strong{ color: #232323; } .serviceBox1 .img{ float: right; width: 442px; } .serviceBox1 .img img{ width: 100%; } .contactBox .box{ background: #fbfbfb; padding: 2.6% 2.6% 4%; margin-bottom: 4%; } .contactBox .box > span{ display: block; padding-bottom: 1%; border-bottom: 1px solid #cbcbcb; } .contactBox .box .info{ float: left; width: 46%; margin: 3% 0 0; } .contactBox .box .info > span{ display: block; font-size: 18px; margin-bottom: 12px; } .contactBox .box .info > li, .contactBox .box .info > li *{ font-size: 16px; color: #5a5a5a; } .contactBox .box .info > li a:hover{ color: #0264d4; } .contactBox .mapBox{ float: right; width: 50%; height: 304px; margin: 3% 0 0; border: 1px solid #cbcbcb; } .message{ margin: 0 0 0 3%; } .message > span{ display: block; font-size: 12px; color: #b4b4b4; } .message .input, .message .textarea{ position: relative; border: 1px solid #e0e0e0; margin-top: 12px; } .message .input span, .message .textarea span{ position: absolute; display: block; width: 30px; text-align: center; line-height: 46px; color: red; } .message .input input, .message .textarea textarea{ display: block; width: 100%; height: 46px; border: 0; padding: 0 12px 0 30px; box-sizing: border-box; } .message .textarea textarea{ height: 123px; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; } .message .code{ width: 200px; } .message .code img{ position: absolute; width: 80px; height: 26px; right: 5px; top: 10px; cursor: pointer; } .message .button input{ display: block; width: 120px; height: 36px; cursor: pointer; background: #505050; font-size: 14px; color: #FFF; border: 0; margin-top: 12px; } .aboutBox > ul{ max-width: 1200px; margin: 3% auto 3%; text-align: center; } .aboutBox > ul, .aboutBox > ul *{ font-size: 18px; line-height: 1.7; } .aboutBox > a{ width: 268px; margin: 0 auto 3%; display: block; font-size: 16px; color: #FFF; line-height: 52px; text-align: center; border-radius: 52px; background: url("../images/bg2.jpg"); } .aboutBox > div{ text-align: center; font-size: 0; letter-spacing: -1px; } .aboutBox > div a{ display: inline-block; vertical-align: top; letter-spacing: 0; width: calc(50% - 1px); margin-left: 2px; position: relative; } .aboutBox > div a:nth-child(1){ margin-left: 0; } .aboutBox > div a img{ width: 100%; display: block; } .aboutBox > div a ul{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,.18); } .aboutBox > div a ul li{ position: absolute; left: 0; right: 0; top: 50%; transform: translate(0,-50%); } .aboutBox > div a ul li *{ display: block; text-align: center; font-size: 30px; line-height: 1; color: #FFF; } .aboutBox > div a ul li font{ font-size: 18px; margin-top: 3.5%; } .productBox .box{ margin-top: 3%; } .productBox .box a{ display: block; float: left; overflow:hidden; } .productBox .box a:nth-child(1){ width: 49.6%; } .productBox .box a:nth-child(2){ width: 49.6%; margin-left: 0.8%; } .productBox .box a:nth-child(3), .productBox .box a:nth-child(4){ width: 24.4%; margin: 0.8% 0 0 0.8%; } .productBox .box a img{ width: 100%; transition: all 0.5s; } .productBox .box a:hover img{ transform: scale(1.1); } .productBox1{ position: relative; } .productBox1 > span{ display: block; font-size: 24px; margin: 3% 0; } .productBox1 .swiper{ margin-right: 15%; } .productBox1 .swiper .swiper-slide img{ width: 100%; } .joinBox .box{ font-size: 0; text-align: center; letter-spacing: -1px; padding: 5% 0 4%; } .joinBox .box > *{ display: inline-block; vertical-align: middle; letter-spacing: 0; } .joinBox .box > li{ width: 350px; } .joinBox .box > li > span{ display: block; font-size: 24px; text-align: center; line-height: 1.2; } .joinBox .box > li > ul{ height: 120px; margin: 4% 0; -webkit-line-clamp:5; } .joinBox .box > li > ul, .joinBox .box > li > ul *{ font-size: 14px; line-height: 24px; color: #636363; } .joinBox .box > li > img{ border-radius: 100%; width: 67%; max-width: 235px; } .joinBox .box > i{ width: 1px; height: 323px; background: #ddd; margin: 0 calc((100% - 1050px) / 6); } .joinBox .box1{ background: center no-repeat; -webkit-background-size: cover; background-size: cover; } .joinBox .box1 .width > span{ display: block; text-align: center; font-size: 30px; color: #FFF; line-height: 1.5; } .joinBox .box1 .width > i{ display: block; width: 33px; height: 3px; background: #FFF; margin: 7px auto 0; } .joinBox .box1 .width > ul{ text-align: center; margin-top: 2.5%; } .joinBox .box1 .width > ul, .joinBox .box1 .width > ul *{ font-size: 16px; line-height: 30px; color: #FFF; } .joinBox .box2{ background: #f7f7f7; position: relative; } .joinBox .box2 .prev, .joinBox .box2 .next{ cursor: pointer; position: absolute; top: 50%; z-index: 1; width: 64px; height: 64px; border-radius: 100px; line-height: 1; text-align: center; font-family: '宋体'; font-size: 40px; border: 3px solid #8a8a8a; color: #8a8a8a; font-weight: bold; display: flex; justify-content: center; align-items: center; opacity: .2; transition: all .3s; transform: translate(0,-50%); } .joinBox .box2 .prev{ left: 1.7%; } .joinBox .box2 .next{ right: 1.7%; } .joinBox .box2:hover .prev, .joinBox .box2:hover .next{ opacity: 1; } .joinBox .box2 .swiper .swiper-slide{ width: 43%; } .joinBox .box2 .swiper .swiper-slide img{ width: 100%; } .jobBox > ul > span{ display: block; font-size: 30px; color: #121212; line-height: 1.5; } .jobBox > ul > i{ display: block; width: 33px; height: 3px; background: #121212; margin-top: 7px; } .jobBox .box{ padding-top: 2%; } .jobBox .box > div > ul{ font-size: 0; letter-spacing: -1px; background: #f0f0f0; margin-top: 16px; padding: 20px 22px; position: relative; } .jobBox .box > div > ul > li{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 18px; line-height: 1.2; width: 30%; } .jobBox .box > div > ul > li:nth-child(1){ width: 40px; } .jobBox .box > div > ul > li:nth-child(2){ font-size: 24px; } .jobBox .box > div > ul > li:nth-child(3){ width: 16%; } .jobBox .box > div > ul b{ display: block; position: absolute; top: 50%; right: 22px; width: 38px; height: 38px; text-align: center; border: 1px solid #bcbcbc; transform: translate(0,-50%); border-radius: 100%; cursor: pointer; background: url("../images/icon5.png") center no-repeat; } .jobBox .box > div.on > ul b{ background-image: url("../images/icon6.png"); } .jobBox .box > div > div{ margin: 16px 0 0 62px; padding: 5px 0; display: none; } .jobBox .box > div.on > div{ display: block; } .jobBox .box > div > div, .jobBox .box > div > div *{ font-size: 18px; color: #4e4e4e; } .jobBox .box > div > div .info{ display: none; } .typeBox{ font-size: 0; letter-spacing: -1px; border-bottom: 1px solid #cdcdcd; } .typeBox a{ display: inline-block; vertical-align: top; letter-spacing: 0; position: relative; margin-left: 6%; } .typeBox a:nth-child(1){ margin-left: 1.7%; } .typeBox a img{ height: 66px; } .typeBox a span{ display: block; text-align: center; font-size: 20px; font-weight: bold; color: #606060; line-height: 1.2; padding: 5px 0 25px; } .typeBox a:hover span, .typeBox a.on span{ color: #f00; } .typeBox a:hover:after, .typeBox a.on:after{ content: ''; display: block; height: 4px; left: 0; right: 0; bottom: -1px; background: #F00; position: absolute; } .aside{ float: left; width: 20%; margin-top: 3%; } .aside > a{ display: block; font-size: 18px; line-height: 24px; padding: 10px 0 10px 20px; background: url("../images/arrow3.png") 5px 17px no-repeat; } .aside > a.on{ background: url("../images/arrow4.png") 2px 19px no-repeat; } .aside p{ margin: 0 0 8px 20px; } .aside p a{ display: block; color: #727272; line-height: 20px; position: relative; padding: 6px 0 6px 12px; } .aside p a:after{ content: '-'; display: block; position: absolute; left: 0; top: 5px; } .aside p a:hover{ color:#0264d4; } .right{ float: right; width: 77%; margin-top: 3%; } .list_pro > ul{ padding: 32px; border-bottom: 1px solid #ededed; } .list_pro > ul:hover{ background: #f9f9f9; border-bottom-color: #f9f9f9; } .list_pro > ul > a{ display: block; float: left; overflow: hidden; } .list_pro > ul > a img{ width: 360px; height: 300px; display: block; transition: all 0.5s; } .list_pro > ul:hover > a img{ transform: scale(1.1); } .list_pro > ul > li{ float: right; width: calc(96% - 360px); } .list_pro > ul > li > .name{ font-size: 24px; font-weight: bold; color: #002f9a; line-height: 1.5; } .list_pro > ul > li > p{ font-size: 14px; line-height: 24px; color: #5c5c5c; height: 120px; -webkit-line-clamp:5; margin: 20px 0 30px; } .list_pro > ul > li > .more{ display: block; width: 167px; line-height: 38px; text-align: center; color: #FFF; font-size: 14px; background: url("../images/bg.png"); } .list_pro01 a{ display: block; float: left; width: 30%; margin: 3% 0 0 5%; } .list_pro01 a:nth-child(-n+3){ margin-top: 0; } .list_pro01 a:nth-child(3n+1){ margin-left: 0; clear: both; } .list_pro01 a li{ overflow: hidden; border: 1px solid #e0e0e0; } .list_pro01 a li img{ width: 100%; transition: all 0.5s; } .list_pro01 a:hover li img{ transform: scale(1.2); } .list_pro01 a span{ font-size: 18px; text-align: center; margin-top: 3.5%; line-height: 1.5; display:block; } .list_pro02 a{ display: block; float: left; width: 22%; margin: 3% 0 0 4%; } .list_pro02 a:nth-child(-n+4){ margin-top: 0; } .list_pro02 a:nth-child(4n+1){ margin-left: 0; clear: both; } .list_pro02 a li{ position: relative; background: #f2f3f7; border: 1px solid #e0e0e0; } .list_pro02 a li > img{ width: 100%; } .list_pro02 a li > div{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; } .list_pro02 a li > div img{ max-width: 100%; max-height: 100%; } .list_pro02 a li > div img{ transition: all 0.5s; } .list_pro02 a:hover li > div img{ transform: scale(1.2); } .list_pro02 a span{ font-size: 18px; text-align: center; margin-top: 3.5%; line-height: 1.5; display: block; } .productinfoBox .box{ background: #f6f9ff; } .productinfoBox .box .location1{ background: none; } .productinfoBox .box .width > h1{ font-size: 30px; color: #002f9a; padding-bottom: 0.6%; margin-bottom: 3%; margin-top: 2%; border-bottom: 1px solid #747474; } .productinfoBox .box .info{ float: left; width: 35%; margin-top: 3%; } .productinfoBox .box .info > b{ display: block; font-size: 24px; line-height: 1.5; } .productinfoBox .box .info > li{ margin-top: 3%; } .productinfoBox .box .info > li, .productinfoBox .box .info > li *{ font-size: 16px; color: #3f3e3e; line-height: 1.7; } .productinfoBox .pic{ float: right; position: relative; width: 57%; } .productinfoBox .pic > .img{ width: calc(91% - 110px); position: relative; } .productinfoBox .pic > .img img{ width: 100%; } .productinfoBox .pic > .img img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .productinfoBox .pic #showArea{ position: absolute; width: 122px; right: 0; top: 56px; bottom: 56px; overflow: hidden; } .productinfoBox .pic #showArea img{ width: 100%; margin-top: 15px; border: 1px solid #dcdcdc; box-sizing: border-box; cursor: pointer; } .productinfoBox .pic #showArea img:nth-child(1){ margin-top: 0; } .productinfoBox .pic #showArea img.on{ border-color: #ababab; } .productinfoBox .pic #gotop, .productinfoBox .pic #gobottom{ position: absolute; right: 0; width: 122px; height: 16px; cursor: pointer; background: url("../images/btn.png") center no-repeat; } .productinfoBox .pic #gotop{ top: 20px; } .productinfoBox .pic #gobottom{ bottom: 20px; transform: rotateX(180deg); } .productinfoBox .padding > .width > span{ font-size: 24px; display: block; padding-top: 4%; clear: both; font-weight: bold; padding-bottom: 0.6%; border-bottom: 1px solid #747474; } .productinfoBox .padding > .width > .big_img{ margin-top: 3%; } .productinfoBox .btn{ font-size: 0; letter-spacing: -1px; margin-top: 2%; } .productinfoBox .btn a{ display: inline-block; vertical-align: top; letter-spacing: -1px; font-size: 0; background: #f6f9ff; padding: 0 5%; cursor: pointer; } .productinfoBox .btn a:nth-child(2){ margin-left: 5%; } .productinfoBox .btn a *{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin-left: 22px; } .productinfoBox .btn a img:nth-child(1){ margin-left: 0; } .productinfoBox .btn a span{ font-size: 18px; line-height: 2.9; } .picBox img{ width: 100%; } .productinfoBox .list a{ display: block; float: left; width: 23.5%; margin: 3% 0 0 2%; } .productinfoBox .list a:nth-child(4n+1){ margin-left: 0; clear: both; } .productinfoBox .list a div{ overflow: hidden; border: 1px solid #e0e0e0; } .productinfoBox .list a div img{ width: 100%; transition: all 0.5s; } .productinfoBox .list a:hover div img{ transform: scale(1.1); } .productinfoBox .list a span{ text-align: center; font-size: 16px; margin-top: 2%; } .productinfoBox1 > h1{ font-size: 30px; color: #002f9a; padding-bottom: 0.6%; margin-bottom: 3%; border-bottom: 1px solid #747474; } .productinfoBox1 > span{ font-size: 24px; display: block; padding-top: 4%; clear: both; padding-bottom: 0.6%; border-bottom: 1px solid #747474; } .productinfoBox1 .info{ float: right; width: 41%; } .productinfoBox1 .info > b{ display: block; font-size: 24px; line-height: 1.5; } .productinfoBox1 .info > ul{ margin-top: 3%; } .productinfoBox1 .info > ul, .productinfoBox1 .info > ul *{ font-size: 16px; color: #3f3e3e; line-height: 1.7; } .productinfoBox1 > .big_img{ margin-top: 3%; } .productinfoBox1 .pic{ float: left; position: relative; width: 50%; } .productinfoBox1 .pic > .img{ width: calc(91% - 110px); position: relative; border: 1px solid #e1e1e1; } .productinfoBox1 .pic > .img img{ width: 100%; } .productinfoBox1 .pic > .img img:nth-child(2){ position: absolute; left: 0; top: 0; height: 100%; } .productinfoBox1 .pic #showArea{ position: absolute; width: 110px; right: 0; top: 46px; bottom: 46px; overflow: hidden; } .productinfoBox1 .pic #showArea img{ width: 100%; margin-top: 15px; border: 1px solid #dcdcdc; box-sizing: border-box; cursor: pointer; } .productinfoBox1 .pic #showArea img:nth-child(1){ margin-top: 0; } .productinfoBox1 .pic #showArea img.on{ border-color: #ababab; } .productinfoBox1 .pic #gotop, .productinfoBox1 .pic #gobottom{ position: absolute; right: 0; width: 110px; height: 16px; cursor: pointer; background: url("../images/btn.png") center no-repeat; } .productinfoBox1 .pic #gotop{ top: 5px; } .productinfoBox1 .pic #gobottom{ bottom: 5px; transform: rotateX(180deg); } .videoBox{ position: fixed; z-index: 99999; left: 0; top: 0; right: 0; bottom: 0; background: #000; display: none; justify-content: center; align-items: center; } .videoBox.on{ display: flex; } .videoBox video{ display: block; margin: 0 auto; max-width: 100%; max-height: 100%; } .videoBox b{ display: block; position: absolute; background: #FFF; color: #000; right: 0; top: 0; font-size: 12px; font-weight: normal; padding: 0 20px; cursor: pointer; }