.image18704,.image18704 *{margin:0;padding:0;box-sizing:border-box}.image18704{max-width:1200px;width:100%;margin:0 auto;padding:0 10px;overflow:hidden}.image18704>i{display:none}.image18704 .box{width:100%;display:flex;justify-content:center}.image18704 .box ul{width:100%;position:relative;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.image18704 .product{background-color:#f1f1f1;height:450px;width:384px;position:relative;flex:0 0 384px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.image18704 .product::before{content:'';display:block;width:0;height:3px;background-color:#d7000f;position:absolute;left:0;top:43%;z-index:3;transition:all 1s}.image18704 .product::after{height:150px;width:100%;display:block;position:absolute;top:43%;background-color:#f1f1f1;z-index:2;content:'';transition:all 1s}.image18704 .product .imgs{display:block;width:100%;height:305px;overflow:hidden}.image18704 img{object-fit:cover;object-position:top;max-height:100%}.image18704 .first{width:100%}.image18704 .second{position:absolute;top:50%;left:60px;opacity:1;z-index:3;transition:all 1s}.image18704 .container{font-size:14px;text-align:left;line-height:1.7em;color:#727272;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:4}.image18704 .container .banner-name{font-size:22px;font-weight:600;width:256px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;z-index:inherit;transition:color 1s}.image18704 .container .banner-docs{font-weight:400;width:256px;margin-top:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;z-index:inherit}.image18704 .container a{color:#fff;opacity:0;display:block;line-height:40px;height:40px;padding:0 30px;position:absolute;left:17%;bottom:0;transform:translateY(60px);transition:all 1s}@media(min-width:1200px){.image18704 .product:hover .second{opacity:0;transition:all 1s}.image18704 .product:hover::after{transform:translateY(60px)}.image18704 .product:hover::before{transform:translateY(60px);width:100%}.image18704 .product:hover .container a{opacity:1;transform:translateY(50%)}.image18704 .product{margin:0 .35% 30px .35%}.image18704 .container a{left:64px}.image18704 .second{left:64px}}@media(max-width:1199px){.image18704 .product::after{transform:translateY(60px);transition:none}.image18704 .product::before{transform:translateY(60px);width:100%;transition:none}.image18704 .product .second{opacity:0;z-index:0;transition:none}.image18704 .product .container a{opacity:1;transform:translateY(50%);transition:none}.image18704{padding:0 5px}.image18704 .product{flex:0 0 calc(33.3% - 10px);width:calc(33.3% - 10px);margin:0 5px;margin-bottom:30px}.image18704 .container a{left:38px}.image18704 .second{left:38px}}@media(max-width:900px){.image18704{padding:0 10px}.image18704 .product::after{transform:translateY(20px)}.image18704 .product::before{transform:translateY(20px);width:100%}.image18704 .box ul{justify-content:space-between}.image18704 .product{flex:0 0 49%;width:49%;margin:0;margin-bottom:30px}.image18704 .product .second{opacity:1;z-index:3}.image18704 .container .banner-name{width:342px}.image18704 .container .banner-docs{width:342px}}@media(max-width:780px){.image18704 .product{flex:0 0 365px;width:365px}.image18704 .container .banner-name{width:283px}.image18704 .container .banner-docs{width:283px}}@media(max-width:440px){.image18704 .product{max-width:100%;flex:1 1 auto}.image18704 .container a{left:44px}.image18704 .second{left:44px}.image18704 .container .banner-name{width:256px}.image18704 .container .banner-docs{width:256px}}