/**
电脑
*/
@media(min-width:769px){
    .main{ padding: 20px 0;}

    .home_banner{ height: 700px;background: #856df1;}
    .home_banner canvas{height: 700px; width: 100%;}

    .banner_main{}

    .home_banner .banner_txt {height: 700px;position: relative;z-index: 2;float: left}
    .home_banner .banner_txt .tit {padding-top: 250px;font-size: 60px;color: #fff;font-weight: 800;letter-spacing:4px;}
    .home_banner .banner_txt .txt {padding-top: 40px;font-size: 30px;color: #fff;font-weight: 300;letter-spacing:20px;}

    .home_banner .banner_pic{height: 700px;position: relative;z-index: 2;float: right;}
    .home_banner .banner_pic .pic{display: table;height: 100%}
    .home_banner .banner_pic .pic div{display: table-cell;vertical-align:bottom}
    .home_banner .banner_pic img{height:500px;}
    .home_banner .banner_bg {height:700px;position: relative;top:-700px;z-index: 0;}


    .home_main{padding: 30px 0 50px 0;}
    .home_main .title{height:45px;line-height:45px;font-size:20px;color:#333;font-weight:bold;}


    .advantage{padding: 20px 0;}

    .advantage .about{font-size:15px;line-height:34px;padding-bottom:30px;margin-bottom:50px;border-bottom:1px dotted #ccc;}
    .advantage .about b{display:block;font-size:18px;color: #856df1;line-height: 30px}
    .advantage .about img{float:left;width:450px;margin:0 40px 20px 0;border-radius: 20px;}

    .advantage ul{width: 100%;display: table;}
    .advantage li{ width: 20%; display: table-cell; cursor: pointer;}
    .advantage li:hover span{ background-color:#856df1;webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;-ms-transition:all .2s ease;transition:all .2s ease;}
    .advantage li:hover *{ color: #fff}
    .advantage li:hover .tit label{background: #fff !important;}
    .advantage li span{ width: 215px;background: #fff; border-radius: 5px;overflow: hidden; display: block;margin: 0 auto}
    .advantage li:first-child span{margin-left:0 !important}
    .advantage li:last-child span{margin-right:0 !important}
    .advantage li:nth-child(2) span{margin-left: 5px !important}
    .advantage li:nth-child(4) span{margin-right: 5px !important}

    .advantage li span .box{ padding:40px 10px;}
    .advantage li svg{ width: 80px; height: 80px; margin: 0 auto; display: block;fill: #856df1}
    .advantage li:hover svg{fill: #fff !important;}
    .advantage li span .box .tit label{font-size: 16px; background: #deeeff; color: #856df1; display: block; width:120px; line-height: 30px; border-radius: 30px; text-align: center; margin: 30px auto;}
    .advantage li span .box .desc{ line-height: 35px; text-align: center;font-size: 14px;}
    .advantage .btn{ padding-top: 50px;}
    .advantage .btn a{ width: 180px; height: 45px; line-height: 45px; border-radius: 30px; font-size: 16px; text-align: center; background-color: #856df1; color: #fff; margin: 0 auto; display: block;}
    .advantage a:hover{ webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;}
    .advantage .btn a:hover{ background: #755ce2; }



    .card{padding: 20px 0;}
    .card .center{overflow: hidden;}
    .card ul{width: 100%;display: table}
    .card ul li{width:33.3%;display: table-cell;}
    .card ul li span{cursor: pointer; display:block;width: 80%;padding:18px 10px;position: relative; top: 0;overflow: hidden; text-align: center; background: #fff; border: 1px solid #eee; border-radius: 5px;}
    .card ul li:nth-child(2) span{margin: 0 auto;}
    .card ul li:last-child span{right:0;position: absolute}
    .card ul li span img{ width: 100%;max-width: 300px !important;}
    .card ul li span:hover{box-shadow: 0 0 10px 0 rgba(0,0,0,.1); top:-10px;webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;transition:all .6s ease;}



    .book .center ul:last-child{margin-top: 20px;}

    #layui-laydate1{width: 600px;!important;}
}

/**
手机
*/
@media (max-width:769px){
    .main{ padding: 20px 0;}


    .home_banner{ height: 300px;background: #ccc;}
    .home_banner canvas{height: 300px; width: 100%;}
    .home_banner .banner_txt {height: 300px;position: relative;z-index: 2;}
    .home_banner .banner_txt .tit {padding-top: 100px;font-size: 30px;color: #fff;font-weight: 800;text-align: center;}
    .home_banner .banner_txt .txt {padding-top: 40px;font-size: 20px;color: #fff;font-weight: 300;text-align: center;}
    .home_banner .banner_pic{display: none}

    .home_banner .banner_bg {height: 300px;position: relative;top: -300px;z-index: 0;}

    .home_main{padding:0 20px;}
    .home_main .title{ font-size: 16px; color: #333;font-weight: 700; border-left:5px solid #856df1;padding-left: 15px;}



    .advantage{ padding: 20px 0;}

    .advantage .about img{float: left;width: 100%;border-radius: 5px;margin: 10px 0;}
    .advantage .about{font-size: 16px;line-height:32px}
    .advantage .about b{display: block;font-size: 18px;color: #856df1;line-height: 30px}

    .advantage li{ width: 100%; float: left; cursor: pointer;margin: 10px 0}
    .advantage li span{ width: 100%;background: #fff; border-radius: 5px;overflow: hidden; display: block; margin: 0 auto}
    .advantage li span .box{ padding:50px 10px;}
    .advantage li svg{ width: 100px; height: 100px; margin: 0 auto; display: block;fill: #856df1}
    .advantage li span .box .tit label{font-size: 16px; background: #deeeff; color: #856df1; display: block; width:120px; line-height: 30px; border-radius: 30px; text-align: center; margin:15px auto;}
    .advantage li span .box .desc{ line-height: 35px; text-align: center;font-size: 16px;}
    .advantage .btn{ padding-top: 50px;}
    .advantage .btn a{ width: 180px; height: 45px; line-height: 45px; border-radius: 30px; font-size: 16px; text-align: center; background-color: #856df1; color: #fff; margin: 0 auto; display: block;}


    .card{padding: 20px 0;}
    .card .center{overflow: hidden;}

    .card ul li{ display: block; margin-top: 15px;}
    .card ul li span{cursor: pointer; display:block;width: 96%;padding:10px 0;position: relative; top: 0;overflow: hidden; text-align: center; background: #fff; border: 1px solid #eee; border-radius: 5px;}
    .card ul li span img{max-width: 100%;}

    #layui-laydate1{width: 600px;!important;}
}