@import "icon/iconfont.css"; @font-face { font-family: DINNextLTPro; font-weight: 200; src: url("font/DINNextLTPro/DINNextLTPro-UltraLight.ttf"); } @font-face { font-family: DINNextLTPro; font-weight: 300; src: url("font/DINNextLTPro/DINNextLTPro-Light.ttf"); } @font-face { font-family: DINNextLTPro; font-weight: 400; src: url("font/DINNextLTPro/DINNextLTPro-Regular.ttf"); } @font-face { font-family: DINNextLTPro; font-weight: 500; src: url("font/DINNextLTPro/DINNextLTPro-Medium.ttf"); } @font-face { font-family: DINNextLTPro; font-weight: 700; src: url("font/DINNextLTPro/DINNextLTPro-Bold.ttf"); } @font-face { font-family: DINNextLTPro; font-weight: 900; src: url("font/DINNextLTPro/DINNextLTPro-Heavy.ttf"); } @font-face { font-family: Source-Medium; src: url("font/SourceHanSansCN/SourceHanSansCN-Medium.otf"); } @font-face { font-family: Source-Regular; src: url("font/SourceHanSansCN/SourceHanSansCN-Regular.otf"); } @font-face { font-family: Source-Normal; src: url("font/SourceHanSansCN/SourceHanSansCN-Normal.otf"); } body{ margin:0; font-family: DINNextLTPro,Source Han Sans CN; } body textarea,body input{ font-family: DINNextLTPro,Source Han Sans CN; } a{ text-decoration: none; } .midBoxCss{ /*width: 1242px;*/ width: 1200px; margin-left: auto; margin-right: auto; position: relative; } body>.header{ height: 55px; background: white; display: flex; align-items: center; justify-content: space-evenly; padding:0 55px; /*position: relative;*/ box-shadow: 0px 2px 19px 1px rgba(148, 148, 148, 0.1); position: fixed;top:0;left:0;right:0;z-index: 22; } body>.header .logo{ display: inline-block; background: url("img/logo.png") no-repeat center; background-size: contain; width: 163px; height: 100%; } .closeSearchBox{ width: 15px; } #more-honor-box>.midBoxCss{ position: initial; } .rightBtnBox{ position: fixed; right: 20px; bottom:15vh; z-index: 22; } .rightBtnBox #toTopBtn{ width: 40px; height: 40px; box-shadow: 0 2px 8px rgb(28 31 35 / 3%), 0 16px 48px 8px rgb(28 31 35 / 8%); display: flex; align-items: center; justify-content: center; cursor: pointer; background: white; border-radius: 50%; } .rightBtnBox #toTopBtn:hover{ color:#0067A4; } .mobile-header{ display: none; height: 55px; background: white; position: fixed; left: 0; right: 0; top:0; z-index: 233; box-shadow: 0px 2px 19px 1px rgba(148, 148, 148, 0.1); } .mobile-header-holder{ height: 55px; display: none; } .mobile-header>div{ height: 100%; display: flex; align-items: center; justify-content: space-between; } .head-menu{ background: url("img/menu.png") no-repeat center; background-size: contain; width: 20px; height: 100%; display: inline-block; } #headMenuList{ position: fixed; left: 0; right: 0; top:55px; bottom:0; display: none; background: white; z-index: 233; overflow-y: auto; } .mobile-header .logo{ display: inline-block; background: url("img/logo.png") no-repeat center; background-size: contain; width: 153px; height: 100%; } .headMenuBox{ border-bottom:1px solid #DDDDDD; font-size: 16px; display: flex; align-items: center; justify-content: space-between; padding:0 13px; height: 40px; color:#333333; } .headMenuLi{ background:#F9F9F9; overflow: hidden; display: none; } .headMenuLi>a{ font-size: 15px; padding-left:20px; display: block; color:#292e33; margin-top:10px; } .headMenuLi>a:last-child{ margin-bottom:10px; } .rightArrowDown{ transition: 0.15s; } .showLi>.headMenuBox>.rightArrowDown{ transform: rotate(180deg); } body>.header .navBox{ display: flex; align-items: center; justify-content: space-between; } body>.header .navBox>div{ /*position: relative;*/ height: 100%; margin-right: 70px; } body>.header .navBox>div:last-child{ margin-right: 0; } body>.header .navBox>div>a{ font-size: 14px; font-weight: 500; color: #4D4D4D; } body>.header .navBox>div:hover>a{ color:#0067A4; } body>.header .navBox>div>a.active{ color:#0067A4; } .header .service-box{ margin-top:0; padding-bottom:0; color:#535353; } .header .service-box>div{ background-size: auto 54px; font-size: 12px; padding-top:65px; font-weight: 500; } .header-news-list{ display: flex; flex-direction: column; justify-content: flex-end; } .header-news-list>a{ font-size: 12px; color:#535353; position: relative; margin-top:10px; } .header-news-list>a>div{ max-width: 600px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-news-list>a:before{ content:''; position: absolute; background: #0067a4; height: 14px; margin-left: -10px; margin-top: 3px; width: 2px; } .header-news-list2 a{ font-size: 12px; color:#535353; position: relative; margin-top:10px; } .header-news-list2>div{ display: flex; flex-direction: column; margin-left: 100px; } .header-news-list2 a:before{ content:''; position: absolute; background: #0067a4; height: 14px; margin-left: -10px; margin-top: 3px; width: 2px; } .gywmLeft.sub-nav-list a{ line-height: 10px; margin-top:18px; } .header-news-list2{ display: flex; align-items: flex-end; } .fzlc-line{ border-bottom:2px solid #0067a4; width: 462px; position: relative; margin-right: -28px; } .head-date>span{ position: relative; color:#0067a4; font-size: 14px; font-weight: 500; margin-right: 22px; } .head-date>span:after{ content:''; display: block; width: 6px; height: 6px; background: #0067a4; margin-top:18px; border-radius: 50%; margin-left: auto; margin-right: auto; position: absolute; left: 0; right: 0; } .head-date{ margin-bottom:20px; } .head-date>span:last-child{ margin-right: 0; } .service-box{ display: flex; align-items: center; justify-content: space-between; margin-top:120px; padding-bottom:150px; } .service-box>div{ text-align: center; padding-top:160px; font-size:28px; color:#535353; font-weight: bold; background-repeat: no-repeat; background-position-x: center; background-position-y: top; min-width: 142px; } .service-box .service-1{ background-image: url("img/service-1.png"); } .service-box .service-2{ background-image: url("img/service-2.png"); } .service-box .service-3{ background-image: url("img/service-3.png"); } .service-box .service-4{ background-image: url("img/service-4.png"); } .head-honor{ display: flex; align-items: center; justify-content: flex-end; } .head-honor>img{ display: block; width: auto; height: 110px; margin-left: 10px; } .header-news-list>a:hover{ color:#0667ac; } .right-icon-group{ display: flex; align-items: center; justify-content: flex-end; position: relative; height: 100%; } .right-icon-group>a.language,.right-icon-group>div.search,.right-icon-group>div.msg{ cursor: pointer; margin-left: 24px; } .right-icon-group .language{ font-size: 14px; font-weight: 500; color: #1171AA; background: url("img/language.png") no-repeat center; background-size: 16px auto; background-position-x: left; height: 100%; padding-left: 20px; box-sizing: border-box; width: 40px; transition: 0.3s; display: flex; align-items: center; line-height: initial; } .language .new{ font-size: 15px; display: none; } .language:hover .new{ display: initial; } .language:hover .now{ display: none; } .right-icon-group .search{ height: 100%; width: 20px; background: url("img/search.png") no-repeat center; background-size: 16px auto; } .right-icon-group .msg{ height: 100%; width: 21px; background: url("img/message.png") no-repeat center; background-size: 21px auto; } #head-menu-btn{ width: 20px; } #head-menu-btn .icon-remove{ font-weight: bold; color:#0067a4; } body>.footer{ /*display: flex;*/ /*justify-content: space-between;*/ padding:50px; background:linear-gradient(222deg, #043654, #0067A4); /*background-image:url("img/footer-right.png");*/ /*background-repeat: no-repeat;*/ /*background-size: 119px 98px;*/ align-items: flex-start; position: relative; /*background-position-y: 50px;*/ /*background-position-x: calc(100% - 50px);*/ } .footer-first{ display: flex; justify-content: space-between; } .footer-right{ background: url("img/footer-right.png") no-repeat; width: 81px; min-width: 81px; height: 65px; background-size: cover; /*display: none;*/ } .footer-left{ display: flex; align-items: flex-start; margin-bottom:120px; } .footer-left>div{ margin-right: 105px; } .footer-left>div:last-child{ margin-right:0; } .footer-left .title{ font-size: 21px; font-weight: bold; color: #FFFFFF; margin-bottom:30px; white-space: nowrap; } .footer-left ul{ margin:0; list-style: none; padding:0; } .footer-left ul a{ font-size: 12px; font-weight: 400; color: #D3E4EF; } .footer-left ul li{ font-size: 13px; color: #D3E4EF; line-height: 29px; } .footer-left ul a:hover{ color:white; } .footer .qrCode{ font-size: 12px; font-weight: 400; width: 81px; padding-top:98px; color: #FFFFFF; background: url("img/qrCode.png") no-repeat top; background-size: contain; text-align: center; } .footer-logo-title{ font-size: 16px; font-weight: bold; color: #FFFFFF; margin-bottom:20px; } .new-footer-bottom{ display: flex; justify-content: space-between; align-items: flex-end; } .footer-logo{ background: url("img/footer-logo.png") no-repeat center; background-size: contain; width: 177px; height: 27px; } .footer .beian{ position: absolute; left: 0; right: 0; text-align: center; bottom:12px; color: #D3E4EF; font-size: 12px; } .footer .beian a{ margin-left: 20px; color: #D3E4EF; } .footer .beian a:hover{ color:white; } .page-banner{ /*height: 802px;*/ } .message-board{ position: fixed; height: 100vh; width: 0; /*width: 340px;*/ background: #0067A4; display: flex; align-items: center; justify-content: center; right: 0; top:0; transition: 0.5s; overflow: hidden; z-index: 233; } .message-board.on{ width: 340px; } .message-board>div{ width: 274px; min-width: 274px; opacity: 0; transition: 0.4s; height: 372px; } .message-board.on>div{ opacity: 1; } .message-board .title{ font-weight: bold; font-size: 23px; color:white; padding-left: 15px; margin-bottom: 8px; } .message-board>div>div>div{ margin-bottom:8px; } .message-board input{ outline: none; height: 40px; box-sizing: border-box; padding:15px 12px; font-size: 12px; border-radius: 2px; width: 100%; border:none; } .message-board textarea{ resize: none; outline: none; height: 140px; box-sizing: border-box; padding:15px 12px; width: 100%; font-size: 12px; border-radius: 2px; border:none; } .message-board input::placeholder,.message-board textarea::placeholder{ color:#0067a4; } #boardMsg{ display: flex; align-items: center; justify-content: center; font-size: 13px; color:white; cursor: pointer; height: 32px; background-color: #043654; background-image: url("img/send-btn.png"); background-repeat: no-repeat; background-size: auto 18px; background-position:90px center; padding-left: 10px; } .message-board .closeBtn{ position: absolute; cursor: pointer; background: url("img/close.png") no-repeat; background-size: contain; width: 36px; height: 36px; top:36px; right: 31px; } .message-board .closeBtn:hover{ transform: rotate(360deg); transition: 1s; } .sub-nav{ height: 0; box-sizing: border-box; transition: 0.5s; overflow: hidden; background: white; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top:15px; /*padding:35px 28px 20px 28px;*/ padding:0 28px; display: flex; justify-content: space-between; z-index: 22; } .navBox>div:hover .sub-nav{ height: 212px; padding-top:20px; padding-bottom:20px; box-shadow: -3px 6px 10px 1px rgba(148, 148, 148, 0.1); /*overflow: visible;*/ } .navBox>div:hover .sub-nav:before{ content:''; position: absolute; display: block; width: 100%; left: 0; height: 25px; top: -15px; background: white; } .sub-nav-list{ background: url("img/nav-logo.png") no-repeat; background-size: 40px 30px; min-width: 80px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .sub-nav-list a{ color:#4d4d4d; font-size: 12px; margin-top:4px; } .sub-nav-list a.on{ color:#0067a4; } .sub-product-list img{ width: auto; height: 130px; margin-left: 25px; transition: 0.3s; } .sub-product-list>a:hover img{ transform: scale(1.1); position: relative; z-index: 1; } .sub-product-list{ display: flex; align-items: flex-end; } .page-box{ margin-top:105px; display: flex; align-items: center; justify-content: center; } .page-box>span:first-child{ display: none; } .page-box>a,.page-box>span{ width: 25px; height: 25px; border: 1px solid #535353; border-radius: 2px; font-size: 12px; font-weight: 500; color: #535353; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin-left: 5px; padding-top:3px; } .page-box>a:hover{ transition: 0.3s; background:#0067A4; border-color: #0067A4; color:white; } .page-box>span.current{ width: 25px; height: 25px; border: 1px solid #0067A4; border-radius: 2px; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #0067A4; color:white; margin-left: 5px; } .page-box>.disabled{ display: none; } .searchInputBox{ position: absolute; /*display: none;*/ width: 0; overflow: hidden; /*z-index: 101;*/ box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%); transition: 0.5s; background: white; /*border-radius: 40px;*/ /*width: 252px;*/ height: 38px; right: 40px; display: flex; align-items: center; } .searchInputBox.show{ width: 252px; } .searchInputBox input{ border:none; outline: none; width: 158px; height: 100%; box-sizing: border-box; padding-left:20px; position: relative; z-index: 2; background: white; } .closeSearchBox{ cursor: pointer; } .searchFgx { position: absolute; width: 1px; height: 25px; background: #dfdfdf; right: 50px; } .searchInputBox .search{ position: absolute; right: 64px; } #searchBtn{ cursor: pointer; } .mobile-btn{ height: 100%; display: inline-flex; align-items: center; } .mobile-btn .right-icon-group>a.language,.mobile-btn .right-icon-group>div.search,.mobile-btn .right-icon-group>div.msg{ margin-left: 0; margin-right: 8px; } .mobile-btn .right-icon-group{ margin-right: 12px; } .mobile-btn .right-icon-group>a.language:hover .now{ display: initial; } .mobile-btn .right-icon-group>a.language:hover .new{ display: none; } /*鑷€傚簲寮€濮?/ @media screen and (max-width: 768px){ /*鎼滅储椤?/ .right-260{ display: none!important; } .section{ width: 92%!important; min-width: auto!important; margin-left: auto; margin-right: auto; } .left-auto{ margin:0; } .left-auto{ margin-right: 0!important; } .n-list li .note b{ width: 80px; height: 80px; } .n-list li .note p{ font-size: 14px; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; line-height: 22px; height: 85px; } .page-box>.digg>span:first-child{ display: none; } .section .page-box{ margin:25px 0 ; } /*.left-auto{*/ /* width: 92vw;*/ /*}*/ } .searchInputBox .search{ height: 100%; width: 20px; background: url(img/search.png) no-repeat center; background-size: 16px auto; } @media screen and (max-width: 768px){ #pcHeaderHolder{ display: none; } .rightBtnBox{ display: none; } .mobile-header .searchInputBox{ right: 3%!important; top:8px!important;; height: 38px!important;; } .mobile-header .searchInputBox.show{ width:94%; } .mobile-header .searchInputBox input{ width: 72%; } .message-board{ z-index: 2334; } .message-board.on{ width: 100vw; } body>.header{ display: none; } .midBoxCss{ width: 92%; } .footer-left{ flex-wrap: wrap; margin-bottom:0; justify-content: space-between; } .footer-left>div{ margin-right: 0; margin-bottom:20px; } .footer-left>div:first-child{ width: 100%; } .footer-left>div:nth-child(2){ margin-right: 35px; } .footer-left>div:nth-child(3){ width: 119px; } .footer .qrCode{ margin:0 auto; } body>.footer{ padding:20px 4%; padding-bottom:50px; /*background-position-y:20px;*/ /*background-position-x: 96%;*/ } .mobile-header,.mobile-header-holder{ display: block; } .footer-right{ /*display: none;*/ position: absolute; right: 4%; } } /*鑷€傚簲缁撴潫*/