@charset "utf-8";
/* *******************************************************
 * filename : common.css
 * description : 공통적으로 사용되는 클래스 CSS
 * date : 2018-01-16
******************************************************** */


.cm-fl { float:left; }
.cm-fr { float:right; }

.cm-cb { clear:both; }
.cm-cf { clear:both; height:1px; }

.cm-pr { position:relative; }
.cm-pa { position:absolute; }

.cm-al { text-align:left !important; }
.cm-ac { text-align:center !important; }
.cm-ar { text-align:right !important; }
.cm-aj { text-align:justify !important; }

.cm-vt { vertical-align:top; }
.cm-vm { vertical-align:middle; }
.cm-vb { vertical-align:bottom; }

.cm-oh { overflow:hidden; }

.cm-cp { cursor:pointer; }

.cm-di { display:inline; }
.cm-db { display:block; }
.cm-dn { display:none; }

.cm-vv { visibility:visible; }
.cm-vh { visibility:hidden; }

.cm-bn { border:0 none; }
.cm-btn { border-top:0 none; }
.cm-brn { border-right:0 none; }
.cm-bbn { border-bottom:0 none; }
.cm-bln { border-left:0 none; }

.cm-bgn { background:none; }

.cm-fb { font-weight:bold; }
.cm-f600 { font-weight:600; }
.cm-f700 { font-weight:700; }
.cm-f800 { font-weight:800; }

.cm-alert-ie { margin:0; padding:1em; font-size:12px; letter-spacing:-1px; color:#ebebeb; background:#808080; }
.cm-alert-ie a { color:#ffd6c2; }
.cm-alert-ie a:hover { color:#ffd6c2; }
.cm-alert-ie a:focus { color:#ffd6c2; }
.cm-alert-ie a:active { color:#ffd6c2; }

.cm-accessibility a { position:absolute; text-align:center; width:200px; display:block; background:#c52227; color:#fff; left:-9999px; }
.cm-accessibility a:hover { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:focus { z-index:999999; margin-left:-100px; left:50%; }
.cm-accessibility a:active { z-index:999999; margin-left:-100px; left:50%; }


/* 공통 :: 가로값지정 */
.width10{width:10% !important;}
.width20{width:20% !important;}
.width30{width:30% !important;}
.width40{width:40% !important;}
.width50{width:50% !important;}
.width60{width:60% !important;}
.width70{width:70% !important;}
.width80{width:80% !important;}
.width90{width:90% !important;}
.width100{width:100% !important;}


/* 버튼 효과 */
@-webkit-keyframes criss-cross-left {
	0% {
		left: -20px;
	}
	50% {
		left: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		left: 50%;
		width: 375px;
		height: 375px;
	}
}

@keyframes criss-cross-left {
	0% {
		left: -20px;
	}
	50% {
		left: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		left: 50%;
		width: 375px;
		height: 375px;
	}
}

@-webkit-keyframes criss-cross-right {
	0% {
		right: -20px;
	}
	50% {
		right: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		right: 50%;
		width: 375px;
		height: 375px;
	}
}

@keyframes criss-cross-right {
  	0% {
		right: -20px;
	}
	50% {
		right: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		right: 50%;
		width: 375px;
		height: 375px;
	}
}

.btn-effect:before, .btn-effect:after {
	position: absolute;
	top: 50%;
	content: '';
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	z-index:6;
}

.btn-effect:before {
	left: -20px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
}

.btn-effect:after {
	right: -20px;
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
	-ms-transform:translate(50%, -50%);
	-moz-transform:translate(50%, -50%);
	-o-transform:translate(50%, -50%);
}

.btn-effect.on:before, .btn-effect:hover:before{
	-webkit-animation: criss-cross-left 0.9s both;
	animation: criss-cross-left 0.9s both;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

.btn-effect.on:after, .btn-effect:hover:after{
	-webkit-animation: criss-cross-right 0.9s both;
	animation: criss-cross-right 0.9s both;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


.certification-mark-bg{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden; z-index:5;}
.certification-mark-bg > span{
	display:block; width:0; height:120px; background-color:#fed33e;
	position:relative; left:-20%;
	-ms-transform:skewX(-20deg);  -webkit-transform:skewX(-20deg); -moz-transform:skewX(-20deg); -o-transform:skewX(-20deg); transform:skewX(-20deg); opacity:0;filter:Alpha(opacity=0);
	-webkit-animation: bgEffect 2s cubic-bezier(.2,.95,.57,.99) infinite;
	-moz-animation: bgEffect 2s cubic-bezier(.2,.95,.57,.99) infinite;
	animation: bgEffect 2s cubic-bezier(.2,.95,.57,.99) infinite;
}

@-webkit-keyframes bgEffect {
	0% {
		width: 50%;
		left:-100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	50%{
		width:100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	
	100% {
		width:0%;
		left:110%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
}
@-moz-keyframes bgEffect {
	0% {
		width: 50%;
		left:-100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	50%{
		width:100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	
	100% {
		width:0%;
		left:110%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
}
@keyframes bgEffect {
	0% {
		width: 50%;
		left:-100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	50%{
		width:100%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
	
	100% {
		width:0%;
		left:110%;
		opacity:1.0;filter:Alpha(opacity=100);
	}
}