﻿@charset "utf-8";
:root{
 --width:calc((100vw - 15rem) / 2);
}
@media (max-width:1024px){
:root{--width:0.4rem;}
}
@media (max-width:768px){
:root{--width:0.3rem;}
}


.wp {max-width: 15rem;margin: 0 auto;width: 94%}
.wp18{width:17.2rem;margin:0 auto;}
@media(max-width: 1780px) {
    .wp18{padding: 0 32px;width: 100%;}
}
.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 }
  .wp18 {width:auto;max-width: inherit;margin-left: .4rem;margin-right: .4rem }
}
@media (max-width:900px){
html{font-size: 85px!important;}
}
@media (max-width:768px){
html{font-size: 80px!important;}
 .wp {margin-left: .3rem;margin-right: .3rem}
 .wp18 {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}

.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;}
.line5{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;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-fff{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(#0D8B62,#0D8B62);}
.hover-line-fff{background-image: linear-gradient(#fff,#fff);}
a:hover .hover-line{background-size: 100% 1px;}
a:hover .hover-line-fff{background-size: 100% 1px;}

.f18-28-2-r-333{font-size: 0.18rem;line-height: 0.28rem;height: 0.56rem;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.18rem;line-height: 0.28rem;height: 0.28rem;color: #333333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;display: block\0;}
.f20-28-1-r-333{font-size: 0.20rem;line-height: 0.28rem;height: 0.28rem;color: #333333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: block\0;}
.f14-24-3-r-666{font-size: 0.14rem;line-height: 0.24rem;height: 0.72rem;color: #666;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;display: block\0;}
.f14-24-2-r-666{font-size: 0.14rem;line-height: 0.24rem;height: 0.48rem;color: #666;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: block\0;}

.c-fff{color: #FFFFFF;}
.c-32{color: #323232;}
.c-666{color: #666;}
.c-zs{color: #0D8B62;}
.text-l{text-align: left;}
.text-c{text-align: center;}

a .hover-zs{transition: 0.4s all;}
a:hover .hover-zs{color:#0D8B62;transition: 0.4s all;}

.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%}
}



.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.4);opacity: 0;}
}
 @keyframes ripple2 {
    0% {transform: scale(1);opacity: 0.8;}
    50% {opacity: 0.4;}
    100% {transform: scale(1.8);opacity: 0;}
}
/* 上下缓动 */
 @keyframes move1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(-0.1rem);}
    100% {transform: translateY(0);}
}




