@charset "utf-8";
#wrap{background: #fff;}
#banner{width: 100%;min-width: 1200px;height: 500px;position: relative;overflow: hidden;}
#banner .banner-bg{	position: fixed;z-index: 1;width: 100%;	height: 100%;overflow: hidden;}
#banner .banner-bg div{position: relative;width: 100%;height: 100%;	background-repeat: no-repeat; background-size:100%; background-position: center top;}
#banner .textCon{position: relative;z-index: 2;width: 1200px;margin: 250px auto 0;text-align: right; text-shadow: 0 0 10px rgba(15,60,125,0.6);}
#banner .textCon h1{ font-size: 46px; display: block; line-height: 50px; color: #fff; padding: 20px 0 10px 0;} 
#banner .textCon p{ color: #fff; font-size: 32px; padding-left: 10%; font-weight: normal; margin-bottom: 15px;} 
#banner .textCon.text-left{text-align: left;}
#banner .textCon.text-left h1{ padding: 20px 0 10px 0;} 
#banner .textCon.text-left p{ padding-left: 0; padding-right: 10%;} 

#nav{ height: 70px; background: #3c6bc6; position: relative; z-index: 2;}
#nav ul{text-align: right; width: 1220px; margin: 0 auto; display: flex; justify-content: flex-end;}
#nav ul li{display: block;  }
#nav ul li a{ display: block; height: 70px; border-right: 1px solid #7299d9; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
#nav ul li a:hover{background: #3062b3;}
#nav ul li a span{display: block; padding: 12px 35px 0px; text-align: center; font-size: 16px; color: #fff;}
#nav ul li a i{display: block; text-align: center; padding: 0px 10px; font-size: 13px; opacity: .6; font-style: normal; color: #fff;}

.page-title{position: relative; border-bottom: 1px solid #eee;}
.page-title h1{ font-size: 20px; color: #333; padding-left: 5px; border-left: 3px solid #467acf; height: 24px; line-height: 24px; margin: 10px 0; font-weight: normal;}
.page-title h1 span{color: #555; padding-left: 5px; text-transform: Uppercase;}


#main{ padding: 0 0 40px 0; overflow: hidden; position: relative; z-index: 2; background:#f1f1f1 url(../img/main-bg.jpg) no-repeat center top; background-size: cover; background-attachment: fixed;}
#main .mainBox{background: #fff; padding: 20px 50px 40px; overflow: hidden;}

#main .box{margin: 0; visibility: hidden; margin: 60px -16px 0px;}

#main .list{float: left; margin: 0px 16px 50px; background: #888 url(../img/presentation-bg.png) no-repeat right top; padding: 0; display: block; width: 255px; height: 380px; position: relative; }
#main .list div{ background: #3062B3 ; padding: 0; display: block; width: 255px; height: 380px; position: relative; left: 0; top: 0; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; overflow: hidden;}
#main .list:hover div{ left: -12px;  box-shadow: 10px 0 10px rgba(0,0,0,0.2); }
/* #main .list:hover div{ left: 0; width: 250px; box-shadow: 10px 0 10px rgba(0,0,0,0.2); transform-origin: left top; transform: skew(0deg,-2deg);} */
#main .list i{height: 380px; width: 1px; position: absolute; background: #fff; opacity: .1; top: 0; left: 13px;}
#main .list h2{font-size: 36px; text-align: center; height:70px; line-height: 60px; width: 60%; margin: 0 auto; border:2px solid #fff; margin-top: 30%; margin-bottom: 5%; position: relative;  color: #fff; }
#main .list h2 span{display: block; height: 60px;  margin: 3px; border: 1px solid rgba(255,255,255,0.7);}
#main .list h5{text-align: center; font-size: 16px; font-weight: normal; color: #fff;margin-bottom: 60%; }
#main .list p{text-align: center; font-size: 14px; color: #fff;}