@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap&subset=korean');

body { margin:0; padding:0;}
ul{list-style:none;}
ul li{list-style:none;}

/**********************  top  ********************/

.top{
	position:absolute;
	vertical-align: middle;
	width:1000px;
	height:50px;
	background-image:url('../images/top.png');
}

.top_week_num{
	position : relative;
	top:10px;
	left:30px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:20px;
	font-weight:500;
	color:#ccffff;
	float:left;
}

.top_week{
	position:relative;
	top:10px;
	left:50px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:20px;
	font-weight:400;
	color:#ffffff;
	float:left;
}

.top_subject{
	position:absolute;
	top:10px;
	right:20px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:20px;
	font-weight:500;
	text-align:right;
	color:#ffffff;
}

/*********************  top_end *******************/


.index_box{
	position:absolute;
	top:100px;
	left:-186px;
	border:3px solid #1d1f25;
	background:#393d49;font-family: 'Noto Sans KR', sans-serif;
	font-size:16px;
	font-weight:400;
	color:#ffffff;
	line-height:250%;
}


.index_btn{
	position:absolute;
	top:20px;
	left:183px;
	width:38px;
	height:106px;
	background-image:url('../images/index_btn.png');
	cursor:pointer;
}

.index_list_box_top{
	padding-left:10px;
	width:170px;
	height:40px;
	color:#97a5b2;
	border-bottom:1px solid #1d1f25;
	cursor:pointer;
}

.index_list_box{
	padding-left:10px;
	width:170px;
	height:40px;
	border-bottom:1px solid #1d1f25;
	cursor:pointer;
}

.index_list_box:hover{
	color:#03bbef;
	width:168px;
	border:1px solid #03bbef;
	cursor:pointer;
}


/*********************  �����,���� *******************/


.subject {
position : relative;
top:250px;
width:800px;
margin:auto;
font-size:50px;
color:#0099cc;
font-family: 'Noto Sans KR', sans-serif;
font-weight:700;
vertical-align: middle;
text-align:center;
text-shadow: 1px 1px 3px #777777;
	-webkit-animation: zoomInDown 0.8s both;
	        animation: zoomInDown 0.8s both;
			animation-delay: 1s;
	-webkit-animation-delay: 1s;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+20,ffffff+50,ffffff+80,ffffff+100&0+0,0.9+20,0.9+50,0.9+80,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 10%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 10%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 10%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}


.week {
position : relative;
top:250px;
width:800px;
margin:auto;
font-size:30px;
color:#ffffff;
font-family: 'Noto Sans KR', sans-serif; 
font-weight:700;
vertical-align: middle;
text-align:center;
text-shadow: 1px 1px 3px #777777;




	-webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
			animation-delay: 2s;
	-webkit-animation-delay: 2s;

background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,0.0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 10%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.7) 90%,rgba(0,0,0,0.0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 10%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.7) 90%,rgba(0,0,0,0.0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 10%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.7) 90%,rgba(0,0,0,0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}

/*********************  �����,����_end *******************/

/*********************  Ŀ��ŧ��  ********************/

.ca{
position : relative;top:100px;left:130px;overflow-x: hidden;overflow-y: auto;width: 700px;height: 470px;
background-color:#ffffff;border-radius:10px;border:20px solid #ffffff;
-webkit-animation: zoomInDown 0.8s both;
	        animation: zoomInDown 0.8s both;

			animation-delay: 1s;
	-webkit-animation-delay: 1s;
}


.ca ul{
	padding-left:0px;
	padding-right:0px;
	padding-top:8px;
	padding-bottom:8px;
	margin-top:0px;
	margin-bottom:2px;
	width:700px;
	background:#e0e9f1;
	color:#317bba;

	-webkit-animation: opacity_play 0.8s both;
	        animation: opacity_play 0.8s both;
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}

.ca ul li:nth-child(1) {
	width:100px;
	text-align:center;
	font-family: Noto Sans KR, sans-serif;
	font-weight:400;
	font-size:14px;
	float:left;

	-webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	-webkit-animation-delay: 3s;
			animation-delay: 3s;
	
}

