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


body { margin:0; padding:0; font-family: 'Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif; box-sizing: border-box; overflow: hidden;}
ul{list-style:none;}
ul li{list-style:none;}


/* -------- intro -------- */
.intro_wrap{
	width:1280px;
	height:720px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 1;
	-webkit-animation: expand 5s ease forwards;
	animation: expand 5s ease forwards;
}
.intro{
	width:1280px;
	height:720px;
	overflow: hidden;
	background:#121013;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes expand {
	0% {
		-ms-transform: translateX(0px);
		-webkit-transform: translateX(0px);
	  	transform: translateX(0px);
	}
	20% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
	  	transform: translateX(0px);
	}
	40% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
	  	transform: translateX(0px);
	}
	80% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
	  	transform: translateX(0px);
		/* width: 1000px; */
	}
	100% {
		-webkit-transform: translateX(-1500px);
		-ms-transform: translateX(-1500px);
	  	transform: translateX(-1500px);
		/* width: 0px; */
	}
}

.intro_overlay{
	width:1280px;
	height:720px;
	overflow: hidden;
	background:#121013;
	background: linear-gradient(180deg, rgba(18,16,19,1) 65%, rgba(2,30,33,0.7) 100%);
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
}

.intro_bottom{
	position: absolute;
    width: 1280px;
    height: 232px;
    background: #ffffff;
    bottom: 0;
    left: 0;
    background: url(../images/ox_explanationBg.png) no-repeat center/cover;
}

.intro_bg_box{
	position: relative;
	width: 1280px;
    height: 720px;
    /* overflow: hidden; */
    top: 0;
    left: 0;
	border-radius: 0 0 14px 0;
	/* -webkit-animation: introBgImg 2.3s ease forwards;
	animation: introBgImg 2.3s ease forwards; */
	z-index: 10;

	/* background: url(../images/bg_frame.png) no-repeat center / cover; */
}
@-webkit-keyframes introBgImg {
	0%{
		top: 800px;
		opacity: 0;
	}
	/* 60%{
		opacity: 0;
	} */
	90%{
		top: 26px;
		opacity: 1;
	}
	100%{
		top: 32px;
		opacity: 1;
	}
}
@keyframes introBgImg {
	0%{
		top: 800px;
		opacity: 0;
	}
	/* 60%{
		opacity: 0;
	} */
	90%{
		top: 26px;
		opacity: 1;
	}
	100%{
		top: 32px;
		opacity: 1;
	}
}
.intro_bg_back{
	position: absolute;
	width: 1080px;
    height: 224px;
    overflow: hidden;
    top: 32px;
    left: 0;
    background-color: #ffffff;
	/* ↓↓↓↓ 이미지 위치 수정 (가로, 세로) */
	background-position: center 54%;
    background-repeat: no-repeat;
    background-size: 100%;
    /* border-radius: 0 0 15px 15px; */
	-webkit-animation: introBgImg 2.3s ease forwards;
	animation: introBgImg 2.3s ease forwards;
}
.introBg{
	width: 655px;
    height: 655px;
    top: 243px;
    left: 318px;
    background-color: #00F5FF;
    background-image: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
	border-radius: 50%;
	animation: bg_circle_spin 4.5s linear infinite;
    box-shadow: 0 0 20px #ffffff55;
	position: absolute;
	z-index: 10;
	opacity: 1;

	display: none;
}
.introBg2{
	width: 100px;
    height: 100px;
    top: 94px;
    left: 52px;
    background-color: #fbc2eb;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
	border-radius: 50%;
	animation: bg_circle_spin 4.5s linear infinite;
    box-shadow: 0 0 20px #ffffff55;
	position: absolute;
	z-index: 10;
	opacity: 1;

	display: none;
}


.intro .introText{
	color:#ffffff;
	text-shadow: 0px 2px 4px #121013c5;
	font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
	font-weight:700;
	text-align: left;
	font-size: 74px;
    letter-spacing: 6px;
    line-height: 70px;
    margin-top: 211px;
	margin-left: 168px;
	z-index: 11;
    position: relative;

	-webkit-animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
	animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
	animation-delay: 1s;
	animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
	opacity: 0;
	transform: rotateX(100deg);
	transform-origin: 50% 100%;
}

.intro .introText::before{
	content: '';
    position: absolute;
    top: -19px;
    left: -92px;
    width: 60%;
    height: 90px;
    z-index: -1;
    transform: skewX(-27deg);
    border-radius: 6px;
	background-color: #5800ff45;
	/* background: linear-gradient(to right, rgba(0,245,255,0) 0%, rgba(88,0,255,0.5) 40%,rgba(0,245,255,0.5) 80%, rgba(0,245,255,0) 100%); */
    background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
    /* background-color: #ffffffde; */
    /* animation: list_title_bar 1.3s cubic-bezier(0, 0, 0.03, 0.9) infinite; */
}

.intro_explanation {
    color: #ffffff;
    /* text-align: center; */
    z-index: 11;
    position: relative;
    font-size: 21px;
    line-height: 33px;
    width: 74%;
    margin: 3% auto 0;
	animation-delay: 1s;
	-webkit-animation: intro_explanation 2.3s ease forwards;
	animation: intro_explanation 2.3s ease forwards;
}
.intro_explanation::before {
    content: '';
    /* width: 290px; */
    position: absolute;
    right: -166px;
    background: #0055ff;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%, rgba(88,0,255,0.96) 66%, rgba(0,245,255,0) 100%);
    height: 73px;
    bottom: -311px;
    border-radius: 50px 0 0 50px;
}
@-webkit-keyframes intro_explanation {
	0%{
		margin-top: 80%;
		opacity: 0;
	}
	/* 60%{
		opacity: 0;
	} */
	90%{
		margin-top: 1%;
		opacity: 1;
	}
	100%{
		margin-top: 3%;
		opacity: 1;
	}
}
@keyframes intro_explanation {
	0%{
		margin-top: 80%;
		opacity: 0;
	}
	/* 60%{
		opacity: 0;
	} */
	90%{
		margin-top: 1%;
		opacity: 1;
	}
	100%{
		margin-top: 3%;
		opacity: 1;
	}
}
	.intro_explanation > img{
		width: 282px;
		/* float: left; */
		/* margin-left: -10px; */
		position: absolute;
		right: 0;
		top: 103px;
		/* margin-top: -4%; */
	}
	.intro_explanation > img:nth-child(2){
		right: -9%;
		margin-top: 5%;
		width: 200px;
		animation: pencil 1.4s ease infinite;
	}
	@keyframes pencil {
		0%, 100%{
			right: -12%;
		}
		50%{
			right: -4%;
		}
	}
	.intro_explanation > p{
		/* float: left; */
		position: absolute;
		text-align: left;
		/* margin-left: 2%; */
		left: 3%;
		/* padding-top: 8%; */
		margin-block-start: 0;
		margin-block-end: 0;
	}
		.intro_explanation > p span{
			font-weight: 600;
			color: #00F5FF;
		}
	.intro_explanation > p.quizIntro_start{
		font-size: 48px;
		font-weight: 800;
		color: #0055ff;
		top: 217px;
		letter-spacing: 2px;
		text-shadow: 4px 4px 0px #acdeff;
		-webkit-animation: start_fadeIn 4s linear forwards;
		animation: start_fadeIn 4s linear forwards;
		/* animation-delay: 2s; */
		-webkit-animation: start_btn_ani 2s ease-in-out infinite;
		animation: start_btn_ani 2s ease-in-out infinite;
	}
	@-webkit-keyframes start_fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes start_fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}


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

.top{
	position:absolute;
	vertical-align: middle;
	width:1280px;
	height:50px;
	/* background-image:url('../images/top.png'); */
	background: #00000044;
	border-bottom: 1px solid #ffffff;
	letter-spacing: -1px;
	z-index: 5;
	top: 0;
	left: 0;
}

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

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

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

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


