@charset "utf-8"; *{ box-sizing:border-box; margin: 0; padding: 0; } ul{ list-style-type:none; } a,a:visited{ text-decoration: none; } p{ line-height: 1.5; text-align: justify; margin-bottom: 10px; } body{ font-family: "PingFang SC"; background-color: rgb(247,249,252); font-size: 1em; color:#3F4750; } .bg_white{ background-color: #fff; } sub{ margin-top: 8px; } /*瀵艰埅涓巐ogo鍖哄煙鏍峰紡*/ header{ background-color: #fff; } .logoMainNav{ width:90%; margin:0 auto; max-width:1920px; min-width:1000px; padding-top:10px; padding-bottom: 10px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; } nav#mainNav{ display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; } .logo{ width:357px; height:47px; margin-right: auto; background-image:url(../images/logo.jpg); background-size:cover; /*text-indent:-9999px;*/ } nav#mainNav a,nav#mainNav a:visited{ font-family:"榛戜綋","Helvetica"; position: relative; display:block; height:50px; line-height:50px; padding:0 8px; margin-left: 8px; color:#000; font-weight: 500; transition: all 1s ease-in; } nav#mainNav a:first-child{ margin-left: 0; } nav#mainNav a.current{ color:#057DBA; } nav#mainNav a::after{ position: absolute; left: 50%; right: 50%; top: 50px; display: block; content: ""; height: 2px; background-color: #0093DD; transition: all 1s linear; border-radius: 0.5px; } nav#mainNav a:hover{ color:#057DBA; } nav#mainNav a:hover::after{ left:0; right: 0; } /*鍝佺墝瑙嗛瀹d紶*/ .brandPropaganda{ position: relative; } .brandPropaganda video{ width: 100%; } .brandPropaganda .brandInfor{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .brandPropaganda .brandInforContent{ width:90%; margin:0 auto; max-width:1920px; min-width:1000px; color: #FFF; } .brandInfor h1,.brandInfor p{ color: #fff; margin-bottom: 20px; } .brandInfor h1{ margin-top: 60px; } .brandInfor h1 span{ position: relative; padding: 0 15px 12px; } .brandInfor h1 span::after{ content: ""; position: absolute; top: 12px; bottom: 15px; right: 0; width: 3px; background-color: #fff; } .brandInfor h1 span:last-child::after{ display: none; } .brandInfor p{ width:550px ; } .brandInfor button{ background-color: rgba(0,147,221,1); color: #fff; border: none; width: 200px; height: 57px; line-height: 57px; text-align: center; font-size: 1.25em; font-weight: bold; margin-top: 30px; } /*鍏充簬闈掕。姹燂細鍝佺墝骞垮憡鍖哄煙锛氬崟寮犲箍鍛婃垨杞挱鍥 */ .brand{ position: relative; margin-top: 10px; } .brand::after{ content: ''; display: block; clear:both ; } .brand img{ width: 100%; } .brandInfor02{ position: absolute; left: 0; width: 55%; top: 0; bottom: 3px; background-image: url(../images/aboutUs/brandbg02.png); background-size: cover } .brandContentWrap{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 100; } .brandContent{ width:90%; margin:0 auto; max-width:1920px; min-width:1000px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .brandContent h2{ font-size: 2em; font-family: "榛戜綋"; color: #fff; margin-top: 70px; margin-bottom: 20px; } .brandContent p{ width: 500px; font-size: 1.25em; color: #fff; } .brandContent button{ width: 140px; height: 56px; line-height: 56px; text-align:center; color: #0093DD; border: none; background-color: #fff; margin-top: 50px; } .brand .brandVisulDesign{ float: right; width: 50%; } /*鍏充簬闈掕。姹燂細鎴戜滑鐨勪紭鍔縮uperiority鏍峰紡*/ .superiority h1{ font-size: 1.5em; color:#0093DD; text-align: center; } .superiority p{ text-align: center; margin: 12px 0; } .superiorityContent01{ border-top: 1px solid #E6EAEF; } .superiorityContent01::after{ content: ''; display: block; clear: both; } .superiorityContent01 li{ width: 42.5%; margin: 25px 0; } .superiorityContent01 li p{ margin: 0; padding: 0; text-align: left; } .superiorityContent01 li h2{ position: relative; margin: 0; margin-bottom: 23px; padding-left: 40px; background-repeat: no-repeat; background-position: 0px center; transition: all 0.5s; } .superiorityContent01 li:nth-child(1) h2{ background-image: url(../images/aboutUs/icon/diliweizhi.svg); } .superiorityContent01 li:nth-child(1) h2:hover{ background-image: url(../images/aboutUs/icon/diliweizhihover.svg); } .superiorityContent01 li:nth-child(2) h2{ background-image: url(../images/aboutUs/icon/shengchantiaojian.svg); } .superiorityContent01 li:nth-child(2) h2:hover{ background-image: url(../images/aboutUs/icon/shengchantiaojianhover.svg); } .superiorityContent01 li:nth-child(3) h2{ background-image: url(../images/aboutUs/icon/jishushili.svg); } .superiorityContent01 li:nth-child(3) h2:hover{ background-image: url(../images/aboutUs/icon/jishushilihover.svg); } .superiorityContent01 li:nth-child(4) h2{ background-image: url(../images/aboutUs/icon/gaopinzhigaobiaozhuan.svg); } .superiorityContent01 li:nth-child(4) h2:hover{ background-image: url(../images/aboutUs/icon/gaopinzhigaobiaozhuanhover.svg); } .superiorityContent01 li:nth-child(odd){ float: left; margin-right: 7.5%; } .superiorityContent01 li:nth-child(even){ float: right; margin-left: 7.5%; } .superiorityContent01 h2{ font-size: 20px; } .superiorityContent01 h2::after{ position: absolute; left: 0; top: 35px; display: block; content: ""; width: 0px; height: 2px; background-color: #0093DD; transition: width 0.5s linear; } .superiorityContent01 h2:hover::after{ position: absolute; left: 0; top: 35px; display: block; content: ""; width: 200px; height: 2px; background-color: #0093DD; } .superiorityContent01 h2:hover{ color: #0093DD; } .superiorityContent02{ margin-top: 120px; } .superiorityContent02::after{ content: ''; display: block; clear: both; } .superiorityContent02 li{ position:relative; float: left; width: 22%; margin: 0; margin-right: 4%; border: 1px solid #E6EAEF; border-radius: 10px; text-align: center; padding-top: 49px; height: 282px; transition: all 0.5s linear; cursor: default; } .superiorityContent02 li:hover{ bottom: 15px; background-color: #0093DD; color: #fff; } .superiorityContent02 li:hover p{ color: #fff; } .superiorityContent02 li:last-child{ margin-right: 0; } .superiorityContent02 li .superiorityImg{ width: 62px; height: 62px; margin: 0 auto; } .superiorityContent02 li:nth-child(1) .superiorityImg{ background-image: url(../images/aboutUs/icon/kegongkaicai.svg); } .superiorityContent02 li:nth-child(1):hover .superiorityImg{ background-image: url(../images/aboutUs/icon/kegongkaicaihover.svg); } .superiorityContent02 li:nth-child(2) .superiorityImg{ background-image: url(../images/aboutUs/icon/pic100wandun.svg); } .superiorityContent02 li:nth-child(2):hover .superiorityImg{ background-image: url(../images/aboutUs/icon/pic100wandunhover.svg); } .superiorityContent02 li:nth-child(3) .superiorityImg{ background-image: url(../images/aboutUs/icon/pic800mingxinlaoyuangong.svg); } .superiorityContent02 li:nth-child(3):hover .superiorityImg{ background-image: url(../images/aboutUs/icon/pic800mingxinlaoyuangonghover.svg); } .superiorityContent02 li:nth-child(4) .superiorityImg{ background-image: url(../images/aboutUs/icon/zhuanyeshengchanxian.svg); } .superiorityContent02 li:nth-child(4):hover .superiorityImg{ background-image: url(../images/aboutUs/icon/zhuanyeshengchanxianhover.svg); } .superiorityContent02 li h2{ font-size: 24px; margin-top: 0px; margin-bottom: 24px; } .superiorityContent02 li p{ font-size: 14px; margin: 0; } /*鍏充簬闈掕。姹燂細鏉ヨ嚜闈掕。姹?0浣欏勾鐨勫搧鐗屽潥瀹 */ .superiorityContent03{ height: 480px; background: linear-gradient(to bottom,rgba(155,215,244,0.1),rgba(126,216,233,0.1)); } .superiorityContent03 article{ display: flex; justify-content: space-around; align-items: center; } .superiorityContent03 div:first-child{ width: 30%; position: relative; } .superiorityContent03 div:first-child::after{ content: "+"; position: absolute; top: -50px; left: 290px; font-size: 4em; color: #0093DD; } .superiorityContent03 div:last-child{ width: 50%; } .superiorityContent03 p{ } /*浼佷笟鏂囧寲*/ .corporateCulture{ height: 620px; background-color:#FAFAFB ; background-image: url(../images/aboutUs/cultrerBg.png); background-repeat: no-repeat; background-position: center bottom; } .corporateCulture article{ padding-top: 5px; padding-bottom: 0; } .corporateCulture img{ float: right; margin-left: 120px; } .corporateCulture h1{ font-size: 1.75em; margin-top: 50px; margin-bottom: 20px; } .corporateCulture p{ width: 40%; text-align: justify; } /*浼佷笟鍗栫偣鏍峰紡 */ .sellingPoint{ position: relative; width:90%; margin:0 auto; max-width:1920px; min-width:1000px; } .sellingPoint ul{ position: absolute; left: 0; right: 0; top: -50px; display: flex; justify-content: space-between; align-items: stretch; } .sellingPoint li{ position: relative; width:30%; padding: 24px 44px; background-color: #fff; box-shadow: 3px 3px 12px #aeaeae; transition: all 0.5s ease-in; } .sellingPoint li:hover{ top: -20px; } .sellingPoint h3{ margin-bottom: 23px; } /* 鍏充簬鎴戜滑 */ article{ position: relative; /*width:64%;*/ margin:0 auto; max-width:1920px; min-width:1000px; display: block; padding-top: 0px; padding-bottom: 0px; } article::after{ content: ''; display: block; clear: both; } article .contentTitle{ display: flex; align-items: center; justify-content: space-between; margin-top: 150px; margin-bottom: 24px; } .contentTitle h2{ width: 283px; height: 67px; text-indent: -9999px; z-index: 100; } .contentTitle h2.aboutUs{ background: url(../images/home/ABOUTUS.png) left center no-repeat; } .contentTitle div{ color: #3F4750; font-weight: 100; } article .sloganInfor{ width: 500px; font-size: 32px; margin-bottom: 24px; margin-top: 36px; } article .sloganInfor p{ } article .wrap .infor{ position: absolute; left: 10%; right: 10%; top: 80%; padding: 32px 40px; background-color: #fff; box-shadow: 3px 3px 5px rgb(0,0,0,.5); } article .wrap img{ width: 100%; } /*瑙嗛瀹d紶鏍峰紡*/ .videoIntroduction{ margin-top: 150px; height: 481px; color: #fff; background-image: url(../images/home/videoBg.png); background-size: cover; background-repeat: no-repeat; } .videoIntroduction article{ padding-top: 106px; } .videoIntroduction video{ width: 470px; height: 270px; float: right; } .videoIntroduction article::after{ content: ''; display: block; clear: both; } .videoIntroduction .videoInfor{ float: left; color: #FFF; } .partner{ margin-top: 70px; border-top: 1px solid #fff; padding-top: 18px; } /*about production */ .productIntro{ padding-top: 24px; } .panelContainer ul.productDetails01{ display: block; } /* 涓轰粈涔堥€夋嫨鎴戜滑 */ .whyChoiceUs{ display: flex; justify-content:space-between ; align-items: center; } .whyChoiceUs li{ position: relative; float: left; width: 25%; margin: 0; padding: 0; overflow: hidden; text-align: center; background-color: #fff; } .whyChoiceUs:first-of-type li:nth-child(odd) img{ width: 100%; transition: all 1s ; } .whyChoiceUs:first-of-type li:nth-child(odd) img:hover{ transform:scale(1.2) ; } .whyChoiceUs:first-of-type li:nth-child(odd) span{ position: absolute; border: 30px solid rgba(255,255,255,0); border-right: 30px solid rgba(255,255,255,1); right: 0; top: 50px; z-index: 100; } .whyChoiceUs:last-of-type li:nth-child(even) img{ width: 100%; transition: all 1s ; } .whyChoiceUs:last-of-type li:nth-child(even) img:hover{ transform:scale(1.2) ; } .whyChoiceUs:last-of-type li:nth-child(even) span{ position: absolute; border: 30px solid rgba(255,255,255,0); border-left: 30px solid rgba(255,255,255,1); left: 0; top: 50px; z-index: 100; } .whyChoiceUs { margin-top: 50px; } .whyChoiceUs li p{ text-align: center; } .whyChoiceUs:last-child{ margin-top: 0; } .whyChoiceUs::after{ content: ''; display: block; clear: both; } .whyChoiceUs_bg{ background-color: #0093DD ; color: #fff; position: relative; } .whyChoiceUs_bg .sloganInfor p{ width: 80%; } .whyChoiceUs_bg p{ color:#fff; width: 50%; } .whyChoiceUs_bg article{ position: absolute; left: 5%; top: 0; } .whyChoiceUs_bg video{ width:90%; margin:0 auto; max-width:1920px; min-width:1000px; } /* 鎴戜滑鐨勫鎴锋牱寮?/ .clientInfor{ position: absolute; left: 40%; top: 140px; width: 658px; } .clientGallery{ display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } .clientGallery figure{ position: relative; width: 24%; margin-bottom: 1.333%; border-radius: 10px; } .clientGallery figure img{ width: 100%; border-radius: 10px; } .clientGallery figcaption{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(13,126,198,0.7); padding: 20px; display: flex; justify-content: space-around; align-items: center; color: #fff; border-radius: 10px; transition: all .5s; } .clientGallery figure:nth-child(1) figcaption,.clientGallery figure:nth-child(6) figcaption,.clientGallery figure:nth-child(8) figcaption{ background-color: rgba(255,153,21,1); } .clientGallery figure:nth-child(3) figcaption{ background-color: rgba(13,126,198,1); } .clientGallery figure:nth-child(7) figcaption{ background-color: rgba(133,196,112,1); } .clientGallery figure:hover figcaption{ flex-direction: column; justify-content: space-around; background-color: rgba(13,126,198,.5); cursor: pointer; } .clientGallery figure h3{ margin: 0; padding: 0; padding-bottom: 10px; position: relative; transition: all .5s; } .clientGallery figure h3::after{ content: ""; position: absolute; left: 50%; right: 50%; height: 2px; background-color: #fff; bottom: 0; transition: all 1s; } .clientGallery figure:hover h3::after{ left: 20%; right: 20%; } .clientGallery figcaption img{ width: 25%; } .clientGallery p:last-of-type{ display: none; } .clientGallery figcaption:hover img{ display: none; } .clientGallery figcaption:hover p{ display: block; color: #fff; padding: 10px; } /*鏂伴椈淇℃伅 */ .importentNews{ float: left; width: 45%; } .importentNews img{ width: 100%; } .importentNews .newsTitle{ color: #333333; font-family: "榛戜綋"; text-align: justify; font-size: 1.75em; width: 100%; margin: 20px 0; padding: 0; line-height: 1.2; } .detailsInfor{ margin-top: 25px; } .newsList{ float: right; width: 45%; } .newsList ::after{ content: ''; display: block; clear: both; } .newsList li{ margin-bottom: 20px; } .newsList .newsPubDate{ float: left; width: 30%; border-top: 1px solid #E6EAEF; padding-top:20px; font-family:"榛戜綋"; font-size:1.75em; margin-right: 5%; } .newsList .news{ float: left; width: 65%; border-top: 1px solid #E6EAEF; padding-top:20px; } .newsList .news h3{ margin-bottom: 20px; } .news .detailsInfor span:first-child{ float: left; width: 100px; height: 30px; text-align: center; line-height: 30px; border-radius: 10px; border: 1px solid #0093DD; color: #0093DD; } .news .detailsInfor span:last-child{ float: right; } .detailsInfor a, .detailsInfor a:visited{ color: #999EA8; transition: all 0.5s; } .detailsInfor a:hover{ color: #0093DD; } /*鑱旂郴閫氶亾01*/ .contactUs01{ height: 240px; background-image: url(../images/contactUsbg.png); background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; text-align: center; } .contactUs01 h2{ font-size: 1.5em; margin-top:0px; margin-bottom:30px ; } .contactUs01 input[type="text"]{ width: 638px; height: 56px; text-align: center; outline: none; border: none; } .contactUs01 button{ width:135px ; height:56px ; background-color:#0093DD; color: #fff; border: none; } .contactUs01 input[type="text"]:focus{ outline: none; } /*鑱旂郴閫氶亾02 */ .contactUs02{ background-image: url(../images/home/kefu.png); background-position: 80% center; background-repeat: no-repeat; } .contactUs02 button{ margin-top: 50px; width: 384px; height: 64px; line-height: 64px; text-align: left; color: #fff; border: none; background: url(../images/home/smallArrow.svg) 90% center no-repeat, url(../images/footer/buttonBg.png); } .contactUs02 button img{ float: left; margin-top: 20px; margin-left: 32px; margin-right:15px; } /*鐗堟潈淇℃伅鍖哄煙*/ footer{ width:90%; margin:0 auto; max-width:1920px; min-width:1000px; padding-top: 20px; padding-bottom: 20px; font-size: 1em; display: flex; justify-content: flex-start; align-items: center; } footer img{ width: 250px; margin-right: 50px; } footer a,footer a:visited{ color: #333333; font-size: 1em; } footer p{ display: flex; align-items: center; } footer p img{ float: left; width: 25px; height: 25px; margin-left: 20px; margin-right: 5px; } /*鐢熶骇杩囩▼*/ .productionFlow{ background-color: #fff; } .productionFlow h2{ font-size: 2em; font-weight: 600; color: #0093dd; padding-bottom: 24px; border-bottom: 1px solid #E6EAEF; margin-bottom: 34px; } .productionFlow p{ margin-left: 250px; } .productionFlow ul::after{ content: ''; display: block; clear: both; } .productionFlow ul p{ margin: 0; } .productionFlow ul:first-of-type{ margin-top: 52px; margin-left: 250px; margin-bottom: 66px; display: flex; justify-content: space-between; align-items: center; } .productionFlow ul:first-of-type li{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 22%; height: 220px; border: 1px solid #8D959F; border-radius: 16px; } .productionFlow ul:nth-of-type(2){ margin-top: 34px; margin-bottom: 64px; margin-left: 250px; } .productionFlow ul:nth-of-type(2) li:first-child{ float: left; width: 45%; } .productionFlow ul:nth-of-type(2) li:last-child{ float: right; width: 45%; } .productionFlow ul:nth-of-type(2) a{ position: relative; display: block; color: #0093DD; font-weight: 400; } .productionFlow ul:nth-of-type(2) a img{ width: 100%; } .productionFlow ul:nth-of-type(2) span{ position: absolute; bottom: 23px; left: 35%; padding-left: 20px; background-image: url(../images/productionFlow/icon/download.svg); display: block; background-repeat: no-repeat; } .productionFlow ul:nth-of-type(3){ margin-top: 61px; margin-bottom: 74px; margin-left: 250px; } .productionFlow ul:nth-of-type(3) li{ float: left; margin-right: 114px; display: flex; align-items: center; } .productionFlow ul:nth-of-type(3) li span{ font-size: 2.5em; margin-right: 12px; font-weight: 400; } .productionFlow ul:nth-of-type(4){ margin-bottom: 107px; margin-left: 250px; } .productionFlow ul:nth-of-type(4) li{ float: left; width: 33.33%; } .productionFlow ul:nth-of-type(4) li img{ width: 100%; } .productionFlow p:nth-last-of-type(1){ text-align: center; } .productionFlow p:nth-last-of-type(2){ margin-top: 50px; } /*鐗╂祦涓庝粨鍌 */ .logistics h1{ font-size: 1.5em; color:#0093DD; text-align: center; } .logistics p{ text-align: left; margin: 37px 0; } .logisticsContent{ margin-bottom: 30px; } .logisticsContent li::after{ content: ''; display: block; clear: both; } .logisticsContent li{ display: flex; align-items: auto; margin: 37px 0; background-color: darkgreen; } .logisticsContent .leftDiv{ display: flex; align-items: center; float: left; width: 50%; justify-content: space-between; background-color: #0093DD; color: #fff; padding-left: 104px; padding-right: 90px; } .logisticsContent .leftDiv h2{ font-size: 1.5em; font-weight: 400; margin: 0 0 10px; display: flex; align-items: center; } .logisticsContent .leftDiv h2 img{ margin-right: 20px; } .logisticsContent .leftDiv p{ color: #fff; margin: 0; } .logisticsContent .leftDiv .leftDivContent01{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .logisticsContent .rightDiv{ float: right; width: 50%; background-size: cover; } .logisticsContent li:first-of-type .rightDiv{ background-image: url(../images/logistics/roadTransport.png); } .logisticsContent li:nth-of-type(2) .rightDiv{ background-image: url(../images/logistics/railroadTransportation.png); } .logisticsContent li:nth-of-type(3) .rightDiv{ background-image: url(../images/logistics/seawayTransportation.png); } .logisticsContent .rightDiv img{ width: 100%; } /* 鍏ㄧ悆浠撳偍鏍峰紡*/ .globleStorage{ background-color: rgb(39,46,50); color: #fff; text-align: center; padding-left: 103px; padding-right: 103px; margin-bottom: 80px; } .globleStorage h1{ margin-bottom: 21px; font-size: 2em; } .globleStorage p{ color: #fff; margin-bottom: 38px; } /*鍙寔缁彂灞?/ .brand02{ background-image: url(../images/sustainableDevelopment/banner.png); background-size:cover; height: 548px; margin-top: 10px; text-align: center; color: #fff; padding-top: 211px; } .brand02 h1{ margin-bottom: 45px; font-size: 2.25em; } .brand02 p{ color: #fff; text-align: center; font-size: 1.5em; } .sustainable h1{ font-family: PingFangSC-Semibold; font-size: 2em; color: #0093DD; letter-spacing: 0; line-height: 56px; font-weight: 600; text-align: center; padding-bottom: 20px; border-bottom: 1px solid #E6EAEF; margin-bottom: 25px; } .sustainable img{ width: 100%; } .sustainableContent01{ display: flex; justify-content: space-around; margin-top: 48px; margin-bottom: 76px; } .sustainableContent01 li:first-child{ width: 35%; height:150px ; background-image: url(../images/productionFlow/iso-14001.png); background-size: cover; } .sustainableContent01 li:last-child{ width: 35%; height:150px ; background-image: url(../images/productionFlow/iso-9001.png); background-size: cover; } .sustainableContent01 li a{ display:flex; align-items: center; width:180px ; height:30px ; margin: 110px auto 23px; text-align: center; color: #0093DD; font-size: 0.75em; font-weight: 400; } .sustainableContent01 li a img{ margin-right: 4px; width: 16px; height: 16px; } .sustainableContent02{ display: flex; justify-content: space-between; margin-bottom: 76px; } .sustainableContent02 div.leftDiv02{ width: 60%; } .leftDiv02 span{ font-family: LiGothicMed; font-size: 2.5em; color: #000000; letter-spacing: 0; font-weight: 500; margin-right: 16px; color: #000; } .leftDiv02 p{ margin-top: 24px; } .rightDiv02{ width: 300px; height: 160px; border: 1px solid #E6EAEF; border-radius: 8px; text-align: center; padding: 30px; } .rightDiv02 div{ text-align: center; font-size: 3em; padding-bottom: 15px; } .rightDiv02 p{ margin: 0; text-align: center; } .sustainableContent02 .rightDiv02{ width: 30%; } .sustainableContent02 .rightDiv02 div{ background-image: url(../images/sustainableDevelopment/decline.svg); background-repeat: no-repeat; background-position: 70% 70%; } .sustainableContent03{ margin: 94px 0 46px; } .sustainableContent04{ position: relative; height: 355px; background-image: url(../images/sustainableDevelopment/pic02.png); background-size: cover; } .sustainableContent04 p{ font-family: PingFangSC-Regular; font-size: 2em; color: #FFFFFF; letter-spacing: 0; font-weight: 400; } .sustainableContent04 div:first-child{ position: absolute; left: 40px; bottom: 45px; } .sustainableContent04 div:last-child{ position: absolute; right: 128px; bottom: 45px; } /* 鏂伴椈璧勮鏍忕洰*/ .newsInforBg{ background-color: rgb(247,249,252); margin-top: 15px; } .brand03{ position: relative; } .brand03 .wrap{ width: 62%; background-color: deeppink; } .brand03 .recentNews{ position: absolute; width: 38%; top: 20px; bottom: 80px; right: 0; background-color: #0093DD ; color: #fff; padding-left: 60px; padding-top: 32px; } .recentNews h1{ font-family: PingFangSC-Regular; font-size: 1em; letter-spacing: 0; line-height: 2; font-weight: 400; margin-bottom: 33px; } .recentNews li { margin-bottom: 20px; font-family: PingFangSC-Regular; font-size: 1em; letter-spacing: 0; line-height: 1.75; font-weight: 400; } .recentNews li a,.recentNews li a:visited{ color: #fff; display: flex; align-items: center; flex-wrap: wrap; } .recentNews li span{ opacity: 0.5; border: 1px solid #FFFFFF; border-radius: 15px; font-family: PingFangSC-Regular; font-size: 0.75em; color: #FFFFFF; letter-spacing: 0; font-weight: 400; padding: 0px 15px; margin-right: 20px; } .recentNews li div.publishTime{ margin-left: auto; margin-right: 20px; } /* 鏂伴椈涓栫晫涓績*/ article.newsWorld{ margin-top: 10px; padding-top: 0; } .panelContainer ul{ display: flex; justify-content: space-between; } .panelContainer li{ width: 45%; } /*鏂伴椈璇︽儏椤甸潰*/ .newsNav{ width:90%; max-width:1920px; min-width:1000px; margin:60px auto 30px; } .publishTime{ margin-left: auto; } .newsContentWrap{ padding-top: 10px; } .newsContentWrap header{ padding-left: 200px; background-color: #fff; padding-bottom: 10px; border-bottom: 1px solid #F7F9FC; } .newTitle h1{ min-width: 588px; line-height: 1.8; font-size: 1.75em; font-weight: bold; margin-bottom: 23px; padding-top: 30px; color: #0093DD; } .newShareWrap{ display: flex; justify-content: space-between; } .newShare{ display: flex; align-items: center; } .newShare a{ width:32px; height: 32px; display: block; margin: 0 6.5px; text-indent: -9999px; } .newShare a:first-child{ background-image: url(../images/newsInformation/icon/寰俊.svg); margin-left: 13px; } .newShare a:first-child:hover{ background-image: url(../images/newsInformation/icon/寰俊-hover.svg); } .newShare a:nth-child(2){ background-image: url(../images/newsInformation/icon/寰崥.svg); } .newShare a:nth-child(2):hover{ background-image: url(../images/newsInformation/icon/寰崥-hover.svg); } .newShare a:nth-child(3){ background-image: url(../images/newsInformation/icon/鎺ㄧ壒.svg); } .newShare a:nth-child(3):hover{ background-image: url(../images/newsInformation/icon/鎺ㄧ壒-hover.svg); } .newShare a:nth-child(4){ background-image:url(../images/newsInformation/icon/facebook.svg); } .newShare a:nth-child(4):hover{ background-image:url(../images/newsInformation/icon/facebook-hover.svg); } .newShare a:nth-child(5){ background-image:url(../images/newsInformation/icon/棰嗚嫳.svg); margin-right: 20px; } .newShare a:nth-child(5):hover{ background-image:url(../images/newsInformation/icon/棰嗚嫳-hover.svg); } .newsContentWrap header{ margin-bottom: 1px; } .newsContent{ background-color: #fff; padding-left: 200px; display: flex; justify-content: space-between; flex-wrap: wrap; } .newsContent section{ padding-top: 30px; padding-right: 50px; flex: 2 0 588px; } .newsContent section figure{ margin-top: 30px; margin-bottom: 30px; } .newsContent section figcaption{ text-align: center; margin-top: 5px; font-size: 0.75em; } .newsContent section img{ width: 100%; border: 1px solid #006699; padding: 15px; } .newsContent section h2{ position: relative; color: #0093DD; border-bottom: 1px dotted #0093DD; padding-bottom: 5px; margin-bottom: 30px; font-size: 1.5em; } .newsContent section h3{ color: #006699; font-size: 1em; } .newsContent section p{ margin: 15px 0; } .newsContent section .ImportentMessages{ margin-top: 30px; } .newsContent section .ImportentMessages h3{ color: #0093DD; margin-bottom: 15px; } .newsContent section ul{ margin:30px 0; } .newsContent section ul p{ text-align: center; } .newsContent section li{ height: 50px; background-color: #0093DD; color: #fff; display: flex; justify-content: space-between; align-items: center; } .newsContent section li:first-child{ background-color: #006699; border-top-left-radius: 5px; border-top-right-radius: 5px; } .newsContent section li:last-child{ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .newsContent section li span{ display: inline-block; width: 120px; height: 50px; line-height: 50px; text-align: center; } .newsContent section li span:first-child{ display: inline-block; width: 250px; height: 50px; line-height: 50px; text-align: center; } .newsContent section li:nth-child(even){ background-color: #efefef; color: #000; } .newsContent section li:hover{ background-color: #006699; color: #fff; } .newsContent aside{ flex: 1 0 282px; padding-top: 30px; padding-right: 25px; } .newsContent aside h2{ font-weight: 400; padding-bottom: 20px; border-bottom: 1px solid #E6EAEF; } .newsContent aside h2 span{ color: #0093DD; margin-left: 5px; } .newsContent aside figure{ padding: 20px; background-color:#F7F9FC ; margin: 15px 0; } figure img{ width: 100%; } .newsContent aside figure h3{ display: flex; justify-content: space-between; margin: 15px 0; } .newsContent aside figure h3 span{ color:#0093DD; border: 1px solid #0093DD; border-radius: 15px; padding: 5px 15px; font-size: 0.75em; font-weight: 400; } /* 鍦ㄧ嚎瀹㈡湇绯荤粺*/ .kefuxitong{ position: fixed; right: 0; top: 50%; width: 50px; height: 200px; background-color: #057DBA; color: #fff; padding: 5px; } .kefuxitong a,.kefuxitong a:visited{ color: #fff; text-decoration: none; }