.ca ul li:nth-child(2) {
	width:600px;
	color:#222222;
	font-family: Noto Sans KR, sans-serif;
	font-weight:400;
	font-size:14px;

	-webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	-webkit-animation-delay: 3s;
			animation-delay: 3s;
	
}

/*********************  Ŀ��ŧ��_end ****************/




/********************  �н���ǥ  *********************/



.hag_center{
	position:relative;
	top:50px;
	left:50px;
	width:730px;
	height:205px;
	overflow-x:hidden;
	overflow-y:auto;
}

.hag_list:nth-child(1){
	position:relative;
	top:90px;
	left:60px;
	width:902px;
	height:282px;
	background-image:url('../images/memo_01.png');
	
	
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

.hag_list:nth-child(2){
	position:relative;
	top:90px;
	left:60px;
	width:902px;
	height:282px;
	background-image:url('../images/memo_02.png');	

	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}

.hag_list ul{
	position:relative;

	display:table-cell;
	vertical-align:middle;
	width:730px;
	height:205px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:16px;
	font-weight:400;
	color:#333333;
}

.hag_list ul li{
	position : relative;
	padding-bottom:5px;width:700;
	}

.hag_list ul li:after{
	position:absolute;
	display:block;
	content:'';
	top:.6em;
	left:-1em;
	width:6px;
	height:6px;
	background-color:#336699;
	border-radius:100%;
}



/********************  �н���ǥ_end ******************/




/********************  ���� ******************/


.quiz_r_main{
	position : absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:650px;
	display:none;

	-webkit-animation: opacity_quiz 2s ease-out both;
	        animation: opacity_quiz 2s ease-out both;
			animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

.quiz_r{
	position : relative;
	top:230px;
	left:342px;
	width:316px;
	height:224px;
	background-image:url('../images/quiz_r.png');
}

.quiz_ye_bg{
	position : absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:650px;
	background:#000000;
	opacity: 0.5;
}

.img_layer{
	position : absolute;
	margin:0 auto;
	display:table;
	width: 1000px;
	height: 650px;
}

.img_layer_inner{
	display:table-cell;
	text-align: center;
	vertical-align: middle;
}

.quiz_ye_img{
	display:inline-block;
}


.quiz_yec_btn{
	position : absolute;
	top:550px;
	left:436px;
	width:128px;
	height:42px;
	background:#0099ff;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font:500 20px Noto Sans KR, sans-serif;
	line-height:190%;
	vertical-align:middle;
	cursor:pointer;
}

.quiz_yec_btn:hover{
	background:#ee0000;
}





.quiz_ye_btn{
	position : relative;
	top:-25px;
	left:0px;
	width:110px;
	height:42px;
	background:#0099ff;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font:500 20px Noto Sans KR, sans-serif;
	line-height:190%;
	cursor:pointer;
	-webkit-animation: colors 1s ease-out infinite;
	        animation: colors 1s ease-out infinite;
}


.quiz_bogi_box{
	padding:10px;
	position : absolute;
	top:290px;
	left:60px;
	width:880px;
	height:310px;
	border:1px solid #eeeeee;
	border-radius:10px;
	background-color:#ffffff;
	overflow-x:hidden;
	overflow-y:auto;	

	

	-webkit-animation: opacity_play 0.8s both;
	        animation: opacity_play 0.8s both;
	-webkit-animation-delay: 1.5s;
			animation-delay: 1.5s;
}

.quiz_b{
	padding:10px;
	margin-top:5px;
	margin-bottom:5px;
	position : relative;
	width:860px;
	color:#555555;
	font:400 16px Noto Sans KR, sans-serif;
	cursor:pointer;


	
}

.quiz_b:hover{
	background-color:#dcf1ff;
}



.quiz_b_num{
	position : absolute;
	width:30px;
	height:30px;
	background:#0099ff;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font:500 20px Noto Sans KR, sans-serif;
	display:table-cell;
	vertical-align:middle;
	cursor:pointer;
	float:left;
}

.quiz_b_text{
	position : relative;
	left:40px;
	width:810px;
	color:#555555;
	font:300 16px Noto Sans KR, sans-serif;
}

/********************  ����_end ******************/




/********************  �����  *********************/

.sumup{
padding:20px;
position : relative;
top:100px;
left:80px;

width: 800px;
height: 470px;
font-family: 'Noto Sans KR', sans-serif;
font-size:16px;
font-weight:300;
color:#333333;
line-height:180%;
background-color:#ffffff;

border:1px solid #0099ff;
border-radius:10px;
outline-style:none;
overflow-x:hidden;
overflow-y:auto;

	-webkit-animation: zoomInDown 0.8s both;
	        animation: zoomInDown 0.8s both;
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
	
}

/********************  �����_end  ****************/

.bgimg{
	position:absolute;
	width:1000px;
	height:650px;
	overflow: hidden;
}


/* ���׶��� */

.bgimg img {
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
}


@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }

  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }

}

