@charset "UTF-8"; 

/*3.아이콘 위아래
	animation:tong .3s ease-in alternate infinite;
*/
@keyframes tong {
	0% {transform:translate(0, -3px)}
	100% {transform:translate(0, 2px)}
}
@keyframes tong2 {
	0% {transform:translate(0, -3px)}
	25% {transform:translate(0, 2px)}
	50% {transform:translate(0, -3px)}
	100% {transform:translate(0, 2px)}
}
@keyframes rotate{
	0% {transform: rotate(0);}
	100% {transform: rotate(180deg);}
}

/*4.아이콘 위
	animation:ani_up .3s ease-in;
*/
@keyframes ani_up {
	0% {transform:translate(0, 0)}
	100% {transform:translate(0, -5px)}
}

/*박스라인 애니메이션*/
.ani_linebox {position:relative; display:block; border:1px solid #ddd;}
.ani_linebox:before, .ani_linebox:after {content: ''; display: inline-block; position: absolute;}
.ani_linebox:before {right:-24px; top:-5px; width:0; height:0; border-right:35px solid transparent; border-left:35px solid transparent; border-bottom:35px solid #ddd; border-top:none; transform: rotate(45deg); transition:0.5s;}
.ani_linebox:after {right:6px; top:6px; width:16px; height:16px; background:url(../images/sub_ir.png) -39px -70px no-repeat; opacity:0.7; z-index: 10; transition: opacity 0.3s ease-in;}
.ani_linebox .btn_icon {left:30px}
.ani_linebox .line_top:before, .ani_linebox .line_top:after,
.ani_linebox .line_btm:before, .ani_linebox .line_btm:after {content: ''; display:inline-block; position:absolute; width:100%; height:100%; background-color:#197bbf; transition:0.5s; z-index: 10;}
.ani_linebox .line_top:before {left:0; top:0; width:0; height:2px;}
.ani_linebox .line_top:after {left:0; top:0; width:2px; height:0;}
.ani_linebox .line_btm:before {right:-1px; bottom:0; width:2px; height:0;}
.ani_linebox .line_btm:after {right:0; bottom:-1px; width:0; height:2px;}

.ani_linebox:hover,
.ani_linebox:active,
.ani_linebox:focus {box-shadow: 5px 5px 5px rgba(0,0,0,0.1);}
.ani_linebox:hover:after,
.ani_linebox:active:after,
.ani_linebox:focus:after {opacity:1;}
.ani_linebox:hover .line_top:before,
.ani_linebox:active .line_top:before,
.ani_linebox:focus .line_top:before,
.ani_linebox:hover .line_btm:after,
.ani_linebox:active .line_btm:after,
.ani_linebox:focus .line_btm:after {width:100%;}
.ani_linebox:hover .line_top:after,
.ani_linebox:active .line_top:after,
.ani_linebox:focus .line_top:after,
.ani_linebox:hover .line_btm:before,
.ani_linebox:active .line_btm:before,
.ani_linebox:focus .line_btm:before {height:100%;}
.ani_linebox:hover:before,
.ani_linebox:active:before,
.ani_linebox:focus:before {right:-23px; border-bottom: 35px solid #197bbf;}
/*.ani_linebox:hover:after,
.ani_linebox:active:after,
.ani_linebox:focus:after {animation:rotate 1s ease alternate;}*/

.ani_linebox .tit {display:block;}

/*애니 추가:st*/
.layout_list li a:hover .btn_sicon,
.layout_list li a:active .btn_sicon,
.layout_list li a:focus .btn_sicon {animation: tong2 0.5s ease alternate;}
/*애니 추가:ed*/