@charset "utf-8";

#product{margin: 0 auto;}

#product .prolist{ display: none; background: #eee; margin: 0 auto;padding: 30px;text-align: left;}
#product .prolist>.plist{ border-bottom: 1px solid #ddd; padding: 20px 0;}
#product .prolist>.plist:last-child{border: 0;}
#product .prolist>.plist .proc{display: block;float: left; min-width: 130px;}
#product .prolist>.plist .proc>a{display: inline-block; font-size: 2rem;font-weight: bold; color: #014081; transition: all .35s;}
#product .prolist>.plist .proc>a:hover{color: #04b8ef;text-decoration: underline;}
#product .prolist>.plist .pros{display: block; float: left; padding: 0 10px;}
#product .prolist>.plist .pros>a{display: inline-block; margin-right: 20px; font-size: 1.6rem; color: #666; border: 1px solid transparent; padding: 3px 12px; transition: all .35s;}
#product .prolist>.plist .pros>a:hover{color: #014081; border-color: #014081;}
#product>.display{text-align: left;}
#product>.display>.title{ position: relative;padding:0 20px; margin-bottom: 30px; text-align: left; font-size: 3rem;font-weight: bold;color: #333;}
#product>.display>.title:after{position: absolute;z-index: 1; left: 0;top: 50%;width: 6px;height: 60%; background:#e60012; transform: translateY(-50%); content: '';transition:all .35s;}
#product>.display>.list{margin: 0 auto;}
#product>.display>.list>.tit{ position: relative; font-size: 2rem; color: #333; background: #f7f7f7; padding: 15px 30px;}
#product>.display>.list>.tit:after{position: absolute;z-index: 1; left: 10px;top: 50%; width: 8px;height: 8px;border-radius: 100%; background: #e60000; content: ''; transform: translateY(-50%);}
#product>.display>.list>ul{margin: 30px auto;}
#product>.display>.list>ul>li{display: block;float: left;width: 22.75%; margin-right: 3%;margin-bottom: 3%;}
#product>.display>.list>ul>li:nth-child(4n){margin-right: 0;}
#product>.display>.list>ul>li>a{display: block;}
#product>.display>.list>ul>li .img{overflow: hidden; background: #fff; border: 1px solid #ddd;padding: 30px;}
#product>.display>.list>ul>li .img>img{width: 100%;height: auto; transition: all .8s;}
#product>.display>.list>ul>li .tit{ text-align: center;margin: 10px auto; padding: 10px 20px; background: #eee; font-size: 1.6rem; color: #666; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#product>.display>.list>ul>li:hover .tit{color: #fff;background: #014081}
#product>.display>.list>ul>li:hover .img{border-color: #014081;}
#product>.display>.list>ul>li:hover .img>img{transform: scale(1.1);}


