﻿
/*Common For Max 960*/
@media only screen and (max-width: 1790px) {
    .header{padding: 0 1%;}
    .nav .v1{padding: 0 30px;}
    .nav dl dd a{padding-left: 10px;}
    .logo{margin: 0 30px 0 20px;}

    .banner{height: 750px;}
 
}

/*Common For Max 1400*/
@media only screen and (max-width: 1580px) {
    .nav li{margin-right: 5px;}
    .nav .v1{font-size: 16px;}
    .nav dl dd a{font-size: 13px;text-align: center;}
    .banner{height: 650px;}

    .index-prod .txt{font-size: 16px;left: 5%;}
    .index-prod .prod2 .txt{right: 5%;}
    .index-prod .txt h4{font-size: 32px;margin-bottom: 30px;}
    .index-prod .txt em{margin-bottom: 20px;}
}

/*Common For Max 1200*/
@media only screen and (max-width: 1340px) {
    .wp2{width: 98%;}
    .header,.index .header{height: 80px;padding: 0 20px;background: rgba(0,0,0,.5);box-shadow: 0 0 5px rgba(204,204,204,.6);}
    .logo{height: 80px;line-height: 80px;margin: 0;}
    .logo img{height: 70%;}
    .header .hdr{display: none;}
    .nav{
        float: none;width: auto;
        position: absolute;left: 0;right: 0;top: 100%;
        display: none;
        border-top: 1px #ccc solid;
    }
    .nav li{float: none;width: auto;margin: 0;background: rgba(0,0,0,.6);}
    .nav .v1,.index .nav .v1{
        line-height: 40px;color: #fff;font-size: 14px;
        padding: 0;text-align: center;
    }
    .nav dl{position: static;padding: 5px 0;}
    .nav dl dd{margin-bottom: 0;}
    .nav dl dd a{padding: 0;text-align: center;line-height: 30px;}
    .menuBtn{display: inline-block;}

    .ban{height: 480px;}
    .snav li{width: 160px;}
    
    .m-history .slick-nav .slick-next{right: 0;}
    .m-history .slick-nav .slick-prev{left: 0;}
    .branch-pc{margin-left: 0;}
    .m-store .pic{margin: 0 40px 0 0;}
    .m-store .slider-nav .slick-next{right: 0;}
    .m-store .slider-nav .slick-prev{left: 0;}
    .m-store .slider-nav{margin-right: 0;}
    .m-store .slider-nav .img{margin: 0 auto;}
}

