body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
html, body {
  overflow-x: hidden;
  font-family: 'dinFont';
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'dinBoldFont';
}
a{text-decoration:none} 
a:hover{text-decoration:none} 
em{font-style:normal}
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

/* flex 布局兼容性写法 */
.flex { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; }
.flex-1 { -webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1; }
.flex-2 { -webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2; }
.flex-3 { -webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3; }
.flex-4 { -webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4; }
.flex-5 { -webkit-box-flex:5;-webkit-flex:5;-ms-flex:5;flex:5; }
.flex-6 { -webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6; }
/* flex 水平排列 */
.row { -webkit-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; }
/* flex 垂直排列 */
.column { -webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; }
/* flex 主轴终点对齐 */
.jc-end { -webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end }
/* flex 主轴居中对齐 */
.jc-center { -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;justify-content: center; }
/* flex 主轴两端对齐 */
.jc-between { -webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
/* flex 交叉轴终点对齐 */
.ai-end { -webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items: flex-end;}
/* flex 交叉轴居中对齐 */
.ai-center { -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.text-con { color: #4B4B4B; }
.text-black { color: #242424; }
.text-grey { color: #9F9F9F; }
.font-head { font-size: 36px; }
.font-title { font-size: 26px;}
.font-title2 { font-size: 22px;}
.font-nor { font-size: 18px;}
.font-small { font-size: 14px;}

.pd-x1 { padding: 10px; }
.pd-x2 { padding: 20px; }
.pd-x3 { padding: 30px; }
.pd-x4 { padding: 40px; }
.pd-x5 { padding: 50px; }

.mg-x1 { margin: 10px; }
.mg-x2 { margin: 20px; }
.mg-x3 { margin: 30px; }
.mg-x4 { margin: 40px; }
.mg-x5 { margin: 50px; }

.mt-x1 { margin-top: 10px; }
.mt-x2 { margin-top: 20px; }
.mt-x3 { margin-top: 30px; }
.mt-x4 { margin-top: 40px; }
.mt-x5 { margin-top: 50px; }
.mt-x6 { margin-top: 60px; }
.mt-x7 { margin-top: 70px; }
.mt-x8 { margin-top: 80px; }

.mb-x1 { margin-bottom: 10px; }
.mb-x2 { margin-bottom: 20px; }
.mb-x3 { margin-bottom: 30px; }
.mb-x4 { margin-bottom: 40px; }
.mb-x5 { margin-bottom: 50px; }
.mb-x6 { margin-bottom: 60px; }
.mb-x7 { margin-bottom: 70px; }
.mb-x8 { margin-bottom: 80px; }

.ml-x1 { margin-left: 10px; }
.ml-x2 { margin-left: 20px; }
.ml-x3 { margin-left: 30px; }
.ml-x4 { margin-left: 40px; }
.ml-x5 { margin-left: 50px; }

.mr-x1 { margin-right: 10px; }
.mr-x2 { margin-right: 20px; }
.mr-x3 { margin-right: 30px; }
.mr-x4 { margin-right: 40px; }
.mr-x5 { margin-right: 50px; }

.mlr-x1 { margin-left: 10px; margin-right: 10px; }
.mlr-x2 { margin-left: 20px; margin-right: 20px; }
.mlr-x3 { margin-left: 30px; margin-right: 30px; }
.mlr-x4 { margin-left: 40px; margin-right: 40px; }
.mlr-x5 { margin-left: 50px; margin-right: 50px; }

.mlr--x0-5 { margin-left: -5px; margin-right: -5px; }
.mlr--x1 { margin-left: -10px; margin-right: -10px; }
.mlr--x2 { margin-left: -20px; margin-right: -20px; }
.mlr--x3 { margin-left: -30px; margin-right: -30px; }
.mlr--x4 { margin-left: -40px; margin-right: -40px; }
.mlr--x5 { margin-left: -50px; margin-right: -50px; }

.plr-x0-5 { padding-left: 5px; padding-right: 5px; }
.plr-x1 { padding-left: 10px; padding-right: 10px; }
.plr-x2 { padding-left: 20px; padding-right: 20px; }
.plr-x3 { padding-left: 30px; padding-right: 30px; }
.plr-x4 { padding-left: 40px; padding-right: 40px; }
.plr-x5 { padding-left: 50px; padding-right: 50px; }

.pl-x1 { padding-left: 10px; }
.pl-x2 { padding-left: 20px; }
.pl-x3 { padding-left: 30px; }
.pl-x4 { padding-left: 40px; }
.pl-x5 { padding-left: 50px; }

.fl-r{
  float: right;
}
.fl-l{
  float: left;
}
.lh-15{
  line-height: 1.5
}
.lh-18{
  line-height: 1.8
}
.text-dec-none {
  text-decoration: none;
}

@media screen and (min-width:414px) and (max-width:485px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width:375px) and (max-width:413px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width:320px) and (max-width:374px) {
  html {
    font-size: 14px;
  }
}
/* card 样式重写 */
.container .card {
  border: none;
}
.container .card-body {
  padding-left: 0;
  padding-right: 0;
}
.container .card-title {
  font-size: 24px;
  color: #242424;
}
.container .card-text {
  min-height: 50px;
  font-size: 18px;
  color: #4B4B4B;
}
.img-enlarge-box {
  width: 100%;
  overflow: hidden;
  display: block;
}
.img-enlarge-box .img-enlarge {
  width: 100%;
  cursor: pointer;
  transition: all 0.6s;
}
.img-enlarge-box:hover .img-enlarge{
  transform: scale(1.1);
}

/* animated */
.animated {
  visibility: hidden;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.fadeInShow {
  -webkit-animation-name: fadeInShow;
  animation-name: fadeInShow
}

@-webkit-keyframes fadeInShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}