@charset "utf-8";

/*-- 全局reset
-------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

body {
    /* font: 15px/1.5 'Helvetica Neue', 'Helvetica', 'Arial', '\5FAE\8F6F\96C5\9ED1', 'Microsoft YaHei', 'Tahoma', 'Hiragino sans gb', 'SimSun', 'Sans-serif'; */
    color: #333;
}
/*设置默认字体*/
:focus {
    outline: 0;
}

ul,
ol {
    list-style: none;
}

/*重置列表*/
fieldset, img {
    border: 0 none;
     /*vertical-align: top;*/
}

/*重置图片元素*/
address, caption, cite, code, dfn, em, i, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

code, kbd, samp, tt {
    font-size: 100%;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    font-size: 100%;
    outline: none;
}

textarea {
    resize: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*重置表格*/
blockquote, q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

a {
    color: #333;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -moz-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    display: inline-block;

}

a:hover {
    text-decoration: none;
}

/*--清除浮动
-------------------------------------------*/
.cf:before,
.cf:after,
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.cf:after,
.clearfix:after {
    clear: both;
}

.cf,
.clearfix {
    clear: both;
    zoom: 1;
}
.boder-t{border-bottom: 1px solid #E0E0E0;}
/*-- 字号、颜色、外边距、内补丁、居中、行高、显示、隐藏
--------------------------------------------------------------------------*/
.c-000{color: #000;}
.c-333 {color: #333;}

.c-666 {color: #666;}

.c-999 {color: #999;}
.c-252758{color: #252758;/*蓝黑色*/}
.c-8B8C9C{color: #8B8C9C}/*灰色*/
.c-c99334{color: #c99334;}/*橘色*/
.c-0000CC{color: #1f73e5;}/*蓝色色*/
.c-fff{
    color: #fff;
}
.c-f0f0fd{
    color: #f0f0fd;
}
/* 背景色 */
.back{background-color: #333333;}
.white{background-color: #fff;}
.blue{background-color: #1f73e5;}
.b-15b2df{background-color: #15b2df;}
.b-249bed{background-color: #249bed;}
.orange{background-color: #FFB11B;}
.green{background-color: #008947;}
.red{background-color: #DB4D6D;}

/* 字号 */
.f9 {font-size: 9px;-webkit-text-size-adjust: none;}

.f12,
.fb12 {font-size: 12px;}

.f14,
.fb14 {font-size: 14px;}
.f16,
.fb16 {font-size: 16px;}

.f18,
.fb18 {font-size: 18px;}

.f20,
.fb20 {font-size: 20px;}

.fb,
.fb12,
.fb14,
.fb16,
.fb18,
.fb20 {font-weight: 700;}

.fs5{font-size: 5vw;}
.fs4{font-size: 4vw;}
.fs3{font-size: 3vw;}
.fs2{font-size: 2vw;}
.fs1-8{font-size: 1.8vw;}
.fs2-5{font-size: 2.5vw;}
.fs1-5{font-size: 1.5vw;}
.fs1-3{font-size: 1.3vw;}
.fs1-1{font-size: 1.1vw;}
.fs1{font-size: 1vw;}
.fsr1{font-size: 1rem;}
.fsr1-2{font-size: 1.2rem;}
.fsr1-5{font-size: 1.5rem;}
.fsr2{font-size: 2rem;}
/* 字体间距 */
.ls{letter-spacing: .001em;}
/*  居中 */
.tc {text-align: center;}

.tr {text-align: right;}
.tl { text-align: left;}

.hide {
    display: none !important;
}
.dis_show {
    display: block !important;
}
/*文字隐藏,省略号*/
.ti,
.te {white-space: nowrap;overflow: hidden;}

.ti {text-indent: -999em;}

.te {text-overflow: ellipsis;}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.ellipsis-mul{
   display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ellipsis-mul2 {
    -webkit-line-clamp: 2; /* 定义文本的行数 */
}

.ellipsis-mul3 {
    -webkit-line-clamp: 3; /* 定义文本的行数 */
}
.ellipsis-mul4 {
    -webkit-line-clamp: 4; /* 定义文本的行数 */
}
/* 边距 */
.p10{
    padding: 10px;
}
.p20{
    padding: 20px;
}
.p10tb{
    padding: 10px 0;
}
.p20tb{
    padding: 20px 0;
}
.pt10{
    padding-top: 10px;
}
.pb20{
    padding-bottom: 20px;
}
.mtb10{ margin: 10px auto;}
.mtb20{margin: 20px auto;}
.mr20{margin-right: 20px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mb20{margin-top: 20px;}
.mt2vw{margin-top: 2vw;}
/* 宽度 */
.w-100{
    width: 100%;
}
.dis-f{
    display: flex;
    flex-wrap: wrap;
}
.dis-flexB{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.dis-flexS{
    display: flex;
    justify-content: start;
}
.align-b{
    align-items: end;
}
.align-c{
    align-items:center
}
.dis-flex-Bet{
    display: flex;
    justify-content: space-between;
}
.dis-flex-Aro{
    display: flex;
    justify-content: space-around;
}
.flex-column {
    flex-direction: column;
}
/* 滚动条样式 */
body::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    /*background-color:rgba(210, 210, 210, 0.48);*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 0;
}

body::-webkit-scrollbar-thumb {
    background-color: #cbcbcb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    /*background-color:rgba(210, 210, 210, 0.48);*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(97, 97, 97, 0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 0;
}

/* 按钮1 */
.outline:before, .outline:after, .outline .lines:before, .outline .lines:after {
    background-color: rgba(0,0,0,0.3);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 300ms;
    width: 100%;
}
.outline:before {
    bottom: 0;
    top: auto;
}
.outline .lines {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
.outline .lines:before, .outline .lines:after {
    height: 100%;
    width: 2px;
}
.outline .lines:after {
    left: auto;
    right: 0;
}
.outline:hover:before {
    transform: translateX(-100%);
}
.outline:hover:after {
    transform: translateX(100%);
}
.outline:hover .lines:before {
    transform: translateY(-100%);
}
.outline:hover .lines:after {
    transform: translateY(100%);
}
/* 按钮2 */
.outlinebto svg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.outlinebto rect {
	fill: none;
	stroke: #1f73e5;
	stroke-width: 3;
	stroke-dasharray: 422, 0;
	transition: all 450ms linear 0s;
}
/* .outlinebto:hover {
	transition: all 150ms linear 0s;
} */
.outlinebto:hover rect {
	stroke-width: 5;
	stroke-dasharray: 15, 310;
	stroke-dashoffset: 48;
	-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 990px){
    .max-wid12{
        max-width: 1500px;
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }
}
@media (min-width: 690px){
.col-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .col-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-3{
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-2-m{
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 690px) {
   
    .col-2{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-1{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .max-wid12{
        width: 96vw;
        margin: 0 auto;
    }
    .f12-mob{font-size: 15px;}
    .fs1-8{font-size: 1.4rem;}
    .fs2-5{font-size: 1.3rem;}
    .fs1-5{font-size: 1.1rem;}
    .fs1-3{font-size: 1rem;}
    .fs1{font-size: .9rem;}
}

/* 上下 */
.ani-svg{
    animation: ani-svg .85s linear 0s alternate infinite;
}
@keyframes ani-svg {
	0% {
		transform: translateY(-20px);
	}
	15% {
		transform: translateY(-15px);
	}
	25% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0);
	}
	65% {
		opacity: .8;
		transform: translateY(5px);
	}
	75% {
		opacity: .65;
		transform: translateY(10px);
	}
	100% {
		opacity: .4;
		transform: translateY(15px);
	}
}
.shake{animation: shake 2s ease-in-out infinite;}
@keyframes shake {
    0%, 100% {transform: translateY(0); /* 初始位置 */}
    50% {transform: translateY(-7px); /* 向下移动7px */}
}
@-webkit-keyframes shake {
    0%, 100% {transform: translateY(0); /* 初始位置 */}
    50% {transform: translateY(-7px); /* 向下移动7px */}
}
/* 弹弹跳 */
@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    to {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
}
@keyframes rubberBand {
    0% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    to {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
}
/* 旋转 */
.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
}
@-webkit-keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes sk-rotate {
	100% {
		-webkit-transform: rotate(360deg)
	}
}
@keyframes sk-rotate {
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg)
	}
}
@-webkit-keyframes sk-bounce {
	0%, 100% {
		-webkit-transform: scale(0.0)
	}
	50% {
		-webkit-transform: scale(1.0)
	}
}
@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	}
	50% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
    }
}
@-webkit-keyframes criss-cross-left {
    0% {
     left:-20px
    }
    50% {
     left:50%;
     width:20px;
     height:20px
    }
    100% {
     left:50%;
     width:375px;
     height:375px
    }
}
@keyframes criss-cross-left {
    0% {
     left:-20px
    }
    50% {
     left:50%;
     width:20px;
     height:20px
    }
    100% {
     left:50%;
     width:375px;
     height:375px
    }
}
@-webkit-keyframes criss-cross-right {
    0% {
     right:-20px
    }
    50% {
     right:50%;
     width:20px;
     height:20px
    }
    100% {
     right:50%;
     width:375px;
     height:375px
    }
}
@keyframes criss-cross-right {
    0% {
     right:-20px
    }
    50% {
     right:50%;
     width:20px;
     height:20px
    }
    100% {
     right:50%;
     width:375px;
     height:375px
    }
}

@-webkit-keyframes fadeInUp {
   0% {
       opacity: 0;
       -webkit-transform: translate3d(0, 50%, 0);
       transform: translate3d(0, 50%, 0)
   }
   100% {
       opacity: 1;
       -webkit-transform: none;
       transform: none
   }
}

@keyframes fadeInUp {
   0% {
       opacity: 0;
       -webkit-transform: translate3d(0, 50%, 0);
       -ms-transform: translate3d(0, 50%, 0);
       transform: translate3d(0, 50%, 0)
   }
   100% {
       opacity: 1;
       -webkit-transform: none;
       -ms-transform: none;
       transform: none
   }
}
.fadeInUp {
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp
}




@-webkit-keyframes load1 {
   0%, 80%, 100% {width: 13px;}
   40% {width: 60px;}
}
@keyframes load1 {
    0%, 80%, 100% {width: 13px;}
    40% {width: 60px;}
 }
 
@keyframes down{
    from{transform: translateY(-100%); opacity: 0;}
    to{transform: none; opacity: 1;}
}

@-webkit-keyframes shine {100% {left: 90%;}}
@keyframes shine {100% {left: 90%;}}

@keyframes zoomInImg {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}
@-webkit-keyframes zoomInImg {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}
.zoom-image {
    animation: zoomInImg 1s ease; /* 应用动画 */
}