@charset "utf-8";

/*--------------------------팝업--------------------------*/
#mask {  
  position:absolute;  
  left:0;
  top:0;
  z-index:9000;  
  background-color:#000;
  display: none;
}
.window01,.window02 ,.window03,.window04, .window05, .window06,.window07, .window08, .window09, .window10 {
	  display: none;
	  position:absolute;  
	  top:0;
	  z-index:10000;
	  left:50%;
	 
}
.close {
	cursor:pointer;
}
/*--------------------------팝업--------------------------*/

.hh {position:relative; margin:0 auto;}

.a1_title1 {position:absolute; top:100px; left:50%; margin-left:-353px;}
.a1_title2 {position:absolute; top:200px; left:50%; margin-left:-529px;}
.a1_computer {position:absolute; top:600px; left:50%; margin-left:-565px;;}
.a1_cpu {position:absolute; top:700px; left:50%; margin-left:-227px;
		-webkit-animation-name: MotionMove1; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove1; 
		animation-duration: 1s; animation-iteration-count:infinite;}

.a2_title {position:absolute; top:80px; left:50%; margin-left:-305px;}
.a2_bubble {position:absolute; top:200px; left:50%; margin-left:-650px;
		-webkit-animation-name: MotionMove8; 
		-webkit-animation-duration: 3s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove8; 
		animation-duration: 3s; animation-iteration-count:infinite;}
.a2_fire_1 {position:absolute; top:600px; left:50%; margin-left:-660px;}
.a2_fire_2 {position:absolute; top:400px; left:50%; margin-left:-250px;}
.a2_man {position:absolute; top:500px;left:50%; margin-left:-270px;}

.a3_text {position:absolute; top:80px; z-index: 3; left:50%; margin-left:-633px;}
.a3_man {position:absolute; top:500px; z-index: 4; left:50%; margin-left:114px;}
.a3_music1 {position:absolute; top:246px; left:50%; margin-left:548px; z-index: 1;
		-webkit-animation-name: MotionMove2; 
		-webkit-animation-duration: 3s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove2; 
		animation-duration: 3s; animation-iteration-count:infinite;}
.a3_music2 {position:absolute; top:330px; left:50%; margin-left:759px; z-index: 2;
		-webkit-animation-name: MotionMove2; 
		-webkit-animation-duration: 4s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove2; 
		animation-duration: 4s; animation-iteration-count:infinite;}

.a4_title {position:absolute; top:80px;  left:50%; margin-left:-300px; }
.a4_man {position:absolute; top:279px;  left:50%; margin-left:82px; }
.a4_no {position:absolute; top:524px;  left:50%; margin-left:-109px; 
		-webkit-animation-name: MotionMove4; 
		-webkit-animation-duration: 0.5s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove4; 
		animation-duration: 0.5s; animation-iteration-count:infinite;}
.a4_wow {position:absolute; top:200px; left:50%; margin-left:500px;  }

.a5_title1 {position:absolute; top:80px; left:50%; margin-left:-670px; z-index: 1;}
.a5_title2 {position:absolute; top:80px; left:50%; margin-left:305px; z-index: 1;}
.a5_man {position:absolute; top:715px; left:50%; margin-left:-930px; z-index: 1; }
.a5_no {position:absolute; top:460px; left:50%; margin-left:375px; z-index: 1; 
		-webkit-animation-name: MotionMove4; 
		-webkit-animation-duration: 0.5s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove4; 
		animation-duration: 0.5s; animation-iteration-count:infinite;}
.a5_word {position:absolute; top:454px; left:50%; margin-left:-325px; z-index: 1;
		-webkit-animation-name: MotionMove9; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove9; 
		animation-duration: 1s; animation-iteration-count:infinite;}


