/* CSS Document */ *{ margin: 0; padding: 0; scroll-behavior: smooth;} body{ font-family:"Microsoft YaHei",Arial; font-size:100%; color:#000; max-width: 1920px; margin:0px auto; padding:0px; overflow-x:hidden; color: #000;} ol,ul,li,p,dl,dt,dd,h1,h2,h3,h4,h5,h6{ list-style:none outside none; margin:0px; padding:0px; font-size:100%; font-weight:normal;} img { border:none; transition: 0.5s; max-width: 100%;} a:link, a:visited { color: #222; text-decoration: none; outline:none;} a:hover, a:active { color: #222; text-decoration: none; outline:none;} .clear{ clear:both;} .page_button{ clear:both; overflow:hidden; padding-top:50px;} .page_button a { font-size: 14px; margin: 0 5px; padding: 0 8px; display: inline-block; width: auto; line-height: 24px; border: 1px rgba(0, 0, 0, 0.103) solid; box-sizing: border-box; border-radius: 5px;} .page_button span { display: inline-block; padding: 0 8px; font-size: 14px; line-height: 24px; border-radius: 5px;} .page_button a.page-num-current { border: 1px solid #098fe2; color: #098fe2; border-radius: 5px;} .page_button a:hover { border: 1px solid #098fe2; color: #098fe2;border-radius: 5px;} .iw_poi_title { color: #cc5522;} :root { --style_color: #098fe2; } /* newshow------------------------------------ */ .newsshow { width: 100%;} .newsshow_container { width: 95%; max-width: 1600px; margin: 50px auto;} .newsshow_content { width: 100%;} .newsshow_title { text-align: center; font-size: 22px; margin-bottom: 20px;} .newsshow_title p { font-size: 16px; margin-top: 10px;} .newsshow_text { padding: 20px 0; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; margin-bottom: 30px;} .newsshow_text div { width:100%; max-width:100%; margin:0 auto; margin-bottom: 30px;} .relevant_case ul { display: flex; flex-wrap: wrap; justify-content: space-between;} .relevant_case li { flex: 0 1 30%; margin-bottom: 15px; text-align: center;} .relevant_case li:hover img { transform: scale(1.05); transition: 0.5s;} .relevant_case li img { transition: 0.5s;} .case_pic { overflow: hidden;} .case_wb { line-height: 30px; background: rgb(123, 123, 138); margin-top: 15px; transition: 0.5s; color: #fff;} .relevant-case li:hover .case_wb { background: rgb(168, 168, 200); transition: 0.5s;} .toggle_button { display: flex; justify-content: space-between;} .toggle_button a { background: var(--style_color); width: 100px; line-height: 40px; display: inline-block; text-align: center; color: #fff !important;} .bdsharebuttonbox { margin: 20px 0;} .bdsharebuttonbox a { width: auto;} .relevant_title { font-size: 20px; padding: 10px; margin-bottom: 15px; position: relative;} .relevant_title::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); background: var(--style_color);} .relevant_news li { float: left; width: 45%; list-style-type: circle; list-style-position: inside; margin-bottom:10px;} .relevant_news li a:hover{ color: #098fe2} .relevant_news li span { float: right; color: #b6b2b2;} .relevant_news li:nth-of-type(even) { margin-left: 4%; padding-left: 5%; box-sizing: border-box;} /* productshow--------------------------------------------------- */ .product_show { padding: 110px 0 0; background: #efefef ;} .product_show_container { border-top: 4px solid var(--style_color); width: 95%; max-width: 1300px; margin: auto; padding: 27px; background: #fff; box-sizing: border-box; display: flex;} .product_show_container .left { flex: 0 1 50%; text-align: center;} .product_show_container .right { flex: 0 1 50%; padding: 20px 30px; box-sizing: border-box;} .product_show_container .right>div { height: 100%; display: flex; flex-direction: column;} .product_show_title { font-size: 30px;; display: block; font-weight: bold; color: #090909;} .product_show_content { margin: 30px 0 20px; padding: 25px 0; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;} .hot_line { color: #303030; margin: auto; margin-left: 0; margin-bottom: 0;} .hot_line a { margin-top: 10px; width: max-content; display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; background: var(--style_color);} .hot_line a span { color: #ffffff; font-family: Myriad_Pro; padding-left: 13px; margin-left: 13px; border-left: 1px solid rgba(255, 255, 255, 0.5);} .product_show .item_middle { line-height: 60px; padding-left: 21px; font-size: 24px; color: #fff; width: 95%; margin: 50px auto 0; max-width: 1300px; background: var(--style_color); position: relative;} .product_show .item_middle::after { content: ''; position: absolute; bottom: 0; left: 0; height: 25%; width: 100%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 25%));} .pro_introdution { padding: 20px 0; width: 95%; margin: auto; max-width: 1300px; position: relative; z-index: 1; box-sizing: border-box; background: #fff; display: block; justify-content: space-between;} .pro_introdution::after { content: ''; position: absolute; left: -50%; top: 0; background: #fff; width: 200%; height: 100%; z-index: -1;} .pro_introdution .left { flex: 0 1 78%;} .introduction_title { display: flex; justify-content: space-between; margin-bottom: 30px;} .introduction_title p { font-size: 20px; color: #212121; padding: 10px 20px; color: #000; position: relative;} .introduction_title p::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); background: var(--style_color);} .introduction_title a { display: block; font-size: 18px; color: #fff; width: 136px; line-height: 42px; background: #8fafca; text-align: center;} .relevant_product { background: #fff; padding: 0 20px; box-sizing: border-box; flex: 0 1 20%;} .relevant_text { color: #fff; line-height: 32px; text-align: center; background: #c5c5c5; transition: 0.5s; height: 32px; overflow: hidden; padding: 0 10px;} .relevant_content li:hover img { transform: scale(1.05); transition: 0.5s;} .relevant_content li:hover .relevant_text { background: var(--style_color); transition: 0.5s;} .relevant_content li img { transition: 0.5s;} .relevant_content li + li { margin-top: 10px;} .relevant_photograph { overflow: hidden;} .productshow_button a { display: block; padding:5px 10px; color: #000; width: max-content; position: relative;} .productshow_button a::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 60%; transform: translateY(-50%); background: var(--style_color);} .dd ul { display: block !important;} .dd h4:after { margin-bottom: 0 !important;} .case_photograph { overflow: hidden;} ::-webkit-scrollbar {width:5px;height:8px;background-color:#fff;border-radius:4px; position:relative;} ::-webkit-scrollbar-thumb {background-color:#b1b1b1;border-radius:3px;} @media screen and (max-width: 1024px) { .relevant_product { margin-top: 50px; padding: 0;} .relevant_content ul { display: flex; justify-content: space-between;} .relevant_content li { flex: 0 1 32%;} .relevant_content li + li { margin-top: 0;} .relevant_title { font-weight: bold; color: var(--style_color_1d2088);} .product_container .right div>span { font-size: 24px;} .product_show_title { font-size: 24px;} } @media screen and (max-width: 768px) { .product_show { padding: 50px 0 0;} .product_container .right div>span { font-size: 22px;} .relevant_news ul { display: flex; flex-wrap: wrap;} .relevant_news li { width: 100%;} .relevant_news li:nth-of-type(even) { padding-left: 0; margin-left: 0;} } @media screen and (max-width: 700px) { .product_show_container { display: block;} .product_container .right div>span { font-size: 18px;} .relevant_content li:nth-of-type(n+3) { display: none;} .relevant_content li { flex: 0 1 49%;} .relevant_text { padding: 0 10px;} .product_show { padding: 40px 0 50px;} .newsshow_title { font-size: 22px;} .introduction_title p { font-size: 16px; padding: 5px;} .productshow_button a { padding: 5px;} .newsshow_title { font-size: 18px;} .newsshow_title p { font-size: 14px;} .hot_line a span { font-size: 20px;} .product_show_container { padding: 15px;} .product_show_title { font-size: 20px;} .product_show_container .right { padding: 20px 0 0;} .product_show .item_middle { width: 100%; line-height: 45px; padding-left: 20px; font-size: 20px;} .product_show_content { margin: 20px 0; padding: 20px 0;} } /*基础配置*/ @font-face { font-family: Din; src: url(../font/D-DINCondensed.ttf); } @font-face { font-family: DinBold; src: url(../font/D-DINCondensed-Bold.ttf); } /* nav */ .nav { position: fixed; top: 0; z-index: 10; width: 100%; background-color:#FFFFFF} .navContainer { width: 95%; max-width: 1600px; margin: auto; display: flex; align-items: center; justify-content: space-between;} .navContainer .itemRight { display: flex; flex: 0 1 70%;} .headList { flex: 1;} .headList ul { display: flex;} .headList li a { text-align: center; display: block; padding: 0 2%; line-height: 100px; transition: 0.5s;} .headList li { position: relative; flex: 1;} .headList li + li::before { content: ''; position: absolute; width: 1px; height: 8px; background: #7a7a7a; transform: translateY(-50%) rotate(20deg); top: 50%; right: 0;} .headList li::after { z-index: 10; transition: 0.5s; content: ''; position: absolute; background: var(--style_color); width: 50%; height: 6px; left: 50%; bottom: -3px; transform: translateX(-50%) scale(0);} .headList li.current a { color: var(--style_color);} .headList li.current::after { transform: translateX(-50%) scale(1);} .headList li:hover a { color: var(--style_color);} .headList li:hover::after { transform: translateX(-50%) scale(1);} .headContact { margin-left: 2%; display: flex; align-items: center;} .headContact img { margin-right: 11px;} .headContact div { color: var(--style_color); font-family: Din; font-size: 30px;} .mobile_menu { display: none;} .mobile_menu div { width: 28px; height: 3px; background:var(--style_color);} .mobile_menu div + div { margin-top: 5px;} .mobile_sub_menu { display: none; width: 35%; position: fixed; right:-100%; height: 1000px; background: #fff; padding: 30px; box-sizing: border-box; transition: 0.5s; z-index: 10;} .mobile_sub_menu>div>a { letter-spacing: 2px; font-size: 16px; font-weight: bold;} .mobile_sub_menu ul { padding-left: 20px;} .mobile_sub_menu a { display: block; line-height: 40px; font-size: 15px;} .toggleClass { right: 0%; transition: 0.5s;} @media screen and (max-width: 1440px) { .navContainer .itemRight { flex: 0 1 78%;} } @media screen and (max-width: 1024px) { .mobile_menu { flex: 0 1 10%; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 18px;} .mobile_sub_menu { display: block;} .navContainer .itemRight { display: none;} .navContainer { height: 80px;} } @media screen and (max-width:500px) { .mobile_sub_menu { width: 60%; padding: 20px 20px;} .navContainer { height: 55px;} .navContainer .itemLeft { flex: 0 1 35%;} } /* indexOne */ .indexOne { position: relative; overflow: hidden; padding-top:100px;} .swiper-pagination-a { position: absolute; bottom: 5% !important; z-index: 1; text-align: center; width:100%} .swiper-pagination-a .swiper-pagination-bullet { width: 12px !important; height: 12px !important; background: #fff !important; margin: 0 8px !important; outline: 3px solid transparent; opacity: 0.8 !important;} .swiper-pagination-a .swiper-pagination-bullet-active { background: transparent !important; outline-color: var(--style_color);} .swiper_a li img:nth-of-type(2) { display: none;} @media screen and (max-width: 768px) { .swiper_a li img:nth-of-type(1) { display: none;} .swiper_a li img:nth-of-type(2) { display: block;} } /* indexTwo */ .indexTwo { background: #f2f9fb; overflow: hidden;} .TwoContainer { width: 95%; margin: auto; max-width: 1600px; padding: 60px 0;} .TwoContainer .itemTop { margin-bottom: 50px; text-align: center;} .TwoContainer .itemTop div { text-transform: uppercase; font-size: 96px; color: #ebf3f5; font-family: DinBold;} .TwoContainer .itemTop p { font-size: 48px; color: #222222; margin-top: -80px;} .TwoContainer .itemBottom ul { display: flex; justify-content: space-between;} .TwoContainer .itemBottom li { margin: 0 0.5%; border: 2px solid transparent; box-sizing: border-box; transition: 0.5s; width: max-content; overflow: hidden; text-align: center; position: relative; border-radius: 0 20px 0 20px;} .TwoContainer .itemBottom img { display: block; margin: auto;} .twoLayout { position: absolute; width: 100%; top: 10%;;} .twoDiv1 { font-size: 26px; color: #222222; margin-bottom: 15px; font-weight: bold;} .twoDiv2 { color: #666666; line-height: 24px;} .TwoContainer .itemBottom li:hover { border: 2px solid #fff; box-shadow: 0 0 15px 5px #098fe246;} @media screen and (max-width: 1024px) { .TwoContainer .itemTop div { font-size: 75px;} .TwoContainer .itemTop p { font-size: 32px; margin-top: -62px;} .twoDiv1 { font-size: 22px;} .twoDiv2 { padding: 0 10px; box-sizing: border-box;} .twoDiv2 p { display: inline; font-size: 15px;} } @media screen and (max-width: 768px) { .TwoContainer { padding: 40px 0 30px;} .TwoContainer .itemTop div { font-size: 60px;} .TwoContainer .itemTop p { font-size: 26px; margin-top: -50px;} .TwoContainer .itemBottom ul { flex-wrap: wrap;} .TwoContainer .itemBottom li { flex: 0 1 48%; margin: 0 0.5% 3%;} .twoDiv2 p { font-size: 16px; display: block;} } @media screen and (max-width: 500px) { .TwoContainer .itemTop { margin-bottom: 30px;} .TwoContainer .itemTop div { font-size: 40px;} .TwoContainer .itemTop p { font-size: 18px; margin-top: -35px;} .twoDiv1 { font-size: 16px;} .twoDiv2 p { display: inline; font-size: 15px;} } /* indexThree */ .indexThree { display: flex; background: url(../image/bgThree.jpg) left bottom no-repeat; overflow: hidden;} .indexThree .itemLeft { flex: 0 1 50%; padding: 7% 4% 0 8%; color: #fff; box-sizing: border-box;} .threeDiv1 div { font-size: 96px; opacity: 0.1; font-family: DinBold;} .threeDiv1 p { font-size: 48px; margin-top: -50px;} .threeDiv2 { font-size: 24px; margin: 40px 0 30px;} .threeDiv3 { line-height: 24px;} .threeDiv4 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 60px;} .threeDiv4 a { border: 1px solid #fff; display: block; padding: 18px 48px; color: #fff; width: max-content;} .indexThree_v{position: relative;} .indexThree_v img{opacity: 0;} .indexThree img { display: block;} .indexThree video { position: absolute;left: 0;top: 0;width: 100%;height: 100%;} .indexThree .itemRight { border-radius: 8px 0 0 0; overflow: hidden;} @media screen and (max-width: 1600px) { .indexThree .itemLeft { padding: 2% 4% 0 2%;} } @media screen and (max-width: 1440px) { .indexThree .itemLeft { padding: 2% 2% 0 2%; flex: 0 1 57%;} .threeDiv1 div { font-size: 75px;} .threeDiv1 p { font-size: 36px;} .threeDiv4 a { padding: 15px 30px;} .threeDiv2 { margin: 30px 0 20px;} } @media screen and (max-width: 1280px) { .threeDiv4 { margin-top: 20px;} .indexThree .itemLeft { padding: 2%; flex: 0 1 75%;} .indexThree .itemRight { display: flex;} .threeDiv2 { font-size: 20px;} } @media screen and (max-width: 1024px) { .threeDiv4 img { display: none;} .threeDiv1 p { font-size: 28px; margin-top: -45px;} .threeDiv1 div { font-size: 65px;} .threeDiv4 a { padding: 10px 30px;} } @media screen and (max-width: 768px) { .indexThree .itemLeft { flex: 0 1 150%;} .threeDiv2 { font-size: 18px; margin: 15px 0 10px;} .indexThree_v { height: 100%; margin: auto;} } @media screen and (max-width: 500px) { .indexThree { display: block;} .indexThree { background: url(../image/bgThree.jpg) top no-repeat; background-position-y: -100px;} } /* indexFour */ .indexFour { background: url(../image/bgFour.jpg) center; background-size: cover; overflow: hidden;} .fourContainer { width: 95%; margin: auto; max-width: 1600px; overflow: hidden; padding: 60px 0 80px;} .fourContainer .itemTop { text-align: center;} .fourContainer .itemTop div { text-transform: uppercase; font-size: 96px; color: #fff; opacity: 0.4; font-family: DinBold;} .fourContainer .itemTop p { font-size: 48px; color: #222222; margin-top: -84px; position: relative;} .fourContainer .itemMiddle { margin: 50px 0 30px; position: relative; overflow: visible !important;} .fourContainer .itemMiddle ul { justify-content: space-between !important;} .fourContainer .itemMiddle li { box-sizing: border-box; position: relative; background: #fff; border-radius: 8px; padding: 15px;} .videoContent { border-radius: 8px; overflow: hidden;} .videoName { font-size: 18px; line-height: 24px; color: #222; margin-top: 8px;} .fourContainer .itemBottom a { display: block; width: max-content; margin: auto; padding: 17px 47px; background: #fff; border: 1px solid #cbcbcb; position: relative;} .fourContainer .itemBottom a::after { content: ''; background: transparent; border: 1px solid #fff; width: 100%; height: 100%; position: absolute; left: 10px; top: 10px;} .fourArrowPrev { cursor: pointer; z-index: 10; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .fourArrowNext { cursor: pointer; z-index: 10; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} .fourContainer .itemMiddle li a::after { transition: 0.5s; opacity: 0; content: url(../image/fourArrow.png); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .fourContainer .itemMiddle li:hover a::after { opacity: 1;} @media screen and (max-width: 1024px) { .fourContainer .itemTop p { font-size: 36px; margin-top: -75px;} } @media screen and (max-width: 768px) { .fourContainer { padding: 40px 0 50px;} .fourContainer .itemTop div { font-size: 75px;} .fourContainer .itemTop p { font-size: 32px; margin-top: -63px;} } @media screen and (max-width: 500px) { .fourContainer .itemTop div { font-size: 55px;} .fourContainer .itemTop p { font-size: 24px; margin-top: -47px;} .fourContainer .itemMiddle li { padding: 10px;} .fourContainer .itemBottom a { padding: 12px 35px;} .videoName { font-size: 15px;} .fourArrowPrev { width: 30%; left: -5%;} .fourArrowNext { width: 30%; right: -5%;} } /* indexFive */ .indexFive { background: linear-gradient(to bottom, #fff 0%, #fff 80%, #f2f9fb 80%, #f2f9fb 100%); overflow: hidden;} .fiveContainer { display: flex; margin: auto; margin-left: 0; max-width: 1760px; padding: 100px 0 0;} .fiveContainer .itemLeft { flex: 1; position: relative;} .fiveContainer .itemLeft img { display: block;} .fiveLayout { position: absolute; top: 50%; right: 10%; transform: translateY(-50%);} .fiveDiv1 { font-size: 30px; line-height: 36px; color: #FFFFFF; font-weight: bold;} .fiveDiv2 { font-size: 14px; color: #FFFFFF; font-family: Din; margin: 10px 0 80px;} .fiveLayout a { display: block; width: max-content; padding: 13px 41px; border: 1px solid #FFFFFF; color: #FFFFFF;} .fiveContainer .itemRight { flex: 0 1 50%; padding-left: 2%; box-sizing: border-box;} .fiveDiv3 { display: flex; justify-content: space-between; align-items: center;} .fiveDiv4 { font-size: 48px; color: #222222;} .fiveDiv5 a { display: flex; align-items: center; color: var(--style_color);} .fiveDiv5 div { margin-right: 15px; font-size: 48px; font-family: DinBold;} .fiveDiv5 p { position: relative;} .fiveDiv5 p::after { content: ''; background: var(--style_color); position: absolute; width: 100%; height: 2px; left: 0; bottom: -6px} .fiveList { margin-top: 35px; border-left: 2px solid #ebf3f5; border-top: 2px solid #ebf3f5; box-sizing: border-box;} .fiveList ul { display: flex; flex-wrap: wrap; text-align: center;} .fiveList li { transition: 0.5s; padding: 25px 0 15px; box-sizing: border-box; flex: 0 1 33.3%; border-bottom: 2px solid #ebf3f5; border-right: 2px solid #ebf3f5; background: #fff;} .fiveList li div { position: relative;} .fiveList li div img:nth-of-type(2) { opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%);} .fiveList li p { transition: 0.5s; color: #222222; margin: 20px 0 8px;} .fiveList li span { color: #cccccc; font-size: 14px; font-family: Din;} .fiveList li:hover { position: relative; background: var(--style_color); box-shadow: 0 0 20px 0 rgba(9, 143, 226, 0.5); border-color: rgba(9, 143, 226, 0.5);} .fiveList li:hover div img:nth-of-type(2) { opacity: 1;} .fiveList li:hover p { color: #fff;} @media screen and (max-width: 1440px) { .fiveContainer .itemLeft ul { height: 100%;} .fiveContainer .itemLeft li { height: 100%; display: flex;} .fiveContainer .itemRight { flex: 0 1 40%;} } @media screen and (max-width: 1366px) { .fiveContainer .itemRight { flex: 0 1 45%;} .fiveDiv4 { font-size: 36px;} .fiveList { margin-top: 40px;} } @media screen and (max-width: 1024px) { .fiveDiv4 { font-size: 26px;} .fiveDiv5 div { font-size: 36px;} .fiveContainer .itemRight { flex: 0 1 50%;} .fiveList li p { margin: 5px 0 0; font-size: 14px;} .fiveDiv1 { font-size: 24px;} .fiveDiv2 { margin: 10px 0 50px;} .fiveLayout a { padding: 10px 30px;} } @media screen and (max-width: 768px) { .fiveContainer { flex-direction: column-reverse;} .fiveContainer .itemRight { padding-left: 0;} .fiveContainer { width: 95%; margin: auto; padding: 40px 0 50px;} .fiveList { margin: 30px 0 20px;} } @media screen and (max-width: 500px) { .fiveList li div { transform: scale(0.8);} .fiveDiv1 { font-size: 20px; line-height: 30px;} } /* indexSix */ .indexSix { background: #f2f9fb; position: relative; z-index: 1; overflow: hidden;} .sixContainer { width: 95%; margin: auto; max-width: 1600px; overflow: hidden; padding: 80px 0 100px;} .sixContainer .itemTop div { text-align: center; font-size: 96px; font-family: DinBold; color: #ebf3f5;} .sixContainer .itemTop p { text-align: center; font-size: 48px; color: #222; margin-top: -85px; position: relative;} .sixContainer .itemMiddle { margin: 50px 0 30px;} .sixContainer .itemMiddle ul { display: flex; justify-content: space-between;} .sixContainer .itemMiddle li { flex: 1; padding: 20px; box-sizing: border-box;} .sixContainer .itemMiddle li + li { border-left: 1px dashed #cccccc;} .sixContainer .itemMiddle li { display: flex;} .indexNewsDate { margin-right: 30px;} .indexNewsDate div { font-size: 60px; color: #222; font-family: Din;} .indexNewsDate p { color: #222; font-family: Din;} .indexNewsTitle { font-weight: bold; font-size: 20px; line-height: 30px; height: 30px; overflow: hidden;} .indexNewsContent { line-height: 24px; color: #666666; height: 48px; overflow: hidden; margin: 18px 0 30px;} .indexNewsMore { transition: 0.5s; margin-left: -13px; display: block; width: max-content; padding: 13px 17px; display: flex; align-items: center; color: #666666; font-size: 14px;} .indexNewsMore img { margin-left: 9px;} .sixContainer .itemBottom a { display: block; width: max-content; margin: auto; padding: 17px 47px; background: #fff; border: 1px solid #cbcbcb; position: relative;} .sixContainer .itemBottom a::after { z-index: -1; content: ''; background: transparent; border: 1px solid #cbcbcb; width: 100%; height: 100%; position: absolute; left: 10px; top: 10px;} .sixContainer .itemMiddle li:hover .indexNewsMore { margin-left: 0; color: #fff; background: var(--style_color);} @media screen and (max-width: 1024px) { .sixContainer .itemTop p { font-size: 36px; margin-top: -75px;} } @media screen and (max-width: 768px) { .sixContainer { padding: 40px 0 50px;} .sixContainer .itemTop div { font-size: 75px;} .sixContainer .itemTop p { font-size: 28px; margin-top: -60px;} .indexNewsDate { margin-right: 20px;} .sixContainer .itemMiddle li { padding: 10px;} .indexNewsContent { margin: 10px 0;} .sixContainer .itemBottom a { padding: 10px 30px;} } @media screen and (max-width: 500px) { .sixContainer .itemMiddle li:last-of-type { display: none;} .sixContainer .itemTop div { font-size: 60px;} .sixContainer .itemTop p { font-size: 24px; margin-top: -45px;} .indexNewsTitle { font-size: 18px;} .indexNewsMore { padding: 10px 12px;} .indexNewsContent { font-size: 15px; margin: 6px 0;} .indexNewsDate { margin-right: 12px;} .indexNewsDate p { white-space: nowrap;} .indexNewsDate div { font-size: 42px;} } /* indexSeven */ .indexSeven { background: url(../image/bgSeven.jpg) center top no-repeat; overflow: hidden;} .sevenContainer { width: 95%; margin: auto; max-width: 1600px; padding: 80px 0 0;} .sevenContainer .itemTop div { text-transform: uppercase; text-align: center; font-size: 96px; color: #ebf3f5; font-family: DinBold; opacity: 0.05;} .sevenContainer .itemTop p { text-align: center; font-size: 48px; color: #fff; margin-top: -85px;} .sevenContainer .itemMiddle { margin: 60px 0 100px;} .sevenContainer .itemBottom { padding: 60px 0 40px; background: url(../image/bgSeven2.jpg); background-size: cover;} .sevenDiv1{ text-transform: uppercase; font-size: 96px; font-family: DinBold; color: #ebf3f5; opacity: 0.2; text-align: center;} .sevenDiv2 { text-align: center; font-size: 48px; color: #fff; margin-top: -85px;} .sevenContainer .itemBottom ul { margin-top: 50px; display: flex;} .sevenContainer .itemBottom li { flex: 1; text-align: center;} .sevenContainer .itemBottom li p { line-height: 24px; color: #fff;} .sevenContainer .itemBottom li div { line-height: 0.7; justify-content: center; margin-bottom: 20px; color: #ffcf11; font-size: 100px; font-family: DinBold; display: flex; align-items: center;} .sevenContainer .itemBottom li div span { font-size: 14px;} .sevenContainer .itemBottom li img { margin-bottom: 20px;} .brand img:nth-of-type(2) { display: none;} @media screen and (max-width: 1024px) { .sevenContainer .itemTop div { font-size: 75px;} .sevenContainer .itemTop p { font-size: 36px; margin-top: -65px;} .sevenDiv1 { font-size: 75px;} .sevenDiv2 { font-size: 36px; margin-top: -65px;} } @media screen and (max-width: 768px) { .brand img:nth-of-type(1) { display: none;} .brand img:nth-of-type(2) { display: block;} .sevenContainer .itemTop p { font-size: 30px; margin-top: -60px;} .sevenDiv2 { font-size: 30px; margin-top: -60px;} } @media screen and (max-width: 500px) { .sevenContainer { padding: 40px 0 50px;} .sevenContainer .itemTop div { font-size: 50px;} .sevenContainer .itemTop p { font-size: 20px; margin-top: -40px;} .sevenContainer .itemMiddle { margin: 30px 0 40px;} .sevenContainer .itemBottom { padding: 40px 0 30px;} .sevenDiv1 { font-size: 50px;} .sevenDiv2 { font-size: 20px; margin-top: -40px;} .sevenContainer .itemBottom ul { flex-wrap: wrap;} .sevenContainer .itemBottom li { flex: 0 1 50%; margin-bottom: 20px;} .sevenContainer .itemBottom li img { margin-bottom: 10px; width: 22%;} .sevenContainer .itemBottom li div { font-size: 50px; margin-bottom: 10px;} } /* indexEight */ .indexEight { background: #f2f9fb; position: relative; overflow: hidden;} .eightContainer { width: 95%; margin: auto; max-width: 1600px; padding: 80px 0 0; overflow: hidden;} .eightContainer .itemTop div { text-transform: uppercase; text-align: center; font-size: 96px; font-family: DinBold; color: #ebf3f5;} .eightContainer .itemTop p { text-align: center; font-size: 48px; color: #222;} .eightContainer .itemMiddle { margin: 50px 0 70px; display: flex; justify-content: space-between; align-items: center;} .productList { flex: 0 1 50%; overflow: hidden; padding: 20px;} .productList ul { display: flex;} .productList ul li { cursor: pointer; text-align: center; box-sizing: border-box; padding: 17px 0; color: #222222; border: 1px solid #cbcbcb;} .productList ul li.swiper-slide-active { background: var(--style_color); color: #fff; box-shadow: 0 0 20px 2px #098fe246;} .indexProductMore a { display: flex; align-items: center; color: var(--style_color);} .indexProductMore div { font-size: 48px; font-family: DinBold; margin-right: 5px;} .indexProductMore p { position: relative;} .indexProductMore p::after { background: var(--style_color); content: ''; position: absolute; width: 100%; height: 2px; left: 0; bottom: -6px;} .eightContainer .itemBottom li { justify-content: center; display: flex; align-items: center;} .indexProductLayout { margin-left: 30px;} .indexProductName { font-size: 30px; font-weight: bold; color: #222222;} .indexProductEn { font-size: 14px; font-family: Din; color: #222222; margin-bottom: 40px;} .indexProductLayout p { line-height: 30px; font-family: Din; color: #666666;} .indexProductLayout a { background: #fff; margin-top: 30px; border: 1px solid #ededed; outline: 1px solid #d9dbdc; display: block; width: max-content; padding: 16px 47px; position: relative;} .indexProductLayout a::after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #ededed; outline: 1px solid #d9dbdc; top: 10px; left: 10px;} .eightContainer .itemBottom li .indexProductLayout { display: none;} .eightContainer .itemBottom li.swiper-slide-active .indexProductLayout { display: block;} .eightContainer .itemBottom li.swiper-slide-prev { opacity: 0.5; width: 30% !important;} .eightContainer .itemBottom li.swiper-slide-next { opacity: 0.5; width: 30% !important;} .eightContainer .itemBottom li.swiper-slide-active { width: 40% !important;} .eightArrowPrev { cursor: pointer; position: absolute; left: 5%; top: 60%; z-index: 10;} .eightArrowNext { cursor: pointer; position: absolute; right: 0%; top: 60%; z-index: 10;} @media screen and (max-width: 1024px) { .eightContainer { padding: 60px 0 0;} .productList { flex: 0 1 60%;} .eightContainer .itemTop div { font-size: 75px;} .eightContainer .itemTop p { font-size: 32px; margin-top: -62px;} } @media screen and (max-width: 768px) { .eightContainer { padding: 40px 0 0;} .eightContainer .itemMiddle { margin: 30px 0 50px;} .productList ul li { padding: 10px 0;} .indexProductMore div { font-size: 36px;} .eightContainer .itemBottom li.swiper-slide-prev { opacity: 0.5; width: auto !important;} .eightContainer .itemBottom li.swiper-slide-next { opacity: 0.5; width: auto !important;} .eightContainer .itemBottom li.swiper-slide-active { width: 100% !important;} .indexProductEn { margin-bottom: 15px;} .indexProductName { font-size: 22px;} .indexProductLayout a { padding: 10px 32px;} } @media screen and (max-width: 500px) { .eightContainer { padding: 20px 0 0;} .eightContainer .itemTop { margin-bottom: 30px;} .eightContainer .itemTop div { font-size: 50px;} .eightContainer .itemTop p { font-size: 20px; margin-top: -40px;} .eightContainer .itemMiddle { display: none;} .eightContainer .itemBottom li.swiper-slide-prev { opacity: 0.5; width: 100% !important;} .eightContainer .itemBottom li.swiper-slide-next { opacity: 0.5; width: 100% !important;} .eightContainer .itemBottom li.swiper-slide-active { width: 100% !important;} .eightContainer .itemBottom li { flex-direction: column-reverse;} .eightContainer .itemBottom li img { width: 50%;} .indexProductLayout { margin-left: 0; margin-bottom: 20px;} .eightArrowPrev { left: -5%; width: 28%;} .eightArrowNext { right: -5%; width: 28%;} } /* about */ .aboutBanner { height:auto; margin-top:100px;} .aboutBanner div { position: absolute; top: 50%; left: 15%; transform: translateY(-50%);} .bannerDiv1 { font-size: 48px; color: var(--style_color); font-family: DinBold; text-transform: uppercase;} .bannerDiv2 { font-size: 36px; color: #fff; line-height: 1.5;} .aboutList { border-bottom: 1px solid #e6e6e6;} .aboutListContainer { display: flex; align-items: center; justify-content: space-between; width: 95%; margin: auto; max-width: 1600px;} .aboutListContainer ul { display: flex; min-height:81px;} .aboutListContainer li { position: relative; transition: 0.5s; margin-right: 5px;} .aboutListContainer li a { transition: 0.5s; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; color: #666666;} .aboutListContainer li::after { transition: 0.5s; transform: scale(0); content: ''; position: absolute; width: 100%; height: 3px; background: var(--style_color); left: 0; bottom: 0;} .aboutListContainer li.aboutCurrent::after { transform: scale(1);} .aboutListContainer li.current::after { transform: scale(1);} .aboutListContainer li.current a { color: #222222;} .aboutListContainer li.aboutCurrent a { color: #222222;} .aboutListContainer li:hover a { color: #222222;} .aboutListContainer li:hover::after { transform: scale(1);} .path { font-size: 14px; color: #666666; background: url(../image/home.png) left center no-repeat; padding-left: 31px;} .path a { color: #666666;} @media screen and (max-width: 1280px) { .aboutListContainer li a { font-size: 16px; padding: 0 10px;} } @media screen and (max-width: 768px) { .path { display: none;} .aboutListContainer ul { overflow: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none;min-height:auto;} .aboutListContainer ul::-webkit-scrollbar { display: none;} .aboutListContainer li a { line-height: 60px;} } @media screen and (max-width: 500px) { .aboutListContainer li a { line-height: 50px;} } /* aboutOne */ .aboutOneContainer { position: relative; color: #222; width: 95%; margin: auto; max-width: 1600px; padding: 60px 0 30px 60px;} .aboutOneDiv2 { font-size: 48px; margin: 0 0 60px;} .aboutOneDiv3 { width: 20px; height: 2px; background: #222;} .aboutOneDiv4 { font-size: 22px; margin: 25px 0 20px;} .aboutOneDiv5 { line-height: 30px;} .aboutOneDiv6 { float: right; width: max-content; margin-left: 90px; position: relative;} .aboutOneDiv6::after { z-index: -1; content: ''; width: 200px; height: 200px; background: var(--style_color); position: absolute; left: -10px; bottom: -10px;} .aboutOneDiv6 img { display: block; border-radius: 8px;} @media screen and (max-width: 1366px) { .aboutOneDiv6 { width: 50%;} } @media screen and (max-width: 1024px) { .aboutBanner { height: 400px !important;} .aboutOneDiv2 { font-size: 36px; margin: 0 0 30px;} .aboutOneDiv4 { font-size: 16px;} } @media screen and ( max-width: 768px) { .aboutOneContainer { padding: 40px 0 50px;} .aboutOneDiv1 { width: 7%;} .aboutOneDiv2 { font-size: 24px; margin: 0 0 20px;} } @media screen and (max-width: 500px) { .aboutOneContainer { display: flex; flex-direction: column;} .aboutOneDiv1 { width: 12%;} .aboutOneDiv2 { margin: 0 0 10px;} .aboutOneDiv3 { display: none;} .aboutOneDiv4 { margin: 0 0 10px;} .aboutOneDiv6 { margin-left: 0; width: auto; order: 1; margin-top: 10px;} } /* aboutTwo */ .aboutTwo { background-color: #f2f9fb; margin-top: 80px;} .aboutTwoContainer { width: 95%; margin: auto; max-width: 1600px; padding: 0 0 100px;} .aboutTwoContainer .itemTop { margin-bottom: 50px;} .aboutTwoContainer .itemTop div { text-transform: uppercase; text-align: center; font-size: 96px; font-family: DinBold; color: #ebf3f5;} .aboutTwoContainer .itemTop p { text-align: center; font-size: 36px; line-height: 1.2;} .aboutTwoContainer .itemBottom ul { display: flex; justify-content: space-between;} .aboutTwoContainer .itemBottom li { flex: 0 1 24%; text-align: center;} .aboutTwoContainer .itemBottom p { margin-top: 10px; font-size: 18px; line-height: 24px;} @media screen and (max-width: 1024px) { .aboutTwo { margin-top: 30px;} .aboutTwoContainer .itemTop p { font-size: 30px;} } @media screen and (max-width: 768px) { .aboutTwoContainer .itemTop div { font-size: 75px;} .aboutTwoContainer .itemTop p { font-size: 22px;} .aboutTwoContainer .itemBottom p { font-size: 16px;} .aboutTwoContainer { padding: 0 0 50px} .aboutTwoContainer .itemTop { margin-bottom: 30px;} } @media screen and (max-width: 500px) { .aboutTwoContainer .itemTop div { font-size: 50px;} .aboutTwoContainer .itemTop p { font-size: 18px;} .aboutTwoContainer .itemBottom li { flex: 0 1 48%; margin-bottom: 20px;} .aboutTwoContainer .itemBottom ul { flex-wrap: wrap;} .aboutTwoContainer .itemBottom p { margin-top: 5px;} .aboutTwoContainer { padding: 0 0 30px} } /* aboutThree */ .aboutThree { background: url(../image/bgAboutThree.jpg) center; background-size: cover; margin-top:80px;} .aboutThreeContainer { padding: 80px 0 75px; width: 95%; margin: auto; max-width: 1600px;} .aboutThreeContainer .itemTop { text-align: center; margin-bottom: 50px;} .aboutThreeContainer .itemTop div { text-transform: uppercase; font-size: 96px; color: #ebf3f5; font-family: DinBold;} .aboutThreeContainer .itemTop p { font-size: 48px; margin-top: -85px;} .aboutThreeContainer .itemBottom ul { flex-wrap: wrap; display: flex; justify-content: space-between;} .aboutThreeContainer .itemBottom li { padding: 30px 0 25px; margin-bottom: 25px; flex: 0 1 31%; background: #fff; border-radius: 0 8px; text-align: center;} .aboutThreeContainer .itemBottom li div { font-size: 26px; font-weight: bold; margin: 25px 0 20px;} .aboutThreeContainer .itemBottom li p { color: #666666; line-height: 24px;} @media screen and (max-width: 1024px) { .aboutThreeContainer .itemBottom li p br { display: none;} .aboutThreeContainer .itemBottom li p { padding: 0 10px; box-sizing: border-box;} .aboutThreeContainer .itemBottom li div { font-size: 22px; margin: 15px 0 10px;} .aboutThreeContainer .itemTop p { font-size: 40px; margin-top: -78px;} } @media screen and (max-width: 768px) { .aboutThreeContainer { padding: 40px 0 50px;} .aboutThreeContainer .itemTop div { font-size: 75px;} .aboutThreeContainer .itemTop p { font-size: 30px; margin-top: -62px;} } @media screen and (max-width: 500px) { .aboutThreeContainer .itemTop div { font-size: 50px;} .aboutThreeContainer .itemTop p { font-size: 22px; margin-top: -41px;} .aboutThreeContainer .itemTop { margin-bottom: 30px;} .aboutThreeContainer .itemBottom li { flex: 0 1 48%;} .aboutThreeContainer .itemBottom li { padding: 20px 0 10px;} .aboutThreeContainer .itemBottom li div { font-size: 18px; margin: 8px 0;} .aboutThreeContainer { padding: 40px 0 30px;} } /* aboutFour */ .aboutFourContainer { position: relative; width: 95%; margin: auto; max-width: 1600px; padding: 80px 0 50px;} .aboutFourContainer .itemTop { text-align: center;} .aboutFourContainer .itemTop div { font-size: 96px; font-family: DinBold; color: #ebf3f5;} .aboutFourContainer .itemTop p { font-size: 48px; margin-top: -85px;} .aboutFourContainer .itemMiddle { margin: 30px 0 70px; overflow: hidden; margin: 50px 0 80px;} .aboutFourContainer .itemMiddle li { text-align: center;} .aboutFourContainer .itemMiddle p { font-size: 18px; margin-top: 10px;} .aboutFourContainer .itemBottom a { background: #fff; display: block; margin: auto; width: max-content; padding: 17px 47px; position: relative; border: 1px solid #cbcbcb;} .aboutFourContainer .itemBottom a::after { content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #cbcbcb; bottom: -10px; left: 10px; z-index: -1;} @media screen and (max-width: 1024px) { .aboutFourContainer .itemTop p { font-size: 40px; margin-top: -78px;} .aboutFourContainer .itemMiddle { margin: 50px 0;} } @media screen and (max-width: 768px) { .aboutFourContainer { padding: 40px 0 50px;} .aboutFourContainer .itemTop div { font-size: 75px;} .aboutFourContainer .itemTop p { font-size: 30px; margin-top: -62px;} .aboutFourContainer .itemMiddle { margin: 50px 0 30px;} .aboutFourContainer .itemMiddle p { font-size: 15px;} .aboutFourContainer .itemBottom a { padding: 12px 30px;} .bannerDiv1 { font-size: 38px;} .bannerDiv2 { font-size: 32px;} } @media screen and (max-width: 500px) { .aboutBanner { height:auto!important; margin-top:55px;} .bannerDiv1 { font-size: 24px;} .bannerDiv2 { font-size: 22px;} .aboutFourContainer .itemTop div { font-size: 50px;} .aboutFourContainer .itemTop p { font-size: 22px; margin-top: -42px;} .aboutFourContainer .itemMiddle { margin: 40px 0 30px;} .aboutFourContainer .itemBottom a { padding: 10px 22px;} } /* product */ .productBanner { position: relative; height: 600px; background: url(../image/product.jpg) center; background-size: cover;} .productContainer { width: 95%; margin: auto; max-width: 1600px; padding: 80px 0;} .productContainer li { border: 1px solid #cbcbcb; position: relative; z-index: 1; box-sizing: border-box; display: flex; justify-content: space-between; background: #f2f9fb; padding: 2%; float: left; width: 48%; margin: 0 1% 3% 1%;} .productLayout { display: flex; flex-direction: column; justify-content: space-evenly;} .productName { font-size: 30px; font-weight: bold;} .productEn { font-size: 14px; font-family: Din; line-height: 24px;} .productContent { line-height: 1.8; color: #666;} .productMore { position: relative; display: block; width: max-content; padding: 17px 47px; border: 1px solid #ededed; outline: 1px solid #d9dbdc !important; background: #fff;} .productMore::after { z-index: -1; content: ''; position: absolute; bottom: -10px; left: 10px; width: 100%; height: 100%; border: 1px solid #ededed80; outline: 1px solid rgb(217, 219, 220, 0.5);} @media screen and (max-width: 1024px) { .productName { font-size: 24px;} .productContent { margin: 10px 0;} .productMore { padding: 10px 22px; font-size: 14px;} } @media screen and (max-width: 768px) { .productContainer li { width: 100%;} .productContainer { padding: 40px 0 50px;} } @media screen and (max-width: 500px) { .productContainer li { display: block; padding: 3% 3% 5% 3%; margin: 0; margin-bottom: 7%;} .productImg { margin-bottom: 10px; width: 80%;} } /* solve */ .solveBanner { position: relative; height: 600px; background: url(../image/solve.jpg) center; background-size: cover;} .solveContainer { display: flex; width: 95%; margin: auto; max-width: 1330px; padding: 80px 0;} .solveList { flex: 0 1 26%; margin-right: 25px; border: 1px solid #cbcbcb; border-radius: 8px; background: #f2f9fb;} .solveHead { position: relative; overflow: hidden; border-bottom: 1px solid #cbcbcb; text-align: center; line-height: 120px; font-size: 30px; color: var(--style_color);} .solveHead::after { content: 'Solutions'; position: absolute; font-size: 96px; color: #ebf3f5; font-family: DinBold; left: 0; bottom: 0; transform: translateY(50%); text-transform: uppercase;} .solveList ul { padding: 0 24px 28px;} .solveList li a { display: block; line-height: 73px; text-align: center; position: relative; color: #666666; border-bottom: 1px dashed #cbcbcb;} .solveList li.current a { color: var(--style_color);} .solveList li a::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--style_color); right: 5%; top: 50%; transform: translateY(-50%); opacity: 0;} .solveList li.current a::after { opacity: 1;} .solveList li:hover a { color: var(--style_color);} .solveList li:hover a::after { opacity: 1;} .solveContent { flex: 1; border: 1px solid #cbcbcb; border-radius: 8px;} @media screen and (max-width: 768px) { .solveContainer { padding: 40px 0 50px;} .solveList { flex: 0 1 30%;} .solveList ul { padding: 0;} .solveHead { font-size: 22px; line-height: 90px;} .solveHead::after { font-size: 60px;} } @media screen and (max-width: 500px) { .solveContainer { display: block;} .solveList ul { display: flex; white-space: nowrap; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;} .solveList ul::-webkit-scrollbar { display: none;} .solveList ul a { padding: 0 20px;} .solveList li a::after { right: -3%;} .solveList ul a { border: none;} .solveList { margin-right: 0;} .solveHead { font-size: 20px; line-height: 70px; z-index: 1;} .solveHead::after { font-size: 50px; z-index: -1; left: 50%; bottom: 50%; transform: translate(-50%, 50%);} .solveList { margin-bottom: 30px;} .solveList li a { line-height: 60px;} } /* case */ .caseBanner { position: relative; height: 600px; background: url(../image/case.jpg) center; background-size: cover;} .caseContainer { width: 95%; margin: auto; max-width: 1600px; padding: 80px 0;} .caseContainer li { text-align: center; float: left; margin: 0 1% 3% 1%; width: 31%;} .caseImg { position: relative; border-radius: 8px; overflow: hidden;} .caseImg img { border-radius: 8px;} .caseImg::after { transition: 0.5s; opacity: 0; content: url(../image/fourArrow.png); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .caseName { font-size: 18px; margin-top: 8px; line-height: 30px; height: 30px; overflow: hidden; padding: 0 10px;} .caseContainer li:hover .caseImg::after { opacity: 1;} @media screen and (max-width: 768px) { .caseContainer { padding: 40px 0 50px;} .caseName { font-size: 16px;} } @media screen and (max-width: 500px) { .caseContainer li { width: 48%; margin: 0 1% 5% 1%;} .caseName { margin-top: 0;} } /* news */ .newsBanner { position: relative; height: 600px; background: url(../image/news.jpg) center; background-size: cover;} .newsContainer { width: 95%; margin: auto; max-width: 1600px; padding: 80px 0;} .newsImg { flex: 0 1 30%;} .newsContainer li { margin-bottom: 3%;} .newsContainer li a { display: flex;} .newsLayout { box-sizing: border-box; flex: 0 1 70%; display: flex; flex-direction: column; justify-content: space-between; padding: 1% 0 1% 5%; position: relative; z-index: 1;} .newsDate { font-size: 14px; color: #cccccc; line-height: 30px;} .newsTitle { font-size: 22px; padding: 10px 0 20px; border-bottom: 1px solid var(--style_color);} .newsContent { color: #666; line-height: 24px; height: 48px; overflow: hidden;} .newsMore { opacity: 0; background: #fff; width: 160px; line-height: 50px; text-align: center; border: 1px solid #cbcbcb; position: relative;} .newsMore::after { content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #cbcbcb; bottom: -10px; left: 10px; z-index: -1;} .newsContainer li:hover .newsMore { opacity: 1;} @media screen and (max-width: 1366px) { .newsMore { width: 130px; line-height: 40px;} } @media screen and (max-width: 1024px) { .newsImg { flex: 0 1 50%;} } @media screen and (max-width: 768px) { .newsContainer { padding: 40px 0 50px;} .newsTitle { padding: 0 0 10px; font-size: 18px; font-weight: bold;} .newsMore { font-size: 14px; width: 105px; line-height: 35px;} .newsImg { flex: 0 1 55%;} .newsImg img { display: block;} } @media screen and (max-width: 500px) { .newsContainer li a { display: block;} .newsLayout { padding: 1%;} .newsContent { margin: 10px 0 15px;} .newsContainer li { margin-bottom: 7%;} .newsMore { opacity: 1;} } /* service */ .serviceBanner { position: relative; height: 600px; background: url(../image/service.jpg) center; background-size: cover;} /* contact */ .contactBanner { position: relative; height: 600px; background: url(../image/contact.jpg) center; background-size: cover;} .contactBanner .bannerDiv2 { color: #222;} .contactContainer { padding: 80px 0; width: 95%; margin: auto; max-width: 1600px;} .contactContainer .itemTop { padding-bottom: 30px; border-bottom: 1px solid var(--style_color);} .contactContainer .itemMiddle { padding: 70px 0 0px;} .contactContainer .itemMiddle ul { display: flex; justify-content: space-between;} .contactContainer .itemMiddle li div { font-size: 18px; font-weight: bold;} .contactContainer .itemMiddle li p { margin-top: 10px; font-size: 24px; font-family: Din;} .contactContainer .itemMiddle li:nth-of-type(4) p { font-size: 16px;} @media screen and (max-width: 1024px) { .contactContainer .itemMiddle li p { font-size: 20px;} #dituContent { height: 400px !important;} } @media screen and (max-width: 768px) { .contactContainer { padding: 40px 0 50px;} .contactContainer .itemMiddle li p { font-size: 18px;} .contactContainer .itemMiddle { padding: 30px 0;} #dituContent { height: 300px !important;} } @media screen and (max-width: 500px) { .contactContainer .itemTop { padding-bottom: 20px;} .contactContainer .itemTop img { width: 45%;} .contactContainer .itemMiddle ul { flex-wrap: wrap;} .contactContainer .itemMiddle img { display: none;} .contactContainer .itemMiddle li:nth-of-type(-n+2) { flex: 0 1 50%; margin-bottom: 20px;} #dituContent { height: 220px !important;} } /* footer */ .footer { background: #f2f9fb; overflow: hidden;} .footerContainer { width: 95%; margin: auto; max-width: 1600px; padding: 50px 0 60px; display: flex; justify-content: space-between;} .footerContainer .itemLeft { flex: 0 1 65%;} .footerList { display: flex; justify-content: space-between;} .footerList h3 { font-size: 18px; color: #222222; margin-bottom: 20px; font-weight: bold;} .footerList li a { display: block; color: #888888; font-size: 14px; margin-bottom: 10px;} .copyRight { margin-top: 30px; font-size: 14px; line-height: 2; color: #888;} .copyRight a { color: #888;} .footerContainer a:hover { text-decoration: underline;} .footerContainer .itemRight { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;} .footerDiv1 div { font-size: 14px; color: #888888;} .footerDiv1 p { font-size: 40px; color: var(--style_color); font-family: Din;} .footerDiv2 { font-size: 14px; color: #888;} .iphone_footer { width: 100%; display: none; padding: 5px 0; text-align: center; background: var(--style_color); position: fixed; left: 0%; bottom: 0; z-index: 1000;} .iphone_footer ul { display: flex;} .iphone_footer li { flex: 0 1 25%;} .iphone_footer a { display: block; width: 100%; color: #fff; font-size: 15px;} .iphone_footer li + li { border-left: 1px solid rgba(255, 255, 255, 0.596);} .iphone_footer img { width: 25%;} .link { display: flex; margin: 10px 0;} .friend_link { margin-left: 20px; flex: 1;} .friend_link a { margin: 0 10px;} @media screen and (max-width: 768px) { .footerList div:nth-of-type(4) { display: none;} .footerList div:nth-of-type(5) { display: none;} } @media screen and (max-width: 700px) { .footerList { display: none;} .copyRight { margin-top: 0;} .footerContainer { padding: 20px 0 30px; flex-direction: column-reverse;} .footer { margin-bottom: 54px;} .iphone_footer { display: block;} .footerContainer .itemRight { text-align: left; align-items: flex-start; margin-bottom: 15px;} .footerContainer .itemRight div { margin: 6px 0;} .footerDiv1 p { font-size: 32px;} .footerDiv2 br { display: none;} .footerContainer .itemRight img:nth-of-type(1) { width: 50%;} } /*sitemap*/ .gm { width: 95%; max-width: 1400px; margin: 0 auto; } .sitemap_nr>dl{ border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-top: 30px;} .sitemap_nr>dl>a{ font-size: 1.5rem; font-weight: bold; color: var(--style_color); display: block;} .sitemap_nr>dl>dt{ padding: 15px 0 8px 0;} .sitemap_nr>dl>dt>a{ font-size: 1.125rem; border-left: 2px solid var(--style_color); padding-left: 10px; display: block; line-height: 20px; height: 20px; font-weight: bold; color: var(--style_color);} .sitemap_nr>dl>dd{ display: flex; flex-wrap: wrap;} .sitemap_nr>dl>dd>a{ display: block; margin-right: 15px; line-height: 24px;} @media screen and (max-width:700px){ .sitemap_nr>dl>a{ font-size: 1.125rem;} .sitemap_nr>dl>dt>a{ font-size: 1rem;} .sitemap_nr>dl>dd>a{ font-size: 0.875rem;} } .font60 { font-size: 60px;} .font46 { font-size: 46px;} .font40 { font-size: 40px;} .font38 { font-size: 38px;} .font34 { font-size: 34px;} .font32 { font-size: 32px;} .font30 { font-size: 30px;} .font28 { font-size: 28px;} .font26 { font-size: 26px;} .font24 { font-size: 24px;} .font22 { font-size: 22px;} .font21 { font-size: 21px;} .font20 { font-size: 20px;} .font36 { font-size: 36px; } .font18 { font-size: 18px;} .font16 { font-size: 16px;} .font14 { font-size: 14px;} .font13 { font-size: 13px;} .font12 { font-size: 12px;} .wrap { padding-top:78px;} @media only screen and (max-width:828px) { .font60 { font-size: 42px;} .font46 { font-size: 40px;} .font40 { font-size: 34px;} .font34 { font-size: 28px;} .font32 { font-size: 26px;} .font30 { font-size: 24px;} .font28 { font-size: 24px;} .font26 { font-size: 22px;} .font24 { font-size: 20px;} .font22 { font-size: 20px;} .font21 { font-size: 20px;} .font20 { font-size: 18px;} .font18 { font-size: 16px;} .font16 { font-size: 16px;} .font14 { font-size: 13px;} .font13 { font-size: 12px;} .font12 { font-size: 12px;} } .cons { position: relative; width: 95%; margin: auto; max-width: 1600px; } .aboutBox3 { padding: 3.7em 0; background: #f0f0f0 url(../image/map.png) 6.7% center no-repeat; background-size:contain;} .aboutBox3>.cons { display: flex; justify-content: space-between; align-items: stretch;} .aboutBox3 .txtb { width: 48.3%; text-align: left; color: #333333;} .aboutBox3 .txtb .tit { color: #333; font-weight: bold; line-height: 1.2;} .aboutBox3 .txtb .tit_2 { color: #333;} .aboutBox3 .txtb .intro { margin-top: 1em;line-height: 2;} .aboutBox3 .txtb .intro p { text-indent: 2em;} .aboutBox3 .txtb .lists { margin-top: 1em;} .aboutBox3 .txtb .lists li { position: relative; z-index: 0; padding-left: 0.9em;} .aboutBox3 .txtb .lists li::before { position: absolute; left: 0; top: 0.6em; background-color: #595959; width: 4px; height: 4px; content: ""; display: inline-block; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;} .aboutBox3 .picb { width: 48.3%; overflow: hidden;} .aboutBox3 .picb .pic { position: relative; z-index: 0; padding-top: 56.9%;} .aboutBox3 .picb .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; -webkit-transition:all 0.5s;} .aboutBox3 .picb:hover .pic img { -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .aboutBox3 .btnW { margin-top: 1em;} .aboutBox3 .list { margin-top: 3.3em; } .aboutBox3 .list ul { padding: 2em 0; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; color: #fff; background-color: #098fe2; line-height: 1.3;} .aboutBox3 .list ul li { width: 24%; margin: 0 0.5%; text-align:center} .aboutBox3 .list .t1 span { font-size: 3em; font-weight: bold;} .moreBtn4 { padding: 2px 4em; margin: 1.2em 0.4em 0; line-height: 2.7; color: #fff; display: inline-block; transition: all 0.5s; background-color: #333333; border: 1px solid #333333; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:2em;} a.moreBtn4 { color:#FFFFFF} .moreBtn4:hover { background-color: #098fe2; color: #fff;border: 1px solid #098fe2} @media screen and (max-width:828px){ .aboutBox3>.cons { display: block; } .aboutBox3 .txtb { width: 100%;} .aboutBox3 .picb { margin-top: 2em; width: 100%;} .aboutBox3 .list ul li { width: 48%;} .aboutBox3 .list ul li:nth-child(3) { margin-top: 2em;} .aboutBox3 .list ul li:nth-child(4) { margin-top: 2em;} .cons { margin: 0 1em; width: auto;} } .i_box { padding: 3.7em 0;} .i_box .titen { font-weight: bold; color:#232650; line-height: 1;} .i_box .tit { margin-top:-0.9em; color: #000000; font-weight: bold;line-height: 1.5; text-align:center} .i_box .tit::after { content: ""; display: block; width: 1.5em; margin: 0.4em auto 0; background-color: #098fe2; height:3px;} .i_box .tit2 { color: #333333; margin-top:0.2em;text-align:center} .i_box .tab { margin-top: 1.2em; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;} .i_box .tab li{min-width:16.6%;} .i_box .tab li a {margin: 0.1em 0.1em 0; line-height:3.2; color: #959595; background-color: #f1f1f1; display: block; transition: all 0.5s; font-size:1.2em} .i_box .tab li a:hover { background-color: #015ab5; color: #fff;} .i_box .tab li.hover a{ background-color: #015ab5; color: #fff;} @media only screen and (max-width:828px) { .i_box .tab li{min-width:50%;} .i_box .tab li a {margin: 0.5em 0.2em 0; line-height:3;font-size:.8em} .i_box{padding:20px 0;} } /*优势*/ .advaCon { margin-top: 3.7em; position: relative; z-index: 0; padding-top: 48.2%; background:url(../image/adva_bg.png) center center no-repeat; background-size:auto 100%; height: 0; overflow: hidden;} .advaCon .picb { position: absolute; left: 30.5%; top: 9.5%; width: 39%;} .advaCon .picb .pic { position: relative; z-index: 0; padding-top: 100%; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; overflow: hidden;} .advaCon .picb .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .advaCon .picb .circle { position: absolute; z-index: 1; left: -12%; top: -12%; width: 124%; height: 124%; background: url(../image/adva_circle.png) center center no-repeat; background-size:contain ; transition: all 0.5s; -webkit-transition:all 0.5s; } .advaCon:hover .picb .circle { transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Safari and Chrome */ } .advaCon .list { position: absolute; z-index: 1; width: 100%; top: 0; left: 0; width: 100%; text-align: left;} .advaCon .list ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .advaCon .list li { width: 33.4%; overflow: hidden; position: relative; z-index: 0;} .advaCon .list .lib{ margin: 10px;} .advaCon .list li:nth-child(n+3) { margin-top: 12.5%; } .advaCon .list li:nth-child(2) { text-align: right;} .advaCon .list li:nth-child(4) {text-align: right;} .advaCon .list li a { display: block; position: relative; margin: 10px; } .advaCon .list li .li_pu { } .advaCon .list li .li_pu .text { width: 68.4%; } .advaCon .list li:nth-child(2) .li_pu .text, .advaCon .list li:nth-child(4) .li_pu .text{ margin: 0 0 0 auto; } .advaCon .list li .li_pu .text h4 { font-size: 28px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #333333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .advaCon .list li .li_pu .text .sum { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 1.75; letter-spacing: 0px; color: #666666; margin-top: 0.62em; } .advaCon .list li .li_pu.li_t { } .advaCon .list li .li_pu.li_t .nums { font-family: Arial; font-size: 60px; font-weight: bold; font-stretch: normal; line-height: 1; letter-spacing: 0px; color: #098fe2; } .advaCon .list li .li_pu.li_t h4 { margin-top: 0.4em; } .advaCon .list li .li_pu.li_t .sum { overflow : hidden; height: 5.2em; } .advaCon .list li .li_pu.li_b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; transform: translateY(-120%); transition: 0.5s linear; border-radius: 10px; box-shadow: 0 3px 10px 4px rgba(0, 0, 0, 0.03); overflow: hidden; } /* .advaCon .list li:hover .li_pu.li_b, */ .advaCon .list li.active .li_pu.li_b { transform: translateY(0); } .advaCon .list li .li_pu.li_b .imgs { width: 31.6%; background-color: #098fe2; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .advaCon .list li .li_pu.li_b .imgs img { max-width: 66%; max-height: 50%; object-fit: contain; } .advaCon .list li .li_pu.li_b .text { padding: 6.6% 25px 5.6%; background-color: #ffffff; } .advaCon .list li .li_pu.li_b .sum { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media screen and (max-width:1000px){ .advaCon { margin-top: 1em; padding-bottom: 2em; background-image: none; height: auto; padding-top: 0;} .advaCon .picb { display: none;} .advaCon .list { position: static;} .advaCon .list li { width: 100%; margin-top: 1em;} .advaCon .list li:nth-child(n+3) {margin-top: 1em;} .advaCon .list li:nth-child(2) { margin-top: 1em;} .advaCon .list li .li_pu.li_t .nums { font-size: 32px;} .advaCon .list li .li_pu.li_t h4 { font-size: 17px;} .advaCon .list li .li_pu.li_t .sum { font-size: 14px;} } /* 横图联系 */ .horizontal_connection { text-align: left; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 40px 0; } .horizontal_connection .dth_wh { display: flex; justify-content: space-between; align-items: center; } .horizontal_connection_left { max-width: 674px; width: 54%; } .horizontal_connection_left h3 { font-size: 48px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #ffffff; } .horizontal_connection_left h4 { font-size: 34px; font-weight: normal; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #ffffff; margin-top: 0.15em; } .horizontal_connection_left .text { font-size: 20px; font-weight: normal; font-stretch: normal; line-height: 1.5; letter-spacing: 0.16em; color: #ffffff; border-top: 1px solid rgba(255, 255, 255, 0.5); padding-top: 1.35em; margin-top: 1.5em; } .horizontal_connection_right { max-width: 376px; width: 36%; } .horizontal_connection_right li { } .horizontal_connection_right li:nth-child(n+2) { margin-top: 7.4%; } .horizontal_connection_right li a { display: flex; justify-content: flex-start; align-items: flex-start; } .horizontal_connection_right li .imgs { width: 48px; height: 48px; } .horizontal_connection_right li .imgs img { width: 100%; height: 100%; object-fit: contain; } .horizontal_connection_right li .text { margin-left: 20px; } .horizontal_connection_right li .text h3 { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 1; letter-spacing: 0px; color: rgba(255, 255, 255, 0.6); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .horizontal_connection_right li .text h4 { font-family: Arial; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 1.5; letter-spacing: 0px; color: #ffffff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.14em; } a.r_more { display: block; background-color: #eaa113; border-radius: 8px; font-size: 20px; font-weight: normal; font-stretch: normal; line-height: 3; letter-spacing: 0px; color: #ffffff; width: 9.8em; text-align: center; margin-top: 11.7%; } a.r_more:hover { background-color: #098fe2; } @media screen and (max-width:828px){ .horizontal_connection { padding: 30px 0;} .horizontal_connection .dth_wh { display: block;} .horizontal_connection_left { max-width: initial; width: 100%;} .horizontal_connection_right { max-width: initial; width: 100%;} .horizontal_connection_left h3 { font-size: 30px;} .horizontal_connection_left h4 { font-size: 20px;} .horizontal_connection_right { margin-top: 20px;} .horizontal_connection_left .text { font-size: 13px; margin-top: 8px; padding-top:8px;} .horizontal_connection_right li .text h3 { font-size: 14px;} .horizontal_connection_right li .text h4 { font-size: 20px;} a.r_more { margin-top: 20px; font-size: 14px; } .horizontal_connection_right li .text { margin-left: 12px; } .horizontal_connection_right li .imgs { width: 36px; height: 36px; } } .xinlist { min-width: 320px; width: 100%; } .xinlist .p_PromptNoneData { width: auto; text-align: center } .xinlist .p_PromptNoneData .prompt_title .iconfont:before { content: "" } .xinlist .p_PromptNoneData .prompt_title .first { height: auto; display: table-cell; position: relative; vertical-align: middle; padding: 0 10px 5px 0; } .xinlist .p_PromptNoneData .prompt_title { display: inline-table; padding: 0 30px; min-height: 200px; height: 100% } .xinlist .p_PromptNoneData .prompt_title .first:before { content: "\e6b4" } .xinlist .p_PromptNoneData .prompt_title .font { display: table-cell; vertical-align: middle; text-align: left } .xinlist .p_PromptNoneData .promptbox { width: auto; height: 100% } .xinlist .p_PromptNoneData .prompt_content { padding-left: 65px } .xinlist .p_moreBtn { position: static; width: auto; display: inline-table; min-height: 29px; margin: 0; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; min-width: 86px; cursor: pointer; text-align: center } .xinlist .p_moreBtn .font { white-space: nowrap; overflow: visible; vertical-align: middle } .xinlist .p_moreBtn .iconfont:before { content: "" } @-moz-keyframes three-quarters-loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes three-quarters-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes three-quarters-loader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loading_animation { -moz-animation: three-quarters-loader 850ms infinite linear; -webkit-animation: three-quarters-loader 850ms infinite linear; animation: three-quarters-loader 850ms infinite linear; box-sizing: border-box; display: inline-block; position: relative; overflow: hidden; text-indent: -9999px; width: 32px; height: 32px; vertical-align: middle } .xinlist .p_loading { width: 100%; height: 70px; line-height: 70px; text-align: center; } .xinlist .p_loading .iconfont:before { content: ""; shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } .xinlist .p_loading .font { display: inline-block; margin-left: 20px; height: inherit } .xinlist .p_moreBox { margin: 0 20px; width: auto; height: auto; padding: 0; overflow: hidden } .xinlist .p_ToDetail { display: inline-block; margin: 0; padding: 5px 10px; min-width: 86px; text-align: center; white-space: nowrap; vertical-align: middle; } a>.xinlist .p_ToDetail:hover { cursor: pointer } .xinlist .p_SummaryBox { margin: 0; width: 236px; height: 317px; padding: 0; overflow: hidden } .xinlist .p_summary { text-align: left; vertical-align: top; word-break: break-all } .xinlist .p_time { display: inline-block; margin: 0; padding: 0 5px 0 0; vertical-align: middle; text-align: left; white-space: nowrap; overflow: visible; line-height: 18px; vertical-align: top } .xinlist .p_assist { margin: 0; width: 236px; height: 317px; padding: 0; overflow: hidden } .xinlist .p_TitleBox { width: auto; height: auto; padding:5px 0; overflow: hidden; vertical-align: top; } .xinlist .p_title { display: inline-table; width: 100%; margin: 0; padding: 0; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } .xinlist .p_header { margin: 5px 0 0; width: auto; height: auto; padding: 0; overflow: hidden; } .xinlist .p_content { margin: 0; width: 236px; height: 317px; padding: 0; overflow: hidden } .xinlist .p_images { margin: 0; width: 168px; height: 138px; padding: 0; overflow: hidden; float: left; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; vertical-align: middle; text-align: center; margin-right: 15px } .xinlist .p_articles { margin: 0; width:calc((100% - 0px)/5); height: 186px; padding: 0; } .xinlist .p_news { margin: 0; width: inherit; height: auto; padding: 0; overflow: hidden; } .xinlist .p_Newslist { margin: 0; padding: 0; overflow: hidden; } .xinlist { overflow: hidden; } .xinlist .p_content { width: auto; height: auto; vertical-align: top } .xinlist .p_SummaryBox { width: auto; height: auto; } .xinlist .p_assist { width: auto; height: auto; } .xinlist .p_icon { display: inline-block; vertical-align: middle; margin-top: 2px } .xinlist .p_about { display: inline-block; vertical-align: middle } .xinlist .p_articles { display: inline-block; height: auto; min-width: 320px; width: calc((100% - 0px)/1); padding: 15px 20px; overflow: hidden; float: left; } .xinlist .p_thumbnail { width: 100%; height: auto; vertical-align: middle; text-align: center; overflow: hidden } .xinlist .p_thumbnail img { width:100%; } .xinlist .higher .p_thumbnail { position: absolute; height: 100% } .xinlist .widther .p_thumbnail { position: absolute; height: 100% } .xinlist .smaller .p_thumbnail { position: absolute; height: 100% } .xinlist .p_assist { margin-top: 2px; } .xinlist .p_SummaryBox { clear: both; margin-bottom: 10px; margin-top: 8px } .xinlist .p_ToDetail { float: right; position: relative } .xinlist .p_summary { white-space: normal } .xinlist .p_categorySummaryBox { overflow: hidden; padding: 10px; } @media only screen and (max-width: 768px) { .xinlist .p_articles { margin-top: 10px !important; width: 100% !important; } .xinlist .mp_linkUrl { display: block; height: auto; } .xinlist .p_SummaryBox { display: none; } .xinlist .p_ToDetail { display: none !important; } .xinlist .mP_SummaryBox { clear: both; } .xinlist .p_Information { display: flex; padding: 10px 0; } .xinlist .p_Information li { flex: 1; height: 20px; overflow: hidden; } .xinlist .p_KeyWord { width: 100%; margin-top: 5px; } .xinlist .p_KeyWord .p_tag { padding: 5px 15px; margin-right: 10px; border-radius: 3px; } .xinlist .blank { width: 100%; height: 15px; overflow: hidden; } .xinlist .p_articles { border: none } } @media only screen and (min-width: 769px) { .xinlist .mp_linkUrl { display: none; } .xinlist .mP_SummaryBox { display: none; } .xinlist .p_Information { display: none; } .xinlist .p_KeyWord { display: none; } .xinlist .blank { display: none; } } @media only screen and (max-width: 1024px) and (min-width: 769px) { } .xinlist .p_CommonSummaryBoxA { text-align:center; } .xinlist .p_MatteIcon .iconfont:before { content:'\e602'; } .xinlist >div { animation-fill-mode:both; } .xinlist .listBoxs { overflow:hidden; } .xinlist .listBoxs .list { width:calc((100%)/2); float:left; transition:all .5s ease; } .xinlist .listBoxs .list:not(:first-child) .titleBox:hover .titleh5 { color: #098fe2; } .xinlist .listBoxs .list:not(:first-child) .listCotentBox { position:relative; text-align:left } .xinlist .listBoxs .list:not(:first-child) .listCotentBox:before { position:absolute; left:-10px; top:15%; content:''; background:#ddd; width:1px; height:70%; z-index:1; } .xinlist .listBoxs .list:not(:first-child) .listCotentBox:after { position:absolute; left:-10px; top:15%; content:''; background:#098fe2; width:1px; height:0%; z-index:2; transition:all .36s ease; } .xinlist .listBoxs .list:not(:first-child) .listCotentBox:hover:after { height:70%; } .xinlist .listBoxs .list:not(:first-child) .list_link { display:none; } .xinlist .listBoxs .listBoxs { padding:10px; } .xinlist .listBoxs .p_news { overflow:hidden; } .xinlist .listBoxs .list:first-child { display:flex; flex-wrap:wrap; float:left; position:relative; } .xinlist .listBoxs .list:first-child .list_images { width:100%; position:relative; overflow:hidden; } .xinlist .listBoxs .list:first-child .list_images img { width:100%; transition:600ms; -webkit-transition:600ms; -ms-transition:600ms; height:auto !important; left:50% !important; top:50% !important; -webkit-transform:translate(-50%, -50%) !important; -ms-transform:translate(-50%, -50%) !important; transform:translate(-50%, -50%) !important; position:absolute !important; display:none; } .xinlist .listBoxs .list:first-child .cover { background-repeat:no-repeat; background-position:center center; background-size:cover; position:relative; height:39.3rem; } .xinlist .listBoxs .list:first-child .pic { position:relative; width:100%; height:auto; vertical-align:middle; text-align:center; overflow:hidden; } .xinlist .listBoxs .list:first-child .list_images .pic { transition:600ms; -webkit-transition:600ms; } .xinlist .listBoxs .list:hover .pic { transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } .xinlist .listBoxs .list:first-child .list_thumb { width:100%; height:100%; } .xinlist .listBoxs .list:first-child .listTimeBox { display:none; margin-top:-8px; } .xinlist .listBoxs .list:first-child .gyBox { display:none; } .xinlist .listBoxs .list:first-child .listCotentBox { padding:0px; width:100%; } .xinlist .listBoxs .list:first-child .cotentBox { background-color:rgba(0, 0, 0, .5); position:absolute; bottom:0px; padding:20px 0px 20px 0px; right:0px; left:0px; } .xinlist .listBoxs .list:first-child .cotentBox .titleh5 { color:#fff; text-align:center; } .xinlist .listBoxs .cotentBox { display:flex; width:100%; } .xinlist .listBoxs .listTimeBox { width:140px; height:100%; } .xinlist .listBoxs .list:not(:first-child) .listTimeBox { margin-top:3%; } .xinlist .listBoxs .list:not(:first-child) .titleBox { margin-top:1.4rem; } .xinlist .listBoxs .listTime { display:none; } .xinlist .listBoxs .list:nth-child(2) { margin-top:0px; } .xinlist .listBoxs .listYear { font-size:30px; color:#333333; text-align:center; font-family:'Oswald', sans-serif; } .xinlist .listBoxs .listmd { text-align:center; font-size:16px; color:#333333; margin-top:8px; font-family:'Oswald', sans-serif; } .xinlist .listBoxs .listCotentBox { width:calc((100% - 170px)/1); padding:0 1rem; flex: 1; } .xinlist .listBoxs .titleh5 { font-size:16px; overflow:hidden; font-weight:bold; color:#333; text-overflow:ellipsis; white-space:nowrap; } .xinlist .listBoxs .lsitSummary { font-size:14px; height:46px; line-height:26px; color:#999; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2px; -webkit-box-orient:vertical; text-overflow:ellipsis; margin-bottom:20px; } .xinlist .listBoxs .gyBox { margin-top:.7rem; } .xinlist .listBoxs .list:hover { background:none; } .xinlist .list:not(:first-child) .cotentBox { background:#f5f5f5; width:97%; margin-left:3%; margin-bottom:8px; } @media only screen and (max-width: 1024px) { .xinlist .list:not(:first-child) .cotentBox { width:100%; margin-left:0%; margin-bottom: 10px; margin-top:10px; } .xinlist .listBoxs .list { width: calc((100%)/1); } .xinlist .listBoxs .list:first-child .list_images img { display:block; } .xinlist .listBoxs .list:first-child .cover { display:none; } .xinlist .listBoxs .list:first-child .pic { padding-bottom: 60%; } .xinlist .listBoxs .lsitSummary { margin-bottom: 1rem; } } @media only screen and (max-width: 768px) { .xinlist .listBoxs .list:not(:first-child) .listTimeBox { margin-top: 4%; } .xinlist .listBoxs .listYear { font-size: 18px; } .xinlist .listBoxs .listmd { font-size: 12px; } .xinlist .listBoxs .listTimeBox { width: 60px; } .xinlist .listBoxs .listCotentBox { width: calc((100% - 100px)/1); } .xinlist .listBoxs .titleh5 { font-size: 15px; height: 20px; } .xinlist .listBoxs .gyBox { margin-top: 0.5rem; } .xinlist .listBoxs .lsitSummary { font-size: 13px; height: 40px; line-height: 20px; margin-bottom: 16px; } .xinlist .listBoxs .list:first-child .pic { padding-bottom: 50%; } .xinlist .listBoxs .list:not(:first-child) .listCotentBox:before { left: 0px; } .xinlist .listBoxs .list:not(:first-child) .listCotentBox:after { left: 0px; } } .xinlist .p_page .pre .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } .xinlist .p_page .next .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } .xinlist .p_more .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_articles { width:calc((100% - 0px)/5); } #xinlist .p_CommonSummaryBoxA { text-align:center; } #xinlist .p_MatteIcon .iconfont:before { content:'\e602'; } #xinlist >div { animation-fill-mode:both; } #xinlist .p_hot .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_new .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_page .pre .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_page .next .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_more .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist .p_loading .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0; } #xinlist { width:100%; max-width:none; min-width:320px; height:auto; max-height:none; min-height:0px; margin-top:2%; margin-left:0px; margin-right:0px; margin-bottom:2%; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; } .searchProBox { margin: 49px auto 0; background-color: #eef2f5; padding: 30px; display: flex; justify-content: space-between; align-items: center; } .searchProBox .txt { text-align: left; flex: 1; margin-right: 3em;} .searchProBox .txt .tit { display: inline-block; font-weight: bold;} .searchProBox .txt .tel { display: inline-block; font-weight: bold; color: #098fe2;} .searchBox { position: relative; z-index: 0; background: #fff url(../images/search.png) 0.5em center no-repeat; background-size:1em auto; overflow: hidden; width: 390px; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;} .searchBox .iw { padding: 0 6em 0 1.8em;} .searchBox .input { line-height: 2.7em; height: 2.7em; width: 100%; outline-width: 0; border: 0;} .searchBox .btn { position: absolute; z-index: 2; top: 0; right: 0; height: 2.7em; color: #fff; width: 5.5em; background-color: #098fe2; line-height: 2.7; cursor: pointer; border:none} @media only screen and (max-width:828px) { .searchProBox { display: block;} .searchProBox .txt { margin-right: 0;} .searchBox { margin-top: 1em; width: auto;} } /*产品*/ .proiBox {padding: 50px 0 100px; } .proiBox .cons,.proiBox .con { display: flex; justify-content: space-between; align-items: flex-start;} .proiBox .side { width: 19.6%;} .proiBox .side .pNav {} .proiBox .side .pNav .title { padding:8% 7.6% 4%; background-color: #098fe2; color: #fff; font-weight: bold; text-align: left;} .proiBox .side .pNav .title .btnSwitch { display: none;} .proiBox .proMain { width: 78%;} .proiBox .list ul { margin-top: -3.25%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;} .proiBox .list li { margin: 3.25% 1.25% 0 0; width: 24%; color: #333;} .proiBox .list li a {color: #333;} .proiBox .list li:nth-child(4n){ margin-right: 0;} .proiBox .list .lib { border: 1px solid #dfdfdf;} .proiBox .list .pic { position: relative; z-index: 0; width: 100%; padding-top: 75%; display: block; cursor: pointer; overflow: hidden;} .proiBox .list .pic img {position: absolute; left: 2%; top: 0%; width: 96%; height:100%; object-fit:contain; transition: all 0.5s; } .proiBox .list li:hover .pic img { -ms-transform: scale(1.03, 1.03); -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .proiBox .list .pic .icon { opacity: 0; position: absolute; top: 50%; left: 50%; width: 13.6%; padding-top: 13.6%; margin-left: -6.8%; margin-top: -6.8%; background: rgba(255,255,255,0.85) url(../images/link.png) no-repeat center center / 38% auto; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; transition: all 0.5s;} .proiBox .list li:hover .pic .icon { opacity: 1;} .proiBox .list li:hover a { color: #098fe2;} .proiBox .list .txts {filter:alpha(opacity=0);-moz-opacity:.0; opacity:0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background: rgba(0, 0, 0, .4); transition: all 0.5s ease;} .proiBox .list li:hover .txts {filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;} .proiBox .list .txts .name { color: #fff; width: 60%; margin: 0.4em 0; text-align:center} .proiBox .list .txts .line { background-color: #fff; height: 1px; width: 5em;transition: all 0.5s ease;} .proiBox .list li:hover .txts .line { width: 1.2em;} .proiBox .list .txt { padding: 1em 1em 0; text-align:left;} .proiBox .list .txt .name { color: #333;line-height: 2.5em; height: 2.5em; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap; text-align:center} .proiBox .list .txt .name a { color: #333} .proiBox .list .txt .name a:hover { color: #098fe2} .proiBox .list .txt .intro { margin-top: 0.6em; margin-bottom: 0.9em;color: #777; line-height: 1.5em; height: 1.5em; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap;} .proiBox .list .txt .btn { border-top: 1px solid #e5e5e5; color: #777; padding: 0.7em 0 1.2em; display: block; cursor: pointer; background: url(../images/arr4.png) right 1.1em no-repeat; background-size:1.7em auto ;} .proiBox .list .txt .btn:hover { color: #777;} @media only screen and (max-width:828px) { .proiBox .list ul { display: block;} .proiBox .list .txt .btn { background-position: right 1.5em; background-size:1.1em auto ;} .proiBox .cons,.proiBox .con { display: block; justify-content: space-between; align-items: flex-start;} } @media only screen and (max-width:828px) { .proiBox { padding: 5% 0 10%;} .proiBox .con { display: block;} .proiBox .side { width: 100%;} .proiBox .side .pNav .title { position: relative; z-index: 0; padding:0.6em 1em;} .proiBox .side .pNav .fy-mk { display: none;} .proiBox .proMain { width: 100%; margin-top: 1em;} .proiBox .list ul { display: flex; padding: 0;} .proiBox .list li { width:48%; margin: 5% 0 0; margin-left:1%; margin-right:1%;} .proiBox .side .pNav .title .btnSwitch { position: absolute; width: 1.6em; height: 1.6em; display: flex; right: 0.7em; top: 50%; margin-top: -0.8em; border: 1px solid #fff; -moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em; justify-content: center; align-items: center; flex-direction: column; } .proiBox .side .pNav .title .btnSwitch span { height: 2px; background-color: #fff; display: block; width:65%; margin: 0 auto;} .proiBox .side .pNav .title .btnSwitch span:nth-child(2n) { margin: 4px auto;} } @media only screen and (min-width:828px) { .proiBox .side .pNav ul { display: block !important;} } .pageTurn { margin-top: 70px; border-bottom: 1px solid #d9d9d9;} .pageTurn ul {display: flex; justify-content: space-between; align-items: center;} .pageTurn li { margin: 1.2em 0; text-align: left; width: 45%; height: 1.5em; line-height: 1.5em; overflow: hidden; color: #707070;} .pageTurn li:nth-child(2) { text-align: right;} .pageTurn li a {color: #707070;} .pageTurn li a:hover { color: #098fe2;} @media only screen and (max-width:828px) { .pageTurn ul { display: block;} .pageTurn li { width: 100%;} .pageTurn li:nth-child(2) { text-align: left;} .indexOne{ padding-top:55px;} } .product-list .productLi:hover .proName2 { background:#098fe2; color:#fff; } .product-list #products .swiper-button-prev:hover, .product-list #products .swiper-button-next:hover { background:#098fe2; color:#fff; border:none; } @media only screen and (max-width:768px) { .ss_title h4 { width: 90% !important; } #c_portalResProduct_list-15677614811070710 .name { font-size: 1rem !important; } .lantern { margin-left: 0px !important; margin-right: 0px !important; } .product-list { overflow: hidden; width: 100%; height:auto; margin-left: 0; margin-right: 0; } .product-list .p_ProductList { margin:0; width: auto; height:auto; padding:0; overflow: hidden; background-color:transparent; white-space:normal; font-size: 0; } .product-list .p_categorySummaryBox { padding:15px; border-bottom:1px solid rgba(0, 0, 0, 0.09); } .product-list .p_categorySummary { color: rgba(0, 0, 0, 0.45); font-size: 14px; line-height: 22px; text-align: left; vertical-align: top; word-break: break-all; } .product-list .p_sort { margin:0; width: auto; height:auto; padding:0 15px; overflow: hidden; font-size: 16px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 10px solid #F5F5F5; } .product-list .d_sortBtn { -webkit-flex:1.5; flex: 1.5; -webkit-box-flex: 1.5; -moz-box-flex: 1.5; -ms-flex: 1.5; display: block; position: relative; width:100%; line-height: 40px; text-align: center; } .product-list .d_sortBtn:hover, .product-list .d_sortBtn:active { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .d_sortBtn.active { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .p_default { -webkit-flex:1; flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; } .product-list .d_sortBtn:lang(active) { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .d_sortBtn .font .iconfont:first-child { display:none; } .product-list .d_sortBtn .font .iconfont { display:inline-block; font-size:12px; width:0; height:0; margin:5px 0 0 3px; font:0/0 arial; vertical-align: middle; border:5px dashed transparent; border-top:5px solid rgba(0, 0, 0, 0.45); text-align:center; } .product-list .d_sortBtn .font .iconfont:before { content:"\e69a"; line-height: 30px; } .product-list .d_sortBtn:lang(active) .font .iconfont, .product-list .d_sortBtn:hover .font .iconfont, .product-list .d_sortBtn:active .font .iconfont { color: #1890FF; border-top-color: #1890FF; } .product-list .d_sortBtn .font .down-arrow { margin-top:0; border-top: 0 none; border-bottom: 5px solid rgba(0, 0, 0, 0.45); } .product-list .d_sortBtn .font .arrow:before { content:"\e69c"; } .product-list .p_default .font .iconfont { display:none; } .product-list .p_products { width: auto; height: auto; margin: 0; padding: 0; overflow: hidden; white-space: normal; } .product-list .p_Product { position: relative; display: inline-block; vertical-align: top; width:calc((100% - 0px)/3); padding: 15px 15px 0; height: inherit; } .product-list .p_ProductInner { width:100%; padding:0 0 15px; border-top: 0 none; border-left: 0 none; border-right: 0 none; box-sizing: content-box; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .product-list .p_Product:last-of-type .p_ProductInner { border:0 none; } .product-list .p_images { position: relative; width: 100%; height: auto; margin: 0; padding: 0; text-align: center; font-size: 0; overflow:hidden; webkit-flex: 1; flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; } .product-list .p_image { width: 100%; height: 100%; overflow: hidden; } .product-list .p_imagesPc { display: none; } .product-list .p_linkB { width: inherit; height: inherit; display: block; position: static; } .product-list .p_image { width: 100%; height: 100%; padding:0; } .product-list .p_ThumbnailBox { display: none; } .product-list .d_articles { height: auto; width: auto; padding: 0 0 0 15px; margin:0; overflow: hidden; -webkit-flex: 2.4; flex: 2.4; -webkit-box-flex: 2.4; -moz-box-flex: 2.4; -ms-flex: 2.4; } .product-list .d_HeadBox { margin:0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; } .product-list .d_title { display:block; width:auto; height: auto; margin:0; padding:0; font-weight:400; cursor:pointer; line-height: 22px; vertical-align: middle; } .product-list .p_TagBox { position: absolute; top:0; right:0; margin:0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; display: none; } .product-list .p_tag { float: left; margin:0 5px 0 5px; padding:0; border-width:1px; border-style:none; border-color:transparent; overflow: hidden; } .product-list .p_tag:hover { border-width:1px; border-style:none; border-color:transparent; } .product-list .p_tag:active { border-width:1px; border-style:none; border-color:transparent; } .product-list .d_item { width:auto; height: auto; margin:5px 0; padding:0; vertical-align: middle; overflow: hidden; } .product-list .d_item .d_itemLable { display: inline-block; vertical-align: middle; margin:0 5px 0 0; font-size:14px; } .product-list .d_item .d_itemValue { display: inline-block; vertical-align: middle; font-size:14px; } .product-list .p_salePricePc, .product-list .p_NomBoxPc { display: none; } .product-list .d_SummaryBox { margin:5px 0; width: auto; height:auto; padding:0; overflow: hidden; } .product-list .d_summary { color:#999; font-size:12px; line-height:20px; text-align:left; vertical-align:top; word-break:break-all; } .product-list .d_SalePrice { display:inline-table; margin:0; padding:0; text-align:left; vertical-align: middle; } .product-list .p_priceUnit::before { content: "\e6d7"; } .product-list .p_interaction { margin: 0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; word-break: break-all; white-space: normal; font-size: 14px; } .product-list .p_interaction .btn-default { display: inline-block; margin: 5px 0 0; } .product-list .p_keyword { display: inline-block; padding-right:5px; white-space: nowrap; overflow: hidden; vertical-align: middle; } } @media only screen and (min-width:769px) { .product-list { overflow: hidden; width: 100%; height:auto; margin-left: 0; margin-right: 0; margin-bottom:50px; } .product-list .p_ProductList { width: auto; height: auto; overflow: hidden; white-space: normal; font-size: 0; padding: 20px 25px; } .product-list .p_categorySummaryBox { padding:0 0 20px; margin:0 0 30px; border-bottom:1px solid rgba(0, 0, 0, 0.09); } .product-list .p_categorySummary { color: rgba(0, 0, 0, 0.45); font-size: 14px; line-height: 22px; text-align: left; vertical-align: top; word-break: break-all; } .product-list .p_sort { margin:0 0 10px; width: auto; height:auto; padding:0 0 0 1px; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; clear:both; font-size: 14px; } .product-list .d_sortBtn { position:relative; float: left; height:30px; margin:0 0 0 -1px; line-height:30px; text-align:left; padding-left:15px; padding-right: 30px; background-color:rgba(255, 255, 255, 1); border-width:1px; border-style:solid; border-color:#D9D9D9; cursor:pointer; color:rgba(0, 0, 0, 0.65); } .product-list .d_sortBtn:hover, .product-list .d_sortBtn:active { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .d_sortBtn.active { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .p_default { padding-right: 15px; } .product-list .d_sortBtn:lang(active) { border-color: #1890FF; color: #1890FF; z-index: 2; } .product-list .d_sortBtn .font .iconfont:first-child { display:none; } .product-list .d_sortBtn .font .iconfont { display:inline-block; position:absolute; top:0; right:8px; font-size:12px; color:rgba(0, 0, 0, 0.65); text-align:center; transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); } .product-list .d_sortBtn .font .iconfont:before { content:"\e69a"; line-height: 30px; } .product-list .d_sortBtn:lang(active) .font .iconfont, .product-list .d_sortBtn:hover .font .iconfont, .product-list .d_sortBtn:active .font .iconfont { color: #1890FF; } .product-list .d_sortBtn .font .arrow { transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); } .product-list .d_sortBtn .font .down-arrow { transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .product-list .d_sortBtn .font .arrow:before { content:"\e69a"; } .product-list .p_default .iconfont.arrow { display: none; } .product-list .p_products { width: auto; height: auto; margin: 0; padding: 0; overflow: hidden; white-space: normal; } .product-list .p_Product { position: relative; display: inline-block; vertical-align: top; width: calc((100% - 0px)/3); padding: 10px; height: inherit; } .product-list .p_ProductInner { width: 100%; padding: 0 0 5px; box-sizing: content-box; } .product-list .p_ProductInner:hover { border-width: 3px; border-color: #1890FF; margin: -2px; } .product-list .p_images { position: relative; width: 100%; height: 188px; margin: 0; padding: 0; text-align: center; font-size: 0; overflow:hidden; } .product-list .p_imagesMo { display: none; } .product-list .p_linkB { width: inherit; height: inherit; display: block; position: static; } .product-list .p_image { width: 100%; height: 100%; padding:0; } .product-list .p_ThumbnailBox { position: absolute; left: 0; bottom: 1px; z-index: 10; width:236px; height: auto; padding:0; overflow: hidden; height: auto; } .product-list .p_ThumbnailBox .p_thumbnail { position: relative; width: 42px; height: 34px; float: left; margin: 0 2px; max-width: 42px; max-height: 34px; overflow:hidden; border:2px solid rgba(0, 0, 0, .45) } .product-list .p_ThumbnailBox .p_thumbnail:hover { border-color: rgba(255, 255, 255, .7) } .product-list .d_articles { height: auto; width: auto; padding: 0 0 0 15px; margin:0; overflow: hidden; -webkit-flex: 2.4; flex: 2.4; -webkit-box-flex: 2.4; -moz-box-flex: 2.4; -ms-flex: 2.4; } .product-list .d_HeadBox { margin:5px 0 0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; } .product-list .d_title { display:block; width:auto; height: auto; margin:0; padding:0; font-weight:400; cursor:pointer; line-height: 22px; vertical-align: middle; } .product-list .p_TagBox { position: absolute; top:0; right:0; margin:0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; } .product-list .p_tag { float: left; margin:0 5px 0 5px; padding:0; border-width:1px; border-style:none; border-color:transparent; overflow: hidden; } .product-list .p_tag:hover { border-width:1px; border-style:none; border-color:transparent; } .product-list .p_tag:active { border-width:1px; border-style:none; border-color:transparent; } .product-list .d_item { width:auto; height: auto; margin:5px 0; padding:0; vertical-align: middle; overflow: hidden; } .product-list .d_item .d_itemLable { display: inline-block; vertical-align: middle; margin:0 5px 0 0; font-size:14px; } .product-list .d_item .d_itemValue { display: inline-block; vertical-align: middle; font-size:14px; } .product-list .p_salePriceMo, .product-list .p_NomBoxMo { display: none; } .product-list .d_SummaryBox { margin:5px 0; width: auto; height:auto; padding:0; overflow: hidden; } .product-list .d_summary { line-height:20px; text-align:left; vertical-align:top; word-break:break-all; } .product-list .d_SalePrice { display:inline-table; margin:0; padding:0; text-align:left; vertical-align: middle; } .product-list .p_priceUnit::before { content: "\e6d7"; } .product-list .p_interaction { margin: 0; width: auto; height:auto; padding:0; border-width:1px; border-style: none; border-color:rgba(228, 228, 228, 0); background-color:transparent; overflow: hidden; word-break: break-all; white-space: normal; font-size: 14px; } .product-list .p_interaction .btn-default { display: inline-block; margin:5px 0 0; } .product-list .p_keyword { display: inline-block; padding-right:5px; white-space: nowrap; overflow: hidden; vertical-align: middle; } } @media only screen and (min-width:769px) and (max-width: 1024px) { } .product-list .p_CommonSummaryBoxA { text-align:center; } .product-list .p_MatteIcon .iconfont:before { content:'\e602'; } .product-list >div { animation-fill-mode:both; } .product-list .relative { position:relative; } .product-list .absolute { position:absolute; } .product-list #products { width:100%; height:auto; overflow:hidden; margin-top:3rem; } .product-list .proName { width:100%; height:auto; text-align:center; margin:1rem 0 2rem; } .product-list .list { position:relative; width:100%; height:auto; } .product-list .swiper-container-pro { width: calc(100% - 150px); margin:0 auto; } .product-list .swiper-wrapperUl { width:100%; } .product-list .productLi { overflow:hidden; border-radius: 10px 10px 0px 0px; } .product-list .block { display:block; } .product-list .aTop { display: block; border: 1px #e5e5e5 solid; border-bottom: 0; padding-bottom: 75%; overflow:hidden; border-radius: 10px 10px 0px 0px; } .product-list .text-center {border: 1px #e5e5e5 solid; border-top: 0; text-align:center} .product-list .picture { width:100%; height:100%; top:0px; left:0px; background: #ffffff; } .product-list .proPic { width:100%; height:100%; } .product-list .number { margin-top:15%; font-size:2.5rem; padding-left:20%; color:#fff; } .product-list .number::before { content:''; position:absolute; left:5%; top:0px; bottom:0px; margin:auto; display:block; width:10%; height:2px; background:#fff; } .product-list .blue { background:rgba(225, 109, 5, 0.8); top:100%; left:0px; width:100%; height:100%; transition:all .5s ease; } .product-list .desc1 { padding:0 5%; color:#fff; height:12rem; line-height:1.5rem; overflow:hidden; padding-top:30px; } .product-list .proName2 { display:block; color: #4e4e4e; font-size: 15px; padding: 20px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: all 0.6s; background-color: #f5f5f5; } .product-list .desc2 { color:#ffffffb8; font-size:15px; margin:6px 0 27px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:1; letter-spacing:1px; transition:all .5s ease; } .product-list #products .swiper-button-prev { position:absolute; top: 45%; left:0px; font-size:15px; cursor:pointer; background: #ffffff; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align:center; color: #dedede; border: 2px #dedede solid; } .product-list #products .swiper-button-next { position:absolute; top: 45%; right:0px; font-size:15px; cursor:pointer; background:#ffffff5c; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align:center; color: #dedede; border: 2px #dedede solid; } .product-list .proPrice { color:red; display:none; } @media only screen and (min-width: 769px) { .product-list .productLi:hover .blue { top:0px; } .product-list .productLi:hover .desc2 { opacity:0; } } .product-list .p_page .pre .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .product-list .p_page .next .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .product-list .p_more .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .product-list .p_loading .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px; } .product-list .productLi .proPic { transition:all 0.6s; } .product-list .productLi:hover img { transform:scale(1.1, 1.1); } .fy-mk40020016 .pc-list { width:auto; background: #ffffff; border: 1px solid #dfdfdf; padding:10px; border-top:none; } .fy-mk40020016 .pc-list li.sort-item { margin-bottom: 10px; } .fy-mk40020016 .pc-list li .pc-name { position: relative; height: 50px; line-height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fy-mk40020016 .pc-list li .pc-name a { font-weight: lighter; background: #f0f0f0 url(../image/jt.png) no-repeat 14px 19px; line-height: 50px; font-size: 16px; color: #1d1819; padding-left: 30px; padding-right: 35px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .fy-mk40020016 .pc-list li .pc-name:hover a, .fy-mk40020016 .pc-list li.sort-item-on .pc-name a, .fy-mk40020016 .pc-list li .pc-name a.on { color: #fff; background: #098fe2 url(../image/jt_h.png) no-repeat 14px 19px; transition: all 0.2s ease-in-out 0s; } .fy-mk40020016 .pc-list .sort-item .turn { position: absolute; cursor: pointer; display: block; float: right; width: 35px; height: 50px; top: 0px; right: 0px; } .fy-mk40020016 .pc-list .sort-item .turn { background: url("../image/jiah.png") no-repeat center center; background-size: 10px; } .fy-mk40020016 .pc-list li.sort-item:hover .pc-name .turn { background: url("../image/jiah_h.png") no-repeat center center; background-size: 10px; } .fy-mk40020016 .pc-list li.sort-item-on:hover .pc-name .turn, .fy-mk40020016 .pc-list .sort-item-on .turn { background: url("../image/jianh.png") no-repeat center center; background-size: 10px; } .fy-mk40020016 .pc-list .sort-item .bd { display: none; overflow: hidden; } .fy-mk40020016 .pc-list .sort-item .bd ul { } .fy-mk40020016 .pc-list .sort-item .bd li { width: 100%; float: left; height: 45px; line-height: 45px; margin-top:5px; background-color: #f0f0f0; } .fy-mk40020016 .pc-list .sort-item .bd li.on a { color: #0d58a9; } .fy-mk40020016 .pc-list .sort-item .bd li a { padding-left: 30px; font-size: 16px; display: block; color: #666666; line-height: 45px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fy-mk40020016 .pc-list .sort-item .bd li a span { float: right; } .fy-mk40020016 .pc-list .sort-item .bd li a:hover { padding-left: 35px; color: #098fe2; transition: all 0.2s ease-in-out 0s; } .fy-mk40020016 .pc-list .sort-item-on .bd { display: block; }