html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, img {
   margin: 0px;
   padding: 0px;
   border: 0px;
   outline: 0px;
   vertical-align: baseline;
   background: transparent;
   user-select: none;
}

body, html {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f0f0f0;
}

table {
   border-collapse: separate;
   border-spacing: 0px;
}

img {
   border: none;
   vertical-align: middle;
   height: auto;
}

#game_wrap{
   width: 1920px;
   height: 1080px;
}

#container {
   position: absolute;
   width: 1920px;
   height: 1080px;
   /* transform: scale(1); */
}

#game_wrap{
   background: url('../images/bg.jpg') no-repeat;
   background-size: 100%;
}

#content_tit{
   display: flex;
   align-items: center;
   position: relative;
   top: 10px;
   left: 20px;
}

#content_tit .icon_back{
   background: url('../../images/back.png') no-repeat;
   width: 118px;
   height: 112px;
   background-size: 100%;
   cursor: pointer;
}

#content_tit .icon_back:hover{
   background: url('../../images/back_h.png') no-repeat;
   background-size: 100%;
}

#content_tit .jumpup_box{
   background: #fff;
   padding: 18px 20px;
   box-sizing: border-box;
   border-radius: 20px;
   margin-top: 3px;
}

#content_tit .jumpup_box p{
   font-family: 'TmoneyRoundWindExtraBold'; 
   font-size: 40px;
}

#content_tit .jumpup_box p img{
   width: 23px;
   vertical-align: 0px;
}

.tmoney{
	font-family: 'TmoneyRoundWindExtraBold'; 
}

/* .bg_orange{
   background: #E6673A;
   padding: 10px 15px;
   border-radius: 15px;
}

.bg_green{
   background: #62D52F;
   padding: 10px 15px;
   border-radius: 15px;
} */

#content {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.contents{
   background: #fff;
   border: 6px solid #431323;
   border-bottom: none;
   border-radius: 30px 30px 0px 0px;
   width: 1280px;
   height: 918px;
   position: absolute;
   bottom: 0;
   left: 30px;
   box-sizing: border-box;
   padding: 90px 40px 30px 40px;
}

.contents_num{
   position: absolute;
   top: -25px;
   left: 20px;
}

.tab_content{
   display: none;
}

.tab_content.on{
   display: block;
}

.result_image{
   position: absolute;
   /* top: 382px; */
   /* top: 632px; */
   right: -80px;
   bottom: 25px;
   /* transform: translateY(100%); */
}
.result_image.true{
   right: -80px;
   bottom: 0px;
   display: none;
}
/* .result_image.pos1{
   bottom: 524px;
   right: -5px;
}
.result_image.pos2{
    bottom: 667px;
    right: 325px;
} */

.result_image.false{
   right: -80px;
   bottom: 0px;
   display: none;
}

.contents .header{
   display: flex;
   gap: 10px;
}

.tab_content:has(div.btn_listen) .header p{
   display: inline-block;
   width: 1195px;
}

.contents .header p{
   font-family: 'Pretendard-SemiBold';
   font-size: 58px;
   line-height: 70px;
   /* letter-spacing: 0px; */
   text-align: justify;
}

.tab{
   display: flex;
   justify-content: center;
   margin-top: 40px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 100px;
}

.tab .tab_item{
   list-style: none;
   width: 64px;
   height: 64px;
   font-family: 'TmoneyRoundWindExtraBold';
   font-size: 38px;
   color: #F46634;
   border-radius: 50%;
   background-color: #f9efe3;
   border: 2px solid #ed6e21;
   margin: 0 6px;
   line-height: 64px;
   box-shadow: inset 0px -2px 3px 0px #DCD2C9;
   text-align: center;
}

.tab .tab_item.on{
   background: #F56737;
   box-shadow: 0px 2px 5px -2px #fff inset;
}

.tab .tab_item.on a {
   color: #fff;
}

