@charset "UTF-8"; body{ overflow-x: hidden; } header{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.25rem 0.6rem; animation: 0.8s ease .3s 1 normal backwards running fadeInDown; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 9; } .logo a{ display: block; width: auto; height: auto; } .logo a img{ display: block; width: auto; height: 0.69rem; } /* 导航 */ .nav { width: 60%; } .nav ul{ width: 100%; display: flex; align-items: center; justify-content: flex-end; } .nav ul>li{ position: relative; } .nav ul>li>a{ display: block; width: 1.3rem; font-size: 0.18rem; font-weight: 500; letter-spacing: 0px; line-height: 0.42rem; border-radius: 0.21rem; color: rgba(255, 255, 255, 1); text-align: center; } .nav ul>li ol{ display: none; position: absolute; width: 100%; height: auto; left: 0%; z-index: 99; top: 100%; padding: 0.15rem 0; background: rgba(255,255,255,0.3); border-radius: 5px; margin-top: 10px; } .nav ul>li ol::before{ display: block; content: ""; width: 100%; height: 10px; background: transparent; position: absolute; left: 0; bottom: 100%; } .nav ul>li ol li a{ display: block; width: 100%; font-size: 0.16rem; color: #fff; text-align: center; line-height: 0.4rem; } .nav ul>li ol li a:hover{ color: #e0a23f; } .nav ul>li>a:hover{ background: #e0a23f; color: #ffffff; } .nav ul>li>a.hover{ font-weight: bold; background: #e0a23f; color: #ffffff; } .linkTop{ display: flex; float: right; margin-bottom: 0.1rem; align-items: center; justify-content: flex-end; } .linkTop div a{ font-size: 0.16rem; line-height: 0.34rem; color: #ffffff; padding-left: 30px; margin: 0 0.18rem; position: relative; } .linkTop div a:nth-of-type(1){ background: url(../img/lingTopIcon1.png) no-repeat left center; } .linkTop div a:nth-of-type(2){ background: url(../img/lingTopIcon2.png) no-repeat left center; } .linkTop a.en{ display: block; width: 0.32rem; border-radius: 100%; border: 1px solid #ffffff; font-size: 0.16rem; line-height: 0.32rem; color: rgba(255, 255, 255, 1); text-align: center; float: left; margin-left: 0.14rem; } .linkTop p.search{ width: 0.32rem; height: 0.32rem; border-radius: 100%; border: 1px solid #ffffff; background: url(../img/search.png) no-repeat center; cursor: pointer; float: left; position: relative; margin-left: 0.18rem; } .linkTop div a::before{ display: block; content: ""; width: 1px; height: 84%; background: rgba(255,255,255,0.2); position: absolute; right: -0.18rem; top: 13%; } .linkTop div a:hover{ color: #e0a23f; } .linkTop a.en:hover{ border: 1px solid #e0a23f; color: #e0a23f; } .header_m{ display: none; } /* 底部 */ footer{ background: #1499b7; padding: 0.4rem 0; position: relative; } footer::before{ display: block; content: ""; width: 28%; height: 0.4rem; background: #1499b7; position: absolute; left: 0; bottom: 100%; } footer::after{ display: block; content: ""; border-left: 0.2rem solid #1499b7; border-bottom: 0.2rem solid #1499b7; border-right: 0.2rem solid transparent; border-top: 0.2rem solid transparent; position: absolute; left: 28%; bottom: 100%; } .footSub{ display: flex; justify-content: space-between; align-items: center; } .footSub ul{ display: flex; } .footSub ul li{ margin-right: 0.4rem; } .footSub ul li p{ padding-left: 0.2rem; position: relative; } .footSub ul li p::before{ display: block; content: ""; width: 0.08rem; height: 0.08rem; background: #ffffff; border-radius: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .footSub ul li,.footSub ul li a{ font-size: 0.16rem; line-height: 0.4rem; color: #ffffff; } .footSub ul li a{ display: inline-block; margin-right: 0.3rem; } .footSub ul li a:last-of-type{ margin-right: 0; } /* 搜索 */ .layer {width: 100%;height: 100%;background: rgba(6,28,26,0.75);position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;opacity: 0;visibility: hidden;transition: all 0.3s ease-out 0s;} .layer.showdiv { opacity: 1; visibility: visible; } .layer .close {position: absolute;right: 100px;top: 100px;width: 60px;height: 60px;text-align: center;line-height: 70px;cursor: pointer;font-size: 0;transition: all 0.3s ease-out 0s;} .layer .close:before,.layer .close:after{content:'';width: 100%;height: 2px;display:block;position:absolute;background: #fff;transition:1s;transform: rotate(45deg);top: 24px;} .layer .close:before{transform: rotate(-45deg);} .layer .close:hover{transform: rotate(90deg);} .layer .search_box {height: 55px;line-height: 55px;width: 50%;transform: translateY(-50px);opacity: 0;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;} .layer.showdiv .search_box { transform: none; transition: all 0.5s ease-out 0s; opacity: 1; font-size: 0; } .layer .search_box .kw {width: 85%;height: 100%;background: #fff;padding: 0 15px;font-size: 16px;border-radius: 0;float: left;margin: 0;border: none;box-sizing: border-box;height:55px;} .layer .search_box .ok {background: #15a0bf;color: #fff;width: 15%;height: 100%;text-align: center;font-size: 18px;cursor: pointer;border-radius: 0;float: left;position: absolute;top: 0;right: 0;} /* 媒体查询 */ @media only screen and (max-width: 1700px){ .nav ul>li>a{ width: 1.2rem; } } @media only screen and (max-width: 1540px){ header{ padding: 0.2rem 0.3rem!important; } .nav ul>li>a{ width: 1.08rem; } } @media only screen and (max-width: 1540px){ .w1500{ width: 100%; padding: 0 0.3rem; box-sizing: border-box; } } @media only screen and (max-width: 1440px){ .linkTop p.search{ background-size: 60% auto; } } @media only screen and (max-width: 1040px){ /* 移动端顶部 */ header{ display: none; } .header_m{ display: block; } .m_Top{ display: flex; padding: 20px; justify-content: space-between; align-items: center; } .logo a img{ display: block; width: auto; height: 58px; } .linkTop a{ display: block; float: left; width: 30px; line-height: 28px; font-size: 15px; color: #ffffff; text-align: center; margin-right: 10px; border: 1px solid #ffffff; border-radius: 100%; box-sizing: border-box; } .linkTop { margin-bottom: 0!important; } /* 移动端导航按钮 */ .menu1 { width: 36px; height: auto; display: block; overflow: hidden; z-index: 999999999; cursor: pointer; margin-top: 2px; } .menu1 span { float: left; width: 100%; background: #fff; transition: all 0.4s ease; margin-top: 10px; height: 2px; } .menu1 span:first-child { margin-top: 0; } .menu1.open span:nth-child(1) { transform: rotate(45deg); margin-top: 12px; } .menu1.open span:nth-child(2) { transform: rotate(-45deg); margin-top: -2px; } .menu1.open span:nth-child(3) { opacity: 0; } body.navshow { overflow: hidden; position: fixed; width: 100%; top: 0px; left: 0px; margin: 0; } .header_m { display: block; width: 100%; position: relative; top: 0; z-index: 9999; box-sizing: border-box; background: #15a0bf; box-shadow: 0 0 10px 2px rgba(0,0,0,0.16); } .m_nav { width: 100vw; height: calc(100% - 98px); position: fixed; top: 98px; left: 0; background: rgba(0, 0, 0, 0.5); z-index: -1; opacity: 0; visibility: hidden; transition: all 0.5s; display: block; overflow: auto; box-sizing: border-box; } .m_nav.active { visibility: visible; opacity: 1; z-index: 99999999; } .m_nav ul{ position: absolute; transition: right 0.3s ease; right: 0; top: 46px; left: auto; width: 420px; height: calc(100% - 46px); z-index: 99999; background: #fff; margin: 0; overflow: auto; } .m_nav ul li { height: auto; width: 100%; position: relative; border-bottom: 1px solid #ccc; float: none; text-align: left; padding: 0; line-height: 54px; } .m_nav ul>li>a { font-size: 18px; color: #333; font-weight: bold; width: 80%; text-indent: 20px; position: relative; display: block; line-height: 54px; } .m_nav ul>li>a:hover { color: #006151; } .m_nav ul li i { position: absolute; right: 0; width: 15%; height: 54px; top: 0; background: url(../img/jia1.png) no-repeat center center; margin: auto; z-index: 10; cursor: pointer; transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; } .m_nav ul li i.on { background: url(../img/jian2.png) no-repeat center center; } .m_nav ul li ol { position: relative; width: 100%; top: 0; left: 0; box-shadow: none; display: none; transition: all 0s; } .m_nav ul li ol>li { text-align: left; border: 0; font-size: 16px; line-height: 45px; position: relative; text-indent: 40px; border-top: 1px solid rgba(0, 0, 0, 0.2); transition: all .5s; } .m_nav ul li ol>li a { color: #444444; display: block; } .m_nav ul li ol>li:hover a { text-indent: 50px; color: #1f296b; } /* 移动端搜索 */ .m_nav .search3{ position: absolute; top: 0; right: 0; width: 420px; } .m_nav .search3 div.search3_sub{ background: #ffffff; width: 100%; height: 46px; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid #cccccc; } .m_nav .search3 .text { float: left; width: calc(100% - 50px); height: 46px; border: none; outline: none; line-height: 46px; padding-left: 20px; font-size: 15px; margin: 0; background: transparent; color: #000000; box-sizing: border-box; border-right: 1px solid #ccc; } .m_nav .search3 .text::-webkit-input-placeholder{ color:#969696; } .m_nav .search3 .text::-moz-input-placeholder{ color:#969696; } .m_nav .search3 .text::-ms-input-placeholder{ color:#969696; } .m_nav .search3 .submit { width: 50px; height: 46px; float: right; background: #fff url(../img/search2.png) no-repeat center; border: none; box-sizing: content-box; position:relative; } .m_nav .search3 .submit::before{ display:block; content:""; width:1px; height:20px; position:absolute; left: 1px; top:3px; background: #000000; } .w1500{ padding: 0 20px; } footer{ padding: 25px 0; } .footSub ul{ display: block; } .footSub ul li, .footSub ul li a{ font-size: 14px; line-height: 25px; } .footSub ul li{ margin-right: 0; } .footSub ul li a{ margin-right: 10px; } .footSub ul li:nth-of-type(1){ display: flex; flex-direction: column-reverse; } } @media only screen and (max-width: 960px){ .footSub{ flex-wrap: wrap; } footer .logo{ margin-bottom: 15px; } } @media only screen and (max-width: 768px){ .m_Top{ padding: 15px; } .logo a img{ height: 44px; } .m_nav{ height: calc(100% - 74px); top: 74px; } .menu1{ width: 30px; } .menu1 span{ margin-top: 8px; } .w1500{ padding: 0 15px; } } @media only screen and (max-width: 560px){ .m_nav ul,.m_nav .search3{ width: 100%; } footer{ padding: 15px 0; } .footSub ul li, .footSub ul li a{ font-size: 12px; line-height: 20px; } } @media only screen and (max-width: 440px){ .logo a img{ height: 38px; } .m_nav{ height: calc(100% - 68px); top: 68px; } }