body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,form,fieldset,input,select,textarea,blockquote,th,td,dl,dt,dd,nav{
    margin: 0;
    padding: 0;
    font-family: '微锟斤拷锟脚猴拷', Microsoft YaHei, Arial, Verdana, Helvetica, sans-serif;
}
html,body{
    width: 100%;
    height: auto;
    font-size: 14px;
    background:url("../images/bg05.jpg") repeat;
    color: #fff;
    -webkit-text-size-adjust:none;
}

html{
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.clr{
    clear: both;
}
.pr{
    position: relative;
}
.pa{
    position: absolute;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}
.vert-m{
    vertical-align: middle;
}


ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.f18{
    font-size: 18px;
}
.f16{
    font-size: 16px;
}
.f12{
    font-size: 12px;
}
.t-indent{
    text-indent: 2em;
}
.green{
    color: #79c34b;
}
.red{
    color: #fa5858;
}

.w100p{
    width: 100%;
}
.h100p{
    height: 100%;
}
.h400{
    height: 400px;
}
/**********锟斤拷呔锟?***********/

.m5{margin: 5px;}
.mt5{margin-top: 5px;}
.mb5{margin-bottom: 5px;}
.ml5{margin-left: 5px;}
.mr5{margin-right: 5px;}

.m10{margin: 10px;}
.mt10{margin-top: 10px;}
.mb10{margin-bottom: 10px;}
.ml10{margin-left: 10px;}
.mr10{margin-right: 10px;}

.m15{margin: 15px;}
.mt15{margin-top: 15px;}
.mb15{margin-bottom: 15px;}
.ml15{margin-left: 15px;}
.mr15{margin-right: 15px;}

.m20{margin: 20px;}
.mt20{margin-top: 20px;}
.mb20{margin-bottom: 20px;}
.ml20{margin-left: 20px;}
.mr20{margin-right: 20px;}

.m25{margin: 25px;}
.mt25{margin-top: 25px;}
.mb25{margin-bottom: 25px;}
.ml25{margin-left: 25px;}
.mr25{margin-right: 25px;}

.m30{margin: 30px;}
.mt30{margin-top: 30px;}
.mb30{margin-bottom: 30px;}
.ml30{margin-left: 30px;}
.mr30{margin-right: 30px;}

.m40{margin: 40px;}
.mt40{margin-top: 40px;}
.mb40{margin-bottom: 40px;}
.ml40{margin-left: 40px;}
.mr40{margin-right: 40px;}

.m50{margin: 50px;}
.mt50{margin-top: 50px;}
.mb50{margin-bottom: 50px;}
.ml50{margin-left: 50px;}
.mr50{margin-right: 50px;}

.m60{margin: 60px;}
.mt60{margin-top: 60px;}
.mb60{margin-bottom: 60px;}
.ml60{margin-left: 60px;}
.mr60{margin-right: 60px;}

.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}

/**********锟节边撅拷***********/
.p0{padding: 0px;}
.pt0{padding-top: 0px;}
.pb0{padding-bottom: 0px;}
.pl0{padding-left: 0px;}
.pr0{padding-right: 0px;}

.p5{padding: 5px;}
.pt5{padding-top: 5px;}
.pb5{padding-bottom: 5px;}
.pl5{padding-left: 5px;}
.pr5{padding-right: 5px;}

.pl8{padding-left: 8px;}

.p10{padding: 10px;}
.pt10{padding-top: 10px;}
.pb10{padding-bottom: 10px;}
.pl10{padding-left: 10px;}
.pr10{padding-right: 10px;}

.p15{padding: 15px;}
.pt15{padding-top: 15px;}
.pb15{padding-bottom: 15px;}
.pl15{padding-left: 15px;}
.pr15{padding-right: 15px;}

.p20{padding: 20px;}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pl20{padding-left: 20px;}
.pr20{padding-right: 20px;}

.p25{padding: 25px;}
.pt25{padding-top: 25px;}
.pb25{padding-bottom: 25px;}
.pl25{padding-left: 25px;}
.pr25{padding-right: 25px;}

