@charset "UTF-8";
/* CSS Document */

	@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
	* {
		font-family:'Noto Sans','Open Sans','나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;
		color:#000;
		margin:0;
		padding:0;
	}
		
	img {
		border:0;
	}
	
	a {
		text-decoration:none;
	}
	
	ul {
		list-style-type:none;
	}
	@keyframes subtitle {
		0% {
			opacity:0;
		}
		100% {
			opacity:1;
		}
		
	}
	
						@keyframes title {
							0% {
								top:-100px;
								opacity:0;
							}
							100% {
								top:30px;
								opacity:1;
							}
		
						}

				@media screen and (max-width:767px) {

					#titlewrap {
						position:absolute;
						z-index:99;
						width:100%;
						font-size:27px;
						top:30px;
						animation-name:title;
						animation-duration:1s;
						animation-delay:0s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#subtitlewrap {
						position:absolute;
						width:100%;
						font-size:15px;
						top:120px;
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:1s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#titlewrap > h1 {
						text-align:center;
					}
					#subtitlewrap > h2 {
						text-align:center;
					}
					
					#yfbtn {
						position:absolute;
						width:100%;
						font-size:15px;
						top:200px;
					}
					
					#yfbtntwo {
						position:absolute;
						width:100%;
						font-size:15px;
						top:270px;
					}
					#social {
						position:absolute;
						width:100%;
						font-size:15px;
						top:360px;
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:3s;
						animation-fill-mode:forwards;
					}
					
					h4 {
						text-align:center;
					}
			
					.yfbtnstyle {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.8);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:2s;
						animation-fill-mode:forwards;
					}
			
					.yfbtnstyletwo {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.9);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:2.5s;
						animation-fill-mode:forwards;
						opacity:0;
					}
			
					.yfbtnstyle:hover, .yfbtnstyletwo:hover {
					  background: rgba(255,255,255,1);
					  color:#000;
					  border:1px solid #343434;
					}
					#yfbtn h3, #yfbtntwo {
						text-align:center;
					}
				}
						@keyframes titlepad {
							0% {
								top:-100px;
								opacity:0;
							}
							100% {
								top:150px;
								opacity:1;
							}
		
						}
				
				@media screen and (min-width:768px) and (max-width: 969px) {
					

					#titlewrap {
						position:absolute;
						z-index:99;
						width:100%;
						font-size:30px;
						top:150px;
						animation-name:titlepad;
						animation-duration:1s;
						animation-delay:0s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#subtitlewrap {
						position:absolute;
						width:100%;
						font-size:15px;
						top:240px;
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:1s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#titlewrap > h1 {
						text-align:center;
					}
					#subtitlewrap > h2 {
						text-align:center;
					}
					
					#yfbtn {
						position:absolute;
						width:100%;
						font-size:15px;
						top:320px;
					}
					
					#yfbtntwo {
						position:absolute;
						width:100%;
						font-size:15px;
						top:390px;
					}
					#social {
						position:absolute;
						width:100%;
						font-size:15px;
						top:480px;
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:3s;
						animation-fill-mode:forwards;
					}
					
					h4 {
						text-align:center;
					}
			
					.yfbtnstyle {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.8);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:2s;
						animation-fill-mode:forwards;
					}
			
					.yfbtnstyletwo {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.9);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:2.5s;
						animation-fill-mode:forwards;
						opacity:0;
					}
			
					.yfbtnstyle:hover, .yfbtnstyletwo:hover {
					  background: rgba(255,255,255,1);
					  color:#000;
					  border:1px solid #343434;
					}
					#yfbtn h3, #yfbtntwo {
						text-align:center;
					}
				}
						@keyframes titlepc {
							0% {
								top:-100px;
								opacity:0;
							}
							100% {
								top:150px;
								opacity:1;
							}
		
						}
				@media screen and (min-width:970px) {
					


					#titlewrap {
						position:absolute;
						z-index:99;
						width:100%;
						font-size:30px;
						top:150px;
						animation-name:titlepc;
						animation-duration:1s;
						animation-delay:0s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#subtitlewrap {
						position:absolute;
						width:100%;
						font-size:15px;
						top:240px;
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:1s;
						animation-fill-mode:forwards;
						opacity:0;
					}
					
					#titlewrap > h1 {
						text-align:center;
					}
					#subtitlewrap > h2 {
						text-align:center;
					}
					
					#yfbtn {
						position:absolute;
						width:100%;
						font-size:15px;
						top:320px;
					}
					
					#yfbtntwo {
						position:absolute;
						width:100%;
						font-size:15px;
						top:390px;
					}
					#social {
						position:absolute;
						width:100%;
						font-size:15px;
						top:480px;
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:3s;
						animation-fill-mode:forwards;
					}
					
					h4 {
						text-align:center;
					}
			
					.yfbtnstyle {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.8);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						opacity:0;
						animation-duration:2s;
						animation-delay:2s;
						animation-fill-mode:forwards;
					}
			
					.yfbtnstyletwo {
					  color: #ffffff;
					  font-size: 14pt;
					  background: rgba(0,0,0,.9);
					  padding: 15px 30px 15px 30px;
					  text-decoration: none;
					  position:relative;
					  width:180px;
					 display:inline-block; 
						animation-name:subtitle;
						animation-duration:2s;
						animation-delay:2.5s;
						animation-fill-mode:forwards;
						opacity:0;
					}
			
					.yfbtnstyle:hover, .yfbtnstyletwo:hover {
					  background: rgba(255,255,255,0.9);
					  color:#000;
					  border:1px solid #343434;
					}
					#yfbtn h3, #yfbtntwo {
						text-align:center;
					}
				}