@CHARSET "UTF-8";

    /*Step0*/

    .animation #animationPad {
        position: relative;
        left: 60px;
        opacity: 0;
    }
    
    .animation #animationPad2 {
        position: relative;
        right: 60px;
        opacity: 0;
    }
    
    .animation .animationPad3-1 {
        left: 60px;
        opacity: 0;
    }

    .animation .animationPad3-2 {
        left: 122px;
        opacity: 0;
    }

    .animation .animationPad3-3 {
        left: 122px;
        opacity: 0;
    }
    
    .animation #animationPad4 {
        position: relative;
        right: 60px;
        opacity: 0;
    }
	
	.animation .animationSet {
        position: relative;
        bottom: 60px;
        opacity: 0;
    }
	
    .animation #animationSlogan {
        position: relative;
        bottom: 60px;
        opacity: 0;
    }

    .animation #animationMarketbtns {
        opacity: 0;
    }

    .animation #animationMarketbtns {
        opacity: 0;
    }

    .animating #animationSlogan1 {
        animation: goRight ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.45s;
    }

    .animating #animationLine1 {
	    animation: line1 ease;
	    animation-fill-mode: forwards;
	    animation-duration: 0.8s;
	    animation-delay: 0.5s;
	}

    .animating #animationPad {
        animation: goLeft ease, opacity ease-out;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.2s;
    }

    .animating #animationSlogan {
        animation: goBottom ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.3s;
    }

    .animating #animationMarketbtns {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.3s;
    }

    .animation #animationSlogan1 {
        position: relative;
        right: 60px;
        opacity: 0;
    }

    .animation #animationLine1 {
	    width: 0;
	}

    /*Step1*/

    .animation #animationLine2 {
	    width: 0;
	}


    .animation #animationSlogan2 .head {
        opacity: 0;
        position: relative;
        right: 60px;
    }

    .animation #animationSlogan2 .text {
        opacity: 0;
        position: relative;
        right: 60px;
    }

    .animating1 #animationLine2 {
        animation: line2 ease;
	    animation-fill-mode: forwards;
	    animation-duration: 0.8s;
	    animation-delay: 0.8s;
    }

    .animating1 #animationSlogan2 .head {
        animation: goRight ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.8s;
    }

    .animating1 #animationSlogan2 .text {
        animation: goRight ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.6s;
        animation-delay: 0.9s;
    }

    /*Step2*/

    .animation #animation2Movie {
        opacity: 0;
    }

    .animation #animation2Title {
        opacity: 0;
        position: relative;
        right: 10px;
    }

    .animation #animation2Line1 {
        width: 0;
    }

    .animation #animation2Text {
        opacity: 0;
        position: relative;
        right: 10px;
    }
	
    .animation #animation2Item1 {
        opacity: 0;
        position: relative;
        top: 60px;
    }

    .animation #animation2Item2 {
        opacity: 0;
        position: relative;
        top: 60px;
    }

    .animation #animation2Item3 {
        opacity: 0;
        position: relative;
        top: 60px;
    }
    
    .animation #animation2Item4 {
        opacity: 0;
        position: relative;
        top: 60px;
    }
    
    .animating2 #animation2Movie {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
    }

    .animating2 #animation2Title {
        animation: opacity ease, goRight ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.15s;
    }

    .animating2 #animation2Line1 {
        animation: line3 ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }

    .animating2 #animation2Text {
        animation: opacity ease, goRight ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.6s;
    }

    .animating3 #animation2Item1 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.2s;
    }

    .animating3 #animation2Item2 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.4s;
    }

    .animating3 #animation2Item3 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.6s;
    }
    
    .animating3 #animation2Item4 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.8s;
    }
    
    .animating2 #animation2Item5 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 2.2s;
    }
    
    .animating2 #animation2Item6 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 2.5s;
    }
    
    .animating2 #animation2Item7 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 2.8s;
    }
    
    .animating2 #animation2Item8 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 3.1s;
    }
	
	
    /*Step3*/

    .animation #animation3Title {
        opacity: 0;
    }

    .animation #animation3Line1 {
        width: 0;
    }

    .animation #animation3Text {
        opacity: 0;
    }

    .animation #animation3Photo {
        opacity: 0;
    }

    .animation .animation3Description {
        opacity: 0;
    }

    .animating2 #animation3Title {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 1.8s;
    }

    .animating3 #animation3Line1 {
        animation: line3 ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.15s;
    }

    .animating3 #animation3Text {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }

    .animating3 #animation3Photo {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.4s;
    }

    .animating3 .animation3Description {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
    }

    /*Step4*/

    .animation #animation4Title {
        opacity: 0;
    }

    .animation #animation4Line {
        width: 0;
    }

    .animation #animation4Text {
        opacity: 0;
    }

    .animation #animation4Description {
        opacity: 0;
    }

    .animation #animation4Item1 {
        opacity: 0;
        position: relative;
        top: 30px;
    }

    .animation #animation4Item2 {
        opacity: 0;
        position: relative;
        top: 30px;
    }

    .animation #animation4Item3 {
        opacity: 0;
        position: relative;
        top: 30px;
    }

    .animating4 #animation4Title {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
    }

    .animating4 #animation4Line {
        animation: line4 ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.15s;
    }

    .animating4 #animation4Text {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }

    .animating4 #animation4Description {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.4s;
    }

    .animating4 #animation4Item1 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 1s;
    }

    .animating4 #animation4Item2 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 1.3s;
    }

    .animating4 #animation4Item3 {
        animation: goTop ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 1.6s;
    }

    /*Step5*/

    .animation #animation5Image {
        opacity: 0;
    }

    .animation #animation5Line {
        width: 0;
    }

    .animation #animation5Text {
        position: relative;
        right: 10px;
        opacity: 0;
    }

    .animating5 #animation5Image {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
    }

    .animating5 #animation5Line {
        animation: line5 ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.15s;
    }

    .animating5 #animation5Text {
        animation: opacity ease, goRight ease;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }
    
    
    
    
    
    
    
    /* youngjin 수정 */
    
    
	.animation #animationlogo1 {
        animation: cup ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.6s;
    }
	
	.animation #animationlogo2 {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.6s;
    }
    
	.animation #animationlogo3 {
        animation: star ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 1s;
    }
	
	.animation #animationlogo4 {
        animation: opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.5s;
    }
	
	
	.animation10 #animationacco {
        animation: customer ease;
        animation-fill-mode: forwards;
        animation-duration: 0.5s;
    }
	
	
	
	
	
	
	
	
	.animating6 #animationPad2 {
		animation: goRight ease, opacity ease-out;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.2s;
	}
    
	.animating7 .animationPad3-1 {
		animation: goLeft ease, opacity ease-out;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
	}
 
	.animating7 .animationPad3-2 {
		animation: goLeft-1 ease, opacity ease-out;
        animation-fill-mode: forwards;
        animation-duration: 0.8s; 
	} 

	.animating7 .animationPad3-3 {
		animation: goLeft-1 ease, opacity cubic-bezier(0.85, 0.04, 0.99, 0.07);
        animation-fill-mode: forwards;
        animation-duration: 0.8s; 
	} 
      
	.animating8 #animationPad4 {
		animation: goRight ease, opacity ease-out;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.2s;
	}
	
	.animating9 .animationSet {
		animation: goBottom ease, opacity ease;
        animation-fill-mode: forwards;
        animation-duration: 0.8s;
        animation-delay: 0.2s;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

@keyframes visual-in {
	from {opacity: 0;background-size: auto 130%}
	to {opacity: 1;background-size: auto 100%}
}
@keyframes visual-out {
	from {opacity: 1;background-size: auto 100%}
	to {opacity: 0;background-size: auto 150%}
}



    @keyframes goTop {
        to {
            top: 0;
        }
    }

    @keyframes goBottom {
        to {
            bottom: 0;
        }
    }

    @keyframes goLeft {
        to {
            left: 0;
        }
    }

    @keyframes goLeft-1 {
        to {
            left: 62px;
        }
    }

    @keyframes goRight {
        to {
            right: 0;
        }
    }

    @keyframes opacity {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    @keyframes lineOpacity {
        from {
            opacity: 0;
        }
        to {
            opacity: 0.1;
        }
    }

    @keyframes line1 {
        to {
            width: 813px;
        }
    }

    @keyframes line2 {
        to {
            width: 747px;
        }
    }

    @keyframes line3 {
        to {
            width: 100px;
        }
    }

    @keyframes line4 {
        to {
            width: 71px;
        }
    }

    @keyframes line5 {
        to {
            width: 200px;
        }
    }
	
	
	
	
	 
	/* youngjin 수정 */

	
	@keyframes cup {
	  from {
	    transform: rotate(90deg);
	  }
	  to {
	    transform: rotate(0deg);
	  }
	}
	
	@keyframes star {
	  from {
	    transform: rotate(180deg);
	  }
	  to {
	    transform: rotate(0deg);
	  }
	}
	
	@keyframes customer {
	  from {
	    height: 0px;
	  }
	  to {
	    height: 1300px;
	  }
	}
	@media screen and (max-width: 1025px) and (orientation:landscape) {
		
		@keyframes customer {
		  from {
		    height: 0px;
		  }
		  to {
		    height: 870px;
		  }
		}
		
	}
	@media screen and (max-width: 970px) {
		
		@keyframes customer {
		  from {
		    height: 0px;
		  }
		  to {
		    height: 870px;
		  }
		}
		
	}
	@media screen and (max-width: 480px){
		@keyframes customer {
		  from {
		    height: 0px;
		  }
		  to {
		    height: 800px;
		  }
		}
	}
	@media screen and (max-width: 447px){
	
		@keyframes customer {
		  from {
		    height: 0px;
		  }
		  to {
		    height: 730px;
		  }
		}
	
	}
	@media screen and (max-width: 372px){
	
		@keyframes customer {
		  from {
		    height: 0px;
		  }
		  to {
		    height: 850px;
		  }
		}
	
	}