@charset "utf-8";
:root{
 --width:calc((100vw - 12rem) / 2);
}
@media (max-width:1024px){
:root{--width:3vw;}
}
@media (max-width:750px){
:root{--width:5vw;}
}

.clearfix:after{content: ""; display: block; height: 0; clear:both; visibility: hidden;}
.clear:after{content: ""; display: block; height: 0; clear:both; visibility: hidden;}
.flex{display: flex;justify-content: space-between;flex-wrap: wrap;}
.flex-center{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.flex-start{display: flex;justify-content: flex-start;flex-wrap: wrap;}
.flex-end{display: flex;justify-content: flex-end;flex-wrap: wrap;}


.fl{ float:left}
.fr{ float:right}
.line1{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;display: block\0;}
.line2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: block\0;}
.line3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;display: block\0;}
.line4{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;display: block\0;}
.hover-line{background-repeat: no-repeat;background-size: 0 1px;background-position:0 100%;transition: background-size 0.5s ease-out 0s;}
.hover-line{background-image: linear-gradient(#88251c,#88251c);}
a:hover .hover-line{background-size: 100% 1px;}
.f18-28-2-r-333{font-size: 0.16rem;line-height: 0.24rem;height: 0.48rem;color: #333333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: block\0;}
.f18-28-1-r-333{font-size: 0.16rem;line-height: 0.24rem;height: 0.48rem;color: #333333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: block\0;}


.pic{position: relative;overflow: hidden;transition: 0.4s;background-position: center center;}
.pic img{display: block;width: 100%;object-fit: cover;transition: 0.4s ease-in;/* opacity: 0; */}

a:hover .pic img{transform:scale(1.1);transition: 0.4s ease-in;}
.zoomImg:before{position:absolute;top:0;left:-90%;z-index:2;display:block;content:"";width:50%;height:100%;opacity:.25;pointer-events:none;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);-ms-transform:skewX(-25deg);transform:skewX(-25deg);z-index: 3}
@media (min-width: 1025px){
.zoomImg:hover:before{-webkit-animation:shine .75s;animation:shine .75s}
a:hover .zoomImg:before{-webkit-animation:shine .75s;animation:shine .75s}
}
@-webkit-keyframes shine{100%{left:125%}
}
@keyframes shine{100%{left:125%}
}
.wp {max-width: 12rem;margin: 0 auto;width: 94%}
.wp2 {max-width: 14.4rem;margin: 0 auto;width: 94%}
.mt7{margin-top: 0.7rem;}
@media (max-width:1024px){
	.mt7{margin-top: 0.4rem;}
}

@media (max-width:1024px){
html{font-size: 90px!important;}
  .wp {width:auto;max-width: inherit;margin-left: .4rem;margin-right: .4rem }
  .wp2 {width:auto;max-width: inherit;margin-left: .4rem;margin-right: .4rem }
}
@media (max-width:900px){
html{font-size: 85px!important;}
}
@media (max-width:750px){
html{font-size: 80px!important;}
 .wp {margin-left: .3rem;margin-right: .3rem}
 .wp2 {margin-left: .3rem;margin-right: .3rem}
}
@media (max-width:540px){
html{font-size: 75px!important;}
body{font-size: .18rem}
}
@media (max-width:430px){
html{font-size: 80px!important;}
}

img{ vertical-align:middle}


.totop{position:fixed;z-index:90;bottom: .3rem;right: .1rem;box-sizing:border-box;text-align:center;cursor:pointer;width: .46rem;height: .46rem;line-height: .46rem;background:linear-gradient(to bottom,#F4DFC7 ,#90091F );;overflow:hidden;border-radius: 50%;display: none}
.totop svg{width: .22rem;height: .22rem;display: inline-block;fill: #fff;vertical-align: middle;margin: -3px 0 0;}

/* 自转动画 */
@-webkit-keyframes play {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
@-moz-keyframes play {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
 /* 涟漪动画 */

 @keyframes ripple {
    0% {transform: scale(1);opacity: 0.8;}
    50% {opacity: 0.4;}
    100% {transform: scale(1.1);opacity: 0;}
}
 @keyframes ripple2 {
    0% {transform: scale(1);opacity: 0.8;}
    50% {opacity: 0.4;}
    100% {transform: scale(1.4);opacity: 0;}
}
/* 上下缓动 */
 @keyframes move1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(-0.1rem);}
    100% {transform: translateY(0);}
}