/* ------- list_title  ------- */
.list_title{
	/* text-align: center; */
	text-align: left;
	/* margin-left: 100px; */
    font-size: 26px;
    text-transform: uppercase;
    color: #121013;
    padding-top: 42px;
    font-weight: 400;
    position: relative;
    overflow: hidden;
    width: 1280px;
    line-height: 66px;
    letter-spacing: -1px;
	z-index: 1;
	background-color: #ffffff;
}
.list_title > p{
	margin-left: 100px;
	animation: list_title_move 1s ease ;
}
@keyframes list_title_move {
	0% {
		margin-left: -6%;
		opacity: 0;
	}
	/* 70% {
		margin-left: -10%;
		opacity: 0;
	} */
	100% {
		margin-left: 100px;
		opacity: 1;
	}
}

.list_title > p > span{
	font-size: 56px;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;    
	text-shadow: 1px 2px 3px #ffffff;
}
/* .list_title > p > span:before {
    content: '';
    position: absolute;
    width: 70%;
    height: 42px;
    left: 50%;
    top: 170px;
	transform: translateX(-50%);
    z-index: -1;
    background: rgb(88,0,255);
    background: linear-gradient(90deg, rgba(88,0,255,1) 8%, rgba(116,60,251,1) 50%, rgba(88,0,255,1) 93%);
} */

/* .list_title::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #5800ff;
	animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
} */
/* .list_title::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
	background: #5800ff;
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
} */
@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}
.list_title::after{
	content: '';
	position: absolute;
    background-color: #5800ff;
	background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.6) 50%, rgba(88,0,255,1) 100%);
	width: 38%;
	height: 14%;
    top: 169px;
    left: 0;
    z-index: -1;
	transform: skewX(-26deg);
}
.list_title::before{
	content: '';
    position: absolute;
	top: 199px;
	left: 538px;
    width: 53%;
    height: 2px;
	/* background: #121013;
	background: linear-gradient(90deg, rgba(18,16,19,1) 0%, rgba(255,255,255,0) 100%); */
	background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.6) 50%, rgba(88,0,255,1) 100%);
    background-color: #00F5FF;
    animation: list_title_bar 1.5s cubic-bezier(0, 0, 0.03, 0.9) infinite;
} 
@keyframes list_title_bar {
	0%, 44%, 88.1%, 100% {
		transform-origin: left;
	}
	0%, 100%, 88% {
		transform: scaleX(0);
	}
	44.1%, 88% {
		transform-origin: right;
	}
	33%, 44% {
		transform: scaleX(1);
	}
}



/* ------- index_box  ------- */
.index_box{
	position:absolute;
	/* top:100px; */
	top: 344px;
    transform: translateY(-48%);
	/* left:-186px; */
	left: -200px;
	width: 200px;
	height: 550px;
	transition: 0.3s ease;
	border-radius: 0 20px 20px 0;
	border-bottom:3px solid #1d1f25;
	border-top:3px solid #1d1f25;
	/* background:#393d49; */
	background: #121013;
	/* font-family: 'Noto Sans KR', sans-serif; */
	font-size:16px;
	font-weight:400;
	color:#ffffff;
	z-index: 999;
	/* line-height:250%; */
	/* border: 1px solid #ffffff77; */
	/* border-left: 1px solid transparent; */
}


.index_btn{
	position:absolute;
	/* top:20px; */
	top: 70px;
	/* left:183px; */
	left: 200px;
	width:38px;
	height:106px;
	/* background-image:url('../images/index_btn.png'); */
	cursor:pointer;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 42px;
    letter-spacing: 4px;
	font-weight: 800;
	background-color: #00F5FF;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
	background-size: auto auto;
	background-clip: border-box;
	background-size: 200% auto;
	color: #ffffff;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: textclip 2s linear infinite;
	animation: textclip 2s linear infinite;
}
@-webkit-keyframes textclip {
	to {
		background-position: 200% center;
	}
}
@keyframes textclip {
	to {
		background-position: 200% center;
	}
}
.index_btn::before{
	content: '';
	position:absolute;
	top: 0px;
	left: 0px;
	width:38px;
	height:106px;
	background: #121013;
	border-radius: 0 18px 18px 0;
	z-index: -1;
}


.index_list_box_top{
	/* padding-left:10px; */
	padding: 28px 0 20px 28px;
	/* width:170px; */
	/* height:40px; */
	color:#97a5b2;
	border-bottom:1px solid #1d1f25;
	/* cursor:pointer; */
	font-size: 19px;
    font-weight: 800;
    letter-spacing: 5px;
}


.index_list_box{
	/* padding-left:10px; */
	padding: 19px 0 15px 28px;
    /* width: 200px; */
	/* width:170px; */
	/* height:40px; */
	/* border-bottom:1px solid #1d1f25; */
	cursor:pointer;
	background: transparent;
	transition:all .5s ease;
	color: #97a5b2;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
	position: relative;
	z-index: 1;
}
.index_list_box::after{
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	top: 20px;
    left: 0;
	background-color: #00F5FF;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
	z-index: -1;
	opacity: 0;
	transition:all 0.65s ease;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
	transform: translateX(100px);
	box-shadow: 0px 0px 5px 1px #00F5FF;
}

.index_list_box:hover{
	color:#ffffff;
	-webkit-transform: translateX(10px);
	-ms-transform: translateX(10px);
	transform: translateX(10px);

}
.index_list_box:hover::after{
	opacity: 1;
	-webkit-transform: translateX(8px);
	-ms-transform: translateX(8px);
	transform: translateX(8px);
	/* left: 15px; */
}






/*********************  �����,���� *******************/
/* ------- content_wrap ------- */
.content_wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	/* height: 650px; */
	height: 778px;
	overflow: hidden;
}

