/* CSS Document */

/***************banner****************/

.banner{ width:100%; height:465px; float:left; overflow:hidden; position:relative;}

.banner-info{ position:absolute; width:100%; text-align:center; float:left; margin-top:120px; color:#fff;}

.banner-bg,.banner-bg img{ width:100%; height:100%; float:left; overflow:hidden;}

.page-type{ font-size:48px; margin-bottom:60px;margin-top: 60px}

.page-line{ display:block; height:60px; border-top:1px solid #fff; width:80px; margin:0 auto;}

.page-desc{ font-size:36px;}

.page-e{ position:absolute; left:150px; top:0; font-size:72px; opacity:0.12; font-weight:bold; width:50%; text-align:right;}

.page-e span{ font-size:150px;}



.personnel-left{ width:480px; float:left; overflow:hidden;}

.personnel-box{ width:100%; float:left; margin-bottom:10px;}

.personnel-box{ background:url(../img/join-bg1.jpg);}

.personnel-left .personnel-img{ float:left; width:360px; height:336px;}
.personnel-left .personnel-img img{ width:auto; height:336px;}

.personnel-left .personnel-tit{ float:left; overflow:hidden;height:336px;}

.personnel-c{ font-size:30px; color:#444444; line-height:30px; width:30px; text-align:center; float:left;}

.personnel-e{ color:#9d9d9d; font-size:17px; width:200%; transform:rotate(90deg);}

.personnel-center{ margin-left:30px;float:left;}

.personnel-img{ float:left;}

.idea-box{ background:url(../img/join-bg2.jpg) center no-repeat;}

.idea{ width:100%; height:158px; padding:35px;line-height: 68px;text-align: center; font-size:30px; color:#198dcd;}

.personnel-tit{ float:left;margin-top: -32px}

.job-wanted{ float:right;background:#f5f5f5; height:336px; text-align:center;}

.job-wanted li{ display:block; float:left; width:100%;}

.job-wanted span{ line-height:30px; margin-top:5px; font-size:16px; display:block;float:left; color:#999; width:100%;}

.job-wanted p{ color:#333; width:100%;}

.job-wanted p img{ width:120px;}

.job-wanted .btn{ display:block; margin:0 auto; width:130px; height:46px; border-radius:6px; background:#198dcd; color:#fff; text-align:center; line-height:46px;}

.personnel-right{ width:358px; float:right; margin-left:10px;}

.welfare{ background:url(../img/join-bg3.jpg) center top no-repeat; height:824px;}

.welfare .box-tit p.tit-e,.welfare .box-tit p.tit-c{ color:#fff;}

.welfare .box-tit i{ background:#fff;}

.tab{ width:465px; margin:0 auto; padding-top:70px; position:relative;}

.tab-hd {zoom:1; position:relative;}

.tab-hd li{ float:left; width:90px; height:160px; color:#fff; text-align:center; cursor:pointer; padding:15px 0; font-size:18px; border-radius:90px; position:absolute; }

.tab-hd li:nth-of-type(1){ transform:rotate(-45deg); left:0; top:0;}

.tab-hd li:nth-of-type(2){ transform:rotate(-15deg); left:110px; top:-70px;}

.tab-hd li:nth-of-type(3){ transform:rotate(15deg); right:110px; top:-70px;}

.tab-hd li:nth-of-type(4){ transform:rotate(45deg); right:0; top:0;}

.tab-hd li img{ display:block; margin:0 auto; margin-bottom:10px;}

.tab-hd li.active{ background:#198dcd;}

.tab-bd{ display:block; width:465px; height:465px; border-radius:50%; border:10px solid rgba(255, 255, 255, 0.48); overflow:hidden; z-index:100; position:absolute; left:0;}

.tab-bd li{display:none; background:#fff; width:100%; height:100%; border-radius:50%;}

.tab-bd li.thisclass{ display:list-item;}

.tab-bd-box{ width:340px; margin:0 auto; padding-top:60px; text-align:center;}

.top-tit{ font-size:30px; font-weight:bold; color:#198dcd; border-bottom:1px solid #ddd; padding-bottom:20px; position:relative;}

.top-tit:after{ width:90px; height:3px; content:''; display:block; position:absolute; left:50%; margin-left:-45px; bottom:-2px; background:#198dcd;}

.bottom-desc{ width:100%; float:left; margin-top:20px; line-height:24px; color:#198dcd;}

.bottom-desc p{ color:#333;}

.personnel-img img,.personnel-tit img{ width:110%;}

.statistics li{ display:block; float:left; width:25%; height:300px; padding:0 30px;}

.statistics li .charts{ width:100%; height:100%;}

.statistics{ padding-bottom:0; background:url(../img/statistics-bg.jpg) center no-repeat;}

.statistics .box-content{ display:block; float:left; width:100%; margin-top:30px; background:rgba(255, 255, 255, 0.9); padding-bottom:60px; padding-top:30px;}

.statistics .box-content p{text-align:left; line-height:30px; margin-bottom:10px; color:#333; font-size:16px; margin:55px;}
.statistics .box-content p:first-of-type{ margin-bottom:0;}
.statistics .box-content p:last-of-type{ margin-top:20px;}

@media screen and (max-width:768px){

.banner{ height:220px;}

.banner-info{ margin-top:30px;}

.page-type{ font-size:30px; margin-bottom:20px;}

.page-line{ height:20px;}

.page-desc{ font-size:24px;}

.page-e{font-size:30px; left:80px;}

.page-e span{ font-size:72px;}

.box{ padding:10px 0;}

.personnel-left{ width:100%;}

.personnel-left .personnel-img{ width:70%; overflow:hidden;}

.personnel-left .personnel-tit{ width:30%;}

.personnel-center{ width:100%; margin-left:0;}

.personnel-right{ width:100%;}

.personnel-right .personnel-img{ width:100%;}

.personnel-right .personnel-box{ width:calc(50% - 5px);}

.personnel-right .personnel-box:last-of-type{ float:right; width:100%;}

.personnel-right .personnel-box .personnel-img{}

.tab{ width:340px;}

.tab-bd{ width:340px; height:340px;}

.tab-hd li{ width:70px; font-size:16px; padding:5px 0;}

.tab-hd li img{ width:30px; height:30px; margin-bottom:5px;}

.tab-hd li:nth-of-type(1){ transform:rotate(-45deg); left:10px; top:-10px;}

.tab-hd li:nth-of-type(2){ transform:rotate(-15deg); left:80px; top:-60px;}

.tab-hd li:nth-of-type(3){ transform:rotate(15deg); right:80px; top:-60px;}

.tab-hd li:nth-of-type(4){ transform:rotate(45deg); right:10px; top:-10px;}

.tab-bd-box{ width:240px; padding-top:20px;}

.top-tit{ font-size:24px;}

.bottom-desc{ line-height:20px;}
.statistics li{ width:50%; padding:0;}
.statistics .box-content p{ margin:20px;}
.statistics{ background:#fff;}
}