@font-face {
    font-family: 'lato';
    src: url(../font/汉仪新蒂日记体.ttf);
}
/*-------------main start----------------*/

.bannnerImg{width: 100%;height: 450px;background: url("../images/banner2.jpg") no-repeat center;background-size: cover; }
.titBlack h1{font-size: 44px;text-align: center;padding:70px 0; font-weight: 500}
.resonBox .titBlack p {
    font-size: 28px;
    color: #888888;
    text-align: center;
    padding: 10px 0 40px 0;
    margin-top: -48px;
}
.titWhite h1{font-size: 44px;color:#fff;text-align: center;padding:70px 0; font-weight: 500}
.inner {width:1200px; margin:0 auto;}

.links{text-align: center;cursor: pointer;}
.linkBtn{background: #0168b5;color:#fff;font-size: 30px;display: inline-block;border-radius: 50px;text-align: center;padding:20px 50px;margin: 70px auto;/*box-shadow: 0px 3px 20px #f8c8c8;*/}

.resonBox .content ul:nth-child(1) {
    margin-bottom: 50px;
}
.resonBox .content ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
}
.resonBox .content ul li {
    flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    text-align: center;
}
.resonBox .content ul li h2 {
    font-size: 30px;
    color: #222222;
    padding: 10px 0 15px 0;
}
.resonBox .content ul li p {
    font-size: 24px;
    color: #666666;
    font-weight: 300;
}
.mainBox1 .inner {display: flex; justify-content: space-around;}
.mainBox1 .inner .inner_list {width: 406px;}
.mainBox1 .inner_list li {width: 100%; height: 75px; font-size: 30px; color: #ffffff; text-align: center; line-height: 75px;}
.mainBox1 .inner_list li:nth-child(2n-1) {background-color: #0168b5;}
.mainBox1 .inner_list li:nth-child(2n) {border: 2px solid #0168b5; color: #16101d; box-sizing: border-box; margin: 20px auto}
.mainBox1 .inner_list li:nth-child(3) {margin-bottom: 0}
.mainBox1 .inner .inner_img {width: 720px;}
.mainBox1 .inner .inner_img img {width: 100%;}

.mainBox2{background: url("images/bg_02.jpg") no-repeat center;background-size: cover;width: 100%;}
.mainBox2 .inner a {display: inline-block; width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #ffffff; border-radius: 20px; margin-top: 15px}
.mainBox2 .inner p {font-size: 18px; color: #222222; line-height: 25px}
.mainBox2 .inner_left {background: url(../images/box02_01.png) no-repeat center; background-size: 100%; width: 380px; height: 463px; position: relative; text-align: center;}
.mainBox2 .inner_left h1 {font-size: 24px; color: #e12d30; margin: 23px auto 13px}
.mainBox2 .inner_left .img {width: 230px; height: 230px; display: inline-block}
.mainBox2 .inner_left .img img {width: 100%;}
.mainBox2 .inner_left a {background-color: #e12d30;}
.mainBox2 .linkBtn {background: #e12d30;}

.mainBox2 .inner_list {display: flex; justify-content: space-between; flex-flow: row wrap; width: 791px; height: 463px;}
.mainBox2 .inner_list li {width: 380px; height: 220px;background-size: 100%; position: relative; text-align: center;}
.mainBox2 .inner_list .list_01 {background: url(../images/box02_03.png) no-repeat center; }
.mainBox2 .inner_list .list_02 {background: url(../images/box02_04.png) no-repeat center; }
.mainBox2 .inner_list .list_03 {background: url(../images/box02_05.png) no-repeat center; margin-top: 20px}
.mainBox2 .inner_list .list_04 {background: url(../images/box02_06.png) no-repeat center; margin-top: 20px }
.mainBox2 .inner_list li h1 {font-size: 24px; color: #333333; font-weight: bold; margin: 23px auto 20px;}
.mainBox2 .inner_list li a {background-color: #0168b5; position: absolute; left: 50%; transform: translateX(-50%) ; bottom: 30px}

.mainBox3,.mainBox7{margin-bottom:65px;}
.mainBox3 .fBox{position: relative;height: 515px;width: 380px;}
.fBox .destion{position: absolute;left:0;right:0;bottom:10px;background: #fff;width: 360px;height: 190px;border-radius: 15px;text-align: center;margin: 0 auto;}
.fBox .destion h1{font-size: 24px;margin-top: 20px;}
.fBox .destion p{font-size: 18px;margin: 10px 0;color:#888888}
.fBox .destion p em{color:#db4040}
.fBox .destion a{display: inline-block;background: #db4040;color:#fff;width: 250px;line-height: 50px;font-size: 18px;}
.rBox {width: 790px;}
.rBox ul li{position: relative;float: left;height: 242px;}
.rBox ul li:nth-child(odd){margin-right: 30px;}
.rBox ul li:nth-child(1),.rBox ul li:nth-child(2){margin-bottom: 31px;}
.rBox ul li h1{font-size: 24px;color:#fff;text-align: center;line-height: 40px;background: rgba(0,0,0,.5);position: absolute;left: 0;right: 0;bottom:0;}
.rBox .mask{background: rgba(0,0,0,.5);position: absolute;top:0;bottom:0;left:0;right:0;background: rgba(0,0,0,.5);display: none;}
.rBox .mask .maskInner{width: 335px;background: #fff;border-radius: 15px;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);text-align: center;}
.rBox .maskInner h2{font-size: 24px;color:#333333;margin: 30px 0 10px;}
.rBox .maskInner p{height: 90px;}
.rBox .maskInner p em{color:#db4040;}
.rBox .maskInner a{display: inline-block;color:#fff;text-align: center;line-height: 45px;background: #db4040;padding: 0 80px;margin: 0 0 15px;}
.rBox ul li:hover .mask{display: block;}

.mainBox4{background: #f9f9f9;position: relative;}
.mainBox4 .links{position: absolute;bottom:0;left:0;right:0;}


.mainBox5{background: url(../images/bg2_02.jpg) no-repeat center;background-size: cover; height: 844px; position: relative;}
.mainBox5 .inner .linkBtn {position: absolute; left: 50%; transform: translateX(-50%); bottom: 53px; margin: auto;}

.mainBox6 ul li {width: 33.33%;float: left;margin-bottom: 40px;}
.mainBox6 ul li img {display: block;width: 104px;margin: 0 auto;}
.mainBox6 ul li p {font-size: 20px;color: #222222;text-align: center;margin: 20px 0;}

.teaTab {overflow: hidden; padding: 10px 30px;}
.teaTab .teaCon {width: 752px; height: 400px; box-shadow: 2px 0 15px #eeeeee; padding: 10px; box-sizing: border-box;}
.teaTab .teaCon li {position: relative; display: none;}
.teaTab .teaCon li:first-child {display: block;}
.teaTab .teaCon .teaInfo {width: 357px; height: 380px; border: 1px solid #fceaea; padding: 25px 20px 22px; box-sizing: border-box;}
.teaTab .teaCon .teaInfo h1 {font-size: 30px; color: #222222; position: relative;}
.teaTab .teaCon .teaInfo h1 span {font-size: 20px; color: #fcfefe; padding: 2px 12px; background-color: #e12d30; display: inline-block; border-radius: 3px; position: absolute; top: 50%; transform: translateY(-50%); margin-left: 20px;}
.teaTab .teaCon .teaInfo h2 {font-size: 18px; color: #e12d30; margin: 14px 0;}
.teaTab .teaCon .teaInfo img {position: absolute; top: 28px; right: 22px; width: 57px; height: 71px;}
.teaTab .teaCon .teaInfo i {display: block; width: 100%; height: 1px; background-color: #d2d2d2;}
.teaTab .teaCon .teaInfo h3 {font-size: 20px; color: #222222; margin: 10px 0 12px;}
.teaTab .teaCon .teaInfo p {height: 155px; line-height: 26px; font-size: 18px; color: #555555;}
.teaTab .teaCon .teaInfo a {font-size: 20px; color: #e12d30; width: 210px; height: 45px; line-height: 45px; text-align: center; box-sizing: border-box; border: 1px solid #e12d30; display: inline-block;}
.teaTab .teaMenu {display: flex; flex-flow: row wrap; justify-content: space-between; width: 366px;}
.teaTab .teaMenu li {border: 5px solid #ffffff; height: 117px;}
.teaTab .teaMenu li.active {border: 5px solid #e12d30;}
.teaTab .teaMenu li:nth-child(4) , .teaTab .teaMenu li:nth-child(5), .teaTab .teaMenu li:nth-child(6){margin: 9px 0;}
/*-------------main end------------------*/