@charset "utf-8";

html,body{background: #eee;}


#catalog{ position: relative; margin: 0 auto; padding-top: 200px; background: url("../img/catalog_bg.jpg") no-repeat; background-size: cover; overflow: hidden;}
#catalog .wrap{ position: relative; margin: 0 auto;}
#catalog .tab-nav{ position: relative; left: 50%; transform: translateX(-50%); width: auto; display: inline-block; border: 1px solid rgba(30,38,135,.2); padding:10px; box-sizing: border-box; }
#catalog .tab-nav>ul{margin: 0 auto; }
#catalog .tab-nav>ul>li{display: inline-block; float: left; text-align: center;margin: 0 40px;}
#catalog .tab-nav>ul>li>a{ position: relative; display: block; padding: 12px 20px; font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s;}
#catalog .tab-nav>ul>li>a:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 100%; background: linear-gradient(45deg, #3460d4, #1e2687); border-radius: 5px; content: ''; opacity: 0;transition: all .35s; }
#catalog .tab-nav>ul>li>a>span{position: relative;z-index: 12; display: inline-block; }
#catalog .tab-nav>ul>li.active a>span{color: #fff;}
#catalog .tab-nav>ul>li.active a:after{opacity: 1;}
#catalog .tab-box{  position: relative;width: 100%; max-width: 1200px; margin: 50px auto 100px auto;}
#catalog .tab-box>.initial{position: relative;z-index: 1; width: 100%; margin: 0 auto;animation:ani-car-initial .6s 0.8s both; transition: all .35s;}
#catalog .tab-box>.initial>img{ width: 100%;height:auto}
#catalog .tab-box>.tab-item{ display:none; position: absolute;z-index: 20; left: 0;top: 0;text-align: center; width: 100%; animation:ani-car-content 2s 2s both;}
#catalog .tab-box>.current{display: block;}
#catalog .tab-box>.tab-item .content{ position: relative;width: 100%; max-width: 1200px; text-align: center;margin: 0 auto;}
#catalog .tab-box>.tab-item .content .item{position: absolute;z-index: 50; transition: all .35s;}
#catalog .tab-box>.tab-item .content .item>a{display: inline-block;}
#catalog .tab-box>.tab-item .content .item>a .plus-btn{ position: relative;z-index: 12; width: 36px;height: 36px; border-radius: 100%; background: rgba(68,68,68,.9); transition: all .35s;}
#catalog .tab-box>.tab-item .content .item>a .plus-btn:after{position: absolute;z-index: 1; left: 0;top: 0; text-align: center; font-size: 2.4rem; color: #fff; width: 36px;height: 36px; line-height: 36px; font-family: iconfont; content: '\e62a'; transition: all .35s;}
#catalog .tab-box>.tab-item .content .item>a .box{ position: absolute;z-index: 2; left: 0;top: 0;box-sizing: border-box; opacity: 0; width: 0; height: 36px; overflow: hidden; text-align: left; border-radius: 20px; transition: all .35s; }
#catalog .tab-box>.tab-item .content .item>a .box>span{display: inline-block;padding: 0 20px 0 50px;line-height: 36px;color: #fff; font-size: 1.4rem;background: rgba(30,38,135,.8);border-radius: 20px;  transition: all .35s;}
#catalog .tab-box>.tab-item .content .item>a:hover .plus-btn{background: #bc0010;}
#catalog .tab-box>.tab-item .content .item>a:hover .plus-btn:after{content: '\e63c';}
#catalog .tab-box>.tab-item .content .item>a:hover .box{opacity: 1; width: 300px; }
#catalog .tab-box>.tab-item .content .car>img{ width: 100%; height: auto;}

@keyframes ani-car-initial{
    from{opacity: 0; transform: translateX(600px);}
    to{opacity: 1; transform: translateX(0);}
}

@keyframes ani-car-content{
    from{opacity: 0; }
    to{opacity: 1;}
}



#products{margin: 0 auto;padding: 0;}
#products .lists{ margin: 0 auto;padding-bottom: 100px;}
#products .lists>ul{margin: 0 auto;}
#products .lists>ul>li{display: block; float: left; width: 33.33%; box-sizing: border-box; border-right: 1px solid #ddd; border-top: 1px solid #ddd; background: #fff;}
#products .lists>ul>li>a{display: block; position: relative; overflow: hidden;}
#products .lists>ul>li>a .box{padding: 30px; box-sizing: border-box; position: relative;}
#products .lists>ul>li>a .box>.img{text-align: center;}
#products .lists>ul>li>a .box>.img>img{ max-width: 80%; height: auto;}
#products .lists>ul>li>a .box>.title{text-align: center; margin: 0 auto;padding-bottom: 30px; height: 100px; }
#products .lists>ul>li>a .box>.title>h3{font-size: 3.2rem;font-weight: normal; color: #333; transition: all .35s;}
#products .lists>ul>li>a .box>.title>span{display: block; font-size: 1.8rem; color: #666; transition: all .35s;}
#products .lists>ul>li>a .show{ position: absolute;z-index: 50; left: 0; top: 0; width: 100%; height: 100%; background: #fff; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); box-sizing: border-box; padding: 50px; transition: .6s;}
#products .lists>ul>li>a .show:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 0;height: 7px; background: #1e2687; content: '';transition: all .8s;}
#products .lists>ul>li>a .show>.img{ position: absolute;z-index: 12; width:40%; right: 30px;top: 20px;}
#products .lists>ul>li>a .show>.img>img{width: 100%;height: auto;}
#products .lists>ul>li>a .show>.title{ position: relative;z-index: 60; text-align: left; margin: 0 auto; padding: 50px 0 100px 0;}
#products .lists>ul>li>a .show>.title>h3{ display: block; font-size: 3rem;font-weight: normal; color: #1e2687; transition: all .35s;}
#products .lists>ul>li>a .show>.title>span{display: block; font-size: 1.8rem; color: #333; transition: all .35s;}
#products .lists>ul>li>a .show>.intro{font-size: 1.8rem; color: #666;}
#products .lists>ul>li>a .show>.intro>p{ display: block; position: relative;z-index: 1; margin: 12px auto; padding-left: 16px;}
#products .lists>ul>li>a .show>.intro>p:after{position: absolute;z-index: 1; left: 0;top: 50%; transform: translateY(-50%); width: 6px;height: 6px; border: 2px solid #b20013; border-radius: 100%; content: ''; }
#products .lists>ul>li>a:hover .show{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
#products .lists>ul>li>a:hover .show:after{ width: 100%;}


@-webkit-keyframes ani_right {
    0% { width: 0; opacity: 0; }
    100% {width: 100%; opacity: 1; }
}




#products .view{margin: 0 auto;}
#products .view>.introduce{margin: 0 auto; position: relative;}
#products .view>.introduce>.show{display: inline-block; position: absolute;z-index: 12; left: 0; height: 100%;  overflow: hidden; width: 45%; background: #fff; box-shadow: 0 15px 20px rgba(0,0,0,.05); box-sizing: border-box;padding: 0; text-align: center;}
#products .view>.introduce>.show .swiper{margin: 0 auto; max-width: 800px;}
#products .view>.introduce>.show .swiper .swiper-slide img{width: 100%;height: auto;}
#products .view>.introduce>.show .prev, #products .view>.introduce>.show .next{ position: absolute;z-index: 12; right: 88px; bottom: 0; width: 90px;height: 90px; line-height: 90px; text-align: center; cursor: pointer;color: #999; border: 1px solid #ddd; transition: all .35s;}
#products .view>.introduce>.show .next{right: -1px;}
#products .view>.introduce>.show .prev i, #products .view>.introduce>.show .next i{font-size: 3.6rem;}
#products .view>.introduce>.show .prev:hover, #products .view>.introduce>.show .next:hover{ background: #333; color: #fff;}
#products .view>.introduce>.info{width: 52%; min-height: 800px; box-sizing: border-box;padding: 80px 120px; text-align: left;}
#products .view>.introduce>.info>.title{padding-bottom: 20px;  border-bottom: 1px solid #ddd;}
#products .view>.introduce>.info>.title>h3{font-size: 6rem; font-weight: bold; color: #1e2687;}
#products .view>.introduce>.info>.title>span{font-size: 3rem; color: #666;}
#products .view>.introduce>.info>.items{padding: 50px 0; text-align: left;}
#products .view>.introduce>.info>.items>.rows{margin: 0 auto 50px auto;}
#products .view>.introduce>.info>.items>.rows>.tit{ text-align: left;}
#products .view>.introduce>.info>.items>.rows>.tit>span{ position: relative; display: inline-block;padding: 8px 0; font-size: 1.2rem; color: #1e2687;}
#products .view>.introduce>.info>.items>.rows>.tit>span:after{position: absolute;z-index: 12; left: 0;bottom: 0;width: 20px;height: 1px; background: #1e2687; content: '';}
#products .view>.introduce>.info>.items>.rows>.box{ padding-top: 20px;}
#products .view>.introduce>.info>.items>.rows>.box a{display: inline-block; font-size: 1.4rem;color: #999; border: 1px solid#ddd; padding: 8px 16px; margin-bottom: 6px; margin-right: 6px; transition: all .35s;}
#products .view>.introduce>.info>.items>.rows>.box a:hover{ background: rgba(255,255,255,.3); border-color: #1e2687; color: #1e2687;}
#products .view>.introduce>.info>.items>.rows>.box ul>li{ position: relative; display: inline-block; margin-right: 20px;}
#products .view>.introduce>.info>.items>.rows>.box ul>li:after{ display: none; position: absolute;z-index: 12; right: -50px;top: 30px; min-width: 50px; box-sizing: border-box; padding: 8px 10px; background: rgba(0,0,0,.8); border-radius: 3px; font-size: 1.3rem; color: #fff; content: attr(data-title);transition: all 0.36s ease;animation: ani_opacity 0.3s ease backwards;}
#products .view>.introduce>.info>.items>.rows>.box ul>li:hover:after{display: block;}
#products .view>.introduce>.info>.items>.rows>.box ul>li>img{height: 50px;width: auto;}
#products .view>.introduce>.info .button{ text-align: left; padding: 20px 0;}
#products .view>.introduce>.info .button>a{display:inline-block; border: 1px solid #1e2687; text-align: center;  color: #1e2687; margin-right: 10px; overflow: hidden; padding: 10px 36px; transition: all .35s;}
#products .view>.introduce>.info .button>a>i{display: inline-block;vertical-align: middle;font-size: 3rem;}
#products .view>.introduce>.info .button>a>span{display: inline-block;vertical-align: middle;font-size: 1.6rem; font-weight: bold; margin-left: 10px;}
#products .view>.introduce>.info .button>a.mail{width: 50px;padding:10px 0; text-align: center;background: #1e2687;color: #fff;}
#products .view>.introduce>.info .button>a.mail>span{display: none; font-weight: normal;}
#products .view>.introduce>.info .button>a:hover{ background:#333; border-color: #333; color: #fff;}
#products .view>.details{ margin: 0 auto;padding: 100px 0;}
#products .view>.details .tab-nav{text-align: left;margin: 0 auto;}
#products .view>.details .tab-nav>ul{margin: 0 auto;}
#products .view>.details .tab-nav>ul>li{ position: relative; display: inline-block;vertical-align: top; cursor: pointer; margin-right: 50px; height: 80px; line-height: 80px; transition: all .35s;}
#products .view>.details .tab-nav>ul>li:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 0;height: 3px; background: #1e2687;content: '';transition: all .35s;}
#products .view>.details .tab-nav>ul>li>a{ font-size: 2rem; color: #333; }
#products .view>.details .tab-nav>ul>li.active:after{width: 100%;}
#products .view>.details .tab-nav>ul>li.active:before{opacity: 1;}
#products .view>.details .tab-nav>ul>li.active{ font-weight: bold;}
#products .view>.details .tab-nav>ul>li.active:after{ width: 100%;}
#products .view>.details .tab-nav>ul>li.active a{color: #1e2687;}
#products .view>.details .tab-box{ margin: 0 auto; padding: 50px 0;}
#products .view>.details .tab-box>.tab-item{ display:none; text-align: left;}
#products .view>.details .tab-box>.current{display: block;}
#products .view>.details .tab-box>.tab-item>.tit{display: none;}
#products .view>.details .tab-box>.tab-item>.con{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#products .view>.details .tab-box>.tab-item>.con>p{margin-bottom: 15px;}
#products .view>.details .tab-box>.tab-item>.con .table-container{position: relative;}
#products .view>.details .tab-box>.tab-item>.con .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#products .view>.details .tab-box>.tab-item>.con .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#products .view>.details .tab-box>.tab-item>.con table{  box-sizing: border-box; width: 100%!important; border: 1px solid #ccc;}
#products .view>.details .tab-box>.tab-item>.con table td{border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; font-size: 1.6rem;padding:15px;}
#products .view>.details .tab-box>.tab-item>.con table tr:first-child td:first-child{width: 240px!important;}
#products .view>.details .tab-box>.tab-item>.con img{max-width: 100%;height: auto;}


#consult{background: #fff;}
#consult .form{ position: relative; margin:0 auto; width: 86%; max-width: 1200px;padding: 50px 0;}
#consult .form>.title{ text-align: left; border-bottom: 1px solid #ddd; padding: 20px 0; }
#consult .form>.title>.info{font-size: 4rem; }
#consult .form>.title>.tips{padding-top: 10px; font-size: 1.2rem;color: #999;}
#consult .form>.title>.tips>p{display: block;padding-top: 5px;}
#consult .form>.close{ position: absolute;z-index: 43;right: 0;top: 20px; transition: all .5s;}
#consult .form>.close>i{font-size:5rem; color: #1e2687; cursor: pointer;}
#consult .form>.close:hover{transform:rotate(180deg);}
#consult .form .container{ position: relative; z-index: 10; margin:20px auto; height: 310px; overflow-y: auto;}
#consult .form .container::-webkit-scrollbar {width:5px;height: 1px;}
#consult .form .container::-webkit-scrollbar-thumb {background:#666;}
#consult .form .container::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}
#consult .form .container .rows{ position: relative; display:block; padding:6px 0;}
#consult .form .container .rows>label{display: none; font-size: 1.4rem; color: #666;margin-bottom: 10px;}
#consult .form .container .rows>input{ display:inline-block; box-sizing:border-box; width:100%;height:50px; line-height: 50px; padding:0 16px;-webkit-appearance:none; font-size: 1.4rem; background: #f6f6f6; border: 0; border-radius: 3px; color:#666;text-align:left; transition: all .35s;}
#consult .form .container .rows>input::-webkit-input-placeholder{ color:#999;}
#consult .form .container .rows>textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:16px;-webkit-appearance:none;  font-family: '微软雅黑'; font-size: 1.4rem; line-height:20px; border: 0; background: #f6f6f6; border-radius: 3px; color:#666;text-align:left;}
#consult .form .container .rows>textarea::-webkit-input-placeholder{ color:#999;}
#consult .form .container .rows .layui-input, #consult .form .container .rows .layui-select, #consult .form .container .rows .layui-textarea {height: 50px!important;line-height: 50px\9!important;border-width: 0!important; background-color: #f6f6f6!important; border-radius: 3px!important;}
#consult .form .container .rows .layui-form-select dl { top: 52px!important; max-height: 120px!important; border-color: #eee!important; box-shadow: 0 0 0!important;}
#consult .form .container .rows .layui-form-select dl dd.layui-this { background-color: #f4f7ff!important;color: #13358f!important;}
#consult .form .container .rows .layui-anim::-webkit-scrollbar {width:2px;height: 2px;}
#consult .form .container .rows .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#002fa7;}
#consult .form .container .rows .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}
#consult .form .container .w30{width:30%;}
#consult .form .container .w50{width:49%;}
#consult .form .container .w100{width:100%; clear:both}
#consult .form .container #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; transform: translateY(-50%); right:20px; cursor:pointer;}
#consult .form .button{padding-top: 12px; text-align: left;}
#consult .form .button>a{position: relative; display:inline-block; width: auto; box-sizing:border-box; background:#13358f; border-radius: 3px; padding:12px 40px; font-size:1.6rem; color:#fff; overflow: hidden; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#consult .form .button>a>span{position: relative;z-index: 20;}
#consult .form .button>a:after{position: absolute;z-index: 12; left: -500px; top:-30px; width: 500px;height: 160px;background: #030711; content: ''; transition: all .35s;}
#consult .form .button>a:hover:after{left: 0;}
#consult .form .complete{display: none; text-align: left; padding: 50px 20px;overflow: hidden}
#consult .form .complete>.ico{display: inline-block;float: left; box-sizing: border-box;padding-right: 20px;}
#consult .form .complete>.ico i{display: inline-block;font-size: 8rem;color: #53df9f; }
#consult .form .complete>.box{display: inline-block;float: left; padding-top: 10px;}
#consult .form .complete>.box .tit{font-size: 2.4rem;color: #000;}
#consult .form .complete>.box .txt{font-size: 1.4rem; color: #999;}
#consult .form .complete>.box .txt>span{display: inline-block; font-size: 1.4rem; color: #53df9f;}


.layui-layer-btn .layui-layer-btn0 {border-color: #13358f!important;background-color: #13358f!important; font-size: 1.2rem;}



@-webkit-keyframes ani_opacity {
    0% { right: -60px; opacity: 0; }
    100% { right: -50px; opacity: 1; }
}




@media only screen and (max-width: 1480px){

    #catalog .tab-nav>ul>li{margin: 0 30px;}



}

@media only screen and (max-width: 1380px){

    #products .view>.introduce>.info {padding: 50px 100px;}
    #products .view>.introduce>.info>.title>h3 { font-size: 5rem;}

}



@media only screen and (max-width: 1280px){

    #catalog .tab-nav>ul>li{margin: 0 20px;}


    #products .lists>ul>li>a .box>.title>h3 { font-size: 3rem;}
    #products .lists>ul>li>a .show>.title>h3 { font-size: 2.4rem;}
    #products .lists>ul>li>a .show>.title{ padding: 50px 0;}
    #products .lists>ul>li>a .show>.intro{font-size: 1.6rem;}


    #products .view>.introduce>.show{ position: relative; height: auto;width: 100%; float: none;}

    #products .view>.introduce>.info{ float: none; width: 100%; min-height: auto; padding: 50px 100px;}




}


@media only screen and (max-width: 1080px){

    #catalog .tab-box>.tab-item .content .item>a .plus-btn{ width: 30px;height: 30px; }
    #catalog .tab-box>.tab-item .content .item>a .plus-btn:after{ font-size: 2rem; width: 30px;height: 30px; line-height: 30px;}
    #catalog .tab-box>.tab-item .content .item>a .box{ height: 30px;}
    #catalog .tab-box>.tab-item .content .item>a .box>span{padding: 0 20px 0 40px;line-height: 30px;color: #fff; font-size: 1.4rem;}


    #products .lists>ul>li{ width: 50%;}


    #products .view>.introduce>.show .swiper{max-width: 600px;}
    #products .view>.introduce>.info>.title>h3 { font-size: 4rem;}
    #products .view>.introduce>.info>.title>span {font-size: 2.4rem;}
    #products .view>.introduce>.info>.items { padding: 30px 0; }


    #products .view>.details{ padding: 50px 100px 100px 100px; border-top: 1px solid #ddd;}
    #products .view>.details .wrap{width: 100%;}

}

@media only screen and (max-width: 960px){

    #products .view>.details .tab-nav{  display: none;}
    #products .view>.details .tab-box{ width: 100%;max-width: inherit; padding: 0;}
    #products .view>.details .tab-box>.tab-item{ display:block;}
    #products .view>.details .tab-box>.tab-item>.tit{ position: relative; display: block;  box-sizing: border-box; border-bottom: 1px solid #eee; cursor: pointer; font-size: 2rem; font-weight: bold; padding: 20px 0 20px 20px;}
    #products .view>.details .tab-box>.tab-item>.tit:after{position: absolute;z-index: 1; left: 0; top: 50%; margin-top: -10px; width: 5px;height: 20px; background:#1e2687;content: '';}
    #products .view>.details .tab-box>.tab-item:first-child>.tit{border-top: 1px solid #eee;}
    #products .view>.details .tab-box>.tab-item>.tit>i{ position: absolute;z-index: 10; right: 0; top: 50%; margin-top: -10px; width: 20px;height: 20px; line-height: 20px; font-size: 1.8rem; color: #ccc; margin-right: 10px; transition: all .35s;}
    #products .view>.details .tab-box>.tab-item>.tit.active{color: #1e2687; border-bottom: 0;}
    #products .view>.details .tab-box>.tab-item>.tit.active>i{ transform: rotate(180deg);}
    #products .view>.details .tab-box>.tab-item>.con{display: none; padding: 30px 0;}
    #products .view>.details .tab-box>.tab-item>.con table td{font-size: 1.4rem;}

}

@media only screen and (max-width: 860px){

    #catalog .tab-nav>ul>li{margin: 0 10px;}
    #catalog .tab-nav>ul>li>a{ padding: 10px 16px; font-size: 1.6rem;}
    #catalog .tab-box>.tab-item .content .item>a .box>span{ font-size: 1.2rem;}



    #products .lists {padding-bottom:50px;}
    #products .lists>ul>li>a .box {padding: 20px;}
    #products .lists>ul>li>a .box>.title>h3 { font-size: 2.4rem;}
    #products .lists>ul>li>a .box>.title>span { font-size: 1.6rem; }

    #products .lists>ul>li>a .show{ padding: 30px;}
    #products .lists>ul>li>a .show>.title>h3 { font-size: 2rem;}
    #products .lists>ul>li>a .show>.title{ padding: 30px 0 50px 0;}
    #products .lists>ul>li>a .show>.intro{font-size: 1.4rem;}



    #products .view>.introduce>.info>.items>.rows {margin: 0 auto 30px auto;}
    #products .view>.introduce>.info>.items>.rows>.box a { font-size: 1.2rem;}
    #products .view>.details .tab-box>.tab-item>.con { padding-top: 10px; font-size: 1.4rem; line-height: 2.4rem;}


    #consult .form>.title>.info{font-size: 3rem; }



}

@media only screen and (max-width: 640px){

    #catalog .tab-nav>ul>li{margin: 0;}
    #catalog .tab-nav>ul>li>a{ padding: 10px; font-size: 1.4rem; font-weight: normal;}
    #catalog .tab-box>.tab-item .content .item{display: none;}


    #products .lists>ul>li{ width: 100%; float: none;}


    #products .view>.introduce>.show .prev, #products .view>.introduce>.show .next{ right: 58px; width: 60px;height: 60px; line-height: 60px;}
    #products .view>.introduce>.show .next{right: -1px;}
    #products .view>.introduce>.show .prev i, #products .view>.introduce>.show .next i{font-size: 2.4rem;}


    #products .view>.introduce>.info {padding: 50px; }
    #products .view>.introduce>.info>.title>h3 {font-size: 3rem;}
    #products .view>.introduce>.info>.title>span {font-size: 2rem;}
    #products .view>.introduce>.info>.items>.rows>.box ul>li { margin-right: 10px; }
    #products .view>.introduce>.info>.items>.rows>.box ul>li>img {height: 36px;}
    #products .view>.introduce>.info .button>a { display: block;margin:0 auto 10px auto;}
    #products .view>.introduce>.info .button>a.mail { width: 100%;}
    #products .view>.introduce>.info .button>a.mail>span{display: inline-block;}

    #products .view>.details{ padding: 50px;}
    #products .view>.details .tab-box>.tab-item>.tit {font-size: 1.8rem; }



}



@media only screen and (max-width:520px){

    #products .view>.introduce>.show .prev, #products .view>.introduce>.show .next{ right: 48px; width: 50px;height: 50px; line-height: 50px;}
    #products .view>.introduce>.show .next{right: -1px;}
    #products .view>.introduce>.show .prev i, #products .view>.introduce>.show .next i{font-size: 2rem;}


    #consult .form {padding: 10px 0;}
    #consult .form>.close{top: 10px;}
    #consult .form>.close>i {  font-size: 3rem;}
    #consult .form>.title>.info { font-size: 2rem;}
    #consult .form .container { margin: 10px auto; }
    #consult .form .container .w30{width:100%;clear:both}
    #consult .form .container .w50{width:100%;clear:both}
    #consult .form .container .rows { padding: 5px 0;}
    #consult .form .container .rows>input { height: 36px; line-height: 36px; padding: 0 12px; font-size: 1.2rem; }
    #consult .form .container .rows>textarea {height:65px; padding: 12px; font-size: 1.2rem; }
    #consult .form .button{padding-top: 0;}
    #consult .form .button>a{ display:block; width: 100%; font-size:1.4rem;}


}