@charset "utf-8";

/*==========================banner===========================*/
/*.banner{ width: 100%; min-width: 1200px; height: 100%;  background: url(../images/banner-join.bak.jpg); background-position: center; background-size: cover; overflow: hidden; }*/
.banner{ height: 400px;  background: url(../images/banner-join.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;}

/*==========================加入京麒源===========================*/
.main{ width: 100%; min-width: 1200px; padding-top: 85px; padding-bottom: 130px; background: #F0F0F0;}
.main .title{ font-size: 36px; color: #000; text-align: center;}
.main .content{ margin-top: 40px; margin-bottom: 85px; font-size: 16px; color: #444; text-align: center; line-height: 40px;}
.column{}
.column .tit{ font-size: 24px; color: #000; text-align: center; padding-bottom: 24px; border-bottom: 1px solid #333;}
.column .cnt{ overflow: hidden; margin-top: 30px; margin-bottom: 85px;}
.column .cnt:hover .bd{ display: block;}
.column .cnt .hd{ margin-right: -40px;}
.column .cnt .hd .item{ float: left; position: relative; box-sizing: border-box; width: 270px; height: 340px; padding: 65px 25px 0; margin-right: 40px; cursor: pointer; background: #fff; transition: all 0.5s;}
/*.column .cnt .hd .item:hover{  background: #2393dd;}*/
.column .cnt .hd .item:hover{  background: #0064FA}
.column .cnt .hd .item:hover .name{ color: #fff;}
.column .cnt .hd .item:hover p{ color: #fff;}
.column .cnt .hd .item:hover p span{ color: #ccebff;}
.column .cnt .hd .item:hover .tri{ opacity:1; filter: alpha(opacity=100);}
.column .cnt .hd .item .name{ margin-bottom: 55px; font-size: 20px; color: #000; transition: all 0.5s;}
.column .cnt .hd .item p{ font-size: 16px; color: #000; line-height: 32px; transition: all 0.5s;}
.column .cnt .hd .item p span{ font-size: 16px; color: #444; transition: all 0.5s;}
/*.column .cnt .hd .item .tri{ position: absolute; left: 119px; bottom: -12px; width: 0; height: 0; opacity:0; filter: alpha(opacity=0); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 12px solid #2393dd; transition: all 0.5s;}*/
.column .cnt .hd .item .tri{ position: absolute; left: 119px; bottom: -12px; width: 0; height: 0; opacity:0; filter: alpha(opacity=0); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 12px solid #0064FA; transition: all 0.5s;}
.column .cnt .bd{ display: none; box-sizing: border-box; width: 100%; height: auto; margin-top: 30px; padding: 30px 40px; background: #0064FA;}
.column .cnt .bd .require{ font-size: 16px; color: #fff;}
.column .cnt .bd p{ margin-top: 5px; font-size: 16px; color: #ccebff; line-height: 32px;}


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


@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/04-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;}

/*==========================加入京麒源===========================*/
.main{ width: 100%; min-width: 300px; padding-top: 20px; padding-bottom: 20px; background: #F0F0F0;}
.main .title{ font-size: 1.8rem; color: #000; text-align: center;}
.main .content{ margin-top: 20px; padding: 0 10px; margin-bottom: 20px; font-size: 1.4rem; color: #444; text-align: center; line-height: 26px;}
.column{}
.column .tit{ font-size: 1.8rem; color: #000; text-align: center; padding-bottom: 5px; border-bottom: 1px solid #333;}
.column .cnt{ overflow: hidden; margin-top: 20px; margin-bottom: 30px;}
.column .cnt:hover .bd{ display: block;}
.column .cnt .hd{ margin-right: 0px; width: 260px; margin: 0 auto;}
.column .cnt .hd .item{ float: left; position: relative; box-sizing: border-box; width: 260px; height: auto; margin: 0 auto 15px; padding: 30px 20px 30px; cursor: pointer; background: #fff; transition: all 0.5s;}
.column .cnt .hd .item:hover{ background: #fff;}
.column .cnt .hd .item:hover .name{ color: #000;}
.column .cnt .hd .item:hover p{ color: #000;}
.column .cnt .hd .item:hover p span{ color: #444;}
.column .cnt .hd .item:hover .tri{ opacity:0; filter: alpha(opacity=0);}
.column .cnt .hd .item .name{ margin-bottom: 20px; font-size: 1.6rem; color: #000; transition: all 0.5s;}
.column .cnt .hd .item p{ font-size: 1.4rem; color: #000; line-height: 36px; transition: all 0.5s;}
.column .cnt .hd .item p span{ font-size: 1.4rem; color: #444; transition: all 0.5s;}
/*.column .cnt .hd .item .tri{ position: absolute; left: 119px; bottom: -12px; width: 0; height: 0; opacity:0; filter: alpha(opacity=0); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 12px solid #2393dd; transition: all 0.5s;}*/
.column .cnt .hd .item .tri{ position: absolute; left: 119px; bottom: -12px; width: 0; height: 0; opacity:0; filter: alpha(opacity=0); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 12px solid #0064FA; transition: all 0.5s;}
/*.column .cnt .bd{ display: block; box-sizing: border-box; width: 100%; height: auto; margin-top: 0px; padding: 20px 15px 15px; background: #2393dd;}*/
.column .cnt .bd{ display: block; box-sizing: border-box; width: 100%; height: auto; margin-top: 0px; padding: 20px 15px 15px; background: #0064FA;}
.column .cnt .bd .require{ font-size: 1.4rem; color: #fff;}
.column .cnt .bd p{ margin-top: 5px; font-size: 1.2rem; color: #ccebff; line-height: 22px;}
.column .cnt .blank{ height: 50px; margin-top: -20px;}
}