/*piblic*/ .i2 { background: url(/uploads/image/zimages/bg1.jpg) no-repeat center; background-size: cover; padding: 11vw 0 16.5vw; } .i2 .title p p { margin-top: 1.5vw; } .i2 .desc { width: 52%; line-height: 2; margin-top: 2vw; } .i3 { margin-top: 5.5vw; } .i3 li figure, .i3 li .text { padding: 42% 0; } .i3 li .text { line-height: 1.6; } .i3 li .text span { padding: 0 1.5vw; } .i3 .sj { border-bottom-color: #0d2156; border-width: 0 10px 10px; } .i4 { background: url(/uploads/image/zimages/bg2.jpg) no-repeat center; background-size: cover; padding: 5vw 0; margin-top: 5vw; } .i4 figure { background: url(/uploads/image/zimages/img4.jpg) no-repeat center; background-size: cover; } .i4 li { width: 49%; margin-top: 2.5vw; } .i5 { margin-top: 6vw; } .photolist_i1 .arrow { z-index: 2; opacity: 0; transition: 0.5s ease 0s; } .photolist_i1 .arrow:before { border-color: #fff; width: 2vw; height: 2vw; } .photolist_i1 .left { left: 19%; transform: translate(-20px, 0) scale(1, 1.5); } .photolist_i1 .right { right: 19%; transform: translate(20px, 0) scale(1, 1.5); } .photolist_i1 img { position: absolute; left: 0; top: 0; height: 100%; width: 100%; object-fit: cover; transform: scale(1); z-index: 0; transition: 0.8s linear 0s; } .photolist_i1 h4 { position: absolute; width: 100%; text-align: center; font-size: 18px; color: #fff; left: 0; bottom: 1.5vw; z-index: 2; transform: translatey(100%); opacity: 0; transition: 0.5s ease 0s; } .photolist_i1 li a { display: block; position: relative; z-index: 0; padding: 24.5% 0; overflow: hidden; } .photolist_i1 li a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #0040d5; z-index: 1; opacity: 0.5; transition: 0.5s ease 0s; } .photolist_i1 .swiper-slide-active a:before { opacity: 0; } .photolist_i1 .swiper-slide-active h4 { transform: translate(0); opacity: 1; } .swiper-page span { opacity: 1; background: none; border: 1px solid #fba51a; width: 12px; height: 12px; transition: 0.5s ease 0s; margin: 0 6px; outline: none; } .swiper-page .swiper-pagination-bullet-active { background: #fba51a; width: 32px; border-radius: 99px; } .i6 .section img { max-width: 87%; margin: 3vw auto 0; transition: 0.5s ease 0s; } .i6 .section li { padding: 3vw; border-top: 1px solid #dfe6ec; width: 50%; height: auto; } .i6 .section p { line-height: 1.5; } .i6 .section li:nth-child(1), .i6 .section li:nth-child(2) { border-top: none; } .i7 { background: url(/uploads/image/zimages/bg4.jpg) no-repeat center; background-size: cover; padding: 3vw 0; } #i7-swiper { margin: 2.5vw 0 0; } .i7-swiper .title em { margin-top: 5px; } .i7-swiper .text span { line-height: 2; margin-top: 1vw; } .i7-slide li { width: 13vw; background: rgba(0,0,0,0.5); transition: 0.5s ease 0s; } .i7-slide li.on { background: rgba(255,255,255,0.2); } .i7-slide .ul1 li { height: 12.5vw; } .i7-slide .ul2 li { height: 8vw; } .i7-slide img { height: 3.5vw; } .i7-slide p { margin-top: 10px; } .i8 { margin-top: 8vw; } .date .border-close { position: absolute; right: 1vw; top: 1.5vw; background: #dfe7ee; border: none; width: 26px; height: 26px; } .date .border-close:before { background: #0d2156; } .i8 .img a { } .i8 .img p { top: 2vw; width: 30%; z-index: 1; } .i8 .img a[title="北京市"] { top: 37%; right: 36%; width: 5%; height: 4%; } .i8 .img a[title="天津市"] { width: 4%; height: 5%; top: 37%; right: 32%; } .i8 .img a[title="上海市"] { width: 4%; height: 4%; right: 24%; top: 60%; } .i8 .img a[title="重庆市"] { width: 5%; height: 5%; top: 65%; left: 47%; } .i8 .img a[title="河北省"] { height: 5%; width: 4.5%; top: 41%; right: 36%; } .i8 .img a[title="山西省"] { width: 3.5%; height: 5%; top: 43.5%; right: 40.5%; } .i8 .img a[title="辽宁省"] { width: 5%; height: 5%; top: 30%; right: 26%; } .i8 .img a[title="吉林省"] { width: 5%; height: 4%; top: 24%; right: 23%; } .i8 .img a[title="黑龙江省"] { width: 6%; height: 5%; top: 18%; right: 19%; } .i8 .img a[title="江苏省"] { width: 4.5%; height: 4%; top: 58%; right: 28%; } .i8 .img a[title="浙江省"] { width: 4%; height: 4%; top: 64%; right: 27%; } .i8 .img a[title="安徽省"] { width: 4%; height: 4%; top: 58%; right: 32.5%; } .i8 .img a[title="福建省"] { width: 5%; height: 5%; top: 74%; right: 29%; } .i8 .img a[title="江西省"] { width: 5%; height: 5.5%; top: 68.5%; right: 34%; } .i8 .img a[title="山东省"] { width: 5%; height: 4.5%; top: 46%; right: 31%; } .i8 .img a[title="河南省"] { width: 5%; height: 8%; top: 52.5%; right: 38%; } .i8 .img a[title="湖北省"] { width: 5%; height: 5%; top: 62%; right: 38%; } .i8 .img a[title="湖南省"] { width: 7%; height: 8%; top: 69%; right: 40%; } .i8 .img a[title="广东省"] { width: 7%; height: 5%; top: 82%; right: 36%; } .i8 .img a[title="海南省"] { width: 5%; height: 5%; bottom: 1.5%; right: 44%; } .i8 .img a[title="四川省"] { width: 10%; height: 10%; top: 59%; left: 36%; } .i8 .img a[title="贵州省"] { width: 7%; height: 4%; bottom: 22.5%; left: 44.5%; } .i8 .img a[title="云南省"] { width: 5%; height: 5%; bottom: 18%; left: 37%; } .i8 .img a[title="陕西省"] { width: 4%; height: 4%; top: 53%; right: 47%; } .i8 .img a[title="甘肃省"] { width: 5%; height: 5%; top: 49%; left: 42%; } .i8 .img a[title="青海省"] { width: 17%; height: 7%; left: 25%; top: 46%; } .i8 .img a[title="内蒙古自治区"] { height: 5.5%; width: 17%; top: 34.5%; left: 40%; } .i8 .img a[title="广西壮族自治区"] { width: 6%; height: 8%; bottom: 11%; right: 45%; } .i8 .img a[title="西藏自治区"] { width: 20%; height: 6%; left: 15%; bottom: 34%; } .i8 .img a[title="宁夏回族自治区"] { width: 5%; height: 5%; top: 42%; right: 49%; } .i8 .img a[title="新疆维吾尔族自治区"] { width: 14%; height: 21%; top: 18%; left: 14%; } .city { margin-top: 1vw; } .area { margin-top: 0.5vw; } .distributor { margin-top: 1.5vw; padding-top: 1.5vw; border-top: 1px dashed #a8b3d1; } .area a { background: #dfe7ee; border-radius: 999px; transition: 0.5s ease 0s; height: 24px; line-height: 24px; padding: 0 20px; margin-right: 8px; margin-top: 0.5vw; } .area a.on { background: #fba51a; color: #fff; } .i8 .img a.on:before { position: absolute; content: ''; width: 2.5vw; height: 4vw; background: url(/uploads/image/zimages/add.png) no-repeat center; background-size: contain; left: 50%; top: 0; transform: translate(-50%, -90%); } .date { bottom: 0; left: 0; box-shadow: 0 9px 2.5vw 0 rgba(0,0,0,0.09); padding: 1.5vw 1vw 2.5vw; position: absolute; z-index: 1; width: 34%; min-width: 250px; } .city li { width: auto; } .city li.on { color: #182f5b; } .i9 { margin-top: 5vw; } .i9 .info { padding: 2.5vw 2.5vw 4.5vw; background: url(/uploads/image/zimages/bg5.png) no-repeat top right #0037cf; background-size: 53.4% auto; } .i9 .info a { border-radius: 99px; height:40px; line-height:40px; width:150px; max-width:100%; margin-top: 2.5vw; } .i9 .info a .arrow { width: 8px; height: 8px; margin-right: 1vw; transition: 0.5s ease 0s; } .i9 .info a .arrow:before { border-color: #fff; width: 100%; height: 100%; } .form { padding: 2.5vw 10vw 4.5vw 2.5vw; position: relative; z-index: 0; background: #f6f7fb; } .form ul { margin-top: 2.5vw; } #page, #load_more_button, .photolist_i1 span { display: none; } @media screen and (min-width: 801px ) { .i2 .img1 { width: 4.8vw; margin-right: 10px; } .i2 .img2 { width: 2.5vw; margin: 0 10px; } .i3 li { width: 25%; } .i3 .content, .i5 .section, .i6 .section { margin-top: 3vw; } .i4 .text { padding: 7vw 3.5vw 5vw; } .i4 .text .title em { margin-top: 3px; } .i4 i { width: 2.5vw; height: 2.5vw; margin-right: 0.5vw; } .i4 li .content { width: calc(100% - 3vw); } .photolist_i1 li { width: 45.5%; } .swiper-page { margin-top: 2.5vw; } .i6 .section li:nth-child(even) { border-left: 1px solid #dfe6ec; } .i6 { margin-top: 4.5vw; background: url(/uploads/image/zimages/bg3.png) no-repeat center 2vw #fafbfc; background-size: 40.6% auto; padding: 5vw 0 9.5vw; } .i7-swiper { width: calc(100% - 28vw); padding-right: 24%; } .i9 .info, .form { width: 50%; } .i9 .title span { margin-top: 10px; } .i9 .info figure { width: 20px; height: 20px; margin-right: 5px; } .i9 .info li li { margin-top: 1.5vw; } .i9 .info ul { margin-top: 3vw; } .form li li { margin-top: 1vw; } .form:before { content: ''; position: absolute; height: 100%; width: calc(100% - 1vw); left: 0; top: 0; background: url(/uploads/image/zimages/bg6.png) no-repeat right center; background-size: auto 86%; z-index: -1; } .i8 .img figure { margin-left: auto; width: 91.5%; } .i3 li:nth-child(odd) .flex { -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .i3 li:nth-child(even) .flex { -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .i3 li:nth-child(odd) .sj { top: 0; left: 50%; transform: translate(-50%, -100%); } .i3 li:nth-child(even) .sj { bottom: 0; left: 50%; transform: translate(-50%, 100%) rotate(180deg); } .i4 li:nth-child(even) { margin-left: 2%; } .i7-slide li li { margin-top: 1vw; } .i7-slide .ul2 { margin-left: 2vw; } .i6 ul.flex { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 1101px ) { .photolist_i1:hover .arrow { transform: translate(0) scale(1, 1.5); opacity: 1; } .photolist_i1 li:hover img { transform: scale(1.1); } .photolist_i1 .arrow:hover { transform: scale(1); } .i6 .section li:hover img { transform: translatey(-20px); } .i4 .section { margin-top: 4vw; } .i9 .info a:hover .arrow{ margin-right:0.5vw; } } @media screen and (max-width: 1500px ) { .photolist_i1 h4 { font-size: 16px; } } @media screen and (min-width:801px ) and (max-width: 1100px ) { } @media screen and (max-width: 1100px ) { .photolist_i1 h4 { font-size: 14px; } } @media screen and (max-width: 800px ) { .i2 .img1 { width: 8vw; margin-right: 2vw; } .i2 .img2 { width: 4.5vw; margin: 0 2vw; } .i2 .desc { width: 70%; margin-top: 3vw; } .i3 .content, .i6 .section { overflow: auto; -webkit-overflow-scrolling: touch; } .i3 li { width: 100%; height: auto; } .i3 li .flex { -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .i4 figure { width: 100%; height: 50vw; } .i4 .text { width: 100%; padding: 7vw 5vw; } .i4 .text .title em { margin-top: 1.5vw; } .i4 i { width: 8vw; height: 8vw; margin-right: 2vw; } .i4 li .content { width: calc(100% - 10vw); } .i4 li { margin-top: 5vw; width: 50%; } .i4 li small, .i4 li small big { display: block; line-height: 1; } .i4 { padding: 8vw 0; margin-top: 10vw; } .photolist_i1 h4 { font-size: 3.75vw; bottom: 2vw; } .photolist_i1 li { width: 66.5%; } .swiper-page span { width: 8px; height: 8px; margin: 0 3px; } .swiper-page .swiper-pagination-bullet-active { width: 26px; } .i6 .section li { width: 100%; border-top: none; padding: 0; flex-shrink: 0; } .i6 { margin-top: 8vw; background: url(/uploads/image/zimages/bg3.png) no-repeat center 5vw #fafbfc; background-size: 70% auto; padding: 10vw 0 12vw; } .i7 { padding: 8vw 0; } #i7-swiper { margin-top: 5vw; } #i7-page { text-align: center; } .i9 .info { padding: 5vw; } .i9 .title span { margin-top: 1vw; } .i9 .info figure { width: 4vw; height: 4vw; margin-right: 2vw; } .i9 .info li li { margin-top: 3vw; } .form { padding: 5vw; } .date { box-shadow: 0 1vw 5vw 0 rgba(0,0,0,0.09); padding: 8vw 5vw; margin-top: 5vw; position: relative; width: 100%; } .city, .area { margin-top: 3vw; } .area a { height: 8vw; line-height: 8vw; padding: 0 3.5vw; margin-right: 2vw; margin-top: 2vw; } .distributor { margin-top: 5vw; padding-top: 5vw; } .i3 li .text span { padding: 0; position: static; } .i3 li .text { line-height: 1.6; padding: 8vw 4vw; } /*.i3 li li { margin-left: 5vw; }*/ .i3 li .sj { top: 0; left: 50%; transform: translate(-50%, -100%); display: none; } .i7-slide { width: 100%; } .i7-slide.pc800 { display: none; } .i7-slide ul { width: 100%; } .i7-slide li { display: inline-block; vertical-align: top; width: 16vw; } .i7-slide li li { margin-left: 2%; } .i7-slide img { height: 6.5vw; } .i7-slide p { margin-top: 2vw; } .i7-slide .flex { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .i7-slide .ul1 li { height: 20.5vw; width: 49%; } .i7-slide .ul2 li { height: 20vw; width: 32%; } .i7-slide .ul2 { margin-top: 2%; } .i3 li figure { padding: 30% 0; } .i9 .info a { height: 9vw; line-height: 9vw; width: 100%; margin-top: 5vw; } .i9 .info a .arrow { width: 2vw; height: 2vw; margin-right: 4vw; } }