#product>.view{ position: relative;  margin: 0 auto; box-sizing: border-box; padding-top: 30px;}
#product>.view>.title{display: none;}
#product>.view>.details{display: block;margin: 0 auto; border: 1px solid #ddd;}
#product>.view>.details .focus{width: 50%; box-sizing: border-box; border-right: 1px solid #ddd;}
#product>.view>.details .focus .focus-show{ position:relative; display: block; margin:0 auto;  box-sizing: border-box; }
#product>.view>.details .focus .focus-show .swiper-container{width:100%; height:100%; margin: 0 auto;box-sizing: border-box;overflow: hidden; }
#product>.view>.details .focus .focus-show .swiper-slide{ text-align: center; margin: 0 auto;}
#product>.view>.details .focus .focus-show .swiper-slide>img{width:100%; height:100%; margin: 0 auto;  vertical-align: center;}
#product>.view>.details .focus .focus-show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:-10px;}
#product>.view>.details .focus .focus-show .swiper-pagination .swiper-pagination-bullet {width: 8px;height: 8px; margin:0 3px;}
#product>.view>.details .focus .focus-show .swiper-pagination .swiper-pagination-bullet-active{background:#e60012;}
#product>.view>.details .focus .focus-show .arrow-prev, #product>.view>.details .focus .focus-show .arrow-next{ position:absolute; z-index:99; left:0; top:50%; margin-top:-20px; width:40px; height:40px; line-height: 40px; cursor: pointer; text-align: center; background: rgba(0,0,0,.3); transition: all .35s; }
#product>.view>.details .focus .focus-show .arrow-next{ left: auto; right: 0; }
#product>.view>.details .focus .focus-show .arrow-prev i, #product>.view>.details .focus .focus-show .arrow-next i{ font-size: 2rem; color: #fff; transition: all .35s;}
#product>.view>.details .focus .focus-show .arrow-prev:hover, #product>.view>.details .focus .focus-show .arrow-next:hover{ background: #014081; }
#product>.view>.details .box{width: 50%; text-align: left; box-sizing: border-box; padding: 50px;}
#product>.view>.details .box>.title{ position: relative; padding: 15px 0; border-bottom: 1px solid #ddd; text-align: left; font-size: 2rem; font-weight: bold; color: #333;}
#product>.view>.details .box>.title:after{position: absolute;z-index: 10; left: 5px; bottom: -2px;width: 60px;height: 4px;background: #014081; content: '';}
#product>.view>.details .box>.text{display: block; font-size: 1.4rem; line-height: 2.4rem; color: #666;margin:30px auto;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 4; overflow: hidden;}
#product>.view>.details .box>.url{text-align: left;padding-top: 30px;}
#product>.view>.details .box>.url>a{display: inline-block;vertical-align: middle; margin-right: 20px;border: 1px solid #014081; background: #014081; padding: 12px 40px; font-size: 1.6rem; color: #fff; transition: all .35s;}
#product>.view>.details .box>.url>a>i{font-size: 2.4rem;float: left; margin-right: 6px;}
#product>.view>.details .box>.url>span{display: inline-block;vertical-align: middle;font-size: 2rem; color: #333;}
#product>.view>.tags{text-align: left;margin: 0 auto;padding: 50px 0;}
#product>.view>.tags>.item{display: block; padding-bottom: 50px;}
#product>.view>.tags>.item:last-child{padding-bottom: 0;}
#product>.view>.tags>.item>.tit{ position: relative;text-align: center; font-size: 3.6rem; color: #333; padding-bottom: 20px;}
#product>.view>.tags>.item>.tit:after{position: absolute;z-index: 2;left: 50%;bottom: 0; width: 60px;height: 2px; background: #014081;transform: translateX(-50%); content: '';}
#product>.view>.tags>.item>.con{ position: relative; z-index: 50; font-size: 1.8rem; color: #444; line-height: 3rem; padding: 50px 0; }
#product>.view>.tags>.item>.con>p{margin-bottom: 20px;}
#product>.view>.tags>.item>.con .table-container{position: relative;}
#product>.view>.tags>.item>.con .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#product>.view>.tags>.item>.con .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#product>.view>.tags>.item>.con table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#product>.view>.tags>.item>.con table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; text-align: left; font-size: 1.6rem;padding:10px 20px;}
#product>.view>.tags>.item>.con table tr:first-child td{background: #eee; font-weight: bold;}
#product>.view>.tags>.item>.con img{max-width: 100%;height: auto;}


#product>.view>.feedback{ position: relative; margin: 0 auto; background: #f3f3f3; padding: 100px 0;}
#product>.view>.feedback>.tit{ position: relative;text-align: center; font-size: 3.6rem; color: #333; padding-bottom: 20px;}
#product>.view>.feedback>.tit:after{position: absolute;z-index: 2;left: 50%;bottom: 0; width: 60px;height: 2px; background: #014081;transform: translateX(-50%); content: '';}
#product>.view>.feedback>.container{ position: relative;z-index: 50; padding-top: 50px; margin: 0 auto;}
#product>.view>.feedback>.container .form{ margin: 0 auto;}
#product>.view>.feedback>.container .form .row>[class*="col-"] {padding-right: 20px;}
#product>.view>.feedback>.container .form .row>.group{display: block; float: left; margin-bottom: 20px;}
#product>.view>.feedback>.container .form .row>.group input{ display:inline-block; box-sizing:border-box; width:100%;height:auto; line-height: 3.2rem; padding:13px 20px;-webkit-appearance:none;font-family: 'Poppins', sans-serif; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left; transition: all .35s;}
#product>.view>.feedback>.container .form .row>.group input::-webkit-input-placeholder{ color:#999;}
#product>.view>.feedback>.container .form .row>.group textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:13px 20px;-webkit-appearance:none; font-family: 'Poppins', sans-serif; line-height:3.2rem; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left;transition: all .35s;}
#product>.view>.feedback>.container .form .row>.group textarea::-webkit-input-placeholder{ color:#999;}
#product>.view>.feedback>.container .form .row>.group input:hover, #product>.view>.feedback>.container .form .row>.group textarea:hover{border-color: #ccc;}
#product>.view>.feedback>.container .form .row>.col-3{width: 30%; flex: 0 0 30%;}
#product>.view>.feedback>.container .form .row>.col-5{width: 50%; flex: 0 0 50%;}
#product>.view>.feedback>.container .form .row>.col-10{width: 100%; flex: 0 0 100%;}
#product>.view>.feedback>.container .form #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:10px; margin-top:-13px; cursor:pointer;}
#product>.view>.feedback>.container .form .row>.button{text-align: center; padding-top: 20px;}
#product>.view>.feedback>.container .form .row>.button .submit{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; font-weight: bold; background: #04b8ef;padding:10px 50px; font-size: 2rem; color:#fff;  cursor:pointer; transition: all .35s;}
#product>.view>.feedback>.container .form .row>.button .submit:hover{background: #333;}
#product>.view>.feedback>.container .form .row>.button .reset{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; font-weight: bold; background: #666;padding:10px 50px; font-size: 2rem; color:#fff;  cursor:pointer; transition: all .35s;}
#product>.view>.feedback>.container .form .row>.button .reset:hover{background: #333;}




