<style>
.cloud1{
    position: absolute;  
    width: 350px;
    height: 200px;  
    top:405px;
    left:0px;    
    animation-name: cloud1;
    animation-duration:2s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud1 {
  0% {
    left:0px;
  }
  100% {
    left:110px;
  }
}

.cloud2{
    position: absolute;  
    width: 360px;
    height: 250px;  
    top:30px;
    left:950px;    
    animation-name: cloud2;
    animation-duration:23s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud2 {
  0% {
    left:950px;
  }
  100% {
    left:750px;
  }
}


.cloud3{
    position: absolute;  
    width: 560px;
    height: 350px;  
    top:600px;
    left:750px;    
    animation-name: cloud3;
    animation-duration:5s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud3 {
  0% {
    left:950px;
  }
  100% {
    left:750px;
  }
}


.cloud4{
    position: absolute;  
    top:-35px;
    left:-50px;    
    animation-name: cloud4;
    animation-duration:25s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud4 {
  0% {
    left:-50px;
  }
  100% {
    left:210px;
  }
}

.cloud5{
    position: absolute;  
    width: 350px;
    height: 200px;  
    top:135px;
    left:-300px;    
    animation-name: cloud5;
    animation-duration:5s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud5 {
  0% {
    left:-300px;
  }
  100% {
    left:110px;
  }
}


.cloud6{
    position: absolute;  
    width: 350px;
    height: 200px;  
    top:405px;
    left:0px;    
    animation-name: cloud6;
    animation-duration:12s;
    animation-duration: leaner;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: forwards    
}
@-webkit-keyframes cloud6 {
  0% {
    left:-500px;
  }
  100% {
    left:-100px;
  }
}




.title_word{
    position: absolute;  
    top:135px;
	left:-1120px;
    animation-name: title_word;
    animation-duration:2s;
    animation-duration: leaner;

    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
	animation-delay:1s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes title_word {
  0% {
    left:560px;
	width:10px;
  }
  100% {
    left:240px;
	width:700px;
  }
}

.title_word2{
    position: absolute;  
    top:-15px;
	left:-1120px;
    animation-name: title_word2;
    animation-duration:2s;
    animation-duration: leaner;

    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:1;
	animation-delay:0s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes title_word2 {
  0% {
    left:560px;
	width:10px;
  }
  100% {
    left:270px;
	width:600px;
  }
}


.dino{
    position: absolute;  
	top:-200px;
    left:630px;
    animation-name: dino;
    animation-duration:2s;
    animation-duration: leaner;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:infinite;
    animation-iteration-count:1;
	animation-delay:3s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes dino {
  0% {
    left:630px;
    top:250px;
	width:1px;
  }
  100% {
    left:630px;
    top:100px;
	width:150px;
  }
}


.help1{
    position: absolute;  
	top:530px;
    left:-1120px;
    animation-name: help1;
    animation-duration:2s;
    animation-duration: leaner;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:infinite;
    animation-iteration-count:1;
	animation-delay:0s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes help1 {
  0% {
    left:460px;
	width:10px;
  }
  100% {
    left:10px;
	width:350px;
  }
}


.help2{
    position: absolute;  
	top:530px;
    left:-1120px;
    animation-name: help2;
    animation-duration:2s;
    animation-duration: leaner;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:infinite;
    animation-iteration-count:1;
	animation-delay:0s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes help2 {
  0% {
    left:560px;
	width:10px;
  }
  100% {
    left:380px;
	width:350px;
  }
}


.help3{
    position: absolute;  
	top:530px;
    left:-1120px;
    animation-name: help3;
    animation-duration:2s;
    animation-duration: leaner;
    animation-direction:alternate;
    animation-fill-mode: forwards;
    animation-iteration-count:infinite;
    animation-iteration-count:1;
	animation-delay:0s;
 animation-fill-mode: forwards;
}
@-webkit-keyframes help3 {
  0% {
    left:640px;
	width:10px;
  }
  100% {
    left:750px;
	width:350px;
  }
}


.menu_item_div::-webkit-scrollbar { 
    width: 3px;  /* 스크롤바의 너비 */
}

.menu_item_div::-webkit-scrollbar-thumb {
    height: 20%; /* 스크롤바의 길이 */
    background: #333; /* 스크롤바의 색상 */    
    /*border-radius: 10px;*/
}

.menu_item_div::-webkit-scrollbar-track {
    background-color:#eee;  /*스크롤바 뒷 배경 색상*/
}
.menu_item_div{
	width:700px;
	height:350px;
	overflow:hidden;
	overflow-y:auto;
	margin-top:170px;
	padding-left:10px;
	border:0px solid #aaa;
	border-radius:0px;
	padding-left:20px;
	padding-right:20px;
}
.menu_item_span_mom{
	
	width:195px;
	height:205px;
	float:left;
	margin:12px;
	position: relative;
	font-size:11px;
	color:#333;
	font-weight:bold;
 

}
.menu_item_span{
	
	width:160px;
	height:160px;
	float:left;
	margin-bottom:5px;
	position: relative;
	border:0px dotted #777;
	border-radius:10px;
	overflow:hidden;
	text-align:center;
	background-color:#fff;
	/*box-shadow: 5px 5px 5px grey;*/
}
.menu_item_span:hover{
	border:2px solid #368be2;
	z-index:500;
}
.menu_item_frame{
	left:-16px;top:-16px;background-image:url("https://dino-typing.com/color/img/choice_img_bg.png");width:190px;height:190px;position: absolute;z-index:500;cursor:pointer;
}
.menu_item_frame:hover{
	background-image:url("https://dino-typing.com/color/img/choice_img_bg_hover.png");
}

.wrapper1{
  margin-bottom:5px;
  display: block;
  width: 80px;
  height: 80px;
  line-height: 33px;
  font-size: 12px;
  font-family: sans-serif;
  font-weight:bold;
  text-decoration: none;
  color: #5f6368;
  border: 1px solid #5f6368;
  border-radius:5px;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;
  vertical-align: middle;
  padding-top:10px;
  background-color:#fff;
  cursor:pointer;
  box-shadow: 2px 2px 5px grey;
  
}

.wrapper1 span{
  position: relative;
  z-index: 2;
}

.wrapper1:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #217ba0;
  transition: all .35s;
}


.wrapper1:hover{
  color: #fff;
}

.wrapper1:hover:after{
  width: 100%;
}

.category{
	float:left;width:70px;margin-bottom:5px;height:35px;padding-top:8px;border-radius:5px;background-color:#fff;color:#333;font-size:11px;text-align:center;margin-left:5px;font-weight:bold;cursor:pointer;
	border:2px solid #aaa;
}
.category_choice{
	float:left;width:70px;margin-bottom:5px;height:35px;padding-top:8px;border-radius:5px;background-color:#ab1221;color:#fff;font-size:11px;text-align:center;margin-left:5px;font-weight:bold;cursor:pointer;
	border:2px solid #aaa;
}
.category_choice:hover{
	border:2px solid #368be2;
}
.category:hover{
	border:2px solid #368be2;
}
</style>