html{width:100%; height:100%; }
body{width:100%; height:100%;  font-family: 'NanumSquareRound'; color: #1F293E ; font-size:13px; overflow: hidden; background: #fff; box-shadow: 3px 3px 10px rgba(0,0,0,15%);}
.wrap{width:100%; height:100%; }

/* 01 */
.start_page{ background: #014E44;}
.start_page .wrap{position: relative;}
.start_page .wrap img.board_bottom{position: absolute; width: 100%; bottom: 0; height: auto; z-index: 999;}
.start_page .wrap img.board_icon1{position: absolute;  top: 25px; right: 25px;}
.start_page .wrap img.board_icon2{position: absolute;  bottom: 30px; left: 25px;}
.start_page .inner{box-sizing: border-box; width: 100%; overflow: hidden; }
.start_page .inner .txtBox{text-align: center; overflow: hidden; width: 100%; box-sizing: border-box; padding: 10px 30px 20px;  position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
.start_page .inner .txtBox .title{background: #fff; box-sizing: border-box; padding: 10px;   margin-bottom: 30px;  box-shadow: 5px 5px 10px rgba(0,0,0,30%);z-index: 999; }
.start_page .inner .txtBox .title h2{font-size: 40px; color:  #014E44; font-weight: normal; font-family: 'Nanum Pen Script', cursive;}
.start_page .inner .txtBox .stepTit{width: 70%;  margin: 0 auto 70px;}
.start_page .inner .txtBox .stepTit h3{ font-size: 30px; color:  #ffff;  font-family: 'Nanum Pen Script', cursive; font-weight: normal;}

.start_page button.start{ background:#fff;  color: #005045; font-weight: 600; border-radius: 100px; box-sizing: border-box; padding: 10px 15px;
    box-shadow: 5px 5px 10px rgba(0,0,0,30%); font-size: 25px;  animation: jittery 3s infinite;}
.start_page button.start i{color:#fff; background: #005045; width:35px; height:35px; text-align: center; line-height: 35px; border-radius: 100%;}


@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.3s; 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; text-align: center; }
.h_topBox .titleBox .top p.title{display: inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%; font-size: 13px; font-weight:600;}

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


.h_topBox .mySwiper{width: 100%;   background: #1F293E;   }

.h_topBox .indexBox::-webkit-scrollbar {
    height:4px ;  /* 스크롤바의 너비 */
}

.h_topBox .indexBox::-webkit-scrollbar-thumb {
    width: 5%; /* 스크롤바의 길이 */
    background: #01C9AC; /* 스크롤바의 색상 */
    border-radius: 10px;
}

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

.h_topBox .mySwiper{}
.h_topBox .swiper-wrapper{ box-sizing: border-box; padding: 5px 5px 10px;margin: 0 auto; align-items: center;}
.h_topBox .swiper-slide{ display: inline-block;  border-right: 1px solid #fff;  color:#fff; text-align: center; cursor: pointer;}
.h_topBox .swiper-slide:last-child{border-right: 0px;}

.h_topBox .swiper-slide.kk_active {color: #01C9AC; font-weight: bold;}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{bottom:  0!important;left: 0 !important; width: 100% !important;}
.swiper-scrollbar{  background: #ddd !important; opacity: 1 !important;}
.swiper-scrollbar-drag{background: #01C9AC !important;  }



/* 공통 컨트롤바 */
.controlBox{position: absolute; bottom: 0; left: 0; width: 100%;}
.controlBox .progressBox{width:100%; oevrflow:hidden; background: #ddd; height:10px;}
.controlBox .progressBox .progress-bar{background: #01C9AC; height: 100%; box-shadow: 3px 0px 6px rgba(0,0,0,10%);}
.controlBox .bottomBox{width:100%; overflow:hidden; background: #fff;   display: flex; align-items: center; ; padding: 10px 5px; box-sizing: border-box; position: relative;}
.controlBox .bottomBox .timeBox{display: inline-block; box-sizing: border-box; overflow: hidden; padding: 5px 10px;background: #1F293E; border-radius: 100px;  margin-right: 10px; }
.controlBox .bottomBox .timeBox p{font-size: 12px; color:  #fff;  font-weight: 900; }
.controlBox .bottomBox .iconBox{  display: inline-block; }
.controlBox .bottomBox .iconBox button i{font-size: 16px; color: #1F293E;}
.controlBox .bottomBox .iconBox button{margin-right: 5px; }
.controlBox .bottomBox .iconBox button:last-child{margin-right: 0px;}
.controlBox .bottomBox .pasingBox{display: inline-block;  position: absolute; right: 5px; line-height: 22px; }
.controlBox .bottomBox .pasingBox button{font-size: 15px; color:  #01C9AC;}
.controlBox .bottomBox .pasingBox p{display: inline-block; font-weight: bold; color: #1F293E; font-size: 15px; }
.controlBox .bottomBox .pasingBox span.now{ font-size: 18px; color: #01C9AC; margin: 0 2px;}

.controlBox button.p_next{position: absolute; right:10px; top: -30px; font-size: 15px; 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;
    }
}



/* 공통 메모장 */
.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: 80%; box-shadow: 5px 5px 10px rgba(0,0,0,40%); 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;
}



/* 02 */
.two_page .contentBox{   background: #EAC79F; height: 100%; box-sizing: border-box; overflow-y: auto; box-sizing: border-box; padding: 20px 20px 180px;  animation: fadeIn3 1s;}
.two_page .inner{ overflow: hidden; width: 100%;}
.two_page .inner .listBox{ background: #014E44; border-radius: 10px; color: #fff; box-sizing: border-box; padding: 10px; border: 7px solid #BB8A52;  height: 100%; overflow-y: auto;   animation: fadeIn4 2s;}

.two_page .contentBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}
.two_page .contentBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #555; /* 스크롤바의 색상 */
    border-radius: 10px;
}

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


.two_page .inner .listBox ul{width:100%; overflow: hidden; }
.two_page .inner .listBox ul li{color: #fff; box-sizing: border-box; padding: 5px 10px; border-bottom: 1px dotted #fff;   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%;}
.two_page .inner .listBox li.selected{background:#fff; color:#01C9AC; font-weight: 900;}
.two_page .inner .listBox ul li:last-child{border-bottom: 0px;}

@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{background: #EAC79F; height: 100%; box-sizing: border-box; overflow-y: auto; box-sizing: border-box; padding: 20px 20px 180px;  animation: fadeIn3 1s; }

.contentBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}
.contentBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #555; /* 스크롤바의 색상 */
    border-radius: 10px;
}

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



.three_page .contentBox .inner{overflow: hidden; width: 100%;}

.three_page .contentBox .inner .classContent{ width:100%; overflow:hidden; position: relative; margin-bottom: 10px; animation: fadeIn5 0.5s; box-sizing: border-box; padding-left: 10px;}
.three_page .contentBox .inner .classContent h3{width: 85px; height: 40px;  box-sizing: border-box; padding-top: 5px; background: url("../images/title_bg_1.png") no-repeat top/cover; text-align: center; color: #fff;
    font-size: 13px; position: absolute;left: 2px; top:0;}
.three_page .contentBox .inner .classContent .textBox{  background: #fff; float: right; border:2px solid #01C9AC; border-radius: 0px 0px 70px 0; width:  100%;  box-shadow: 0px 7px 6px rgba(0,0,0,15%); margin-bottom:20px;
    font-size: 13px; font-weight: bold; line-height:1.6; box-sizing: border-box; padding: 20px 30px 20px 20px; margin-top: 15px; ; overflow: hidden;}
.three_page .contentBox .inner .classContent .textBox > div{   animation: fadeIn8 1s forwards; opacity: 0; animation-delay: 0.5s}


@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;  box-sizing: border-box; padding-left: 10px;}
.three_page .contentBox .inner .classGoal h3{width: 85px; height: 40px;  box-sizing: border-box; padding-top: 5px; background: url("../images/title_bg_2.png") no-repeat top/cover; text-align: center; color: #fff;
    font-size: 13px; position: absolute;left: 2px; top:0;}
.three_page .contentBox .inner .classGoal .textBox{   background: #fff; float: right; border:2px solid #1F293E; border-radius: 0px 0px 70px 0; width:  100%;  box-shadow: 0px 7px 6px rgba(0,0,0,15%); margin-bottom:20px;
    font-size: 13px; font-weight: bold; line-height:1.6; box-sizing: border-box; padding: 20px 30px 20px 20px; margin-top: 15px;}
.three_page .contentBox .inner .classGoal .textBox > div{    animation: fadeIn8 1s forwards; opacity: 0; animation-delay: 1s ; overflow: hidden;}

@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/m_quiz_bg.png") no-repeat top/cover; height: 100%; box-sizing: border-box; overflow-y: auto;  padding: 20px 20px 180px;  }
.four_page .contentBox .inner{overflow: hidden; width: 100%;}

/* 공통 문제 */
.contentBox{position: relative;}
.contentBox .inner .quizBox{width:100%; 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{ position: relative; left: 50%; display: inline-block; top: 20px; transform: translateX(-50%);}
.contentBox .inner .quizBox .numBox .num{width:40px; height: 40px; line-height: 40px; 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: 20px; font-weight: bold;    }
.contentBox .inner .quizBox .numBox img.quiz_hat{position: absolute; top: -13px; left: -1px; width:40px; height: auto; }

.contentBox .inner .quizBox .quiz{background: #fff;border: 2px solid #1F293E;  box-shadow: 0px 3px 6px rgba(0,0,0,15%); overflow: hidden; display: flex; align-items: center;
    box-sizing: border-box; padding: 30px 10px 10px 20px; }
.contentBox .inner .quizBox .quiz p{font-size:  13px; font-weight: bold;  }

.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: 60px; color: #ccc;}
.contentBox .inner .oxBox > div > i.kk_choice{color: #FE517C;}


.contentBox .inner button.answer_check{  float: right;  font-size: 13px; font-weight: bold; background: #1F293E; border-radius: 100px;
    box-sizing: border-box; padding: 5px 15px; color: #fff; transition: 0.5s;animation: fadeIn10 1.5s; margin-top: 20px; }
.contentBox .inner button.answer_check i{margin-left: 10px; display: none; transition: all 1s; }


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



/* 정답 레이어 */
.answerBox{position: absolute;   bottom: -100%;  box-sizing: border-box; padding:  0px 20px; width: 100%;}
.answerBox.kk_open{bottom: 57px; transition:  all 0.3s;}
.answerBox button.quiz_next{float: right; font-size: 13px; font-weight: bold; background: #1F293E; border-radius: 100px; box-sizing: border-box; padding: 5px 15px; 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: 10px; display: flex;justify-content: center;
    transition: 0.5s; flex-wrap: wrap;}


.answerBox .answer .rightBox{ width: 100%;}
.answerBox .answer .leftBox{overflow: hidden; text-align: center;  width: 100%;}
.answerBox .answer .leftBox .title{font-size: 16px; display: inline-block; color: #fff; font-weight: normal;}
.answerBox .answer .leftBox p{display: inline-block;  vertical-align: middle; margin-left: 10px;}
.answerBox .answer .leftBox i{color:#FE517C; font-size: 40px;  margin-top: 5px; font-weight: bold;}
.answerBox .answer .rightBox{background: #fff;  border-radius: 10px;   box-sizing: border-box; padding: 10px ;  width: 100%;}
.answerBox .answer .rightBox p{font-size:  13px;   box-sizing: border-box; padding-right: 10px; font-weight: bold; line-height: 1.5;}



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



/* 퀴즈 시작 레이어 */
.startBox{position: absolute; left: 0;top:0; background: url("../images/m_quiz_start.png") no-repeat top/cover; width:100%; height: 100%; z-index: 99999;  }
.startBox .start_inner{ overflow: hidden; text-align: center; position: absolute; left: 50%; top:50%; transform: translate(-50%, -67%); width: 100%; background: rgba(255, 255, 255, 90%); box-sizing: border-box; padding: 20px 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,20%);}
.startBox .start_inner .txtBox{overflow: hidden; margin-bottom: 40px; animation: textAni;}

.startBox .start_inner .txtBox .child-1{height: 70px; overflow-y: hidden; margin-bottom: 20px;  }

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

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

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

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

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

.startBox .start_inner button.start{ background:#fff;  color: #01C9AC; font-weight: 600; border-radius: 100px; box-sizing: border-box; padding: 10px 15px;
    box-shadow: 5px 5px 10px rgba(0,0,0,30%); font-size: 25px;  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:35px; height:35px; text-align: center; line-height: 35px; border-radius: 100%;}




/* 05 */
.five_page .contentBox{width:100%; background: url("../images/m_video_bg.png") no-repeat top/cover; display: flex; align-items: center; height: 100%; box-sizing: border-box; overflow-y: auto;  padding: 20px 20px 180px; }
.five_page .contentBox .inner{width: 100%;  height: auto; overflow: hidden;   }
.five_page .contentBox .inner .videoBox{width:100%; height: auto; background: rgba(0,0,0,50%); border-radius: 16px;   animation: videoAni 1.5s; }

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





/* 04 */
.six_page .contentBox{width:100%; background: url("../images/m_quiz_bg.png") no-repeat top/cover; height: 100%; box-sizing: border-box; overflow-y: auto;  padding: 20px 20px 180px;  }
.six_page .contentBox .inner{overflow: hidden; width: 100%;}

/* 문제 보기 */
.contentBox .inner .choiceBox{width: 100%;   margin-bottom: 10px;}

.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;   font-size: 13px; display: flex;}
.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 p.num{background: #1F293E; color: #fff;  display: inline-block; width:20px; height:20px; line-height: 20px; margin-right: 10px; text-align: center; border-radius: 5px; float: left; }
.contentBox .inner .choiceBox ul.show li p.txt{ font-weight:bold;  word-break: break-all;width: 90%; }






/* 07 */
.seven_page .contentBox{   background: #EAC79F; height: 100%; box-sizing: border-box; overflow-y: auto; box-sizing: border-box; padding: 20px 20px 180px;  animation: fadeIn3 1s;}
.seven_page .inner{ overflow: hidden; width: 100%;}
.seven_page .inner .summaryBox{ background: #014E44; border-radius: 10px; color: #fff; box-sizing: border-box; padding: 10px; border: 7px solid #BB8A52;  height: 100%; overflow-y: auto;   animation: fadeIn4 2s;}

.seven_page .summaryBox::-webkit-scrollbar {
    width: 4px;  /* 스크롤바의 너비 */
}
.seven_page .summaryBox::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #555; /* 스크롤바의 색상 */
    border-radius: 10px;
}

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


button.print_btn{position: absolute; left: 80px; 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.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: -30px; font-size: 15px;  font-weight:bold;color: #1F293E; background: #01C9AC;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: #1F293E; background: #01C9AC;
    }
    50% {
        transform: translateY(-10px);
        color: #01C9AC; background: #1F293E;
    }
    100% {
        transform: translateY(0px);
        color: #1F293E; background: #01C9AC;
    }
}

.end_page .contentBox{width:100%; background:#014E44; height: 100%; box-sizing: border-box; overflow-y: auto;  padding: 20px 20px 180px;  }
.end_page .contentBox .inner{overflow: hidden; width: 100%;}

.end_page .contentBox .inner .endBox{ width:100%; overflow: hidden;}
.end_page .contentBox .inner .endBox .end_t{font-family: 'Nanum Pen Script', cursive;  color:#fff;  font-size: 50px; font-weight: normal;  color: #fff; }
.end_page .contentBox .inner .endBox svg{margin-bottom: 20px;}



.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)}
}



.end_page .contentBox .inner .timeBox{overflow: hidden;  box-sizing: border-box; padding: 0px 10px;}
.end_page .contentBox .inner .timeBox .now{animation: timeBox_ani1 1s forwards; animation-delay: 0.8s; opacity: 0; margin-bottom:40px; }
.end_page .contentBox .inner .timeBox .next{animation: timeBox_ani2 1s forwards; animation-delay: 0.8s; opacity: 0;}
.end_page .contentBox .inner .timeBox > div{  }
.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: 13px; font-weight: bold;  box-sizing:border-box; color: #1F293E; box-sizing: border-box; padding : 40px 15px 15px 15px; background: #fff;
    box-shadow: -5px 5px 10px rgba(0,0,0,50%); }
.end_page .contentBox .inner .timeBox > div img.tape_img{position: absolute; left: 50%; transform: translateX(-50%); top: -30px;}
.end_page .contentBox .inner .timeBox .postBox{width: 100%; position: relative;     margin-top: 40px; margin-bottom: 15px;}