header{background-color:#f0f0f0}
.page-top{background-color:#f0f0f0;padding:204px 0 214px;margin:0 !important}
.page-top .filter{position:absolute;bottom:-20px;right:0;display:flex;align-items:center}
.page-top .filter-link{position:relative;margin-left:74px}
.page-top .filter-link:before{content:'';width:12px;height:1px;position:absolute;left:-43px;top:0;bottom:0;margin:auto;background-color:#ccc}
.page-top .filter-link:first-child{margin-left:0}
.page-top .filter-link:first-child:before{content:none}
.page-top .filter-link a{color:#999;transition:0.3s;-webkit-transition:0.3s}
.page-top .filter-link .down-list {display: none;}
.page-top .filter-link .down-list .flex-list {padding-top: 0px;padding-bottom: 20px;display: flex;align-items: center; position: absolute;left: 0;transition: all 0.4s;}
.page-top .filter-link .down-list .flex-list>a {flex-shrink: 0;padding: 0 10px;}
.page-top .filter-link .down-list .flex-list>a:first-child {padding-left: 0;}
.page-top .filter-link .down-list .flex-list>b {flex-shrink: 0;display: block;width: 1px;height: 10px;background-color: #ccc;}
.page-top .filter-link:last-child .down-list {left:auto;right: 0;}
.page-top .filter-link .down-list .flex-list>b:last-child {display: none;}
.page-top .filter-link:last-child .down-list .flex-list>a {margin-right: 0;margin-left: 10px;}
.page-top .filter-link.on a,.page-top .filter-link a:hover{color:#181818}
.case-list{margin-top:-114px;margin-bottom:116px;padding-left:5%;display:flex;flex-wrap:wrap;overflow:hidden}
.case-list .item{width:50%;margin-bottom:38px;position:relative;text-align:center;line-height:1;transition:transform 0.8s;-webkit-transition:-webkit-transform 0.8s;cursor:pointer}
.case-list .item a,.case-list .item span{display:block}
.case-list .item:hover .img span{transform:scale(1.1);-webkit-transform:scale(1.1)}
.case-list .item:hover:before{transform:scaleX(1);-webkit-transform:scaleX(1)}
.case-list .item:before{content:'';width:100%;height:1px;background-color:#a5a5a5;position:absolute;left:0;bottom:0;transform:scaleX(0);-webkit-transform:scaleX(0);transition:0.5s;-webkit-transition:0.5s}
.case-list .item.init .img div:nth-child(1){opacity:0;transform:scale(1.2);-webkit-transform:scale(1.2)}
.case-list .item.init .img div:nth-child(2){height:0%}
.case-list .item:nth-child(2n) .img div:nth-child(1){transition-delay:1s;-webkit-transition-delay:1s}
.case-list .item:nth-child(2n) .img div:nth-child(2){transition-delay:0.3s;-webkit-transition-delay:0.3s}
.case-list .img{padding-top:51.186%;position:relative;overflow:hidden}
.case-list .img span{background:no-repeat center;background-size:cover;width:100%;height:100%;transition:0.5s;-webkit-transition:0.5s}
.case-list .img div{position:absolute;width:100%;height:100%;top:0;left:0}
.case-list .img div:nth-child(1){z-index:2;transition:0.8s 0.7s;-webkit-transition:0.8s 0.7s}
.case-list .img div:nth-child(2){transition:1s;-webkit-transition:1s}
.case-list .title{font-size:18px;line-height:1;margin-top:36px}
.case-list .text{padding:16px 0 28px;color:#999}
@media screen and (max-width:1480px){.page-top{padding:160px 0 168px}
  .page-top .filter-link{margin-left:58px}
  .page-top .filter-link:before{width:10px;left:-34px}
  .case-list{margin-top:-74px}
  .case-list .item{margin-bottom:26px}
  .case-list .title{font-size:16px;margin-top:24px}
  .case-list .text{padding:12px 0 20px}
}
@media screen and (min-width:320px) and (max-width:768px){.page-top{padding:4rem 0 3rem;font-size:0.65rem}
  .page-top .filter{display:none}
  .case-list{margin-top:0;margin-bottom:0;font-size:0.65rem;padding:0}
  .case-list .item{width:100%;margin-bottom:1.2rem}
  .case-list .item .img{padding-top:51.186%}
  .case-list .item:nth-child(2n) .img div{transition-delay:0s;-webkit-transition-delay:0s}
  .case-list .item:before{content:none;transform:scaleX(1);-webkit-transform:scaleX(1)}
  .case-list .title{font-size:0.8rem;margin-top:1rem}
  .case-list .text{padding:0.5rem 0 0.8rem}
}