﻿@import url('//at.alicdn.com/t/c/font_5151162_qc0177hqn6h.css');

@font-face {
  font-family: "Poppins-Regular";
  src: url("/dist/fonts/Poppins-Regular.woff2") format("woff2"),
       url("/dist/fonts/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display:swap ;
}

@font-face {
  font-family: "Poppins-Bold";
  src: url("/dist/fonts/Poppins-Bold.woff2") format("woff2"),
       url("/dist/fonts/Poppins-Bold-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display:swap ;
}


:root {
	--fontfamily: "Poppins-Regular","Arial", "Helvetica","sans-serif";
	--size:100px;
    --fonts-bold:"Poppins-Bold";
    --fonts-regular:"Poppins-Regular";
    --color:#333;
	--main-color:#e60012;
    --bout-color:#a00d24;
    --hover-color:#000;
}


@media (max-width:1700px){:root{--size:95px}}
@media (max-width:1600px){:root{--size:85px}}
@media (max-width:1440px){:root{--size:75px}}
@media (max-width:1240px){:root{--size:65px}}
@media (max-width:1081px){:root{--size:70px}}
@media (max-width:991px){:root{--size:80px}}
@media (max-width:639px){:root{--size:65px}}

[class*="bold_"]{ font-family: var(--fonts-bold);}
[class*="font_"]{ font-family: var(--fonts-regular);}


[class*="facebook_"]{ color: #1778f2!important; background: #e4e4e4;}
[class*="linkedin_"]{ color: #2468b3!important; background: #e4e4e4;}
[class*="twitter_"]{ color: #000!important; background: #e4e4e4;}
[class*="youtube_"]{ color: #ce2020!important; background: #e4e4e4;}
[class*="tiktok_"]{ color: #010404!important; background: #e4e4e4;}
[class*="whatsapp_"]{ color: #25d366!important; background: #e4e4e4;}


/*手机导航*/
.menu_btn{--bar-h:3px;--bar-r:1.5px;--ease:cubic-bezier(0.5, 0.2, 0.6, 1.4);--t:0.3s;position:absolute;z-index:8;top:50%;right:15px;width:22px;height:20px;transform:translateY(-50%);cursor:pointer}
.menu_btn .menu_btn_bot,.menu_btn .menu_btn_med,.menu_btn .menu_btn_top{position:absolute;border-radius:var(--bar-r);background:var(--main-color);transform:translate(-50%,-50%) rotate(0);transition:top var(--t),left var(--t),width var(--t),background-color var(--t),transform var(--t) var(--ease)}
.menu_btn .menu_btn_top{top:5px;left:50%;width:22px;height:var(--bar-h)}
.menu_btn .menu_btn_med{top:11px;left:calc(50% - 3px);width:15px;height:var(--bar-h)}
.menu_btn .menu_btn_bot{top:17px;left:calc(50% - 2px);width:18px;height:var(--bar-h);transition:top var(--t),left var(--t),width var(--t),background-color var(--t),transform .18s var(--ease) .12s}
.menu_btn[type=close] .menu_btn_top{top:50%;transform:translate(-50%,-50%) rotate(135deg)}
.menu_btn[type=close] .menu_btn_med{top:calc(50% + 3px);transform:translate(-50%,-50%) rotate(135deg)}
.menu_btn[type=close] .menu_btn_bot{top:50%;left:50%;width:22px;transform:translate(-50%,-50%) rotate(45deg)}


@media (min-width:1px) and  (max-width:1080px){
.menu_btn{ display: inline-block; }
}


/**********公共样式**********/
.flex_between{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.flex_betweenlist{ display: flex; flex-wrap: wrap; }

.white{ -webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);}
.clamp{ white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
.clamp2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.clamp3{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.clamp4{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.clamp5{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;}
.clamp6{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 15; overflow: hidden;}
.clamp7{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;}
.clamp8{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;}
.clamp9{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden;}

.btnmore{ font-size:14.69px; font-family:var(--fonts-bold); padding:0.155rem 0.26rem; border-radius:0.3rem; box-sizing:border-box; display:inline-flex; align-items:center; z-index:1; overflow:hidden; position:relative;}
.btnmore>span{ display:inline-block; line-height:1;}
.btnmore>span:after{ content:""; border:2px solid #000; position:absolute; left:0; top:0; right:0; bottom:0;  border-radius:0.3rem; z-index:-1;}
.btnmore:after{ content:""; display:block; width:10px; height:10px; background:var(--main-color); border-radius:50%; margin-left:0.3rem;}
.btnmore:hover span:after{animation: clippath 1s  linear; animation-iteration-count: 1; border-color:var(--main-color);}

.Filterimg{ position: relative;}
.Filterimg:before {background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.3) 100%) repeat scroll 0 0; content: "";display: block;height: 100%;left: -75%;position: absolute;top: 0;transform: skewX(-25deg);width: 50%;z-index: 2;opacity: 0.35;transition: all 0.4s ease;}
.Filterimg:after{content: '';display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: all 0.4s ease;}
.Filterimg:hover:before {animation: shine 1.5s;-webkit-animation: shine 1.5s;}
.Filterimg:hover:after{background-color: rgba(0,0,0,0.1);-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;transition-duration: 1s;}

.picimg{ position: relative;}
.picimg:after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(255,255,255,.3);content:'';-webkit-transition:-webkit-transform .6s;-o-transition:transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);}
.picimg:hover:after {-webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);}


#mobMenu{min-height:50px;border:1px solid #dddddd;position:fixed;bottom:0;width:100%;display:none;z-index:11;background-color:#fff;}
#mobMenu .foot_nav{text-align:center;color: #898989;font-size:14px;flex:1;}
#mobMenu .foot_nav i{display: block;padding: 3px 0px 0px 0px;font-size:18px;line-height:24px;}
#mobMenu .foot_nav .hamburger{position: inherit;float: none;margin: 0 auto;width:100%;}
@media (min-width:1px) and (max-width:767px) {
    #mobMenu{display:flex;}
}

@keyframes pulse-orange{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,255,255,.7)}
70%{transform:scale(1);box-shadow:0 0 0 20px rgba(255,255,255,0)}
100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

@keyframes ripple{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
5%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}
100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}
}

@keyframes fadeup{0%{transform:translateY(-10px);opacity:0}
100%{transform:translateY(0);opacity:1}
}

@keyframes inf_anim{0%,100%{transform:scale(1);opacity:1}
25%{transform:scale(.7);opacity:.9}
50%{transform:scale(1.1);opacity:.8}
75%{transform:scale(.7);opacity:.9}
}

@keyframes icojumpA{0%{-webkit-transform:translateX(0)}
50%{-webkit-transform:translateX(-20px)}
100%{-webkit-transform:translateX(0)}
}

@-webkit-keyframes opac{from{opacity:1;width:0;height:0;top:50%;left:50%}
to{opacity:0;width:100%;height:100%;top:0;left:0}
}

@-webkit-keyframes show{25%{opacity:1}
50%{opacity:0}
75%{opacity:1}
100%{opacity:0}
}

@-webkit-keyframes shine{100%{left:125%}
}

@keyframes shine{100%{left:125%}
}

@keyframes load{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

@keyframes clippath{0%,100%{clip-path:inset(0 0 95% 0)}
25%{clip-path:inset(0 95% 0 0)}
50%{clip-path:inset(95% 0 0 0)}
75%{clip-path:inset(0 0 0 95%)}
}

@keyframes circle-opacity{from{transform:translateY(-300%)}
to{transform:translateY(-50%)}
}

/**********公共样式**********/