/*Common For Max 960*/
@media only screen and (max-width: 1199px) {
	.wp{width: 98%;}
    .banner{height: 500px;}
    .banner .slick-dots{bottom: 10px;}
    .banner .slick-dots li{margin: 0 5px;}
    .banner .slick-dots li button{width: 15px;height: 15px;}
    .ban{height: 380px;}

    .f-nav{display: none;}
    .f-cont{float: none;width: auto;text-align: center;padding-top: 0;}
    .f-cont .pic{float: none;display: inline-block;vertical-align: middle;}
    .f-cont .txt{display: inline-block;vertical-align: middle;text-align: left;}
    
    .main{padding-bottom: 30px;}
    .main .inner{margin: 0;padding: 20px;}
    .snav{margin: 0 0 30px;}
    .snav li{width: auto;float: none;display: inline-block;vertical-align: top;}
    .snav li a{font-size: 14px;line-height: 40px;padding: 0 15px;}
    .cur{padding-bottom: 10px;margin-bottom: 20px;font-size: 12px;}
    .ul-list1{margin: 0 -10px;}
    .ul-list1 li{padding: 0 10px 10px;}
    .ul-list2{margin: 0 -10px;padding: 0 0 10px;}
    .ul-list2 li{padding: 0 10px 20px;}
    .ul-list2 .con{padding: 10px;}
    .ul-list2 .txt{padding: 0;font-size: 13px;}
    .ul-list2 .txt h4{font-size: 16px;padding: 15px 0;}
    .ul-list2 .txt p{margin-bottom: 20px;}
    .ul-list2 .txt .date{font-size: 14px;}
    .ul-list2 .txt .a-more{font-size: 13px;width: 120px;}
    .m-txt1{padding: 0;}
    .m-txt1 .pic{padding-left: 20px;margin-right: 30px;}
    .m-txt1 .txt{overflow: visible;}
    .m-txt1 .txt h1{margin-bottom: 0;font-size: 28px;background: none;}

    .ul-list5{padding: 0;margin: 0 -10px;}
    .ul-list5 li{padding: 0 10px;}
    .ul-list5 .con{font-size: 13px;padding: 15px 15px 10px;}
    .ul-list5 .con h4{font-size: 16px;padding-bottom: 20px;}
    .ul-list5 .con .date{font-size: 15px;}
    .m-txt2{height: 386px;}
    .m-txt2 .txt{padding: 0 15px 15px;}
    .m-txt2 .txt h4{font-size: 18px;}
    .m-history .slick-nav{padding: 0 20px;}
    .m-history .slick-for .slick-next, .m-history .slick-for .slick-prev{bottom: 15px;}
    .m-history .slick-nav .slick-next{right: -20px;}
    .m-history .slick-nav .slick-prev{left: -20px;}
    .m-history .slick-for .item{margin: 20px 20px 40px;}
    .m-history .slick-for .pic{margin-right: 30px;}
    .m-history .slick-for .txt{margin-right: 30px;}
    .m-tit1{font-size: 28px;line-height: 2;}
    .ul-list3{margin: 0 0 20px;}
    .ul-list3 .con-q .tit{font-size: 18px;}
    .form1{margin: 0;}
    .form1 .con{padding: 30px;}
    .form1 h4{font-size: 18px;padding: 0 30px;}
    .ul-list4{margin: 0 0 20px;}
    .ul-list4 li{padding: 20px 0;}
    .ul-list4 .date{width: 100px;padding-left: 0;font-size: 16px;margin-right: 20px;}
    .ul-list4 .date span{font-size: 24px;}
    .ul-list4 .pic{margin-right: 20px;}
    .ul-list4 .txt{padding-right: 140px;font-size: 13px;}
    .ul-list4 .txt .a-more{width: 120px;}
    .ul-list4 .txt h4{font-size: 16px;margin: 15px 0 10px;}
    .index-video .txt{padding: 40px 0;}
    .index-video .txt h3{font-size: 36px;line-height: 1.5;}
    .index-prod .txt{font-size: 14px;left: 3%;}
    .index-prod .prod2 .txt{right: 3%;}
    .index-prod .txt h4{font-size: 26px;margin-bottom: 10px;line-height: 1.2;}
    .index-prod .txt em{margin-bottom: 0;}
    .branch-pc{display: none;}
    .branch-m{display: block;}
    .shop-search{padding: 20px;}
    .shop-list{height: auto;overflow: hidden;padding: 20px;}
    .shop-list .tit{font-size: 22px;}
    .ul-list8{padding: 0 0 10px;}
    .ul-list8 .con{padding: 10px;}
    .ul-list8 .txt{font-size: 13px;}
    .ul-list8 .txt h3{font-size: 18px;}
    .ul-list8 .pic{margin-right: 20px;}
    .ul-list9{padding: 0;margin: 0;}
    .ul-list9 li{padding: 50px 0;}
    .ul-list9 .pic{margin-right: 30px;}
    .ul-list9 .txt{line-height: 24px;}
    .ul-list9 .txt h3{font-size: 26px;line-height: 50px;margin-bottom: 10px;}
    .ul-list10{padding: 0;}
    .ul-list10 .con{padding: 10px;}
    .ul-list10 .pic{margin-right: 10px;}
    .ul-list10 .txt h3{font-size: 18px;}
    .member-login{padding: 50px 10%;}
    .member-login .from-group span{width: 30%;}
    .ul-list11{margin: 0 -10px;padding: 0 0 10px;}
    .ul-list11 li{padding: 0 10px 20px;}
    .ul-list11 .con{padding: 10px;}
    .ul-list11 .pic{margin-bottom: 10px;}
    .ul-list11 .txt{font-size: 13px;}
    .ul-list11 .txt h4{font-size: 16px;}
    .m-back{margin: 0 0 20px;}
    .m-store{padding: 0 0 20px;}
    .m-store .pic{float: none;width: auto;margin: 0 0 20px;}
    .m-store .slider-nav .slick-next, .m-store .slider-nav .slick-prev{
        background-color: rgba(0,0,0,.6);
    }
    .m-store .txt h4{font-size: 26px;line-height: 1.5;}
}



