@charset "utf-8";

/*==========================banner===========================*/
/*.banner{ width: 100%; min-width: 1200px; height: 100%;  background: url(../images/banner-product.png); background-position: center; background-size: cover; overflow: hidden; }*/
.banner{height: 400px; background: url(../images/banner-product.png); background-position: center; background-size: cover; overflow: hidden; }
.banner .cont{ width: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;      /* TWEENER - IE 10 */
            display: -webkit-flex;     /* NEW - Chrome */
 
  -webkit-box-pack: center;
  /* 12版 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;

  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  
   -webkit-box-align: center;
  /* 12版 */
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;}
.banner .cont .tit{ margin-top: -20px; width: 100%; padding-left: 26px; font-size: 48px; color: #fff; letter-spacing: 50px; text-align: center;}
.banner .cont .tit-en{ margin-top: 20px; font-size: 35px; font-family: Arail,Tabhoma; color: #fff; text-align: center;}

/*==========================京麒源产品===========================*/
.slide{ position: relative; width: 1200px; height: 800px; margin: 0 auto;}
.slide .hd{ height:15px; overflow:hidden; position:absolute; right:80px; bottom:30px; z-index:1; }
.slide .hd ul{ overflow:hidden; zoom:1; float:left; }
.slide .hd ul li{ float:left; margin-right:4px;  width:15px; height:15px; border-radius: 50%; line-height:14px; text-align:center; background:#e5dcdc; cursor:pointer; }
.slide .hd ul li.on{ background:#2293DC; color:#fff; }
.slide .bd{ position:relative; height:100%; z-index:0; }
.slide .bd li{ width: 1200px; height: 800px; zoom:1; }
.slide .bd li .title{ padding-top: 85px; font-size: 30px; color: #000; text-align: center; cursor: pointer;}
.slide .bd li .content{ margin-top: 30px; padding: 0 30px; font-size: 16px; color: #333; line-height: 30px; text-align: center; cursor: pointer;}
.slide .bd .more{ display: block; margin: 50px auto 25px; width: 176px; height: 46px; font-size: 18px; color: #2293DC; line-height: 46px; letter-spacing: 3px; text-align: center; border: 2px solid #2293DC; border-radius: 25px; }
.slide .bd .more:hover{ font-size: 19px;}
/*.slide .bd li .picture{ width: 1200px; height: 460px;}*/
.slide .bd li .picture{ width: 1200px;}
/*.slide .bd li .picture img{ display:block; width: 1200px; height: 460px;}*/
.slide .bd li .picture img{ display:block; width: 1200px; height: auto;}
.slide .prev,
.slide .next{ position:absolute; left:-30px; top:50%; margin-top:-35px; display:block; width:38px; height:70px; background:url(../images/icon-left.png) no-repeat; filter:alpha(opacity=30);opacity:0.3;   }
.slide .next{ left:auto; right: -30px; background: url(../images/icon-right.png); }
.slide .prev:hover,
.slide .next:hover{ filter:alpha(opacity=100);opacity:1;  }



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++手机端++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++手机端++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


@media only screen and (min-width: 300px) and (max-width: 768px) {
/*==========================banner===========================*/
.banner{ width: 100%; min-width: 300px; height: calc( 100vw * 1.44 );  background: url(../images/02-min.png); background-position: center; background-size: cover; overflow: hidden; }
.banner .cont{ width: 100%; height: 100%; }
.banner .cont .cont-in{ margin-top: -100px;}
.banner .cont .tit{ margin-top: -20px; width: 100%; padding: 0 0 0 8px; font-size: 2.2rem; color: #fff; letter-spacing: 15px; text-align: center;}
.banner .cont .tit-en{ margin-top: 2px; font-size: 1.2rem; font-family: Arail,Tabhoma; color: #fff; text-align: center;}

/*==========================京麒源产品===========================*/
.slide{ position: relative; width: 100%; height:auto; margin: 0 auto;}
.slide .hd{ display: none; height:15px; overflow:hidden; position:absolute; right:80px; bottom:30px; z-index:1; }
.slide .hd ul{ overflow:hidden; zoom:1; float:left;  -webkit-padding-start: 0px;}
.slide .hd ul li{ float:left; margin-right:4px;  width:15px; height:15px; border-radius: 50%; line-height:14px; text-align:center; background:#e5dcdc; cursor:pointer; }
.slide .hd ul li.on{ background:#2293DC; color:#fff; }
.slide .bd{ position:relative; height:100%; z-index:0; }
.slide .bd li{ width: 100%; height:auto; zoom:1; }
.slide .bd li .title{ padding-top: 20px; font-size: 1.8rem; color: #000; text-align: center; cursor: pointer;}
.slide .bd li .content{ margin-top: 10px; padding: 0 24px; font-size: 1.2rem; color: #333; line-height: 24px; text-align: center; cursor: pointer;}
.slide .bd .more{ display: block; margin: 10px auto 10px; width: 90px; height: 24px; font-size: 1.2rem; color: #2293DC; line-height: 26px; letter-spacing: 3px; text-align: center; border: 1px solid #2293DC; border-radius: 25px; }
.slide .bd .more:hover{ font-size: 1.3rem;}
.slide .bd li .picture{ width: 100%; height: auto;}
.slide .bd li .picture img{ display:block; width: 100%; height: auto;}
.slide .prev,
.slide .next{ position:absolute; left:5px; top:50%; margin-top:-30px; display:block;  width:20px; height:36px; background:url(../images/icon-left.png) no-repeat; background-size: 100% 100%; filter:alpha(opacity=30);opacity:0.3;   }
.slide .next{ left:auto; right: 5px; background: url(../images/icon-right.png); background-size: 100% 100%; }
.slide .prev:hover,
.slide .next:hover{ filter:alpha(opacity=100);opacity:1;  }
}