article{padding-top:90px;background-color:#000}article section.works{padding-top:2.5rem;background-color:#000;color:#fff}article section.works .title-box{width:100%;padding:5rem 2.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:10}article section.works .title-box .title{min-width:205px;font-size:6rem}article section.works .title-box .menu{margin-left:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto}article section.works .title-box .menu .item{margin:0 1rem;position:relative;cursor:pointer}article section.works .title-box .menu .item p{font-size:2rem;font-weight:300;white-space:nowrap;font-family:acumin,'Noto Sans TC',sans-serif}article section.works .title-box .menu .item+.item:before{content:"";display:block;width:1px;height:100%;position:absolute;left:-1rem;background-color:#fff}article section.works .title-box .menu .item.active{color:#e0572c}article section.works .title-box .menu .item.active p{font-family:acumin,'Noto Sans TC',sans-serif}article section.works .title-box .menu .item.active:after{content:"";display:block;width:100%;height:1px;position:absolute;left:0;bottom:0;background-color:#e0572c}article section.works .title-box .mobile-menu{display:none}article section.works .main{padding:2rem 2.5rem;position:relative;font-size:0}article section.works .main .item{width:32%;margin-bottom:5rem;display:inline-block;vertical-align:top}article section.works .main .item .pic{width:100%;display:inline-block;height:300px;margin-bottom:2rem;background-position:center center;background-size:cover;cursor:pointer;position:relative}article section.works .main .item .pic .mask{width:100%;height:100%;position:absolute;background-size:cover;-webkit-transition:1s;transition:1s;-webkit-transition-timing-function:cubic-bezier(.9,.2,.3,1);transition-timing-function:cubic-bezier(.9,.2,.3,1);clip:rect(0,33vw,300px,0)}article section.works .main .item .pic:hover .mask{clip:rect(0,33vw,0,0)}article section.works .main .item .pic .vip{width:0;height:0;border-top:30px solid rgba(0,0,0,.8);border-right:30px solid rgba(0,0,0,.8);border-left:30px solid transparent;border-bottom:30px solid transparent;position:absolute;top:0;right:0}article section.works .main .item .pic .vip .text{font-size:1.333333rem;color:#fff;position:absolute;top:-15px;left:15px;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}article section.works .main .item .info .subtitle{padding-bottom:.5rem;font-size:1.5rem;font-weight:300;color:#848483;font-family:acumin,'Noto Sans TC',sans-serif}article section.works .main .item .info .title{font-size:2rem;font-weight:300;color:#fff;font-family:acumin,'Noto Sans TC',sans-serif}article section.works .main .item .info .motto{font-size:1rem;font-weight:300;color:#fff;font-family:acumin,'Noto Sans TC',sans-serif}article section.works .main .item:nth-child(3n+2){margin:0 2% 5rem}@media only screen and (max-width:768px){article{padding-top:64px}article section.works .title-box{padding:2rem 2.5rem}article section.works .title-box .title{min-width:110px;font-size:3.2rem}article section.works .title-box .menu{display:none}article section.works .title-box .mobile-menu{display:block;width:150px;border-radius:16px;background-color:#ec5728;color:#000;cursor:pointer;position:relative}article section.works .title-box .mobile-menu .selected{width:100%;height:32px;padding-bottom:2px;padding-right:10%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:1.2rem;font-weight:300;background-image:url(../images/select-icon.png);background-repeat:no-repeat;background-size:13px;background-position:90% center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:4}article section.works .title-box .mobile-menu .option-box{display:none;width:100%;padding-top:32px;background-color:#ec5728;border-radius:16px;position:absolute;top:0;left:0;z-index:3}article section.works .title-box .mobile-menu .option-box .opt{padding:0 1rem;font-size:1.2rem;line-height:32px;font-weight:600}article section.works .title-box .mobile-menu .option-box .opt:first-child{padding-top:8px;border-top:2px solid #000}article section.works .title-box .mobile-menu .option-box .opt.active{color:#fff;text-decoration:underline}article section.works .main{padding:1rem 2.5rem}article section.works .main .item{width:49%;margin-bottom:3rem}article section.works .main .item .pic{height:100px}article section.works .main .item .pic .mask{clip:rect(0,49vw,100px,0)}article section.works .main .item .pic .vip{border-top:20px solid rgba(0,0,0,.8);border-right:20px solid rgba(0,0,0,.8);border-left:20px solid transparent;border-bottom:20px solid transparent}article section.works .main .item .pic .vip .text{font-size:1rem;top:-10px;left:10px}article section.works .main .item .pic:hover .mask{clip:rect(0,49vw,0,0)}article section.works .main .item .info .subtitle{font-size:1.2rem}article section.works .main .item .info .title{font-size:1.5rem}article section.works .main .item .info .motto{font-size:1rem}article section.works .main .item:nth-child(3n+2){margin:0 0 3rem}article section.works .main .item:nth-child(odd){margin-right:1%}article section.works .main .item:nth-child(even){margin-left:1%}}
/*# sourceMappingURL=works.css.map */