.p30{padding: 30px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pl30{padding-left: 30px;}
.pr30{padding-right: 30px;}

.p40{padding: 40px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}
.pl40{padding-left: 40px;}
.pr40{padding-right: 40px;}

.p50{padding: 50px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.pl50{padding-left: 50px;}
.pr50{padding-right: 50px;}

.p60{padding: 60px;}
.pt60{padding-top: 60px;}
.pb60{padding-bottom: 60px;}
.pl60{padding-left: 60px;}
.pr60{padding-right: 60px;}

/****锟斤拷锟斤拷省锟斤拷****/
.ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.gray-3{
    color: #333;
}
.gray-6{
    color: #666;
}
.gray-9{
    color: #999;
}
.container-fluid.plr0{
    padding: 0px;
}

@font-face {
    font-family: MsBold;
    src: url('../Montserrat/Montserrat-SemiBold.ttf');
    font-display:swap;/**在这些选项中，font-display: swap;这一规则备受关注。这是好事，它体现了 FOUT 强势回归所带来的价值。使用这个规则，浏览器完全不会等待字体加载，而是立刻用字体栈中最符合条件的字体把文字先显示出来。然后，如果有更符合的字体，并且加载完毕，浏览器会“交换”字体。**/
}
@font-face {
    font-family: MThin;
    src: url('../Montserrat/Montserrat-Thin.ttf');
    font-display:swap;
}
@font-face {
    font-family: MLight;
    src: url('../Montserrat/Montserrat-Light.ttf');
    font-display:swap;
}
@font-face {
    font-family: FOR;
    src: url('../Montserrat/FjallaOne-Regular.ttf');
    font-display:swap;
}
@font-face {
    font-family: Anton;
    src: url('../Montserrat/Anton-Regular.ttf');
    font-display:swap;
}
@font-face {
    font-family: Medium;
    src: url('../Montserrat/Montserrat-Medium.ttf');
    font-display:swap;
}
.none{
    display:none;
}
.container-fluid.black{
    background: none;
}
.mouse{
    width: 48px;
    height: 48px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}
/***********************************index************************************/
.nav_top_box{
    width: 100%;
    height:82px;
    padding: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    background:none;
}

.nav_top_box.bgcolor{
    background: rgba(0,0,0,0.35);
}
.top_row{
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
	/* background-color: orange; */
}
.logo{
    float: left;
    width: auto;
    height: 100%;
	padding-left: 10px;
}
.logo img{
    width: 212px;
    height: auto;
    display: block;
    margin: 20px 0;
    padding: 0px;
}

.banner_box {
    width: 100%;
    height: auto;
    position: relative;
}
.banner_video{
    width: 100%;
    position: relative;
}
.banner_video video{
    display: block;
    width: 100%;
    height: auto;
}
.banner_txt{
    position: absolute;
    z-index: 10;
    top:300px;
    width: 1200px;
    left: 50%;
    margin: 0 auto 0 -600px;
}
.banner_p01{
    font-size: 80px;
    font-family: FOR;
}
.blue_bg{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: 0;
}
.blue_bg img{
    display: block;
    width: 100%;
    height: auto;
}
.top_menu_a{
    display: block;
    height: 24px;
    width: 24px;
    float: right;
    margin: 28px 10px;
    /* background: url("../images/menu_btn_a.png")no-repeat 0 0; */
    /* background-size: contain; */
}
.top_menu_b{
    display: block;
    height: 24px;
    width: 24px;
    float: right;
    margin: 28px 10px;
    /* background: url("../images/menu_btn_b.png")no-repeat 0 0; */
    /* background-size: contain; */
}




.menu_btn{
    display: block;
    height: 24px;
    width: 24px;
    float: right;
    margin: 28px 0 28px 10px;
    background: url("../images/menu_btn.png")no-repeat 0 0;
    background-size: contain;
}
.menu_btn:hover{
    background: url("../images/menu_btn01.png")no-repeat 0 0;
    background-size: contain;
}
.colse_btn{
    display: block;
    height: 24px;
    width: 24px;
    float: right;
    margin: 28px 0 28px 10px;
    background: url("../images/menu_btn_c.png")no-repeat 0 0;
    background-size: contain;
}
.menu_btn.none, .colse_btn.none{
    display: none;
}
.con_menu_box{
    position: absolute;
    top: 100%;
    right:0px;
    z-index:100;
    width: 230px;
    padding:10px 15px;
    text-align: left;
    background-color: #f7f7f7;
}
.con_menu_box > ul > li >a{
    display: block;
    padding: 8px 5px;
    clear: both;
    font-family: MsBold;
    font-weight: 400;
    line-height: 1.42857143;
    color: #222;
    white-space: nowrap;
}
.block_box{
    width: 100%;
    height: auto;
}
.block_title{
    max-width: 1200px;
    height: auto;
    padding: 60px 40px 30px 40px;
    font-size: 54px;
    color: #fff;
    font-family: Anton;
    margin: 0 auto;
}
.tabPanel{
   width: 100%;
    position: relative;
}
.tabPanel .padw{
    position: absolute;
    width: 100%;
    z-index: 20;
    left: 0;
    top:-180px;
    background: #2c63ff;
}
.tabPanel .padw > ul {
    z-index: 10;
    height:auto;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    padding: 0 40px;
}
.tabPanel .padw > ul li {
    display:block;
    float: left;
    width: 16.66%;
    height: 180px;
    cursor: pointer;
}

.tabPanel .padw > ul li.hit{
    height: 180px;
    background: #00d102;
    position: relative;
}
.tabPanel .padw > ul li.hit:after{
    content:"";
    width:100%;
    height: 0;
    position: absolute;
    bottom: -50px;
    left: 0;
    border-left: 92px solid transparent;
    border-right: 92px solid transparent;
    border-top: 50px solid #00d102;
}
.tabPanel .padw > ul li .tab_nav img{
    width: 62px;
    height: 62px;
    display: block;
    margin: 30px auto 10px auto;
}
.tabPanel .padw > ul li .tab_nav p{
    width: 100%;
    font-family: FOR;
    font-size: 28px;
    text-align: center;
}
.pane{
    margin-top: 180px;
    min-height:400px;
    display:none;
    position: relative;
    overflow: hidden;
}
.block_1200{
    max-width: 1200px;
    margin: 0 auto;
}
.pane .block_1200{
    padding-right: 40px;
    padding-left: 40px;
}
.what_a{
    margin-top: 40px;
    margin-bottom: 20px;
}
.what_a li{
    width: 100%;
    font-family: FOR;
    font-size: 32px;
    position: relative;
    line-height: 60px;
    padding-left: 30px;
}
.what_a li:before{
    content:"";
    width:16px;
    height: 4px;
    position: absolute;
    bottom: 28px;
    left: 0;
    background: #ffffff;
}
.nav01, .nav02, .nav03, .nav04, .nav05, .nav06, .nav07{
    margin-top: 0px;
}

.btn01{
    display: block;
    padding: 10px 30px;
    border: 2px solid #fff;
    font-family: Anton;
    font-size: 24px;
    color: #fff;
    max-width: 180px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
}
.btn01:hover{
    border-color: #f44e00;
    color: #fff;
    text-decoration: none;
}
.dh{
    width:100%;
    height:100%;
    text-align:center;
    background:url("../images/logo.svg") center no-repeat;
    background-size:contain;
    position:absolute;
    z-index: 0;
    animation:mydh/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 0s/*2秒后开始*/;
    -moz-animation:mydh/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 0s/*2秒后开始*/;
    -webkit-animation:mydh/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 0s/*2秒后开始*/;
    animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
    -moz-animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
    -webkit-animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
}
@keyframes mydh{
    0%{
        transform:rotate(0deg)/*旋转*/ scale(0.1)/*放大缩小*/;
        -ms-transform:rotate(0deg) scale(0.1);
        -moz-transform:rotate(0deg) scale(0.1);
        -webkit-transform:rotate(0deg) scale(0.1);
        opacity: 1;
    }
    50%{
        transform:rotate(360deg)/*旋转*/ scale(3)/*放大缩小*/;
        -ms-transform:rotate(360deg) scale(3);
        -moz-transform:rotate(360deg) scale(3);
        -webkit-transform:rotate(360deg) scale(3);
        top:0px;left:0px;
        opacity: 1;
    }
    100%{
        transform:rotate(360deg)/*旋转*/ scale(30)/*放大缩小*/;
        -ms-transform:rotate(360deg) scale(30);
        -moz-transform:rotate(360deg) scale(30);
        -webkit-transform:rotate(360deg) scale(30);
        opacity: 0;
        top:0px;left:0px;
    }
}
.block_1200.dh2{
    opacity:0;
    animation:mydh2/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 1s/*2秒后开始*/;
    -moz-animation:mydh2/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 1s/*2秒后开始*/;
    -webkit-animation:mydh2/**命名**/ 2s/*动画时长*/ ease/*匀速*/ 1s/*2秒后开始*/;
    animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
    -moz-animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
    -webkit-animation-fill-mode:forwards/*当动画完成后，保持最后一个属性值*//*backwards在动画显示之前，应用开始属性值*/;
}
@keyframes mydh2{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;

    }
}

.block_box_in{
    max-width: 1200px;
    margin: 0 auto;
}
.img_mid{
    display: block;
    width: auto;
    height: 400px;
    margin: 0 auto;
}
.wwt{
    font-size: 54px;
    font-family: Anton;
    margin: 60px 0 20px 0;
}
.wwp{
    font-size: 14px;
    line-height: 28px;
    font-family:Medium ;
    margin: 20px 0px 40px 0px;
}
.block_1200.shop{
    padding: 40px 40px 0 40px;
}

.tith2{
    font-family: Anton;
    font-size: 54px;
    padding: 50px 0 20px 0;
}
.tith4{
    font-family: FOR;
    font-size: 16px;
}
.shop_img{
    max-width: 1100px;
    height: auto;
    display: block;
    margin: 40px auto;
}
.carousel_box{
    width: 100%;
    min-height: 260px;
}
.car_img{
    width:calc(100% - 20px);
    height:auto;
    display: block;
    margin-left: 20px;
}
.car_tit{
    font-family: Anton;
    font-size: 30px;
    padding-bottom: 10px;
    margin-top: 40px;
}
.car_table{
    border: none;
}
.car_table tr th, .car_table tr td{
    padding:6px 15px;
}
.car_table tr th{
    font-family: FOR;
    font-size: 20px;
    font-weight: normal;
}
.car_table tr td{
   background: #2c63ff;
    font-family: Anton;
    font-size: 20px;
    font-weight: 100;
}
.carousel_box .carousel-control .glyphicon-chevron-right{
    margin-right: -90px;
    font-size: 0;
}
.carousel_box .carousel-control .glyphicon-chevron-left{
    margin-left: -90px;
    font-size: 0;
}
.carousel_box .carousel-control .glyphicon-chevron-right i, .carousel_box .carousel-control .glyphicon-chevron-left i{
    font-size: 48px;
}
.footer{
    border-top: 1px solid #fff;
    margin-top: 30px;
}
.footer_tit{
    width: 100%;
    height: 38px;
    margin-bottom: 20px;
}
.blue_block{
    width: 80px;
    height: 6px;
    display: block;
    background:#2c63ff;
}
.footer_h3{
    width: 100%;
    font-size: 24px;
    font-family: Anton;
    z-index: 10;
}
.footrt_p{
    font-family: Medium;
    line-height: 1.8;
}
.footer_img{
    width: 100%;
    height:auto;
    display: block;
}
.xs-mt50{
    margin-top: 0px;
}
.who_what{
    padding: 30px 20px;
    position:relative;
    margin:0px auto;
    /* height:100%; */
    box-sizing:border-box;
    /*background:linear-gradient(-80deg, #2c63ff 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 51%, #2c63ff 51%);*/
}
.what_a.mth01{
    margin-top: 60px;
}
.ben_btn{
    display: block;
    text-align: center;
    color: #fff;
    padding: 30px;
    border:1px solid rgba(0,0,0,0);
}
.ben_btn:hover{
    color: #fff;
    border:1px solid #00d102;
    text-decoration: none;
    box-shadow:0 0 0px 2px #00d102;
}
.ben_btn p{
    font-family: FOR;
    font-size: 32px;
    line-height: 1.8;
}
.shop_boxl{
    width: 100%;
    height: 620px;
    background:none;
    border: 2px solid #fff;
    position: relative;
}
.shop_boxr{
    width: 100%;
    height: 620px;
    background:none;
    position: relative;
}
.shop_01{
    width: 100%;
    height: 380px;
    display: block;
    vertical-align: middle;
    color: #fff;
    font-family: FOR;
	background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    position: absolute;
    top:0;
    left: 0;
	padding-top: 320px;
}
.shop_02{
    width: 100%;
    height: 128px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 128px;
    border-top: 2px solid #fff;
    position: absolute;
    top:380px;
    left: 0;
}
.shop_03{
    width: 100%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-top: 2px solid #fff;
    position: absolute;
    top:508px;
    left: 0;
}
.shop_04{
    width: 28.5%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    left: 0px;
    top:0px;
}
.shop_05{
    width: 42%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    left:28.5%;
    top:0px;
}
.shop_06{
    width: 28.5%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    left: 0px;
    top:164px;
}
.shop_07{
    width: 28.5%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    left: 0px;
    top:272px;
}
.shop_08{
    width: 28.5%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    right: 0px;
    top:164px;
}
.shop_09{
    width: 28.5%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    right: 0px;
    top:272px;
}
.shop_10{
    width: 32%;
    height: 108px;
    display: block;
    color: #fff;
    font-family: FOR;
    background:url("../images/bg05.jpg") repeat;
    text-align: center;
    font-size: 18px;
    line-height: 108px;
    border: 2px solid #fff;
    border-left: none;
    position: absolute;
    left: 0px;
    top:0px;
}
.shop_11{
    width: calc(100% - 2px);
    height: 454px;
	background:url("../images/bg05.jpg") repeat;
    border: 2px solid #fff;
    border-left: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: block;
}
.letter_p {
    font-family: FOR;
    color: #fff;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webki-transform: rotate(-90deg);
    font-size: 18px;
    width: 200px;
    height: 30px;
    position: absolute;
    bottom: 250px;
    left:-40px;
}
.panel_p{
    color: #fff;
    font-family: FOR;
    text-align: center;
    font-size: 18px;
    margin-top: 300px;
}
.shop_01:hover, .shop_02:hover,.shop_03:hover, .shop_04:hover, .shop_05:hover, .shop_06:hover, .shop_07:hover, .shop_08:hover, .shop_09:hover, .shop_10:hover, .shop_11:hover{
    background: #00d102;
}
.shop_11:hover p.letter_p, .shop_01:hover p.panel_p{
	background: #00d102;
}
.shop_mt{
    margin-top: 50px;
}
.tit_blue{
    background: #2c63ff;
}
.txt_bg{
    width: 100%;
    /*background:linear-gradient(-80deg, #2c63ff 49.8%, rgba(0,0,0,0) 49.8%, rgba(0,0,0,0) 50.2%, #2c63ff 50.2%);*/
}
@keyframes myfirst
{
    0%   {background:linear-gradient(-80deg, #2c63ff 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%, #2c63ff 100%);}
    10%   {background:linear-gradient(-80deg, #2c63ff 5%, rgba(0,0,0,0) 5%, rgba(0,0,0,0) 95%, #2c63ff 95%);}
    20%   {background:linear-gradient(-80deg, #2c63ff 10%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, #2c63ff 90%);}
    30% {background:linear-gradient(-80deg, #2c63ff 15.8%, rgba(0,0,0,0) 15.8%, rgba(0,0,0,0) 85.2%, #2c63ff 85.2%);}
    40% {background:linear-gradient(-80deg, #2c63ff 20.8%, rgba(0,0,0,0) 20.8%, rgba(0,0,0,0) 80.2%, #2c63ff 80.2%);}
    50% {background:linear-gradient(-80deg, #2c63ff 25.8%, rgba(0,0,0,0) 25.8%, rgba(0,0,0,0) 75.2%, #2c63ff 75.2%);}
    60% {background:linear-gradient(-80deg, #2c63ff 30.8%, rgba(0,0,0,0) 30.8%, rgba(0,0,0,0) 70.2%, #2c63ff 70.2%);}
    70% {background:linear-gradient(-80deg, #2c63ff 35.8%, rgba(0,0,0,0) 35.8%, rgba(0,0,0,0) 65.2%, #2c63ff 65.2%);}
    80% {background:linear-gradient(-80deg, #2c63ff 40.8%, rgba(0,0,0,0) 40.8%, rgba(0,0,0,0) 60.2%, #2c63ff 60.2%);}
    90% {background:linear-gradient(-80deg, #2c63ff 45.8%, rgba(0,0,0,0) 45.8%, rgba(0,0,0,0) 55.2%, #2c63ff 55.2%);}
    100% {background:linear-gradient(-80deg, #2c63ff 49.8%, rgba(0,0,0,0) 49.8%, rgba(0,0,0,0) 50.2%, #2c63ff 50.2%);}
}

.txt_bg.dh01{
    animation: myfirst 0.5s;
    -webkit-animation: myfirst 0.5s;
    /*停止在最后一帧*/
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
.left_txt{
    padding-right: 50px;
    opacity: 0;
}
.right_txt{
    padding-left: 50px;
    opacity: 0;
}
@keyframes myleft {
0%{  left:-100%;opacity: 0; }
    100%{left:0;   opacity: 1; }
}
@keyframes myright {
    0%{  right:-100%;opacity: 0; }
    100%{right:0;   opacity: 1; }
}
.txt_bg.dh01 .left_txt{
    animation: myleft 1s;
    -webkit-animation: myleft 1s;
    /*停止在最后一帧*/
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s; /* Safari 和 Chrome */
}
.txt_bg.dh01 .right_txt{
    animation: myright 1s;
    -webkit-animation: myright 1s;
    /*停止在最后一帧*/
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s; /* Safari 和 Chrome */
}
.row.benffits{
    margin-top: 20px;
    background: url("../images/bg02.png") no-repeat center;
}
.row.benffits .col-sm-6{
    padding: 0px;
}
.carousel-control.left, .carousel-control.right{
    background: none;
}
.open {
  width: 24px;
  height: 24px;
  margin: 28px 10px;
  float: right;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s linear;
}
.open:hover {
  /* opacity: 0.8; */
}
.open span {
  display: block;
  float: left;
  clear: both;
  height: 3px;
  width: 24px;
  border-radius: 40px;
  background-color: #fff;
  position: absolute;
  overflow: hidden;
  transition: all 0.4s ease;
}
.open span:nth-child(1) {
  z-index: 9;
}
.open span:nth-child(2) {
  margin-top: 11px;
}
.open span:nth-child(3) {
  margin-top: 22px;
}

.sub-menu {
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  height: 0;
  width: 0;
  right: 0;
  top: 0;
  position: absolute;
  background-color: rgba(255, 165, 0, 0.54);
  /* background-color: orange; */
  border-radius: 50%;
  z-index: 18;
  overflow: hidden;
}
.sub-menu li {
  display: block;
  float: right;
  clear: both;
  height: auto;
  margin-right: -160px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sub-menu li:first-child {
  margin-top: 180px;
}
.sub-menu li:nth-child(1) {
  -webkit-transition-delay: 0.05s;
}
.sub-menu li:nth-child(2) {
  -webkit-transition-delay: 0.10s;
}
.sub-menu li:nth-child(3) {
  -webkit-transition-delay: 0.15s;
}
.sub-menu li:nth-child(4) {
  -webkit-transition-delay: 0.20s;
}
.sub-menu li:nth-child(5) {
  -webkit-transition-delay: 0.25s;
}
.sub-menu li a {
  color: #fff;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  display: block;
  float: left;
  line-height: 40px;
}

.oppenned .sub-menu {
  opacity: 1;
  height: 450px;
  width: 450px;
}
.oppenned span:nth-child(2) {
  overflow: visible;
}
.oppenned span:nth-child(1), .oppenned span:nth-child(3) {
  z-index: 100;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.oppenned span:nth-child(1) {
  -webkit-transform: rotate(45deg) translateY(5px) translateX(5px);
          transform: rotate(45deg) translateY(5px) translateX(5px);
}
.oppenned span:nth-child(2) {
  height: 460px;
  width: 460px;
  right: -160px;
  top: -100px;
  border-radius: 50%;
  background-color: rgba(38, 84, 133, 0.54);
  /* background-color: orange; */
}
.oppenned span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translateY(-10px) translateX(10px);
          transform: rotate(-45deg) translateY(-10px) translateX(10px);
}
.oppenned li {
  margin-right: 168px;
}

.button {
  display: block;
  float: left;
  clear: both;
  padding: 20px 40px;
  background: #fff;
  border-radius: 3px;
  border: 2px solid #10a1ea;
  overflow: hidden;
  position: relative;
}
.button:after {
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  content: "";
  position: absolute;
  height: 200px;
  width: 400px;
  -webkit-transform: rotate(45deg) translateX(-540px) translateY(-100px);
          transform: rotate(45deg) translateX(-540px) translateY(-100px);
  background: #10a1ea;
  z-index: 1;
}
.button:before {
  transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  content: attr(title);
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 2;
  text-align: center;
  padding: 20px 40px;
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}
.button:hover {
  text-decoration: none;
}
.button:hover:after {
  -webkit-transform: translateX(-300px) translateY(-100px);
          transform: translateX(-300px) translateY(-100px);
}
.button:hover:before {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
/************************************1200一下*********************************************/
@media (max-width:1200px) {
    .banner_txt{
        top:150px;
        width:auto;
        left:0;
        margin:0;
        padding: 0 20px;
    }
    .banner_p01{
        font-size: 50px;
    }
    .logo img{
        width: 212px;
        height: auto;
        display: block;
        margin: 20px 20px;
        padding: 0px;
    }
    .top_menu_a{
        margin: 20px 10px;
    }
    .top_menu_b{
        margin: 20px 10px;
    }
	.open{
	    margin: 20px 10px;
	}
    .menu_btn{
        margin: 20px 20px 20px 10px;
    }
    .colse_btn{
        margin: 20px 20px 20px 10px;
    }
    .block_title{
        padding: 40px 40px 30px 40px;
        font-size: 48px;
    }
    .tabPanel .padw > ul {
        height:auto;
        max-width: 1200px;
    }
    .tabPanel .padw > ul li.hit:after{
        border-left: 85px solid transparent;
        border-right: 85px solid transparent;
    }
    .block_1200{
        max-width: 1200px;
        margin: 0 20px;
    }
    .what_a li{
        font-size:28px;
    }
    .shop_img{
        max-width: 100%;
    }
    .car_tit{
        font-size: 24px;
        margin-top: 30px;
    }
    .car_table tr th{
        font-size: 16px;
    }
    .car_table tr td{
        font-size: 16px;
    }
    .wwt{
        font-size: 48px;
        font-family: Anton;
        margin: 40px 0 20px 0;
    }
    .tith2{
        font-family: Anton;
        font-size: 48px;
        padding: 40px 0 20px 0;
    }

}
/************************************1024以下*********************************************/
@media (max-width:1024px) {
    .tabPanel .padw > ul li.hit:after{
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
    }
    .what_a{
        margin-top: 30px;
        margin-left: 0px;
    }
    .what_a li{
        width: 100%;
        font-family: FOR;
        font-size: 24px;
        position: relative;
        line-height: 50px;
        padding-left: 30px;
    }
    .btn01{
        margin-top: 80px;
        padding: 10px;
        font-size: 14px;
    }
    .img_mid{
        display: block;
        width: auto;
        height: 400px;
        margin: 0 auto;
    }

    .wwp{
        font-size: 14px;
        line-height: 1.8;
        font-family:Medium ;
        margin: 10px 0px 40px 0px;
    }
    .car_tit{
        font-size: 18px;
        margin-top: 30px;
    }
    .car_table tr th{
        font-size: 14px;
    }
    .car_table tr td{
        font-size: 14px;
    }

    .footer_h3{
        width: 100%;
        font-size: 18px;
        font-family: Anton;
        z-index: 10;
    }
    .footrt_p{
        font-size: 12px;
    }
    .tabPanel .padw > ul li .tab_nav p{
            font-size: 16px;
       }
    .pane{
        min-height: 360px;
    }
    .what_a.mth01{
        margin-top: 30px;
    }

}
/************************************992以下*********************************************/
@media (max-width:992px) {
    .tabPanel .padw > ul li.hit:after{
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }
    .what_a li{
        font-size: 18px;
    }

    .car_table tr th{
        font-size: 12px;
    }
    .car_table tr td{
        font-size: 12px;
    }


    .wwt {
        margin: 40px 0 20px 0;
    }
    .img_mid{
        display: block;
        width: 100%;
        height:auto;
        margin: 0 auto;
    }
    .car_table tr th, .car_table tr td{
        padding:6px 10px;
    }

}
/************************************768以下*********************************************/
@media (max-width:768px) {
    .banner_video img{
        width: 100%;
        height: auto;
    }
    .block_title{
        padding: 40px 40px 20px 40px;
        font-size: 32px;
    }
    .tabPanel .padw > ul li.hit:after{
        border-left: 55px solid transparent;
        border-right: 55px solid transparent;
    }
    .tith2{
        font-family: Anton;
        font-size: 32px;
        padding: 40px 0 20px 0;
    }
    .tith4{
        font-family: FOR;
        font-size: 12px;
    }
    .car_tit{
        font-size: 18px;
        margin-top: 30px;
    }
    .footer_img{
        margin-top: 30px;
    }
    .footrt_p i{
        font-size: 20px;
    }
    .pane{
        min-height: 340px;
    }
    .shop_01, .shop_02, .shop_03, .shop_04, .shop_05, .shop_06, .shop_07, .shop_08, .shop_09, .shop_10, .shop_11{
        font-size: 14px;
    }
    .letter_p {
        font-size: 14px;
        width: 200px;
        height: 30px;
        position: absolute;
        bottom: 250px;
        left:-80px;
    }
    .shop_boxl{
        width: 100%;
        height: 400px;
        background:none;
        border: 2px solid #fff;
        position: relative;
    }
    .shop_boxr{
        width: 100%;
        height: 400px;
        background:none;
        position: relative;
    }
    .shop_01{
        width: 100%;
        height: 250px;
        display: block;
        vertical-align: middle;
        color: #fff;
        font-family: FOR;
        text-align: center;
        position: absolute;
        top:0;
        left: 0;
		padding-top: 200px;
    }
    .shop_02{
        width: 100%;
        height: 73px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 73px;
        border-top: 2px solid #fff;
        position: absolute;
        top:250px;
        left: 0;
    }
    .shop_03{
        width: 100%;
        height: 73px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 73px;
        border-top: 2px solid #fff;
        position: absolute;
        top:323px;
        left: 0;
    }
    .shop_04{
        width: 28.5%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        position: absolute;
        left: 0px;
        top:0px;
    }
    .shop_05{
        width: 42%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        position: absolute;
        left:28.5%;
        top:0px;
    }
    .shop_06{
        width: 28.5%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-right: 2px solid #fff;
        border-top: 2px solid #fff;
        position: absolute;
        left: 0px;
        top:106px;
    }
    .shop_07{
        width: 28.5%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-right: 2px solid #fff;
        border-top: 2px solid #fff;
        position: absolute;
        left: 0px;
        top:178px;
    }
    .shop_08{
        width: 28.5%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff;
        position: absolute;
        right: 0px;
        top:106px;
    }
    .shop_09{
        width: 28.5%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff;
        position: absolute;
        right: 0px;
        top:178px;
    }
    .shop_10{
        width: 32%;
        height: 72px;
        display: block;
        color: #fff;
        font-family: FOR;
        text-align: center;
        line-height: 72px;
        border: 2px solid #fff;
        border-left: none;
        position: absolute;
        left: 0px;
        top:0px;
    }
    .shop_11{
        width: calc(100% - 2px);
        height: 292px;
        border: 2px solid #fff;
        border-left: none;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: block;
    }
    .panel_p{
        font-size: 14px;
        margin-top: 200px;
    }
    .letter_p {
        font-family: FOR;
        color: #fff;
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webki-transform: rotate(-90deg);
        font-size: 14px;
        width: 200px;
        height: 30px;
        position: absolute;
        bottom: 200px;
        left:-80px;
    }
    .shop_01:hover, .shop_02:hover,.shop_03:hover, .shop_04:hover, .shop_05:hover, .shop_06:hover, .shop_07:hover, .shop_08:hover, .shop_09:hover, .shop_10:hover, .shop_11:hover{
        background: #00d102;
        /* font-size: 0px; */
    }
   .shop_mt{
        margin-top: 20px;
    }
}
/************************************767以下*********************************************/
@media (max-width:767px) {
    .what_a{
        margin-top: 0px;
        margin-left:0px;
    }
    .what_a li{
        width: 100%;
        font-size: 18px;
        position: relative;
        line-height: 32px;
        padding: 0px;
        text-align: center;
    }
    .what_a li:before{
        content:"";
        width:0px;
        height:0px;
    }

    .btn01{
        display: block;
        margin: 0 auto;
        padding: 10px 20px;
        font-family: Anton;
        font-size: 18px;
        color: #fff;
        max-width: 140px;
        text-align: center;
    }
    .tabPanel .padw > ul{
        display: block;
        height: 180px;
        position: relative;
        padding: 0 20px;
    }
    .tabPanel .padw > ul li {
        display:block;
        float: left;
        width: 20%;
        height: 72px;
        cursor: pointer;
        opacity: 0.75;
    }
    .tabPanel .padw > ul > li.hit{
        position: absolute;
        z-index: 10;
        top: 71px;
        left: 50%;
        margin-left: -78px;
        height: 120px;
        width: 156px;
        background:url("../images/btn_bg.png") no-repeat;
        background-size: contain;
        opacity:1;

    }
    .tabPanel .padw > ul li.hit:after{
        content:"";
        width:0px;
        height: 0px;
        display: none;
    }
    .tabPanel .padw > ul li .tab_nav img{
        width: 48px;
        height: 48px;
        display: block;
        margin:0px auto;
    }
    .tabPanel .padw > ul li.hit .tab_nav img{
        width: 48px;
        height: 48px;
        display: block;
        margin: 15px auto 10px auto;
    }
    .tabPanel .padw > ul li .tab_nav p{
        width: 100%;
        font-family: FOR;
        font-size: 12px;
        text-align: center;
    }
    .tabPanel .padw > ul li.hit .tab_nav p{
        font-size: 16px;
    }
    .nav01{
        margin-top: 0px;
    }
    .nav02{
         margin-top: 80px;
     }
    .nav03{
        margin-top: 20px;
    }
    .nav04{
        margin-top: 0px;
    }
    .nav05{
        margin-top: 20px;
    }
    .nav06{
        margin-top: 80px;
    }
    .sid_btn{
        display: block;
        width: 100%;
        color: #fff;
    }
    .bline{
        display: block;
        width: 100%;
        height: 1px;
        background: #fff;
    }
    .wwt{
        font-size: 32px;
        margin:20px 0 ;
        float: left;
    }
    .sid_btn:focus, .sid_btn:hover{
        color: #fff;
        text-decoration: none;
    }
    .sidbtn{
        display: block;
        float: right;
        font-size: 24px;
        margin: 20px 0;
    }
    .sidenav{
        padding: 20px 0px 40px 0px;
    }
    .block_title{
        padding: 40px 20px 20px 20px;
        font-size: 32px;
    }
    .pane .block_1200 {
        padding-right: 0px;
        padding-left: 0px;
    }
    .block_1200.shop{
        padding: 40px 0px 0px 0px;
    }
    .carousel_box .carousel-control .glyphicon-chevron-right{
        margin-right: -30px;
    }
    .carousel_box .carousel-control .glyphicon-chevron-left{
        margin-left: -30px;
    }
    .car_img{
        width: 90%;
        height:auto;
        display: block;
        margin: 0 auto;
    }
    .car_tit{
        font-family: Anton;
        font-size: 20px;
        padding-bottom: 0px;
        margin:0 auto 0 30px;

    }
    .car_table{
        margin:0 auto 30px 30px;
    }
    .xs-mt50{
        margin-top: 50px;
    }
    .what_a.mth01{
        margin-top: 30px;
        margin-left: 0px;
    }
    .txt_bg{
        width: 100%;
        background:#2c63ff;
    }
    @keyframes myfirst
    {
        0%   {background:#2c63ff;}
        100% {background:#2c63ff;}
    }

    .txt_bg.dh01{
        animation: myfirst 0.5s;
        -webkit-animation: myfirst 0.5s;
        /*停止在最后一帧*/
        -webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
    }
}
/************************************480以下*********************************************/
@media (max-width:480px) {
    .logo img{
        width:140px ;
        height: auto;
        display: block;
        margin: 20px 20px;
        padding: 0px;
    }
    .top_menu_a{
        width: 20px;
        height: 20px;
        margin: 20px 10px;
    }
    .top_menu_b{
        width: 20px;
        height: 20px;
        margin: 20px 10px;
    }
    .menu_btn{
        width: 20px;
        height: 20px;
        margin: 20px 20px 20px 10px;
    }
    .colse_btn{
        width: 20px;
        height: 20px;
        margin: 20px 20px 20px 10px;
    }
    .footer_tit{
        height: 24px;
    }

    .row.footer-row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .footer_h3 {
        font-size: 14px;
        padding-top: 5px;
    }
    .footrt_p{
        -webkit-transform:scale(0.8);
        -o-transform:scale(1);
    }
    .footrt_p.ml-one{
        margin-left: -15px;
    }
    .footrt_p.ml-two{
        margin-left: -15px;
    }
    .footer_img{
        width: 40%;
        display: block;
        margin: 30px auto;
    }
    .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
        padding-left: 5px;
        padding-right: 5px;
    }
    .nav_top_box {
        width: 100%;
        height: 62px;
    }
    .footrt_p.soc{
        float: left;
    }
	.open {
	  width: 20px;
	  height: 20px;
	  margin: 20px 10px;
	}
	.open span:nth-child(1) {
	  /* margin-top: 20px; */
	}
	.open span:nth-child(2) {
	  margin-top: 9px;
	}
	.open span:nth-child(3) {
	  margin-top: 18px;
	}
	.oppenned span:nth-child(1) {
	  -webkit-transform: rotate(45deg) translateY(3px) translateX(3px);
	          transform: rotate(45deg) translateY(3px) translateX(3px);
	}
}