/* ���׶��� end */




/* ���׶��� */

.bgimg_basic{
	position:absolute;
	width:1000px;
	height:650px;
	overflow: hidden;
}

.bgimg_basic img {
	-webkit-animation: bg_basic 3s ease-out both;
	        animation: bg_basic 3s ease-out both;
}


@-webkit-keyframes bg_basic {
  0% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    
	-webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
	opacity: 0.3;
  }
}
@keyframes bg_basic {
  
  0% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }

  100% {
	-webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
	opacity: 0.3;
  }

}

/* ���׶��� end */





/* ��� */


@-webkit-keyframes opa {
  0% {
     -webkit-transform: scale(0);
            transform: scale(0);

  }

  

  30%{
	-webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  

  100% {
	-webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes opa {
  
  0% {
     -webkit-transform: scale(0);
            transform: scale(0);

  }


  30%{
	-webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  

  100% {
	-webkit-transform: scale(1);
            transform: scale(1);
  }

}


/* ��� */



/* �� */


@-webkit-keyframes colors {
  0% {
     background:#0099ff;
  }

  30%{
	background:#0055ff;
  }

  100% {
	background:#0099ff;
  }
}
@keyframes colors {
  
  0% {
     background:#0099ff;
  }

  30%{
	background:#0055ff;
  }

  100% {
	background:#0099ff;
  }

}


/* �� */




/* ���� */


@-webkit-keyframes opacity_play {
  0% {
     opacity: 0;
  }

  100% {
	opacity: 1;
  }
}
@keyframes opacity_play {
  
  0% {
     opacity: 0;
  }

  100% {
	opacity: 1;
  }

}


@-webkit-keyframes opacity_play_5 {
  0% {
     opacity: 0;
  }

  100% {
	opacity: 0.5;
  }
}
@keyframes opacity_play_5 {
  
  0% {
     opacity: 0;
  }

  100% {
	opacity: 0.5;
  }

}



/* ���� end */





/* ���� ���� */


@-webkit-keyframes opacity_quiz {
  0% {
     opacity: 0;
  }

  40% {
     opacity: 1;
  }

  60% {
     opacity: 1;
  }

  100% {
	opacity: 0;
  }
}
@keyframes opacity_quiz {
  
  0% {
     opacity: 0;
  }

  40% {
     opacity: 1;
  }

  60% {
     opacity: 1;
  }

  100% {
	opacity: 0;
  }

}


/* ���� ���� end */



@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}









@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}







.animated:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
.animated:active {
	position:relative;
}




.animated {
	position : relative;
	top:300px;
	margin:auto;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:'Noto Sans KR', sans-serif;
	font-size:21px;
	font-weight:bold;
	padding:10px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;

			animation-delay: 3s;
	-webkit-animation-delay: 3s;

	-webkit-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
		 animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03)
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -ms-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9)
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03)
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    -ms-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn
}





.page_subject{
	position : relative;
	width:180px;
	height:50px;
	font-family:'Noto Sans KR', sans-serif;
	font-size:20px;
	font-weight:400;
	line-height:240%;
	text-align:center;
	color:#ffffff;
	float:left;
}


.seeks_tc{
	position:relative;
	top:-9px;
	width:300px;
	height:15px;
	border-radius:5px;
	cursor:pointer;
}

