body{ font-family: "sourcehansans";} .clear{ clear: both; line-height: 0; height: 0; font-size: 0;} .w1200{ max-width: 1180px; padding: 0 10px !important; margin: 0 auto;} .w1400{ max-width: 1400px; margin: 0 auto;} font{ font-family: "SourceHanSerif";} .header.header-bg{ background: none;} .header{ height: .99rem;} .header .lang{ position: relative; font-size: .14rem;} .header .lang .sub-menu { display: none; position:absolute; top:100%; right:-55px; width:300%; background:#b18a51; -o-transition:all .3s ease; transition:all .3s ease; -webkit-transition:all .3s ease; z-index:2; /*opacity:0;*/ filter:alpha(opacity=0); -webkit-transform:translatex(-50%); -ms-transform:translatex(-50%); -o-transform:translatex(-50%); transform:translatex(-50%) } .header .lang .sub-menu .arrow { position:absolute; display: none; top:-10px; left:50%; width:0; height:0; border-style:solid; border-color:transparent transparent #b18a51; border-width:0 10px 10px; margin:0 0 0 -10px } .header .lang .sub-menu .sub-link { position:relative } .header .lang .sub-menu .sub-link:hover a { background:#835e2d } .header .lang .sub-menu .sub-link .sub-sort { position:absolute; top:0; left:99.6%; min-width:100%; display:none } .header .lang .sub-menu .sub-link .sub-sort a { background:#835e2d; border-bottom:1px solid rgba(255,255,255,.05) } .header .lang .sub-menu .sub-link .sub-sort a:last-child { border-bottom:0 } .header .lang .sub-menu .sub-link:hover .sub-sort { display:block } .header .lang .sub-menu a { background:#b18a51; display:block; font-size:.16rem; line-height:.5rem; text-align:center; color:#fff; white-space:nowrap; padding:0 .1rem } .header .lang .sub-menu a:hover { background:#835e2d } .header ul li{ height: .99rem; line-height: .99rem; font-size: 15px;} .header .logo img{ width: 1.35rem; height: .75rem; margin: .12rem 0 0;} .header ul li.active > a{ color: #144e98; border-bottom: .01rem solid #144e98;} .header ul li .name{ padding: 0; font-size: 15px;} .header ul li .name:hover{color: #144e98;} .header .nav-trigger{top: 0.55rem;} .banner{ height: 4rem; padding-top:1rem;} .banner .dtitle{ text-align:center; padding-top:1.4rem; position:relative; height:100%} .dposition{ height: 60px; line-height: 60px; border-bottom: 1px solid #808080; font-size: 16px; font-family:"sourcehansans" !important; position:relative;} .dposition a{color: #666; padding: 0 5px;} /*.vpro .dposition{color: #fff;} .vpro .dposition a{color: #fff;}*/ .dposition .w1280{ padding:0 10px; } .baona .dtitle {-webkit-transform:translate(0,-60px);-ms-transform:translate(0,-60px);-o-transform:translate(0,-60px);transform:translate(0,-60px);transition:all 1s} .baona .swiper-slide-active .dtitle{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);-webkit-transition-delay:.4s;-o-transition-delay:.4s;transition-delay:.4s} .main{ padding: 35px 0;} .title.green{ position: relative; transform: translateY(-50%);} .title.green i{font-family: "SourceHanSerif" !important; font-size: .15rem; color: #e5c687; font-style: normal; text-transform:Uppercase;} .title.green h2{font-family: "SourceHanSerif" !important; font-size: .5rem; color: #e5c687; line-height:auto !important;} .title.green .line{display: block;width: 86px;height: 3px;background: #e5c687; margin: 0 auto; margin-top: 8px;} .title.green .iline{display: block;width: 86px;height: 3px;background: #e5c687; margin: 0 auto; margin-top: 8px;} .about-page .page-container{ padding:10px;} .about-article{ font-family: "sourcehansans" !important;} .about-page .page-container .about-article p{ font-size:16px;} .productv-page{ margin-top: -60px;} .productv-page .pro{ padding-top:120px; background:url(../img/probg.png) 50% 50% no-repeat #626262; -webkit-background-size:cover; background-size:cover; text-align: center; overflow:hidden;} .productv-page .pro .title{ font-size:28px; line-height:24px; color:#fff; margin-bottom: 34px; font-family: "sourcehansans" !important;} .productv-page .pro .pic{padding: 20px 0; } .productv-page .pro .pic img{ width:150px;} .productv-page .pro .info { margin:0 auto; background:rgba(0,0,0,.2); font-family: "sourcehansans" !important;} .productv-page .pro .info .mt{ height:45px; line-height:45px; color:#fff; background:rgba(0,0,0,.2); font-size:20px;} .productv-page .pro .info .mc{ text-align:left; color:#fff; padding:20px 30px; margin-bottom:50px;} .productv-page .pro .info .mc p{ line-height24px; padding:5px 0px; font-size:16px;} .productv-page .pro .info .mc strong{ font-weight: bold; color: #e5c687;} .prolist .proLi{width: calc(100% / 4); height: auto;float: left; position: relative; overflow: hidden; padding: 10px;} .prolist .proLi .pic{ position:relative;overflow:hidden;width:auto;height:0px;padding-bottom:74%;border:1px solid #f1f1f1;border-bottom:0} .prolist .proLi .pic img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;transition:all .5s ease;height:100%;object-fit:contain;object-position:top center} .prolist .proLi .info{ position:relative; overflow:hidden;width:100%;height:auto;padding:20px 20px 10px;border:1px solid #f2f2f2 } .prolist .proLi .info .name{font-family: "sourcehansans" !important; font-size:16px;color:#333; overflow:hidden;text-overflow:ellipsis;position:relative;white-space:nowrap;width:100%; padding-bottom:8px } .prolist .proLi .info .more{font-family: "sourcehansans" !important; position:relative;display:block; color:#777; height:38px; line-height:38px; border-top:1px solid #e5e5e5 } .prolist .proLi .info .more .details {position:relative;display:block;color:#777;height:38px;line-height:38px;} .prolist .proLi .info .more .arrowsR {position:absolute;top:50%;right:0px;transform:translate(0,-50%);width:30px} .prolist .proLi .info .more .arrowsR img {position:absolute;transition:all .5s ease} .prolist .proLi .info .more .arrowsR .harr {opacity:0} .prolist .proLi .pic .showBox {position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0;background:rgba(0,0,0,.6);transition:all .5s ease} .prolist .proLi:hover .pic .showBox{ opacity: 1;} .prolist .proLi .pic .showBoxLink {font-family: "sourcehansans" !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:60%; color:#fff; text-align:center; font-size:16px; line-height: 23px; padding:8px 0} .prolist .proLi .pic .showBoxLink:before { content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:16px; height:1px; background:#fff; transition:all .5s ease} .prolist .proLi .pic .showBoxLink:after { content:''; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:16px; height:1px; background:#fff; transition:all .5s ease} .prolist .proLi:hover .info .more .arrowsR .barr { opacity:0} .prolist .proLi:hover .info .more .arrowsR .harr { opacity:1} .prolist .proLi .pic .proLi:hover .showBox { opacity:1} .prolist .proLi .pic .proLi:hover .proImg { transform:translate(-50%,-50%) scale(1.1)} .prolist .proLi .pic .proLi:hover .showBoxLink:before { width:16px;} .prolist .proLi .pic .proLi:hover .showBoxLink:after { width:16px;} .certificatelist { width:100%;} .certificatelist .p_MatteIcon .iconfont:before {content:'\e602';} .certificatelist >div {animation-fill-mode:both;} .certificatelist .p_products {width:100%; transition:0.3s ease 0s; font-size:14px;} .certificatelist .p_products ul { font-size:0px;} .certificatelist .p_products li {width: calc(100% / 4); height: auto;float: left; position: relative; overflow: hidden; padding: 10px;} .certificatelist .p_products li a { font-size:0px; overflow:hidden; text-align:center; background:#fff; width:100%; margin:0 auto; display:block;} .certificatelist .p_products li a:before { content:''; display:inline-block; vertical-align:middle; height:100%; width:0px;} .certificatelist .p_products img { display:inline-block; vertical-align:middle; transition:0.5s linear 0s; width:auto; height:auto; max-height:87%; max-width:90%; margin-left:0px; transform:scale(.9);} .certificatelist .p_products h4 {display:none;} .certificatelist .p_products li span { color:#666; white-space:nowrap; transition:0.3s ease 0s; display:block; width:100%; text-align:center; overflow:hidden; text-overflow:ellipsis; font-size:16px; padding:3% 10px; box-sizing:border-box; border:none;} .fullpage{width: 100%;font-size: 0;text-align: center;margin: 30px 0;} .fullpage li{ display:inline-block;} .fullpage li a{display: inline-block;vertical-align: middle;border: 1px solid #e5e5e5; padding:0 15px; height: 46px;text-align: center;line-height: 46px;font-size: 16px;color: #666;margin: 0 3px;transition: all .4s ease; border-radius: 4px;} .fullpage li a:hover,.fullpage li.active a{background: #ff6700;border-color: #ff6700;color: #fff;} @media screen and (min-width: 769px) { .certificatelist .p_products li:hover img { transform:scale(1);} .certificatelist .p_products li:hover span { color:#e5c687; background:#ffffff;} } @media screen and (max-width: 810px) { .certificatelist .p_products li {width: calc(100% / 3); } .certificatelist .p_products img{transform: scale(1);} } @media screen and (max-width: 1100px) { .certificatelist .p_products li a { height: 21.2vw;} } @media screen and (max-width: 768px) { .certificatelist .p_products { padding:0px; } .certificatelist .p_products li { width: calc(100% / 2) margin-bottom: 5%;} .certificatelist .p_products li a { height: 31vw; padding: 0;} .certificatelist .p_products li span { padding: 2vw; font-size: 14px;} /* .certificatelist .p_products li:nth-child(2n+1) { margin-left: 0%;} .certificatelist .p_products li:nth-child(2n+0) { margin-left: 4%; }*/ } @media screen and (max-width: 1500px) { .certificatelist .p_products li span { font-size: 14px } } .certificatelist .p_page .pre .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px;} .certificatelist .p_page .next .iconfont:before {shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px;} .certificatelist .p_more .iconfont:before {shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px;} .certificatelist .p_loading .iconfont:before { shadow-angle:0px; shadow-distance:0px; shadow-angle-ofInset:0px; shadow-distance-ofInset:0px;} .certificatelist .stylebox_top { height:auto;} .certificatelist .title_sub { position:relative; color:#1c3079; font-size:28px; margin-left:0px; padding-left:15px} .certificatelist .title_sub:before { content:''; position:absolute; left:0px; top:8px; height:24px; width:2px; background:#1c3079; z-index:1;} .certificatelist .title_main { font-size:30px; color:#eaa317;} .certificatelist .stylebox_content { padding-top:30px;} .certificatelist { width:100%;} #videolist .videolist { position:relative; } #videolist .videolist:hover{ cursor: pointer; } #videolist .videos{ display:none; position: absolute;width: 800px;height: 600px; background: #000;top: 0;left:0;right:0;bottom:0; margin: auto; z-index: 9999;} #videolist .vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; } #video{ width:800px; height:600px; } .videoslist{font-family: "sourcehansans" !important;} .videoslist .pro { height:auto; margin:0 auto; overflow:hidden; padding:0px } .videoslist .proUl { margin:0rem 0; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; grid-gap:15px } .videoslist .proLi{ padding:10px;} .videoslist .leftBox { width:75%; height:100%; padding-top:10px } .videoslist .proTitle { color:#fff; font-size:16px; height:28px; line-height:28px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis } .videoslist .proSummry { height:20px; color:rgba(255,255,255,.6); line-height:20px; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis } .videoslist .rightBox { width:25%; height:100%; display:flex; align-items:center; justify-content:center } .videoslist .icon { display:flex; width:100%; height:1rem; align-items:center; justify-content:center; color:#fff; border-left:1px solid rgba(255,255,255,.2) } .videoslist .proLink { position:relative; display:block; width:100%; height:0px } .videoslist .proImgBox { position:absolute; width:100%; height:100% } .videoslist .proImg { width:100%; height:100%; transition:all .5s ease } .videoslist .txtBox { position:absolute; left:50%; width:calc(100% - 70px); padding:10px; height:90px; border-top:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.35); transform:translate(-50%,-20%); display:flex; transition:all .5s ease } .video-article .mt{ font-size:24px; line-height:50px; text-align:center; margin:20px 0;} .video-article .d-video{ max-width:740px; max-height:406px; margin:0 auto; margin-bottom:20px;} @media only screen and (max-width:1200px) { .productv-page .pro{ padding:0 10px; padding-top: 120px;} } @media only screen and (max-width:768px) { .productv-page .pro .title{ font-size:24px;} .videoslist .proLi { width:100%; margin:1rem 0; overflow:hidden } .videoslist .proLink { padding-bottom:53% } .videoslist .txtBox { top:60% } .videoslist .proUl { margin:0rem 0; overflow:hidden; display:block; grid-template-columns:1fr 1fr; grid-gap:15px } } @media only screen and (min-width:769px) { .videoslist .proLi { position:relative; width:auto; float:none; overflow:hidden } .videoslist .proLink { padding-bottom:53% } .videoslist .proImgBox { width:auto; height:auto; overflow:hidden } .videoslist .proImg { width:100%; height:100%; transition:all .5s ease } .videoslist .txtBox { top:60% } .videoslist .proLi:hover .proImg { transform:scale(1.1) } .videoslist .proLi:hover .txtBox { top:70% } } @media only screen and (max-width:739px) { .video-article .d-video{ padding:0 10px;} } .videoslist .p_page .pre .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0 } .videoslist .p_page .next .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0 } .videoslist .p_more .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0 } .videoslist .p_loading .iconfont:before { shadow-angle:0; shadow-distance:0; shadow-angle-ofInset:0; shadow-distance-ofInset:0 } .dfooter{ background: #353535; color: #fff;} .dfooter a{color: #fff;} .dfooter .fline{ height: 20px; position: relative;} .dfooter .fline:before{ content: ""; background: rgba(255,255,255,0.2); position: absolute; top: 50%; height: 1px; margin-top: .5px; width: 100%; display: block;} .dfooter .fbottom{ font-size: 12px; color: #D3D3D3; padding: 20px 0 40px;} .dfooter .fnav{padding: 80px 0 20px;} .dfooter .fnav li a{float: left;margin-right: 4%;color: #fff; font-size: 16px; } .dfooter .w1280{ padding:0 10px;} @media screen and (max-width:960px) { .header.header-bg { background: rgba(0,0,0,.2);} .header .nav{top: 1.1rem;} .article .padding-large{ padding: 0;} .header{ height:1.1rem !important;} .header .d-bar{ display:none !important;} .header .nav-trigger { top: 0.15rem !important;} .header .nav li.plang{ display:block !important;} } @media screen and (max-width:720px) { .main{padding: 0px 0;} .prolist .proLi{width: calc(100% / 2);} } @media screen and (max-width:500px) { .productv-page .pro .title{ font-size:20px;} .certificatelist .p_products li {width: calc(100% / 2); } .prolist .proLi{width: calc(100% / 2);} .dfooter .fnav{ display:none;} .dfooter .fline{ display:none;} .dfooter .fbottom{padding: 20px 0 20px;} .dfooter .fbottom p{ text-align:center;} .dfooter .fbottom p span{ display:block;} }