/* Minification failed. Returning unminified contents.
(46,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,109): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(76,106): run-time error CSS1039: Token not allowed after unary operator: '-bout-color'
(83,109): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(84,106): run-time error CSS1039: Token not allowed after unary operator: '-bout-color'
(89,109): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(90,106): run-time error CSS1039: Token not allowed after unary operator: '-bout-color'
(95,125): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(96,138): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(97,144): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(99,63): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(100,75): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(101,87): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
 */
@import url('//at.alicdn.com/t/c/font_5052471_rrwm1l0s92.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.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins-Light";
  src: url("/dist/fonts/Poppins-Light.woff2") format("woff2"),
       url("/dist/fonts/Poppins-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century-Gothic";
  src: url("/dist/fonts/Century-Gothic.woff2") format("woff2"),
       url("/dist/fonts/Century-Gothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century-Gothic-Bold";
  src: url("/dist/fonts/Century-Gothic-Bold.woff2") format("woff2"),
       url("/dist/fonts/Century-Gothic-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
	--fontfamily: "Century-Gothic","Arial", "Helvetica","sans-serif";
	--size:100px;
	--main-color:#e6002d;
    --bout-color:#0e6aed;
}


@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*="fontfamilybold1_"]{ font-family: "Poppins-Bold";}
[class*="fontfamily1_"]{ font-family: "Poppins-Regular";}
[class*="fontfamilylight1_"]{ font-family: "Poppins-Light";}
[class*="fontfamilybold2_"]{ font-family: "Century-Gothic-Bold";}
[class*="fontfamily2_"]{ font-family: "Century-Gothic";}

[class*="facebook_"]{ background: #3B5998!important; color: #fff;}
[class*="linkedin_"]{ background: #0083BE!important; color: #fff;}
[class*="twitter_"]{ background: #00ABF1!important; color: #fff;}
[class*="youtube_"]{ background: #CA2127!important; color: #fff;}

.btn1{ position: relative; z-index: 1; overflow: hidden;}
.btn1 span{ display: inline-block; position: relative; transition: transform .4s ease-in-out; z-index: 1; overflow: visible;}
.btn1 span:after{ content: attr(data-title); position: absolute; left: -300%; top: 0;}
.btn1:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--main-color); z-index: -2;}
.btn1:after{ content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: var(--bout-color); z-index: -1; transition: width 0.4s ease-in-out;}
.btn1:hover:after{ width: 100%; left: 0;}
.btn1:hover>span{ transform: translateX(300%);}

.btn2{ position: relative; z-index: 1; overflow: hidden;}
.btn2 span{ display: inline-block; position: relative; transition: transform .4s ease-in-out; z-index: 1; overflow: visible;}
.btn2 span:after{ content: attr(data-title); position: absolute; left: 0; top: 300%;}
.btn2:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--main-color); z-index: -2;}
.btn2:after{ content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: var(--bout-color); z-index: -1; transition: width 0.4s ease-in-out;}
.btn2:hover:after{ width: 100%; left: 0;}
.btn2:hover>span{ transform: translateY(-300%);}

.btn3{ position: relative; z-index: 1; overflow: hidden;}
.btn3:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--main-color); z-index: -2;}
.btn3:after{ content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: var(--bout-color); z-index: -1; transition: width 0.4s ease-in-out;}
.btn3:hover:after{ width: 100%; left: 0;}