.btn_listen{
   background: url('../../images/btn_listen.png') no-repeat;
   width: 180px;
   height: 88px;
   background-size: 100%;
   background-position: center center;
   cursor: pointer;
   display: inline-block;
   animation: blink 1.5s ease infinite;
   display: inline-block;
   position: relative;
   top: -5px;
}

.btn_listen.on {
    pointer-events: none !important;
}

@keyframes blink{
   from{
       opacity: 1;
   }
   50%{
       opacity: 0.3;
   }
   to{
       opacity: 1;
   }
}

.btn_listen:hover{
   background: url('../../images/btn_listen_h.png') no-repeat;
   background-size: 100%;
   animation: none;
}

.btn_listen.on{
   background: url('../../images/btn_listen_on.png') no-repeat;
   background-size: 100%;
   position: relative;
   animation: none;
}

.btn_listen.on::before{
   content: "";
   display: inline-block;
   width: 46px;
   height: 42px;
   background: url(../../images/btn_listen_audio.png) no-repeat;
   background-size: 100%;
   position: absolute;
   top: 20px;
   left: 24px;
   animation: blink 1.5s ease infinite;
}

/* 문제는 순서대로 풀어야 해요 */
.tab_balloon{
   position: absolute;
   bottom: 15px;
   left: 475px;
   display: none;
   /* display: block !important; */
}

.tab_balloon1{
   left: 363px;
}
.tab_balloon2{
   left: 444px;
}
.tab_balloon3{
   left: 524px;
}

.tab_balloon::before{
   content: "";
   display: block;
   position: absolute;
   top: -23px;
   left: 176px;
   width: 29px;
   height: 25px;
   background: url(../../images/ballon_tail1.png) no-repeat;
   background-size: 100%;
   transform: rotate(180deg);
}

.tab_balloon::after{
   content: "";
   display: block;
   position: absolute;
   top: -14px;
   left: 176px;
   width: 0;
   height: 0;
   border-bottom: 18px solid #fff;
   border-left: 14px solid transparent;
   border-right: 14px solid transparent;
}

.tab_balloon p{
   font-family: 'Pretendard-SemiBold';
   font-size: 30px;
   background-color: #fff;
   border: 3px solid #323232;
   padding: 10px 20px;
   border-radius: 35px;
}

/* 듣고 문제를 푸세요 */
.listen_balloon{
   position: absolute;
   top: 13px;
   left: 130px;
   display: none;
   /* display: block !important; */
}

.listen_balloon p{
   font-family: 'Pretendard-SemiBold';
   font-size: 30px;
   background-color: #fff;
   border: 3px solid #323232;
   padding: 10px 20px;
   border-radius: 35px;
}

.listen_balloon::before{
   content: "";
   display: block;
   position: absolute;
   bottom: -17px;
   left: 54px;
   width: 48px;
   height: 22px;
   background: url(../../images/ballon_tail2.png) no-repeat;
   background-size: 100% 100%;
   transform: rotateX(180deg);
}

/* .listen_balloon::after{
   content: "";
   display: block;
   position: absolute;
   top: -14px;
   left: 100px;
   width: 0;
   height: 0;
   border-bottom: 20px solid #f9efe3;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
} */

/* reaction */
.reaction{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('../images/end_bg.jpg') no-repeat;
   background-size: 100% 100%;
   display: none;
}

.reaction .reaction_img{
   position: absolute;
   bottom: 357px;
   right: 820px;
   width: 300px;
}

/* endPop */
#endPop{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   /* background: url('../images/end_bg.jpg') no-repeat;
   background-size: 100% 100%; */
   display: none;
}

/* .dim{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
} */

