@font-face {
    font-family: "OPPOSans-Ver2-Bold";
    src: url(../../index/fonts/OPPOSans3.0cn-Bold.woff2) format("woff2"), url(../../index/fonts/OPPOSans3.0cn-Bold.woff) format("woff"), url(../../index/fonts/OPPOSans3.0cn-Bold.ttf) format("truetype");
    font-variation-settings: 'wght' 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "OPPOSans-Ver2-Medium";
    src: url(../../index/fonts/OPPOSans3.0cn-Medium.woff2) format("woff2"), url(../../index/fonts/OPPOSans3.0cn-Medium.woff) format("woff"), url(../../index/fonts/OPPOSans3.0cn-Medium.ttf) format("truetype");
    font-variation-settings: 'wght' 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "OPPOSans-Ver2-Regular";
    src: url(../../index/fonts/OPPOSans3.0cn-Regular.woff2) format("woff2"), url(../../index/fonts/OPPOSans3.0cn-Regular.woff) format("woff"), url(../../index/fonts/OPPOSans3.0cn-Regular.ttf) format("truetype");
    font-variation-settings: 'wght' 400;
    font-style: normal;
    font-display: swap;
}
/* oppo sans 1.0 兼容字体 */
@font-face {
    font-family: 'OPPOSans-Bold';
    src: url(../../index/fonts/OPPOSans-B.woff2) format("woff2"), url(../../index/fonts/OPPOSans-B.woff) format("woff"), url(../../index/fonts/OPPOSans-B.ttf) format("truetype");
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: 'OPPOSans-Medium';
    src: url(../../index/fonts/OPPOSans-M.woff2) format("woff2"), url(../../index/fonts/OPPOSans-M.woff) format("woff"), url(../../index/fonts/OPPOSans-M.ttf) format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}
@font-face {
    font-family: 'OPPOSans-Regular';
    src: url(../../index/fonts/OPPOSans-R.woff2) format("woff2"), url(../../index/fonts/OPPOSans-R.woff) format("woff"), url(../../index/fonts/OPPOSans-R.ttf) format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}
*, *::after, *::before {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    font-family: "OPPOSans-Ver2-Regular", sans-serif !important;
}
/*产品展示*/
.pro-center{width: 100%;height: auto;overflow: hidden;padding: 35px 0 30px 0;background: #ffffff;}
.pro-center .title{font-size: 34px;text-align: center;padding-bottom: 5px;color: #333333;letter-spacing: 1px;}
.pro-center .sub-title{font-size: 20px;text-align: center;color: #333333;}
.pro-center .sub-title span{display: inline-block;height: 30px;line-height: 30px;width: auto;}
.pro-center .sub-title span.text{padding: 0 10px;}
/*产品展示左侧*/
.pro-left{float: left;width: 240px;box-sizing: border-box;box-shadow: 0px 10px 10px #f7f7f7;background: #fff;padding: 5px;}
.pro-content{width: 100%;}
.pro-right{float: right;width: calc(100% - 0px);}
.pro-right
.pro-left .left-title{background: #317fff;height: 110px;line-height: 110px;text-align: center;}
.pro-left .left-title span{display: inline-block;color: #FFFFFF;font-size: 24px;font-weight: bold;}
.pro-left .left-title span.text{padding: 0 10px;}
.pro-right.active ul {width:100% !important;}
.pro-right.active ul a {width:100% !important;}
.pro-left .left-category ul li{height: 60px;line-height: 60px;font-size: 16px;text-align: center;cursor: pointer;color: #999999;width: 100%;border-bottom: 1px solid #fff; text-align: left;text-indent:20px;}
.pro-left .left-category ul li.on{background: #dd393d;color: #FFFFFF;}
.pro-left .left-category ul li:hover{background: #dd393d;color: #FFFFFF;}
.pro-left .left-contact {margin-top: 37px;margin-bottom: 37px;text-indent: 70px;background: url(../image/tel.png) left 20px center no-repeat;}
.pro-left .left-contact p{color: #317fff;font-size: 14px;}
.pro-left .left-contact p.tel{font-size: 20px;padding-top: 10px;}

.pro-rights{float: right;width: calc(100% - 0px);}
.pro-left .left-categorys ul {width:100% !important;}
.pro-left .left-categorys ul li{height: 60px;line-height: 60px;font-size: 16px;text-align: center;cursor: pointer;color: #999999;width: 100%;border-bottom: 1px solid #fff; text-align: left;text-indent:20px;}
.pro-left .left-categorys ul li.on{background: #dd393d;color: #FFFFFF;}
.pro-left .left-categorys ul li:hover{background: #dd393d;color: #FFFFFF;}
/*产品展示右侧*/
.pro-right{display: none;}
.pro-right ul li{float: left;width: calc(25% - 20px);background: #f7f7f7;border: 1px solid #f7f7f7;margin-right: 20px !important;box-sizing: border-box;margin-bottom: 35px;transition: all .3s linear;}
.pro-right ul li:nth-child(3n){margin-right: 0;}
.pro-right ul li .img{width:100%;overflow: hidden;}
.pro-right ul li img{width:100%;max-width: inherit;}
.pro-right ul li p{height: 50px;line-height: 50px;text-align: center;font-size: 18px;color: #333333;}
.pro-right ul li a{padding-left: 0px !important;padding-right: 0px !important;}
.pro-right.active{display: block;}
.pro-right ul li:hover{box-shadow: 0px 0px 15px #fff;transition: all .2s linear;}
/*产品展示右侧*/
.pro-rights{display: none;}
.pro-rights ul li{float: left;width: calc(20% - 5px);background: #f7f7f7;border: 1px solid #f7f7f7;margin-right: 5px !important;box-sizing: border-box;margin-bottom: 7px;transition: all .3s linear;height: 60px;line-height: 60px;border-bottom: 1px solid #fff;background: #fff9;}
.pro-rights ul li:nth-child(3n){margin-right: 0;}
.pro-rights ul li .img{width:100%;height:230px;overflow: hidden;}
.pro-rights ul li img{width:100%;}
.pro-rights ul li a{height: 60px;line-height: 60px !important;text-align: center;font-size: 18px;color: #333333;width: 100%;text-align: center;}
.pro-rights.active{display: block;}
.pro-rights ul li:hover{box-shadow: 0px 0px 15px #fff;transition: all .2s linear;background: #dd393d;}
.pro-rights ul li:hover a{color: #fff !important;}