/* emp2020 */
.mainEmp{background-color: #fff;}
.mainEmp img{max-width: 100%; height: auto;}
@media (min-width: 1200px){
    .mainEmp{font-size: 16px;}
}

/* 背景图和透明背景色 */
.empCon1{background-image: url(../jpg/empcon.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; z-index: 1;}
.empCon1:after{background-image: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.8) 30%, rgba(255,255,255,.7) 40%, rgba(255,255,255,0) 90%); content: ''; width: 100%;height: 100%;z-index: -1;position: absolute;top: 0;left: 0;}

.empBanner{}
.empBannerLeft{padding: 3.5em 0 6em; text-align: center; font-family: '苹方',PingFangSC-Regular,Helvetica, Arial,"Open Sans",'microsoft yahei';}
.empBannerLeft strong{display: block; font-weight: normal; font-size: 3em;}
.empBannerLeft strong>span{display: inline-block;}
.empBannerLeft p{font-size: 3em; margin: 0 0 1em;}
.empBannerLeft a.btn{font-size: 2.4em; background-color: #f60; color: #fff; text-shadow: 0px 2px 2px rgba(0,0,0,.2); border-radius: 2em; padding: 0.2em 1em; /* font-weight: bold; letter-spacing: 0.1em; */}
.empBannerLeft a.btn:hover,.empBannerLeft a.btn:focus{background-color: #f30; color: #fff;}
.empBannerLeft .top20{margin: -0.7em 0 3em; font-size: 1.6em;}
.empBannerLeft .top20 span{background-color: #fee79c; display: inline-block;}
.empBannerPos{position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; background: rgba(0,0,0,.4); color: #fff; padding: 8px 15px; line-height: 1.8em;}
.empBannerPos li{display: inline-block; margin-right: 20px;}
.empBannerPos .fa{margin-right: 6px;}
@media (max-width: 1600px) and (min-width: 1199px){
    .empCon1{background-position: center -20px;}
}
@media (max-width: 991px){
    .empBannerLeft strong{font-size: 2.6em;}
}
@media (max-width: 767px){
    .empBannerLeft{padding: 2em 0 3em;}
    .empBannerLeft strong{font-size: 1.8em;}
    .empBannerLeft p{font-size: 1.6em;}
    .empBannerLeft a.btn{font-size: 2em;}
    .empBannerLeft .top20{font-size: 12px;}
}

/* empCon */
.empCon{padding: 4em 0; overflow: hidden;}
.empTit{font-size: 2.5em; text-align: center; padding: 1em 0;}
@media (max-width: 767px){
    .empCon{padding: 3em 15px;}
	.empTit{font-size: 1.5em;}
}
/* empCon2 */
.empCon2{padding: 3em 0;}
.empCon2 ul{overflow: hidden;}
.empCon2 ul li{float: left; border-right: 1px solid #ddd; width: 25%; padding: 0.5em 0; text-align: center;}
.empCon2 ul li:last-child{border-right: none;}
.empCon2 ul li strong{font-weight: normal; font-size: 2em; display: block;}
.empCon2 ul li span{}
@media (max-width: 767px){
    .empCon2 ul{border:none; padding: 0 1em;}
    .empCon2 ul li{width: 100%; border:none; border-bottom: 1px dotted #ddd;}
    .empCon2 ul li strong{float: left; font-size: 1.5em; color: #18b;}
    .empCon2 ul li span{float: right; color: #666; margin-top: 0.5em;}
}
/* empCon3 */
.empCon3 ul.empCon3ul>li{display: inline-block; width: 50%; float: left; padding: 20px; min-height: 70px;}
.empCon3 ul.empCon3ul>li>span{float: left; width: 12%; margin-right: 5%}
.empCon3 ul.empCon3ul>li>div{float: left; width: 80%; padding-top: 3px;}
ul.post_share{clear: both; display: inline-block; padding-top: 3px;}
ul.post_share li{display: inline-block;}
ul.post_share li .fa{font-size: 2rem; margin-right: 10px; color: #999;}
@media (max-width: 767px){
    .empCon3 ul.empCon3ul>li{display: block; width: 100%; padding: 10px 0;}
    /* .empCon3 ul.empCon3ul>li{display: block; text-align: center; width: 100%; padding-left: 0; padding-right: 0;}
    .empCon3 ul.empCon3ul>li>span{width: 24%; margin-left: 38%;}
    .empCon3 ul.empCon3ul>li>div{width: 100%; padding-top: 15px;} */
}
/* empCon4 */
.map{width: 1150px; height: 510px; margin: 10px auto; position: relative; background: url(../png/map1.png) center center no-repeat; background-size: cover;;}
.map .point-area{text-align: center; position: absolute; width: 80px; height: 80px; transition: opacity .5s ease-out;}
.map .point-area:before{position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #008bdf; display: inline-block; margin-left: -5px; margin-top: -5px; top: 50%; left: 50%;}
.map .point-area .txt{font-weight: bold; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff; width: 60px; position: absolute; left: 50px; top: 30%; color: #008bdf;}
.map .point{position: absolute; width: 100%; height: 100%;}
.map .point:after{content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 1px solid #008bdf; opacity: 0;}
.map .point.point-10:after{animation: 4.5s ease-out 225ms infinite ripple;}
.map .point.point-40:after{animation: 4.5s ease-out .9s infinite ripple;}
.map .point.point-80:after{animation: 4.5s ease-out 1.8s infinite ripple;}
.map .point.point-shadow:after{box-shadow: inset 0 0 5em rgba(10, 139, 221, .16);}
@keyframes ripple {
    0%{opacity: 0; transform: scale(.1);}
    5%{opacity: 1;}
    to{opacity: 0; transform: scale(1);}
}
@-moz-keyframes ripple{0%{opacity: 0; transform: scale(.1);} 5%{opacity: 1;} to {opacity: 0; transform: scale(1);}}
@-ms-keyframes ripple{0%{opacity: 0; transform: scale(.1);} 5%{opacity: 1;} to {opacity: 0; transform: scale(1);}}
@-webkit-keyframes ripple{0%{opacity: 0; transform: scale(.1);} 5%{opacity: 1;} to {opacity: 0; transform: scale(1);}}
@-o-keyframes ripple{0%{opacity: 0; transform: scale(.1);} 5%{opacity: 1;} to {opacity: 0; transform: scale(1);}}
/* @media (min-width: 2000px){.map{width: 980px; height: 420px;}}
@media (max-width: 1600px){.map{width: 800px; height: 360px;}}
@media (max-width: 1100px){.map{width: 679px; height: 306px;}} */
@media (max-width: 2000px){.map{width: 980px; height: 420px;}}
@media (max-width: 1100px){.map{width: 800px; height: 360px;}}
@media (max-width: 900px){.map{width: 679px; height: 306px;}}
@media (min-width: 1200px) {
    .map .point-area .txt{line-height: 1.3; width: 70px;}
}
@media (max-width: 767px) {
    .map{width: 340px; height: 146px;}
    .map .point-area{margin-left: -7%; margin-top: -5%;}
    .map .point-area .txt{font-size: 12px; margin-top: 7px;}
}
@media (max-width: 320px) {
    .map{width: 276px;}
    .map .point-area .txt{font-size: 10px; left: 46px;}
}
/* empCon5,empCon7 */
.empCon5{background: linear-gradient(30deg, #ddf 0%, #fee 100%);}
.empCon7{background: url('../png/oblique_401.png');}
.empCon5,.empCon7{padding: 3em 0;}
.empCon5 .empTit,.empCon7 .empTit{text-align: left; padding: 0.5em 0;}
.empDl{margin: 0; overflow: hidden;}
.empDl dt{text-align: center;}
.empDl dt img{width: 80%; margin-top: 1em;}
.empDl dd{}
.empDl dd p{line-height: 1.8; margin-bottom: 0.5em;}
.empDl dd .btn{padding: 0.5em 1.5em; margin: 0.5em 0; border-radius: 50px; font-size: 1.2em; background-color: #f60; color: #fff;}
.empDl dd .btn:hover,.empDl dd .btn:focus{box-shadow: 0 3px 7px rgba(0,0,0,.2); background-color: #f30; color: #fff;}
.empCon7{}
.empCon7 li{margin-bottom: 0.5em;}
@media (max-width: 991px) {
    .empDl dt img{width: 90%; margin-top: 2em;}
}
@media (max-width: 767px) {
    .empDl dt{text-align: center;}
    .empDl dt img{width: 80%; margin: 0 0 1em;}
    .empDl dd{padding: 0 15px;}
    .empDl dd .btn{font-size: 1em;}
}
/* empCon6 */
.empCon6{position: relative;}
.empCon6 ul{overflow: hidden;}
.empCon6 li{float: left; width: 16.66%; text-align: center; padding: 25px 0;}
.empCon6 li img{width: 60%;}
@media (max-width: 992px) {
    .empCon6 li img{width: 66%;}
}
@media (max-width: 767px) {
    .empCon6 li{width: 25%;}
    .empCon6 li img{width: 70%;}
}
/* empCon8 */
.empCon8 {}
.empCon8 ul {}
.empCon8 ul li{float: left; padding: 10px;}
.empCon8 ul li a{cursor: default; position: relative; display: inline-block; float: left; height: 180px; min-height: 180px; overflow: hidden;}
.empCon8 ul li a img {}
.empCon8 ul li.li4 a img,.empCon8 ul li.li5 a img{margin-top: -14%;}
.empCon8 ul li a span{padding: 15px; font-size: 22px; position: absolute; width: 100%; color: #fff; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0, transparent);}
@media (max-width: 991px){
    .empCon8 ul li a{height: 150px; min-height: 150px;}
    .empCon8 ul li.li4 a img,.empCon8 ul li.li5 a img{margin-top: 0;}
    .empCon8 ul li a span{opacity: 1; bottom: 0; font-size: 18px;}
}
@media (max-width: 767px){
    .empCon8 ul li{width: 50%!important; padding: 3px;}
    .empCon8 ul li.li5{width: 100%!important;}
    .empCon8 ul li a{height: auto; min-height: auto;}
    .empCon8 ul li.li5 a{height: 120px;}
    .empCon8 ul li.li5 a img{margin-top: -14%;}
    .empCon8 ul li a span{font-size: 14px; padding: 10px;}
}
@media (max-width: 350px){
    .empCon8 ul li a span{font-size: 12px; padding: 6px;}
}

/* en */
.mainEmpEn{}
.mainEmpEn .empTit{font-family: 'Roboto Condensed';}
.mainEmpEn .empCon1{font-size: 0.8em; padding: 3em 0 4em;}
.mainEmpEn .empCon1 .empBannerLeft{font-family: 'Roboto Condensed';}
.mainEmpEn .empBannerLeft{padding: 3em 0 6em;}
.mainEmpEn .empBannerLeft strong{font-size: 5em;}
@font-face{
     font-family: 'Roboto Condensed'; 
     src: url('../eot/robotocondensed-regular.eot');
     src:url('../woff/robotocondensed-regular.woff') format('woff'),
         url('../ttf/robotocondensed-regular.ttf') format('truetype'),
         url('../svg/robotocondensed-regular.svg') format('svg');
}
.mainEmpEn .empBannerLeft a.btn{padding: 0.3em 1em;}
.mainEmpEn .empCon3 ul.empCon3ul>li>div{font-size: 14px;}
@media (max-width: 767px) {
    .mainEmpEn .empBannerLeft{padding: 2em 0 3em;}
    .mainEmpEn .empBannerLeft strong{font-size: 3em;}
    .mainEmpEn .empCon1{font-size: 0.66em; padding: 0;}
    .empCon2 ul li{display: flex; align-items: center;}
    .empCon2 ul li strong{font-size: 1.3em; width: 38%; text-align: left;}
    .empCon2 ul li span{width: 62%; text-align: right; margin-top: 0;}
}


.mainEmpEn .empCon8 ul li a span{font-size: 18px;}
@media (max-width: 991px){
    .mainEmpEn .empCon8 ul li a span{font-size: 15px;}
}
@media (max-width: 767px){
    .mainEmpEn .empCon8 ul li a span{font-size: 12px; padding: 5px;}
}
@media (max-width: 350px){
    .mainEmpEn .empCon8 ul li a span{font-size: 10px;}
}