@charset "utf-8";
/************************************************************************
 * 최적화       : html5
 * 서비스       : dino symbol_animate
 * 최초작성일   : 140204
 * 작성자       : 박노성
************************************************************************/
.spinner{text-align: center; margin: -60px 0 0 -60px; position: fixed; left: 50%; top: 45%;}
.spinner img{ margin:0.75em 0 0 0;}
.spinner span{ text-shadow:none; color:#fff !important; font-size:12px;}

.symbol_con{position: relative;width:119px;height:119px;display:inline-block; *display: inline; *zoom: 1; text-align:center;}
.symbol_con .symbol {position: relative;width:113px;height:113px;border:3px solid #fff;display:inline-block; *display: inline; *zoom: 1;top:0;

	-webkit-transition-property:all;
	-webkit-transition-duration:0.15s, 0.15s; 
	-webkit-transition-timing-function:linear, ease-in;
	
	-moz-transition-property:all;
	-moz-transition-duration:0.15s; 
	-moz-transition-timing-function:linear, ease-in; 
	
	-ms-transition-property:all; 
	-ms-transition-duration:0.15s; 
	-ms-transition-timing-function:linear, ease-in;
	
	-o-transition-property:all;  
	-o-transition-duration:0.15s; 
	-o-transition-timing-function:linear, ease-in;

	transition-property:all;  
	transition-duration:0.15s; 
	transition-timing-function:linear, ease-in;
}


.symbol_con .symbol .first_box{position: absolute;top: 3px;left: 3px;width: 35px;height: 18px;border-top: 17px solid #fff;border-bottom: 17px solid #fff;border-right: 17px solid #fff;background: #fff;background: transparent;}
.symbol_con .symbol .second_box{position: absolute;top: 3px;left: 72px;width: 18px;height: 46px;background: #fff;background: transparent;border: 3px solid #fff;}
.symbol_con .symbol .third_box{position: absolute;top: 58px;left: 3px;width: 18px;height: 35px;border-top: 17px solid #fff;border-left: 17px solid #fff;border-right: 17px solid #fff;background: #fff;background: transparent;}
.symbol_con .symbol .fourth_box{position: absolute;top: 58px;left: 58px;width: 18px;height: 18px;border: 17px solid #fff;background: #fff;background: transparent;}
/*@media all and (min-width:480px){}*/
.spinner.spinning .symbol_con .symbol{
	 -webkit-animation: symbol-transform-0 750ms linear infinite;
	    -moz-animation: symbol-transform-0 750ms linear infinite;
	     -ms-animation: symbol-transform-0 750ms linear infinite;
	      -o-animation: symbol-transform-0 750ms linear infinite;
	         animation: symbol-transform-0 750ms linear infinite;
}
.spinner.spinning .symbol_con .symbol .first_box{
	-webkit-animation: symbolfirst_box-transform-0 750ms linear infinite;
	   -moz-animation: symbolfirst_box-transform-0 750ms linear infinite;
	    -ms-animation: symbolfirst_box-transform-0 750ms linear infinite;
	     -o-animation: symbolfirst_box-transform-0 750ms linear infinite;
	        animation: symbolfirst_box-transform-0 750ms linear infinite;
}
.spinner.spinning .symbol_con .symbol .second_box{
	-webkit-animation: symbolsecond_box-transform-0 750ms linear infinite;
	   -moz-animation: symbolsecond_box-transform-0 750ms linear infinite;
	    -ms-animation: symbolsecond_box-transform-0 750ms linear infinite;
	     -o-animation: symbolsecond_box-transform-0 750ms linear infinite;
	        animation: symbolsecond_box-transform-0 750ms linear infinite;
}
.spinner.spinning .symbol_con .symbol .third_box{
	-webkit-animation: symbolthird_box-transform-0 750ms linear infinite;
	   -moz-animation: symbolthird_box-transform-0 750ms linear infinite;
	    -ms-animation: symbolthird_box-transform-0 750ms linear infinite;
	     -o-animation: symbolthird_box-transform-0 750ms linear infinite;
	        animation: symbolthird_box-transform-0 750ms linear infinite;
}
.spinner.spinning .symbol_con .symbol .fourth_box{
	-webkit-animation: symbolfourth_box-transform-0 750ms linear infinite;
	   -moz-animation: symbolfourth_box-transform-0 750ms linear infinite;
	    -ms-animation: symbolfourth_box-transform-0 750ms linear infinite;
	     -o-animation: symbolfourth_box-transform-0 750ms linear infinite;
	        animation: symbolfourth_box-transform-0 750ms linear infinite;
}


.spinner.spinning .symbol_con .symbol.open{
	 -webkit-animation: symbol-transform 2000ms ease-out;
	    -moz-animation: symbol-transform 2000ms ease-out;
	     -ms-animation: symbol-transform 2000ms ease-out;
	      -o-animation: symbol-transform 2000ms ease-out;
	         animation: symbol-transform 2000ms ease-out;
}
.spinner.spinning .symbol_con .symbol.open .first_box{
	-webkit-animation: symbolfirst_box-transform 2000ms ease-out;
	   -moz-animation: symbolfirst_box-transform 2000ms ease-out;
	    -ms-animation: symbolfirst_box-transform 2000ms ease-out;
	     -o-animation: symbolfirst_box-transform 2000ms ease-out;
	        animation: symbolfirst_box-transform 2000ms ease-out;
}
.spinner.spinning .symbol_con .symbol.open .second_box{
	-webkit-animation: symbolsecond_box-transform 2000ms ease-out;
	   -moz-animation: symbolsecond_box-transform 2000ms ease-out;
	    -ms-animation: symbolsecond_box-transform 2000ms ease-out;
	     -o-animation: symbolsecond_box-transform 2000ms ease-out;
	        animation: symbolsecond_box-transform 2000ms ease-out;
}
.spinner.spinning .symbol_con .symbol.open .third_box{
	-webkit-animation: symbolthird_box-transform 2000ms ease-out;
	   -moz-animation: symbolthird_box-transform 2000ms ease-out;
	    -ms-animation: symbolthird_box-transform 2000ms ease-out;
	     -o-animation: symbolthird_box-transform 2000ms ease-out;
	        animation: symbolthird_box-transform 2000ms ease-out;
}
.spinner.spinning .symbol_con .symbol.open .fourth_box{
	-webkit-animation: symbolfourth_box-transform 2000ms ease-out;
	   -moz-animation: symbolfourth_box-transform 2000ms ease-out;
	    -ms-animation: symbolfourth_box-transform 2000ms ease-out;
	     -o-animation: symbolfourth_box-transform 2000ms ease-out;
	        animation: symbolfourth_box-transform 2000ms ease-out;
}


/*----------------------------------------------------------------------------------*/


@-webkit-keyframes symbol-transform-0 { 
	0% {-webkit-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	100% {-webkit-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
}
@-webkit-keyframes symbolfirst_box-transform-0 { 
	0% {-webkit-transform:translate(27px,27px) scale(1.95,1.95);}
	100% {-webkit-transform:translate(27px,27px) scale(1.95,1.95);}
}
@-webkit-keyframes symbolsecond_box-transform-0 { 
	0% {-webkit-transform:translate(-27px,27px) scale(1.95,1.95);}
	100% {-webkit-transform:translate(-27px,27px) scale(1.95,1.95);}
}
@-webkit-keyframes symbolthird_box-transform-0 { 
	0% {-webkit-transform:translate(27px,-27px) scale(1.95,1.95);}
	100% {-webkit-transform:translate(27px,-27px) scale(1.95,1.95);}
}
@-webkit-keyframes symbolfourth_box-transform-0 { 
	0% {-webkit-transform:translate(-27px,-27px) scale(1.95,1.95);}
	100% {-webkit-transform:translate(-27px,-27px) scale(1.95,1.95);}
}



@-webkit-keyframes symbol-transform { 
	0% {-webkit-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	50% {-webkit-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
	50.0001% {-webkit-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	60% {-webkit-transform:translate(0,0) scale(1,1) rotate(0deg); border-width:3px;}
}
@-webkit-keyframes symbolfirst_box-transform { 
	0% {-webkit-transform:translate(27px,27px) scale(1.95,1.95);}
	50% {-webkit-transform:translate(27px,27px) scale(1.95,1.95);}
	60% {-webkit-transform:translate(0,0) scale(1,1);}
}
@-webkit-keyframes symbolsecond_box-transform { 
	0% {-webkit-transform:translate(-27px,27px) scale(1.95,1.95);}
	50% {-webkit-transform:translate(-27px,27px) scale(1.95,1.95);}
	60% {-webkit-transform:translate(0,0) scale(1,1);}
}
@-webkit-keyframes symbolthird_box-transform { 
	0% {-webkit-transform:translate(27px,-27px) scale(1.95,1.95);}
	50% {-webkit-transform:translate(27px,-27px) scale(1.95,1.95);}
	60% {-webkit-transform:translate(0,0) scale(1,1);}
}
@-webkit-keyframes symbolfourth_box-transform { 
	0% {-webkit-transform:translate(-27px,-27px) scale(1.95,1.95);}
	50% {-webkit-transform:translate(-27px,-27px) scale(1.95,1.95);}
	60% {-webkit-transform:translate(0,0) scale(1,1);}
}




@-moz-keyframes symbol-transform-0 { 
	0% {-moz-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	100% {-moz-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
}
@-moz-keyframes symbolfirst_box-transform-0 { 
	0% {-moz-transform:translate(27px,27px) scale(1.95,1.95);}
	100% {-moz-transform:translate(27px,27px) scale(1.95,1.95);}
}
@-moz-keyframes symbolsecond_box-transform-0 { 
	0% {-moz-transform:translate(-27px,27px) scale(1.95,1.95);}
	100% {-moz-transform:translate(-27px,27px) scale(1.95,1.95);}
}
@-moz-keyframes symbolthird_box-transform-0 { 
	0% {-moz-transform:translate(27px,-27px) scale(1.95,1.95);}
	100% {-moz-transform:translate(27px,-27px) scale(1.95,1.95);}
}
@-moz-keyframes symbolfourth_box-transform-0 { 
	0% {-moz-transform:translate(-27px,-27px) scale(1.95,1.95);}
	100% {-moz-transform:translate(-27px,-27px) scale(1.95,1.95);}
}



@-moz-keyframes symbol-transform { 
	0% {-moz-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	50% {-moz-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
	50.0001% {-moz-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	60% {-moz-transform:translate(0,0) scale(1,1) rotate(0deg); border-width:3px;}
}
@-moz-keyframes symbolfirst_box-transform { 
	0% {-moz-transform:translate(27px,27px) scale(1.95,1.95);}
	50% {-moz-transform:translate(27px,27px) scale(1.95,1.95);}
	60% {-moz-transform:translate(0,0) scale(1,1);}
}
@-moz-keyframes symbolsecond_box-transform { 
	0% {-moz-transform:translate(-27px,27px) scale(1.95,1.95);}
	50% {-moz-transform:translate(-27px,27px) scale(1.95,1.95);}
	60% {-moz-transform:translate(0,0) scale(1,1);}
}
@-moz-keyframes symbolthird_box-transform { 
	0% {-moz-transform:translate(27px,-27px) scale(1.95,1.95);}
	50% {-moz-transform:translate(27px,-27px) scale(1.95,1.95);}
	60% {-moz-transform:translate(0,0) scale(1,1);}
}
@-moz-keyframes symbolfourth_box-transform { 
	0% {-moz-transform:translate(-27px,-27px) scale(1.95,1.95);}
	50% {-moz-transform:translate(-27px,-27px) scale(1.95,1.95);}
	60% {-moz-transform:translate(0,0) scale(1,1);}
}


@-ms-keyframes symbol-transform-0 { 
	0% {-ms-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	100% {-ms-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
}
@-ms-keyframes symbolfirst_box-transform-0 { 
	0% {-ms-transform:translate(27px,27px) scale(1.95,1.95);}
	100% {-ms-transform:translate(27px,27px) scale(1.95,1.95);}
}
@-ms-keyframes symbolsecond_box-transform-0 { 
	0% {-ms-transform:translate(-27px,27px) scale(1.95,1.95);}
	100% {-ms-transform:translate(-27px,27px) scale(1.95,1.95);}
}
@-ms-keyframes symbolthird_box-transform-0 { 
	0% {-ms-transform:translate(27px,-27px) scale(1.95,1.95);}
	100% {-ms-transform:translate(27px,-27px) scale(1.95,1.95);}
}
@-ms-keyframes symbolfourth_box-transform-0 { 
	0% {-ms-transform:translate(-27px,-27px) scale(1.95,1.95);}
	100% {-ms-transform:translate(-27px,-27px) scale(1.95,1.95);}
}



@-ms-keyframes symbol-transform { 
	0% {-ms-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	50% {-ms-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
	50.0001% {-ms-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	60% {-ms-transform:translate(0,0) scale(1,1) rotate(0deg); border-width:3px;}
}
@-ms-keyframes symbolfirst_box-transform { 
	0% {-ms-transform:translate(27px,27px) scale(1.95,1.95);}
	50% {-ms-transform:translate(27px,27px) scale(1.95,1.95);}
	60% {-ms-transform:translate(0,0) scale(1,1);}
}
@-ms-keyframes symbolsecond_box-transform { 
	0% {-ms-transform:translate(-27px,27px) scale(1.95,1.95);}
	50% {-ms-transform:translate(-27px,27px) scale(1.95,1.95);}
	60% {-ms-transform:translate(0,0) scale(1,1);}
}
@-ms-keyframes symbolthird_box-transform { 
	0% {-ms-transform:translate(27px,-27px) scale(1.95,1.95);}
	50% {-ms-transform:translate(27px,-27px) scale(1.95,1.95);}
	60% {-ms-transform:translate(0,0) scale(1,1);}
}
@-ms-keyframes symbolfourth_box-transform { 
	0% {-ms-transform:translate(-27px,-27px) scale(1.95,1.95);}
	50% {-ms-transform:translate(-27px,-27px) scale(1.95,1.95);}
	60% {-ms-transform:translate(0,0) scale(1,1);}
}



@-o-keyframes symbol-transform-0 { 
	0% {-o-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	100% {-o-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
}
@-o-keyframes symbolfirst_box-transform-0 { 
	0% {-o-transform:translate(27px,27px) scale(1.95,1.95);}
	100% {-o-transform:translate(27px,27px) scale(1.95,1.95);}
}
@-o-keyframes symbolsecond_box-transform-0 { 
	0% {-o-transform:translate(-27px,27px) scale(1.95,1.95);}
	100% {-o-transform:translate(-27px,27px) scale(1.95,1.95);}
}
@-o-keyframes symbolthird_box-transform-0 { 
	0% {-o-transform:translate(27px,-27px) scale(1.95,1.95);}
	100% {-o-transform:translate(27px,-27px) scale(1.95,1.95);}
}
@-o-keyframes symbolfourth_box-transform-0 { 
	0% {-o-transform:translate(-27px,-27px) scale(1.95,1.95);}
	100% {-o-transform:translate(-27px,-27px) scale(1.95,1.95);}
}



@-o-keyframes symbol-transform { 
	0% {-o-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	50% {-o-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
	50.0001% {-o-transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	60% {-o-transform:translate(0,0) scale(1,1) rotate(0deg); border-width:3px;}
}
@-o-keyframes symbolfirst_box-transform { 
	0% {-o-transform:translate(27px,27px) scale(1.95,1.95);}
	50% {-o-transform:translate(27px,27px) scale(1.95,1.95);}
	60% {-o-transform:translate(0,0) scale(1,1);}
}
@-o-keyframes symbolsecond_box-transform { 
	0% {-o-transform:translate(-27px,27px) scale(1.95,1.95);}
	50% {-o-transform:translate(-27px,27px) scale(1.95,1.95);}
	60% {-o-transform:translate(0,0) scale(1,1);}
}
@-o-keyframes symbolthird_box-transform { 
	0% {-o-transform:translate(27px,-27px) scale(1.95,1.95);}
	50% {-o-transform:translate(27px,-27px) scale(1.95,1.95);}
	60% {-o-transform:translate(0,0) scale(1,1);}
}
@-o-keyframes symbolfourth_box-transform { 
	0% {-o-transform:translate(-27px,-27px) scale(1.95,1.95);}
	50% {-o-transform:translate(-27px,-27px) scale(1.95,1.95);}
	60% {-o-transform:translate(0,0) scale(1,1);}
}



@keyframes symbol-transform-0 { 
	0% {transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	100% {transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
}
@keyframes symbolfirst_box-transform-0 { 
	0% {transform:translate(27px,27px) scale(1.95,1.95);}
	100% {transform:translate(27px,27px) scale(1.95,1.95);}
}
@keyframes symbolsecond_box-transform-0 { 
	0% {transform:translate(-27px,27px) scale(1.95,1.95);}
	100% {transform:translate(-27px,27px) scale(1.95,1.95);}
}
@keyframes symbolthird_box-transform-0 { 
	0% {transform:translate(27px,-27px) scale(1.95,1.95);}
	100% {transform:translate(27px,-27px) scale(1.95,1.95);}
}
@keyframes symbolfourth_box-transform-0 { 
	0% {transform:translate(-27px,-27px) scale(1.95,1.95);}
	100% {transform:translate(-27px,-27px) scale(1.95,1.95);}
}



@keyframes symbol-transform { 
	0% {transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	50% {transform:translate(-3px,-3px) scale(0.5,0.5) rotate(180deg); border-width:6px;}
	50.0001% {transform:translate(-3px,-3px) scale(0.5,0.5) rotate(0deg); border-width:6px;}
	60% {transform:translate(0,0) scale(1,1) rotate(0deg); border-width:3px;}
}
@keyframes symbolfirst_box-transform { 
	0% {transform:translate(27px,27px) scale(1.95,1.95);}
	50% {transform:translate(27px,27px) scale(1.95,1.95);}
	60% {transform:translate(0,0) scale(1,1);}
}
@keyframes symbolsecond_box-transform { 
	0% {transform:translate(-27px,27px) scale(1.95,1.95);}
	50% {transform:translate(-27px,27px) scale(1.95,1.95);}
	60% {transform:translate(0,0) scale(1,1);}
}
@keyframes symbolthird_box-transform { 
	0% {transform:translate(27px,-27px) scale(1.95,1.95);}
	50% {transform:translate(27px,-27px) scale(1.95,1.95);}
	60% {transform:translate(0,0) scale(1,1);}
}
@keyframes symbolfourth_box-transform { 
	0% {transform:translate(-27px,-27px) scale(1.95,1.95);}
	50% {transform:translate(-27px,-27px) scale(1.95,1.95);}
	60% {transform:translate(0,0) scale(1,1);}
}