body{width:1000px; height:600px;  font-family: 'NanumSquareRound'; color: #1F293E ; overflow-y: hidden; position: relative; background-color:white; box-shadow: 3px 3px 10px rgba(0,0,0,15%);}
.wrap{width:100%; height:100%; }
body .wrap > .inner{height: 100%;}

/* 01 */
/*.start_page{background: url('../images/01_bg.png') no-repeat; position: relative; }*/
.start_page{background: url('../../file/img/01_bg.png') no-repeat; position: relative; }

.start_page .wrap{position: relative;}
.start_page .inner{width:100%; overflow:hidden; text-align: center;  }
.start_page .inner .title{width:670px; overflow:hidden; text-align: center; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,30%); vertical-align: middle; box-sizing: border-box; 
  padding: 10px; margin:  9% auto 30px; color: #005045;}
.start_page .inner .title h2{ font-family: 'Nanum Pen Script', cursive; font-size: 58px; font-weight:normal; line-height: 1.3;   overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.start_page .inner .stepTit{ width: 420px; margin: 0 auto; overflow: hidden;}
.start_page .inner .stepTit h3{font-size: 40px; color: #fff; font-family: 'Nanum Pen Script', cursive;  font-weight:normal;  overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.start_page button.start{position:absolute; bottom:120px; left:36%; font-size: 35px; background:#fff;  color: #005045; font-weight: 600; border-radius: 100px; box-sizing: border-box; padding: 10px 35px;
    box-shadow: 5px 5px 10px rgba(0,0,0,30%);  animation: jittery 3s infinite;}
.start_page button.start i{color:#fff; background: #005045; width:50px; height:50px; text-align: center; line-height: 50px; border-radius: 100%;}
.start_page button.start:hover{background: #01C9AC; color:#fff;}
.start_page button.start:hover i{background: #fff; color:#01C9AC; }
@keyframes jittery {
    5%,
    50% {
        transform: scale(1);
    }

    10% {
        transform: scale(0.9);
    }

    15% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(1.15) rotate(-5deg);
    }

    25% {
        transform: scale(1.15) rotate(5deg);
    }

    30% {
        transform: scale(1.15) rotate(-3deg);
    }

    35% {
        transform: scale(1.15) rotate(2deg);
    }

    40% {
        transform: scale(1.15) rotate(0);
    }

}

.animate__animated.animate__rotateInDownLeft{
    animation-duration: 1s;
}


.start_page .inner .stepTit{animation: subTit 1s forwards; animation-delay: 0.8s; opacity: 0;}

@keyframes subTit {
    0%{opacity: 0; transform: translateY(-70px);}
    5%{opacity: 0; transform: translateY(-70px);}
    100%{opacity: 1; transform: translateY(0px);}

}



/* 공통 - 헤더 */
.h_topBox{ background: #fff; z-index: 1000000;}
.h_topBox .titleBox{width:100%; overflow: hidden; box-sizing: border-box; padding: 5px 10px;  }
.h_topBox .titleBox .top{width: 100%; overflow: hidden; border-bottom: 1px solid #ddd; box-sizing: border-box; padding-bottom: 5px;  }
.h_topBox .titleBox .top p.title{display: inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 85%; font-size: 15px; font-weight:600;}
.h_topBox .titleBox .top h1.logo{float: right; height: 100%; width: 70px; height: 20px; overflow: hidden; margin-top: 5px;}
.h_topBox .titleBox .top h1.logo img{ width: 100%; height: 100%; float: right; }

.h_topBox .titleBox .bottom{ text-align: right; width: 100%; overflow: hidden; box-sizing: border-box; padding-top: 5px;}
.h_topBox .titleBox .bottom h3{font-size: 19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%;}
.h_topBox .titleBox .bottom h3 span{color:#01C9AC;}


.h_topBox .indexBox{width: 100%;   background: #1F293E;}
.h_topBox .indexBox ul.indexList{ overflow: hidden;  box-sizing: border-box; padding: 5px 0px; text-align: center; }
.h_topBox .indexBox ul.indexList li{ display: inline-block;  border-right: 1px solid #fff;  margin-right: 10px;box-sizing: border-box; padding-right: 10px; color:#fff; cursor: pointer;}
.h_topBox .indexBox ul.indexList li a{color:#fff;}
.h_topBox .indexBox ul.indexList li:last-child{padding-right: 0px; margin-right: 0px; border-right: 0px;}
.h_topBox .indexBox ul.indexList li:hover a{color: #01C9AC; font-weight: bold;}
.h_topBox .indexBox ul.indexList li.kk_active {color: #01C9AC; font-weight: bold;}
.h_topBox .indexBox ul.indexList li.kk_active a{color: #01C9AC; font-weight: bold;}



/* 공통 - 컨트롤바 */
.controlBox{ background: #fff; width:100%;  position: relative; display: flex; align-items: center; border-top: 1px solid #eee;}
.controlBox button.p_next{position: absolute; right:10px; top: -40px; font-size: 20px; font-weight:bold; color: #01C9AC; background: #1F293E; box-sizing: border-box; padding:2px 15px; border-radius: 5px; box-shadow: 3px 3px 6px rgba(0,0,0,20%);
    animation: nextAni 2s infinite;}

@keyframes nextAni {
    0% {
        transform: translateY(0px);
        color: #01C9AC; background: #1F293E;
    }
    50% {
        transform: translateY(-10px);
        background: #01C9AC; color: #1F293E;
    }
    100% {
        transform: translateY(0px);
        color: #01C9AC; background: #1F293E;
    }
}


.controlBox button.p_next:hover{background: #01C9AC; color: #1F293E; }
.controlBox .iconBox{display:inline-block; overflow: hidden; box-sizing: border-box; padding: 5px 10px;}
.controlBox .iconBox button{margin-right: 5px; }
.controlBox .iconBox button:last-child{margin-right: 0px;}
.controlBox .iconBox button i{font-size:20px; color: #1F293E;}

.controlBox .playBar{display:inline-block; text-align: center; margin: 0 auto;}
.controlBox .playBar .progressBox{display: inline-block; width:380px; height:15px; background: #e3e3e3;}
.controlBox .playBar .progressBox .progress-bar{background: #01C9AC; height:100%;}
.controlBox .playBar .timeBox{display: inline-block; overflow: hidden;}
.controlBox .playBar .timeBox p{font-size: 12px; color:  #01C9AC; font-weight: 900; margin-left: 10px; }
.controlBox .playBar  button.replay {margin-left: 10px; margin-top: -3px;}
.controlBox .playBar  button.replay i{ font-size:18px; color: #1F293E;}

.controlBox .pasingBox{display:inline-block; box-sizing: border-box; padding: 5px 10px;}
.controlBox .pasingBox button{font-size: 20px; color:  #01C9AC;}
.controlBox .pasingBox p{display: inline-block; font-weight: bold; color: #1F293E; font-size: 14px; }
.controlBox .pasingBox p span.now{font-size: 20px; color: #01C9AC;}


/* 공통 - 메모장 */
.memoBox{position: absolute; z-index: 100; width:100%; height:100%; background: rgba(0,0,0,70%); left: 0; top:0; display: none;}
.memoBox.kk_open{display:block;}
.memoBox .memo{position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);  width: 400px; box-shadow: 5px 5px 10px rgba(0,0,0,30%); border-radius: 20px ; }
.memoBox .memo .pad{overflow: hidden; height: 100%; width: 100%;}
.memoBox .memo .pad .title{background: #01C9AC;  box-sizing: border-box; padding: 10px 20px; border-radius: 20px 20px 0px 0px;}
.memoBox .memo .pad .title p{font-size: 20px; text-align: center; font-weight: bold; color: #fff;}
.memoBox .memo .pad .title p span.close{float:right; cursor: pointer; margin-top: 2px;}
.memoBox .memo .pad .textArea{background: #fff;  height:300px; border-radius: 0px 0px 20px 20px; box-sizing: border-box; padding: 20px;}
.memoBox .memo .pad .textArea textarea{width:100%; height:100%; border: 0px; outline: 0px; resize: none;}
textarea{font-family: 'NanumSquareRound'; font-weight: bold;}
textarea::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

textarea::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #1F293E; /* 스크롤바의 색상 */
    border-radius: 10px;
}

textarea::-webkit-scrollbar-track {
    background: #9B9B9B;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}


.contentBox {height:460px;}




/* 02 */
.two_page{border-bottom: 1px solid #ddd;}
.two_page .contentBox{width:100%; background: url("../images/board_bg.png") no-repeat; height:460px; animation: fadeIn3 1s;}
.two_page .contentBox .inner{width:850px; overflow: hidden; margin: 0 auto; box-sizing: border-box; padding:  0px 45px;}
.two_page .contentBox .inner .listBox{width:100%; overflow-y: auto; height: 305px; margin: 70px auto 0px;  animation: fadeIn4 2s;}
.two_page .contentBox .inner .listBox ul{width:100%; overflow: hidden; box-sizing: border-box; padding-right: 30px;}
.two_page .contentBox .inner .listBox ul li{color: #fff; box-sizing: border-box; padding: 5px 10px; border-bottom: 1px dotted #fff; font-size: 18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%;}
.two_page .contentBox .inner .listBox ul li.kk_active{background:#fff; color:#01C9AC; font-weight: 900;}
.two_page .contentBox .inner .listBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}
.two_page .contentBox .inner .listBox ul li.selected{background:#fff; color:#01C9AC; font-weight: 900;}
.two_page .contentBox .inner .listBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #fff; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.two_page .contentBox .inner .listBox::-webkit-scrollbar-track {
    background: #9B9B9B;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}

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

}

@keyframes fadeIn4 {
    0%{opacity: 0; transform: translateY(10px);}
    5%{opacity: 0; transform: translateY(10px);}
    100%{opacity: 1; transform: translateY(0px);}

}



/* 03 */
.three_page .contentBox{width:100%; background: url("../images/t_bg.png") no-repeat;  animation: fadeIn3 1s;  display: flex; align-items: center;}
.three_page .contentBox .inner{width: 850px; height: 388px; overflow: hidden; margin: 0 auto;  }
.three_page .contentBox .inner .classContent{ width:100%; overflow:hidden; position: relative; margin-bottom: 10px; animation: fadeIn5 0.5s;}
.three_page .contentBox .inner .classContent h3{width:110px; height:50px;  box-sizing: border-box; padding-top: 5px; background: url("../images/title_bg_1.png") no-repeat; text-align: center; color: #fff; font-size: 18px;
    position: absolute;left:0; top:0;}
.three_page .contentBox .inner .classContent .textBox{  background: #fff; float: right; border:1px solid #01C9AC; border-radius: 0px 0px 70px 0; width:839px;  height:160px; box-shadow: 0px 7px 6px rgba(0,0,0,15%); margin-bottom:20px;
    font-size: 18px; font-weight: bold; line-height:1.6; box-sizing: border-box; padding: 30px 50px 20px 20px; margin-top: 15px;}
.three_page .contentBox .inner .classContent .textBox > div{ overflow-y: auto; height:110px;  animation: fadeIn8 1s forwards; opacity: 0; animation-delay: 0.5s;}
.three_page .contentBox .inner .classContent .textBox > div::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.three_page .contentBox .inner .classContent .textBox > div::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.three_page .contentBox .inner .classContent .textBox > div::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}

@keyframes fadeIn5 {
    0%{opacity: 0; transform: translateY(10px);}
    5%{opacity: 0; transform: translateY(10px);}
    100%{opacity: 1; transform: translateY(0px);}

}

@keyframes fadeIn6 {
    0%{opacity: 0; transform: translateX(-10px);}
    20%{opacity: 0; transform: translateX(-10px);}
    100%{opacity: 1; transform: translateX(0px);}

}



.three_page .contentBox .inner .classGoal{ width:100%; overflow:hidden; position: relative;  animation: fadeIn7 2s;  }
.three_page .contentBox .inner .classGoal h3{width:110px; height:50px;  box-sizing: border-box; padding-top: 5px; background: url("../images/title_bg_2.png") no-repeat; text-align: center; color: #fff; font-size: 18px;
    position: absolute;left:0; top:0;}
.three_page .contentBox .inner .classGoal .textBox{  background: #fff; float: right; border:1px solid #1F293E; border-radius: 0px 0px 70px 0; width:839px;  height:160px; box-shadow: 0px 7px 6px rgba(0,0,0,15%); margin-bottom:20px;
    font-size: 18px; font-weight: bold; line-height:1.6; box-sizing: border-box; padding: 30px 50px 20px 20px; margin-top: 15px;}
.three_page .contentBox .inner .classGoal .textBox > div{ overflow-y: auto; height:110px;  animation: fadeIn8 1s forwards; opacity: 0; animation-delay: 1s;}
.three_page .contentBox .inner .classGoal .textBox > div::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.three_page .contentBox .inner .classGoal .textBox > div::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.three_page .contentBox .inner .classGoal .textBox > div::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}

@keyframes fadeIn7 {
    0%{opacity: 0; transform: translateY(10px);}
    5%{opacity: 0; transform: translateY(10px);}
    100%{opacity: 1; transform: translateY(0px);}

}

@keyframes fadeIn8 {
    0%{opacity: 0; transform: translateX(-10px);}
    5%{opacity: 0; transform: translateX(-10px);}
    100%{opacity: 1; transform: translateX(0px);}

}





/* 04 */
.four_page .contentBox{width:100%; background: url("../images/quiz_bg.png") no-repeat; display: flex; align-items: center;}
.four_page .contentBox .inner{width: 850px; height: 388px; overflow: hidden; margin: 0 auto;  }

/* 공통 - 퀴즈 */
.contentBox{position: relative;}
.contentBox .inner .quizBox{width:100%;   display: flex; align-items: center; justify-content: space-between; margin-top: 5px; margin-bottom: 30px; animation: fadeIn9 1s;}


@keyframes fadeIn9 {
    0%{opacity: 0; transform: translateX(-10px);}
    5%{opacity: 0; transform: translateX(-10px);}
    100%{opacity: 1; transform: translateX(0px);}

}


.contentBox .inner .quizBox .numBox{width:;  position: relative; left: 15px;}
.contentBox .inner .quizBox .numBox .num{width:60px; height: 60px; line-height: 62px; background: #fff; border: 2px solid #1F293E; border-radius: 100%;  text-align: center; box-shadow: 0px 1px 14px rgba(0,0,0,20%);}
.contentBox .inner .quizBox .numBox .num p{font-size: 33px; font-weight: 1000;  text-shadow: -1px -1px 0 #1F293E, 1px -1px 0 #1F293E, -1px 1px 0 #1F293E, 1px 1px 0 #1F293E;  }
.contentBox .inner .quizBox .numBox img.quiz_hat{position: absolute; top: -13px; left: -0px;}
.contentBox .inner .quizBox .quiz{background: #fff;border: 2px solid #1F293E; width: 803px; height: 90px; box-shadow: 0px 3px 6px rgba(0,0,0,15%); overflow: hidden; display: flex; align-items: center;
    box-sizing: border-box; padding: 10px 20px 10px 40px; }
.contentBox .inner .quizBox .quiz p{font-size:  19px; font-weight: bold; overflow-y: auto;  height: 58px; box-sizing: border-box; padding-right: 20px;  }

.contentBox .inner .quizBox .quiz p::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.contentBox .inner .quizBox .quiz p::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.contentBox .inner .quizBox .quiz p::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}


.contentBox .inner .oxBox{  display: flex; overflow: hidden;justify-content: center ; align-items: center; animation: fadeIn10 1.5s; }


@keyframes fadeIn10 {
    0%{opacity: 0; transform: translateY(-10px);}
    5%{opacity: 0; transform: translateY(-10px);}
    100%{opacity: 1; transform: translateY(0px);}

}

.contentBox .inner .oxBox > div{display: inline-block; width: 25%; text-align: center; cursor: pointer;}
.contentBox .inner .oxBox > div > i{font-size: 120px; color: #ccc;}
.contentBox .inner .oxBox > div:hover > i{color: #FE517C;}
.contentBox .inner .oxBox > div > i.kk_choice{color: #FE517C;}

.contentBox .inner button.answer_check{  float: right;  font-size: 18px; font-weight: bold; background: #1F293E; border-radius: 100px;
    box-sizing: border-box; padding: 5px 20px; box-shadow: 3px 3px 10px rgba(0,0,0,20%); color: #fff; transition: 0.5s;animation: fadeIn10 1.5s;  }
.contentBox .inner button.answer_check i{margin-left: 10px; display: none; transition: all 1s; }
.contentBox .inner button.answer_check:hover{box-shadow: 0px 0px 10px rgba(0,0,0,30%);  transform: translateX(0px);transition: 0.5s; background: #01C9AC;}
.contentBox .inner button.answer_check:hover i{display: inline-block; }


.contentBox .inner button.answer_check.kk_out{display: none; transition:  all 0.5s;}

/* 정답 레이어 */
.answerBox{position: absolute;   bottom:-100%; left: 50%; transform: translateX(-50%); width: 850px;}
.answerBox.kk_open{bottom: 0; transition:  all 0.3s;}
.answerBox button.quiz_next{float: right; font-size: 18px; font-weight: bold; background: #1F293E; border-radius: 100px; box-sizing: border-box; padding: 5px 20px; box-shadow: 3px 3px 10px rgba(0,0,0,20%); color: #fff; margin-bottom: 10px;}
.answerBox .answer{width:100%; overflow: hidden; background: #1F293E; border-radius: 20px 20px 0px 0px; box-shadow: 0px -3px 6px rgba(0,0,0,15%); box-sizing: border-box; padding: 15px; display: flex; justify-content: space-between;;
    align-items: center; transition: 0.5s;}
.answerBox button.quiz_next:hover{background: #01C9AC; transition: 0.5s;}
.answerBox .answer .leftBox{display: inline-block;}
.answerBox .answer .rightBox{display: inline-block;}
.answerBox .answer .leftBox{overflow: hidden; text-align: center;}
.answerBox .answer .leftBox .title{font-size: 22px; color: #fff; font-weight: normal;}
.answerBox .answer .leftBox i{color:#FE517C; font-size:50px;  margin-top: 5px; font-weight: bold;}
.answerBox .answer .rightBox{background: #fff; height: 90px; border-radius: 10px; width: 700px; box-sizing: border-box; padding: 10px 20px;  }
.answerBox .answer .rightBox p{font-size:  17px; overflow-y: auto;  height: 72px; box-sizing: border-box; padding-right: 20px; font-weight: bold; line-height: 1.5;}

.answerBox .answer .rightBox p::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.answerBox .answer .rightBox p::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.answerBox .answer .rightBox p::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}


/* 오답 레이어 */
.wrongBox{position: absolute; z-index: 100; width:100%; height:100%; background: rgba(0,0,0,70%); left: 0; top:0; display: none;}
.wrongBox.kk_open{display: block;}
.wrongBox .imgBox{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.wrongBox .imgBox button.close{position: absolute; left: 50%; transform: translateX(-50%); bottom:50px; background: #fff; border-radius: 100%; width: 28px; height: 28px; color: #C73737; line-height: 28px;}
.wrongBox .imgBox .txtBox{position: absolute;left: 50%;  transform: translateX(-50%);  top:14%; color: #fff; text-align: center;}
.wrongBox .imgBox .txtBox i{font-size: 119px; margin-bottom: 10px;}
.wrongBox .imgBox .txtBox p{font-size: 20px; font-weight: bold; line-height: 1.6;}



/* 퀴즈 시작 레이어 */
.startBox{position: absolute; left: 0; bottom:0; background: url("../images/quiz_start.png") no-repeat bottom; width:100%; height:494px; z-index: 99999;}
.startBox .start_inner{ overflow: hidden; text-align: center; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
.startBox .start_inner .txtBox{overflow: hidden; margin-bottom: 55px; animation: textAni;}

.startBox .start_inner .txtBox .child-1{height: 160px; overflow-y: hidden; }

.startBox .start_inner .txtBox h2{font-size:114px; color: #01C9AC; margin-bottom: 10px;   animation: grow 1.5s;}

@keyframes grow {
    from { transform: translateY(160px);}
    to { transform: translateY(0);}
}

.startBox .start_inner .txtBox .child-2{height: 82px; overflow-y: hidden; }

.startBox .start_inner .txtBox p{ color: #1F293E; font-size: 24px; font-weight: bold; line-height: 1.7;   animation: grow2 1.5s forwards; animation-delay: 0.3s; opacity: 0;}

@keyframes grow2 {
    from { transform: translateY(82px);}
    to { transform: translateY(0);  opacity: 1;}
}

.startBox .start_inner button.start{font-size: 35px; background:#fff;  color:#01C9AC; font-weight: 600; border-radius: 100px; box-sizing: border-box; padding: 10px 35px;
    box-shadow: 5px 5px 10px rgba(0,0,0,30%);  animation: jittery 3s infinite; margin-bottom: 20px; }

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

.startBox .start_inner button.start i{color:#fff; background: #01C9AC; width:50px; height:50px; text-align: center; line-height: 50px; border-radius: 100%;}
.startBox .start_inner button.start:hover{background: #01C9AC; color:#fff;}
.startBox .start_inner button.start:hover i{background: #fff; color:#01C9AC; }




/* 05 */
.five_page .contentBox{width:100%; background: url("../images/video_bg.png") no-repeat; display: flex; align-items: center;}
.five_page .contentBox .inner{width: 850px; height: 388px; overflow: hidden; margin: 0 auto;  box-sizing: border-box; padding: 10px;}
.five_page .contentBox .inner .videoBox{width:100%; height:100%; background: rgba(0,0,0,50%); border-radius: 16px; box-shadow: 3px 3px 6px rgba(0,0,0,50%); animation: videoAni 1.5s; }

@keyframes videoAni {
    0% {opacity: 0; transform: translateY(15px);}
    100% {  opacity: 1; transform: translateY(0px);}
}


/* 06 */
.six_page .contentBox{width:100%; background: url("../images/quiz_bg.png") no-repeat; display: flex; align-items: center;}
.six_page .contentBox .inner{width: 850px; height: 388px; overflow: hidden; margin: 0 auto;  }

/* 문제 보기 */
.contentBox .inner .choiceBox{width: 786px; float: right; overflow-y: auto; max-height: 215px; margin-bottom: 10px; box-sizing: border-box; padding-right: 30px;}

.contentBox .inner .choiceBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.contentBox .inner .choiceBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.contentBox .inner .choiceBox::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}


.contentBox .inner .choiceBox ul.show{width:100%; overflow: hidden;}
.contentBox .inner .choiceBox ul.show li{ width:100%; cursor: pointer; margin-bottom: 10px;overflow: hidden; }
.contentBox .inner .choiceBox ul.show li:last-child{margin-bottom: 0px;}
.contentBox .inner .choiceBox ul.show li.kk_check p.num{background: #01C9AC;}
.contentBox .inner .choiceBox ul.show li.kk_check p.txt{color: #01C9AC;}
.contentBox .inner .choiceBox ul.show li:hover p.num{background: #01C9AC;}
.contentBox .inner .choiceBox ul.show li:hover p.txt{color: #01C9AC;}
.contentBox .inner .choiceBox ul.show li p.num{background: #1F293E; color: #fff;  display: inline-block; width:26px; height:26px; line-height: 26px; text-align: center; border-radius: 5px; float: left; }
.contentBox .inner .choiceBox ul.show li p.txt{display: inline-block; width: 720px; font-size:18px; font-weight:bold; float: right;}



/* 07 */
.seven_page .contentBox{width:100%; background: url("../images/board_bg.png") no-repeat; height:460px; animation: fadeIn3 1s;}
.seven_page .contentBox .inner{width:850px; overflow: hidden; margin: 0 auto; box-sizing: border-box; padding:  0px 45px;}
.seven_page .contentBox .inner .summaryBox{width:100%; overflow-y: auto; height: 305px; margin: 70px auto 0px;  animation: fadeIn4 2s; color: #fff; font-size: 18px; box-sizing: border-box; padding-right: 30px;}
.seven_page .contentBox .inner .summaryBox img{width: auto; max-width: 100%;}


.seven_page .contentBox .inner .summaryBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.seven_page .contentBox .inner .summaryBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #fff; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.seven_page .contentBox .inner .summaryBox::-webkit-scrollbar-track {
    background: #9B9B9B;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}

button.print_btn{position: absolute; left: 20px; top: -40px; font-size: 14px; font-weight:bold; background: #fff; box-sizing: border-box; padding: 5px 10px;  box-shadow: -3px 3px 6px rgba(0,0,0,30%); color: #1F293E; transition: all 0.5s;}
button.print_btn:after{position: absolute; content: '';  border-top: 10px solid #fff;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 0px solid transparent; top:25px;left: 25px;
    transition: all 0.5s;}

button.print_btn:hover{background: #1F293E;  color: #fff;}
button.print_btn:hover:after{ border-top: 10px solid #1F293E; }

button.print_btn.kk_btn{font-size: 18px; left: 70px; top: -40px; transition: all 0.5s;  }
button.print_btn.kk_btn:after{ display: none;}



/* 08 */
.controlBox button.p_end{position: absolute; right:10px; top: -40px; font-size: 20px; font-weight:bold;background: #01C9AC; color: #1F293E; box-sizing: border-box; padding:2px 15px; border-radius: 5px; box-shadow: 3px 3px 6px rgba(0,0,0,20%);
    animation: nextAni 2s infinite;}

@keyframes nextAni {
    0% {
        transform: translateY(0px);
        color: #01C9AC; background: #1F293E;
    }
    50% {
        transform: translateY(-10px);
        color: #1F293E; background: #01C9AC;
    }
    100% {
        transform: translateY(0px);
        color: #01C9AC; background: #1F293E;
    }
}


.controlBox button.p_next:hover{ color: #01C9AC; background: #1F293E;  }


.end_page .contentBox{width:100%; background: url("../images/end_bg.png") no-repeat; height:460px; animation: fadeIn3 1s;  display: flex; align-items: center;}
.end_page .contentBox .inner{width:850px; overflow: hidden; margin: 0 auto; }
.end_page .contentBox .inner .endBox{float: right; width:570px;  height: 388px;}

.end_page .contentBox .inner .endBox .end_t{font-family: 'Nanum Pen Script', cursive;  color:#fff;  font-size: 80px; font-weight: normal;  }

.end_page .contentBox .inner .timeBox{overflow: hidden; display: flex; justify-content: space-between; }
.end_page .contentBox .inner .timeBox .now{animation: timeBox_ani1 1s forwards; animation-delay: 0.8s; opacity: 0;}
.end_page .contentBox .inner .timeBox .next{animation: timeBox_ani2 1s forwards; animation-delay: 0.8s; opacity: 0;}
.end_page .contentBox .inner .timeBox > div{display:inline-block; width:48%;  overflow: hidden; }
.end_page .contentBox .inner .timeBox .now { }
.end_page .contentBox .inner .timeBox > div h3{text-align: center;font-family: 'Nanum Pen Script', cursive;  color:#fff;   font-weight: normal; font-size: 30px; width:120px; height:39px; line-height:39px; margin: 0 auto;
    background: url("../images/border_1.png") no-repeat;}
.end_page .contentBox .inner .timeBox > div .txtBox{font-size: 17px; font-weight: bold;   height:170px; margin: 70px 10px 0 20px; color: #1F293E; overflow-y: auto; box-sizing: border-box; padding-right: 10px;}


.end_page .contentBox .inner .timeBox > div .txtBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}

.end_page .contentBox .inner .timeBox > div .txtBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background:#9B9B9B; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.end_page .contentBox .inner .timeBox > div .txtBox::-webkit-scrollbar-track {
    background: #ddd;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px;
}



.stroke {stroke: #fff; stroke-width: 1px; stroke-dasharray: 0 250;
    stroke-opacity: 1; fill: none;
    -webkit-animation: stroke_offset 5s forwards;
    animation: stroke_offset 5s forwards;
    -webkit-animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-timing-function: cubic-bezier(.25, .46, .45, .94)
}

@-webkit-keyframes stroke_offset {
    10% {stroke-dasharray: 0 250; stroke-opacity: 1}
    100% {stroke-dasharray: 250 0; stroke-opacity: .75}
}
@keyframes stroke_offset {
    10% {stroke-dasharray: 0 250; stroke-opacity: 1}
    100% {stroke-dasharray: 250 0; stroke-opacity: .75}

}

.fill { fill: #fff; fill-opacity: 0;
    -webkit-animation: fill_offset 5s forwards;
    animation: fill_offset 5s forwards;
    -webkit-animation-timing-function: cubic-bezier(.25, .46, .45, .94);
    animation-timing-function: cubic-bezier(.25, .46, .45, .94)
}

@-webkit-keyframes fill_offset {
    10%{fill-opacity: 0}
    100% {fill-opacity: 1}
}

@keyframes fill_offset {
    10%{fill-opacity: 0}
    100% {fill-opacity: 1}
}

@keyframes timeBox_ani1 {
    0%{ opacity: 0; transform: translateY(-20px)}
    30%{ opacity: 0; transform: translateY(-20px)}
    100% {opacity: 1; stransform: translateY(0px)}
}



@keyframes timeBox_ani2 {
    0%{ opacity: 0; transform: translateY(-20px)}
    50%{ opacity: 0; transform: translateY(-20px)}
    100% { opacity: 1;  transform: translateY(0px)}
}