.content_wrap .main_txtUP{
	top: 0;
	left: 0;
	position: relative;
	overflow: hidden;
	width: 1280px;
	height: 720px;
}
.main_txtUP::after {
    background: #121013;
	background: linear-gradient(260deg, #12101345 0%, rgba(255,255,255,0) 70%);
    content: '';
    position: absolute;
    width: 96%;
    height: 84%;
    top: 54.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0 0 20px 20px;
	-webkit-animation: main_bgUp 1s ease;
	animation: main_bgUp 1s ease;
}
@-webkit-keyframes main_bg_txtUp {
	0% {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
	}
	70% {
		-webkit-transform: translateY(-3%);
		-ms-transform: translateY(-3%);
		transform: translateY(-3%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		opacity: 1;
	}
}
@keyframes main_bg_txtUp {
	0% {
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
	}
	70% {
		-webkit-transform: translateY(-3%);
		-ms-transform: translateY(-3%);
		transform: translateY(-3%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
		opacity: 1;
	}
}

.content_wrap .small_title{
	position : relative;
	top: 134px;
    width: 1000px;
    margin: auto;
    font-size: 28px;
	color:#ffffff;
	text-align: right;
    font-weight: 500;
	text-shadow: 1px 2px 3px #121013;
	font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
	z-index: 1;
	-webkit-animation: main_bg_txtUp 1.5s ease;
	animation: main_bg_txtUp 1.5s ease;
}

.content_wrap .subject {
	position : relative;
	top: 218px;
    width: 1000px;
    margin: 58px auto 0;
	font-size: 63px;
	color:#ffffff;
	font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
	/* font-family: 'Noto Sans KR', sans-serif; */
	font-weight:700;
	vertical-align: middle;
	text-align: right;
	letter-spacing: 0px;
    line-height: 83px;
	text-shadow: 1px 2px 4px #121013;
	z-index: 1;
	-webkit-animation: main_bg_txtUp 1.5s ease;
	animation: main_bg_txtUp 1.5s ease;
}


.content_wrap .week {
	position : relative;
	top:223px;
	width:1000px;
	margin:auto;
	font-size:28px;
	color:#ffffff;
	font-weight:400;
	vertical-align: middle;
	text-align:right;
	text-shadow: 1px 2px 5px #121013;
	z-index: 1;
	-webkit-animation: main_bg_txtUp 1.5s ease;
	animation: main_bg_txtUp 1.5s ease;

}
.content_wrap .week span.lesson{
	font-size: 22px;
    font-weight: 300;
    z-index: 1;
    position: relative;
    left: -13px;
}
.content_wrap .week span.lesson::after{
	content: '';
	background-color: rgba(88,0,255,1);
    background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.6) 50%, rgba(88,0,255,1) 100%);
    position: absolute;
    width: 148px;
    height: 13px;
    z-index: -1;
    left: -12px;
    top: 13px;
}

.content_wrap .week span.number{
	font-size: 37px;
    font-weight: 500;
    z-index: 1;
    position: relative;
    left: -13px;
}




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

/*------- introductionList_wrap  -------*/
.introductionList_wrap{
	position: relative;
	width: 1280px;
	height: 420px;
	overflow: hidden;
	margin-top: 42px;
}

.introductionList_img {
    position: absolute;
    width: 358px;
    height: 404px;
    overflow: hidden;
    /* border-radius: 20px; */
    left: 8%;
	-webkit-animation: introductionListUp 2s ease;
    animation: introductionListUp 2s ease;
	top: 5px;
}
	.introductionList_img img:nth-child(1){
		width: 100%;
		border-radius: 13px;
	}
	.introductionList_img img:nth-child(2){
		width: 100%;
		object-fit: cover;
		position: absolute;
		left: 0;
	}

.introductionList_box{
	position: relative;
    width: 710px;
    height: 400px;
    left: 505px;
    top: 8px;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 10px;
    box-sizing: border-box;
    /* background-size: cover; */
    /* background: rgba(255, 255, 255, 0.4); */
    /* background-repeat: no-repeat; */
    /* box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.25); */
    /* border: 2px solid rgba(255, 255, 255, 0.2); */
	-webkit-animation: introductionListUp 2s ease;
    animation: introductionListUp 2s ease;
}
@-webkit-keyframes introductionListUp {
	0%{
		top: 180px;
		opacity: 0;
	}
	60%{
		/* top: 80px; */
		opacity: 0;
	}
	100%{
		top: 5px;
		opacity: 1;
	}
}
@keyframes introductionListUp {
	0%{
		top: 180px;
		opacity: 0;
	}
	60%{
		/* top: 80px; */
		opacity: 0;
	}
	100%{
		top: 5px;
		opacity: 1;
	}
}


.ca{
	position : relative;
	top: 15px;
	width: 100%;
	height: 100%;
}


.ca ul.introductionList_ul{
	width: 100%;
    height: 44px;
    position: relative;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    margin-bottom: 12px;
    /* margin-left: 10px; */
}
.ca ul.introductionList_ul:last-child{
	padding-bottom: 5%;
}

.ca ul.introductionList_ul li{
	float: left;
	line-height: 44px;
}

.ca ul.introductionList_ul li.introductionList_number{
	font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
	font-size: 20px;
	color: #ffffff;
	text-shadow: 2px 3px 2px #00000055;
	font-weight: 500;
    width: 18%;
    text-align: center;
	letter-spacing: -1px;
    /* background-color: #5800ff;
    border-radius: 15px 15px 0 15px;
    margin: 0 20px 0 12px;
    -moz-box-shadow: 0 1px 4px #12101355;
    -webkit-box-shadow: 0 1px 4px #12101355; */
    /* box-shadow: 0 1px 4px #12101355; */
}

.ca ul.introductionList_ul li.introductionList_txt{
	width: 68%;
    overflow: hidden;
    font-size: 16px;
    -moz-box-shadow: 0 1px 4px #12101355;
    -webkit-box-shadow: 0 1px 4px #12101355;
    box-shadow: 0 1px 4px #12101355;
    border-radius: 7px;
    padding-left: 20px;
    border-left: 6px solid #00F5FF;
    background-color: #ffffff;
    box-sizing: border-box;
}

.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-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-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_wrap / hag_list / hag_center -------  */
.hag_wrap{
	width:1280px; 
	height:720px; 
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
}

.hag_con1{
	width: 314px;
    height: 720px;
    position: relative;
    left: 0px;
	/* top: 51px; */
	background: #ffffff;
	-webkit-animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
	animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
}
@-webkit-keyframes hag_con1bg {
	from {
		clip-path: polygon(0 0, 150% 0, 150% 0, 0 0);
	}
	to {
		clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
	}
}
@keyframes hag_con1bg {
	from {
		clip-path: polygon(0 0, 150% 0, 150% 0, 0 0);
	}
	to {
		clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
	}
}

.hag_con1 > div:nth-child(1){
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.hag_con1 > div:nth-child(1) > img{
	height: 100%;
    /* margin: auto; */
    /* margin-left: -50%; */
    position: absolute;
    top: 50%;
    left: 50%;
	/* ↓↓↓↓ 이미지 위치 수정 (가로,세로) */
    transform: translate(-20%,-50%);
}

.hag_con1_circle{
	position: absolute;
	border-radius: 50%;/* 
	-webkit-animation: bg_circle_spin 4.5s linear infinite;
	animation: bg_circle_spin 4.5s linear infinite; */
	box-shadow: 0 0 10px #ffffff55;
}
@-webkit-keyframes bg_circle_spin { 
	100% { 
		-webkit-transform: rotate(360deg); 
		transform:rotate(360deg); 
	} 
}
@keyframes bg_circle_spin { 
	100% { 
		-webkit-transform: rotate(360deg); 
		transform:rotate(360deg); 
	} 
}
	.bg_circle1{
		width: 30px;
		height: 100%;
		top: 0;
		left: 314px;
		border-radius: 0;
		background: linear-gradient(to bottom, rgba(88,0,255,1) 0%,rgba(0,245,255,1) 100%);
		background-color: #5800ff;
	}
	.bg_circle7{
		width: 24px;
		height: 24px;
		top: 136px;
		left: 12px;
		background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
		background-color: #fbc2eb;
	}
	.bg_circle2{
		width: 300px;
		height: 300px;
		top: 80px;
		left: 150px;
		background-image: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
		background-color: #00F5FF;
	}
	.bg_circle3{
		width: 100px;
		height: 100px;
		top: 348px;
		left: 55px;
		background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
		background-color: #5ee7df;
	}
	.bg_circle4{
		width: 24px;
		height: 24px;
		top: 419px;
		left: 182px;
		background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);
		background-color: #6a85b6;
	}
	.bg_circle5{
		width: 70px;
		height: 70px;
		top: 537px;
		left: 206px;
		background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);
		background-color: #6a85b6;
	}
	.bg_circle6{
		width: 255px;
		height: 255px;
		top: 542px;
		left: 14px;
		background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
		background-color: #2575fc;
	}

.hag_con2{
	width: 966px;
    height: 670px;
    position: relative;
    /* left: 320px; */
	top: 51px;
}

.hag_title{
	position: absolute;
    font-size: 34px;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
    font-weight: 700;
    color: #ffffff;
    /* top: 170px; */
    left: 20px;
	text-shadow: 0px 2px 4px #12101355;

	-webkit-animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
	animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
	animation-delay: 2.2s;
	animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
	opacity: 0;
	transform: rotateX(120deg);
	transform-origin: 50% 100%;
}
.hag_title::before{
	content: '';
	/* background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.6) 50%, rgba(88,0,255,1) 100%); */
	background: linear-gradient(to right, rgba(88,0,255,1) 0%,rgba(0,245,255,0.5) 50%, rgba(0,245,255,0) 100%);
    width: 366%;
    height: 30px;
    position: absolute;
    z-index: -1;
    transform: skewX(-27deg);
    left: -7px;
    top: 15px;
}

@-webkit-keyframes pop_hag_title {
	to {
		transform: rotateX(0);
	}
}
@keyframes pop_hag_title {
	to {
		transform: rotateX(0);
	}
}

@-webkit-keyframes hag_title_show {
	to {
		opacity: 1;
	}
}
@keyframes hag_title_show {
	to {
		opacity: 1;
	}
}
/* .hag_title2{
	top: 230px;
}
 */
