@charset "utf-8";

@media screen and (min-width: 769px){
	.plus-btn {transition: transform 0.3s ease;}
	.plus-btn:hover {transform: rotate(-180deg); transform-origin: center;}
	
	.wrap .col3 .col:hover .more-icon::after {animation: arrow-move 800ms ease-in-out;}
	.wrap .about .quick-links .container > div .col a:hover .plus-btn {transform: rotate(-180deg); transform-origin: center;}

	.wrap a:hover .more-icon::after {background-image: url('/resources/icon/more-icon_hover.svg');}
	.wrap .banner .inner a:hover .more-icon::after {animation: arrow-move 800ms ease-in-out;}

	@keyframes arrow-move {
		0% { transform: translate(0, -50%); }
		30% { transform: translate(-20%, -50%); }
		45% { transform: translate(0, -50%); }
	}

}


/* È­»ìÇ¥ È£¹ö ¸ð¼Ç*/
.more-icon.m_ib_only{display : none !important; }
.more-icon-cs{width : 40px; height : 40px; background-color : #e0e5e9; border-radius : 50%; position : relative; margin-left : 5px;}
.arrow {width: 32px; height: 32px; position: absolute; top : 7px; left : -10px; margin-bottom: 30px; text-align : initial;}
.arrow::before, .arrow::after {content: '';position: absolute;}
.arrow::before { width: 0%; height: 7px; border: 2px solid #333; border-right: 0; border-bottom: 0; margin : 2px 0 0 0;}
.arrow::after { width: 35px; height: 1.7px; background: #333; transform-origin: 0 100%; transform: rotate(45deg);}
.arrow--right {transform: rotate(135deg);}


/*hover ¸ð¼Ç ÁÙ °÷ */
a:hover .arrow {animation: arrow-move-cs 800ms ease-in-out; }
a:hover .arrow::before {animation: flash_border 300ms;animation-fill-mode: forwards;}
a:hover .arrow::after {animation: flash_background 300ms;animation-fill-mode: forwards;}

.wrap .products .col:hover  .arrow {animation: arrow-move-cs 800ms ease-in-out; }
.wrap .products .col:hover  .arrow::before {animation: flash_border 300ms;animation-fill-mode: forwards;}
.wrap .products .col:hover  .arrow::after {animation: flash_background 300ms;animation-fill-mode: forwards;}


@media screen and (max-width: 1440px)
{
	.more-icon-cs{width : 2.78vw; height : 2.78vw;}
	.arrow {width: 2.2461vw;height: 2.2461vw;top : 0.4883vw;left : -0.6944vw;}
	.arrow::before {height: 0.4883vw;border: 0.0586vw solid #333;margin : 0.0977vw 0 0 0;}
	.arrow::after {width: 2.4414vw;height: 0.0977vw;}
}

@media screen and (max-width: 1024px) and (min-width: 769px){
	.more-icon-cs{width : 28px; height : 28px; }
	.arrow {width: 23px;height: 23px;top : 5px;left : -7px;}
	.arrow::before {height: 5px;border: 0.6px solid #333; margin : 1px 0 0 0;}
	.arrow::after {width: 25px;height: 1px;}
}

@media screen and (max-width: 768px){
	.more-icon.m_ib_only{display : inline-block !important;}
}





@keyframes flash_border {
	0% {border-color : #333;}
	100% {border-color : #e64d2c;}
}

@keyframes flash_background {
	0% {background : #333;}
	100% {background : #e64d2c;}
}

@keyframes arrow-move-cs {
	0% { transform: translate(0, 0) rotate(135deg); }
	30% { transform: translate(-20%, 0) rotate(135deg); }
	45% { transform: translate(0, 0) rotate(135deg); }
}