.c-case-list,.banner-list{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.item{width:33.3%}
.item .box{transition:all 600ms cubic-bezier(0.4,0,0.25,1.01);display:block;position:relative;margin:15px 15px 40px}
.item .box .pic:before{transition:all 300ms cubic-bezier(0.4,0,0.25,1.01);content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.4);opacity:0;z-index:1}
.item .box:hover .pic:before{opacity:1}
.item .txt-wrap{transition:all 400ms cubic-bezier(0.165,0.84,0.44,1);position:relative;padding:0 2.9%;width:100%;z-index:1}
.item .name{font-weight:400}
.item .name b{font-weight:400;font-size:14px;position:absolute;right:20px;font-family:'Montserrat';color:#666;background:#EEE;padding:3px 10px;letter-spacing:.1em}
.item .name span{letter-spacing:.07em;font-size:14px;color:#222;padding-bottom:5px;border-bottom:1px solid #FFC926}
.item .catch{font-size:20px;font-weight:700;line-height:1.5;margin:17px 0 10px}
.item .tool{color:#AAA;font-size:14px;letter-spacing:.07em;height:30px;display:block}
.item .img{display:block;overflow:hidden}
.item .img img{width:100%;height:auto;transition:.7s ease-out;-webkit-transition:.7s ease-out;-moz-transition:.7s ease-out;-ms-transition:.7s ease-out;-o-transition:.7s ease-out}
.item:hover .img img{transform:scale(1.2)}
.item .box .pic{position:relative;overflow:hidden;transition:.7s ease-out;-webkit-transition:.7s ease-out;-moz-transition:.7s ease-out;-ms-transition:.7s ease-out;-o-transition:.7s ease-out}
.item:hover .box .pic{transform:scale(0.95)}
.banner-box h4{max-width:1010px;margin:10px auto 20px}
.banner-box h4 span{font-weight:400;line-height:1.2;letter-spacing:.05em;font-size:35px;font-family:'Poppins','微軟正黑體';display:block;text-align:center;margin-bottom:20px}
.banner-box h4 small{margin:0;padding:0;font-size:14px;line-height:2.2;letter-spacing:.1em;color:#444;text-align:left}
.banner-list .item .box .pic:before{display:none}
.banner-list .img img{transform:scale(1)}
.banner-list .item:hover .img img{transform:scale(1)}
.banner-list .item:hover .box .pic{transform:scale(1)}
.banner-list{background:#F5F5F5;padding:45px 30px 20px}
.banner-list .item .box{margin:0 20px 28px}
.banner-box{margin-bottom:85px}
.item .box .pic:after{content:'';width:100%;height:100%;background:#000;position:absolute;display:block;-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:right;transform-origin:right;-webkit-transition-duration:2s;transition-duration:2s;-webkit-transition-timing-function:cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;z-index:100;top:0}
body.loaded .item .box .pic:after{-webkit-transform:scaleX(0);transform:scaleX(0)}
.banner-list .item .box .pic:after{display:none}
@media screen and (max-width: 1200px) {
.item{width:50%}
}
@media screen and (max-width: 768px) {
.item{width:100%}
.item .txt-wrap{padding:0 2%}
.item .name{line-height:1.4;margin:.5em 0}
.item .name .inner{font-size:13px}
.item .catch{font-size:16px;margin:13px 0 5px}
.item .box{margin:0 0 30px}
.item .name span,.item .tool{font-size:13px;height:auto}
.item .name span{padding-bottom:3px}
.banner-box h4 span{font-size:20px;margin-bottom:15px}
.banner-box h4 small{line-height:1.8}
.banner-list{padding:25px 4px 10px}
.banner-list .item .box{margin:0 20px 13px}
}
@media screen and (max-width: 500px) {
.item .name .inner{right:5px}
.item .catch{margin:10px 0 5px}
.banner-list .item .box{margin:0 10px 13px}
.banner-list{padding:15px 4px 5px}
.banner-box{margin-bottom:40px}
}