/***/ #allcat{margin-top:90px;margin-bottom:30px} #smallcat{margin-bottom:30px} .goback-title{} .goback{position:relative;padding-left:60px;display:inline-block} .goback:before{content:"";background:url(../images/arrow-left.png) no-repeat left center;background-size:100% auto;position:absolute;left:0;top:13px;height:40px;width:40px;transition:transform .25s ease-out;transform:scaleX(1);} .goback:hover:before{background-image:url(../images/arrow-left-hover.png);transform:scaleX(0.7);} .goback-h1{font-size:52px;font-weight: 700;line-height: 1.2em;letter-spacing: -2px;} .goback:hover{color:#000} /***/ /*pro-list*/ .product_list .pro_box{float: left;width: 1100px;} .pro_all{padding:35px 0 60px} .pro_all h2{font-size: 30px;font-weight: 300;} .pro_all h2::after{content:"";display:block;width:35px;height:4px;background-color:#0072da;margin:25px 0 10px;} .pro_cate{float: left;width: 22.5%;} .pro_cate h2{font-size: 30px;font-weight: 300;} .pro_cate h2::after{content:"";display:block;width:35px;height:4px;background-color:#0072da;margin:25px 0 10px;} .pro_cate ul li{position: relative;padding:20px 0;float: unset;border: 0;border-bottom: 1px solid #ccc;text-align: unset;height: unset;width: 100%;} .pro_cate ul li>a{width: 90%;font-size: 18px;line-height: 28px;font-weight: 400;color: #333;display: block;} .pro_cate ul li i{position: absolute;top: 22px;right: 0px;font-size: 22px;font-weight: 300;color: #888;} .pro_cate ul li.active{border-color: #0072da;} .pro_cate ul li.active a,.pro_cate ul li.active i{color: #0072da;} .pro_cate ul li .child_box{padding-top:20px;border-top: 1px solid #ccc;margin-top: 20px;} .pro_cate ul li.active .child_box{border-color: #0072da;} .pro_cate ul li .child_box a{font-size: 15px;line-height: 24px;padding:0 15px;margin-bottom: 15px;color: #aaaaaa;display: block;} .pro_cate ul li .child_box a:last-child{margin-bottom: 0;} .pro_cate ul li .child_box a:hover,.pro_cate ul li .child_box a.active{color: #0072da;} #product_list{float: right;width: calc(100% - 25.5%);} @media(max-width:1400px){ .pro_all h2{font-size: 26px;} .pro_cate ul li>a{width: 90%;font-size: 16px;line-height: 25px;} .pro_cate ul li .child_box a{font-size: 14px;line-height: 23px;margin-bottom: 5px;} #product_list li .title{font-size: 16px;} } @media(max-width:1100px){ #product_list{width: 100%;} } .pro_box .pro_box_left a{float: left;width: 30%;margin-right: 5%;margin-bottom: 35px;} .pro_box .pro_box_left a:nth-child(3n){margin-right: 0;} .pro_box .pro_box_left a p{font-size: 20px;text-align: center;height: 65px;line-height: 30px;display: flex;justify-content: center;align-items: center;} .pro_module{float: right;width: 360px;} /* .cate_box{padding: 30px;background-color: #f4f4f4;width: 100%;margin-bottom: 30px;} .cate_box h4,.tag_box h4{text-transform: uppercase;} .cate_box hr,.tag_box hr{margin:15px 0 40px} .cate_box .cate_list .list .top_cate{position: relative;height: 45px;line-height: 45px;border-bottom: 1px solid #ccc;} .cate_box .cate_list .list .top_cate a{font-size: 18px;} .cate_box .cate_list .list .top_cate i{position: absolute;right: 6px;top: 8px;font-size: 30px;z-index: 3;} .cate_box .cate_list .list_child{padding: 30px 0;border-bottom: 1px solid #ccc; display: none;} .cate_box .cate_list .list_child a{font-size: 15px;margin-bottom: 17px;display: block;} .cate_box .cate_list .list_child a.active,.cate_box .cate_list .list_child a:hover{color: #18a0ff;} .cate_box .cate_list .list.active .top_cate a,.cate_box .cate_list .list:hover .top_cate a{color: #18a0ff;} .cate_box .cate_list .list.active .top_cate i,.cate_box .cate_list .list:hover .top_cate i{color: #18a0ff;} .cate_box .cate_list .list.active .list_child{display: block;} */ /**/ @media(max-width: 1540px){ .product_list .pro_box{width: 70%;} .pro_module {width: 28%;} } @media(max-width:1440px){ .goback-h1 {font-size: 37px;} #allcat {margin-top: 50px;} } @media(max-width:1100px){ .goback-h1 {font-size: 30px;} /**/ #allcat {margin-top: 30px;} .product_list .pro_box{width: 100%;} .pro_box .pro_box_left a {width: 49%;margin-right: 2%;margin-bottom: 20px;} .pro_box .pro_box_left a:nth-child(3n){margin-right: 2%;} .pro_box .pro_box_left a:nth-child(2n){margin-right: 0;} .pro_box .pro_box_left a p {font-size: 16px;line-height: 24px;} .pro_module {width: 100%;} .pro_box a p {font-size: 16px;} /**/ .cate_box .cate_list .list .top_cate a {font-size: 16px;} .cate_box .cate_list .list .top_cate i{top: 15px;font-size: 20px;} .cate_box .cate_list .list_child {padding: 15px 0;} .cate_box .cate_list .list_child a {font-size: 14px;margin-bottom: 13px;} .cate_box hr, .tag_box hr {margin: 15px 0 15px;} } /**/ #cate_select{margin:65px 0 25px;} #cate_select .w1400{} #cate_select .select_box{float: left;width: 23.5%;margin-right: 2%;margin-bottom: 2%;position: relative;} #cate_select .select_box:nth-child(4n){margin-right: 0%;} #cate_select .select_box input[type=text]{width: 100%;border: 1px solid #eee;height: 40px;line-height: 40px;padding-left: 15px;background-color: #fff;} #cate_select .select_box a {color: #333;} #cate_select .select_box a i{position: absolute;right: 15px;top: 9px;font-size: 25px;} #cate_select .select_box .checkboxbutton{width: 100%;border: 1px solid #eee;height: 40px;line-height: 40px;padding-left: 15px;background-color: #fff;display: block;} #cate_select .select_box.showactive .checkboxbutton{border-color: #0072da;position: relative;padding-left: 35px;} #cate_select .select_box.showactive .checkboxbutton::before{ content: ''; position: absolute; left: 10px; top: 11px; width: 16px; height: 16px; background-color: #0072da; background-image: url(../images/g.png); background-repeat: no-repeat; background-position: center center; background-size: 14px 14px; border-radius: 50%; z-index: 2; } #cate_select .select_box button{position: absolute;right: 10px;top:12px;background-color: unset;border: 0;} #cate_select .select_box .select_list{position: absolute;top: 40px;left: 0;right:0;margin:0 auto;width: 100%;box-shadow: 0 0 6px 1px #eee;padding: 10px;z-index: 3;display: none;background-color: #fff;} #cate_select .select_box .select_list .select_list_box{margin-top: 10px;} #cate_select .select_box .select_list .select_list_box input[type=checkbox]{display: inline-block;margin-right: 5px;} /**/ #tag_box{margin-bottom: 25px;} #tag_box .tag_list{display: inline-block;margin-right: 20px;font-size: 13px;padding:6px 15px;border-radius: 15px;border: 1px solid #ccc;margin-bottom: 5px;position: relative;} #tag_box .tag_list.tag_check{padding:6px 35px;} #tag_box .tag_list.tag_check::before{content: "";display: block;position: absolute;left: 10px;top: 7px;background-image: url(../images/tag-g.png);background-size: 100%;background-repeat: no-repeat;width: 13px;height: 13px;} #tag_box .tag_list.tag_check::after{content: "";display: block;position: absolute;right: 10px;top: 7px;background-image: url(../images/icon_close.png);background-size: 100%;background-repeat: no-repeat;width: 13px;height: 13px;} /**/ #product_list li{list-style-type: none;float: left;width: 33.3%;outline: 1px solid #eee;box-shadow: 0 0 0 0 #fff;padding:30px;padding-bottom: 35px;text-align: center;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;} #product_list li:hover{box-shadow: 0 0 20px 2px #eee;} #product_list li .img {height: 298px;} #product_list li .img img{} #product_list li .title{font-size: 20px;font-weight: 400;margin-bottom: 10px;line-height: 25px;height: 50px;overflow: hidden;display: flex;justify-content: center;align-items: center;} #product_list li p{} #product_list li .des{font-size: 16px;line-height: 28px;height: 55px;overflow: hidden;} /**/ #page_new {margin: 95px 0;} #page_new .w1400{position: relative;} #page_new .page_box{text-align: center;} #page_new .page_box a{display: inline-block;width: 37px;line-height: 37px;height: 37px;margin:0 10px;} #page_new .page_box a.next,#page_new .page_box a.prev{display: inline-block;width: 100px;line-height: 37px;height: 37px;border: 1px solid #0072da;text-transform: uppercase;} #page_new .gopage{position: absolute;right: 0;bottom:0;} #page_new .gopage form{display: inline-block;} #page_new .gopage input{width: 30px;} #page_new .page_box a.active,#page_new .page_box a:hover{background-color: #0072da;color: #fff;} #page_new .page_box a.next:hover,#page_new .page_box a.prev:hover{background-color: #0072da;color: #fff;} #loading{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255,255,255,0.7);z-index: 999;display: none;width: 100%;height: 100vh;} #loading .loading_box {position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);display: flex;justify-content: center;} #loading .loading_box img{animation: cycler 1s linear 0s infinite;width: 50px;} @keyframes cycler{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } @media(max-width:1100px){ #cate_select{margin: 30px 0;} #cate_select .select_box{width: 49%;} #cate_select .select_box:nth-child(2n){margin-right: 0;} #product_list li{width: 50%;} #product_list li .img {height: 40vw;} #page_new{margin:20px 0;} #page_new .gopage{position: relative;right: 0;bottom:0;left: 0;margin: 0 auto;width: 100px;margin-top: 30px;} #tag_box .tag_list{margin-right: 10px;} #tag_box .tag_list.tag_check{padding: 6px 20px;} #tag_box .tag_list.tag_check::before{left: 7px;top: 8px;width: 10px;height: 10px;} #tag_box .tag_list.tag_check::after{right: 7px;top: 8px;width: 10px;height: 10px;} } @media(max-width:768px){ #cate_select .select_box{width: 100%;} #product_list li{padding:15px} #product_list li .title{font-size: 18px;font-weight: 400;margin-bottom: 10px;line-height: 23px;height: 50px;} #product_list li .des{font-size: 13px;line-height: 18px;height: 55px;} #tag_box .tag_list{font-size: 13px;margin-right: 5px;} } .cate-nav-left{float: left;width: 25%;padding:20px;border-radius: 10px;border: 1px solid #eee;} .cate-nav-left h3{font-size: 24px;} .cate-nav-left h3::after{content: "";display: block;width: 50px;height: 4px;background-color: #0072da;margin: 15px 0;} .cate-nav-left .cate-box a{display: block;font-size: 16px;line-height: 26px;color: #555;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;} .cate-nav-left .cate-box a.active,.cate-nav-left .cate-box a:hover{color: #0072da;} .product_list{float: right;width: 73%;} @media (max-width: 768px) { .pro_cate{width: 100%;} .pro_cate ul li{padding:10px 0} .pro_cate ul li .child_box{padding-top: 10px;margin-top: 10px;} .pro_cate ul li>a{font-size: 14px;} .pro_cate ul li .child_box a{font-size: 13px;} .product_list{width: 100%;} .cate-nav-left h3{font-size: 20px;} .cate-nav-left .cate-box a{font-size: 14px;line-height: 24px;} }