.hag_list{
	position:relative;
	top: 80px;
    left: 20%;
    width: 640px;
	height: 206px;
    padding-bottom: 42px;
	/* border: 3px solid rgba(255, 255, 255, 0.2); */
	/* background: rgba(255, 255, 255, 0.5); */
	background-color: #121013da;
	border-radius: 20px;
	
	-webkit-animation: hag_list1Up 2.2s ease;
    animation: hag_list1Up 2.2s ease;
}
@-webkit-keyframes hag_list1Up {
	0%{
		top: 280px;
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	90%{
		top: 72px;
		opacity: 1;
	}
	100%{
		top: 80px;
		opacity: 1;
	}
}
@keyframes hag_list1Up {
	0%{
		top: 280px;
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	90%{
		top: 72px;
		opacity: 1;
	}
	100%{
		top: 80px;
		opacity: 1;
	}
}

.hag_list2{
	top: 108px;
	-webkit-animation: hag_list2Up 2.2s ease;
    animation: hag_list2Up 2.2s ease;
}
@-webkit-keyframes hag_list2Up {
	0%{
		top: 280px;
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	90%{
		top: 100px;
		opacity: 1;
	}
	100%{
		top: 108px;
		opacity: 1;
	}
}
@keyframes hag_list2Up {
	0%{
		top: 280px;
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	90%{
		top: 100px;
		opacity: 1;
	}
	100%{
		top: 108px;
		opacity: 1;
	}
}

.hag_center{
	position:relative;
	top: 30px;
    left: 31px;
    width: 90%;
    height: 90%;
	overflow-x:hidden;
	overflow-y:auto;
	padding-right: 15px;
}

.hag_list ul{
	position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 400;
	letter-spacing: -1px;
    color: #ffffff;
    top: 80px;
	left: 20px;
	padding-inline-start: 0;
}

.hag_list ul li{
	position : relative;
	padding-bottom: 8px;
	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:1280px;
	height:720px;
	display:none;
	overflow: hidden;

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

.quiz_r{
	position : relative;
	top: 302px;
    left: 472px;
    width: 340px;
    height: 390px;
    display: block;
    background: url(../images/quiz_r.png) no-repeat center/100%;
}

.quiz_ye_bg{
	position: absolute;
    /* top: 51px; */
    bottom: 0;
    left: 0px;
    width: 1280px;
    height: 440px;
    background: #ffffff;
    border-top: 4px solid #86A3B8;
    /* background: linear-gradient(to bottom, black, transparent); */
    /* background: rgb(18,16,19); */
    /* background: linear-gradient(180deg, rgba(18,16,19,1) 0%, rgba(236,236,236,0.7) 100%); */
    opacity: 0.96;
}

.img_layer{
	position : absolute;
	margin:0 auto;
	display:table;
	width: 1280px;
	height: 440px;
	bottom: 0;
}

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

.quiz_ye_img{
	display:inline-block;
}


.quiz_yec_btn{
	position : absolute;
	/* top: 580px; */
    /* left: 436px; */
    bottom: 10%;
    /* right: 4%; */
    right: 14%;
	width:128px;
	height:42px;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
    background-color: #00F5FF;
    background-size: 160% 100%;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border-radius: 40px;
    border: 1px solid #337fed;
	text-align:center;
	color:#ffffff;
	font-size: 21px;
    font-weight: bold;
	line-height:190%;
	vertical-align:middle;
	cursor:pointer;
}

.quiz_yec_btn:hover{
	background-position: 100% 0;
}





.quiz_ye_btn{
	position: relative;
    top: -12px;
    float: right;
    left: 0px;
    width: 110px;
    height: 42px;
    background: #0099ff;
    background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
    background-color: #00F5FF;
    background-size: 160% 100%;
    border-radius: 40px;
    border: 1px solid #337fed;
    text-align: center;
    text-shadow: 0px 1px 0px #1570cd;
    color: #ffffff;
    font-size: 21px;
    font-weight: bold;
    line-height: 196%;
    cursor: pointer;
	-webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	/* -webkit-animation: colors 1s ease-out infinite;
	animation: colors 1s ease-out infinite; */
}
.quiz_ye_btn:hover{
	background-position: 100% 0;
}


.quiz_bogi_box{
	padding:10px;
	position : absolute;
	top: 332px;
    left: 166px;
    width: 922px;
    height: 310px;
	background-color: #121013da;
    border-radius: 20px;
	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: 12px 0;
    margin-top: 5px;
    margin-bottom: 10px;
	position : relative;
	width: 96%;
    margin: 8px auto 10px;
    color: #ffffff;
    font-size: 20px;
	cursor:pointer;
	transition: all 0.5s ease-in;
	background: transparent;
}

.quiz_b:hover{
	background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.5) 50%, rgba(88,0,255,0.6) 100%);
}



.quiz_b_num{
	position : absolute;
	width: 36px;
	height: 36px;
	background: #0055ff;
	border-radius: 50%;
	text-align:center;
	font-size: 24px;
    line-height: 36px;
	display:table-cell;
	vertical-align:middle;
	cursor:pointer;
	float:left;
}

.quiz_b_text{
	position : relative;
	left: 66px;
    line-height: 36px;
}

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




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

.arrange_bgBack{
    position: absolute;
    background: linear-gradient(to bottom, rgba(88,0,255,1) 0%,rgba(0,245,255,1) 100%);
    background-color: #5800ff;
	width: 114px;
    height: 584px;
    left: 0px;
    top: 136px;
}

.arrange_bg{
	position: absolute;
    width: 250px;
    height: 600px;
	/* ↓↓↓↓ 이미지 위치 수정 */
	background-position: 10% center;
	background-repeat: no-repeat;
	background-size: cover;
    top: 87px;
    left: 32px;
	border-radius: 40px 0 40px 0;
}

.arrange_tit{
	position: absolute;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	right: 30px;
    top: 79px;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
}
	.arrange_tit > span{
		color: #00F5FF;
		font-weight: 700;
	}

.sumup{
	position: relative;
	top: 149px;
	left: 315px;
	width: 936px;
	height: 538px;
	color: #ffffff;
    outline-style: none;
    overflow-x: hidden;
    overflow-y: auto;

	-webkit-animation: arrange_ani 0.8s ease;
	animation: arrange_ani 0.8s ease;
}
@-webkit-keyframes arrange_ani {
	0%{
		top: 300px;
		opacity: 0;
	}
	50%{
		top: 100px;
		opacity: 1;
	}
	100%{
		top: 149px;
		opacity: 1;
	}
}
@keyframes arrange_ani {
	0%{
		top: 300px;
		opacity: 0;
	}
	50%{
		top: 100px;
		opacity: 1;
	}
	100%{
		top: 149px;
		opacity: 1;
	}
}

	.sumup_tit{
		position: relative;
		margin-top: 1px;
		padding-left: 20px;
		font-size: 34px;
		font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
		font-weight: 700;
		color: #ffffff;
		text-shadow: 0px 2px 4px #12101355;
		z-index: 1;
	}
	.sumup_tit::before{
		content: '';
		background: linear-gradient(to right, rgba(88,0,255,1) 0%,rgba(0,245,255,0.5) 50%, rgba(0,245,255,0) 100%);
		width: 100%;
		height: 35px;
		position: absolute;
		z-index: -1;
		/* transform: skewX(-27deg); */
		left: -7px;
		top: 13px;
	}

	.sumup_tabs{

	}
		.sumup_input {
			position: absolute;
			opacity: 0;
		}
		.sumup_label{
			font-size: 23px;
			font-weight: 500;
			color: #121013;
			background: #ffffff;
			border-bottom: 3px solid #337fed;
			box-shadow: inset 0px 1px 0px 0px #97c4fe;
			cursor: pointer;
			padding: 8px 54px;
			border-radius: 50px;
			transition: background 0.5s, color 0.5s;
			position: relative;
			top: 456px;
			left: 55%;
			margin-right: 2%;
		}
		.sumup_label:hover {
			background: rgb(159,243,255);
			background: linear-gradient(90deg, rgba(159,243,255,1) 0%, rgba(88,99,255,1) 75%);
			color: #ffffff;
			text-shadow: 0px 1px 0px #1570cd;
		}
		.sumup_label:active {
			background: rgb(87,243,255);
			background: linear-gradient(90deg, rgba(87,243,255,1) 0%, rgba(101,36,255,1) 75%);
			color: #ffffff;
			text-shadow: 0px 1px 0px #1570cd;
		}
		.sumup_input:focus + .sumup_label {
			z-index: 1;
		}
		.sumup_input:checked + .sumup_label {
			background: rgb(0,245,255);
			background: linear-gradient(90deg, rgba(0,245,255,1) 0%, rgba(88,0,255,1) 75%, rgba(71,0,193,1) 100%);
			color: #ffffff;
			text-shadow: 0px 1px 0px #1570cd;
		}

		.sumup_panel {
			display: none;
			padding: 20px 30px 30px;
			background-color: #121013da;
			border-radius: 20px;
			position: absolute;
			top: 86px;
			height: 377px;
			width: 930px;
			box-sizing: border-box;
		}
		.sumup_input:checked + .sumup_label + .sumup_panel {
			display: block;
		}

			.sumup_panel > div{
				animation: panel_fadein .8s;
			}
				.sumup_panel > div p{
					font-size: 23px;
					font-weight: 700;
					color: #00F5FF;
					margin-block-start: 0;
					margin-top: 10px;
				}
					.sumup_panel > div p span{
						margin-right: 10px;
						font-size: 25px;
					}
				.sumup_panel > div ul{
					padding-inline-start: 0px;
					margin-block-start: 0;
					margin-block-end: 0;
					width: 94%;
					height: 266px;
					margin: 30px auto 0;
					overflow-x: hidden;
					overflow-y: auto;
					box-sizing: border-box;
					padding: 0 10px 0 0;
				}
					.sumup_panel > div ul li{
						margin-top: 14px;
						font-size: 18px;
						letter-spacing: -1px;
						line-height: 23px;
						position: relative;
						margin-left: 14px;
					}
					/* .sumup_panel > div ul li > span{
						color: #00F5FF;
						font-size: 20px;
						margin-right: 5px;
					} */
					.sumup_panel > div ul li::after {
						content: '';
						background: #00F5FF;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						position: absolute;
						left: -14px;
						z-index: 10;
						top: 10px;
					}




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

/* ------- bg_wrap ------- */
.bg_wrap{
	position: relative;
	/* width:1000px;
	height:650px; */
	width: 1280px;
	height: 778px;
	overflow: hidden;
	/* background-color: #fbc2eb; */
}
.bg_wrap .bgimg{
	position:absolute;
	width:1280px;
	height:720px;
	overflow: hidden;
	top: 0;
	left: 0;
	background-image: linear-gradient(-225deg, #A076F9 0%, #0055ff 51%, #8BE8E5 100%);
    background-color: #00F5FF;
	background-size: 300% 300%;
	animation: bgimg_gradient 15s ease infinite;
}
@keyframes bgimg_gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.bg_wrap .bgimg img.back_bg_img{
	height: 100%;
	object-fit: cover;
	/* filter: blur(6px) ; */
	-webkit-filter: grayscale(80%);
	filter: grayscale(80%);
	position: absolute;
	top: 0;
	left: 0;
}

.bg_wrap .bgimg .main_bg{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 96%;
	height: 93%;
    border-radius: 18px;
	/* height: auto; */
	overflow: hidden;
	/* opacity: 0; */
	box-shadow: 0 3px 5px 1px #ffffff45;
	-webkit-animation: main_bgUp 1s ease;
	animation: main_bgUp 1s ease;
}
.bg_wrap .bgimg .main_bg img.main_bg_img{
	width: 101%;
	object-fit: cover;
}

.bg_wrap .bgimg .bg_frame{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 97%;
    height: 97%;
	background: url(../images/bg_frame.png) no-repeat center/100%;
	-webkit-animation: main_bgUp 1s ease;
	animation: main_bgUp 1s ease;
}

@-webkit-keyframes main_bgUp {
	0% {
		-webkit-transform: translate(-50%, 120%);
		-ms-transform: translate(-50%, 120%);
	  	transform: translate(-50%, 120%);
	}
	70% {
		-webkit-transform: translate(-50%, -55%);
		-ms-transform: translate(-50%, -55%);
	  	transform: translate(-50%, -55%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}
@keyframes main_bgUp {
	0% {
		-webkit-transform: translate(-50%, 120%);
		-ms-transform: translate(-50%, 120%);
	  	transform: translate(-50%, 120%);
	}
	70% {
		-webkit-transform: translate(-50%, -55%);
		-ms-transform: translate(-50%, -55%);
	  	transform: translate(-50%, -55%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}


/* ���׶��� */

.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 ------- */

.bgimg_basic{
	position:absolute;
	width:1280px;
	height:720px;
	overflow: hidden;
	background-color: #121013;
	/* background: linear-gradient(0deg, rgba(255,255,255,1) 38%, rgba(88,0,255,1) 38%); */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bgimg_basic_test{
	/* background: linear-gradient(80deg, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%); */
	background: linear-gradient(144deg, rgba(18,16,19,1) 5%, rgba(0,245,255,1) 30%, rgba(88,0,255,1) 90%);
    background-color: #00F5FF;
	background-size: 400% 400%;
	animation: bgimg_basic_test 10s ease infinite;
}
@keyframes bgimg_basic_test {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* .bgimg_basic > img{
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
} */

.bgimg_basic > img.hag_background{
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	opacity: 1;
}

.bgimg_basic > .bgimg_Wbox{
	position: relative;
	width: 1280px;
    height: 720px;
    top: 0px;
    left: 0px;
	background-color: #121013;
}
	.bgimg_basic > .bgimg_Wbox > img{
		width: 100%;
		margin: auto;
	}

/* .bgimg_basic{
	position:absolute;
	width:1000px;
	height:650px;
	overflow: hidden;
	background-color: #5800ff;
	background: linear-gradient(-45deg, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
	background-size: 400% 400%;
	-webkit-animation: bgimg_basic_gradient 15s ease infinite;
	animation: bgimg_basic_gradient 15s ease infinite;
} */

@-webkit-keyframes bgimg_basic_gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes bgimg_basic_gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}









/* �� */


@-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;
	}
}




.start_btn{
	position:relative;
	width: 77px;
	z-index: 1;
	-webkit-animation: main_bg_txtUp 1.5s ease;
	animation: main_bg_txtUp 1.5s ease;
}


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




.animated {
	position: absolute;
    top: 255px;
    left: 1008px;
    width: 100%;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	/* background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%); */
	/* background-color:#3d94f6; */
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
	background-color: #00F5FF;
	background-size: 160% 100%;
	-moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	border-radius:40px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:21px;
	font-weight:bold;
	padding: 8px 26px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
	-webkit-animation: start_btn_ani 2s ease-in-out infinite;
	animation: start_btn_ani 2s ease-in-out infinite;
}
@-webkit-keyframes start_btn_ani {
	0%{
		-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
	25%{
		-webkit-transform: rotate(3deg) translate3d(0, 0, 0);
		transform: rotate(3deg) translate3d(0, 0, 0);
	}
	50%{
		-webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
		transform: rotate(-3deg) translate3d(0, 0, 0);
	}
	75%{
		-webkit-transform: rotate(1deg) translate3d(0, 0, 0);
		transform: rotate(1deg) translate3d(0, 0, 0);
	}
	100%{
		-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
}
@keyframes start_btn_ani {
	0%{
		-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
	25%{
		-webkit-transform: rotate(3deg) translate3d(0, 0, 0);
		transform: rotate(3deg) translate3d(0, 0, 0);
	}
	50%{
		-webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
		transform: rotate(-3deg) translate3d(0, 0, 0);
	}
	75%{
		-webkit-transform: rotate(1deg) translate3d(0, 0, 0);
		transform: rotate(1deg) translate3d(0, 0, 0);
	}
	100%{
		-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
}

.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; */
	width:178px;
	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;
}


/* controll */
#controll{
	position: absolute;
    width: 1280px;
    height: 58px;
    top: 720px;
}



/* study_tool 학습도구 */
.study_tool {
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    line-height: 58px;
    padding: 5px 2% 5px 1%;
    box-sizing: border-box;
    text-align: center;
	z-index: 100;
}
	.study_tool_box{
		position: absolute;
		width: 1280px;
		height: 460px;
		background-color: #ffffff;
		bottom: 58px;
		z-index: 90;
		left: 0%;
		/* transform: translateX(-50%); */
		color: #000000;
		text-align: left;
		font-size: 16px;
		line-height: 26px;
		cursor: default;
		transition: 0.5s ease;
		/* opacity: 0; */
		display: none;
	}
		.study_toolX_btn{
			width: 50px;
			height: 50px;
			cursor: pointer;
			float: right;
			margin-top: 31px;
			right: 40px;
			position: relative;

		}
			.study_toolX_btn .leftline{
				height: 4px;
				width: 50px;
				position: absolute;
				margin-top: 24px;
				background-color: #121013;
				border-radius: 2px;
				transform: rotate(45deg);
				transition: all .3s ease-in;
			}
			.study_toolX_btn .rightline{
				height: 4px;
				width: 50px;
				position: absolute;
				margin-top: 24px;
				background-color: #121013;
				border-radius: 2px;
				transform: rotate(-45deg);
				transition: all .3s ease-in;
			}
			.study_toolX_btn:hover .leftline{
				transform: rotate(-45deg);
				background-color: #0055ff;
			}
			.study_toolX_btn:hover .rightline{
				transform: rotate(45deg);
				background-color: #0055ff;
			}

		.tool_input {
			position: absolute;
			opacity: 0;
		}
		.tool_label{
			/* width: 100%; */
			height: 49px;
			padding: 0px 50px;
			line-height: 54px;
			background: linear-gradient(0deg, #f5f7fa 0%, #c3cfe2 100%);
			color: #3C4048;
			border-top: 3px solid #86A3B8;
			letter-spacing: 2px;
			cursor: pointer;
			/* font-weight: bold; */
			font-weight: 700;
			font-size: 24px;
			border-radius: 10px 10px 0 0;
			/* text-shadow: 1px 2px 3px #121013; */
			font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
			top: -11.3%;
			left: 8%;
			position: absolute;
			transition: 0.3s ease-in-out;
		}
		.tool_label2{
			left: 24.6%;
		}
		.tool_label:hover{
			background: linear-gradient(0deg, #f5f7fa 0%, #86A3B8 100%);
			color: #112B3C;
			border-top: 3px solid #3C4048;
		}
		.tool_label:active{
			background: linear-gradient(0deg, #f5f7fa 0%, #7C99AC 100%);
			color: #112B3C;
			border-top: 3px solid #3C4048;
		}
		.tool_input:focus + .tool_label {
			z-index: 1;
		}
		.tool_input:checked + .tool_label {
			background: #ffffff;
			color: #0055ff;
			border-top: 4px solid #0055ff;
			height: 57px;
			line-height: 63px;
			top: -13%;
			font-size: 26px;
			/* padding-bottom: 36px; */
			transition: 0.3s ease-in-out;
		}
		.tool_input:checked + .tool_label + .tool_panel {
			display: block;
		}

		.tool_panel{
			display: none;
			padding: 1%;
			background-color: #ffffff;
			animation: panel_fadein .8s;
			width: 84%;
			height: 80%;
    		overflow: hidden;
			margin: 3% 0 0 96px;
		}
		@keyframes panel_fadein {
			from {
				opacity:0;
			}
			to {
				opacity:1;
			}
		}
			.toolcontent_title {
				font-size: 35px;
				text-shadow: 5px 6px 2px #F1EFEF;
				font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
				font-weight: 700;
				color: #121013;
				margin-bottom: 2%;
			}

			.toolcontent_img {
				width: 20%;
				float: left;
				margin: 10% 2% 0;
			}
			.toolcontent_img2{
				width: 22%;
				margin: 7% 2% 0;
			}
			.toolcontent_img::before{
				content: '';
				width: 190px;
				height: 190px;
				top: 131px;
				left: 184px;
				background-image: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
				background-color: #00F5FF;
				position: absolute;
				border-radius: 50%;
				-webkit-animation: bg_circle_spin 4.5s linear infinite;
				animation: bg_circle_spin 4.5s linear infinite;
				z-index: 9;
				opacity: 0.7;
			}
				.toolcontent_img > img{
					width: 100%;
					z-index: 10;
					position: relative;
				}

			.toolcontent_box{
				position: relative;
				display: block;
				overflow: hidden;
				overflow-y: scroll;
				float: right;
				width: 72%;
				height: 300px;
			}
				.toolcontent_box > ul{
					width: 100%;
					height: 100%;
					padding-inline-start: 0px;
				}
					.toolcontent_box > ul li{
						float: left;
						width: 50%;
						margin-bottom: 10px;
						font-size: 15px;
					}
					.toolcontent_box > ul li.tool_explainLi{
						width: 98%;
						margin-bottom: 18px;
					}
					.toolcontent_box > ul li.toolcontent_down{
						font-size: 20px;
						font-weight: 700;
						color: #0055ff;
					}
						.toolcontent_box > ul li span {
							font-size: 20px;
							padding: 0 10px;
							color: #121013;
							width: 62px;
							border-left: 3px solid #121013;
							font-weight: 700;
						}
						.toolcontent_box > ul li a{
							float: right;
							margin-right: 32px;
						}
							.toolcontent_box img{
								width: 30px;
								height: auto;
							}


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

.seeks_bg{
	position:relative;
	top:-15px;
	/* left:110px; */
	left: 17%;
	/* width:300px; */
	width:266px;
	height:3px;
	/* 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:3px;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	/* background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%); */
	/* background-color:#3d94f6; */
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
	background-color: #00F5FF;
	border-radius:5px;
	cursor:pointer;
	/* border: 1px solid #666666; */
}


.seeks_one{
	position: relative;
    top: -5px;
    width: 10px;
    height: 10px;
    /* border: 2px solid #ffffff; */
    border-radius: 100%;
    background: #00F5FF;
    box-shadow: 0px 0px 12px 3px #00F5FF, 0px 0px 0px 3px #1d1f25, 0px 0px 3px 5px #00F5FF;
}


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

.alltimes {
    position: relative;
    /* top: 17px; */
    /* left: 29px; */
    left: 0.3%;
    /* width: 72px; */
    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:10px;
	height:10px;
	/* border:2px solid #ffffff; */
	border-radius:100%;
    background: #00F5FF;
    box-shadow: 0px 0px 12px 3px #00F5FF, 0px 0px 0px 3px #1d1f25, 0px 0px 3px 5px #00F5FF;
}

.sound_seeks{
	width:80px;
	height:3px;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
	background-color: #00F5FF;
	border-radius:5px;
	cursor:pointer;
}

.sound_seeks_bg{
	position:relative;
	left:26px;
	/* top:23px; */
	width:80px;
	height:3px;
	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_stopBtn_wrap{
	width: 29px;
    height: 29px;
    margin-top: 14px;
	border-radius: 50%;
	display: flex;
    align-items: center;
    justify-content: center;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%);
	background-color: #00F5FF;
	background-size: 160% 100%;
    box-shadow: 0px 0px 4px 0px #00F5FF;
	cursor:pointer;
	-moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.play_stopBtn_wrap:hover{
	background-position: 100% 0%;
}

.play_stopBtn_wrap .play_btn {
	position:relative;
	/* top:14px; */
	width: 20px;
    height: 20px;
	background: url(../images/play_button.png) no-repeat center/100%;
	/* background-image:url('../images/play_button.png'); */
	/* cursor:pointer; */
	float:left;
}



.play_stopBtn_wrap .stop_btn {
	position:relative;
	/* top:11px; */
	/* left: -20px; */
	width: 20px;
    height: 20px;
	background: url(../images/stop_button.png) no-repeat center/100%;
	/* cursor:pointer; */
	float:left;
	display:none;
}


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

.next_btn {
	position:relative;
	top:18px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 17px solid #999999;
	border-bottom: 10px solid transparent;
	cursor:pointer;
	float:left;
	transition: all .4s ease-in-out;
}
.next_btn:hover {
	border-left: 17px solid #00F5FF;
}


.prev_btn {
	position:relative;
	top:18px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 17px solid #999999;
	border-bottom: 10px solid transparent;
	cursor:pointer;
	float:left;
	transition: all .4s ease-in-out;
}

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


.vol_btn {
	position:relative;
	/* top:16px; */
	left:10px;
	width:25px;
	height:25px;
	background: url(../images/vol.png) no-repeat center/100%;
	/* background-image: url("../images/vol.png"); */
	/* background-repeat:no-repeat; */
	float:left;
}


.replay_btn{
	/* width: 4%;
    height: 100%; */
	width: 28px;
	height: 28px;
	background: url(../images/replay_img.png) no-repeat center/100%;
	cursor: pointer;
	margin-left: -4px;
	transition: all 0.5s ease;
}
.replay_btn:hover{
	background: url(../images/replay_hoverimg.png) no-repeat center/100%;
}


.fulls {
	position:relative;
	top:18px;
	/* left:7px; */
	left: 4px;
	width:28px;
	height:28px;
	background-image: url("../images/full_btn.png");
	background-repeat:no-repeat;
	float:left;
	cursor:pointer;
	transition: all 0.5s ease;
}

.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: -116px;
    left: 5px;
    padding: 2px;
	width: 32px;
    height: 32px;
	color:#ffffff;
	font-size:17px;
	/* font-family:'����', sans-serif; */
	font-weight:400;
	line-height:32px;
	text-align:center;
	background:#000000;
	border:1px solid #444444;
	cursor:pointer;
	display:none;
	transition: all 0.5s ease;
 }

 .Rate_15:hover {
	color: #121013;
	background: #00F5FF;
	
 }

 .Rate_num {
	position:relative;
	top: -33px;
    left: 33px;
	padding: 2px;
    width: 32px;
    height: 32px;
	color:#ffffff;
	font-size:18px;
	/* font-family:'����', sans-serif; */
	font-weight:400;
	line-height:32px;
	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_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_next_btn{
	-webkit-animation: opa 0.8s both;
	        animation: opa 0.8s both;

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



.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 �������� *****************/


.ox_box{
	position : absolute;
	width:1280px;
	/* height:700px; */
	height:720px;
	box-sizing: border-box;
	overflow: hidden;
	top: 0;
	left: 0;
	-webkit-animation: ox_box_ani 1.5s ease;
	animation: ox_box_ani 1.5s ease;
	animation-delay: 3.5s;
	/* opacity: 0; */
}
@keyframes ox_box_ani {
	0%{
		top: 550px;
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	80%{
		top: -15px;
		opacity: 1;
	}
	90%{
		top: 5px;
		opacity: 1;
	}
	100%{
		top: 0;
		opacity: 1;
	}
}

.ox_box .ox_box_background{
	width:1108px;
	height:auto;
	/* height:720px; */
	position: absolute;
}

.ox_mun_bg{
	position : relative;
	top: 162px;
    /* left: 154px; */
    width: 75%;
    height: 162px;
	margin: auto;
}
.ox_mun_bg::before{
	content: '';
    position: absolute;
    width: 228px;
    height: 94px;
    background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.5) 50%, rgba(88,0,255,1) 100%);
    left: -100px;
    top: 7px;
    border-radius: 0 70px 70px 0;

}

.quiz_txt{
	position: absolute;
    top: -4px;
	font-size: 94px;
    /* font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif; */
    font-weight: 700;
    color: #ffffff;
	text-transform: uppercase;
	text-shadow: 0px 0px 6px #D8D9DA, 8px 0px 0 #445069, 9px 0px 4px #000000;
}

.ox_mun{    
	position: relative;
	top: 16px;
	left: 14%;
    padding: 0 3%;
    width: 82%;
    height: 140px;
    font-size: 23px;
    line-height: 36px;
    letter-spacing: -1px;
    font-weight: 500;
    color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
}

.ox_o_chk{
	position : absolute;
	top: 135px;
    left: 112px;
	width:141px;
	height:141px;
	background-image:url('../images/o_chk_img.png');
	background-repeat:no-repeat;
	background-size: 100%;
	display:none;
}

.ox_x_chk{
	position : absolute;
	top: 118px;
    left: 108px;
    width: 133px;
    height: 133px;
	background-image:url('../images/x_chk_img.png');
	background-repeat:no-repeat;
	background-size: 100%;
	display:none;
}

/* ox_hesel 해설 */
.ox_hesel{
	position : absolute;
	top:0px;
	left:0px;
	width:1280px;
	height:720px;
	overflow: hidden;
	display:none;
}

.ox_hesel_bg{
	position : absolute;
	top:0px;
	left:0px;
	width:1280px;
	height:720px;
	overflow: hidden;
	/* background:#121013; */
	opacity: 0.5;
}

.ox_hesel_box{
	position:relative;
	top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
	overflow: hidden;
    /* background: url(../images/bg_frame.png) no-repeat center/ cover; */
	-webkit-animation: ox_hesel_box_ani 2s ease;
    animation: ox_hesel_box_ani 2s ease;
}
@-webkit-keyframes ox_hesel_box_ani {
	0%{
		top: -40%;
		opacity: 0;
	}
	60%{
		top: 60%;
		opacity: 0;
	}
	90%{
		/* top: -100px; */
		opacity: 1;
	}
	100%{
		top: 0px;
		opacity: 1;
	}
}
@keyframes ox_hesel_box_ani {
	0%{
		top: -40%;
		opacity: 0;
	}
	60%{
		top: 60%;
		opacity: 0;
	}
	90%{
		/* top: -100px; */
		opacity: 1;
	}
	100%{
		top: 0px;
		opacity: 1;
	}
}

.ox_hesel_box .ox_explanation{
	width: 1280px;
    height: 440px;
    background-color: #ffffff;
	background: url(../images/ox_explanationBg.png) no-repeat center/ cover;
	border-top: 5px solid #86A3B8;
    /* border-radius: 0 0 16px 16px; */
    position: absolute;
    bottom: 0;
    left: 0;
}
.ox_hesel_box .ox_explanation .ox_explanation_title{
	font-size: 32px;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
    font-weight: 700;
	top: 62px;
    position: relative;
    text-align: center;
	color: #ffffff;
	text-shadow: 0px 2px 4px #12101355;
    letter-spacing: 14px;
    -webkit-animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
    animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
    animation-delay: 2.2s;
    animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
    opacity: 0;
    transform: rotateX(120deg);
    transform-origin: 50% 100%;
}
.ox_hesel_box .ox_explanation .ox_explanation_title::after{
	content: '';
    position: absolute;
    width: 610px;
    height: 57px;
	background-color: #00F5FF;
    background: linear-gradient(90deg, rgba(238,238,238,0) 0%, rgba(0,245,255,1) 19%, rgba(88,0,255,1) 81%, rgba(238,238,238,0) 100%);
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    z-index: -1;
}

.ox_hesel_box ul{
	position: relative;
    top: 136px;
    /* left: 52px; */
    margin: auto;
    width: 1000px;
    height: 60px;
    padding: 0 10px;
}
.ox_hesel_box ul.ox_explanation_con2{
	top: 168px;
	height: 130px;
}

.ox_hesel_box ul li{
	float: left;
}
.ox_hesel_box ul li:nth-child(1){
	width:60px;
	font-size: 20px;
	font-weight: 600;
	margin-right: 26px;
	color: #121013;
}

.ox_hesel_box ul li#ox_hesel_box_ox{
	margin-top: -18px;
    font-size: 60px;
	font-weight: 700;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
	background: linear-gradient(90deg, rgba(0,245,255,1) 0%, rgba(88,0,255,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.ox_hesel ul.ox_explanation_con2 #ox_hesel_box_text{
	float: left;
	width: 84%;
    height: 130px;
    padding-right: 18px;
    line-height: 27px;
    font-size: 18px;
    font-weight: 400;
	overflow-x:hidden;
	overflow-y: auto;
}

/* og_btnBg_box */
.og_btnBg_box, .quizBg_frameBox{
	position: absolute;
    width: 1167px;
    height: 637px;
    background-repeat: no-repeat;
    background-size: cover;
    top: 66px;
    left: 55px;
    /* opacity: 0.7; */
    /* -webkit-filter: blur(1px);
    filter: blur(1px); */
    overflow: hidden;   
	-webkit-animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
    animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
	animation-delay: 4s;
}
.og_btnBg_box .ox_btn_bg{
	width: 100%;
	height: 100%;
	/* background-color: #ffffff45; */
}

/* ox_o_btn, ox_x_btn ox버튼 */
.ox_o_btn{
	position : absolute;
	top: 400px;
    left: 334px;
	width:210px;
	height:210px;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
    background-color: #00F5FF;
    background-size: 160% 100%;
	-webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	border: 1px solid #337fed;
	box-shadow: 2px 4px 4px #00000055, inset 0px 1px 0px 0px #97c4fe;
}

.ox_x_btn{
	position : absolute;
	top: 400px;
    left: 740px;
	width:210px;
	height:210px;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-image: linear-gradient(to right, #ff758c 0%, #ff0844 100%);
    background-color: #ff758c;
    background-size: 160% 100%;
	-webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	border: 1px solid #F266AB;
	box-shadow:  2px 4px 4px #00000055, inset 0px 1px 0px 0px #FFCCCC;
}

.ox_o_btn:hover, .ox_x_btn:hover{
	background-position: 100% 0;
	-webkit-animation: ox_o_btn_hover 0.8s ease infinite;
	animation: ox_o_btn_hover 0.8s ease infinite;
}
@-webkit-keyframes ox_o_btn_hover {
	30%{-webkit-transform: scale(1.03); transform: scale(1.03);}
}
@keyframes ox_o_btn_hover {
	30%{transform: scale(1.03);}
}

.ox_o_btn > img{
	width: 80%;
	height: auto;
	filter: drop-shadow(2px 4px 4px #00000042); 
    transition: all .4s ease-in-out;
}
.ox_x_btn > img{
	width: 70%;
	height: auto;
	filter: drop-shadow(2px 4px 4px #00000042); 
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.ox_o_btn:hover > img, .ox_x_btn:hover > img{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}


/* �ؽ�Ʈ ��ư */
.ox_next_btn{
	position: absolute;
    top: 654px;
    left: 74.5%;
    width: 128px;
    height: 42px;
    background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
    background-color: #00F5FF;
    background-size: 160% 100%;
    border-radius: 40px;
    border: 1px solid #337fed;
    text-shadow: 0px 1px 0px #1570cd;
    text-align: center;
    line-height: 42px;
    font-size: 21px;
    font-weight: bold;
    color: #ffffff;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.ox_next_btn:hover{
	background-position: 100% 0;
}



.ox_result_text{
	position: relative;
    top: 338px;
    width: 1280px;
    margin: auto;
    color: #ffffff;
    text-shadow: 0px 2px 4px #12101355;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
}
.ox_result_text::after{
	content: '';
    position: absolute;
    width: 793px;
    height: 57px;
    background-color: #00F5FF;
    background: linear-gradient(90deg, rgba(238,238,238,0) 0%, rgba(0,245,255,1) 19%, rgba(88,0,255,1) 81%, rgba(238,238,238,0) 100%);
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    z-index: -1;
}

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

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

.ox_result_ox{
	margin: 14px auto 0;
	width: 800px;
	height: 150px;
	float: left;
}

.ox_result_ox div:nth-child(1){
	/* width: 150px; */
    position: relative;
    width: 192px;
    height: 70%;
	margin-top: 28px;
    text-align: center;
    color: #ffffff;
    font-size: 60px;
    line-height: 113px;
    font-weight: 700;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
    background: #0099ff;
    background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.5) 50%, rgba(88,0,255,1) 100%);
    float: left;
    border-radius: 0 70px 70px 0;
    padding-right: 12px;
	text-shadow: 0px 2px 2px #12101355;
}

.ox_result_ox div:nth-child(2){
	height: 100%;
    color: #121013;
    text-align: center;
    float: left;
    margin-left: 167px;
    line-height: 164px;
    font-size: 124px;
    font-weight: 700;
}


.ox_result_btn{
	position : relative;
	top: 404px;
	left: 592px;
	width:128px;
	height:42px;
	background: linear-gradient(to right, rgba(0,245,255,1) 0%,rgba(88,0,255,1) 100%, rgba(0,245,255,1) 0%);
    background-color: #00F5FF;
    background-size: 160% 100%;
	border-radius:5px;
	text-align:center;
	color: #ffffff;
    font-size: 21px;
    font-weight: bold;
	display:table-cell;
	vertical-align:middle;
	cursor:pointer;
	border-radius: 40px;
    border: 1px solid #337fed;
}

.ox_result_btn:hover{
	background-position: 100% 0;
}

.ox_end_type{
	position: relative;
    top: 380px;
    left: 516px;
    width: 273px;
    height: 200px;
    background: url(../images/type.png) no-repeat center/100%;
    color: #fc2947;
    text-align: center;
    font-size: 116px;
    font-weight: 700;
}



/********* Outro *********/
.outro_bgimg{
	position: relative;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    top: 0px;
    left: 0px;
    background-color: #121013;
}
	.outro_bgimg > img{
		width: 100%;
		margin: auto;
	}

.outro_frame{
	position: absolute;
    width: 1167px;
    height: 637px;
	background-image: url(../images/bg_frame.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: 66px;
    left: 55px;
    /* opacity: 0.7; */
    overflow: hidden;
    -webkit-animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
    animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
}
.outro_subject{
	position: absolute;
    width: 83%;
    height: auto;
    top: 128px;
    left: 120px;
    color: #ffffff;
    font-size: 28px;
}
.outro_week{
	position: absolute;
    width: 83%;
    height: auto;
    top: 196px;
    left: 120px;
    color: #ffffff;
    font-size: 28px;
    font-size: 56px;
    color: #ffffff;
    font-family: 'GmarketSans','Pretendard','Noto Sans KR','맑은 고딕','AppleSDGothcNeo','AppleGothic', sans-serif;
    font-weight: 700;
    text-shadow: 1px 2px 3px #121013;
}
.outro_week::before{
	content: '';
	background-color: #5800ff;
    background: linear-gradient(to right, rgba(0,245,255,0) 0%,rgba(0,245,255,0.5) 50%, rgba(88,0,255,0.7) 100%);
    width: 796px;
    height: 55px;
    position: absolute;
    z-index: -1;
    transform: skewX(-24deg);
    top: 22px;
    left: -60px;
}
.outro_subject, .outro_week{
	-webkit-animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
	animation: hag_title_show 1s forwards, pop_hag_title 3.5s forwards;
    animation-delay: 1.2s;
    animation-timing-function: cubic-bezier(0.14, 1.23, 0.33, 1.16);
    opacity: 0;
	transform: rotateX(120deg);
    transform-origin: 50% 100%;
}

.outro_bg{
	position: absolute;
    width: 936px;
    height: 269px;
    right: 0;
    top: 419px;
    overflow: hidden;
}
	.outro_bg > img{
		width: 100%;
		position: absolute;
		/* object-fit: cover; */
		/* ↓↓↓↓ 이미지 위치 수정 */
		left: 0;
		top: -60%;
	}
.outro_gradient{
	position: absolute;
	width: 733px;
    height: 100px;
    background-image: linear-gradient(-225deg, #A076F9 0%, #0055ff 51%, #8BE8E5 100%);
    background-color: #00F5FF;
    background-size: 300% 300%;
    animation: bgimg_gradient 10s ease infinite;
    top: 620px;
    right: 0;
}
.outro_bg, .outro_gradient{
    -webkit-animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
    animation: hag_con1bg 1s cubic-bezier(0.5, 0, 0.1, 1) 0.4s backwards;
}
.outro_gradient::after {
    content: '';
    position: absolute;
    width: 245px;
    height: 36px;
    background-image: linear-gradient(-225deg, #A076F9 0%, #0055ff 51%, #8BE8E5 100%);
    background-color: #00F5FF;
    background-size: 300% 300%;
    animation: bgimg_gradient 10s ease infinite;
    z-index: 2;
    top: -174px;
    left: -302px;
}






/***************** �������� �� *****************/
/* page_btn 다음페이지 */

.page_btn{
	position : absolute;
	top: 582px;
    left: 1118px;
    width: 140px;
    height: 107px;
	cursor:pointer;
	background: url(../images/page_btn_img.png) no-repeat center / cover;
	color: #121013;
	/* text-shadow: 0px 2px 4px #12101355; */
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -1px;
    text-align: center;
    line-height: 97px;
	-webkit-animation: page_btn_ani 2.2s ease-in-out infinite, page_btn_ani2 1s ease;
	animation: page_btn_ani 2.2s ease-in-out infinite, page_btn_ani2 1s ease;
    -webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
	transform: scale(0);

	display:none;
}
@-webkit-keyframes page_btn_ani {
	0%{
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
	50%{
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	100%{
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}
@keyframes page_btn_ani {
	0%{
		transform: translateY(10px);
	}
	50%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(10px);
	}
}
@-webkit-keyframes page_btn_ani2 {
	0%{
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	100%{
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes page_btn_ani2 {
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}




/* scrollbar 스크롤바 */
::-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: #0055ff;
}