@charset "utf-8";
#inc01{width:100%;height:100%}
#inc01 ul{overflow:hidden;width:100%;height:100%}
#inc01 ul li{overflow:hidden;float:left;position:relative;width:25%;height:100%;background-color:#000}
#inc01 ul li a{display:block;width:100%;height:100%}
#inc01 ul li img{opacity:1;transition:all 0.35s;transform:translate3d(-15px,0,0) scale(1.02);-webkit-backface-visibility:hidden;backface-visibility:hidden}
#inc01 ul li .overlay {position:absolute;z-index:1;width:100%;height:100%;font-size:17px;color:#fff;opacity:0;transition:all 0.35s}
#inc01 ul li .overlay .num{position:absolute;top:50px;right:50px;font-weight:300}
#inc01 ul li .overlay .tit_area{position:absolute;left:50px;top:62%;opacity:0;transition:all 0.35s;transform:translateX(-70px)}
#inc01 ul li .overlay .tit_area span{font-size:20px;color:#ccc;color:rgba(255,255,255,.55);font-style:italic;font-family: 'Katibeh', cursive}
#inc01 ul li .overlay .tit_area h3{margin-top:20px;font-size: 42px;letter-spacing:0;font-weight:700;font-family:'Work Sans', arita-semibold}
/* show 버튼 */
#inc01 ul li .overlay .btn{position:absolute;right:50px;bottom: 8%;width:102px;height:102px;border-radius:102px;font-size:13px;font-weight:500;text-align:center;line-height:102px;opacity:0;transition:all 0.35s;transform:translateY(100px);
background: #f8598b;
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247,189,0,1)), color-stop(50%, rgba(248,89,140,1)), color-stop(100%, rgba(151,57,153,1)));
background: -webkit-linear-gradient(-45deg, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 50%, rgba(151,57,153,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 50%, rgba(151,57,153,1) 100%);
background: linear-gradient(135deg, rgba(247,189,0,1) 0%, rgba(248,89,140,1) 50%, rgba(151,57,153,1) 100%)}
#inc01 ul li .overlay .line{position:absolute;left:50px;top:0;width:1px;height:50%;background-color:rgba(255,255,255,.12)}
#inc01 ul li .overlay .line:after{display:block;content:"";position:absolute;bottom:0;left:-2px;width:5px;height:5px;border-radius:3px;background-color:#fff}
#inc01 ul li .overlay:before{content:"A";position:absolute;top:50%;left:-120px;z-index:-1;transform:translateY(-40%);font-size:500px;font-weight:700;color:rgba(255,255,255,.1)}
#inc01 ul li:nth-child(2) .overlay:before{content:"B"}
#inc01 ul li:nth-child(3) .overlay:before{content:"C"}
#inc01 ul li:nth-child(4) .overlay:before{content:"D"}
/* 호버효과 */
#inc01 ul li:hover img{opacity:0.35;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);-webkit-transform:scale(1);transform:scale(1)}
#inc01 ul li:hover .overlay{opacity:1}
#inc01 ul li:hover .overlay .tit_area{opacity:1;transform:translateX(0)}
#inc01 ul li:hover .overlay .btn{opacity:1;transform:translateX(0)}