@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/NotoSanskr.css); 
@import url(http://fonts.googleapis.com/earlyaccess/nanumsquare.css); 
#domain_wrap {float:left; width:100%; height:100vh; background:url("../images/bg_domain.jpg") center top no-repeat; background-size:cover;}
.domain_box {margin:0px auto; width:100%;}

.domain1 {float:left; width:100%; text-align:center; margin:30px 0 0 0;}
.domain2 {float:left; width:100%; text-align:center; margin:0 0 0 0;}
.domain3 {float:left; width:100%; text-align:center; margin:0 0 0 0;}
.domain4 {float:left; width:100%; text-align:center; margin:0 0 0 0;}


.domain_text1 {float:left; width:100%; text-align:center;}
.domain_text1 ul li {display:inline-block; margin:0 3px 0 3px;}

.domain_text1_box {background:rgba(0,0,0,0.4); min-width:360px; height:90px; line-height:84px; text-align:center; display:inline-block; font-family:Arial; color:#ffffff; font-size:32px; font-weight:900; letter-spacing:-1pt; border-radius:100px; font-style:italic; padding:0 20px 0 20px;}
.domain_text1_box:hover {background:rgba(255,255,255,0.1); box-shadow:rgba(0,0,0,0.8) 2px 10px 10px -1px;}
.domain_text1_box {
	animation-name: domain_text1_box;
	-webkit-animation-name: domain_text1_box;
		
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

}

@keyframes domain_text1_box {
    0%   {color:#ffba00; transform: translateY(0%);}
    50%  {color:#ffffff; transform: translateY(8%);}
    100%  {color:#ffba00; transform: translateY(0%);}
}

@-webkit-keyframes domain_text1_box {
    0%   {color:#ffba00; transform: translateY(0%);}
    50%  {color:#ffffff; transform: translateY(0%);}
    100%  {color:#ffba00; transform: translateY(0%);}
}



.domain_text2 {float:left; width:100%; text-align:center; line-height:26px; color:#ffffff; font-family:'nanumsquare', sans-serif; font-size:36px; font-weight:700; font-style:italic; text-shadow:1px 10px 10px rgba(0,0,0,0.8); margin:20px 0 0 0;}
.domain_text2_font {color:#ffcc00; font-size:58px; font-weight:900; margin:0 0 0 20px;}

.domain_customer {float:left; width:100%; text-align:center; margin:10px 0 20px 0;}
.domain_customer ul li {display:inline-block; margin:0 20px 0 20px;  font-family:'nanumsquare', sans-serif; font-size:26px; font-weight:900; font-style:italic; text-shadow:1px 10px 10px rgba(0,0,0,0.8);}

.domain_customer {
	animation-name: domain_customer;
	-webkit-animation-name: domain_customer;
		
	animation-duration: 4s;	
	-webkit-animation-duration: 4s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

}

@keyframes domain_customer {
    0%   {color:#ff0000;}
    50%  {color:#ffffff; }
    100%  {color:#ff0000;}
}

@-webkit-keyframes domain_customer {
    0%   {color:#ff0000;}
    50%  {color:#ffffff;}
    100%  {color:#ff0000;}
}


.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 3.5s;	
	-webkit-animation-duration: 3.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1.1);
		opacity: 0.75;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(1.1);
		opacity: 0.75;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(1.01);
		opacity: 0.75;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1.01);
		opacity: 0.75;	
	}			
}


.hatch{
	animation-name: hatch;
	-webkit-animation-name: hatch;	

	animation-duration: 7s;	
	-webkit-animation-duration: 7s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}









.domain_text1_box:hover {
	animation-name: mouseover03;
	-webkit-animation-name: mouseover03;	

	animation-duration: 0.2s;	
	-webkit-animation-duration: 0.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	
	animation-iteration-count:1;
	-webkit-animation-iteration-count:1;	
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;	

	visibility: visible !important;	
}

@keyframes mouseover03 {
	0%   {transform:scale(0.9);}		
	100% {transform:scale(1.05);}			
}

@-webkit-keyframes mouseover03 {
	0%   {-webkit-transform:scale(0.9);}
	100% {-webkit-transform:scale(1.05);}					
}