#header{ position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; background-color: #fff; } .pswp__button--arrow--left{ left: 5%; } .pswp__button--arrow--right{ right: 5%; } #youku-playerBox{ width: 100% !important; height: 100% !important; } #header .header-top { border-top: 5px solid #0583C9; padding: 8px 0 9px; border-bottom: 1px solid #E5E5E5; } #header .header-top .welcome { float: left; line-height: 78px; color: #666666; } #header .header-top .header-list { float: left; margin-left: 0.8%; } #header .header-top .header-list li { float: left; line-height: 78px; margin-left: 12px; } #header .header-top .header-list li a { font-size: 17px; color: #333333; } #header .header-top .header-list li a span { position: relative; top: 2px; } #header .header-top .telBox > div { float: left; line-height: 79px; } #header .header-top .telBox .tel { margin-right: 15px; } #header .header-top .telBox .tel span { margin-left: 5px; position: relative; top: 2px; font-size:20px; font-style: italic; } #header .header-top .telBox .tel img{ margin-top:-5px;} #header .pc_menu { padding: 10px 0 0; border-bottom: 4px solid #E5E5E5; text-align: center; } #header .pc_menu .menu { width: 87.5%; display: inline-block; } #header .pc_menu .menu > li { display: inline-block; width: 14.8%; padding: 0 1.9%; position: relative; padding-bottom: 4px; } #header .pc_menu .menu > li > a { color: #000000; font-size: 18px; display: block; height: 57px; line-height: 57px; background-color: #fff; border-radius: 0; } #header .pc_menu .menu > li .menu_2 { position: absolute; top: 61px; width: 100%; left: 0; display: none; border-top: 4px solid #0483C8; background: url(../images/opacity1.png) repeat; } #header .pc_menu .menu > li .menu_2 li { height: 45px; line-height: 45px; } #header .pc_menu .menu > li .menu_2 li a { color: #000000; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #header .pc_menu .menu > li .menu_2 li a img { margin-right: 5px; display: none; } #header .pc_menu .menu > li .menu_2 li a:hover { background-color: #E60011; color: #fff; } #header .pc_menu .menu > li .menu_2 li a:hover img { display: inline-block; -webkit-animation: scroll 1.5s linear infinite; animation: scroll 1.5s linear infinite; } #header .pc_menu .menu > li.current>a { background-color: #E60011; color: #fff; border-radius: 50%; } #header .pc_menu .menu > li:hover > a { background-color: #E60011; color: #fff; border-radius: 50%; } #index-banner { height: 771px; margin-top: 177px; background: #0483c8 url(../images/header_23.jpg) no-repeat center; overflow: hidden; position: relative; } #index-banner .cl1-box, #index-banner .cl3-box { position: absolute; width: 843px; height: 926px; } #index-banner .cl1-box .cl1-out, #index-banner .cl3-box .cl1-out { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #index-banner .cl1-box .cl1-in, #index-banner .cl3-box .cl1-in { width: 752px; height: 751px; position: absolute; left: 45.5px; top: 133.5px; -webkit-animation: scroll 9s linear infinite; animation: scroll 9s linear infinite; } #index-banner .cl1-box { bottom: -380px; left: -390px; } #index-banner .cl3-box { right: 0; top: -165px; width: 600px; height: 659px; } #index-banner .cl3-box .cl1-in { width: 535px; height: 534px; left: 29.5px; top: 93.5px; } #index-banner .cl2-box { position: absolute; width: 593px; height: 593px; left: 395px; bottom: -245px; } .addcss { width:345px; height:250px; } .search_input input{ color: #777; } .search_input input::-webkit-input-placeholder{ color: #777; } .search_input input:-moz-placeholder{ color: #777; } .search_input input::-moz-placeholder{ color: #777; } .search_input input:-ms-input-placeholder{ color: #777; } #index-banner .cl2-box .cl2-out { width: 548px; height: 583px; position: absolute; left: 60px; top: -42px; } #index-banner .cl2-box .cl2-in { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-animation: scroll 7s linear infinite; animation: scroll 7s linear infinite; } #index-banner .container { position: relative; } #index-banner .container .index-banner-text { position: absolute; top: 160px; left: 0; } #index-banner .container .index-banner-text .div2 { margin-top: 20px; margin-left: 115px; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } #index-banner .container .index-banner-text .div2 img { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } #index-banner .container .index-banner-text p { position: absolute; } #index-banner .container .index-banner-text .p3 { left: 121px; top: 6px; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } #index-banner .container .index-banner-text .p4 { left: 442px; top: -28px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #index-banner .container .index-banner-text .p5 { left: 82px; top: 65px; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } #index-banner .container .index-banner-text .p6 { left: 128px; top: 85px; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } #index-banner .container .index-banner-text .p7 { left: 185px; top: 95px; -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } #index-banner .container .index-banner-text .p8 { left: 436px; top: 167px; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } #index-banner .container .index-banner-text .p9 { right: -25px; top: -10px; -webkit-animation-delay: 3.9s; animation-delay: 3.9s; } #index-banner .container .index-banner-image { float: right; margin-right: -110px; margin-top: 100px; overflow: hidden; } #index-banner .container .index-banner-image img { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } .content .content1 { background: url(../images/content2_02.jpg) no-repeat center; padding-top: 175px; padding-bottom: 20px; } .content .content1 .container:before { content: ""; display: block; width: 138px; height: 138px; background: url(../images/content1-7.png) no-repeat center; position: absolute; top: 38%; left: -4%; -webkit-animation: scroll 5s linear infinite; animation: scroll 5s linear infinite; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .content .content1 .container:after { content: ""; display: block; width: 92px; height: 92px; background: url(../images/content1-8.png) no-repeat center; position: absolute; top: 51%; left: 33%; -webkit-animation: scroll 5s linear infinite; animation: scroll 5s linear infinite; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .content .content1 .container { position: relative; } .content .content1 .container .content1-list li { float: left; position: relative; text-align: center; } .content .content1 .container .content1-list li .p1 { margin-top: 30%; margin-left: 10%; } .content .content1 .container .content1-list li .p2 { color: #333; margin: 2% 20% 0; } .content .content1 .container .content1-list li p { position: relative; } .content .content1 .container .content1-list li:hover::before { -webkit-animation: scroll 3s linear; animation: scroll 3s linear; } .content .content1 .container .content1-list .li1 { width: 40%; } .content .content1 .container .content1-list .li1 .p2 { font-size: 38px; color: #999999; margin: 8% 0 4%; } .content .content1 .container .content1-list .li1 .p3 { font-size: 28px; color: #1a1a1a; } .content .content1 .container .content1-list li:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .content .content1 .container .content1-list .li1:before { background: url(../images/content1-1.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li2:before { background: url(../images/content1-2.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li3:before { background: url(../images/content1-3.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li4:before { background: url(../images/content1-4.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li5:before { background: url(../images/content1-5.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li6:before { background: url(../images/content1-6.png) no-repeat center; background-size: 100% auto; } .content .content1 .container .content1-list .li2 { width: 20%; margin-left: -1%; margin-top: 3%; } .content .content1 .container .content1-list .li3 { width: 17%; margin-top: 9%; margin-left: 1%; } .content .content1 .container .content1-list .li3 .p1 { margin-left: 4%; } .content .content1 .container .content1-list .li4 { width: 18%; margin-top: 6%; margin-left: 2%; } .content .content1 .container .content1-list .li4 .p1 { margin-top: 25%; } .content .content1 .container .content1-list .li5 { width: 21%; margin-left: -51%; margin-top: 23%; } .content .content1 .container .content1-list .li6 { width: 18%; margin-left: -7%; margin-top: 1%; } .content .content1 .container .content1-list .li6 .p1 { margin-left: 15%; } .content .content1 .container .left-arrow { position: absolute; left: -130px; top: 47%; -webkit-animation: shake 3s linear infinite; animation: shake 3s linear infinite; } .content .content1 .container .right-arrow { position: absolute; right: 50px; top: 47%; -webkit-animation: shake 3s linear infinite; animation: shake 3s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .content .content1 .container .engliash-text { text-align: right; margin: 35px 20px 0 0; } .content .content2 #particles-js { background: #0583c9 url(../images/content2_03.jpg) no-repeat center bottom; position: relative; height: 1000px; overflow: hidden; } .content .content2 #particles-js .content2-title { text-align: center; color: #ffffff; top: 100px; position: absolute; width: 100%; } .content .content2 #particles-js .content2-title .p1 { font-size: 56px; line-height: 60px; color: #A5C7E5; } .content .content2 #particles-js .content2-title .p2 { font-size: 28px; } .content .content2 #particles-js .swiper-container { position: absolute; width: 90%; top: 250px; left: 5%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide { width: 60%; height: 540px; background-color: #363636; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text { padding: 5%; color: #fff; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left { float: left; width: 55%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 { padding: 5% 5% 8%; position: relative; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 .p1 { padding-left: 80px; height: 68px; line-height: 68px; background: url(../images/about3.png) no-repeat left top; font-size: 28px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 .p2 { margin-top: 15px; color: #e5e5e5; font-size: 14px; line-height: 28px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-2 { width: 200px; height: 55px; border: 2px solid #737373; margin-top: 20px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-2 a { display: block; height: 51px; line-height: 51px; text-align: center; color: #d9d9d9; font-size: 18px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:before, .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:after { width: 51px; height: 50px; content: ""; display: block; position: absolute; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:before { background: url(../images/about1.png) no-repeat center; left: 0; top: 0; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:after { background: url(../images/about2.png) no-repeat center; right: 0; bottom: 0; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-right { width: 38%; float: right; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2img { height: 100%; background: url(../images/content2_06.jpg) no-repeat center right 16%; background-size: auto 100% !important; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul { padding: 3% 6% 0; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li { float: left; width: 33.3%; padding: 7.5px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li a { display: block; position: relative; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li a .image { border: 1px solid #4F4F4F; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li a .text { color: #fff; position: absolute; width: 100%; height: 100%; background: url(../images/opacity2.png) repeat; line-height: 100%; text-align: center; left: 0; top: 0; padding-top: 32%; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: none; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li:hover a .text { display: block; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list .content2-list-more { font-size: 18px; margin-left: 8%; margin-top: 10px; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list .content2-list-more a { color: #b2b2b2; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2Box { display: none; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide + .swiper-slide .content2img { height: 100%; background: url(../images/content2_05.jpg) no-repeat center right 16%; background-size: auto 100%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide + .swiper-slide + .swiper-slide .content2img { height: 100%; background: url(../images/content2_09.jpg) no-repeat center left 16%; background-size: auto 100% !important; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide + .swiper-slide-next .content2img { height: 100%; background: url(../images/content2_05.jpg) no-repeat center left 16%; background-position-x:16% !important; background-size: auto 100% !important; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide-active .content2img { display: none; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide-active .content2Box { display: block; } .content .content2 #particles-js .swiper-container .content2-turnpageBox { position: absolute; z-index: 1000; right: 20%; bottom: 15px; } .content .content2 #particles-js .swiper-container .content2-turnpageBox > div { width: 70px; height: 50px; text-align: center; line-height: 50px; background-color: #E30202; display: inline-block; cursor: pointer; } .content .content3 { position: relative; background: #F2F2F2; padding: 55px 0 115px; } .content .content3 .content3-proTop { position: absolute; top: 0; width: 100%; left: 0; height: 228px; background: url(../images/pro-top.png) no-repeat center bottom; z-index: 5; } .content .content3 .content3-proBottom { position: absolute; bottom: 0; width: 100%; left: 0; height: 360px; background: url(../images/pro-bottom.png) no-repeat center top; z-index: 5; } @media (min-width: 1400px) { .content .content3 .container { width: 1340px; } } .content .content3 .container { position: relative; z-index: 10; } .content .content3 .container .index-proTitle { text-align: center; } .content .content3 .container .index-proTitle .p1 { color: #9B9B9C; font-size: 38px; } .content .content3 .container .index-proTitle .p2 { font-size: 28px; color: #1a1a1a; } .content .content3 .container .index-proList { margin-top: 10px; } .content .content3 .container .index-proList li { float: left; margin-top: 15px; width: 29%; margin-right: 1.5%; position: relative; } .content .content3 .container .index-proList li a { display: block; position: relative; } .content .content3 .container .index-proList li a .text { width: 100%; height: 40px; line-height: 40px; padding: 0 2% 0 9.5%; position: absolute; top: 6.5%; font-size: 22px; color: #1a1a1a; z-index: 5; transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .content .content3 .container .index-proList li a .hover { position: absolute; width: 100%; height: 100%; border: 5px solid #0583C9; background: url(../images/opacity2.png) repeat; top: 0; left: 0; z-index: 4; padding: 20% 0 0 10%; opacity: 0; transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; } .content .content3 .container .index-proList li a:hover { box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); } .content .content3 .container .index-proList li a:hover .text { color: #fff; transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; } .content .content3 .container .index-proList li a:hover .hover { opacity: 1; transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; } .content .content3 .container .index-proList li:nth-child(2), .content .content3 .container .index-proList li:nth-child(5) { width: 39%; } .content .content3 .container .index-proList li:nth-child(2) a .text, .content .content3 .container .index-proList li:nth-child(5) a .text { padding: 1% 2% 0 6.5%; } .content .content3 .container .index-proList li:nth-child(2):before { content: ""; display: block; width: 151px; height: 97px; background: url(../images/pro-logo.png) no-repeat; position: absolute; bottom: -36%; left: 50%; margin-left: -75.5px; z-index: 5; } .content .content3 .container .index-proList li:nth-child(5) { padding-top: 4.7%; } .content .content3 .container .index-proList li:nth-child(3n+3) { margin-right: 0; } .content .content4 { background: url(../images/hezuo_14.jpg) no-repeat; padding: 80px 0 95px; } .content .content4 .hz-title { color: #fff; text-align: center; } .content .content4 .hz-title .p1 { font-size: 38px; } .content .content4 .hz-title .p2 { font-size: 28px; } .content .content4 .hz-list { margin-top: 25px; } .content .content4 .hz-list li { float: left; width: 25%; } .content .content4 .hz-list li a { display: block; border: 1px solid #E1E2E6; overflow: hidden; } .content .content4 .hz-list li a img { -ms-transform: scale(1); transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; } .content .content4 .hz-list li a:hover img { -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transition: all linear 0.4s; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; } .content .content4 .hz-more { text-align: center; margin-top: 40px; } .content .content4 .hz-more a { display: inline-block; width: 200px; height: 55px; border: 1px solid #fff; color: #fff; font-size: 18px; line-height: 53px; } .content .content5 { background: url(../images/news_06.jpg) no-repeat center; padding: 80px 0 120px; } .content .content5 .content5-header .index-newsTitle { float: left; font-size: 26px; color: #1a1a1a; } .content .content5 .content5-header .index-newsTitle span { font-size: 56px; color: #0583c9; } .content .content5 .content5-header .index-newsType { float: right; margin-top: 20px; } .content .content5 .content5-header .index-newsType li { float: left; width: 150px; height: 40px; line-height: 38px; border: 1px solid #C7C7C7; text-align: center; margin-left: 5px; font-size: 16px; } .content .content5 .content5-header .index-newsType li a { color: #1a1a1a; display: block; } .content .content5 .content5-header .index-newsType li.current { border: none; background-color: #0583C9; } .content .content5 .content5-header .index-newsType li.current a { color: #fff; } .content .content5 .index-newsListBox .index-newsList { margin-top: 20px; display: none; overflow: hidden; } .content .content5 .index-newsListBox .index-newsList li { margin-top: 15px; background-color: #fff; } .content .content5 .index-newsListBox .index-newsList li + li .image { float: left; } .content .content5 .index-newsListBox .index-newsList li + li .text { float: left; } .content .content5 .index-newsListBox .index-newsList li .image { width: 50%; float: right; } .content .content5 .index-newsListBox .index-newsList li .text { width: 50%; float: right; padding: 4%; } .content .content5 .index-newsListBox .index-newsList li .text .p1 { position: relative; padding-bottom: 15px; border-bottom: 1px dashed #C1C1C1; padding-left: 11px; color: #000; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .content .content5 .index-newsListBox .index-newsList li .text .p1::before { content: ""; display: block; width: 4px; height: 21px; background-color: #0583C9; position: absolute; left: 0; top: 0; } .content .content5 .index-newsListBox .index-newsList li .text .p2 { font-size: 14px; color: #737373; line-height: 26px; margin-top: 15px; height: 78px; overflow: hidden; } .content .content5 .index-newsListBox .index-newsList li .text .p3 { margin-top: 40px; font-size: 14px; color: #a6a6a6; padding-left: 30px; height: 20px; line-height: 24px; background: url(../images/date.png) no-repeat left center; } .content .content5 .index-newsListBox .index-newsList:first-child { display: block; } .product-detail1 .product-detail1-left { float: left; width: 51%; } .product-detail1 .product-detail1-left .product-detail1-large { border: 1px solid #CCCCCC; position: relative; } .product-detail1 .product-detail1-left .product-detail1-large ul { position: relative; } .product-detail1 .product-detail1-left .product-detail1-large ul li { float: left; } .product-detail1 .product-detail1-left .product-detail1-samllBox { padding: 0 20px; position: relative; margin-top: 20px; } .product-detail1 .product-detail1-left .product-detail1-samllBox .product-detail1-samllprev, .product-detail1 .product-detail1-left .product-detail1-samllBox .product-detail1-samllnext { position: absolute; width: 20px; height: 100%; top: 0; padding-top: 6%; cursor: pointer; } .product-detail1 .product-detail1-left .product-detail1-samllBox .product-detail1-samllprev { left: 0; } .product-detail1 .product-detail1-left .product-detail1-samllBox .product-detail1-samllnext { right: 0; text-align: right; } .product-detail1 .product-detail1-left .product-detail1-small { overflow: hidden; } .product-detail1 .product-detail1-left .product-detail1-small ul { position: relative; } .product-detail1 .product-detail1-left .product-detail1-small ul li { float: left; cursor: pointer; } .product-detail1 .product-detail1-left .product-detail1-small ul li img { border: 1px solid #D9D9D9; } .product-detail1 .product-detail1-left .product-detail1-small ul li.current img { border-color: #f03232; } .product-detail1 .product-detail1-left .product-detail1-small ul li:last-child { margin-right: 0 !important; } .product-detail1 .product-detail1-right { float: left; width: 49%; padding-left: 30px; } .product-detail1 .product-detail1-right .p1 { font-size: 24px; color: #404040; line-height: 30px; padding: 5px 0 25px; border-bottom: 1px dashed #BFBFBF; overflow: hidden; } .product-detail1 .product-detail1-right .p1 img { float: left; } .product-detail1 .product-detail1-right .p1 span { position: relative; top: 10px; display: block; margin-left: 65px; } .product-detail1 .product-detail1-right p { color: #595959; font-size: 14px; } .product-detail1 .product-detail1-right .p2 { margin: 25px 0 30px; } .product-detail1 .product-detail1-right .p3 { line-height: 26px; } .product-detail1 .product-detail1-right .p4 { margin-top: 55px; } .product-detail1 .product-detail1-right .p4 a { display: inline-block; width: 176px; height: 45px; line-height: 45px; background-color: #E60011; color: #fff; font-size: 18px; text-align: center; border-radius: 8px; } .prduct-detail2 { margin-top: 50px; } .prduct-detail2 .prduct-detail2Type { padding-left: 5px; background-color: #999999; } .prduct-detail2 .prduct-detail2Type li { height: 55px; line-height: 55px; text-align: center; width: 150px; border-right: 1px solid #AEAEAE; color: #fff; font-size: 16px; float: left; cursor: pointer; } .prduct-detail2 .prduct-detail2Type li.current { background-color: #0583C9; } .prduct-detail2 .prduct-detail2Type li:last-child { border-right: none; } .prduct-detail2 .prduct-detail2-contentBox .prduct-detail2-content { padding: 35px 0 130px 10px; display: none; } .prduct-detail2 .prduct-detail2-contentBox .prduct-detail2-content:first-child { display: block; } .prduct-detail2 .pageTurning .prevs, .prduct-detail2 .pageTurning .nexts { background: #F2F2F2; line-height: 250%; padding: 0 10px; margin-bottom: 10px; } #footer .footer-top { border-bottom: 5px solid #0583C9; background-color: #CCCCCC; padding: 25px 0; } #footer .footer-top .row > div { float: left; width: 25%; text-align: center; position: relative; } #footer .footer-top .row .footer-top2 .footer-top2Box { display: inline-block; } #footer .footer-top .row .footer-top2 .footer-top2Box > div { float: left; } #footer .footer-top .row .footer-top2 .footer-top2Box .erweima { width: 126px; } #footer .footer-top .row .footer-top2 .footer-top2Box .erweima img{ -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swings; animation-name: swings; animation-fill-mode: forwards; animation-iteration-count:infinite; animation-duration: 5s; -webkit-animation-duration: 5s; } @keyframes swings{ 5%{ -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 10%{ -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 15%{ webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 20%{ -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 25%{ webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 100%{ webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } #footer .footer-top .row .footer-top2 .footer-top2Box .text { width: 14px; font-size: 14px; line-height: 15px; margin-left: 10px; } #footer .footer-top .row .footer-top3 { width: 35%; } #footer .footer-top .row .footer-top3 ul { display: inline-block; text-align: left; margin-top: 10px; } #footer .footer-top .row .footer-top3 ul li { color: #000000; font-size: 14px; line-height: 28px; } #footer .footer-top .row .footer-top4 { width: 15%; line-height: 130px; cursor: pointer; } #footer .footer-top .row > div:before { content: ""; display: block; width: 1px; height: 135px; background: url(../images/footer-line.png) no-repeat center; position: absolute; right: 0; top: 0; } #footer .footer-top .row > div:last-child:before { display: none; } #footer .footer-bottom { background-color: #3B3B3B; } #footer .footer-bottom .footer-bottom1 { padding: 28px 0; border-bottom: 1px dashed #fff; text-align: center; } #footer .footer-bottom .footer-bottom1 .footer-menu { display: inline-block; width: 80%; } #footer .footer-bottom .footer-bottom1 .footer-menu li { float: left; width: 14.2%; position: relative; line-height: 18px; } #footer .footer-bottom .footer-bottom1 .footer-menu li a { color: #fff; font-size: 16px; display: block; } #footer .footer-bottom .footer-bottom1 .footer-menu li a:hover { color: #ff0101; } #footer .footer-bottom .footer-bottom1 .footer-menu li:before { content: ""; display: block; width: 1px; height: 17px; background-color: #fff; position: absolute; right: 0; top: 1px; } #footer .footer-bottom .footer-bottom1 .footer-menu li:last-child:before { display: none; } #footer .footer-bottom .footer-bottom2 { height: 110px; padding-top: 25px; color: #AFAFAF; font-size: 14px; line-height: 20px; text-align: center; } #footer .footer-bottom .footer-bottom2 a{ color: #AFAFAF; } @-webkit-keyframes scroll { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes scroll { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes shake{ 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 30% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 40% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes shake{ 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 30% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 40% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animated1 { animation: animated1 1s ease forwards; -webkit-animation: animated1 1s ease forwards; -moz-animation: animated1 1s ease forwards; opacity: 0; } @-webkit-keyframes animated1 { 0% { transform: perspective(2000px) scale(1) rotateY(80deg); -webkit-transform: perspective(2000px) scale(1) rotateY(80deg); -moz-transform: perspective(2000px) scale(1) rotateY(80deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { transform: perspective(2000px) scale(1) rotateY(0); -webkit-transform: perspective(2000px) scale(1) rotateY(0); -moz-transform: perspective(2000px) scale(1) rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } @keyframes animated1 { 0% { transform: perspective(2000px) scale(1) rotateY(80deg); -webkit-transform: perspective(2000px) scale(1) rotateY(80deg); -moz-transform: perspective(2000px) scale(1) rotateY(80deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { transform: perspective(2000px) scale(1) rotateY(0); -webkit-transform: perspective(2000px) scale(1) rotateY(0); -moz-transform: perspective(2000px) scale(1) rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } #footer{ position: relative; z-index: 10; } .cl1,.cl2,.cl3{ position: absolute; -webkit-animation: scroll 5s linear infinite; animation: scroll 5s linear infinite; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .cl1{ bottom: -40px; left: 330px; } .cl2{ bottom: 60px; left: 820px; } .cl3{ bottom: 25px; left: 1060px; } @media (max-width: 1200px) { .content .content1 .container .content1-list .li4 .p1 { margin-top: 18%; } .content .content1 .container .content1-list li .p1 { margin-top: 25%; } /*#header .header-top .header-list { display: none; }*/ #header .menu_icon{ top: 28%; } .telBox{ float: right; } #header .menu_icon{ right: 5px; } #header .header-top .header-list li{ margin-left: 6px; } .cl1,.cl2,.cl3{ display: none; } } @media (max-width: 992px) { .product-detail1{ overflow: hidden; } #header .header-top .telBox > div{ line-height: 30px; } .sub_banner { margin-top: 0; } #header .pc_menu { display: none; } #header { position: relative; } #index-banner { margin-top: 0; } #index-banner .container .index-banner-text { z-index: 10; display: none; } #index-banner .container .index-banner-image { display: none; } #index-banner { height: 3.9rem; background: url(../images/phone-banner_02.jpg) no-repeat center; background-size: 100% auto; } #index-banner > div { display: none; } .content .content1 { padding: 0.35rem 0 0.25rem; background-color: #F0F0F0; } .content .content1 .container .content1-list .li1 { width: 3.4rem; height: 3.4rem; margin-left: 2rem; } .content .content1 .container:before { width: 0.95rem; height: 0.95rem; background-size: 100% auto; top: 2.1rem; left: 1.8rem; } .content .content1 .container:after { width: 0.63rem; height: 0.63rem; background-size: 100% auto; top: 2.8rem; left: 4.9rem; } .content .content1 .container .content1-list .li1 .p1 img { width: 1.45rem; } .content .content1 .container .content1-list .li1 .p2 { font-size: 0.33rem; } .content .content1 .container .content1-list .li1 .p3 { font-size: 0.26rem; } .content .content1 .container .content1-list .li2 { width: 2.6rem; height: 2.6rem; margin-left: 0.4rem; margin-top: -0.1rem; } .content .content1 .container .content1-list .li3 { width: 2.5rem; height: 2.5rem; margin-top: 0.9rem; margin-left: 1rem; } .content .content1 .container .content1-list .li4 { width: 2.5rem; height: 2.5rem; margin-top: -0.5rem; margin-left: 0.4rem; } .content .content1 .container .content1-list .li5 { width: 2.75rem; height: 2.75rem; margin-left: 1rem; margin-top: 0.3rem; } .content .content1 .container .content1-list .li6 { width: 2.5rem; height: 2.5rem; margin-left: 2.2rem; margin-top: -0.2rem; } .content .content1 .container .content1-list li .p1 { margin-top: 30%; } .content .content1 .container .content1-list .li4 .p1 { margin-top: 29%; } .content .content3 .container .index-proList li:nth-child(2):before { width: 100px; background-size: 100% auto; bottom: -60%; margin-left: -50px; } .main { width: 530px; } ._aside { width: 230px; margin-left: 5px; } .article { padding-right: 15px; } .product-detail1 .product-detail1-right { width: 100%; padding-left: 0; } .product-detail1 .product-detail1-left { width: 100%; } .product-detail1 .product-detail1-right .p1 { padding-top: 25px; } .sub_content { padding-bottom: 150px; } .article { padding-top: 0; } } @media (max-width: 767px) { #header .header-top .header-list li:first-child{ margin-left: 0; } #header .header-top .header-list{ margin-left: 0; position: absolute; top: 0.5rem; left: 0.24rem; top: 1.1rem; } .telBox{ position: absolute; top: 1.7rem; left: 0.24rem; } #header .header-top .header-list li{ line-height: 30px; } #header .header-top .header-list li img{ width: 20px; } #header .header-top .header-list li a span{ font-size: 12px; } #header .logo img { width: 1.55rem; } #header .header-top .welcome { line-height: 0.9rem; font-size: 0.23rem; } #header .header-top .telBox .tel img{ width: 22px; } .english{ position: relative; top: -2px; } #header .menu_icon { top: 23%; } #header .header-top .telBox .tel span { margin-left: 0px; top: -1px; font-size: 14px; } .english img{ width: 60px; } #header .header-top { padding: 0.15rem 0 0.15rem 0.24rem; height: 2.3rem; } .content .content1 .container .content1-list .li1 { margin-left: 1.6rem; } .content .content1 .container:before { left: 1.4rem; } .content .content1 .container:after { left: 4.5rem; } .content .content1 .container .content1-list li .p1 { margin-top: 30%; } .content .content1 .container .content1-list li.li1 .p1 { margin-top: 25%; } .content .content1 .container .content1-list li .p2 { font-size: 0.2rem; } .content .content1 .container .content1-list li .p1 img { width: 0.8rem; } .content .content1 .container .content1-list .li4 .p1 { margin-top: 25%; } .content .content1 .container .content1-list .li3 { margin-top: 0.5rem; margin-left: 0.4rem; } .content .content1 .container .content1-list .li4 { margin-top: -0.2rem; } .content .content1 .container .content1-list .li5 { margin-left: 0.3rem; margin-top: 0.2rem; } .content .content1 .container .content1-list .li6 { margin-left: 1.8rem; } .content .content1 { background: url(../images/phone-zc_03.jpg) no-repeat center; background-size: 100% auto; } .content .content1 .container .engliash-text { display: none; } .content .content1 { padding: 0.6rem 0 1.7rem; } .content .content2 #particles-js .content2-title { top: 0.5rem; } .content .content2 #particles-js .content2-title .p1 { font-size: 0.5rem; line-height: 0.6rem; } .content .content2 #particles-js .content2-title .p2 { font-size: 0.3rem; } .content .content2 #particles-js .swiper-container { top: 1.85rem; width: 94%; left: 3%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left { width: 100%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 .p1 { height: 40px; line-height: 40px; font-size: 0.23rem; background-size: auto 100%; padding-left: 0.8rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:before, .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1:after { width: 0.3rem; height: 0.29rem; background-size: 100% auto; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 .p2 { margin-top: 10px; font-size: 12px; line-height: 22px; height: 110px; overflow: hidden; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-1 { padding: 5%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-2 { width: 2rem; height: 0.55rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-2 a { line-height: 0.52rem; font-size: 0.2rem; height: 0.52rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-right { width: 100%; padding: 0 0.3rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-text .content2-text-left .content2-2 { margin: 0.2rem 0 0.2rem 0.3rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide { height: 11.3rem; } .content .content2 #particles-js .swiper-container .content2-turnpageBox > div { width: 0.75rem; height: 0.5rem; line-height: 0.46rem; } .content .content2 #particles-js .swiper-container .content2-turnpageBox { bottom: 0.45rem; right: 0; } .content .content2 #particles-js .swiper-container .content2-turnpageBox > div img { width: 0.15rem; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul { padding: 3% 7.5px 0; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li { width: 50%; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list ul li a .text { position: relative; background: none; font-size: 0.2rem; color: #b2b2b2; line-height: 0.6rem; display: block; padding-top: 0; } .content .content2 #particles-js .swiper-container .swiper-wrapper .swiper-slide .content2-list .content2-list-more { font-size: 0.2rem; margin-left: 0; margin-top: 0.45rem; text-align: center; } .content .content2 #particles-js { height: 850px; background-size: 100% auto; } .content .content3 { padding: 0.4rem 0 1rem; } .content .content3 .container .index-proTitle .p1 { font-size: 0.5rem; line-height: 0.6rem; } .content .content3 .container .index-proTitle .p2 { font-size: 0.3rem; } .content .content3 .container .index-proList li { width: 100%; margin-top: 0.15rem; } .content .content3 .container .index-proList li:nth-child(2), .content .content3 .container .index-proList li:nth-child(5) { width: 100%; } .content .content3 .container .index-proList li:nth-child(2):before { display: none; } .content .content3 .container .index-proList { padding: 0 0.15rem; } .content .content4 { padding: 0.5rem 0 0.6rem; } .content .content4 .hz-title .p1 { font-size: 0.5rem; line-height: 0.6rem; } .content .content4 .hz-title .p2 { font-size: 0.3rem; } .content .content4 .hz-list { padding: 0.15rem; margin-top: 0.25rem; } .content .content4 .hz-list li { width: 50%; } .content .content4 .hz-more a { width: 2.4rem; height: 0.55rem; font-size: 0.2rem; line-height: 0.53rem; } .content .content4 .hz-more { margin-top: 0.4rem; } .content .content5 { padding: 0.65rem 0.15rem; background-size:auto 100% } .content .content5 .content5-header .index-newsTitle { float: none; font-size: 0.3rem; text-align: center; } .content .content5 .content5-header .index-newsTitle span { font-size: 0.5rem; } .content .content5 .content5-header .index-newsType { width: 100%; } .content .content5 .content5-header .index-newsType li { width: 32%; margin-right: 2%; margin-left: 0; line-height: 0.55rem; height: 0.55rem; } .content .content5 .content5-header .index-newsType li:last-child { margin-right: 0; } .content .content5 .content5-header .index-newsType li { font-size: 0.23rem; } .content .content5 .index-newsListBox .index-newsList li .image { width: 100%; } .content .content5 .index-newsListBox .index-newsList li .text { width: 100%; } .content .content5 .index-newsListBox .index-newsList li .text .p1 { font-size: 0.2rem; } .content .content5 .index-newsListBox .index-newsList li .text .p1::before { height: 0.18rem; width: 0.03rem; } .content .content5 .index-newsListBox .index-newsList li .text .p1::before { top: 0.09rem; } .content .content5 .index-newsListBox .index-newsList li .text .p1 { padding-bottom: 0.2rem; } .content .content5 .index-newsListBox .index-newsList li .text .p2 { font-size: 12px; line-height: 20px; height: 60px; } .content .content5 .index-newsListBox .index-newsList li .text .p2 { margin-top: 10px; } .content .content5 .index-newsListBox .index-newsList li .text .p3 { font-size: 0.2rem; margin-top: 0.3rem; background-size: 0.26rem auto; padding-left: 0.35rem; line-height: 20px; } #footer .footer-top .row .footer-top4 { display: none; } #footer .footer-top .row .footer-top1 { width: 56%; text-align: center; } #footer .footer-top .row .footer-top2 { width: 44%; } #footer .footer-top .row .footer-top1 img { width: 2.85rem; } #footer .footer-top { padding: 0.25rem 0.15rem; } #footer .footer-top .row .footer-top2 .footer-top2Box .text { width: 100%; margin-left: 0; font-size: 0.2rem; margin-top: 0.08rem; } #footer .footer-top .row .footer-top2 .footer-top2Box .erweima { width: 1.5rem; display: inline-block; float: none; margin-top: 0.18rem; } #footer .footer-top .row .footer-top2, #footer .footer-top .row .footer-top1 { padding-bottom: 0.3rem; border-bottom: 1px solid #A9A9A9; } #footer .footer-top .row > div:before { display: none; } #footer .footer-top .row .footer-top3 { width: 100%; } #footer .footer-top .row .footer-top3 ul { text-align: center; } #footer .footer-top .row .footer-top3 ul li { font-size: 0.2rem; line-height: 0.36rem; } #footer .footer-bottom .footer-bottom1 { display: none; } #footer .footer-bottom .footer-bottom2 { padding-top: 0.25rem; font-size: 0.2rem; text-align: left; padding-left: 0.15rem; height: auto; padding-bottom: 0.25rem; } #footer .footer-top { border-bottom: 0.05rem solid #0583C9; } .wap_footer dl dt img { width: 35%; } .wap_footer dl:first-child dt img { width: 40%; } .wap_footer dd { font-size: 0.23rem; } .main { width: 100%; } ._aside { width: 100%; margin-left: 0; } .article { padding-right: 0; margin-top: 0.5rem; } .product-detail1 .product-detail1-left .product-detail1-samllBox { margin-top: 0.15rem; } .product-detail1 .product-detail1-right .p1 span { font-size: 0.26rem; display: inline-block; margin-left: 0.1rem; } .product-detail1 .product-detail1-right .p1 { text-align: center; padding: 0.25rem 0 0.2rem; } .product-detail1 .product-detail1-right .p1 img { float: none; display: inline-block; width: 0.45rem; } .product-detail1 .product-detail1-right p { font-size: 0.23rem; } .product-detail1 .product-detail1-right .p2 { margin: 0.25rem 0 0.3rem; } .product-detail1 .product-detail1-right .p3 { line-height: 0.4rem; } .product-detail1 .product-detail1-right .p4 { text-align: center; } .product-detail1 .product-detail1-right .p4 { margin-top: 0.4rem; } .product-detail1 .product-detail1-right .p4 a { width: 3.35rem; line-height: 0.64rem; height: 0.64rem; font-size: 0.23rem; } .prduct-detail2 .prduct-detail2Type { padding-left: 0; } .prduct-detail2 .prduct-detail2Type li { width: 33.3%; height: 0.7rem; line-height: 0.7rem; font-size: 0.23rem; } .prduct-detail2 .prduct-detail2-contentBox .prduct-detail2-content { padding: 20px 0 60px 5px; } .prduct-detail2 .pageTurning .prevs, .prduct-detail2 .pageTurning .nexts { font-size: 0.23rem; } .sub_content { padding-bottom: 110px; } }