.select-inner *{ white-space:nowrap; } @media screen and (min-width: 2000px) { #header .ri ul li a { font-size: 20px !important; } } @keyframes z-todax { 0% { transform: translatex(-5px); opacity: 0; } 50% { transform: translatex(5px); opacity: 1; } 100% { transform: translatex(0); opacity: 1; } } body{ -webkit-text-size-adjust: none; } #header { position: fixed; z-index: 1111; width: 100%; height: 0.45rem; /*border-bottom: 1px solid rgba(229, 229, 229, 0.5);*/ transition:background-color .3s, border .6s; } .header1{ background:#fff; } #header .nav { display: flex; width: 85%; margin: 0 auto; align-items: center; justify-content: space-between; height: 100%; } #header .logo { width: 17.3%; } #header .logo img { width: 100%; } #header .ri { display: flex; } #header .ri ul { display: flex; height: 0.45rem; } #header .ri ul li{ display:flex; align-items:center; } #header .ri ul>li>a{ position:relative; display: flex; height: 0.45rem; align-items:center; } #header .ri ul li.active{ font-weight:700; } #header .ri ul>li>a:after{ display:block; content:''; width: 0; height:3px; background: #3471C0; position:absolute; bottom: 0rem; transition: all .4s; } #header .nav1 .ri ul li.active a{ background: -webkit-linear-gradient(to right, #009E91, #1363AA); background: linear-gradient(to right, #009E91, #1363AA); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight:700 } #header .nav1 .ri ul li a:after{ background: #3471C0;; } #header .ri ul li.active a:after{ width:100%; } #header .ri ul li a { font-size: 16px;; margin-left: 40px; color: #333; transition: color .3s .3s linear; } #header .nav1 .ri ul li a{ color:#333; } #header .head_ri{ display:flex; position:absolute; right:0.19rem; top: 0.16rem; } #header .head_ri .search { width: 0.12rem; height: 0.12rem; /* background: url(../images/search.png) no-repeat center; */ cursor: pointer; opacity: 1; background-size: 100%; margin-left: 0.2rem; transition: background-image .3s .3s linear; } #header .nav1 .head_ri .search { /* background: url(../images/search-color.png) no-repeat center; */ background-size: 100%; } #header .head_ri .search.on { display:none; } #header .head_ri .act { /* position: absolute; */ width: 0.12rem; height: 100%; z-index: 5; background: url(../images/close-icon.png) no-repeat center; background-size: 24px 24px; pointer-events: none; cursor: pointer; display:none; margin-left:0.2rem; } #header .head_ri .act.active { pointer-events: stroke; display:block; } #header .fastmap{ margin-left:0.2rem } #header .head_ri .fastmap .span span { width: 0.12rem; height: 0.015rem; background: #fff; display: block; transition: background-color .3s; } #header .nav1 .head_ri .fastmap .span span{ background: linear-gradient(to right, #009E91, #1363AA); } #header .head_ri .fastmap .span span:nth-child(2) { margin: 0.03rem 0; animation-delay: .2s; } #header .head_ri .fastmap .span span:nth-child(3) { animation-delay: .4s; } #header .head_ri .fastmap:hover span { animation: z-todax linear .6s backwards; } /*搜索*/ .search-popup { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background-color: #343434; background-color: rgba(52, 52, 52, .7); /* transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; visibility: hidden; */ } .search-popup .form-block { width: 100%; height: 16.4vw; max-height: 420px; background: rgba(22, 22, 22, .75); padding-top: 9.375vw; margin-top: 0.45rem; } .search-popup .title { font-family: 'HankookKRTTFRegular'; font-size: 1.4vw; line-height: 1.2; margin-bottom: 6px; letter-spacing: -1px; max-width: 1280px; width: 90%; margin: auto; background: -webkit-linear-gradient(to right, #009E91, #1363AA); background: linear-gradient(to right, #009E91, #1363AA); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .search-popup .searchform { padding-bottom: 1.09vw; position: relative; border: none; border-bottom: 2px solid #b7ae95; max-width: 1280px; width: 90%; background: none; color: inherit; margin: auto; } .search-popup .searchform:before { content: ''; position: absolute; top: 100%; left: 0; width: 20.7%; height: 2px; background: linear-gradient(to right, #009E91, #1363AA); transition: all 700ms ease; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; } .search-popup .input { font-size: .93vw; color: #b7ae95; width: 100%; padding: 0 120px 0 0; } .search-popup .searchsubmit i { position: relative; z-index: 2; } .search-popup .searchsubmit { overflow: hidden; padding: .58vw 1.17vw; background: linear-gradient(to right, #009E91, #1363AA); font-family: 'Mark'; font-size: 13px; font-weight: 500; color: #fff; position: absolute; right: 0; bottom: .42vw; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .search-popup .searchsubmit::after { content: ""; position: absolute; inset: 0px; width: 100%; background: linear-gradient(to right, #009E91, #1363AA); transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .search-popup .searchsubmit:hover::after { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .search-popup .searchform.focus:before { width: 100%; } .search-popup.active { opacity: 1; visibility: visible; } #mobileHead{ display:none } .footer{ padding: 0.4rem 12.5%; display:flex; justify-content:space-between } .footer-left{ width:27.78%; } .footer-right{ width:62.5%; } .flogo{ width:1.4rem; } .footer-mt{ font-size:0.08rem; color:#999; margin-top:0.275rem; } .fotul{ display:flex; } .fotul li{ width:0.15rem; height:0.15rem; margin-right:0.08rem; margin-top:0.12rem; transition:all .5s; position:relative; z-index:99; } .footer-ewm{ position:absolute; bottom: 0.15rem; width:0.74rem; height: 0.8rem; background:url(../images/ewm-bg.png) no-repeat; padding:0.1rem; background-size:100%; left: -0.3rem; box-sizing:border-box; display:none; } .fotul li:hover .footer-ewm{ display:block; } .footer-ewm p{ text-align:center } .footer-ewm img{ width:0.47rem; } .footer-ewm p span{ font-size:0.06rem; color:#B4B5B0; display:block; } .fotul li:hover{ transform:scale(1.1) } .footer-rz ul{ display:flex; margin-top:0.25rem; } .footer-rz ul li{ width:0.5rem; height:0.2rem; padding-left:0.09rem; color:#fff; display:flex; align-items:center; font-size:0.08rem; transition:all .8s; } .footer-rz ul li:after{ content:''; display:block; position:absolute; width:0.1rem; height:0.03rem; background:url(../images/jt-icon.png) no-repeat; background-size:100%; left: 0.4rem; transition:all 0.8s; opacity:0; } .footer-rz ul li.footer-rczp{ background:url(../images/rczp-bg.png) no-repeat left; background-size:101% 0.2rem; } .footer-rz ul li.footer-zbcg{ background:url(../images/zbcg-bg.png) no-repeat left; background-size:100% 0.2rem; } .footer-rz ul li.active{ width:0.7rem; position:relative; } .footer-rz ul li.active:after{ left:0.5rem; opacity:1; } .footer-bq{ font-size:0.08rem; color:#A3A2A1; line-height:0.12rem; margin-top:0.18rem; } .footer-bq p{ font-size:0.08rem; color:#A3A2A1; line-height:0.12rem; margin-top:0.1rem; } .footer-bq p a{ margin-right:0.05rem; } .footer-yqlj ul{ display:flex; justify-content:space-between; } .footer-yqlj ul li{ width:1.4rem; border-bottom:1px solid #D4D4D4; } .footer-yqlj ul li .friendlink_select{ width:100%; font-size:0.09rem; color:#B4B5B0; position:relative; } .footer-yqlj ul li .friendlink_select span{ display:block; background: url('../images/xglj-icon.png') no-repeat right center; background-size:0.06rem; border-bottom:1px solid #D4D4D4; padding-bottom: 0.05rem; cursor:pointer; } .footer-yqlj ul li .friendlink_select a{ font-size: 0.075rem; padding:0.01rem 0.08rem; transition:all .3s; } .footer-yqlj ul li .friendlink_select a *{ font-size: 0.075rem; } .footer-yqlj ul li .friendlink_select a:hover{ color:#fff; background:#3471C0 } .select-inner{ display:none; background:#fff; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); position:absolute; z-index: 111; max-height:2rem; min-width:100%; overflow:auto; padding:10px 0px; } .footer-nav{ margin-top:0.275rem; } .footer-nav>ul{ display:flex; justify-content:space-between } .footer-nav>ul>li>a{ font-size:0.08rem; padding-bottom:0.15rem; border-bottom:1px solid rgba(0, 0, 0,.1); } .footer-nav>ul>li>ul{ margin-top:0.1rem; } .footer-nav>ul>li>ul>li{ font-size:0.08rem; margin-top:0.05rem; } .footer-nav>ul>li>ul>li>a{ color:#A3A2A1 } .#header .ri ul li{ position:relative; } .nav-child{ display:none; position:absolute; top:0.45rem; background:#fff; width:140px; text-align:center; padding-bottom:0.08rem; padding-top:0.02rem; font-size:0.08rem; color:#333; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); } #header .ri ul li div.nav-child a{ margin-left:0; margin-top:0.02rem; padding:0.03rem 0; transition:all .3s; } #header .ri ul li div.nav-child a:hover{ background:#3471C0; color:#fff; } #header .ri ul>li>a{ transition:color .3s; } #header .ri ul>li:hover>a:after{width:100%} #header .ri ul li:hover>a{ color:#3471C0; font-weight:700; } /*手机端头部*/ #mobileHead { display: none; } #mobileHeader { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; height: 60px; background-color: transparent; position: absolute; left: 0; right: 0; top: 0; z-index: 900; } #mobileHeader.nFixed { position: fixed; } #mobileHead { height: 60px; } #mobileHead.indexMobileHeader { height: 0; } .indexMobileHeader #mobileHeader { background-color: transparent; } #mobileHeader .logo { height: auto; } #mobileHeader .logo img { display: block; height: 100%; width: 70%; } #mobileHeader .meun-btn { width: 30px; height: 30px; /* background: url(../images/head-menu-btn.png) no-repeat center; */ /* background: url(../images/head-menu.png) no-repeat center; background-size: 16px auto; */ position: relative; z-index: 100; display: flex; justify-content: center; align-items: center; } #mobileHeader .meun-btn .ic { width: 30px; height: 30px; /* background: url(../images/head-menu.png) no-repeat center; */ background-size: 100% auto; overflow: hidden; position: relative; } #mobileHeader .meun-btn .ic::before { content: ""; position: absolute; /* left: -100% */ left: 0; top: 0; transform: translateX(0); width: 100%; height: 100%; background: url(../images/head-menu.png) no-repeat center; background-size: 100% auto; transition: all 1s; opacity: 1; } #mobileHeader .pop-top-left{ transform: translateX(0); width: 25px; height: 25px; background: url(../images/head-menu-btn.png) no-repeat center; background-size: 100% auto; transition: all 1s; position:absolute; left:22px; top:26px; } #mobileHeader .pop-top-right{ position:absolute; right: 90px; top: 21px; } #mobileHeader .pop-top-right a{ color:#333; font-size:20px; } #mobileHeader.open .meun-btn .ic::before { /* opacity: 0; */ } #mobileHeader.open .meun-btn .ic::after { opacity: 1; } #mobileHeader.open .mobile-menu-pop { transform: translateX(-100%); opacity: 1; } .menu-pop-top{ position: relative; z-index:99; width: 100%; height: 70px; } .mobile-menu-pop { width: 100%; height: 100vh; background: #fff; background-size: cover; position: absolute; left: 100%; top: 0; z-index: 20; overflow: hidden; /* opacity: .5; */ transition: all 1s; } .mobile-menu-pop .right { width: 100%; height: 100%; overflow: auto; background-size: cover; transform: translateX(100%); transition: all 1s; } #mobileHeader.open .mobile-menu-pop .right { transform: translateX(0); } .mobile-menu-pop .nav { padding: 30px 0 30px; } .mobile-menu-pop .int { opacity: 0; transition: all 0s .8s; } #mobileHeader.open .mobile-menu-pop .int { opacity: 1; transition: all 1s; } .mobile-menu-pop .nav dt { height: 55px; line-height: 55px; margin: 0 20px; color: #3471C0; font-size: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #3471C0; } .mobile-menu-pop .nav dt i { /* content: ""; */ display: inline-block; width: 18px; height: 11px; background: url(../images/mobile-menu-pop-down.png) no-repeat center; background-size: contain; margin-right: 10px; transition: all .3s; opacity: .7; } .mobile-menu-pop .nav dl.open dt i { transform: rotate(-180deg); } .mobile-menu-pop .nav dd { display: none; padding: 0 20px 0 38px; margin-top:10px; } .mobile-menu-pop .nav dd a { display: inline-block; color: #3471C0; font-size: 16px; line-height: 30px; opacity: .8; } .mobile-menu-pop .nav dd a.active { opacity: 1; position: relative; } .mobile-menu-pop .nav dd a.active::after { content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #FFF; } .mobile-menu-pop .langth { /* display: flex; padding: 20px; margin-left: -10px; margin-bottom: 40px; */ position: absolute; left: 15px; bottom: 20px; } .mobile-menu-pop .langth a { color: #333; font-size: 14px; margin-right: 10px; margin-bottom: 20px; padding: 0 10px; opacity: .6; } .mobile-menu-pop .langth a.active { opacity: 1; } @media screen and (max-width: 1350px) { #header .ri ul li a{ margin-left:32px; } } @media screen and (max-width: 1024px) { .footer{ padding: 0.4rem 2.5%; } } @media screen and (max-width: 960px) { #mobileHeader{ height:70px; } .select-inner{ top:50px; max-height:1.8rem; } .footer{ padding: 35px 15px; flex-direction: column-reverse; } .footer-right{ width:100%; margin-top:25px; } .footer-left{ width:100% } .footer-nav{ display:none; } .footer-yqlj ul{ flex-wrap:wrap; } .footer-yqlj ul li{ width:100%; margin-bottom: 12px; } .footer-mt{ font-size: 18px; margin-top: 30px; } .fotles { height: 50px; } .flogo { display: none; } .fotul li { margin-left: 0; margin-right: 10px; width:12% !important; } .fotul li img{ width:100%; } .fotbtm { display: block; } .fotbtmLeft { margin-top: 20px; } .fotbtmLeft p { font-size: 15px; line-height: 24px; } .fotbtmRight { font-size: 15px; margin-top: 10px; } .fotbtmRight li { margin-right: 12px; } .footer-rz ul li{ width: 48% !important; height: 60px; background-size:100% 100% !important; border-radius:8px; padding-left:0px; justify-content:center; font-size:18px; margin:40px 0px 20px;; } .footer-bq p{ font-size:16px; line-height: 24px; margin-top: 15px; text-align:center; } .footer-bq{ font-size:16px; margin-top:24px; line-height:24px; } .footer-yqlj ul li .friendlink_select{ font-size:17px; } .footer-yqlj ul li .friendlink_select span{ background-size:15px; padding-bottom:10px; border-bottom:none; background: url('../images/xglj-icon.png') no-repeat right 10px; background-size:15px; } .fotul{ margin-top:10px; justify-content:space-between; } .footer-rz ul{ margin-top:15px; justify-content:space-between; } .footer-rz ul li.footer-zbcg{ } .footer-rz ul li:after{ display:none; } .footer-ewm{ width: 150px; height: 170px; padding:20px 15px 30px; bottom: 35px; left: -54px; } .footer-ewm p img{ width: 100px; } .footer-ewm p span{ font-size:12px; } .fotul li:first-child .footer-ewm{ left: -25px; } .fotul li:last-child .footer-ewm{ left: -80px; } }