@charset "utf-8";


/* 마우스 오버시 효과 PC */
.mainService .mainPerformance li a .line {display:block; position:absolute; left:0; top:0; width:100%; height:100%; transition:all .5s;}
.mainService .mainPerformance li a .line:before {content:""; position:absolute; left:10%; top:10%;  display:inline-block; width:0; height:2px; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.mainService .mainPerformance li a .line:after {content:""; position:absolute; left:10%; bottom:10%;  display:inline-block; width:0; height:2px; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.mainService .mainPerformance li a .line > em {opacity:0; position:absolute; left:50%; top:50%; margin:-5px 0 0 -31.5px; transition:all .5s;}
.mainService .mainPerformance li a .line > span:before {content:""; position:absolute; left:10%; top:10%;  display:inline-block; width:2px; height:0; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.mainService .mainPerformance li a .line > span:after {content:""; position:absolute; right:10%; top:10%;  display:inline-block; width:2px; height:0; border-color:red; transition:all .5s; background:rgba(230,230,230, 0.7)}
.mainService .mainPerformance li a > img {width:90%}
.mainService .mainPerformance li a:hover .line:before {width:80%}
.mainService .mainPerformance li a:hover .line:after {width:80%}
.mainService .mainPerformance li a:hover .line > span:before {height:80%}
.mainService .mainPerformance li a:hover .line > span:after {height:80%}
.mainService .mainPerformance li a:hover .line {background:rgba(0,0,0, 0.7)}
.mainService .mainPerformance li a:hover .line > em {opacity:1; color:#fff}