@media (max-width:1460px){


}


@media (max-width:1280px){


    #product .title>h3{font-size: 3.6rem;}

    #product>.display>.list>ul>li{width: 31.33%;}
    #product>.display>.list>ul>li:nth-child(4n){margin-right: 3%;}
    #product>.display>.list>ul>li:nth-child(3n){margin-right: 0;}




}

@media (max-width:1200px){


}


@media (max-width:1080px){


    #product>.view>.tags>.item>.con .table-container:after{ display: block;}


}


@media (max-width:960px){



    #product>.view>.title{ display: block; font-size: 3rem; font-weight: bold; padding-bottom: 20px; color: #333; text-align: center;}
    #product>.view>.title>span{display: block;font-size: 2.6rem;}
    #product>.view>.details .focus{width: 100%; float: none; text-align: center; margin: 0 auto; border-bottom: 1px solid #ddd;border-right: 0;}
    #product>.view>.details .box{ width: 100%; float: none;padding: 20px 30px;}
    #product>.view>.details .box>.title{display: none;}
    #product>.view>.details .box>.text{padding: 20px 0; font-size: 1.4rem;}


}

@media (max-width:860px){


    #product>.display>.list>ul>li{width: 48.5%; margin-right: 0;}
    #product>.display>.list>ul>li:nth-child(4n){margin-right: 0;}
    #product>.display>.list>ul>li:nth-child(even){float: right;}
    #product>.display>.list>ul>li .tit{ padding: 10px;font-size: 1.4rem;}



    #product>.view>.tags{padding: 30px 0;}
    #product>.view>.tags>.item>.tit {font-size: 2.8rem; padding-bottom: 10px;}
    #product>.view>.tags>.item>.tit:after{width: 40px;}
    #product>.view>.tags>.item>.con{ font-size: 1.4rem; line-height: 2rem; }
    #product>.view>.tags>.item>.con table{  min-width: initial;}
    #product>.view>.tags>.item>.con table td{ font-size: 1.4rem;}




    #product>.view>.feedback>.tit {font-size: 2.8rem; padding-bottom: 10px;}
    #product>.view>.feedback>.tit:after{width: 40px;}
}

@media (max-width:780px){

    #product>.view>.title{font-size: 2.4rem;}


    #product>.view>.feedback>.container .form .row>[class*="col-"] {padding-right: 0;}
    #product>.view>.feedback>.container .form .row>.col-3{width: 100%; flex: 0 0 100%;}
    #product>.view>.feedback>.container .form .row>.col-5{width: 100%; flex: 0 0 100%;}
    #product>.view>.feedback>.container .form .row>.col-10{width: 100%; flex: 0 0 100%;}
    #product>.view>.feedback>.container .form .row>.button .submit{width: 100%; font-weight: normal;}
    #product>.view>.feedback>.container .form .row>.button .reset{width: 100%; font-weight: normal;margin-top: 10px;}
}



@media (max-width:640px){


    #product>.display>.list>ul>li .tit{ font-size: 1.2rem;}

    #product>.view>.details .box>.text {padding: 0;}
    #product>.view>.tags>.item>.tit {font-size: 2.2rem;}

    #product>.view>.feedback>.tit {font-size: 2.2rem;}


}