/*Common For Max 768*/
@media only screen and (max-width: 959px) {
    .ban{height: 310px;}
    .m-txt1 .pic{width: 40%;padding: 0;margin-right: 20px;}
    .m-txt1 .pic img{width: 100%;height: auto;}
    .m-txt1 .txt h1{font-size: 24px;padding: 15px 0;line-height: 1.5;}
    
    .m-tit1{font-size: 24px;}
    .m-history .slick-for .pic{
        float: none;width: auto;
        height: 0;padding-top: 83%;position: relative;
        margin: 0;
    }
    .m-history .slick-for .pic img{
        position: absolute;left: 0;top: 0;
    }
    .m-history .slick-for .txt{margin-left: 30px;padding-bottom: 20px;}
    .m-history .slick-for .txt:before,.m-history .slick-for .txt:after{display: none;}
    .m-history .slick-for .txt h4{font-size: 18px;padding: 20px 0 10px;}
    .m-history .slick-for .txt .det{height: auto;max-height: 150px;}
    .m-history .slick-for .slick-next, .m-history .slick-for .slick-prev{
        top: 40%;margin-top: -18px;bottom: auto;
    }
    .m-history .slick-for .slick-prev{left: 20px;right: auto;}
    .m-history .slick-for .slick-next{right: 19px;}
    .m-history .slick-for .pic span{width: 70px;font-size: 18px;}
    .index-video .video .btn-play{
        -webkit-background-size: 60px auto;
        -moz-background-size: 60px auto;
        -o-background-size: 60px auto;
        background-size: 60px auto;
    }
    .index-video .txt h3{font-size: 30px;}
    .index-video .txt p br{display: none;}
    .index-prod .prod1,.index-prod .prod2,.index-prod .prod3{float: none;width: auto;}
    .index-prod .txt em{margin-bottom: 10px;}
    .index-prod .txt h4{margin-bottom: 20px;}
    .ul-list8{margin: 0;}
    .ul-list8 li{float: none;width: auto;padding: 0 0 10px;}
    .ul-list9 li{padding: 20px 0;}
    .ul-list9 .pic{float: none;padding: 0;margin: 0;width: auto;height: auto;background: none;}
    .ul-list9 .txt{max-height: none;}
    .ul-list9 .txt h3{font-size: 20px;text-align: center;line-height: 40px;}
    .ul-list9 .txt h3:after{left: 50%;margin-left: -20px;}
    .ul-list10{margin: 0;}
    .ul-list10 li{float: none;width: auto;padding: 0 0 10px;}
    .member-login{padding: 30px 5%;}
    .member-login h3{font-size: 22px;}
    .m-store .txt{font-size: 13px;line-height: 2;}
    .m-store .txt h4{font-size: 22px;}
}



