html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,section, article, aside, header, footer, nav, dialog, figure,menu,hgroup,iframe{ margin:0; padding:0; border:0; -webkit-font-smoothing:antialiased; font-family:'OPPOSans-Ver2-Regular', "Hiragino Sans GB",  "微软雅黑", "STHeiti", sans-serif;}
html{ -webkit-text-size-adjust:none;}
body{font-size:14px; line-height:22px; background:#fff;  -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased;  font-smoothing: antialiased;  }
::selection{ background:#24b727; color:#fff;}
::-moz-selection{ background:#24b727; color:#fff;} 
::-webkit-selection{ background:#24b727; color:#fff;}
input, button, select, textarea {-moz-appearance: none;-webkit-appearance: none;appearance: none;border-radius: 0;background: #fff;border: 0}
img{ border:none;vertical-align:middle; -ms-interpolation-mode: bicubic;}
/*@font-face { 
    [font-family: <family-name>;]? [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]? [unicode-range: <urange>#;]? [font-variant: <font-variant>;]? [font-feature-settings: normal|<feature-tag-value>#;]? [font-stretch: <font-stretch>;]? [font-weight: <weight>]; [font-style: <style>]; }*/
	

@font-face {
 font-family: 'nicedesign';
 src: url('/static/font/nicedesign.otf');
 src: url('/static/nicedesign.eot') format('embedded-opentype'),
 url('/static/font/nicedesign.woff') format('truetype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
    font-family: "OPPOSans-Ver2-Medium";
    src: url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.woff2) format("woff2"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.woff) format("woff"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "OPPOSans-Ver2-Regular";
    src: url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff2) format("woff2"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.woff) format("woff"),url(https://www.oppo.com/content/dam/statics/fonts/cn/OPPOSans3.0cn-Regular.ttf) format("truetype");
}
.f_soc{ font-family: 'nicedesign';}


.icon_wb:before{content:"\e800";}
.icon_wx:before{content:"\e801";}
.icon_dr:before{content:"\e802";}
.icon_zc:before{content:"\e803";}
.icon_bh:before{content:"\e804";}
 

     	

body{overflow: -moz-scrollbars-vertical;} 
.menu_bt{position: relative;z-index: 9999; width:24px;height:12px;border-top: 2px solid #666;border-bottom: 2px solid #666;vertical-align: middle; float:right; display:none;}
.menu_bt:after {content: '';position: absolute;top: 0;left: 0;right: 0;height:5px;border-bottom: 2px solid #666; transition: all 100ms linear 0ms;}
.menu_bt span:after {border-color: #666}
.menu_bt span {font-size: 0;	text-indent: -9999px}
.menu_bt span:before, .menu_bt span:after {content: '';position: absolute;top: 50%;right: 0;left: 0;border-top: 1px solid black;transition: all 100ms linear 0ms;}
.menu_bt.open {color: transparent !important; border:0;}
.menu_bt.open:after {-webkit-transform: scale(0);transform: scale(0);}
.menu_bt.open span:before, .menu_bt.open span:after { border-width: 2px;border-color: white;}
.menu_bt.open span:before {-webkit-transform: rotate(45deg);transform: rotate(45deg)}
.menu_bt.open span:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg)}
 

.header{ background:none; height:76px; width:100%; z-index:111100;  position:fixed; left:0; top:0;}
.header .con{ width:1200px; margin:0 auto; }
.header.add{ background:#fff; box-shadow:0 0 5px 2px rgba(0,0,0,.1);}
.logo{float: left;position: relative;z-index: 1000;}
.logo a{background: url(/static/image/logo_bai.png) no-repeat;width: 170px;height: 38px;display: block;background-size: auto 38px;margin-top: 20px;}
.header.add .logo a {background: url(/static/image/logo.png) no-repeat;width: 170px;height: 38px;display: block;background-size: auto 38px;}
.logo .baozhang{position: relative;bottom: 30px;right: -110px;border-left: 1px solid #ccc;padding-left: 20px;} 

.page-overlay{ float:right;}
.page-overlay .nav{ float:left;}
.page-overlay .nav li{ float:left; margin-left:65px; position:relative;}
.page-overlay .nav li > a{ font-size:16px; padding:0 10px; color:#fff; line-height:74px; display:block;font-family: OPPOSans-Ver2-Medium, "Hiragino Sans GB",  "微软雅黑", "STHeiti", sans-serif;}
.page-overlay .nav li > a:hover{ border-bottom:2px solid #fff;}
.page-overlay .nav li > a.on{ border-bottom:2px solid #fff;}
.page-overlay .nav li.zi{ display:none;}
.page-overlay .nav .onda > a{ border-bottom:2px solid #fff;}
.header.add .page-overlay .nav .onda > a{ color:#25b728; border-bottom:2px solid #25b728;}

.header.add .page-overlay .nav li > a{ color:#333;}
.header.add .page-overlay .nav li > a:hover{ color:#25b728; border-bottom:2px solid #25b728;}
.header.add .page-overlay .nav li > a.on{  color:#25b728; border-bottom:2px solid #25b728;}
@media screen and (max-width:1230px) {
.page-overlay .nav li{ float:left; margin-left:35px;}
.header .con{ width:90%;} 
}
 
@media screen and (max-width:768px) {
.menu_bt{ display:block; margin:17px 10px 0 0;}	
.page-overlay {position: fixed; top: 0;right: 0;bottom: 0;left: 0; height:0; z-index:999; width: 100%; overflow:hidden;  padding-top:40px; background:#000; transition:all .2s ease-in-out;color:#fff; opacity:0;}
.page-overlay.black{opacity:1; height:100%;}	

.header{ height:50px;}
.header .con{ width:100%;} 
.header.add .logo .baozhang{bottom: 27px;right: -98px;border-left: 1px solid #ccc;padding-left: 14px;} 
.header.add .logo a{background: url(/static/image/logo.png) no-repeat;width: 160px;height: 30px;background-size: auto 30px;margin-top: 10px;margin-left: 15px;
}
.page-overlay .nav{ width:90%; margin:0 auto; margin-top:64px; float:none; text-align:left; }
.page-overlay .nav li{ float:none; padding:0; margin-left:0;}
.header.add .page-overlay .nav li > a{ font-size:24px; color:#fff; line-height:40px; padding:10px 0;}
.header.add .page-overlay .nav li > a:hover{ color:#fff; border:0; color:#25b728;}
.header.add .page-overlay .nav li > a.on{  color:#fff; border:0;  color:#25b728;}
.page-overlay .nav li.zi{ display:block;} 
.page-overlay .nav li.zi em{ display:block; width:32px; height:2px; background:#666; margin:30px 0 10px 0;}
}

@media screen and (max-width:400px) {
.page-overlay .nav{   margin-top:20px;}
.header.add .page-overlay .nav li > a{ font-size:20px; padding:8px 0;}
.page-overlay .nav li.zi em{ margin:20px 0 10px 0;}
}
@media screen and (max-width:320px) {
.header.add .page-overlay .nav li > a{ font-size:18px;  padding:5px 0;}
}



/*加载进度条*/
.fade { transition: all 300ms linear 700ms;/*-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);*/ opacity: 1;}
.fade.out {opacity: 0;}

#nprogress { pointer-events:none;} /*鼠标事件拜拜的意思*/
#nprogress .bar {background: #24b727;position: fixed; z-index: 1031;top: 0;left: 0;width: 100%;height: 2px;}
#nprogress .peg {display: block;position: absolute;right: 0px;width: 100px;height: 100%;box-shadow: 0 0 10px #24b727, 0 0 5px #24b727;
opacity: 1.0;-webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px);}
#nprogress .spinner {display: block;position: fixed;z-index: 1031;top: 15px;right: 15px;}

#nprogress .spinner-icon {width: 18px;height: 18px;box-sizing: border-box;border: solid 2px transparent;border-top-color: #24b727;border-left-color: #24b727;border-radius: 50%;-webkit-animation: nprogress-spinner 400ms linear infinite;animation: nprogress-spinner 400ms linear infinite;}
.nprogress-custom-parent {overflow: hidden;position: relative;}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {position: absolute;}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*底部*/
.main_foot { width:100%;  background: #f4f4f4; overflow: hidden; padding-bottom:20px;}
.foot {width: 1200px; overflow: hidden; margin:65px auto 40px auto; }
.foot_logo { float: left;   }
.foot ul { float: left; text-align: left; line-height:32px; color:#333;}
.foot ul li { clear: both;}
.foot ul h1 { font-size:18px; color:#222; margin-bottom:5px;}
.foot ul.list2 h1 { color: #24b727;}
.foot ul a { color: #333;}
.foot ul a:hover { color: #24b727;}
.foot ul.list1 { width:160px; margin-left:75px; height:220px;}
.foot ul.list2 { width:215px; float: right;  }
.foot .list2 i { background: url(../image/icon.png) no-repeat;width: 17px;height: 17px; display:inline-block;margin:0px 3px 0 10px; vertical-align:-2px;}
.foot .list2  i.qq {background-position: -386px -29px;}
.foot .list2 .jiaotan{ color:#24b727;}
.foot .list2 .jiaotan:hover{ text-decoration:underline;}
 
.foot_bottom {color: #333; text-align:center; clear:both; width:100%; margin:0 auto; overflow:hidden;}
.foot_bottom p a[href*="www.eyoucms.com"]{display:none}
i,em{ font-style:normal;}
.foot_bottom a i { display:inline-block; font-size:18px; margin:0 5px 10px 5px;color: #666 !important;}

.foot_bottom a  .icon_wb{color:#da251c;}
.foot_bottom a  .icon_wx{color:#00c800;}
.foot_bottom a  .icon_dr{color:#c32361;}
.foot_bottom a  .icon_zc{color:#ffd100;}
.foot_bottom a  .icon_bh{color:#1377ff;}

/*.foot_bottom a i.weibo {background-position: -409px 0;}
.foot_bottom a i.weixin {background-position: -423px -121px;}
.foot_bottom a i.dri {background-position: -409px -29px;}
.foot_bottom a i.blog {background-position: -409px -58px;}
.foot_bottom a i.cool {background-position: -409px -88px;}
.foot_bottom a i.fang { width:15px; background-position: -444px -30px;}
.foot_bottom a i.dou {  width:16px; background-position: -444px -57px;}
.foot_bottom a i.lofter {  width:16px; background-position: -489px -30px;}*/


/*.foot_bottom a:hover i.weibo {background-position: -360px 0;}
.foot_bottom a:hover i.weixin {background-position: -398px -121px;}
.foot_bottom a:hover i.dri {background-position: -360px -29px;}
.foot_bottom a:hover i.blog {background-position: -360px -58px;}
.foot_bottom a:hover i.cool {background-position: -360px -88px;}
.foot_bottom a:hover i.fang {background-position: -468px -30px;}
.foot_bottom a:hover i.dou {background-position: -467px -57px;}
*/


@media screen and (max-width:1200px){
 
.foot{ width:1000px;}
.foot ul.list1 { width:110px; margin-left:30px;}
 
 
}
 
@media screen and (max-width:1000px){
 
.foot{ width:100%; margin:25px auto 40px auto}
.foot_logo{ float:none; margin:0 auto 20px auto; display:none;}
.foot ul.list1 { width:120px; margin-left:10px;}
 

}
@media screen and (max-width:760px){
 
.foot{ width:100%; }
.foot ul h1{ margin-bottom:3px;}
.foot ul.list1 { width:19%; margin:0 3%;}
.foot ul.list2{ width:93%; margin:0 auto; float:none;}
 
}
@media screen and (max-width:470px){
.foot ul{ line-height:28px;}
.foot{ margin:25px auto 30px auto;}
 .foot ul.list1 { width:42%; margin:0 3%; height:190px; text-align:center;}
 .foot ul.list2{ width:90%; margin:0 auto; float:none;  text-align:center;}
 
}

.theme-mask{z-index:10000;position:fixed; _position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5; display:none; }
.popover1{ width:360px; height:400px; z-index:100001; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); display:none; text-align:center;}
.popover1 dl{ margin-top:60px; font-size:14px; color:#333; line-height:40px;}
.popover1 dl a{ width:110px; height:40px; background:#24b728; color:#fff; display:inline-block; border-radius:2px; font-size:14px;}





/*公共右侧客服挂件*/
.wap {
display: none;
}

.fixedbox a:-webkit-any-link {
color: #313336;
cursor: pointer;
text-decoration: none;
}

.fixedbox {
position: fixed;
bottom: 100px;
right: 16px;
z-index: 999999;
font-size: 18px;
}

.fixedbox>.relative {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 2.8em;
border-radius: 1.4em;
background: #FFFFFF;
box-shadow: 0px 2px 0.6em 0px rgba(0, 0, 0, 0.12);
text-align: center;
padding: 0.75em 0;
position: relative;
}

.fixedbox>.relative img.icon {
width: 2.4em;
margin: 0 auto;
display: block;
}

.fixedbox>.relative:first-child {
margin-bottom: 8px;
padding: 0.25em 0;
background: #40CA1D;
box-shadow: 0px 8px 16px 0px rgba(36, 183, 39, 0.2);
cursor: pointer;
}

.fixedbox>.relative:first-child:hover {
background-color: #24B727;
}

.fixedbox>.relative:first-child>p {
font-size: 0.8em;
font-weight: bold;
letter-spacing: -0.2em;
color: #FFFFFF;
writing-mode: tb-lr;
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
writing-mode: vertical-lr;
/*从左向右 从右向左是 writing-mode: vertical-rl;*/
margin: 8px 0 0;
text-align: center;
}

.fixedbox>.relative:first-child>span {
font-size: 0.8em;
font-weight: bold;
letter-spacing: 0.1em;
color: #FFFFFF;
margin: 0 0 0.65em;
text-align: center;
}

.fixedbox>.relative>.head {
width: 2.1em;
display: block;
border-radius: 50%;
margin: 0 auto;
border: 2px solid #fff;
}

.fixedbox>.relative .box {
font-size: 0.6em;
font-weight: normal;
line-height: 1.5em;
text-align: center;
color: #313336;
cursor: pointer;
}

.fixedbox>.relative .box img:nth-child(2) {
display: none;
}

.fixedbox>.relative .box:hover {
color: #40CA1D;
}

.fixedbox>.relative .box:hover img:nth-child(1) {
display: none;
}

.fixedbox>.relative .box:hover img:nth-child(2) {
display: block;
}

.fixedbox>.relative>i {
width: 1em;
height: 1px;
margin: 0.5em auto;
background: #EAEDF3;
}

.fixedbox .totop {
height: 1.4em;
width: 1.4em;
cursor: pointer;
padding: 0.7em;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0px 2px 0.6em 0px rgba(0, 0, 0, 0.12);
margin-top: 28px;
display: none;
}

.fixedbox .gwbox {
position: absolute;
bottom: 0;
right: calc(100%);
padding-right: 0.4em;
display: none;
}

.fixedbox .gwboxbg {
background: url(/static/image/bg.png) top right no-repeat;
background-size: cover;
border-radius: 0.6em;
padding: 1.6em 1.5em 2em;
box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 6px 0px #FFFFFF;
box-sizing: border-box;
text-align: left;
}

.fixedbox .gwbox .heabox {
display: flex;
justify-content: flex-start;
align-items: center;
padding-bottom: 1.25em;
border-bottom: 1px solid #EFF2FC;
margin-bottom: 1.2em;
}

.fixedbox .gwbox .heabox .head {
width: 2.8em;
height: 2.8em;
display: block;
margin-right: 0.8em;
}

.fixedbox .gwbox .heabox h4 {
font-size: 1.2em;
font-weight: 600;
color: #313336;
white-space: nowrap;
margin: 0;
}

.fixedbox .gwbox .heabox p {
white-space: nowrap;
font-size: 0.8em;
margin: 0.4em 0 0;
color: #313336;
}

.fixedbox .gwbox .callbox {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

.fixedbox .gwbox .callbox p {
font-size: 0.7em;
line-height: 1.2em;
color: #313336;
margin-bottom: 0.6em;
}

.fixedbox .gwbox .callbox .qr {
width: 110px;
display: block;
margin-right: 50px;
max-width: none;
}

.fixedbox .gwbox .callbox>div>div {
background: #F7F9FF;
border-radius: 8px;
padding: 1.5em 2em 1.7em 1em;
}

.fixedbox .gwbox .callbox .libx {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 0.9em;
font-weight: 500;
line-height: 1.2em;
color: #313336;
padding-top: 0.5em;
font-family: Barlow-Regular;
text-decoration: none;
}

.fixedbox .gwbox .callbox .libx span {
color: #999999;
margin-right: 0.6em;
display: block;
white-space: nowrap;
}

.fixedbox .gwbox .callbox .ico {
width: 1.2em;
display: block;
margin: 0 0.6em 0 0;
}

.fixedbox .gwboxbg .close {
display: none;
}

@media screen and (max-width:750px) {
.wap {
    display: block;
}
.fixedbox {
    position: fixed;
    bottom: 80px;
    right: 10px;
    z-index: 9;
    font-size: 10px;
}
.fixedbox>.relative {
    width: 36px;
    padding: 10px 0;
    border-radius: 2.8em;
}
.fixedbox>.relative:first-child {
    margin-bottom: 8px;
    padding: 5px 0;
    background: #40CA1D;
    box-shadow: 0px 8px 16px 0px rgb(36 183 39 / 0.2);
    cursor: pointer;
}
.fixedbox>.relative:first-child>p {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.3em;
    color: #FFFFFF;
    writing-mode: horizontal-tb;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    margin: 4px 0 0;
    text-align: center;
}
.fixedbox>.relative:first-child>span {
    line-height: 1.3em;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0;
    color: #FFFFFF;
    writing-mode: horizontal-tb;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    margin: 0 0 5px;
    text-align: center;
}
.fixedbox>.relative img.icon {
    width: 2.4em;
}
.fixedbox>.relative>.head {
    width: 26px;
    margin-top: -2px;
}
.fixedbox>.relative .box {
    font-size: 1em;
    line-height: 1.3em;
}
.fixedbox>.relative .box:hover {
    color: #313336;
}
.fixedbox>.relative .box:hover img:nth-child(1) {
    display: block;
}
.fixedbox>.relative .box:hover img:nth-child(2) {
    display: none;
}
.fixedbox .totop {
    height: 24px;
    width: 24px;
    padding: 6px;
}
.fixedbox .gwbox {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    /* display: block; */
    z-index: 100;
}
.fixedbox .gwboxbg .close {
    width: 2.4em;
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0.8em;
    top: 0.8em;
}
.fixedbox .gwboxbg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/static/image/bg-wap.png) top right no-repeat;
    background-size: cover;
    border-radius: 1.2em;
    padding: 2.8em 3em 4em;
    box-shadow: 0px 2px 2.5em 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0.3em 0px #FFFFFF;
    box-sizing: border-box;
    width: 90%;
}
.fixedbox .gwbox .heabox {
    text-align: center;
    display: block;
    padding-bottom: 2.4em;
    border-bottom: 1px solid #EFF2FC;
    margin-bottom: 2.4em;
}
.fixedbox .gwbox .heabox .head {
    width: 5.6em;
    height: 5.6em;
    display: block;
    margin: 0 auto 1.6em;
}
.fixedbox .gwbox .heabox h4 {
    font-size: 2.2em;
    font-weight: 600;
    color: #051624;
    white-space: nowrap;
}
.fixedbox .gwbox .heabox p {
    white-space: nowrap;
    font-size: 1.2em;
    margin-top: 0.6em;
    color: #313336;
}
.fixedbox .gwbox .callbox {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.fixedbox .gwbox .callbox p {
    font-size: 1.2em;
    color: #313336;
    text-align: center;
    margin-bottom: 1.2em;
}
.fixedbox .gwbox .callbox .qr {
    width: 10em;
    display: block;
    margin-right: 0;
}
.fixedbox .gwbox .callbox>div>div {
    padding: 1.6em 1em 2.8em;
}
.fixedbox .gwbox .callbox .libx {
    font-size: 1.4em;
    line-height: 1.2em;
    color: #313336;
    padding-top: 0.8em;
}
.fixedbox .gwbox .callbox .ico {
    width: 2em;
    display: block;
    margin: 0 0.8em 0 0;
}
}