/* All page */
.c-case-list,.banner-list{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background: #eeeeee;padding: 30px;height: 100%;width: 100%;min-height: 550px;}
.item.three-box{width:33.3%}
.c-case-list.game-page.innpage{width: 50%;}
.item.three-box.two-item{width:50%}
.item.three-box .box{transition:all 600ms cubic-bezier(0.4,0,0.25,1.01);display:block;position:relative;margin: 15px 10px;}
.item.three-box .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: rgb(255 255 255);opacity: 1;z-index:1;}
.item.three-box:hover .pic:before{opacity:0}
.item.three-box .txt-wrap{transition:all 400ms cubic-bezier(0.165,0.84,0.44,1);position: absolute;padding:0 2.9%;width:100%;z-index: 2;top: 40%;/* left: 5%; */}
.item.three-box .name{font-weight:400}
.item.three-box .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.three-box .name span{letter-spacing:.07em;font-size:14px;color:#222;padding-bottom:5px;border-bottom:1px solid #FFC926}
.item.three-box .catch{font-size:20px;font-weight:700;line-height:1.5;margin:17px 0 10px}
.item.three-box .tool{color:#AAA;font-size:14px;letter-spacing:.07em;display:block;padding-left: 10px;}
.item.three-box h4{font-size:30px;margin: 0;position: relative;display: block;width: auto;}
.item.three-box h4 .title{width: auto;position: relative;padding: 0 10px;}
.item.three-box h4 .title:after{content:'';background:#ffffff;width: 0;height: 100%;position: absolute;margin: 0;left: 0;z-index: -1;transition: all .3s ease;}
.item.three-box:hover h4 .title:after{width: 100%;}
.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.three-box:hover .img img{transform:scale(1.1)}
.item.three-box .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}
.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.three-box .box .pic:before{display:none}
.banner-list .img img{transform:scale(1)}
.banner-list .item.three-box:hover .img img{transform:scale(1)}
.banner-list .item.three-box:hover .box .pic{transform:scale(1)}
.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.three-box .box .pic:after{-webkit-transform:scaleX(0);transform:scaleX(0)}
.banner-list .item.three-box .box .pic:after{display:none}
/* All page END*/

/* banner page */
.categories{position:relative;margin:0 auto}
.fillter-wrap{text-align:center;padding:15px 0}
.all-list{margin-bottom:40px;}
.izotope-container{position:relative;width:100%;}
.izotope-container .item{position:relative;float:left;overflow:hidden}
.izotope-container .item .box:before{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}
body.loaded .izotope-container .item .box:before{-webkit-transform:scaleX(0);transform:scaleX(0);}
.izotope-container .item-portf.it-30{width: 25%;}
.izotope-container .item-portf .box{margin: 0 8px 15px;position:relative;}
.izotope-container .item-portf .item-desc{background-color:rgba(44,44,44,0.6);cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;transition:all .1s ease;}
.izotope-container .item-portf .item-desc .item-info{transform:translateY(-50%);top:50%;position:absolute;width:100%;left:10%}
.izotope-container .item img{width:100%;display:block}
.izotope-container .item:hover .item-desc{opacity:1}
.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: 1.5;letter-spacing:.1em;color:#444;text-align:left;}
/* banner page END*/

/* UI pAGE */
.all-list.ui-page{margin: 0 20%;}
/* UI pAGE END*/

/* game page*/
.c-case-list.game-page{background:none;width:80%;margin: auto;}
.c-case-list.game-page.detail{width: 100%;}
.game-page .item.three-box{width:50%}
.game-page .item.three-box .box .pic:before{display:none;}
.item.one-item .box .pic:after{display: none;}
/* game page END*/

@media screen and (max-width: 1200px) {
.item{width:50%}
.item.one-item{width: 100%;margin: auto;position: relative;}
.all-list.ui-page .item{width: 100%;}
}
@media screen and (max-width: 1000px) {
.item.three-box{width:100%}
.item.three-box h4{font-size:22px;}
.c-case-list.game-page,.c-case-list.game-page.innpage{width:100%;min-height: auto;}
.all-list.ui-page{margin: 0 10%;}
}
@media screen and (max-width: 768px) {
.header-content.half-height{height:200px}
.izotope-container .item-portf.it-30{width:50%}
.c-case-list.game-page.detail{padding: 0;}
.item.three-box.two-item{width:100%}
.content{margin-top: 50px !important;}
.all-list.ui-page{margin: 0 5%;}
}
@media screen and (max-width: 480px) {
.izotope-container .item-portf.it-30{width:100%}
.item.three-box h4 .title,.item.three-box .tool{padding:0}
.item.three-box .txt-wrap{top:30%;}
}