.btn_wrap{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.btn_wrap button{
   cursor: pointer;
   border: none;
   display: block;
}

.btn_retry {
   background: url('../../images/btn_retry.png');
   width: 350px;
   height: 180px;
   background-size: 100%;
}

.btn_main {
   background: url('../../images/btn_main.png');
   width: 350px;
   height: 180px;
   background-size: 100%;
}

.ls-10{
   letter-spacing: -1px;
}
.ls-20{
   letter-spacing: -2px;
}

.q_wrap{
   display: flex;
   justify-content: center;
   height: 535px;
   align-items: center;
   gap: 60px;
}

/* 정답 버튼 */
.btn_answer {
   width: 226px;
   height: 82px;
   background: url(../../images/btn_answer.png) no-repeat;
   background-size: contain;
   border: none;
   cursor: pointer;
   position: absolute;
   bottom: 87px;
   right: 45px;
}

/* 따라 읽기 */
.btn_read {
   width: 226px;
   height: 82px;
   background: url(../../images/btn_read.png) no-repeat;
   background-size: contain;
   border: none;
   cursor: pointer;
   position: absolute;
   bottom: 87px;
   right: 45px;
   display: none;
}
.btn_read.read_on{
   animation: blink 1.5s ease infinite;
}

/* 따라 말하기 */
.btn_repeat {
   width: 250px;
   height: 82px;
   background: url(../../images/btn_repeat.png) no-repeat;
   background-size: contain;
   border: none;
   cursor: pointer;
   position: absolute;
   bottom: 87px;
   right: 45px;
   /* display: none; */
}

/* .btn_repeat:hover {
   background: url(../images/popup/JumpUp/btn_repeat_h.png) no-repeat;
} */

.repeatSayPopArea {
   background: #000000a6;
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 200;
   top: 0;
   display: none;
}

.repeatSayPopArea .rps_close {
   background: url(../../images/icon_close.png) no-repeat;
   background-size: contain;
   border: none;
   width: 70px;
   height: 70px;
   position: absolute;
   right: 10px;
   top: 10px;
   cursor: pointer;
}

.repeatPop,
.sayPop {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 650px;
   height: 405px;
   background-color: #fff;
   border-radius: 30px;
   border: 6px solid #DEF1EF;
   text-align: center;
}

.sayPop {
   display: none;
}

.repeatPop .rp_button {
   background: url(../../images/btn_mic.png) no-repeat;
   background-size: contain;
   cursor: pointer;
   width: 165px;
   height: 165px;
   margin-top: 80px;
   border: none;
}

.repeatPop.recording .rp_button {
   animation: playing 1s infinite;
}

.sayPop .s_button {
   background: url(../../images/btn_headset.png) no-repeat;
   background-size: contain;
   cursor: pointer;
   width: 165px;
   height: 165px;
   margin-top: 80px;
   border: none;
}

.repeatPop .rp_button:hover,
.sayPop .s_button:hover {
   transform: scale(1.02);
}

.sayPop .s_button.playing {
   animation: playing 1s infinite;
}

.rp_message,
.s_message {
   font-size: 34px;
   font-family: 'Pretendard-Bold';
   margin-top: 15px;
}

.rp_message::after {
   content: '버튼을 누르고 따라 말해 보세요.';
}

.repeatPop.recording .rp_message::after {
   content: '녹음 중...';
}

.reveal_container .revealitem {
   opacity: 0;
}

.reveal_container2 .revealobj {
   cursor: pointer;
}

.reveal_container2 .revealitem {
   opacity: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.btn_conf {
   background: url(../images/btn/btn_conf.png) no-repeat;
   width: 180px;
   height: 70px;
}

audio {
   /* border-radius: 90px; */
   width: 1600px;
   height: 90px;
   margin-top: 5px;
   margin-bottom: 5px;
}

/* 따라 읽기 텍스트 */
.btn_read_txt{
   position: absolute;
   top: -70px;
   right: -500px;
   font-size: 60px;
   color: #ff383a;
   display: none;
   font-family: 'Pretendard-Bold';
   text-shadow:-3px -3px 0 #fff,0 -3px 0 #fff,3px -3px 0 #fff,3px 0 0 #fff,3px 3px 0 #fff,0 3px 0 #fff,-3px 3px 0 #fff,-3px 0 0 #fff;
}