html,body{margin:0; padding:0; background-color:#fff;}

body{ font:14px/1.5 "microsoft Yahei";}

.wrapper{ max-width:1200px; margin:0 auto;}
.clearfix{}
.clearfix:before,
.clearfix:after{content:""; height:0; clear:both; display:table; overflow:hidden;}

.container{ overflow:hidden;}

    .mv1-top{ text-align: center; padding:2em 0;}
    .mv1-bd{
        background:url(../images/banner-bg.jpg) no-repeat center center/cover;
        box-sizing: border-box;
        padding:100px 0;
        
        
    }
    .mv1-c1{ width:100%; text-align: center; line-height:400px; padding: 40px 0;}
    
    .mv1-txt1{color:#fff; font-weight:700; text-shadow: 3px 3px 5px rgba(0,0,0,0.5);}
    .mv1-txt1 span{display:inline-block; font-size:36px; line-height: 1.8em; }

    
    .mv2{
        background:url(../images/feature-bg.jpg) no-repeat top center;
        box-sizing: border-box;
        padding:50px 0;
        text-align: center;
    }


    .mv2 h2,
    .mv3 h2{ font-size:38px; font-weight:normal; margin-bottom:50px;}
    .mv2-tab{ margin-bottom:30px;}
    .mv2-tab__item{
        display:inline-block;
        background:url(../images/tab1.png) no-repeat center center;
        width:156px; height:68px; line-height: 60px;
        font-size:24px; color:#2abb99;
        margin: 0 1em;
        cursor: pointer;
        transition: all .5s;
    }

    .mv2-tab__item.on{background-image:url(../images/tab1on.png); color:#fff;}

    .mv2-con__item{ display:inline-block; width:700px; max-width:100%;
        animation:fadeAni linear 1s;
    }
    .feature-item{position: relative; padding-left:80px; max-width:700px; margin: 30px 0;}
    .feature-item dt{ font-size:18px; position:absolute; left:0; top:3px; padding:2px 5px; background-color:#ff4f4f; color:#fff; border-radius:5px;}
    .feature-item dd{ margin:0; font-size:20px; line-height: 1.8; text-align: left;}


    .mv3{ text-align: center;}

    .mv-col{padding:50px 0; border-bottom:1px solid #eee;}
    .mv-col .wrapper{ max-width:800px; margin:0 auto; }
        .mv-col__img,.mv-col__txt{ float:left; width:50%; }
        .mv-col__img{}    
        .mv-col__img img{ max-width:100%; } 
        .mv-col__txt{ padding:0; text-align: left;}
        .mv-col__txt h3{ font-size:30px; font-weight: normal; color:#333; margin:.5em 0 1em; padding-left:10px;}
        .mv-col__txt ul{margin:0; padding:0;}
        .mv-col__txt li{ color:#666; font-size:20px; list-style: none; position: relative; padding-left:30px; margin:0.5em 0;}
        .mv-col__txt li:before{content:""; 
            position:absolute; left:8px; top:.4em;
            width:6px; height:6px; border:3px solid #eee;
            border-radius:9px;
            background-color:#fff;
        }

    .mv-row2 .mv-col__img,
    .mv-row4 .mv-col__img{ float:right;}

    .mv-row3 .mv-col__txt,
    .mv-row4 .mv-col__txt{
        padding-top:30px;
    }

    
.footer { text-align: center; padding: 30px 0 0; font-size:16px;}
    .describe { color: #666;}
    .copyright {color: #999;font-size: 14px;}
    .code img{ max-width: 180px; }

@media screen and (max-width:1002px){
    .mv1-bd{ padding: 20px 0;}
    .mv1-c1{ width:40%; margin: 0 5%;}
    .mv1-c2{ width:50%;}
    .mv1-slogan{ max-width:100%; background-size:contain; margin-bottom:20px;}
    .mv1-c2 img{ max-width:80%; margin-top:15%;}

    .mv2{ padding:20px 0;}

    .mv-col__img, .mv-col__txt{ width:40%; margin: 0 5%;}
    .mv-col__txt h3{ font-size:20px;}
    .mv-col__txt li{ font-size:16px;}
}

@media screen and (max-width:600px){
    .mv1-c1{ width:80%; margin: 0 10%; padding:0 0 10px;}
        .mv1-slogan{ margin:0;}
    .mv1-c2{ width:100%;}
    .mv-img2{ width:60%; margin:0 auto; text-align: center;}
    .mv2 h2, .mv3 h2{ font-size:32px;}
    .mv2-con__item{ width:80%; padding:0 10%;}
    .mv-col__img, .mv-col__txt{ width:100%;}
}

@media screen and (max-width:425px){
    .mv1-top{padding:10px;}
    .mv1-top img{ max-width:60%;}

    .mv2 h2, .mv3 h2{ font-size:18px; margin-bottom:10px;}

    .mv2-tab{ margin-bottom:15px;}
    .mv2-tab__item{width:78px; height:34px; background-size:78px 34px; line-height:30px; font-size:14px;}
    .mv2-tab__item.on{ background-size:78px 34px;}
    .feature-item{ padding-left:60px;}
    .feature-item dt{ font-size:14px;}
    .feature-item dd{ font-size:16px;}

    .mv-col{ padding:20px 0;}

    .mv-col__img, .mv-col__txt{ margin:0 5%; width:90%;}
    .mv-col__img img{ max-width:80%;}
}

@keyframes fadeAni{
    from{
        opacity:0;
        transform: translateY(20px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}