/*手机导航*/
.menu_btn{ width: 22px; height: 20px; cursor: pointer; display: inline-block; z-index: 8; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.menu_btn .menu_btn_top{ position:absolute; top:5px; left:50%; width:22px; height:3px; border-radius:1.5px; background:var(--main-color); -webkit-transition:top .3s,background-color .3s,transform .3s cubic-bezier(.5,.2,.6,1.4),-o-transform .3s cubic-bezier(.5,.2,.6,1.4),-ms-transform .3s cubic-bezier(.5,.2,.6,1.4),-moz-transform .3s cubic-bezier(.5,.2,.6,1.4),-webkit-transform .3s cubic-bezier(.5,.2,.6,1.4);transition:top .3s,background-color .3s,transform .3s cubic-bezier(.5,.2,.6,1.4),-o-transform .3s cubic-bezier(.5,.2,.6,1.4),-ms-transform .3s cubic-bezier(.5,.2,.6,1.4),-moz-transform .3s cubic-bezier(.5,.2,.6,1.4),-webkit-transform .3s cubic-bezier(.5,.2,.6,1.4);-webkit-transform:translate(-50%,-50%) rotate(0);-moz-transform:translate(-50%,-50%) rotate(0);-o-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0);-ms-transform:translate(-50%,-50%) rotate(0);}
.menu_btn .menu_btn_med{ position:absolute; top:11px; left:calc(50% - 3px); width:15px; height:3px; border-radius:1.5px; background:var(--main-color); -webkit-transition:top .3s,background-color .3s,transform .3s cubic-bezier(.5,.2,.6,1.4),-o-transform .3s cubic-bezier(.5,.2,.6,1.4),-ms-transform .3s cubic-bezier(.5,.2,.6,1.4),-moz-transform .3s cubic-bezier(.5,.2,.6,1.4),-webkit-transform .3s cubic-bezier(.5,.2,.6,1.4);transition:top .3s,background-color .3s,transform .3s cubic-bezier(.5,.2,.6,1.4),-o-transform .3s cubic-bezier(.5,.2,.6,1.4),-ms-transform .3s cubic-bezier(.5,.2,.6,1.4),-moz-transform .3s cubic-bezier(.5,.2,.6,1.4),-webkit-transform .3s cubic-bezier(.5,.2,.6,1.4);-webkit-transform:translate(-50%,-50%) rotate(0);-moz-transform:translate(-50%,-50%) rotate(0);-o-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0);-ms-transform:translate(-50%,-50%) rotate(0);}
.menu_btn .menu_btn_bot{ position:absolute; top:17px; left:calc(50% - 2px); width:18px; height:3px; border-radius:1.5px; background-color:var(--main-color); -webkit-transition:top .3s,background-color .3s,transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-o-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-ms-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-moz-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-webkit-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s;transition:top .3s,background-color .3s,transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-o-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-ms-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-moz-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s,-webkit-transform .18s cubic-bezier(.5,.2,.6,1.4) .12s;-webkit-transform:translate(-50%,-50%) rotate(0);-moz-transform:translate(-50%,-50%) rotate(0);-o-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0);-ms-transform:translate(-50%,-50%) rotate(0);}

.menu_btn[type=close] .menu_btn_top{ top:50%; background:var(--main-color); -webkit-transform:translate(-50%,-50%) rotate(135deg); -moz-transform:translate(-50%,-50%) rotate(135deg); -o-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg); -ms-transform:translate(-50%,-50%) rotate(135deg);}
.menu_btn[type=close] .menu_btn_med{ top:calc(50% + 3px); background:var(--main-color); -webkit-transform:translate(-50%,-50%) rotate(135deg); -moz-transform:translate(-50%,-50%) rotate(135deg); -o-transform:translate(-50%,-50%) rotate(135deg);transform:translate(-50%,-50%) rotate(135deg); -ms-transform:translate(-50%,-50%) rotate(135deg);}
.menu_btn[type=close] .menu_btn_bot{ left: 50%; width: 22px; top:50%; background:var(--main-color); -webkit-transform:translate(-50%,-50%) rotate(45deg); -moz-transform:translate(-50%,-50%) rotate(45deg); -o-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg); -ms-transform:translate(-50%,-50%) rotate(45deg);}


@media (min-width:1px) and  (max-width:1179px){
.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: 6; 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;}

.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);}


@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 fadeup {
  0% {transform: translateY(10px);opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}
@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.9);
  transform: scale(1.9);
}
100% {
  opacity: 0;
  -webkit-transform: scale(2.9);
  transform: scale(2.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: 0px;height: 0px;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(0deg);
	}
	100%{
		transform: rotate(360deg) ;
	}
}

#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 circle-opacity{
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}
/**********公共样式**********/

