/* CSS Document */ .wow { /* opacity: 0; */ transition-delay: 0.3s; } .pc { display: block; } .mob { display: none; } .wrap{ width:94%; max-width:1430px; padding:0 15px; margin:0 auto; } .header{ position:fixed; position: sticky; left:0; top:0; width:100%; min-width: 320px; background-color: #FFFFFF; z-index:10; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); transition:all .5s; } .searchBox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFFFFF; z-index: 1; display: none; } .searchCon { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 600px; height: 100%; margin: 0 auto; } .searchCon form { width: 100%; } .searchInput{ display: block; width: 100%; border: 1px solid rgba(0, 0, 0, 0.13); height: 40px; line-height: 38px; padding: 0 15px; padding-left: 40px; } .searchInput:focus{ border-color: #00459b; } .searchBtn{ display: block; position: absolute; left: 0; top: 50%; margin-top: -20px; width: 40px; height: 40px; background: url(../images/navIco_search.png) center center no-repeat; border: none; cursor: pointer; } .searchBtn:focus{ border: none; outline: none; } .searchClose{ display: block; width: 40px; height: 40px; background: url(../images/close.png) center center no-repeat; background-size: 20px auto; position: absolute; left: 100%; top: 50%; margin-top: -20px; margin-left: 10px; cursor: pointer; transition: all .3s ease; } .searchClose:hover{ transform: rotate(90deg); } .logo{ float:left; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:70px; transition:all .3s; } .logo a{ display:block; } .logo img{ height: 56px; transition:all .3s; } .nav{ float:right; } .navBox{ margin:0 auto; } .navList{ list-style: none; margin:0; text-align:right; } .navList>li { display: inline-block; vertical-align: top; margin-left: 40px; text-align: center; } .navList > li > a{ display: block; line-height: 70px; font-size: 16px; color: #3c3a3a; position: relative; transition: all .3s; } .navList > li > a > i{ display: inline-block; vertical-align: middle; width: 12px; height: 7px; background: url(../images/ico2.png) center center no-repeat; background-size: cover; margin-left: 5px; display: none; } .navList > li > a::before{ display: block; content: ""; width: 0; height: 2px; background-color: #00459b; position: absolute; left: 50%; bottom: 0%; transition:all .5s; } .navSub{ position:absolute; left:0; top: auto; width: 100%; text-align:left; z-index:2; background-color: #F6F6F6; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all .1s ease .2s; } .navSecond { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; max-width: 1400px; margin: 0 auto; } .navSecond > li { font-weight: normal; } .navSecond > li > a{ display: block; line-height: 50px; font-size: 16px; color: #3c3a3a; padding: 0 38px; } .navSecond > li > a:hover{ background-color: #005fc1; color: #FFFFFF; } .navThr { position: absolute; left: 0; top: auto; width: 100%; color: #3c3a3a; background-color: #FFFFFF; box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2); padding: 0 0 .2rem; display: none; } .navThird { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; list-style: none; overflow: hidden; } .navThird > li { width: 50%; padding: .2rem 0; padding: .1rem 0; border-bottom: 1px solid #e5e5e5; margin-bottom: -1px; } .navThird > li > a { display: block; font-size: 18px; color: #3c3a3a; font-weight: bold; line-height: 30px; margin-bottom: 5px; margin-bottom: 0; } .navFourth{ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -.1rem; margin-top: 5px; } .navFourth li{ padding: .1rem; padding: 0 .1rem; flex: 0 0 50%; } .navFourth li a{ font-size: 14px; color: #3c3a3a; line-height: 24px; transition: all .2s ease; } .navFourth li a:hover{ color: #005fc1; font-size: 16px; } .navThird>li:first-child { /* width: 100%; */ border-top: none; } /* .navThird>li:first-child .navFourth li { flex: 0 0 20%; } */ .navList > li.active > a .navList > li:hover > a{ color: #00459b; } .navList > li.active > a::before, .navList > li:hover > a::before { left: 0; width: 100%; } .navList > li:hover .navSub{ opacity: 1; visibility: visible; } .navSecond > li.active > a, .navSecond > li:hover > a{ background-color: #00459b; color: #FFFFFF; } .navSecond>li.active .navThr, .navSecond>li:hover .navThr{ display: block; } .noThird{ display: block; max-width: 1400px; margin: 0 auto; padding: .2rem 0 0; text-align: center; } .noThird li{ display: inline-block; vertical-align: top; } .noThird li a:hover{ font-size: 14px; text-decoration:underline; } .navRig { float: right; text-align: right; line-height: 70px; color: #3c3a3a; font-size: 0; margin-left: 25px; transition: all .3s; } .navRig li{ display: inline-block; vertical-align:middle; font-size:16px; position:relative; margin-left: 15px; } .navRig a, .navRig i, .navRig span{ display:inline-block; vertical-align:middle; color:#3c3a3a; line-height:38px; } .navRig li.navLine span { display: block; height: 38px; border-left: 1px solid #CDCDCD; } .navRig li.navSearch a{ width: 38px; height: 38px; background: url(../images/navIco_search.png) center center no-repeat; background-size: 20px auto; } .navRig li.navLogin{ background: url(../images/navIco_user.png) left center no-repeat; padding-left: 24px; } .navRig li.navLogin span{ color: #cdcdcd; } .navRig li.navLogin a:hover{ color: #00459b; text-decoration: underline; } .navRig li.navUser a{ width: 36px; height: 36px; border-radius: 50%; } .navRig li.navUser a img{ display: block; width: 100%; height: 100%; border-radius: 50%; } .navRig li.navBtn{ cursor:pointer; display:none;} .navBtn span{ width:25px; height:30px; position:relative; margin-left:5px;} .navBtn span b{ display:block; width:100%; height:2px; background:#00459b; position:absolute; left:0; top:calc((100% - 4px) / 2); transition:all .3s;} .navBtn span b:nth-child(1){ transform:translateY(8px) rotate(0deg);} .navBtn span b:nth-child(3){ transform:translateY(-8px) rotate(0deg);} .navBtn.active b:nth-child(1){ transform:translateY(0) rotate(45deg);} .navBtn.active b:nth-child(3){ transform:translateY(0) rotate(-45deg);} .navBtn.active b:nth-child(2){ opacity:0;} .header.no-show{ transform:translateY(-100%);} .mainBg{ position: relative; background-color: #FFFFFF; overflow: hidden;} .grayBg{ background-color: #f2f3f8; background-image: none;} .whiteBg{ background-color: #FFFFFF; background-image: none;} .text-center{ text-align: center;} /*footBg*/ .footBg { color: #3c3a3a; line-height: 30px; position: relative; z-index: 1; } .footBg a{ color:#3c3a3a; } .footBg a:hover{ color:#00459b; text-decoration: underline; } .ftTop{ margin: .4rem auto .7rem; } .ftNav{ float: left; width: 56%; list-style: none; display:flex; flex-wrap:wrap; justify-content: space-between; line-height:160%; padding-right:3%; } .ftNav li{ padding-right:15px; } .ftTit{ font-size:20px; line-height:180%; margin-bottom: .1rem; } .ftText p{ margin: 5px 0; } .ftText p a { color: #3c3a3a; } .ftRig{ float:right; width:44%; padding-left: 3%; display: flex; justify-content: space-between; border-left: 1px solid rgba(0, 0, 0, 0.2); } .ftCon{ width: 50%; flex-shrink: 0; } .ftCon h3{ font-size: 16px; line-height: 200%; font-weight: normal; } .ftCon p.ftTel{ font-size: 36px; color: #00459b; line-height: 42px; background: url(../images/ftTel.png) left 0 no-repeat; padding-left: 50px; margin: .1rem 0; } .ftWx{ width: 40%; flex-shrink: 0; line-height: 140%; } .wechat{ display: flex; justify-content: space-between; list-style: none; margin: 0 -5px; } .wechat li{ width: 112px; max-width: 50%; padding: 0 5px; } .wechat li p{ font-size: 14px; margin-top: 10px; text-align: center; } .wechat img{ display: block; width: 100%; height: auto; } .ftTip{ margin-top: .2rem; line-height: 23px; background: url(../images/saoIco.png) left 2px no-repeat; padding-left: 30px; } .ftBot{ border-top: 1px solid rgba(0,0,0,0.2); padding: .15rem 0 .32rem; } .copyright{ float: left; width: calc(100% - 120px); line-height: 30px; margin-top: 5px; } .follow{ float: right; width: 120px; text-align: center; list-style: none; font-size: 0; } .follow li{ display: inline-block; vertical-align: middle; max-width: 50%; padding: 0 5px; } .ftIco{ display: block; width: 39px; height: 39px; border-radius: 50%; } .ftIco1{ background: url(../images/ftIco1.png) center center #3c3a3a no-repeat; background-size: contain; } .ftIco2 { background: url(../images/ftIco2.png) center center #96c040 no-repeat; background-size: contain; } .hmTit { position: relative; font-weight: bold; text-align: center; } .hmTitCn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; font-size: 38px; color: #3c3a3a; line-height: 140%; } .hmTitEn { font-size: 100px; color: #edeff3; line-height: 100%; text-transform: uppercase; font-family: Arial; } .banIn{ position:relative; height:240px; /* margin-top: 70px; */ } .banIn .imgBg{ display: block; width: 100%; height: 100%; } .sortBg{ background-color: #FFFFFF; border-bottom: 1px solid #d4d4d4; } .sortList{ list-style:none; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -.15rem; } .sortList li{ position: relative; padding: 0 .15rem; } .sortList li a{ display: block; font-size: 16px; color: #3c3a3a; line-height: 30px; padding: .1rem; } .sortList li::before, .sortList li::after{ display: none; content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; } .sortList li::before{ border-bottom: 9px solid #d4d4d4; bottom: 0; } .sortList li::after{ border-bottom: 9px solid #f2f3f8; bottom: -1px; } .sortList2 li::after{ border-bottom-color: #FFFFFF; } .sortList3 li::after{ border-bottom-color: #008fe4; } .sortList li a:hover, .sortList li.active a{ color: #00459b; } .sortList li.active::before, .sortList li.active::after{ display: block; } .mainTop{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: .4rem -5px; } .mainTop li{ padding: 5px; } .mainTop li a{ display: block; font-size: 16px; color: #3c3a3a; line-height: 24px; border: 1px solid #C2C2C2; padding: .1rem .16rem; min-width: 1.4rem; text-align: center; } .mainTop li a:hover{ color: #00459b; border-color: #00459b; } .mainTop li.active a{ color: #FFFFFF; background-color: #00459b; border-color: #00459b; } .mainTop2{ margin-left: 0; margin-right: 0; overflow: hidden; } .mainTop2 li{ position: relative; padding: 0; } .mainTop2 li + li::before{ display: block; content: ""; width: 1px; height: 16px; background-color: #c2c2c2; position: absolute; left: -1px; top: 50%; margin-top: -8px; } .mainTop2 li a{ font-size: 16px; border: none; padding: 0 15px; color: #000000; line-height: 1.4; } .mainTop2 li.active a { background-color: transparent; color: #00459b; } .page{ text-align:center; margin:.6rem 0; font-size:0;} .page a,.page span{ display:inline-block; vertical-align:middle; min-width: .3rem; line-height:24px; padding: .03rem .1rem; border: 1px solid #dadada; font-size:14px; color:#3c3a3a; margin:.02rem 0.05rem;} .page a.active,.page span.active{ background-color:#00459b;color: #FFFFFF; cursor:no-drop;} .page a:not(.active):hover{ background-color:#00459b; color: #FFFFFF;} .tip{ border-radius:10px; background:rgba(0,0,0,0.7); color:#FFFFFF; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:none; z-index:20; line-height:30px; padding:.1rem .2rem;} .anchor{ display: block; padding-top: 100px;margin-top: -100px;} .onLine{ list-style: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 70px; border-top: 1px solid #f0f2f8; background-color: #FFFFFF; text-align: center; font-size: 12px; color: #3c3a3a; z-index: 5; } .onLine li{ position: relative; border-left: 1px solid #f0f2f8; border-right: 1px solid #f0f2f8; } .onLine li a{ position: relative; display: block; padding: 10px 0; color: #3c3a3a; } .onLine li a::before{ display: block; content: ""; position: absolute; left: 10%; top: 0; width: 80%; height: 1px; background-color: #f0f2f8; } .onLine li:first-child a::before{ display: none; } .onIco{ display: block; margin: 0 auto 5px; width: 30px; height: 30px; overflow: hidden; } .onIco img{ display: block; max-width: 100%; height: auto; margin: 0 auto; } .onCon{ position: absolute; right: 100%; top: 0; background-color: #FFFFFF; border: 1px solid #f0f2f8; padding: .09rem; white-space: nowrap; font-size: 14px; color: #000; display: none; } .onCon img{ display: block; width: 100px; height: auto; margin: 0 auto 2px; } .onLine li a:hover .onIco img{ animation: swing 1s linear; } .onLine li a:hover .onCon{ display: block; } #top{ border: none; background-color: #96c040; } #top a{ color: #FFFFFF; border: none; } #top a::before{ display: none; } .more{ display: block; width: 280px; line-height: 42px; font-size: 16px; color: #FFFFFF; border-radius: 22px; background: #00459B; text-align: center; margin: .6rem auto; transition: all .3s; } .more:hover{ background-color: #96c040; color: #FFFFFF; } .anchor{ display: block; margin-top: -70px; padding-top: 70px; } @media (min-width:1200px){ .navSub{ display:block !important;} } @media (max-width:1600px){ .wrap{ max-width: 1230px; } .logo img{ height: 50px; } .navList > li{ margin-left: 25px; } .navList > li > a{ font-size: 15px; } .navRig li{ font-size: 14px; margin-left: 10px; } .navRig li.navLogin{ background-size: 14px auto; } .navRig li.navSearch a{ width: 32px; height: 32px; background-size: 18px auto; } .navSecond, .navThird{ max-width: 1200px; } .navSecond > li > a{ font-size: 15px; line-height: 40px; padding: 0 25px; } .navThird > li{ padding: .12rem 0; padding: 0.1rem 0; } .navThird > li > a{ font-size: 16px; } .navFourth li a{ font-size: 12px; } .navFourth li a:hover{ font-size: 13px; } .ftTop{ margin: .4rem auto; } .ftNav{ font-size: 12px; } .ftTit{ font-size: 16px; } .ftCon p.ftTel{ font-size: 26px; background-size: 30px auto; padding-left: 35px; line-height: 30px; } .ftBot{ padding: .15rem 0 .2rem; } .ftIco{ width: 32px; height: 32px; } .onLine{ width: 60px; } .onLine li a{ padding: 8px 0; } .onIco{ width: 24px; height: 24px; } .onCon img{ width: 80px; } .hmTitEn{ font-size: 70px; } .hmTitCn{ font-size: 28px; } .mainTop li a{ font-size: 15px; line-height: 20px; } .sortList li a{ font-size: 15px; } } @media (max-width:1400px){ .navBtn span b:nth-child(1){ transform:translateY(6px) rotate(0deg);} .navBtn span b:nth-child(3){ transform:translateY(-6px) rotate(0deg);} } @media (max-width:1200px){ .wrap{ width: 100%; max-width: 970px; } .navBg{ position:fixed; right:-100%; top:0; width:100%; height:100vh; background:#00459b; opacity:.8; z-index:2; transition:all .5s;} .navBox{ position:fixed; right:-66%; top:0; height:100vh; width:66%; background:#FFFFFF; overflow:hidden; z-index:2; transition:all .5s;} .navList{ text-align:left; height:calc(100% - 70px); overflow-y:auto; display: block;} .navList > li{ display:block; margin:0; text-align:left;} .navList > li > a{ color:#333333; height:auto; line-height:46px; padding:0 .3rem; border-bottom:1px solid #f2f2f2;} .navList > li > a::before{ display:none;} .navList > li > a:after{ height:1px; background:#00459b;} .navList > li > a > i{ float:right; width:46px; height:46px; background:url(../images/ico2.png) center center no-repeat;} .navList > li.active > a{ color:#00459b;} .navList > li.cur > a,.navList > li > a.cur{ color:#00459b;} .navList > li.cur > a > i,.navList > li > a.cur > i{ transform:rotate(180deg); transition:all .3s;} .navList > li:hover .navSub{ opacity:1; visibility:visible; margin-top:0;} .navSub{ width:100%; min-width:0; position:static; transform:none; padding:.2rem .2rem .2rem .5rem; border-top-width:1px; margin:0; opacity:1; visibility:visible; display:none; transition:none; background:#F0F0F0; box-shadow:none; min-height:0;} .navSub:after{ display:none;} .navList > li.dropdown > a > i{ display: block; } .navSecond{ display: block; } .navSecond > li > a{ font-size: 15px; line-height: 32px; padding: 0; } .navSecond > li:hover > a{ background-color: transparent; color: #00459b; } .navThr{ display: block; position: static; padding: .2rem; margin: .2rem 0; } .navThird{ display: block; } .navThird > li{ width: 100%; } .navThird > li > a{ font-size: 14px; line-height: 24px; } .navFourth li{ padding: 0 .1rem; flex: auto !important; } .navRig{ margin-left: 0; } .navRig li{ margin-left: .1rem; } .navRig li.navLine{ display: none; } .navRig li.navBtn{ display:inline-block;} .navTop{ height:70px; background:#00459b; padding:0 .3rem; display:flex; justify-content:flex-end; align-items:center;} .navClose{ width:25px; height:30px; position:relative; cursor:pointer; margin-right:10px;} .navClose span{ display:block; width:100%; height:2px; background:#FFFFFF; position:absolute; left:0; top:calc((100% - 4px) / 2); transition:all .3s;} .navClose span:nth-child(1){ transform:translateY(0) rotate(45deg);} .navClose span:nth-child(3){ transform:translateY(0) rotate(-45deg);} .navClose span:nth-child(2){ opacity:0;} .navBg.active,.navBox.active{ right:0;} .navBox.active{ box-shadow:-1px 0 5px #00459b;} /* .banner.active,.mainBg.active,.footBg.active,.banIn.active{ transform:translateX(-60%);} */ .ftNav{ float: none; width: 100%; padding: 0; } .ftRig{ float: none; width: 100%; border: none; border-top: 1px solid rgba(0, 0, 0, 0.2); margin-top: .3rem; padding: 0; padding-top: .3rem; } .ftCon{ width: calc(100% - 200px); } .ftWx{ width: 180px; margin-top: .3rem; } .ftTip{ background-position: left 4px; font-size: 12px; line-height: 20px; margin-top: .1rem; } .onLine{ width: 50px; top: auto; bottom: .1rem; transform: translateY(0); background-color: rgba(255,255,0255,0.9); } .onLine li a p{ display: none; } .onCon{ top: auto; bottom: 0; background-color: rgba(255,255,0255,0.9); } .hmTitEn{ font-size: .56rem; } .hmTitCn{ font-size: .24rem; } .banIn, .banIn .imgBg{ height:200px; } .more{ width: 240px; line-height: 38px; font-size: 14px; } } @media (max-width:991px){ .logo{ height:60px; } .logo img{ height: 40px; } .navRig{ line-height:60px;} .navRig a, .navRig i, .navRig span{ line-height: 34px; } .navTop{ height:60px; } .navList{ height:calc(100% - 60px); } .navList > li > a{ font-size:15px; } .searchInput{ height: 32px; line-height: 30px; padding-left: 32px; } .searchBtn, .searchClose{ width: 32px; height: 32px; margin-top: -16px; background-size: 16px auto; } .banIn{ /* margin-top: 60px; */ } .banIn, .banIn .imgBg{ height:1.8rem; } .sortList{ padding: .15rem 0; margin: 0 -.02rem; } .sortList li{ padding: 0 .02rem; } .sortList li a{ padding: 0 .1rem; line-height: 180%; } .sortList li::before, .sortList li::after{ display: none !important; } } @media (max-width:767px){ .searchCon{ padding: 0 15px; padding-right: 50px; } .searchBtn{ left: 15px; } .searchClose{ left: auto; right: 15px; } .copyright{ float: none; width: 100%; text-align: center; } .follow{ float: none; width: 100%; margin-top: 10px; } } @media (max-width:640px){ .footBg{ padding-bottom: 41px; } .ftNav{ display: block; } .ftNav li{ width: 100%; margin: 10px 0; } .ftTit{ font-size: 15px; margin: 0; } .ftText{ margin: 0 -3px; } .ftText p{ display: inline-block; vertical-align: middle; padding: 0 3px; margin: 0; } .onLine{ left: 0; width: 100%; bottom: 0; display: flex; } .onLine li{ flex: 1; } .onIco{ margin: 0 auto; } .onCon{ bottom: 100%; right: auto; left: 50%; transform: translateX(-50%); } .hmTitEn{ font-size: .64rem; } .hmTitCn{ font-size: .32rem; } .sortList li a{ font-size: 14px; } .mainTop{ margin: .4rem -2px; } .mainTop li{ padding: 2px; } .mainTop li a{ font-size: 12px; } .more{ width: 200px; } .page a, .page span{ margin: 1px; } } @media (max-width:460px){ .logo{ height: 50px; } .logo img{ height:35px; } .navRig{ line-height:50px; } .navRig li.navUser a{ width: 30px; height: 30px; } .navBtn span{ width:20px; } .navTop{ height:50px; } .ftRig{ display: block; } .ftCon{ width: 100%; } .ftCon p.ftTel{ font-size: 22px; padding-left: 30px; background-size: 24px auto; background-position: left 3px; } .ftWx{ width: 100%; max-width: 180px; margin: .3rem auto 0; } .copyright{ font-size: 12px; line-height: 140%; } .ftIco{ width: 28px; height: 28px; } .banIn{ /* margin-top: 50px; */ } .sortList li a{ font-size: 13px; } .mainTop li a{ font-size: 12px; } .more{ width: 100%; line-height: 32px; font-size: 12px; } .page a, .page span{ display: none; line-height: 20px; } .page a:nth-child(1), .page a:nth-child(2), .page a:nth-last-child(1), .page a:nth-last-child(2){ display: inline-block; padding: .1rem .2rem; } }