@import url("./rem.css");
@import url('../fonts/iconfont.css');
/* ---------- reset ---------- */
&:root{
  --color:#FF3333;
  --color2:#CC3333;
}
html,body{min-height: 100%;}
*{margin:0;padding:0;border:0;box-sizing:border-box;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{font-family:Microsoft YaHei,"微软雅黑",Arial,"Hiragino Sans GB","sans-serif";overflow-x:hidden;font-weight:400;color:#333;line-height:1.35;font-size:.16rem;}
img{border:0;max-width:100%;}
ul,li,ol{list-style:none;margin:0;padding:0;}
em,i{font-style:normal;}
.hide{display:none!important;}
a,a:link{text-decoration:none;color:#333;}
a:hover,a:active{color:#FF3333;text-decoration:none;}
.clearfix::after{content:"";display:table;clear:both;}
button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
.ac{text-align: center;}
/* ---------- 辅助布局 ---------- */
.ovh{overflow:hidden;}
.upp{text-transform:uppercase;}
input,button,textarea{border:0;outline:0;font-family:inherit;font-size:inherit;}
.ep1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ep2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
/* 圆角 */
.radius,.radius img{border-radius:.1rem;}
/* ---------- Flex 工具集 ---------- */
.flex{display:flex;}
.flex-a{flex:1;overflow:hidden;}
.flex-b{display:flex;justify-content:space-between;}
.flex-c{display:flex;justify-content:center;}
.flex-e{display:flex;justify-content:flex-end;}
.flex-w{display:flex;flex-wrap:wrap;}
.flex-ac{display:flex;align-items:center;}
.flex-cb{display:flex;align-items:center;justify-content:space-between;}
.flex-cc{display:flex;align-items:center;justify-content:center;}
.flex-ce{display:flex;align-items:center;justify-content:flex-end;}
.flex-ae{display:flex;align-items:flex-end;justify-content:flex-start;}
.flex-cs{display:flex;align-items:center;justify-content:flex-start;}
.flex-col{display:flex;flex-direction:column;}
.flex-shr{flex-shrink:0;}
/* 滚动条 */
::-webkit-scrollbar{width:8px;height:5px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb{background:#333;}
/* ---------- 栅格系统 ---------- */
.grid{display:flex;flex-wrap:wrap;}
/* 所有列的基础样式 */
[class^="col-"],
[class^="sm-"],
[class^="md-"],
[class^="lg-"],
[class^="xl-"],
[class^="xb-"]{position: relative;width: 100%;}
/* ---------- 基础列 ---------- */
.col{flex-basis: 0;flex-grow: 1;max-width: 100%;}
.col-0{width: auto;max-width: 100%;}
.col-1{width: 8.33333333%;}
.col-2{width: 16.66666667%;}
.col-20{width: 20%;}
.col-3{width: 25%;}
.col-4{width: 33.33333333%;}
.col-5{width: 41.66666667%;}
.col-6{width: 50%;}
.col-7{width: 58.33333333%;}
.col-8{width: 66.66666667%;}
.col-9{width: 75%;}
.col-10{width: 83.33333333%;}
.col-11{width: 91.66666667%;}
.col-12{width: 100%;}
/* ---------- sm ≥ 640px ---------- */
@media (min-width: 640px){
.sm-0{width: auto; max-width: 100%;}
.sm-1{width: 8.33333333%;}
.sm-2{width: 16.66666667%;}
.sm-20{width: 20%;}
.sm-3{width: 25%;}
.sm-4{width: 33.33333333%;}
.sm-5{width: 41.66666667%;}
.sm-6{width: 50%;}
.sm-7{width: 58.33333333%;}
.sm-8{width: 66.66666667%;}
.sm-9{width: 75%;}
.sm-10{width: 83.33333333%;}
.sm-11{width: 91.66666667%;}
.sm-12{width: 100%;}
}
/* ---------- md ≥ 768px ---------- */
@media (min-width: 768px){
.md-0{width: auto; max-width: 100%;}
.md-1{width: 8.33333333%;}
.md-2{width: 16.66666667%;}
.md-20{width: 20%;}
.md-3{width: 25%;}
.md-4{width: 33.33333333%;}
.md-5{width: 41.66666667%;}
.md-6{width: 50%;}
.md-7{width: 58.33333333%;}
.md-8{width: 66.66666667%;}
.md-9{width: 75%;}
.md-10{width: 83.33333333%;}
.md-11{width: 91.66666667%;}
.md-12{width: 100%;}
}
/* ---------- lg ≥ 1024px ---------- */
@media (min-width: 1024px){
.lg-0{width: auto; max-width: 100%;}
.lg-1{width: 8.33333333%;}
.lg-2{width: 16.66666667%;}
.lg-20{width: 20%;}
.lg-3{width: 25%;}
.lg-4{width: 33.33333333%;}
.lg-5{width: 41.66666667%;}
.lg-6{width: 50%;}
.lg-7{width: 58.33333333%;}
.lg-8{width: 66.66666667%;}
.lg-9{width: 75%;}
.lg-10{width: 83.33333333%;}
.lg-11{width: 91.66666667%;}
.lg-12{width: 100%;}
}
/* ---------- xl ≥ 1280px ---------- */
@media (min-width: 1280px){
.xl-0{width: auto; max-width: 100%;}
.xl-1{width: 8.33333333%;}
.xl-2{width: 16.66666667%;}
.xl-20{width: 20%;}
.xl-3{width: 25%;}
.xl-4{width: 33.33333333%;}
.xl-5{width: 41.66666667%;}
.xl-6{width: 50%;}
.xl-7{width: 58.33333333%;}
.xl-8{width: 66.66666667%;}
.xl-9{width: 75%;}
.xl-10{width: 83.33333333%;}
.xl-11{width: 91.66666667%;}
.xl-12{width: 100%;}
}
/* ---------- xb ≥ 1536px ---------- */
@media (min-width: 1536px){
.xb-0{width: auto; max-width: 100%;}
.xb-1{width: 8.33333333%;}
.xb-2{width: 16.66666667%;}
.xb-20{width: 20%;}
.xb-3{width: 25%;}
.xb-4{width: 33.33333333%;}
.xb-5{width: 41.66666667%;}
.xb-6{width: 50%;}
.xb-7{width: 58.33333333%;}
.xb-8{width: 66.66666667%;}
.xb-9{width: 75%;}
.xb-10{width: 83.33333333%;}
.xb-11{width: 91.66666667%;}
.xb-12{width: 100%;}
}
/* 栅格间隙 */
.grid-s > .grid{margin:-0.1rem;}
.grid-s > .grid > [class*="-"]{padding:0.1rem;}
.grid-m > .grid{margin:-0.15rem;}
.grid-m > .grid > [class*="-"]{padding:0.15rem;}
.grid-b > .grid{margin:-0.2rem;}
.grid-b > .grid > [class*="-"]{padding:0.2rem;}
.grid-l > .grid{margin:-0.4rem;}
.grid-l > .grid > [class*="-"]{padding:0.4rem;}
/* ---------- 容器 ---------- */
.wp{width:98%;max-width:1200px;margin:0 auto;}
.show-m{display:none;}
@media (min-width:2000px){
.wp{width:98%;max-width:1520px;margin:0 auto;}
}
@media (max-width:1220px){
.wp{padding:0 .6rem;}
}
@media (max-width:1000px){
.wp{padding:0 .4rem;}
}
@media (max-width:980px){
body{font-size:.18rem;}
.mgrid{flex-wrap:wrap!important;}
.mgrid .flex-a{flex:auto!important;}
.wp{width:100%;padding:0 15px;max-width:100%;}
.mx12{width:100%!important;max-width:100%!important;}
.show-d{display:none!important;}
.show-m{display:block!important;}
.grid-s > .grid{margin:-0.1rem;}
.grid-s > .grid > [class*="-"]{padding:0.1rem;}
.grid-m > .grid{margin:-0.1rem;}
.grid-m > .grid > [class*="-"]{padding:0.1rem;}
.grid-b > .grid{margin:-0.1rem;}
.grid-b > .grid > [class*="-"]{padding:0.1rem;}
.grid-l > .grid{margin:-0.15rem;}
.grid-l > .grid > [class*="-"]{padding:0.15rem;}
}
/* ---------- 字体大小 ---------- */
.iconfont{font-size:.16rem;}
.fb{font-weight:bold}
.text-gray{color:#666;}
/* ---------- 图片特效 ---------- */
.fitImg,.fitImg2{position:relative;overflow:hidden;}
.fitImg{height:0;padding-top:100%;}
.fitImg img,.fitImg2 img{width:100%;height:100%;display:block;position:absolute;top:0;left:0;object-fit:cover;transition:.6s;}
.bimg{overflow:hidden;}
.bimg img{width:100%;display:block;transition:1.5s;object-fit:cover;}
/* zoomImg */
.zoomImg{position: relative;overflow: hidden;}
.zoomImg:before{position: absolute;top: 0;left: -90%;z-index: 2;display: block;content: "";width: 50%;height: 100%;opacity: .6;background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);-webkit-transform: skewX(-25deg);-ms-transform: skewX(-25deg);transform: skewX(-25deg);}
.zoomImg:hover:before{-webkit-animation: shine .75s;animation: shine .75s;}
.item:hover .zoomImg:before {-webkit-animation: shine .75s;animation: shine .75s;}
@-webkit-keyframes shine{100%{left: 125%;};}
@keyframes shine{100%{left: 125%;};}
/* 仅支持 hover 的设备才启用 */
@media(hover:hover){
.fitImg:hover img,.fitImg2:hover img,.item:hover .fitImg img,.item:hover .fitImg2 img{transform:scale(1.08);}
.bimg:hover img,.item:hover .bimg img{transform:scale(1.1);}
}
/* 过渡效果通用 */
.transy{transition:all .3s ease;}
@media(hover:hover){
.transy:hover{transform:translateY(-3px);}
}
/* ---------- 菜单按钮 ---------- */
.menuBtn{width:26px;height:26px;cursor:pointer;transition:.3s;position:absolute;right:0;display:none;}
.menuBtn b{display:block;height:2px;background:#333;margin:6px 0;transition:.3s;}
.menuBtn.open b{display:none;margin:-2px 0 0;position:absolute;left:0;top:50%;width:30px;}
.menuBtn.open b:first-child,.menuBtn.open b:last-child{display:block;}
.menuBtn.open b:first-child{transform:rotate(45deg);}
.menuBtn.open b:last-child{transform:rotate(-45deg);}
/* ---------- 简单动画 ---------- */

@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,50px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-50px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(50px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
.fadeInUp{animation-name:fadeInUp;}
.fadeInLeft{animation-name:fadeInLeft;}
.fadeInRight{animation-name:fadeInRight;}
@media (max-width:980px){
.fadeInLeft,.fadeInRight{animation-name:fadeInUp;}
}