/*Common For Max 480*/
@media only screen and (max-width: 767px) {
    body{padding-top: 45px;}
    .wp,.wp2{width: 96%;}
    .header,.index .header{height: 45px;padding: 0 10px;}
    .logo{height: 45px;line-height: 45px;}
    .menuBtn{right: 10px;}
    .nav .v1, .index .nav .v1{line-height: 35px;}
    .banner{height: 300px;}
    .ban{height: 190px;}
    .footer .f-copy{text-align: center;}
    .footer .f-copy span{float: none;display: block;}
    
    .main .inner{padding: 10px;}
    .snav{margin-bottom: 20px;}
    .snav li a{line-height: 30px;padding: 0 10px;}
    .ul-list1{margin: 0 -5px;}
    .ul-list1 li{padding: 0 5px 10px;}
    .ul-list1 .txt{padding: 10px 0;font-size: 13px;}
    .ul-list1 .txt h4{font-size: 16px;}
    .ul-list1 .txt p{padding: 5px;}
    .ul-list1 .txt .price{padding-top: 15px;}
    .ul-list1 .txt .price strong{font-size: 18px;}
    .ul-list2{margin: 0 -5px;}
    .ul-list2 li{width: 50%;padding: 0 5px 10px;}
    .m-txt1 .pic{float: none;margin: 0 auto;width: 60%;}
    .m-txt1 .txt{font-size: 13px;}
    .m-txt1 .txt h1{font-size: 18px;text-align: center;padding-bottom: 10px;}
    .ul-list5{margin: 0 -5px;}
    .ul-list5 li{width: 50%;padding:0 5px;}
    /*.ul-list5 .con{margin-bottom: 20px;}*/
    .ul-list5 .con p{margin-bottom: 10px;}
    .m-txt2{height: 348px;}
    .m-tit1{font-size: 18px;}
    .m-history{margin-bottom: 20px;}
    .m-history .slick-for .item{margin: 20px 10px 30px;}
    .m-history .slick-for .txt{margin: 0 20px;}
    .m-history .slick-for .slick-next{right: 9px;}
    .m-history .slick-for .slick-prev{left: 10px;}
    .ul-list3{margin-bottom: 10px;}
    .ul-list3 li{padding-bottom: 20px;}
    .ul-list3 .con-q .name{font-size: 13px;}
    .ul-list3 .con-q .name img{height: 15px;vertical-align: middle;margin-right: 5px;}
    .ul-list3 .con-q .tit{font-size: 16px;margin: 5px 15px 10px 20px;}
    .ul-list3 .con-a{padding: 10px 15px 10px 20px;font-size: 13px;}
    .ul-list3 .con-a .tit{margin-bottom: 5px;}
    .ul-list3 li .date{display: block;float: right;margin-top: 5px;}
    .pages{margin-bottom: 20px;}
    .pages li a{width: 24px;height: 24px;font-size: 14px;line-height: 24px;}
    .pages li .prev, .pages li .next{width: 55px;}
    .form1 .con{padding: 20px 10px;}
    .form1 h4{font-size: 16px;padding: 0 10px;line-height: 1.8;margin-bottom: 10px;}
    .form1 .form-group{margin-bottom: 10px;}
    .form1 .form-group .con-l,.form1 .form-group .con-r{
        float: none;width: auto;
    }
    .form1 .form-group .con-l{margin-bottom: 10px;}
    .form1 .form-group input[type="text"], .form1 .form-group textarea{
        padding-left: 10px;padding-right: 10px;
    }
    .form1 input[type="submit"]{width: 120px;height: 36px;line-height: 36px;font-size: 16px;}
    .ul-list4 li{padding: 10px 0 15px;}
    .ul-list4 .date{float: none;clear: both;width: auto;margin: 0 0 5px;padding: 0;}
    .ul-list4 .date:after{display: none;}
    .ul-list4 .date span{display: inline-block;margin-right: 10px;}
    .ul-list4 .pic{margin-right: 10px;}
    .ul-list4 .txt{padding-right: 0;}
    .ul-list4 .txt .a-more{
        height: 30px;width: 100px;
        position: static;margin-top: 3px;background: #d8ac7b;color: #fff;
        font-size: 13px;line-height: 30px;
    }
    .ul-list4 .txt .a-more i{background-image: url(../images/icon8-1.png);}
    .ul-list4 .txt h4{margin: 0 0 5px;}
    .index-video .video .btn-play{
        -webkit-background-size: 40px auto;
        -moz-background-size: 40px auto;
        -o-background-size: 40px auto;
        background-size: 40px auto;
    }
    .index-video .txt{font-size: 13px;padding: 20px 0;}
    .index-video .txt h3{font-size: 24px;}
    .index-video .txt span{padding: 0 30px;margin: 5px 0 10px;line-height: 20px;}
    .shop-search,.shop-list{padding: 10px;}
    .shop-list .tit{font-size: 18px;line-height: 24px;margin-bottom: 10px;}
    .ul-list7{font-size: 13px;}
    .ul-list7 h4{font-size: 15px;}
    .ul-list7 li{margin-bottom: 15px;}
    .ul-list9 li{padding: 10px 0;}
    .ul-list9 .txt{font-size: 13px;}
    .ul-list9 .txt h3{font-size: 16px;}
    .member-login{padding: 10px 0;}
    .member-login h3{font-size: 18px;padding-bottom: 10px;margin-bottom: 20px;line-height: 24px;}
    .ul-list11{margin: 0 -5px;}
    .ul-list11 li{width: 50%;padding: 0 5px 10px;}
    .pages3{margin-bottom: 0;}
    .m-store .txt h4{font-size: 18px;padding-bottom: 5px;margin-bottom: 10px;}
    .m-store .slider-nav .img{width: 130px;height: 72px;}
}

