@charset "utf-8";
/*初始化  reset*/
body,button,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:16px/1.5 "微软雅黑",sans-serif; color:#2a3233;}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,i{font-style:normal}
ol,ul{list-style:none}
a{text-decoration:none;color:#333;}
img{border:0; display:block;}
textarea{resize:none;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
/*清除浮动*/
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table; }
*html .clearfix { height: 1%; }
.clearfix { display: block; }
*+html .clearfix { min-height: 1%; }
/*-------------------------------banner----------------------------------------------------*/
.banner{ width:100%; overflow:hidden; }
.banner_ph{ display:none;}
.banner img{ width:100%;}
.one{ width:1200px; margin:15px auto;}
.one p{ line-height:30px; letter-spacing:1.2px;}
.two{ width:1200px; margin:auto; overflow:hidden;}
.bt{ font-size:36px; color:#990000; text-align:center; font-weight:normal; margin:20px 0 30px 0;}
.wz{ line-height:30px; letter-spacing:1.2px; margin-top:20px;}

/*-------------------------------翻转----------------------------------------------------*/
.demo{
    padding: 1em 0;
}
.box{
    position: relative;
    perspective: 1000px;
}
.box .box-img{
    transform: rotateY(0);
    transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-img{
    transform: rotateY(-90deg);
}
.box .box-img img{
    width: 100%;
    height: auto;
}
.box .box-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding:20px;
    text-align: center;
    background: rgba(0,0,0,0.7);
    transform: rotateY(90deg);
    transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-content{
    transform: rotateY(0);
}
.box .title{ margin-top:15px;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
}
.box .description{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
}
.box .title:after,
.box .description:after{
    content: "";
    width: 80%;
    display: block;
    border-bottom: 1px solid #fff;
    margin: 15px auto;
}
.box .social-links{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box .social-links li{
    display: inline-block;
    margin: 0 10px;
}
.box .social-links li a{
    font-size: 20px;
    color: #a6a6a6;
}
.box .social-links li a:hover{
    text-decoration: none;
    color: #fff;
}
.col-md-4 h2{ font-size:24px; color:#FFF; padding:8px 0; text-align:center; margin-bottom:20px;}
.box-content img{ margin:auto;}
@media only screen and (max-width: 990px) {
    .box{  margin-bottom:20px; }
}
@media only screen and (max-width: 479px) {
    .box .box-content{ padding: 20px; }
}
/*-------------------------------翻转end----------------------------------------------------*/
.three{ background:#E9E9E9; overflow:hidden; margin-top:20px;}
.three ul{ width:1200px; margin:auto; overflow:hidden; margin-bottom:20px;}
.three ul li{ width:581px; background:#FFF; overflow:hidden; float:left; margin:9px;}
.three ul li span{ overflow:hidden; display:block; height:222px; border-bottom:1px solid #E9E9E9;}
.three ul li span img{ float:left; }
.three ul li span img:hover{-webkit-transform: scale(1.15);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 750ms;
  -moz-transform: scale(1.15);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 750ms;
  overflow: hidden;}
.three ul li p{ text-align:center; padding:5px 15px 15px 15px;}
.three ul li strong{ display:block; text-align:center; color:#9B0100; margin-top:15px;}
.four{ width:1200px; margin:auto; overflow:hidden;}
.four ul li{ width:46%; float:left; overflow:hidden; margin:2%;}
.four ul li strong{ color:#9B0100; font-size:24px; display:block; margin-bottom:10px;}
.six{ background:#E9E9E9; overflow:hidden; margin-top:20px;}
.six ul{ width:1200px; margin:auto; overflow:hidden; margin-bottom:20px;}
.six ul li{ float:left; width:22%; background:#FFF; padding:1%; margin:0.5%;}
.six ul li h1{ font-size:18px; text-align:center; margin-bottom:20px; font-weight:bold;}
.six ul li p{ margin-top:15px;}
.seven{ width:1200px; margin:auto; overflow:hidden; margin-top:20px;}
.seven ul li{ float:left; margin:20px 0;}

/*-------------------------------foot----------------------------------------------------*/
.foot{ width:100%; height:60px; line-height:60px; background:#CF2727; color:#FFF; text-align:center; }


/***寻宝 Material Modal CSS*/
.modal {
  will-change: visibility, opacity;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: $modal-delay;
          transition-delay: $modal-delay;
}
.modal--active {
  visibility: visible;
  opacity: 1;
}
.modal--align-top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal__bg {
  background: transparent;
}
.modal__dialog {
  max-width: 1200px;
  padding: ;
}
.modal__content {
  will-change: transform, opacity;
  position: relative;
  padding: 2.4rem;
  background: #fff;
  background-clip: padding-box;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
  opacity: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content--active {
  opacity: 1;
}
.modal__close {
  z-index: 1100;
  cursor: pointer;
}
.modal__trigger {
  position: relative;
  display: inline-block;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); width:16%; overflow:hidden;
}
.modal__trigger img:hover{-webkit-transform: scale(1.15);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 750ms;
  -moz-transform: scale(1.15);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 750ms;
  overflow: hidden;}
.modal__trigger--active {
  z-index: 10;
}
.modal__trigger:hover {
  background: #e5d3d6;
}
#modal__temp {
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffebee;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
/**
 * Demo specific CSS
 */
body {}
img {
  max-width: 100%;
}
.demo-btns{ width:1200px; overflow:hidden; margin:auto;}
.demo-btns header {
  padding: 7vh 10vw;
  background: #ffebee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-btns header h1 {
  margin: 0;
  color: rgba(0,0,0,0.54);
  font-weight: 300;
}
.demo-btns .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;  
  -ms-flex-flow: column wrap;
      flex-flow: column wrap; width:1200px; margin:auto; overflow:hidden;
}
.demo-btns p {
 
  color: #fff;
}
.demo-btns .link {
  font-size: 20px;
}
.demo-btns .modal__trigger {
}
@media (max-width: 640px) {
  .demo-btns .modal__trigger {
    margin-bottom: 0.8rem;
  }
}
.demo-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.2rem;
  padding: 0.6rem;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
  width: 24px;
  fill: #fff;
  pointer-events: none;
  vertical-align: top;
}
.demo-close:hover {
  background: rgba(0,0,0,0.6);
}
.logo {
  position: fixed;
  bottom: 3vh;
  right: 3vw;
  z-index: 2;
}
.logo img {
  width: 45px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover {
  -webkit-transform: rotate(180deg) scale(1.1);
          transform: rotate(180deg) scale(1.1);
}

.five{ width:100%; background:url(../images/bj.jpg) no-repeat; background-size:100% 100%; margin:auto; padding:20px 0;}
.modal__trigger strong{ position:absolute; z-index:99; width:100%; text-align:center; padding:5px 0; background-color:rgba(0,0,0,0.4); color:#FFF; font-size:14px; bottom:0;}
.buttons p span{ float:left; margin-right:9px;}
.demo-btns p{ color:#333; margin-bottom:20px;}
.xiazai{ display:block; width:600px; height:40px; text-align:center; background:#F00; color:#FFF; line-height:40px; margin:auto; margin-top:20px; text-decoration:none;}
.xiazai:hover{ background:#C00; color:#FFF; transition: all 0.5s;}
.modal__content h1{ display:block; font-size:24px; font-weight:bold; text-align:center; line-height:34px;}
.modal__content h2{ font-size:18px; background:#999; color:#FFF; padding:5px; display:block; margin:15px 0;}
.modal__content p{ line-height:26px; overflow:hidden;}
.modal__content p img{ float:left; margin-right:20px;}



/*---------------------------------download--------------------------------------------*/

@media screen and (min-width: 992px) {
.download{ width:800px; margin:auto; border:1px solid #990000; margin-top:20px; padding:2%; margin-bottom:30px;box-shadow:0 0 10px #ccc;}
.download p{font-size:28px; text-align:center; color:#990000;}
.download ul{ width:60%; margin:auto;}
.download ul li{ font-size:16px; margin-top:20px;}
.kuang{ width:80%; padding:1%; border:1px solid #CCC; border-radius:5px;}
.download ul li span{ color:#F00; margin-left:5px; font-size:12px;}
.download ul li h3{ }
.download ul li strong{ display:block; font-weight:normal; margin:5px 0;}
.btn{ margin-left:160px; width:420px; height:40px; line-height:40px; background:#ca0016; font-size:16px; color:#FFF; border:none; margin-top:30px;}
.btn:hover{ background:#990000; }


}

@media screen and (max-width: 991px) {
.top{ width:100%;}
.top dl dt{ margin:5px 0;}
.top dl dt img{ width:40%;}
.top dl dd img{ width:100%;}
.con{ margin:5px; width:100%;}
.con p{ }
.con ul{ width:100%;}
.con ul li{ font-size:16px; margin-top:20px;}
.con ul li input{ width:80%; height:30px; line-height:30px; border:1px solid #CCC; border-radius:5px;}
.con ul li span{ color:#F00; margin-left:5px;}
.btn{ margin-left:20px; width:80%; height:30px; line-height:30px; background:#666; color:#FFF; border:none; margin-top:30px;}
.footer{ display:none;}	




}


/*-------------------------------fu----------------------------------------------------*/
.fuchuang{ position:fixed; right:1%; bottom:2%; width:100px;height:100px;background:url('images/html5icon.png') center center no-repeat;}
.fuchuang img{cursor:pointer;-webkit-animation: scaleout 1.3s infinite ease-in-out;animation: scaleout 1.3s infinite ease-in-out; width:100px;}
@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    } 100% {
          transform: scale(1.1);
          -webkit-transform: scale(1.1);
          opacity: 0;
      }
}





