#projects .section01{margin-bottom:50px}#projects .section01 .filterArea{height:80px;border:1px solid rgba(35,35,35,.25);-webkit-transition:width .4s .2s;-moz-transition:width .4s .2s;-o-transition:width .4s .2s;transition:width .4s .2s;flex-direction:row-reverse;-webkit-flex-direction:row-reverse;background-color:#fff;margin-left:auto;width:98px;display:flex;display:-webkit-flex}#projects .section01 .filterArea .cicon{height:100%;justify-content:center;-webkit-justify-content:center;background-color:#fff;align-items:center;-webkit-align-items:center;cursor:pointer;width:96px;display:-webkit-flex;display:flex}#projects .section01 .filterArea .cicon img{height:auto;width:30px}#projects .section01 .filterArea .filterItems{height:100%;-webkit-transition:width .4s .2s,opacity .4s 0s,visibility .4s 0s;-moz-transition:width .4s .2s,opacity .4s 0s,visibility .4s 0s;-o-transition:width .4s .2s,opacity .4s 0s,visibility .4s 0s;transition:width .4s .2s,opacity .4s 0s,visibility .4s 0s;opacity:0;visibility:hidden;width:0}#projects .section01 .filterArea .filterItems ul{height:100%;justify-content:flex-end;-webkit-justify-content:flex-end;margin-right:8px;display:flex;display:-webkit-flex}#projects .section01 .filterArea .filterItems ul li{height:100%;margin-left:40px}#projects .section01 .filterArea .filterItems ul li a{height:100%;align-items:center;-webkit-align-items:center;display:-webkit-flex;display:flex}#projects .section01 .filterArea .filterItems ul li.active a{font-weight:900;color:#232323}#projects .section01 .filterArea .rectangle{height:auto;-webkit-transition:opacity .3s .3s;-moz-transition:opacity .3s .3s;-o-transition:opacity .3s .3s;transition:opacity .3s .3s;position:absolute;opacity:0;top:-1px;left:-43px;width:43px;z-index:2}#projects .section01 .filterArea.on{-webkit-transition:width .4s 0s;-moz-transition:width .4s 0s;-o-transition:width .4s 0s;transition:width .4s 0s;width:1000px}#projects .section01 .filterArea.on .filterItems{-webkit-transition:width .4s 0s,opacity .4s .3s,visibility .4s .3s;-moz-transition:width .4s 0s,opacity .4s .3s,visibility .4s .3s;-o-transition:width .4s 0s,opacity .4s .3s,visibility .4s .3s;transition:width .4s 0s,opacity .4s .3s,visibility .4s .3s;opacity:1;visibility:visible;width:600px}#projects .section01 .filterArea.on .rectangle{-webkit-transition:opacity .4s 0s;-moz-transition:opacity .4s 0s;-o-transition:opacity .4s 0s;transition:opacity .4s 0s;opacity:1}@media (max-width:767px){#projects .section01{padding-top:16px;margin-bottom:0}#projects .section01 .filterArea{height:50px;width:42px;z-index:5}#projects .section01 .filterArea .cicon{width:40px}#projects .section01 .filterArea .cicon img{width:25px}#projects .section01 .filterArea .filterItems ul{overflow-x:scroll;padding:0 20px;justify-content:normal;-webkit-justify-content:normal;margin-right:0;-webkit-overflow-scrolling:touch;white-space:nowrap}#projects .section01 .filterArea .filterItems ul li{margin-right:10px;margin-left:0}#projects .section01 .filterArea .filterItems ul li:last-child{padding-right:20px}#projects .section01 .filterArea .rectangle{display:none}#projects .section01 .filterArea.on{width:100%}#projects .section01 .filterArea.on .filterItems{width:calc(100% - 40px);width:-webkit-calc(100% - 40px)}}@media (min-width:768px) and (max-width:1023px){#projects .section01{margin-bottom:15px}#projects .section01 .filterArea{height:50px;width:52px}#projects .section01 .filterArea .cicon{width:50px}#projects .section01 .filterArea .cicon img{width:24px}#projects .section01 .filterArea .filterItems ul li{margin-left:22px}#projects .section01 .filterArea .rectangle{left:-27px;width:27px}#projects .section01 .filterArea.on{width:680px}#projects .section01 .filterArea.on .filterItems{width:620px}}@media (min-width:1024px) and (max-width:1199px){#projects .section01{margin-bottom:15px}#projects .section01 .filterArea{height:50px;width:52px}#projects .section01 .filterArea .cicon{width:50px}#projects .section01 .filterArea .cicon img{width:24px}#projects .section01 .filterArea .filterItems ul li{margin-left:22px}#projects .section01 .filterArea .rectangle{left:-27px;width:27px}#projects .section01 .filterArea.on{width:680px}#projects .section01 .filterArea.on .filterItems{width:620px}}