/*通用 begin*/ * { padding: 0; margin: 0; } li { list-style: none; } a { color: #000; font-size: 14px; text-decoration: none; } img { max-width: 100%; } .clearfix:after { display: block; content: ""; clear: both; } /*通用 end*/ html { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } body { background: #f2f2f2; font-family: "Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif"; height: auto; /*to delete*/ position: relative; padding-bottom: 315px; } /*header begin*/ header { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 136px; } /*by sophie*/ .ap_list_product { margin: 45px 0px 65px 0px; } .ap_list_product div h2 { margin-top: 15px; color: #008b4a; } .ap_list_article { margin: 45px 0px 65px 0px; } .ap_list_article div h2 { margin-top: 15px; color: #008b4a; } .ap_list_article ul li { margin-top: 15px; } .ap_list_article a { color: #333; text-decoration: underline; } @media (max-width: 830px) { /*search part*/ header { height: auto; } } header .top-logo-row-wrapper { width: inherit; height: 85px; background: #fff; } header .top-logo-row-wrapper .top-logo-row { position: relative; height: inherit; margin: 0 auto; /*background: yellow;*/ /*padding: 0 24px;*/ /*max-width: 1352px;*/ max-width: 1400px; } header .top-logo-row .top-hide-tabs { display: none; float: left; background: #fff; border: 0 none; outline: 0; margin: 28px 10px 0 0; cursor: pointer; } @media (max-width: 650px) { header .top-logo-row .top-hide-tabs { display: block; } } header .top-logo-row .logo-wrapper { width: 155px; float: left; height: 36px; margin: 24px 0 24px 20px; /*为了导航页有下划线效果添加的左侧20px以便与首页这个字对齐*/ /*background: green;*/ } header .top-search-wrapper { float: right; display: inline-block; /*background: #f7f7f7 url("img/search.png") no-repeat; background-position: 20px 6px; background-size: 28px 28px;*/ padding: 5px 8px 5px 24px; margin: 20px 0 0 24px; border-radius: 5px; display: flex; align-items: center; background: #f7f7f7; } /*@media (max-width: 830px){ header .top-search-wrapper { display: block; background: pink; } }*/ header .top-search-wrapper input { border: 0 none; outline: 0; /*width: 120px;*/ height: 15px; font-size: 14px; font-size: 1.4rem; color: #bab1ba; vertical-align: middle; background: #f7f7f7; transition: width 400ms ease; } header .top-search-wrapper img { width: 28px; height: 28px; } /*header .top-search-wrapper input:focus{ width: 550px; } @media (max-width: 830px) { header .top-search-wrapper input:focus{ width: 220px; } }*/ header .top-search-wrapper input::-webkit-input-placeholder { /* WebKit browsers */ color: #bab1ba; } header .top-search-wrapper input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #bab1ba; } header .top-search-wrapper input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #bab1ba; } header .top-search-wrapper input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #bab1ba; } header .header-upper-tabs { width: inherit; height: 49px; /*为了让标题栏border显示,增加盒子高度*/ background: #f1f3f4; box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); } header .header-upper-tabs .doc-set-nav { position: relative; height: inherit; margin: 0 auto; /*background: orange;*/ /*padding: 0 0 0 20px;*/ /*max-width: 1380px;*/ width: inherit; max-width: 1400px; } @media (max-width: 650px) { /*50*/ header .header-upper-tabs .doc-set-nav { text-align: center; } } header .doc-set-nav-tab-list { display: block; float: left; height: inherit; /*background: pink;*/ /*min-width: 1028px; 可以设置最小宽度,在响应式布局里面@media后改代码巴拉巴拉*/ font-size: 14px; font-size: 1.4rem; } @media (max-width: 650px) { /*50*/ header .doc-set-nav-tab-list { display: none; } } header .doc-set-nav-tab-list .doc-set-nav-tab-container { float: left; padding: 0 20px; height: 48px; line-height: 48px; } header .doc-set-nav-tab-list .doc-set-nav-tab-border { border-bottom: 2px solid #008b4a; /*为了让他显示,标题栏高度得减小border的厚度*/ } /*header .doc-set-nav-tab-list .doc-set-nav-tab-home { padding: 0 20px; }*/ header .doc-set-nav-tab-container .doc-set-nav-tab { color: rgba(0,0,0,.54); } header .doc-set-nav-tab-container .doc-set-nav-tab:hover { /*color: #000;*/ color: #008b4a; } header .free-trail-button { float: right; display: inline-block; padding: 10px 20px; border-radius: 5px; cursor: pointer; background: #008b4a; color: #fff; margin: 7px 0 7px 0; } header .free-trail-button:hover { box-shadow: 0 0 4px #041, 0 4px 8px #041; margin: 2px 0 4px; } @media (max-width: 650px) { /*必须放在hover后面才行愉快的动*/ header .free-trail-button { /*此处注意层级关系*/ float: none; padding: 10px 50px; } } /*header end*/ /*header-hidden-mask start*/ .header-hidden-mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #212121; cursor: pointer; opacity: .5; z-index: 10011; } /*header-hidden-mask end*/ /*header-hidden-nav-wrapper start*/ .header-hidden-nav-wrapper { position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); height: 100%; width: 256px; outline: 0; overflow-x: hidden; overflow-y: auto; z-index: 10012; } .header-hidden-nav-wrapper .header-hidden-nav-li { width: calc(100% - 48px); line-height: 53px; font-size: 16px; font-size: 1.6rem; padding: 0 24px; border-bottom: 1px solid #cfd8dc; font-weight: 600; font-family: "宋体"; } .header-hidden-nav-wrapper .header-hidden-nav-li:hover a { color: #008b4a; } .header-hidden-nav-wrapper .header-hidden-nav-li a { color: #bab1ba; } /*header-hidden-nav-wrapper end*/ /*轮播 start*/ .Carousel_wapper { margin-top: 135px; width: 100%; height: 400px; } .xq_slide_out a.f_prev, .xq_slide_out a.f_next { width: 36px; height: 60px; overflow: hidden; cursor: pointer; line-height: 999px; position: absolute; top: 50%; margin-top: -30px; background: url(prev_next.png) no-repeat; } .xq_slide_out a.f_prev { left: -40px; background-position: 0px 0px; -webkit-transition: left .3s ease-in-out; -moz-transition: left .3s ease-in-out; -o-transition: left .3s ease-in-out; transition: left .3s ease-in-out; } .xq_slide_out a.f_next { right: -40px; background-position: -41px 0px; -webkit-transition: right .3s ease-in-out; -moz-transition: right .3s ease-in-out; -o-transition: right .3s ease-in-out; transition: right .3s ease-in-out; } .Carousel_pic { width: 100%; height: 400px; position: relative; overflow: hidden; margin-top: 135px; } .Carousel_pic ul { width: 100%; height: 100%; overflow: hidden; } .Carousel_pic li { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; list-style: none; } /* .Carousel_pic li img { width: 100%; height: 400px; } */ .Carousel_pic p { position: absolute; bottom: 6px; width: 100%; text-align: center; } .Carousel_pic p a { display: inline-block; width: 14px; height: 14px; text-align: center; margin-right: 5px; border-radius: 50%; ; background: #ddd; } .Carousel_pic p a.on { font-size: 22px; text-decoration: none; background: rgba(0,0,0,.28); } .Carousel_pic span { margin-top: -20px; color: red; position: absolute; text-align: center; width: 100%; background: #ccc; } .Carousel_pic li .list1_content { width: 100%; text-align: center; color: #fff; } .Carousel_pic li .list1_content h2 { position: relative; margin: 55px 0 30px; font-size: 37px; font-size: 3.7rem; letter-spacing: 5px; } @media (max-width: 520px) { .Carousel_pic li .list1_content h2 { font-size: 20px; font-size: 2rem; } } .Carousel_pic li .list1_content .recomend { /*等具体文字出来后还要继续修改*/ position: relative; margin: 0 auto 30px; font-size: 20px; font-size: 2rem; letter-spacing: .06rem; line-height: 40px; height: auto; max-height: 180px; overflow: hidden; } @media (max-width: 520px) { .Carousel_pic li .list1_content .recomend { /*width: 40%;*/ font-size: 15px; font-size: 1.5rem; } } .Carousel_pic li .list1_content .getMore .getMoreBtn { display: inline-block; padding: 8px 15px 8px 15px; text-decoration: none; font-size: 14px; font-size: 1.4rem; color: #fff; border: 1px solid #fff; } /*轮播 end*/ /*section notice-wrapper begin*/ .notice-wrapper { /*要做出来与cloud.google相同*/ width: 100%; height: 77px; background: #f2f2f2; } .notice-wrapper .noticeBox { display: flex; max-width: 1400px; height: inherit; max-height: 77px; margin: 0 auto; flex-direction: row; align-items: center; } .notice-wrapper .noticeBox .notice-tit { max-height: 77px; padding: 4px 6px; background: #008b4a; color: #fff; text-align: center; font-size: 14px; font: 1.4rem; border-radius: 2px; margin-right: 20px; min-width: 64px; } .notice-wrapper .notice-list { display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 1304px; width: 100%; /*加了这个才能正常占满剩余空间*/ overflow: hidden; /*为了不影响后续才弄得*/ text-overflow: ellipsis; white-space: nowrap; /*background: yellow;*/ } .notice-wrapper .notice-list .notice-item { margin-right: 25px; overflow: hidden; /*这三行似乎形成了相对好的效果*/ text-overflow: ellipsis; white-space: nowrap; } .notice-wrapper .notice-item .notice-item-a { display: inline-block; font-size: 14px; font: 1.4rem; max-width: 240px; color: #1A1A1A; /*background: orange;*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: inherit; font-size: 14px; font-size: 1.4rem; } .notice-wrapper .notice-item-a span { color: #9A9A9A; } .notice-wrapper .notice-item .new { display: inline-block; -ms-transform: scale(.8, .8); -webkit-transform: scale(.8, .8); transform: scale(.8, .8); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; color: #fff; font-size: 10px; font-size: 1rem; background-color: #e04646; border-radius: 2px; line-height: 1; padding: 1px 3px 3px; position: relative; top: -8px; } .notice-wrapper .notice-list .notice-item-more { margin-left: auto; overflow: hidden; /*这三行似乎形成了相对好的效果*/ text-overflow: ellipsis; white-space: nowrap; } .notice-wrapper .notice-item-more .notice-item-amore { font-size: 14px; font: 1.4rem; color: #bab1ba; } /*section notice-wrapper end*/ /*section character start*/ /*#character-wrapper { position: relative; width: 100%; height: 200px; } #character-wrapper .character-list-wrapper { height: inherit; margin: 0 auto; max-width: 1400px; } #character-wrapper ul { width: inherit; height: inherit; /*background: orange;*/ /*} #character-wrapper ul li { position: relative; float: left; list-style: none; border: 1px solid #bbb; font-size: 10px; font-size: 1rem; width: 185px; height: 198px;/*2px 的边框*/ /*padding: 0 20px; margin-right: 125px; } #character-wrapper ul .charaLast { margin-right: 0; } #character-wrapper ul li img { position: absolute; top: 50%; margin-top: -25px; left: 10%; width: 55px; height: 55px; } #character-wrapper ul li h3 { position: absolute; left: 40%; top: 20%; font-size: 14px; font-size: 1.4rem; } #character-wrapper ul li p { position: absolute; left: 40%; top: 40%; font-size: 13px; font-size: 1.3rem; } /*section character end*/ /*section advantage start*/ .advantage-wrapper { width: 100%; background: #fff; height: 420px; margin-top: 30px; } @media (max-width: 920px) { .advantage-wrapper { height: auto; } } .advantage-wrapper .advantageBox { max-width: 1400px; height: inherit; background: #fff; margin: 0 auto; } .advantage-wrapper .adv-tit { margin: 0 auto; /*background: orange;*/ text-align: center; font-size: 35px; font-size: 3.5rem; color: #36474F; font-weight: normal; padding: 60px 0; } .advantage-wrapper .adv-list { width: 100%; max-width: 1400px; height: 250px; margin-top: 30px; /*background: yellow;*/ /*min-height: 250px;*/ } @media (max-width: 920px) { .advantage-wrapper .adv-list { height: 1000px; } } .advantage-wrapper .adv-list .adv-item { float: left; /*max-width: 350px;*/ width: 25%; /*background: pink;*/ height: 250px; text-align: center; } @media (max-width: 920px) { .advantage-wrapper .adv-list .adv-item { /*background: violet;*/ width: 100%; } } .advantage-wrapper .adv-item img { width: 100px; height: 100px; /*border: 1px solid #008b4a;*/ } .advantage-wrapper .adv-item h6 { margin: 30px 0; } .advantage-wrapper .adv-item p { max-width: 330px; margin: 0 auto; /*background: yellow;*/ } /*section advantage end*/ /*section sample start*/ .sample-wrapper { width: 100%; height: 550px; background: #F7F7F7; /*background: pink;*/ } @media (max-width: 920px) { .sample-wrapper { height: auto; } } .sample-wrapper .sampleBox { max-width: 1400px; height: inherit; /*background: pink;*/ margin: 0 auto; text-align: center; } .sample-wrapper .sampleBox .sample-tit { margin: 0 auto; /*background: orange;*/ font-size: 35px; font-size: 3.5rem; color: #36474F; font-weight: normal; padding: 40px 0 0 0; } .sample-wrapper .sampleBox .sample-ftit { margin: 0 auto; /*background: violet;*/ font-size: 20px; font-size: 2rem; color: #008b4a; font-weight: normal; padding: 10px 0 35px 0; } .sample-wrapper .sampleBox .sample-list1 { width: 100%; height: 200px; /*background: orange;*/ } @media (max-width:920px) { .sample-wrapper .sampleBox .sample-list1 { height: 800px; } } .sample-wrapper .sample-list1 li { float: left; width: 25%; /*max-width: 350px;*/ height: 200px; text-align: center; } @media (max-width:920px) { .sample-wrapper .sample-list1 li { width: 100%; } } .sample-wrapper .sample-list1 li img { /*设置个宽高*/ } .sample-wrapper .sample-list1 li p { margin-top: 25px; font-size: 16px; font-size: 1.6rem; font-weight: bold; } .sample-wrapper .sampleBox .sample-list2 { width: 100%; height: 200px; /*background: violet;*/ } @media (max-width:920px) { .sample-wrapper .sampleBox .sample-list2 { height: 800px; } } .sample-wrapper .sample-list2 li { float: left; width: 25%; /*max-width: 350px;*/ height: 200px; text-align: center; } @media (max-width:920px) { .sample-wrapper .sample-list2 li { width: 100%; } } .sample-wrapper .sample-list2 li p { margin-top: 25px; font-size: 16px; font-size: 1.6rem; font-weight: bold; } /*section sample end*/ /*section client start*/ .client-wrapper { width: 100%; height: 490px; margin-top: 30px; margin-bottom: 0px; } @media (max-width:380px) { .client-wrapper { height: 490px; margin-top: 20px; } } .client-wrapper .clientBox { max-width: 1400px; height: inherit; background: #fff; margin: 0 auto; text-align: center; padding-bottom: 40px; } .client-wrapper .clientBox .client-list1 { width: 100%; height: 125px; margin-top: 20px; /*background: orange;*/ } .client-wrapper .client-list1 li { float: left; width: 25%; /*max-width: 350px;*/ height: 155px; text-align: center; } .client-wrapper .client-list1 li img { width: 100px; height: 100px; } .client-wrapper .client-list1 li p { margin-top: 10px; font-size: 16px; font-size: 1.6rem; font-weight: bold; } @media (max-width:600px) { .client-wrapper .client-list1 li p { font-size: 14px; font-size: 1.4rem; } } .client-wrapper .clientBox .client-list2 { width: 100%; height: 105px; /*background: violet;*/ padding-top: 50px; } .client-wrapper .client-list2 li { float: left; width: 25%; max-width: 350px; height: 155px; text-align: center; } .client-wrapper .client-list2 li img { width: 100px; height: 100px; } .client-wrapper .client-list2 li p { margin-top: 20px; font-size: 16px; font-size: 1.6rem; font-weight: bold; } @media (max-width:600px) { .client-wrapper .client-list2 li p { font-size: 14px; font-size: 1.4rem; } } /*section client end*/ /*section trend start*/ } .trend-wrapper { width: 100%; height: 445px; background: #F7F7F7; padding-bottom: 25px; } .trend-wrapper .trendBox { max-width: 1400px; height: inherit; margin: 0 auto; } .trend-wrapper .trendBox .trend-content-wrapper { width: 100%; height: 280px; margin-top: 20px; } .trend-wrapper .trendBox .trend-content-wrapper .trend-colomn { float: left; /*max-width: 350px;*/ /*height: 280px;*/ line-height: 28px; } .trend-wrapper .trendBox .trend-content-wrapper .trend-colomn h3 { text-align: left; margin-bottom: 25px; } .trend-wrapper .trendBox .trend-content-wrapper .trend-aboutSimgen { width: 27%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-aboutSimgen div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news { width: 41%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news div { width: 66%; margin: auto; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news div ul { width: 100%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news div ul li { width: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news div ul li a:hover { text-decoration: underline; cursor: pointer; } .trend-wrapper .trendBox .trend-content-wrapper .trend-salesPromotion { width: 32%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-salesPromotion ul { width: 100%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-salesPromotion ul li { width: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trend-wrapper .trendBox .trend-content-wrapper .trend-salesPromotion ul li a:hover { text-decoration: underline; cursor: pointer; } /*section trend end*/ /*footer start*/ footer { width: 100%; height: 270px; background: #272b2e; /*#ddd;*/ color: #fff; position: absolute; bottom: 0; } footer .footerBox { max-width: 1440px; height: inherit; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; } footer .footerBox ul { height: inherit; text-align: center; display: flex; flex-direction: column; text-align: left; } footer .product .product-tit { font-size: 25px; font-size: 2.5rem; margin: 40px 0 35px; text-align: left; } footer .product .product-item { margin: 0 0 10px 0; } footer .info .info-tit { font-size: 25px; font-size: 2.5rem; margin: 40px 0 35px; } footer .info .info-item { margin: 0 0 3px 0; } footer .contact .contact-tit { font-size: 25px; font-size: 2.5rem; margin: 40px 0 35px; } footer .contact .contact-item { margin: 0 0 5px 0; } footer .footerBoxHref { color: #fff; } /*footer end*/ /*product-select-wrapper 产品选择页 start*/ .product-select-wrapper { width: 100%; margin-top: 55px; margin-top: 135px; background: #f2f2f2; } .product-select-wrapper .product-selectBox { /*max-width: 1380px; padding-left: 20px;*/ max-width: 1400px; margin: auto; } .flex-hover-card-container { flex-wrap: wrap; justify-content: center; display: flex; clear: both; min-height: 92px; } .flex-hover-card { box-shadow: none; flex: initial; margin: 8px; padding: 0; /*width: 284px;*/ width: 300px; box-sizing: border-box; background: #fff; border-radius: 2px; cursor: pointer; letter-spacing: .01em; position: relative; transition: all .3s; } .flex-hover-card img { max-width: 100%; } .flex-hover-card .inner { color: #4a5960; min-height: 286px; padding: 40px 28px 0; } .flex-hover-card h3 { color: #4a5960; font-size: 20px; font-size: 2rem; font-weight: 400; line-height: 24px; font: 400 20px/32px Roboto,sans-serif; margin: 20px 0; } .flex-hover-card p { margin: 16px 0; padding: 0; font-size: 14px; font-size: 1.4rem; line-height: 26px; } .flex-hover-card span { border-top: 1px solid #e4e4e4; display: block; padding: 16px 28px; color: #039be5; } .text-uppercase { text-transform: uppercase; } /*product-select-wrapper 产品选择页 end*/ /*product-species-wrapper 产品详情页 start*/ .product-species-wrapper { width: 100%; margin-top: 137px; background: #f2f2f2; position: relative; } .product-species-wrapper .product-speciesBox { width: 1400px; /*max-width: 1400px;*/ /*width: inherit;*/ margin: 0 auto; font-size: 14px; font-size: 1.4rem; /*position: relative;*/ background: #f2f2f2; display: flex; justify-content: space-between; } .product-species-wrapper .product-speciesBox .leftside-container { line-height: 1.6em; width: 238px; position:relative; /*position:fixed;让左侧菜单栏在PC时固定住*/ } /*H5时显示一个目录按钮*/ .leftside-container-mobile { display:none; position: fixed; } .nav-product-species-container { margin-top: 8px; } .product-species-wrapper .leftside-container .nav-product-species-container { background: #fff; box-shadow: 2px 0 2px #bababa; } .product-species-wrapper .nav-product-species { /*width: inherit;*/ } .product-species-wrapper .nav-product-species span { display: block; height: 35px; line-height: 35px; color: #333; padding-left: 20px; font-size: 14px; font-size: 1.4rem; font-weight: bold; } .product-species-wrapper .nav-product-species ul { padding: 20px; background: #fff; } .product-species-wrapper .nav-product-species ul li { font-size: 14px; font-size: 1.4rem; line-height: 25px; padding-left: 15px; } .product-species-wrapper .nav-product-species ul li a { color: rgba(0,0,0,.54); } .product-species-wrapper .nav-product-species ul li:hover a { color: #008b4a; } .product-species-wrapper .content-container { /*让content-container的宽度自动变化*/ /*background: #fff; position: absolute; right:0; padding: 0 30px; max-width: 1144px;让content-container的宽度自动变化*/ background: #fff; /*position: absolute; left: 270px;*/ width: 1050px; box-sizing: border-box; } /*{ background: #fff; position: absolute; width: 1050px; box-sizing: border-box; margin-left:250px; }*/ .product-species-wrapper .content-container .content-tit { height: 90px; font-size: 25px; font-size: 2.5rem; font-weight: bold; color: #000; line-height: 110px; border-bottom: 1px solid #ccc; text-align: center; } .product-species-wrapper .content-container .content-tit span { font-size: 14px; font-size: 1.4rem; padding: 1px 8px; background: #008b4a; border-radius: 5px; color: #fff; margin-left: 20px; } .product-species-wrapper .content-container .content-series { margin: 10px 0; font-size: 14px; font-size: 1.4rem; } .product-species-wrapper .content-container .content-series .content-series-a { display: inline-block; float: left; font-size: 14px; font-size: 1.4rem; font-weight: bold; text-align: center; width: 160px; line-height: 28px; text-align: center; background: #008b4a; border-radius: 3px; color: #fff; margin-right: 10px; } .product-species-wrapper .content-container .content-series .content-series-a:hover { text-decoration: underline; } .product-species-wrapper .content-container .content-series .content-series-qq-wrapper { display: inline-block; float: left; cursor: pointer; margin-top: 2px; } .product-species-wrapper .content-container .content-series .content-series-number { float: right; margin-top: 2px; } .product-species-wrapper .content-container .content-size { width: 100%; margin-bottom: 25px; } .product-species-wrapper .content-container .content-size table { width: 100%; text-align: center; } .product-species-wrapper .content-container .content-size table tr td:nth-child(1) { width: 80%; } .product-species-wrapper .content-container .content-size table tr td:nth-child(2) { } .product-species-wrapper .content-container .content-description { width: 100%; padding: 10px 0; background-color: #fffdef; border: 1px solid #f9e7b6; margin-bottom: 25px; } .product-species-wrapper .content-container .content-description .content-description-left { float: left; display: inline-block; } .product-species-wrapper .content-container .content-description .content-description-left p { margin-bottom: 5px; } .product-species-wrapper .content-container .content-description img { float: right; } .product-species-wrapper .content-container .content-detaildescription { font-size: 14px; font-size: 1.4rem; line-height: 25px; } .home_about { font-size: 12px; } .recommend_pro { margin-top: 50px; margin-bottom: 100px; } .recommend_pro li { display: flex; margin: 6px 0 0 50px; padding: 0; font-size: 16px; line-height: 26px; } .recommend_pro .point { font-size: 20px; font-weight: bold; margin-right: 5px; } .recommend_pro .icon_block { display: inline-block; } .recommend_pro .icon_block div { display: inline-block; } .recommend_pro_container { padding: 60px; } .product_new_desc { background-color: #fffdef; border: 1px solid #f9e7b6; line-height: 1.9em; color: #555; padding: 10px; margin-bottom: 25px; width: 98%; margin: 20px auto 25px; } .desc-detail { line-height: 25px; margin-top: 50px; } .title { /*margin-top:30px;*/ } .desc-detail p { line-height: 25px; margin: 10px 0 0 0; } .desc-detail p strong { font-size: 18px; } .desc-detail ul li { display: flex; flex-direction: column; border-bottom: 1px solid #eee; padding: 15px 0; } /*product-species-wrapper 产品详情页 end*/ /*头部新写的链接*/ .product_contain { box-sizing: border-box; } .product_top { margin-bottom: 20px; } .product_top_title { padding-bottom: 10px; border-bottom: 2px solid #d5dcd6; display: flex; justify-content: space-between; align-items: center; } .product_top_title .product_top_title_span { font-size: 26px; font-weight: normal; width: 80%; } .product_top_title .product_tip { display: flex; justify-content: space-between; width: 230px; margin-top: 15px; } .product_top_title .product_tip .download { height: 20px; font-size: 15px; display: flex; align-items: center; margin-left: 10px; } .product_tip span { margin-left: 3px; font-size: 16px; } .product_selection span { margin-left: 3px; } .product_produce { margin-top: 20px; } .product_produce img { width: 336px; height: auto; min-height: 80px; float: left; margin-right: 10px; } .product_produce .product_description { width: 60%; padding: 10px 15px; /*background: #ddd;*/ font-size: 13px; line-height: 25px; color: #404040; margin-left: 360px; } .product_produce .product_description .product_description_title { font-size: 22px; margin-bottom: 12px; color: #404040; } .product_produce .product_description .product_description_content { font-size: 13px; } .product_produce .product_description .product_description_content p { } .product_selection { display: flex; align-items: center; padding-bottom: 20px; } .product_selection .item { width: 20%; height: 40px; display: flex; align-items: center; justify-content: center; background: #d0f1e0; margin-right: 2px; } .product_selection .item:nth-child(6) { } .item:link { background: #f1f1f1; } .item:visited { background: #f1f1f1; /*#d0f1e0;*/ } .item:hover { background: #8bd4af; } .product_selection .item_click { background: #008b4a; color: #fff; } .product_selection .item img { width: 20px; height: 20px; margin-right: 5px; } .produt_content_item { padding: 5px 5px 25px 5px; border-bottom: 1px solid rgb(220, 220, 220); } .produt_content_item .produt_content_item_question { color: rgb(81, 231, 230); margin-bottom: 20px; font-size: 14px; } .produt_content_item_answer { font-size: 13px; } .produt_content_item_answer .important { color: rgb(81, 231, 230); } /*头部新写的链接*/ /*规格样式*/ .productSizeTable { border: 1px solid #000; border-right: none; border-bottom: none; } productSizeTable p { width: 100%; } .productSizeTable p span { width: 20%; display: inline-block; border-right: 1px solid #000; height: 100%; padding: 15px; } .productSizeTable p .span_other { width: 40%; display: inline-block; border-right: 1px solid #000; } .productSizeTable .title { border-bottom: 1px solid #000; font-weight: bold; } .scale_sty { border-bottom: 1px solid #000 !important; } .scale_sty a { color: #008b4a; text-decoration: underline; } .agent_li { line-height: 25px; font-size: 14px; color: #666; } .agent_li h3 { font-size: 18px; color: #333; border-bottom: solid 1px #eee; padding-bottom: 5px; margin-bottom: 10px; padding-top: 45px; } .agent_li .company_name { color: #000; font-size: 16px; } .ArticleItem { margin: 0 20px; overflow: hidden; border-top: 1px solid #e7eaf1; } .ArticleItem-Title { font-weight: 600; font-synthesis: style; font-size: 18px; line-height: 1.55556; margin-top: 16px; } .ArticleItem-Excerpt { display: block; margin: 10px 0; font-size: 15px; line-height: 1.6; color: #444; } .RichContent { line-height: 1.67; } .RichContent-cover { position: relative; width: 190px; height: 105px; margin-top: -2px; margin-right: 18px; margin-bottom: 4px; float: left; overflow: hidden; background-position: 50%; background-size: cover; border-radius: 4px; -webkit-transform: translateZ(0); transform: translateZ(0); } .RichContent-cover { margin-top: 0; margin-bottom: 0; width: 172px; height: 96px; } .RichContent-inner { margin: 0; } .RichContent-inner { margin-top: 9px; margin-bottom: -4px; overflow: hidden; min-height: 96px; } .RichContent-cover-inner img { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .AuthorInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .AuthorInfo-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; line-height: 1.1; -ms-flex-negative: 0; flex-shrink: 0; padding: 5px 0 5px 0; } .AuthorInfo-detail { font-size: 14px; margin-left: 10px; color: #8590a6; overflow: hidden; } .AuthorInfo-time { padding-left: 15px; } .article-detail p { font-size: 16px; word-break: break-word; line-height: 26px; text-decoration: none solid rgb(26,26,26); margin: 1.4em 0; font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif; color: #333; } .box-title { font-size: 3.5rem; color: rgb(54, 71, 79); font-weight: normal; margin: 0px auto; padding: 40px 0px 0px; text-align: center; } .box-subtitle { font-size: 2rem; color: rgb(0, 139, 74); font-weight: normal; margin: 0px auto; padding: 10px 0px 10px 0; text-align: center; } .tag { font-size: 12px; color: red; vertical-align: super; } .qa_answer p { font-size: 14px; } .display_cate_btn { display: none; } .display_cate_btn a { color: #008b4a; float: right; } /*--------sophie-------------*/ @media (max-width: 920px) { .trend-wrapper { height: 100%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-aboutSimgen { width: 93%; margin: 10px 20px 10px 20px; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news { width: 93%; margin: 10px 20px 10px 20px; } .trend-wrapper .trendBox .trend-content-wrapper .trend-news div { width: 100%; } .trend-wrapper .trendBox .trend-content-wrapper .trend-salesPromotion { width: 93%; margin: 10px 20px 10px 20px; } .trendBox { width: 100%; height: 840px; margin-top: 20px; } .trend-content-wrapper .trend-aboutSimgen { float: none; width: 88%; margin: 0 20px; height: auto; } .trend-content-wrapper .trend-news { float: none; width: 88%; margin: 0 20px; height: auto; } .trend-content-wrapper.trend-salesPromotion { float: none; width: 88%; margin: 0 20px; height: auto; } footer .footerBox { display: block; margin: 0 0 30px 50px; } footer { height: inherit; position: relative; } /**--文章产品相关---**/ .product-species-wrapper .product-speciesBox .leftside-container { display: none; position: fixed !important; z-index: 999; } .product-species-wrapper .content-container { /*margin: 0 auto !important;在移动端的时候恢复原来的设置*/ } .leftside-container-mobile { display: block !important; position: fixed; z-index: 1000; line-height: 1.2em; width: 20px; top: 280px; cursor:pointer; color: white; font-size:12px; background-color: #008b4a; text-align: center; } .product-species-wrapper .product-speciesBox { width: 100%; } .recommend_pro_container { padding: 15px; } .RichContent-cover { float: none; } .product_produce .product_description { width: 100%; margin-left: 0px; margin-top: 10px; display: inline-block; padding: 0px; } .product_top_title { display: block; } .product_selection .item { width: 15%; align-items: unset; } .productSizeTable p .span_other { width: 25%; } .display_cate_btn { display: block; } .desc-detail { margin-top: 35px; } }