@charset "utf-8";

/* 공통 css */
body.userNone { user-select: none; }
body .bunsu_stick {color:#000; font-family: 'PretendardB';}
.bunsu_stick.on {    background: #f8f8f8;
}
.cont_box {display: none;}
.cont_box.show {display: block;}

.tab_title {margin-top: 60px; margin-left: 60px;}

/* 하단 버튼 관련 */
.bottom_wrap {position: absolute; bottom: 100px; right: 220px; }
.bottom_wrap > div { gap: 20px; position: absolute; top: 0; left: 0; display: flex;}
.bottom_wrap > div .retry_btn,
.bottom_wrap > div .okay_Btn {display: none;}

.bottom_wrap > div.final_page .retry_btn,
.bottom_wrap > div.final_page .okay_Btn { display: block; }

.bottom_wrap > div.final_page .cancel_Btn,
.bottom_wrap > div.final_page .next_Btn { display: none; }

.bottom_wrap button {  display: inline-block; width: 92px; height: 48px; font-size: 16px; line-height: 48px; letter-spacing: -0.025em; font-family: 'PretendardSB'; text-align: center; border-radius: 48px; border: 1px solid rgba(96, 52, 199, .3); color: rgba(96, 52, 199, .3); pointer-events: none;}

.bottom_wrap > div.on button { transition: all .3s; cursor: pointer; color: #6034c7; border: 1px solid #6034c7; pointer-events: auto;}

/* 분수 박대 공통 css */
.stick_box {display: flex; width: 450px; flex-direction: column; }

.stick_box .stick {display: flex; width: 450px;} 
.stick_box .stick > div { font-size: 14px; height: 50px; position: relative; border-top:  1px solid; border-bottom: 1px solid; border-right: 1px solid; background-color: #e3e3e3; border-color: #a9a9a9;}
.stick_box .stick > div:first-of-type {border-left: 1px solid #a9a9a9;}

.stick_box .stick1 > div {width: 100%; border-left: 1px solid;}
.stick_box .stick1 > div.on:first-of-type {border-left: 1px solid #d8472c;}
.stick_box .stick1 > div.on {background-color: #ff5230; border-color: #d8472c; }

.stick_box .stick2 > div {width: calc(100% / 2);}
.stick_box .stick2 > div.on:first-of-type {border-left: 1px solid #ed8000;}
.stick_box .stick2 > div.on {background-color: #ffa200; border-color: #ed8000; }

.stick_box .stick3 > div { width: calc(100% / 3);}
.stick_box .stick3 > div.on:first-of-type {border-left: 1px solid #d99e00;}
.stick_box .stick3 > div.on {background-color: #ffd013; border-color: #d99e00; }

.stick_box .stick4 > div { width: calc(100% / 4);}
.stick_box .stick4 > div.on:first-of-type {border-left: 1px solid #70a42e;}
.stick_box .stick4 > div.on {background-color: #93c300; border-color: #70a42e;}

.stick_box .stick5 > div {width: calc(100% / 5);}
.stick_box .stick5 > div.on:first-of-type {border-left: 1px solid #007aeb;}
.stick_box .stick5 > div.on {background-color: #24abf1; border-color: #007aeb;  }

.stick_box .stick6 > div {width: calc(100% / 6);}
.stick_box .stick6 > div.on:first-of-type {border-left: 1px solid #005dc5;}
.stick_box .stick6 > div.on {background-color: #2e82ff; border-color: #005dc5;  }

.stick_box .stick7 > div { width: calc(100% / 8);}
.stick_box .stick7 > div.on:first-of-type {border-left: 1px solid #4526ca;}
.stick_box .stick7 > div.on {background-color: #7f62ff; border-color: #4526ca; }

.stick_box .stick8 > div { width: calc(100% / 10);}
.stick_box .stick8 > div.on:first-of-type {border-left: 1px solid #6a22c3;}
.stick_box .stick8 > div.on {background-color: #9f52ff; border-color: #6a22c3; }

.stick_box .stick9 > div { width: calc(100% / 12);}
.stick_box .stick9 > div.on:first-of-type {border-left: 1px solid #8b1aba;}
.stick_box .stick9 > div.on {background-color: #c251f0; border-color: #8b1aba; }

/* 분수 막대 한 분수 text */
.bunsu_text .bar {width: 20px; height: 1.5px; background-color: #000; border-radius: 1px;}
.bunsu_text {display: flex;  flex-direction: column; justify-content: center; align-items: center;}
.stick_box .stick > div .bunsu_text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex;  flex-direction: column; justify-content: center; align-items: center; }
.stick_box .stick > div .bunsu_text .bar {width: 15px; height: 1px; background-color: #000; border-radius: 1px;}


/* intro_cont */
.intro_cont .stick_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}



/* 단위 분수 알아보기 (cont1) */

/* cont1 분수 막대 css */
.cont_box.cont1 .stick_box {position: absolute; top: 50%; transform:translateY(-50%); left: 140px;}
.cont_box.cont1 .stick_box .stick_bunsu .bunsu_text {display: none;}
.cont_box.cont1 .stick_box .stick_bunsu.on .bunsu_text {display: flex;}

.cont_box.cont1 .drag_box {width: 450px; display: flex; flex-direction: column; position: absolute; top: 50%; right: 140px; transform: translateY(-50%);}

/* 우축 드래그 되는 막대 css */
/* 1 */
.cont_box.cont1 .drag_box .non_drag { height: 50px; border: 1px solid; position: relative; width: 100%; background-color: #ff5230; border-color: #d8472c;}
.cont_box.cont1 .drag_box .non_drag .bunsu_text {height: 100%;}
.bunsu_stick .drag_item { height: 50px; border: 1px solid; position: relative; cursor: pointer;}
.bunsu_stick .drag_item > * { pointer-events: none; }
.bunsu_stick .drag_item1 {width: calc(450px / 2); background-color: #ffa200; border-color: #ed8000; }
.bunsu_stick .drag_item2 {width: calc(450px / 3); background-color: #ffd013; border-color: #d99e00; }
.bunsu_stick .drag_item3 {width: calc(450px / 4); background-color: #93c300; border-color: #70a42e; }
.bunsu_stick .drag_item4 {width: calc(450px / 5); background-color: #24abf1; border-color: #007aeb; }
.bunsu_stick .drag_item5 {width: calc(450px / 6); background-color: #2e82ff; border-color: #005dc5; }
.bunsu_stick .drag_item6 {width: calc(450px / 8); background-color: #7f62ff; border-color: #4526ca; }
.bunsu_stick .drag_item7 {width: calc(450px / 10); background-color: #9f52ff; border-color: #6a22c3; }
.bunsu_stick .drag_item8 {width: calc(450px / 12); background-color: #c251f0; border-color: #8b1aba; }
.bunsu_stick .drag_item.off { background-color: #e3e3e3; pointer-events: none; border: 1px solid #a9a9a9;}

.bunsu_stick > .drag_item { position: absolute; }
/* 우측 막대 한 분수 text */
.bunsu_stick .drag_item .bunsu_text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }

/* 활동 후 결과 text_box */
.cont_box.cont1 .text_box {width: 450px; height: 450px; position: absolute; top: 0; left: 0; border: 2px solid #6a22c3; background-color: rgba(255,255,255,0.8); display: none; justify-content: center; align-items: center; font-size: 30px;} 
.cont_box.cont1 .text_box.on {display: flex; gap: 3px;}
.cont_box.cont1 .text_box .bunsu_text {margin: 0 3px;}
.cont_box.cont1 .text_box .number_text {margin-left: 3px;}

/* -------------------- 단위 분수 알아보기 (cont1) end --------------- */

/* 분모가 같은 분수의 크기 비교하기 (cont2) */
/* 좌측 분수 막대 */
.cont_box.cont2 .stick_box {position: absolute; top: 50%; transform:translateY(-50%); left: 140px;}
.cont_box.cont2 .stick_box .stick {position: relative;}

/* 가져 오기 버튼 */
.cont_box.cont2 .stick_box .select_box {position: absolute; top: 50%; left: 470px; transform: translateY(-50%); background-color: transparent; border: none; display: flex;  align-items: center; gap: 10px; width: auto;}
/* 분수 가져오기 하기 시작하면 다른 select_box에 off 추가 */
.cont_box.cont2 .stick_box .select_box.off {display: none;} 
.cont_box.cont2 .stick_box .select_box .arrow_box { width: 60px; height: 30px; border-radius: 15px; border: 2px solid #6a22c3; display: flex;  align-items: center; justify-content: center; gap: 20px; background-color: #efeaf9;}
.cont_box.cont2 .stick_box .select_box .arrow_box .arrow_btn {width: 7px; height: 10px; background-image: url(../images/bunsu_stick/arrow_btn.png); background-size: 100% 100%; cursor: pointer;}
.cont_box.cont2 .stick_box .select_box .arrow_box .arrow_btn.up_arrow {transform: rotate(180deg);}

/* 화살표 버튼 off - 아무것도 안 채웠을 때는 down_arrow에 off, 최대 치로 올리면 up_arrow에 off 추가 */
.cont_box.cont2 .stick_box .select_box .arrow_box .arrow_btn.off {opacity: 0.5; pointer-events: none;}


.cont_box.cont2 .stick_box .select_box .get_btn {padding: 10px; color:#fff; background-color: #6034c7; border-radius: 5px; font-family: 'PretendardB'; cursor: pointer; display: none; width: 67px;}
.cont_box.cont2 .stick_box .select_box.getOn .get_btn { display: block; }

/* 가져오기 했을 때 나오는 부등호 컨텐츠 */
.cont_box.cont2 .result_box {width: 390px; height: 450px; position: absolute; top: 50%; transform: translateY(-50%); right: 140px;  justify-content: center; align-items: center; gap: 20px; display: none;}
.cont_box.cont2 .result_box.on {display: flex;}

/* 두 분수 모두 채우면 cont2에 done 클래스 추가 -> 가져오기 버튼 사지고, 좌측 분수 막대 페이지에 result_text 노출 */
.cont_box.cont2.done .result_box {right: 170px; transition: right  1s;}
.cont_box.cont2.done .stick_box .select_box {display: none;}
.cont_box.cont2 .result_box .bunsu_box {width: 80px; height: 100px; background-color: #f2f2f2; font-size: 30px; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: transparent; pointer-events: none;}
.cont_box.cont2 .result_box .bunsu_text .bar {background-color: transparent;}
.cont_box.cont2 .result_box .bunsu_box.on { color: #000; pointer-events: auto; }
.cont_box.cont2 .result_box .bunsu_box.on .bunsu_text .bar {background-color: #000;}

.cont_box.cont2 .result_box .sign_box {width: 60px; height: 60px; border-radius: 50%; border: 2px solid #6034c7; position: relative;}
.cont_box.cont2 .result_box .sign_box img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; display: none;}

.cont_box.cont2 .result_box .sign_box.bigger, 
.cont_box.cont2 .result_box .sign_box.equal, 
.cont_box.cont2 .result_box .sign_box.smaller {
    background-color: #6034c7;
} 

/* 부등호 animation 이미지 */
.cont_box.cont2 .result_box .sign_box.bigger img:nth-child(1) {display: block;}
.cont_box.cont2 .result_box .sign_box.equal img:nth-child(2) {display: block;}
.cont_box.cont2 .result_box .sign_box.smaller img:nth-child(3) {display: block;}

/* 우측 결과 result_text */
.cont_box.cont2.done .result_text {display: flex; flex-direction: column; } 
.cont_box.cont2 .result_text {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f2f2f2; display: none;}
.cont_box.cont2 .result_text.on { display: block; }
.cont_box.cont2 .result_text .one_stick {width: 100%; height: 50px; background-color: #ff5230; border-color: #d8472c; border-left: 1px solid #d8472c; text-align: center; line-height: 50px;}
.cont_box.cont2 .result_text .result_stick {width: 100%; height: 50px;}
.cont_box.cont2 .result_text .result_stick > div {border-top:  1px solid; border-bottom: 1px solid; border-right: 1px solid; position: relative; display: inline-block; height: 100%;}
.cont_box.cont2 .result_text .result_stick > div:first-of-type {border-left: 1px solid;}
.cont_box.cont2 .result_text .result_stick[data-rstick="2"] > div {background-color: #ffa200; border-color: #ed8000; width: calc(100% / 2);}
.cont_box.cont2 .result_text .result_stick[data-rstick="3"] > div {background-color: #ffd013; border-color: #d99e00; width: calc(100% / 3);}
.cont_box.cont2 .result_text .result_stick[data-rstick="4"] > div {background-color: #93c300; border-color: #70a42e; width: calc(100% / 4);}
.cont_box.cont2 .result_text .result_stick[data-rstick="5"] > div {background-color: #24abf1; border-color: #007aeb; width: calc(100% / 5);}
.cont_box.cont2 .result_text .result_stick[data-rstick="6"] > div {background-color: #2e82ff; border-color: #005dc5; width: calc(100% / 6);}
.cont_box.cont2 .result_text .result_stick[data-rstick="8"] > div {background-color: #7f62ff; border-color: #4526ca; width: calc(100% / 8);}
.cont_box.cont2 .result_text .result_stick[data-rstick="10"] > div {background-color: #9f52ff; border-color: #6a22c3; width: calc(100% / 10);}
.cont_box.cont2 .result_text .result_stick[data-rstick="12"] > div {background-color: #c251f0; border-color: #8b1aba; width: calc(100% / 12);}
.cont_box.cont2 .result_text .result_stick[data-rstick="2"] > div .bunsu_text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.cont_box.cont2 .result_text .text {font-size: 30px;}
.cont_box.cont2 .result_text .text > div {margin-top: 20px; display: flex; align-items: center; gap: 5px; padding: 0 10px;}

/* 가이드 추가 */
.guide_char {width: 187px; height: 126px; position: absolute; top: 540px; left: 830px;}
.guide_char.off {display: none;} 
.guide_char img {width: 100%; height: 100%;}
.guide_char .guide_text {padding: 10px; border-radius: 20px 20px 20px 0; background-color: #000; color: #fff; width: 233px; position: absolute; top: -40px; left: 150px; display: none;}
.guide_char .guide_text:nth-of-type(2) { width: 205px; }
.guide_char[data-text="0"] .guide_text:nth-of-type(1) { display: block; }
.guide_char[data-text="1"] .guide_text:nth-of-type(2) { display: block; }