/*Common For Max 320*/
@media only screen and (max-width: 639px) {
    
    .ul-list1 li{float: none;width: auto;}

}

/*Common For Max 320*/
@media only screen and (max-width: 479px) {
    .wp,.wp2{width: 94%;}
    .banner{height: 200px;}
    .ban{height: 130px;}
    .footer .f-top{padding: 10px;}
    .f-cont .pic{width: 100px;height: 100px;margin: 0 auto 5px;display: block;}
    .f-cont .txt{display: block;text-align: center;line-height: 1.8;font-size: 13px;}
    .footer .f-copy{font-size: 13px;line-height: 1.8;}

    .ul-list2 li{float: none;width: auto;}
    .ul-list2 .txt h4{padding: 10px 0;text-align: center;}
    .ul-list2 .txt p{height: auto;max-height: 72px;}
    .ul-list5 li{float: none;width: auto;}
    .ul-list5 .con,.ul-list5 .con:hover{padding: 10px 10px;margin-bottom: 10px;}
    .ul-list5 .con h4{padding-bottom: 10px;}
    .ul-list5 .con .a-more{
        position: static;
        opacity: 1;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity= 100)';
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        border-color: #999;color: #999;
    }
    .ul-list5 .con:hover .a-more{color: #fff;border-color: #fff;}
    .ul-list5 .con .a-more:hover{background: #fff;color: #d8ac7b;}
    .m-txt2{margin-bottom: 10px;}
    .m-history .slick-for .txt{margin-left: 10px;margin-right: 10px;}
    .ul-list4 .pic{float: none;width: auto;height: auto;margin: 0 0 5px;}
    .ul-list4 .txt .a-more{margin: 10px auto 0;}
    .ul-list4 li:hover{background: #fff;}
    .ul-list4 li:nth-child(2n){background: #f4f4f4;}
    .g-btn1{width: 180px;}
    .index-video .video{height: auto;position: relative;padding-top: 0;}
    .index-video .video video{position: static;}
    .index-video .txt h3{font-size: 20px;}
    .index-prod .txt{font-size: 13px;}
    .index-prod .txt h4{font-size: 20px;margin-bottom: 10px;}
    .index-prod .txt em{display: none;}
    .index-prod .txt .btn-buy{width: 80px;height: 30px;line-height: 30px;font-size: 13px;}
    .ul-list8 .pic{float: none;margin: 0;width: auto;height: auto;}
    .ul-list8 .txt h3{font-size: 16px;padding: 15px 0 10px;text-align: center;}
    .ul-list8 .txt .det{margin-bottom: 10px;}
    .ul-list8 .a-more{margin: 0 auto;}
    .ul-list10 .pic{float: none;margin: 0;width: auto;height: auto;}
    .ul-list10 .txt{font-size: 13px;max-height: none;}
    .ul-list10 .txt h3{font-size: 16px;text-align: center;margin: 10px 0 5px;}
    .member-login h3{font-size: 16px;margin-bottom: 10px;}
    .member-login .from-group{margin-bottom: 10px;}
    .member-login .from-group span{font-size: 13px;float: none;width: auto;text-align: left;height: auto;margin: 0;line-height: 36px;}
    .member-login .inp1{width: 100%;}
    .member-login .inp2{width: 60%;}
    .member-login .sub{margin: 20px auto 0;font-size: 14px;width: 260px;}
    .ul-list11 li{float: none;width: auto;}
    .ul-list11 .txt{height: auto;}
    .ul-list11 .txt h4{text-align: center;margin-bottom: 10px;}
    .ul-list11 .a-more{float: none;margin: 0 auto;}
    .pages3 ul li{margin: 0 2px;}
    .pages3 li a{font-size: 12px;width: 24px;height: 24px;line-height: 24px;}
    .pages3 li .prev, .pages3 li .next{width: 60px;}
    .m-back{margin-bottom: 10px;}
    .m-store .slider-nav .img{width: 90px;height: 50px;}

}
