@charset"utf-8";
@import '//at.alicdn.com/t/font_629858_26o4c3d2qd6.css';

/* CSS Document */

/*reset*/
header,nav,section,footer,article,aside{display:block;box-sizing:border-box;}
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,img,span,em,i,b,a,table,thead,tbody,tfoot,th,tr,td,form,input,textarea,select,option,pre,hr,label,button{padding:0;margin:0;box-sizing:border-box;}
li{list-style:none;}
img{border:none;vertical-align:top;}
em,i{font-style:normal;}
h1,h2,h3,h4,h5,h6,b,label,th{font-weight:normal;}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
table{border-collapse:collapse;}
input,textarea,select,button{outline:none;font-family:arial,helvetica,sans-serif;cursor:pointer;background-color:transparent;color: #4a4a4a;border:0;}
textarea{resize:none;overflow:auto;}
input[type="text"],input[type="number"],input[type="password"],input[type="email"],input[type="url"],input[type="submit"]{-webkit-appearance:none;border:1px solid #ddd;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
select,textarea{border:.01rem solid #ddd;}

/*public*/
html{width:100%;font-size:62.5%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{width:100%;font-size:.14rem;font-family:arial,helvetica,sans-serif;background-color: #fff;color: #4a4a4a;overflow-x:hidden;}
h1{ font-size:.18rem;}
h2{ font-size:.16rem;}
h3,h4,h5,h6{ font-size: .14rem;}
a{color:inherit;}
a:active,button:active{opacity: 0.8;}
img{max-width:100%!important;}
hr{border:none;border-bottom:.01rem solid #000;}
::-webkit-input-placeholder{ color:#a8b7c7; font-size: .14rem;}
input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 10rem #fff;}
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
.fl{float:left!important;}
.fr{float:right!important;}
.tc{text-align:center!important;}
.tl{text-align:left!important;}
.tr{text-align:right!important;}
.show{display:block;}
.hide{display:none;}

/*滤镜*/
.filter-grayscale{ filter:grayscale(1); -webkit-filter:grayscale(1);}/*灰度,值为0-1之间的小数*/
.filter-sepia{ filter:sepia(1); -webkit-filter:sepia(1);}/*褐色,值为0-1之间的小数*/
.filter-saturate{ filter:saturate(10); -webkit-filter:saturate(10);}/*饱和度,值为num*/
.filter-hue-rotate{ filter:hue-rotate(180deg); -webkit-filter:hue-rotate(180deg);}/*色相旋转    ,值为angle*/
.filter-invert{ filter:invert(0.3); -webkit-filter:invert(0.3);}/*反色,值为0-1之间的小数*/
.filter-opacity{ filter:opacity(1); -webkit-filter:opacity(1);}/*透明度,值为0-1之间的小数*/
.filter-brightness{ filter:brightness(0.5); -webkit-filter:brightness(0.5);}/*亮度,值为0-1之间的小数*/
.filter-contrast{ filter:contrast(5); -webkit-filter:contrast(5);}/*对比度,值为num*/
.filter-blur{ filter:blur(2px); -webkit-filter:blur(2px);}/*模糊,值为length*/
.filter-drop-shadow{ filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); -webkit-filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.5));}/*阴影,左偏移,上偏移,模糊半径,颜色*/

/*单行与多行省略*/
.overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}
*[class*="multiLine"]{display:-webkit-box;overflow:hidden;word-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.multiLine-2{-webkit-line-clamp:2;}
.multiLine-3{-webkit-line-clamp:3;}
.multiLine-4{-webkit-line-clamp:4;}
.multiLine-5{-webkit-line-clamp:5;}

/*分上下两边的遮罩*/
.bothMask:before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(to bottom,rgba(255,255,255,0.95),rgba(255,255,255,0.6)) , linear-gradient(to top,rgba(255,255,255,0.95),rgba(255,255,255,0.6));background-repeat:no-repeat;background-position:top,bottom;background-size:100% 90px;}
.bothMask:after{content:"";width:100%;height:30px;border-top:1px solid #bbb;border-bottom:1px solid #ddd;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);}

/*开启硬件加速*/
.willChange{will-change:transform;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);}

/*过渡与动画*/
.transition{transition:all 1s ease-out 0s;-webkit-transition:all 1s ease-out 0s;}
.animation{display: inline-block;animation:autoplay 1s linear infinite reverse;-webkit-animation:autoplay 1s linear infinite reverse;}
.animation:hover{animation-play-state:paused;-webkit-animation-play-state:paused;}
@keyframes autoplay{
0%{ transform: rotateX(0) translate3d(0,0,0);}
50%{ transform: rotateX(0) translate3d(0,-20%,0);}
100%{ transform: rotateX(0) translate3d(0,0,0);}
}
@-webkit-keyframes autoplay{
0%{ -webkit-transform: rotateX(0) translate3d(0,0,0);}
50%{ -webkit-transform: rotateX(0) translate3d(0,-20%,0);}
100%{ -webkit-transform: rotateX(0) translate3d(0,0,0);}
}
.animation1{ display: inline-block; width: 0; height: 20px; animation:autoplay1 1s linear infinite;-webkit-animation:autoplay1 1s linear infinite; position: relative; overflow:hidden;}
.animation1:before{ content:"..."; width:30px; height: 20px; line-height: 20px; font-size:20px; position: absolute; left: 0; top: 0;}
@keyframes autoplay1{
0%{ width:0;}
50%{ width:30px;}
100%{ width:0;}
}
@media all and (max-width:320px){}
@media all and (min-width:321px) and (max-width:375px){}
@media all and (min-width:376px){}

/*公共会话框*/
.yyd-dialog{ width: 100%; height: 100%; background: #fff; transition:transform 0.3s ease-out 0s;-webkit-transition:-webkit-transform 0.3s ease-out 0s; transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); position: fixed ; left: 0; top: 0; z-index: 100; overflow-y: auto;}
.yyd-dialog.active{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}

/*效果选项卡*/
.yyd-tabBar{ height: 3px; background-color: #f20532; position: absolute; left: 50%; right: 50%; bottom: 2px;}
.yyd-tabBar.forward{ transition: right 0.3s cubic-bezier(0.61, 0.01, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s; -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;}
.yyd-tabBar.backward{ transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1); -webkit-transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);}

/*checkbox开关按钮样式(建议用在label上，火狐下不支持input伪类)*/
.yyd-checkSwitch{ appearance:none; -webkit-appearance:none; width:50px; height:30px; border:1px solid #ddd; border-radius:15px; background-color: #dfdfdf; transition: background-color 0.1s, border 0.1s; -webkit-transition: background-color 0.1s, border 0.1s; outline:none; position:relative;}
.yyd-checkSwitch:before{ content:""; width:100%; height:100%; border-radius:15px; background-color:#fdfdfd;  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); position:absolute; left:0; top:0;}
.yyd-checkSwitch:after{ content:""; width:28px; height:28px; border-radius:14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); background-color:#fff; position:absolute; left:0; top:0; transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35); -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);}

.yyd-checkSwitch.active{ background-color:#ffe26d; border-color:#ffe26d;}
.yyd-checkSwitch.active:before{ transform: scale(0,0); -webkit-transform: scale(0,0);}
.yyd-checkSwitch.active:after{ transform: translate3d(20px,0,0); -webkit-transform: translate3d(20px,0,0);}
.yyd-checkSwitch input{ display:none;}

/*layout*/
#webpack-hot-middleware-clientOverlay{ display:none!important;}

/*首页*/