.a6_title1 {position:absolute; top:40px;left:50%; margin-left:-620px;}
.a6_title2 {position:absolute; top:80px; left:50%; margin-left:280px;}
.a6_circle1 {position:absolute; top:380px; left:50%; margin-left:-680px;
		-webkit-animation-name: MotionMove10; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove10; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_circle2 {position:absolute; top:380px; left:50%; margin-left:-300px;
		-webkit-animation-name: MotionMove10; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove10; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_circle3 {position:absolute; top:480px; left:50%; margin-left:-720px;
		-webkit-animation-name: MotionMove10; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove10; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_circle4 {position:absolute; top:490px; left:50%; margin-left:-249px;
		-webkit-animation-name: MotionMove10; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove10; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_man1 {position:absolute; top:280px;  left:50%; margin-left:-910px;}
.a6_man2 {position:absolute; top:270px; left:50%; margin-left:150px;}
.a6_light1 {position:absolute; top:299px; left:50%; margin-left:320px;
		-webkit-animation-name: MotionMove4; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove4; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_light2 {position:absolute; top:499px; left:50%; margin-left:369px;
		-webkit-animation-name: MotionMove11; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove11; 
		animation-duration: 1s; animation-iteration-count:infinite;}
.a6_light3 {position:absolute; top:360px; left:50%; margin-left:590px;
		-webkit-animation-name: MotionMove4; 
		-webkit-animation-duration: 2s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove4; 
		animation-duration: 2s; animation-iteration-count:infinite;}


.a7_title {position:absolute; top:80px; left:50%; margin-left:-430px;}
.a7_man {position:absolute; top:280px; left:50%; margin-left:200px;}
.a7_i7 {position:absolute; top:290px; left:50%; margin-left:-660px;}
.a7_i5 {position:absolute; top:290px; left:50%; margin-left:-162px;}
.a7_light {position:absolute; top:381px; left:50%; margin-left:590px;}

.a8_title {position:absolute; top:60px; left:50%; margin-left:-560px;}
.a8_man {position:absolute; top:200px; left:50%; margin-left:370px; }
.a8_icon1 {position:absolute; top:240px; left:50%; margin-left:-700px; }
.a8_icon2 {position:absolute; top:240px; left:50%; margin-left:-408px; }
.a8_icon3 {position:absolute; top:240px; left:50%; margin-left:-111px; }
.a8_icon4 {position:absolute; top:240px; left:50%; margin-left:-75px; }
.a8_icon5 {position:absolute; top:588px; left:50%; margin-left:-700px; }
.a8_icon6 {position:absolute; top:588px; left:50%; margin-left:-408px; }
.a8_icon7 {position:absolute; top:588px; left:50%; margin-left:-111px; }
.a8_icon8 {position:absolute; top:588px; left:50%; margin-left:-75px;  }

.a9_title {position:absolute; top:50px; left:50%; margin-left:-586px;}
.a9_cpu {position:absolute; top:200px; left:50%; margin-left:-820px; }
.a9_system {position:absolute; top:200px; left:50%; margin-left:70px; }

.a10_title {position:absolute; top:50px; left:50%; margin-left:-586px;}
.a10_cpu {position:absolute; top:200px; left:50%; margin-left:-820px; }
.a10_system {position:absolute; top:200px; left:50%; margin-left:70px;}

.a11_title {position:absolute; top:50px; left:50%; margin-left:-586px;}
.a11_cpu {position:absolute; top:200px; left:50%; margin-left:-820px; }
.a11_system {position:absolute; top:200px; left:50%; margin-left:70px;}

.a12_title {position:absolute; top:80px; left:50%; margin-left:-580px; z-index: 1;}
.a12_mainboard1 {position:absolute; top:220px; left:50%; margin-left:-830px;  z-index: 2;}
.a12_mainboard2 {position:absolute; top:220px; left:50%; margin-left:91px;  z-index: 3;}

.a13_title {position:absolute; top:80px; left:50%; margin-left:-580px;  z-index: 1;}
.a13_mainboard1 {position:absolute; top:220px; left:50%; margin-left:-830px; z-index: 2;}
.a13_mainboard2 {position:absolute; top:220px; left:50%; margin-left:91px; z-index: 3;}

.a14_title1 {position:absolute; top:50px; left:50%; margin-left:-690px;}
.a14_title2 {position:absolute; top:70px; left:50%; margin-left:282px;}
.a14_man1 {position:absolute; top:200px; left:50%; margin-left:-950px;}
.a14_man2 {position:absolute; top:200px; left:50%; margin-left:161px;}

.a15_title1 {position:absolute; top:190px;  left:50%; margin-left:-389px;}
.a15_title2 {position:absolute; top:250px; left:50%; margin-left:-467px;}
.a15_computer {position:absolute; top:400px; left:50%; margin-left:-565px;}
.a15_cpu {position:absolute; top:300px;  left:50%; margin-left:-227px;
		-webkit-animation-name: MotionMove1; 
		-webkit-animation-duration: 1s; 
		-webkit-animation-direction: alternate; 
		animation-name: MotionMove1; 
		animation-duration: 1s; animation-iteration-count:infinite;}