.seeks_bg{
	position:relative;
	top:22px;
	left:40px;
	width:300px;
	height:6px;
	box-shadow:inset 0px 1px 0px 0px #888888;
	background:linear-gradient(to bottom, #555555 5%, #333333 100%);
	background-color:#666666;
	border-radius:5px;
	border:1px solid #666666;
	cursor:pointer;
}


.seeks{
	width:0px;
	height:5px;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:5px;
	cursor:pointer;

}


.seeks_one{
	position:relative;
	top:-5px;
	width:12px;
	height:12px;
	border:2px solid #ffffff;
	border-radius:100%;
	background:#3d94f6;
}


.times{
	position:relative;
	top:16px;
	width:40px;
	font-size:14px;
	color:#ffffff;
	font-family:'Noto Sans KR', sans-serif;
	font-weight:300;
	float:left;
}

.alltimes{
	position:relative;
	top:16px;
	width:60px;
	font-size:14px;
	color:#999999;
	font-family:'Noto Sans KR', sans-serif;
	font-weight:300;
	float:left;
}


.vol_tc{
	position:relative;
	top:-9px;
	width:80px;
	height:15px;
	border-radius:5px;
	cursor:pointer;
}

.sound_seeks_one{
	position:relative;
	left:77px;
	top:-5px;
	width:12px;
	height:12px;
	border:2px solid #ffffff;
	border-radius:100%;
	background:#3d94f6;
}

.sound_seeks{
	width:80px;
	height:6px;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:5px;
	cursor:pointer;
}

.sound_seeks_bg{
	position:relative;
	left:40px;
	top:22px;
	width:80px;
	height:6px;
	box-shadow:inset 0px 1px 0px 0px #888888;
	background:linear-gradient(to bottom, #555555 5%, #333333 100%);
	background-color:#666666;
	border-radius:5px;
	border:1px solid #666666;
	cursor:pointer;
}






 .play_btn {
	position:relative;
	top:11px;
    width:28px;
    height:28px;
	background-image:url('../images/play_btn.png');
	cursor:pointer;
	float:left;
 }

.play_btn:hover {
     background-image:url('../images/play_btn_over.png');
 }


 .stop_btn {
	position:relative;
	top:11px;
    width:28px;
    height:28px;
	background-image:url('../images/stop_btn.png');
	cursor:pointer;
	float:left;
	display:none;
 }

.stop_btn:hover {
     background-image:url('../images/stop_btn_over.png');
 }
  

.pages{
	position:relative;
	top:10px;
	width:80px;
	font-size:20px;
	text-align:center;
	color:#ffffff;
	font-family: Noto Sans KR, sans-serif;
	font-weight:500;
	float:left;
}

 .next_btn {
	position:relative;
	top:15px;
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-left: 17px solid #aaaaaa;
     border-bottom: 10px solid transparent;
	 cursor:pointer;
	 float:left;
 }
 .next_btn:hover {
      border-left: 17px solid #ffffff;
 }


 .prev_btn {
	position:relative;
	top:15px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 17px solid #aaaaaa;
    border-bottom: 10px solid transparent;
	cursor:pointer;
	float:left;
 }

 .prev_btn:hover {
      border-right: 17px solid #ffffff;
 }


.vol_btn {
	position:relative;
	top:16px;
	left:10px;
	width:20px;
	height:20px;
	background-image: url("../images/vol.svg");
	background-repeat:no-repeat;
	float:left;
 }


.fulls {
	position:relative;
	top:15px;
	left:7px;
	width:28px;
	height:28px;
	background-image: url("../images/full_btn.png");
	background-repeat:no-repeat;
	float:left;
	cursor:pointer;
 }

 .fulls:hover {
	background-image: url("../images/full_btn_over.png");
 }


.Rate {
	position:relative;
	top:15px;
	left:14px;
	width:33px;
	height:28px;
	color:#ffffff;
	font-size:18px;
	font-family:'����', sans-serif;
	font-weight:400;
	float:left;
	cursor:pointer;
 }

 .Rate_15 {
	position:relative;
	top:-93px;
	width:33px;
	height:28px;
	color:#ffffff;
	font-size:16px;
	font-family:'����', sans-serif;
	font-weight:400;
	line-height:180%;
	text-align:center;
	background:#000000;
	border:1px solid #444444;
	cursor:pointer;
	display:none;
 }

 .Rate_15:hover {

	background:#2e7ce4;
	
 }

 .Rate_num {
	position:relative;
	top:-31px;
	left:28px;
	width:33px;
	height:28px;
	color:#ffffff;
	font-size:16px;
	font-family:'����', sans-serif;
	font-weight:400;
	line-height:180%;
	text-align:center;
	background:#000000;
	border:1px solid #444444;
	cursor:pointer;
 }



.flip-vertical-right {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;

}

.flip-vertical-right2 {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;

}



@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  80% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  80% {
    -webkit-transform: rotateX(10deg);
            transform: rotateX(10deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  90% {
    -webkit-transform: rotateX(-5deg);
            transform: rotateX(-5deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}





















@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}





.ox_mun_bg{
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 1s;
	-webkit-animation-delay: 1s;
}


.ox_o_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 2s;
	-webkit-animation-delay: 2s;
}

.ox_o_btn img:hover{
	-webkit-animation: jello-vertical 0.8s both;
	        animation: jello-vertical 0.8s both;

			animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

.ox_x_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}

.ox_x_btn img:hover{
	-webkit-animation: jello-vertical 0.8s both;
	        animation: jello-vertical 0.8s both;

			animation-delay: 0s;
	-webkit-animation-delay: 0s;
}


.ox_hesel_bg{
	-webkit-animation: opacity_play_5 0.8s both;
	        animation: opacity_play_5 0.8s both;

			animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

.ox_hesel_box{
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 2s;
	-webkit-animation-delay: 2s;
}


.ox_next_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}


.ox_o_chk{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

.ox_x_chk{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 0s;
	-webkit-animation-delay: 0s;
}


.ox_result_text{
	-webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
			animation-delay: 1s;
	-webkit-animation-delay: 2s;

}



.ox_result_box{
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
			animation-delay: 2s;
	-webkit-animation-delay: 2s;
}



.ox_result_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}

.ox_end_type{
	text-shadow: 1px 1px 3px #777777;
	-webkit-animation: zoomInDown 0.8s both;
	        animation: zoomInDown 0.8s both;
			animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

/***************** �������� *****************/


.ox_box{
	position : absolute;
	width:1000px;
	height:700px;
}

.ox_mun_bg{
	position : relative;
	top:120px;
	left:60px;
	width:900px;
	height:162px;
	background-image:url('../images/ox_q.png');
	background-repeat:no-repeat;
}

.ox_mun{
	position:relative;
	top:25px;
	left:120px;
	width:770px;
	height:130px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:16px;
	font-weight:400;
	color:#333333;
	overflow-x: hidden;
	overflow-y: auto;
}

.ox_o_chk{
	position : absolute;
	top:120px;
	left:40px;
	width:141px;
	height:108px;
	background-image:url('../images/o_chk.png');
	background-repeat:no-repeat;
	display:none;
}

.ox_x_chk{
	position : absolute;
	top:120px;
	left:55px;
	width:141px;
	height:108px;
	background-image:url('../images/x_chk.png');
	background-repeat:no-repeat;
	display:none;
}


.ox_hesel{
	position : absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:650px;
	display:none;
}



.ox_hesel_box ul:nth-child(1){
	padding:10px;
	position:absolute;
	top:80px;
	left:50px;
	width:770px;
}

.ox_hesel_box ul:nth-child(2){
	padding:10px;
	position:absolute;
	top:135px;
	left:50px;
	width:770px;
	height:150px;
}

.ox_hesel_box ul li:nth-child(1){
	width:60px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:18px;
	font-weight:400;
	float:left;
}

.ox_hesel_box ul:nth-child(1) li:nth-child(2){
	width:60px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:22px;
	font-weight:500;
	color:#0099ff;
	float:left;
}

.ox_hesel ul:nth-child(2) li:nth-child(2){
	width:710px;
	height:150px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:16px;
	font-weight:400;
	color:#666666;
	float:left;
	overflow-x:hidden;
	overflow-y:auto;
}

.ox_hesel_bg{
	position : absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:650px;
	background:#000000;
	opacity: 0.5;
}

.ox_hesel_box{
	position:relative;
	top:200px;
	left:60px;
	width:886px;
	height:327px;
	background-image:url('../images/hesel.png');
}


.ox_o_btn{
	position : absolute;
	top:340px;
	left:200px;
	width:231px;
	height:231px;
	cursor:pointer;
}


.ox_x_btn{
	position : absolute;
	top:340px;
	left:550px;
	width:231px;
	height:231px;
	cursor:pointer;
}


/* �ؽ�Ʈ ��ư */
.ox_next_btn{
	position : relative;
	top:220px;
	left:812px;
	width:128px;
	height:42px;
	background:#0099ff;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font:500 20px Noto Sans KR, sans-serif;
	display:table-cell;
	vertical-align:middle;
	cursor:pointer;
}

.ox_next_btn:hover{
	background:#ee0000;
}



.ox_result_text{
	position : relative;
	top:150px;
	width:1000px;
	font:500 38px Noto Sans KR, sans-serif;
	color:#ffffff;
	text-align:center;
}

.ox_result_box{
	margin:0 auto;
	display:table;
}

.ox_result_box_box{
	position : relative;
	top:170px;
}

.ox_result_ox{
	width:150px;
	height:210px;
	border:1px solid #0078c8;
	float:left;
}

.ox_result_ox div:nth-child(1){
	width:150px;
	height:60px;
	text-align:center;
	background:#0099ff;
	color:#ffffff;
	font:500 32px Noto Sans KR, sans-serif;
	line-height:180%;
}

.ox_result_ox div:nth-child(2){
	width:150px;
	height:150px;
	background:#ffffff;
	color:#0099ff;
	font:bold 100px Noto Sans KR, sans-serif;
	text-align:center;
}


.ox_result_btn{
	position : relative;
	top:200px;
	left:436px;
	width:128px;
	height:42px;
	background:#0099ff;
	border-radius:5px;
	text-align:center;
	color:#ffffff;
	font:500 20px Noto Sans KR, sans-serif;
	display:table-cell;
	vertical-align:middle;
	cursor:pointer;
}

.ox_result_btn:hover{
	background:#ee0000;
}

.ox_end_type{
	position:relative;
	top:180px;
	left:400px;
	width:199px;
	height:199px;
	background-image:url('../images/type.png');
	font:700 80px Noto Sans KR, sans-serif;
	color:#aa0000;
	text-align:center;
}





/***************** �������� �� *****************/


.page_btn{
	position : absolute;
	top:570px;
	left:880px;
	width:118px;
	height:84px;
	background-image:url('../images/page_btn.png');
	cursor:pointer;
	display:none;
}

.page_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

			animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}





::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #5a9ddb;
}


/* 250325_위치 수정 */
html {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
body {margin-bottom: 50px; width: 1000px; height: 650px;}
div#controll{
	height: 700px;
	position: absolute;
	width: 1000px;
	top: 50%;
	transform: translateY(calc(-50% + 0px));
	z-index: -1;
}
div#controll > div:has(.page_subject){
    bottom: 0;
		top: unset !important;
}
.page_btn{
	--right: calc(calc(100% - 1000px) / 2);
	bottom: 110px; top: unset !important; left:unset !important;
	right: var(--right);
	background-repeat: no-repeat;
}

.ox_hesel{height: 610px; top: 50%; left: 50%; transform:  translate(-50%, -50%);}
.ox_hesel_bg{height: 605px;}
/* .ox_hesel_box{
	top: 50%; left: 50%; transform: translate(-50%, -50%);
} */
.ox_hesel_box{
	left: 56px;
}

.ox_mun_bg{
	top: 80px;
	left: 50%;
	transform: translate(calc(-50% - 9.5px), 0%) !important;
}
.ox_o_chk{top: 80px; left: 25px;}
.ox_x_chk{top: 68px; left: 50px;}
.quiz_bogi_box{
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 80px));  
	width: 858px;
}
.quiz_r_main{
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	height: 610px;
}
.quiz_ye_bg{height: 605px;}