锘?{ margin: 0; padding: 0; } em { font-style: normal; } li { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: none; } img { border: none; vertical-align: top; } input{ outline: none; } body { font-size: 14px; font-family: "寰蒋闆呴粦"; background: white; } .fl { float: left; } i{font-style:normal;} .fr { float: right; } h1,h2,h3,h4,h5,h6{font-weight:normal;padding:0;margin:0;} .clear { clear: both;width:100%; } .fadeIn { animation: fadeIn .5s ease-out forwards; } .fadeOut { animation: fadeOut .5s ease-out forwards; } /* 娣″叆 */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 娣″嚭 */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } #wrapper { position: relative; width: 100%; background: inherit; } .wrap { width: 100%; margin: 0 auto; max-width:1680px; padding:0 60px; box-sizing:border-box; } .header{width:100%;height:110px;margin:0 auto;transition-duration: 1s;padding:20px 40px 40px 40px;position:fixed;top:0;left:0;z-index: 99;background:none;box-sizing:border-box;background: #fff;} .header .logo{padding: 0px; transition-duration: .5s; transition-property: background;transition-timing-function:ease;width: 220px;height:89px; box-sizing:border-box;float:left;background:url(/images/logo.png?v=1) no-repeat;background-size:100% auto;} .header .logo img{width:100%;} .header.on{box-shadow: 0 0 10px #ddd;margin:0;background:rgba(255,255,255,1);height:auto;padding:10px 20px 0 20px;} .header.on .logo{width:180px;margin-top:10px;height:73px;} .header.on .nav .nav__item a{line-height:60px;color:#333;} .header.on .right{padding-top:0px;} .header.on .center{padding-top:7px;} .header.on .openSearch{color:#666;margin-top:8px;} .header.on .nav__icon{background:#0e5c32;} .header.on .nav__icon:before,.header.on .nav__icon:after{background:#0e5c32;} .header .nav__trigger{display:none;} .header .center{width:70%;float:right;max-width:650px;} .header .topsearch{width:200px;float:left;height:40px;background:#f3f3f3;border-radius:30px;padding:0 10px 0 18px;box-sizing:border-box;margin-top:15px;transition-duration: 1s;} .header .topsearch .input{width:80%;float:left;line-height:40px;font-size:14px;color:#999;border:none;background:none;} .header .topsearch .button{font-family:iconfont;font-size:16px;color:#333;width:20%;float:right;height:40px;text-align:center;border:none;background:none;cursor:pointer;} .header .nav{width:100%;transition-duration: 1s;float:right;padding-right:2%;} .header .nav ul{display:block;width:100%;transition-duration: 1s;} .header .nav .wrap{position:relative;} .header .nav .nav__item{width:16.6%;float:left;} .header .nav .nav__item i{font-family:iconfont;position:absolute;right:0px;top:20px;font-size:12px;color:#999;z-index:99;} .header .nav .nav__item a{font-family:'OPPOSans-Medium';display:block;width:100%;height:100%;line-height:75px;text-align:center;font-size:16px;color:#999;transition: all 0.5s;} .header .nav .nav__item a:hover{font-weight:bold;} .header .nav .nav__item:hover ul{display:block;} .header .right{width:auto;float:right;} .header .openSearch{display:none;transition-duration: .5s; width:45px;height:45px;float:left;font-family:iconfont;font-size:26px;color:#413a26;text-align:center;cursor:pointer;line-height:45px;margin:0px 10px 0 0;} .header .openSearch:hover{color:#f5ba5e;} .header .lang{font-size:16px;font-family: "OPPOSans-R";width:40px;height:40px;background:#f3f3f3;border-radius:50%;text-align:center;line-height:40px;color:#999;float:left;margin:15px 0 0 15px;} .header .lang:hover{background:#f5ba5e;color:#fff;} .navlogo{display:none;} @media screen and (max-width:1280px) { .header .center{width:auto;max-width:none;} .header .right{float:left;width:calc(100% - 260px - 50px);padding-left:calc(100% - 260px - 260px - 50px);box-sizing:border-box;} .header .nav__trigger { display: block; float: right; position: relative; width: 30px; height: auto; text-align: center; box-sizing: border-box; /*background: -webkit-linear-gradient(left top, #ffb63c , #ffa205); background: linear-gradient(to bottom right, #ffb63c , #ffa205);*/ display: block; margin: 15px 10px 0 0; transition-duration: 0.5s } .header.on .nav__trigger{ margin-top:5px; } .header.on .right { width: calc(100% - 260px); padding-left: calc(100% - 260px - 260px); } .header .nav { position: fixed; z-index: 999; opacity: 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 300ms; transition-duration: 300ms; transform: translateX(-100%); width: 100%; height: 100vh; top:0;left:0; } .nav--active .nav { opacity: 1; background:rgba(0,0,0,0.6); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); min-height:30rem; } .header .nav .nav__list { padding: 0; margin: 0 0 0 0; width: 300px; height: 100%; background: #fff; /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/ } .header .nav .nav__item { list-style-type: none; text-align: left; font-size: 0.7rem; width: 100%; border-top: 1px solid #f3f3f3; } .header .nav .nav__item li{ width:50%;float:left;box-sizing:border-box; text-align:center;height:1.5rem;font-size:0.65rem; margin-bottom:4px; } .header .nav .nav__item a::after{display:none;} .header .nav .nav__item li a{color:#fff;display:block;width:100%;line-height:1.5rem;font-weight:normal;font-size:0.7rem;} .header .nav .nav__item a { line-height: 50px; font-family: "OPPOSans-M"; font-size: 18px; text-transform: uppercase; text-decoration: none; color: #333; opacity: 1; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; text-align: left; text-indent: 20px; } .header.on .nav .nav__item a{line-height:45px;} .header .nav .nav__link span{ font-family:iconfont; font-weight:normal; margin-right:10px; font-size:0.8rem; } .nav--active .nav__link { opacity: 1; } .nav--active .nav { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); } .nav--active .nav__icon { background: rgba(0, 0, 0, 0); } .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); background:#fff; } .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#fff; } .header .nav .nav__item ul { display: block; position: relative; width: 100%;background:none;box-shadow:none;padding:0 0 0 20px;box-sizing:border-box; } .header .nav .nav__item ul li a { font-size: 16px; color: #333; font-family: 'OPPOSans-R'; line-height:45px; } .header .nav .nav__item ul li { width: 50%; float: left; height:auto; } /* Default navigation icon */ .nav__trigger { display: block; position: absolute; z-index: 1000; } .nav--active .nav__trigger { opacity: 0.8; } .nav__icon { display: inline-block; position: relative; width: 22px; height: 3px; background-color: #413a26; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; top: 8px; } .nav__icon:before, .nav__icon:after { content: ''; display: block; width: 22px; height: 3px; position: absolute; background: #413a26; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; } .nav__icon:before { margin-top: -8px; } .nav__icon:after { margin-top: 8px; } } @media screen and (max-width:1024px){ .wrap{padding:0 20px;} } @media screen and (max-width:820px) { .navlogo{width:300px;background:#f9f9f7;display:block;text-align:center;padding:15px 0;} .navlogo img{width:50%;padding-top:10px;} .header *{transition-duration:0;} .wrap{padding:0 30px;} .headwrap{width:100%;height:13rem;background:#fff;} #wrapper{min-width: 300px;transition-duration:initial;} } @media screen and (max-width:820px){ .header{padding-top:30px;} .header .logo{width:200px;} .header.on .nav--active .nav__icon{background:rgba(0, 0, 0, 0);} .header.on .nav--active .nav__icon:before, .header.on .nav--active .nav__icon:after{background:#fff;} .header .right{padding-left: calc(100% - 260px - 260px - 50px);} } @media screen and (max-width:512px) { .header .topsearch{display:none;} .header{padding:15px 10px 0px 20px;height:80px;} .header .right{right:60px;top:15px;position:absolute;} .header .center{width:auto;min-width:40px;} .header .openSearch{margin:5px 0px 0 0;font-size:20px;float:right;display:block;} .header.on .openSearch{margin-top:2px;} .header .lang{margin-top:23px;display:none;} .header .nav__trigger{margin:5px 10px 0 0;} .header .logo{width:150px;padding-top:5px;height:60px;} .header.on .logo{width:120px;} .header.on{padding:5px 5px 5px 15px;height:70px;} .header.on .lang{margin-top:10px;} .header.on .right{right:50px;} .wrap{padding:0 20px;} } /*new right*/ .demo-icon{ font-family:'iconfont'; font-style:normal; font-weight:normal; speak:none; display:inline-block; text-decoration:inherit; text-align:center; font-variant:normal; text-transform:none; font-size:20px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:24px; color:#999; } .cndns-right{position:fixed;right:5px;bottom:30%;margin-top:-100px;z-index:100} .cndns-right-meau{position:relative;} .cndns-right-btn{width:55px;height:55px;text-align:center;display:block;margin-bottom:6px;position:relative;background:rgba(50,50,50,0.5);box-shadow: 0 0 10px 0 rgba(20,34,67,.1);line-height:55px;border-radius:50%;} .cndns-right-btn span{color:#fff;font-size:24px;line-height:55px;} .cndns-right-btn sup{display:block;min-width:24px;height:24px;text-align:center;line-height:24px;color:#fff;border-radius: 50%;background-color:#cc9900;position:absolute;left:-12px;top:-12px;} .cndns-right-btn p{color:#1765ba;font-size:14px;line-height:18px;padding-top:5px;display:none;} .cndns-right-meau:hover{background:#269c46;color:#fff;border-radius:50%;} .meau-car .cndns-right-btn {border-color:#1765ba;margin-bottom:20px;} .meau-car.cndns-right-meau:hover .cndns-right-btn{background-color:#269c46} .meau-car.cndns-right-meau:hover .cndns-right-btn span{color:#fff;display:block;} .meau-car .cndns-right-btn span{color:#1765ba;} .meau-sev .cndns-right-btn p{color:#fff} .meau-top .cndns-right-btn i{display:block;color:#fff} .meau-top.cndns-right-meau:hover .cndns-right-btn{background-color:#269c46} .meau-top.cndns-right-meau:hover .cndns-right-btn span{display:block;color:#fff} .meau-top.cndns-right-meau:hover .cndns-right-btn i{color:#fff;} .cndns-right-box{position:absolute;top:-15px;right:48px;padding-right:25px;display:none;} .cndns-right-box .box-border{padding:30px 20px;background-color:#fff;-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);box-shadow: 0 3px 8px rgba(0,0,0,.15);position:relative} .cndns-right-box .box-border .arrow-right{display:block;width:13px;height:16px;background:url(../images/arrow.png) no-repeat;position:absolute;right:-13px;top:26px;} .cndns-right-box .box-border .sev-t .con{width:100%;height:70px;} .cndns-right-box .box-border .sev-t span{font-size:42px;float:left;display:block;line-height:56px;margin-right:20px;color:#d3d3d3} .cndns-right-box .box-border .sev-t p{float:left;color:#333;font-size:20px;line-height:28px;font-family: "MONTSERRAT-REGULAR",'Microsoft YaHei';} .cndns-right-box .box-border .sev-t p i{display:block;font-size:14px;color:#aaa;} .cndns-right-box .box-border .sev-b{padding-top:0px;margin-top:15px;border-top:1px solid #e4e4e4;text-align:center;} .cndns-right-box .box-border .sev-b h4{color:#666;font-size:14px;font-weight:normal;padding-bottom:15px;} .cndns-right-box .box-border .sev-b li{float:left;width:33.33333%} .cndns-right-box .box-border .sev-b li a{display:inline-block;color:#999;font-size:13px;padding-left:43px;line-height:36px;} .cndns-right-box .box-border .sev-b li a:hover{color:#333} .cndns-right-box .box-border .qrcode img{width:70%;} .meau-sev .cndns-right-box .box-border{width:270px;} .meau-contact .cndns-right-box .box-border{width:300px;} .cndns-right-meau:hover .cndns-right-box{display:block} .meau-code .cndns-right-box{top:inherit;bottom:-35px;} .meau-code .cndns-right-box .box-border{width:156px;text-align:center;border-top:1px solid #ccc;} .meau-code .cndns-right-box .box-border i{display:block;color:#f66e06;font-size:16px;line-height:16px;} .meau-code .cndns-right-box .box-border .arrow-right{top:inherit;bottom:50px;} .cndns-right-btn:hover{background:#edad27;color:#fff;border-radius:50%;} .cndns-right-btn:hover .demo-icon{color:#fff;} .meau-zs .cndns-right-btn{background-color:#1765ba;color:#fff;margin-top:80px;border-color:#1765ba} .meau-zs .cndns-right-btn span{color:#fff} .meau-zs .cndns-right-btn p{color:#fff} .sev-t h6{color:#333;font-size:14px;line-height:40px;} @media screen and (max-width:820px){ .cndns-right{top:90%;margin-top:0;right:10px;} .cndns-right-btn{width:47px;height:47px;line-height:47px;} .cndns-right-btn span{line-height:47px;font-size:24px;} .meau-sev,.meau-contact{display:none;} } /*寮瑰嚭鍒嗙被*/ .searchbox{width:90%;background:#fff;color:#fff;height:auto;height:8rem;margin:0 5%;position:absolute;top:8vh;overflow:hidden;border-radius:0.5rem} .searchbox .input{width:75%;float:left;background:#fff;border:none;font-size:2.8rem;color:#999;text-indent:2rem;line-height:8rem;} .searchbox .button{width:25%;float:left;background:none;color:#fff;text-align:center;line-height:8rem;border:none;font-family:iconfont;font-size:2.8rem;background:#f5ba5e;} .cd-section { padding: 2em; margin-top: 5em; text-align: center; } .cd-bouncy-nav-trigger { } .cd-bouncy-nav li .info a:hover{background:none;} .no-touch .cd-bouncy-nav-trigger:hover { background: #e0a36f; } .cd-bouncy-nav-modal { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(36, 35, 37, 0.95); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; transition: opacity 0.3s 0.6s, visibility 0s 0.9s; } .cd-bouncy-nav-modal.fade-in { visibility: visible; opacity: 1; -webkit-transition: opacity 0.1s 0s, visibility 0s 0s; -moz-transition: opacity 0.1s 0s, visibility 0s 0s; transition: opacity 0.1s 0s, visibility 0s 0s; } .cd-bouncy-nav-modal .cd-close { display: block; position: fixed; top: 20px; right: 5%; width: 44px; height: 44px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: url("../images/cd-icon-close.svg") no-repeat center center; -webkit-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -ms-transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; transition: transform 0.3s 0s, visibility 0s 0.3s; } .cd-bouncy-nav-modal.fade-in .cd-close { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s; transition: transform 0.3s 0s, visibility 0.3s 0s; z-index:99; } .cd-bouncy-nav { position: absolute; left: 50%; top: 55vh; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; } .cd-bouncy-nav li { width: 25%; float: left; padding:0 0.3rem; box-sizing:border-box; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateY(100vh); -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -o-transform: translateY(100vh); transform: translateY(100vh); text-align: center; } .cd-bouncy-nav li img{width:100%;border-radius:50%;} .is-visible .cd-bouncy-nav li { /* used to assign a tranlsateY value when the animation is over */ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .fade-in .cd-bouncy-nav li { -webkit-animation: cd-move-in 0.4s; -moz-animation: cd-move-in 0.4s; animation: cd-move-in 0.4s; } .fade-out .cd-bouncy-nav li { -webkit-animation: cd-move-out 0.4s; -moz-animation: cd-move-out 0.4s; animation: cd-move-out 0.4s; } .fade-in .cd-bouncy-nav li, .fade-out .cd-bouncy-nav li { -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .fade-in .cd-bouncy-nav li:nth-of-type(3), .fade-out .cd-bouncy-nav li:nth-of-type(3) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; animation-delay: 0.15s; } .fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } .fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .fade-in .cd-bouncy-nav li:nth-of-type(6), .fade-out .cd-bouncy-nav li:nth-of-type(6) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } /*@media only screen and (min-width: 768px) { .cd-bouncy-nav { max-width: 450px; }*/ .cd-bouncy-nav { columns: 1; column-gap: 10px; height:80%; background:none;padding:0; } .cd-bouncy-nav li { width: 100%; height:auto; float: left; background:rgba(255,255,255,0.2); border-radius:0.1rem; box-sizing:border-box; padding:10px; margin-bottom:5px; break-inside: avoid; } .cd-bouncy-nav li .info{width:100%;text-align:left;height:auto;color:#fff;} .cd-bouncy-nav li .info h1{font-size:16px;line-height:20px;text-indent:0px;font-weight:bold;padding-bottom:2px;color:#fff;} .cd-bouncy-nav li .info img{width:60px;float:left;position:initial;} .cd-bouncy-nav li a{color:#fff;} .cd-bouncy-nav li .list{width:100%;} .cd-bouncy-nav li .list a{color:#fff;float:left;display:block;font-size:15px;text-align:left;line-height:28px;width:50%;box-sizing:border-box;} .fade-in .cd-bouncy-nav li:nth-of-type(1), .fade-out .cd-bouncy-nav li:nth-of-type(1) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } .fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } @media only screen and (min-width: 1170px) { .cd-bouncy-nav-modal .cd-close { top: 60px; } } @-webkit-keyframes cd-move-in { 0% { -webkit-transform: translateY(100vh); } 65% { -webkit-transform: translateY(-1.5vh); } 100% { -webkit-transform: translateY(0vh); } } @-moz-keyframes cd-move-in { 0% { -moz-transform: translateY(100vh); } 65% { -moz-transform: translateY(-1.5vh); } 100% { -moz-transform: translateY(0vh); } } @keyframes cd-move-in { 0% { -webkit-transform: translateY(100vh); -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -o-transform: translateY(100vh); transform: translateY(100vh); } 65% { -webkit-transform: translateY(-1.5vh); -moz-transform: translateY(-1.5vh); -ms-transform: translateY(-1.5vh); -o-transform: translateY(-1.5vh); transform: translateY(-1.5vh); } 100% { -webkit-transform: translateY(0vh); -moz-transform: translateY(0vh); -ms-transform: translateY(0vh); -o-transform: translateY(0vh); transform: translateY(0vh); } } @-webkit-keyframes cd-move-out { 0% { -webkit-transform: translateY(0vh); } 100% { -webkit-transform: translateY(-100vh); } } @-moz-keyframes cd-move-out { 0% { -moz-transform: translateY(0vh); } 100% { -moz-transform: translateY(-100vh); } } @keyframes cd-move-out { 0% { -webkit-transform: translateY(0vh); -moz-transform: translateY(0vh); -ms-transform: translateY(0vh); -o-transform: translateY(0vh); transform: translateY(0vh); } 100% { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -ms-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } } .footer{background:#fff;width:100%;} .foot{width:100%;background:#f3f5f4;height:auto;padding:50px 0 20px 0;box-sizing:border-box;font-family:"OPPOSans-R";color:#444;overflow:hidden;} .foot .wrap{} .foot h1{font-size:22px;font-weight:bold;padding-bottom:25px;font-family: Noto Sans SC;font-weight:700;} .foot .menu{width:28%;float:left;box-sizing:border-box;padding-bottom:20px;} .foot .menu ul{padding-right:40px;} .foot .menu li{width:33.3%;float:left;font-size:16px;line-height:40px;} .foot .menu li a{color:#444;} .foot .contactus{width:calc(100% - 28% - 150px);float:left;padding-left:40px;box-sizing:border-box;} .foot .contactus ul{padding-right:40px;} .foot .contactus li{width:100%;padding-bottom:10px;font-size:16px;clear:both;} .foot .contactus li b{font-size:20px;font-family:MONTSERRAT-REGULAR;font-weight:normal;} .foot .contactus li span{font-family:iconfont;font-size:22px;padding-right:10px;display:block;height:30px;float:left;} .foot .contactus li h2{font-size:18px;} .foot .contactus li h3{font-size:30px;font-family:MONTSERRAT-REGULAR;font-weight:bold;padding-bottom:10px;} .foot .weixin{width:150px;float:right;text-align:center;} .foot .weixin img{width:100%;} .copy br{display:none;} .copy{background:#f3f5f4;line-height:60px;font-size:13px;color:#888;font-family:'OPPOSans-Regular';} .copy a{color:#888;} .copy .wrap{border-top:1px solid #ddd;} @media screen and (max-width: 820px) { .foot .menu{display:none;} .foot .contactus{padding-left:0;width:calc(100% - 150px);} .foot .contactus ul{padding-right:20px;} } @media screen and (max-width: 512px) { .foot{border-top-right-radius:40px;background:#323232;color:#fff;} .foot h1{display:none;} .foot .menu li a{color:#fff;} .foot .contactus{width:100%;padding-bottom:20px;} .foot .contactus ul{padding-right:0px;} .foot .contactus li{font-size:14px;} .foot .contactus li i{display:none;} .foot .contactus li b{font-size:18px;} .foot .weixin{width:100%;padding:0;box-sizing:border-box;} .foot .weixin img{width:40%;} .copy{line-height:22px;padding:15px 0;font-size:12px;background:#282828;color:#ccc;} .copy .wrap{padding-top:10px;border:none;} .copy a{color:#ccc;} .copy br{display:block;} } @media screen and (min-width: 820px) { .goods-list-bar{width:800px;margin:0 auto;} .searchbox{width:800px;height:50px;margin:0;} .searchbox .input{width:80%;font-size:16px;text-indent:2rem;line-height:50px;} .searchbox .button{width:20%;line-height:50px;border:none;font-size:16px;} .cd-bouncy-nav { columns: 2; column-gap: 10px; height:80%; background:none;padding:0; width:800px; } .cd-bouncy-nav li { width: 100%; height:auto; float: left; background:rgba(255,255,255,0.2); border-radius:0.1rem; box-sizing:border-box; padding:10px; margin-bottom:10px; break-inside: avoid; } .cd-bouncy-nav li .info{width:100%;text-align:left;height:auto;color:#fff;} .cd-bouncy-nav li .info h1{font-size:18px;line-height:30px;font-weight:bold;padding-bottom:5px;color:#fff;} .cd-bouncy-nav li .info img{width:6rem;float:left;position:initial;} .cd-bouncy-nav li a{color:#fff;} .cd-bouncy-nav li .list{width:100%;} .cd-bouncy-nav li .list a{color:#fff;float:left;display:block;font-size:16px;text-align:left;line-height:30px;padding:0;width:30%;box-sizing:border-box;} } @media screen and (max-width: 512px) { .cd-bouncy-nav { columns: 2; column-gap: 10px; } }