@charset "utf-8";

/*
* Copyright 2022 WoongjinThinkbig Mathpid TX-PJT Team Authors All rights reserved.
*
* Licensed under the WoongjinThinkbig.
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.wjthinkbig.co.kr/en/index.do
*/

:root{
	--bulletColor:#00bcfe;
	--gradationStart:#0098fd;
	--gradationEnd:#5a8bee;
	--moreBadgeBg:#00bcfe;
	--targetRing:#26CDFE;
	--icon_main:#0ACEFF;
	--icon_yellow:#FDDA61;
	--icon_sub_01:#9974FD;
	--icon_sub_02:#D1F1F9;
	--whiteColor:#ffffff;
	--topicGradationStart:#7061e5;
	--topicGradationEnd:#6460f0;
	--arithmetic_icon:#00bcfe;
	--subActive:#3d90f3;
	--countrySelectBg:#f2f7ff;
	--checkColor:#3d90f3;
	--scrollBar:#3d83ea;	
	--coureLevelBg : #10b3fa;
	--currentSubjectBgStart:#0098fd;
	--currentSubjectBgEnd:#5a8bee;
	--courseLine:#b8d4f8;
	--incorrect_list_text:#bfcfe7;
	--incorrect_list_bg:#7eb0f6;
	--trans_qna_card:#568eea;
	--point_yellow:#ffbe30;
	--point_yellow_g_start:#ffc445;
	--point_yellow_g_end:#ffca39;
	--disabled_bg:#BFCFE7;
	--disabled_text:#F0F6FF;
	--pressed_bg:#3375DB;
	--pressed_text:#FFFFFF;
	--checkedColor:#1495fa;
	--borderRadius:20px;
	--btnRadius:1.9em;
	--contentColor:#458ef1;
	--boxBg:#f0f6ff;
	--btnColor:#397dd9;
	--swicthPoint:#458ef1;
	--contentSubColor:#458ef1;
	--contentGap10:10px;
	--contentGap15:15px;
	--contentGap20:20px;
	--contentGap25:25px;
	--contentGap30:30px;
	--contentGap35:35px;
	--contentGap40:40px;
	--contentGap50:50px;
	--subText:#458ef1;
	--primaryColor:#458ef1;
	--secondaryColor: #f2f7ff;
}

body{margin:0 auto; width:100%;  overflow-x: hidden; font-family: 'NotoSans', 'NotoSansCJK_KR', sans-serif; word-break: keep-all; color: #303030; /* font-size:1.4rem; font-weight: 400; line-height: 1.43; */ background-color: #f3f3f3;  }
body.none_scroll{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
button{border:none; background:none; outline:none; cursor: pointer; color: #303030; font-size: inherit;}
a{color:#303030; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }

#root{height:100%}
/* 아이폰 마이너스 스크롤 방지 */
body.ios{position: fixed; overflow: hidden;}
body.ios > #root{width: 100vw; height: 100vh; -webkit-overflow-scrolling: touch; }
/* 아이폰 이중 스크롤 이슈 */
body.ios.touch_disabled > #root{-webkit-overflow-scrolling: auto; }
body.ios.touch_disabled .container{overflow-y: hidden;}
/* 2023.03.23 이미지로드 test */
.main_page.no_image img,
.main_page.no_image svg,
.main_page.no_image object{display: none;}

.ko{font-family:'NotoSansCJK_KR','NotoSans', sans-serif;}
.font_cambria{font-family: 'cambria', sans-serif;}
.clearfix::after {content: ""; clear: both; display: table;}
.mt0{margin-top: 0 !important;}
.canvas{width: 100% !important; height: 100% !important;}
.qz .canvas > * {height: unset !important;width: unset !important;}
/* srceen reader only */
.sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}

#skip > a{width: 1px; height: 1px; position: absolute; left: -10000px; top: auto; overflow: hidden; display:block;}
#skip > a:hover,
#skip > a:focus, 
#skip > a:active{position:fixed; top:0; left:0; padding:20px; display:block; width:100%; height:auto; font-size: 16px; text-align: center; color:#ffffff; background:#555555; z-index: 9999;}

/* text 생략 */
.text_line_ellipsis{overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.text_dline_ellipsis{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5em; height: 3em; }
.text_tline_ellipsis{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5em; height: 4.5em; }
.text_ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5em; height: 3em;}

/* Header */
header{padding:15px 0 8px; width:100%; background-color: #f3f3f3; box-sizing: border-box; z-index:999; }
header .header_wrap{position:relative; padding:0 20px; display:flex; justify-content: space-between; align-items: center; min-height:24px}
header .right_inner{position: relative;}

/* Sub header */
.sub_page header{padding: 19px 0 12px; min-height: 55px; z-index: inherit; background-color: transparent;}
.sub_page header .sub_title{display: flex; align-items: center; font-size: 10px;}
.sub_page header .sub_title i{width: 2.4em; height: 2.4em; font-size: inherit;}
.sub_page header .sub_title .text_wrap{margin-left:1em; display: flex; align-items: center; gap:0 1em;}
.sub_page header .sub_title .text_wrap h2{line-height: 1.26; letter-spacing: -0.01px; color:#ffffff; font-size: 1.8em;}
.sub_page.acc header .sub_title .text_wrap h2,
.sub_page.login header .sub_title .text_wrap h2,
.sub_page.pr header .sub_title .text_wrap h2,
.sub_page.cs header .sub_title .text_wrap h2{color: #303030;}

/* Layout */
.wrap{width:100%; margin:0 auto; padding:0 2rem; box-sizing: border-box;}
.container{overflow-x: hidden; overflow-y: auto; height:calc(100vh - 76px); scrollbar-width: none;}
body:not(.pc_mode) .container::-webkit-scrollbar {display: none;}
.sub_page .container{position: relative; margin-top:15px; height:calc(100vh - 70px); background-color:#f5f5f5; border-radius: var(--borderRadius) var(--borderRadius) 0 0;}
.main_contents{width:100%; box-sizing: border-box;}
.btn_wrap {display: flex; justify-content: center; margin-top: 15px;}
/* PC 모드(모바일 브라우저 포함)일때 스크롤 보임 */
body.pc_mode .main_page .container{min-height:auto}
/* root, font inherit 대응, 기존 페이지는 px / 신규페이지는 rem */
.sub_page, .ab, .ob, .premium_popup, .purchase, .error_wrap, .system_wrap{font-size:14px;}
.main_page,
.sub_page.myclass,
.sub_page.outcome,
.sub_page.mathgames,
.sub_page.report.ai_on,
.sub_page.resting,
.sub_page.customer,
.sub_page.slider_page{font-size: 1.4rem;}

/* Sub pages */
.acc, .login, .resting{background-color: #ffffff; min-height: 100vh; overflow-y: auto;}
.pr .container{margin-top:0; height: calc(100vh - 55px); border-radius:0;}
.acc .container,
.login .container{margin-top:0; height: calc(100vh - 55px); background-color:#fff; border-radius:0;}
/* s: 삭제 예정 */
/* .cs{background-color: #ffffff; min-height: 100vh; overflow-y: auto;}
.cs .container{margin-top:0; height: calc(100vh - 55px); background-color:#fff; border-radius:0;} */
/* e */

/* 스크롤 시 상단 버튼 */
.sub_scrolltop_obj.sticky{position: fixed !important; left:0; padding:0 20px;}

i > object{width:100%; font-size:0; line-height: 1em;}
i > img{width:100%;}
/* icon size, color */
/* 기존페이지의 아이콘 적용을 위해 폰트 사이즈 px, em 사용 */
.icon_12{font-size:10px; width:1.2em; height:1.2em;}
.icon_16{font-size:10px; width:1.6em; height:1.6em;}
.icon_18{font-size:10px; width:1.8em; height:1.8em;}
.icon_20{font-size:10px; width:2em; height:2em;}
.icon_22{font-size:10px; width:2.2em; height:2.2em;}
.icon_24{font-size:10px; width:2.4em; height:2.4em;}
.icon_26{font-size:10px; width:2.6em; height:2.6em;}
.icon_28{font-size:10px; width:2.8em; height:2.8em;}
.icon_32{font-size:10px; width:3.2em; height:3.2em;}
.icon_40{font-size:10px; width:4em; height:4em;}
.icon_45{font-size:10px; width:4.5em; height:4.5em;}
.icon_48{font-size:10px; width:4.8em; height:4.8em;}
.icon_50{font-size:10px; width:5.0em; height:5.0em;}
.icon_56{font-size:10px; width:5.6em; height:5.6em;}
.icon_64{font-size:10px; width:6.4em; height:6.4em;}
.icon_70{font-size:10px; width:7.0em; height:7.0em;}
.icon_90{font-size:10px; width:9.0em; height:9.0em;}
.icon_100{font-size:10px; width:10.0em; height:10.0em;}
.icon_112{font-size:10px; width:11.2em; height:11.2em;}
.icon_128{font-size:10px; width:12.8em; height:12.8em;}
.icon_150{font-size:10px; width:15.0em; height:15.0em;}
.btn-icon-16 {
	width: 1rem;
	height: 1rem;
}

/* 컨텐츠별 (신규페이지는 rem으로) */
.btn_open_bubble i[class*="icon_"],
.btn_close_bubble i[class*="icon_"]{font-size:1rem;}
.main_page i[class*="icon_"],
.outcome i[class*="icon_"],
.myclass i[class*="icon_"],
.customer i[class*="icon_"],
.mathgames i[class*="icon_"]{font-size:1rem;}

[class*='btn-icon-'] > i{width:100%; height:100%; background-size: contain; background-position: center;}
/*모더레이터*/
.facilitatorWrap{position: absolute; bottom:0; left:0; z-index: 99; display: flex; justify-content: center; width:100%; padding:20px 25px 20px;  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f5f5f5); box-sizing: border-box;}
.facilitatorWrap .facilitator{position: relative; margin:0 auto; border-radius: var(--borderRadius);  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.3); }
/*모더레이터 타입 1 character + text*/
.facilitatorWrap .facilitator.facilitatorType01{ background-image: -moz-linear-gradient(103deg, var(--gradationStart), var(--gradationEnd)); background-image: linear-gradient(104deg, var(--gradationStart), var(--gradationEnd));width: 582px; display: flex; align-items: center; justify-content: space-between; padding: 20px 30px;}
.facilitatorWrap .facilitator.facilitatorType01 a{padding-left: 15px; width: 100%}
.facilitatorWrap .facilitator.facilitatorType01 i{width: 58px; height: 48px;}
.facilitatorWrap .facilitator.facilitatorType01 .img_wrap{position: absolute; bottom:0; left:-8px;}
.facilitatorWrap .facilitator.facilitatorType01 .img_wrap figure{width:120px;}
.facilitatorWrap .facilitator.facilitatorType01 .text_wrap{display: flex; align-items: center; justify-content: space-between;  font-size:16px;  }
.facilitatorWrap .facilitator.facilitatorType01 .text_wrap p{margin-right:10px; color:#ffffff; line-height: 1.5; font-weight: bold;}
.facilitatorWrap .facilitator.facilitatorType01 .text_wrap i{display: block; width:16px; height:16px; flex-shrink: 0;}
/*모더레이터 타입 2 text*/
.facilitatorWrap .facilitator.facilitatorType02{padding:0 20px 0 10px; display: flex; background-color: #ffffff; }
.facilitatorWrap .facilitator.facilitatorType02 .img_wrap{flex-shrink: 0; margin-right:15px; width:64px; height:64px;}
.facilitatorWrap .facilitator.facilitatorType02 .text_wrap{width:100%; display: flex; align-items: center;}
.facilitatorWrap .facilitator.facilitatorType02 .text_wrap p{font-size:16px; font-weight: bold; line-height: 1.5; color:var(--subText);}
/* Theme 아이콘 */
.icon_theme{background-color: var(--contentColor); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat ; mask-position: center; -webkit-mask-position: center;}
/* 이미지 */
.icon_video{mask-image: url("../images/common/icon_all_s_24_video_blue_solid.svg"); -webkit-mask-image: url("../images/common/icon_all_s_24_video_blue_solid.svg"); }
.icon_worksheet{mask-image: url("../images/common/icon_all_s_24_worksheet_regular_blue.svg"); -webkit-mask-image: url("../images/common/icon_all_s_24_worksheet_regular_blue.svg");}
.icon_retry{mask-image: url("../images/svg/icon_retry.svg"); -webkit-mask-image: url("../images/svg/icon_retry.svg");}
.icon_hw_white{mask-image: url("../images/svg/icon_hw_white.svg"); -webkit-mask-image: url("../images/svg/icon_hw_white.svg"); background-color: var(--disabled_bg)}
.icon_more{mask-image: url("../images/result/icon-mo-s-12-arrow-right-regular-gray.svg"); -webkit-mask-image: url("../images/result/icon-mo-s-12-arrow-right-regular-gray.svg");}
.icon_slcheck{mask-image: url("../images/common/w_check_icon_16.svg"); -webkit-mask-image: url("../images/common/w_check_icon_16.svg");}
.icon_arrow{mask-image: url("../images/common/black_arrow_16.svg"); -webkit-mask-image: url("../images/common/black_arrow_16.svg");}
.icon_time{mask-image: url("../images/my_class/icon_time.svg"); -webkit-mask-image: url("../images/my_class/icon_time.svg");}
.icon_overdue{background: url("../images/my_class/icon_overdue.svg") no-repeat; background-size: contain;}
.ico-delete-input{background-image: url('../images/svg/form_input_del.svg');}
.icon_planner{background-image: url('../images/svg/icon_planner.svg');}
.icon_report{background-image: url('../images/svg/icon_report.svg');}

/* Buttons style */
.btn_white{display: flex; justify-content: center; align-items: center; gap: 0 5px; background:#fff;}
.btn_white > span{color: inherit;}
.btn_primary{display: flex; justify-content: center; align-items: center; gap: 0 5px; background-image: linear-gradient(103deg, var(--gradationStart), var(--gradationEnd));}
.btn_primary > span{color: #fff;}
.btn_default{display: flex; justify-content: center; align-items: center; gap: 0 5px; background-color:#999;}
.btn_default > span{color: #fff;}
.btn_point{display: flex; justify-content: center; align-items: center; gap: 0 5px; background-image: linear-gradient(to right, var(--point_yellow_g_start), var(--point_yellow_g_end));}
.btn_point > span{color: #303030; font-weight: 700; line-height: 1.5;}
.btn_info{display: flex; justify-content: center; align-items: center; background:var(--boxBg);}
.btn_info > span{color: var(--btnColor);}
.btn_trans{display: flex; justify-content: center; align-items: center; background:rgba(255, 255, 255, .2); border-radius: 1.4rem;}
.btn_trans > span{color: #fff;}
/* txt type */
.btn_txt{display:flex; align-items: center; gap:.357em; justify-content: center; font-size:1rem}
.btn_txt > span{color:#666; white-space: nowrap; font-size:1.4em}
.btn_txt > i{width:1.6em; height:1.6em; font-size: inherit;}
.btn_txt_link{display:flex; align-items: center; gap:.214em; justify-content: center;}
.btn_txt_link > span{text-decoration: underline;}
/* size */
.btn_mid{font-size: 1.6rem; height:3.8rem; max-height:60px; padding:0 1.2em; border-radius: var(--btnRadius);}
.btn_mid > span{font-weight: 700; line-height: 1.5;}
.btn_lg{font-size: 1.6rem; height:5rem; max-height:68px; padding:0 1.25em; border-radius: var(--btnRadius);}
.btn_lg > span{font-weight: 700; line-height: 1.5;}
/* btn_info 예외 */
.btn_info.btn_sm{height:3.5rem; padding:0 1.8em; border-radius: 1.7rem;}
.btn_info.btn_sm > span{font-weight: 700; line-height: 1.43; font-size:1.4rem;}
.btn_info.btn_mid{height:3.8rem; padding:0 1.5em; border-radius: 1.9rem;}
.btn_info.btn_mid > span{font-weight: 700; line-height: 1.5; font-size:1.6rem;}
/* more */
.btn_more_list{font-size:10px; height:3.5em; padding:0 1em 0 1.5em; border-radius: var(--borderRadius); box-shadow: 0 5px 15px 0 rgb(0 0 0 / 2%);}
.btn_more_list > span{font-size:1.2em; font-weight: 700; line-height: 1.2; color:var(--contentColor);}
.btn_more_list > i{width:1.2em; height:1.2em; font-size: inherit;}
/* wing */
.wing_val{display:inline-flex; align-items: center; margin-left:5px;}
.wing_val .val{font-size:1.4rem; color:#fff; font-weight: 700;}
.wing_val .icon_unlimited{font-size:10px; width:4.5em; height:3.5em}

/* Bubble tip 말풍선 */
.bubble_tip{position:absolute; font-size:1rem; top:calc(100% + 1.5em); right:0; z-index: 100; padding:1em; width:calc(100vw - 4em); max-width: 25.5em; border-radius: var(--borderRadius); background-color: var(--point_yellow); transform: translateY(0); opacity: 1; visibility: visible; transition: transform, opacity, visibility, 0.5s; display: flex; gap: 0.5rem; justify-content: space-between;}
.bubble_tip .buble_arrow{content:""; position:absolute; bottom:100%; right:30px; display:block ; width:0px; height:0px; border-left:.6em solid transparent; border-right:.6em solid transparent; border-bottom:1em solid var(--point_yellow); }
.bubble_tip > p,
.bubble_tip > div{font-weight:bold; font-size: 1.2em; line-height:1.43; text-align: center;}
.bubble_tip > .text_left{text-align: left; padding-left:.5em}
.bubble_tip .desc_list{text-align: left; font-weight: normal; padding:0 .5em; font-size: 1em;}
.bubble_tip .desc_list li + li{margin-top:1em}
.bubble_tip .desc_list li > strong{font-weight: 700;}
.bubble_tip.hidden{transform: translateY(1em); opacity: 0; visibility: hidden; }
.bubble_tip .btn_close_bubble{align-self: flex-start; width:1.8em; height:1.8em;}
.bubble_tip .btn_close_bubble > i{width:inherit; height:inherit}
/* sm */
.bubble_tip_sm{position:absolute; font-size:1rem; bottom:calc(100% -  1.5em); left:50%; z-index: 99; padding:.5em 1em; max-width: 10em; border-radius: 1.2em; background-color: var(--point_yellow); transform:translate(-50%, 0); opacity: 1; visibility: visible; transition: transform, opacity, visibility, 0.5s; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);}
.bubble_tip_sm::after{content:""; position:absolute; top:100%; right:3em; display:block; width:0px; height:0px; border-left:.4em solid transparent; border-right:.4em solid transparent; border-top:.6em solid var(--point_yellow); }
.bubble_tip_sm p{font-weight:bold; line-height:1.43; text-align: center; font-size:1em}
.bubble_tip_sm.hidden{transform:translate(-50%, 1em); opacity: 0; visibility: hidden; }
/* 튜토리얼 팁 말풍선 */
.tutorial_bubble_tip{position:absolute; font-size:1rem; top:calc(100% + 1.5em); right:0; z-index: 19; padding:1.26em 2em; width:auto; max-width: calc(100vw - 4em); background-color: rgba(48, 48, 48, 0.8); border-radius: 2rem; transform: translateY(0); opacity: 1; visibility: visible; transition: .4s; display: flex; gap: 0.5rem; justify-content: space-between;}
.tutorial_bubble_tip .buble_arrow{content:""; position:absolute; bottom:100%; right:30px; display:block ; width:0px; height:0px; border-left:.6em solid transparent; border-right:.6em solid transparent; border-bottom:1em solid rgba(48, 48, 48, 0.8) }
.tutorial_bubble_tip > p,
.tutorial_bubble_tip > div{font-weight:bold; font-size: 1.2em; line-height:1.43; white-space: nowrap; /* min-width: max-content; */ color:#fff}
.tutorial_bubble_tip.hidden{transform: translateY(1em); opacity: 0; visibility: hidden; }

/* toast pop */
.toast_pop{position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 998; transition: .3s; width:100%; display:flex; justify-content: center; z-index: 9999}
.toast_pop .toast_pop_inner{display:flex; align-items: center; gap:.5rem; background-color: rgba(48, 48, 48, 0.8); border-radius: 2rem; padding:.9rem 2rem;}
.toast_pop .toast_message{color:#fff; text-align: left; font-size:1.4rem;}
.toast_pop i{flex-shrink: 0;}
.toast_pop.hidden{opacity: 0;}

/* .box_frame : .card_ui와 디자인 동일 / css, html 구조 재정리함 */
.box_frame{padding: 2.5rem 2.5rem 3rem; background-color: #ffffff; border-radius: var(--borderRadius); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02);}
.box_frame_inner{display: flex; flex-wrap: wrap; font-size:1rem}
.box_frame + .box_frame{margin-top:var(--contentGap20);}
.box_frame_inner + .box_frame_inner.box_frame_divis{border-top: 1px solid #f5f5f5; margin-top:var(--contentGap20); padding-top:1em;}
.box_frame_inner hr{display:block; width:100%; height:1px; border:0; border-top:1px solid #e7e7e7; margin: var(--contentGap10) 0 var(--contentGap30);}
/* 일반 */
.box_frame_title{position: relative; width:100%; display: flex; gap:0 .3em; align-items: center; margin-bottom: 2.3em; }
.box_frame_title .box_tit{font-size:1.6rem;}
.box_frame_title .box_tit_info{margin-left:auto;}
.box_frame_content{width:100%;}
.box_frame_content + .box_frame_div{margin-top:20px; padding-top:20px; border-top:1px solid #f5f5f5;}
.box_frame_desc{font-size:1.6em; color:#666; text-align: center;}
.cate_select + .box_frame_desc{margin-top:var(--contentGap20)}
.box_frame_btns{display: flex; flex-basis: 100%; justify-content: center; margin-top:20px; padding-top:20px; border-top:1px solid #f5f5f5;}
.box_frame_btns.column{flex-direction: column;}
.box_frame_btns [class*="btn_"]{max-width:26em; min-width:26em;}
.box_frame_btns.column [class*="btn_"]{margin-top:10px; align-self: center;}
.box_frame_btns.column .btn_txt{margin-top:20px}
/* 분할 타입 */
.box_frame_div{display: flex; flex-basis: 100%; justify-content: center; flex-direction: column;}
.box_frame_div:not([class*="span"]){margin-top:20px; padding-top:20px; border-top:1px solid #f5f5f5}
.box_frame_div:not([class*="span"]):first-child{margin-top:0; padding-top:0; border-top:0; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #f5f5f5}
.box_frame_div .div_tit{display: block; width: 100%; font-size: 1.4em; color: #999; text-align: center;}
.box_frame_div:not([class*="row"]) .div_desc{margin-top: 5px;}
.box_frame_div.span2{position: relative; width: 50%; flex-basis: 50%; display: inline-flex; flex-direction: column; padding:0 .3rem; justify-content: flex-start;}
.box_frame_div.span2 .div_tit{display: flex; min-height: 2.857em; justify-content: center; align-items: center;}
.box_frame_div.span2 + .span2::before{display:block; content: ''; position: absolute; background: #f5f5f5; width: 1px; height: 50px; left: 0; top: 50%; transform: translateY(-35%);}
.box_frame_div.span2 + .row{margin-top:20px; padding-top:20px; border-top:1px solid #f5f5f5}
.box_frame_div.row{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.box_frame_div.row .div_tit{width: auto; flex: 0 0 auto;}
.box_frame_div.row .div_desc{flex: 1 1 auto;}
.box_frame_div.row .div_desc .btns{display :flex; justify-content: flex-end; gap:0 10px; font-size:inherit}
.box_frame_div .div_desc .score{font-size: 2.4em; line-height: 1.33; font-weight: 700; text-align: center;}
.box_frame_div .div_desc .score > span{line-height: 1.33; font-weight: 700;}
/* bubble */
.box_frame_title .bubble_tip{bottom:auto; left:0; right:auto; max-width: 30.5em; min-height:5em;}
.box_frame_title .bubble_tip::before{content: none;}
.box_frame_title .bubble_tip .buble_arrow{left:3em; right:auto;}
/* btns */
.box_frame [class*="btn_"]{font-size: inherit;}
.box_frame [class*="btn_"].btn_sm{height:3.5em; padding:0 1.8em; border-radius: 1.7em;}
.box_frame [class*="btn_"].btn_sm > span{font-weight: 700; line-height: 1.43; font-size:1.4em;}
.box_frame [class*="btn_"].btn_mid{height:4.018em; padding:0 1.5em; border-radius: 1.9em;}
.box_frame [class*="btn_"].btn_mid > span{font-weight: 700; line-height: 1.5; font-size:1.6em;}
.box_frame [class*="btn_"] > span{white-space: nowrap;}

/* bl_list_area */
.bl_list_area .bl_list_tit{font-size:1.6em}
.bl_list_area .bl_list_tit + .bl_list{margin-top:1em}
.bl_list_area .bl_list > li{font-size:1.2em; padding-left:1em; line-height: 1.45;}
.bl_list_area .bl_list > li:before{display: inline-block; content:'ㆍ'; vertical-align: middle; margin:0 0 0 -1em}

/* 문제풀이 badge */
.level_badge{display: inline-block;  border:1px solid transparent; border-radius: 12px; font-size:14px; font-weight: 700; padding:1px 10px;}
.level_badge.hard{color:#ff2549; border-color: #ff2549;}
.level_badge.review{color:#193d81; border-color: #193d81;}
.level_badge.wrong{color:#ff2549; border-color: #ff2549;}
.level_badge.chlng{color:#33d6c5; border-color: #33d6c5;}
.level_badge.recommend{color:var(--contentColor); border-color: var(--contentColor);}

/* bottom_fixed */
.sub_page .bottom_fixed{position: fixed; left:0; bottom:0; width:100%; padding:1.6rem 2rem 3rem; box-shadow: 0 -.5rem 1rem 0 rgba(153, 153, 153, 0.15); background-color: #f5f5f5; z-index: 20;}
.bottom_fixed .inner_btns{display:flex; width:100%; max-width:42.5rem; margin:0 auto; justify-content: space-between; gap:0 10px}
.bottom_fixed .inner_btns [class*="btn_"]{flex: 1;}
.bottom_fixed .inner_btns [class*="btn_"]:only-child{max-width:32.692rem;  margin:0 auto;}

/* .character_comment */
.character_comment{margin-top:var(--contentGap30);}
.character_comment .inner{display:flex; justify-content: center;}
.character_comment .img_wrap{width:13rem; align-self: flex-end; flex-shrink: 0;}
.character_comment .comment_wrap{padding-bottom:45px; position: relative; margin-left: -1rem;}
.character_comment .comment_box{position: relative; font-size:1rem; width: 20.72rem; background-color: var(--point_yellow); border-radius: 3em; padding: 1.5rem 1rem;}
.character_comment .comment_box .txt{text-align: center; color:#303030; font-weight: 700; font-size:1.4em; word-break: break-word}
.character_comment .comment_wrap .btn_mid{max-width:15.5rem; margin-top:15px; margin-bottom:-25px; margin-left: auto; margin-right: 2rem; white-space: nowrap;}
.character_comment .comment_box .comment_box_tail{display:block; content:''; position: absolute; top:100%; left:4em; width:1.2em; height:1em;} 
.comment_box_tail:before {content:""; display:block; height:100%; background-color: var(--point_yellow); mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat ; mask-position: center; -webkit-mask-position: center; mask-image: url("../images/common/img-textbox-tale-left.svg"); -webkit-mask-image: url("../images/common/img-textbox-tale-left.svg");}

/* AI 코칭 */
.character_chat .inner{display:flex; justify-content: space-between; align-items: center;}
.character_chat .inner + .inner{margin-top:1.5rem}
.character_chat .img_wrap{width:6rem; height:6rem; border-radius: 100%; flex-shrink: 0; overflow: hidden;}
.character_chat .img_wrap img{object-fit: cover; height:100%;}
.character_chat .chat_area{position: relative; width: 100%; padding-left:2.4rem}
.character_chat .chat_message{position: relative; font-size:1rem; width:100%; background-color: var(--point_yellow); border-radius: 2em; padding: 1rem 1rem; min-height:6rem; display:flex; align-items: center;}
.character_chat .chat_message .txt{width: 100%; text-align: center; color:#303030; font-weight: 700; font-size:1.4em; word-break: keep-all}
.character_chat .chat_message .chat_message_tail{display:block; content:''; position: absolute; top:50%; left:-1em; width:1.2em; height:1em; transform: rotate(90deg) translateX(-50%);} 
.character_chat .chat_message + .chat_message{margin-top:1rem}
.character_chat .chat_area .btn_mid{max-width:15.5rem; margin-top:15px; margin-bottom:-25px; margin-left: auto; margin-right: 2rem; white-space: nowrap;}
.chat_message_tail:before {content:''; display:block; height:100%; background-color: var(--point_yellow); mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat ; mask-position: center; -webkit-mask-position: center; mask-image: url("../images/common/img-textbox-tale-left.svg"); -webkit-mask-image: url("../images/common/img-textbox-tale-left.svg");}

/* .chart_range */
.chart_range{font-size:1rem;}
.chart_range .chart_tit{font-weight:700; font-size:1.4em}
.chart_range .chart_detail{display:flex; width:100%; margin-top:1em;}
.chart_range_bar{position: relative; width:100%; padding-bottom:3em;}
.chart_range_bar .bar{position: relative; width:100%; height:.4em; border-radius: .2rem; background: var(--boxBg);}
/* per */
.chart_range_bar .bar .per{position: absolute; top: 0; left: 0; border-radius: .2rem; height: 100%;  background: var(--contentColor);}
.chart_range_bar .bar .per .per_marker{position: absolute; z-index:2; top: 50%; right: 0; display: block; border-radius: 100%; font-size:1rem; transform: translateY(-50%); width: .8em; height: .8em; min-width:8px; min-height:8px; max-width:14px; max-height:14px;}
.chart_range_bar .bar .per .per_marker:after,
.chart_range_bar .bar .per .per_marker:before{display:block; content:''; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 100%; width:100%; height:100%; background: var(--contentColor); }
.chart_range_bar .bar .per .per_marker:after{opacity: 0.17; border:.3em solid transparent}
.chart_range_bar .bar .per .per_marker:before{z-index: 2;}
/* per_last */
.chart_range_bar .bar .per_last{position: absolute; top: 0; left: 0; border-radius: .2rem; height: 100%; }
.chart_range_bar .bar .per_last .per_marker{position: absolute; z-index:2; top: 50%; right: 0; display: block; border-radius: 100%; font-size:1rem; transform: translateY(-50%); width: .8em; height: .8em; min-width:8px; min-height:8px; max-width:14px; max-height:14px;}
.chart_range_bar .bar .per_last .per_marker:after,
.chart_range_bar .bar .per_last .per_marker:before{display:block; content:''; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 100%; width:100%; height:100%; }
.chart_range_bar .bar .per_last .per_marker:after{background: #ddd; opacity: 0.8; border:.3em solid transparent}
.chart_range_bar .bar .per_last .per_marker:before{background: #999; z-index: 2;}
/* per txt */
.chart_range_bar .per .txt{position: absolute; bottom:100%; right:-.5em; font-style: normal; font-size:1.2em; color:var(--contentColor); margin-bottom:.5em; font-weight:700}
/* label */
.chart_range_bar [class*="label_"]{position: absolute; bottom: calc(100% - 2.5em); font-size:1.2em; color:#999}
.chart_range_bar .label_start{left:0;}
.chart_range_bar .label_end{right:0;}
.chart_range + .chart_range{margin-top:var(--contentGap20);}

/* grade_progress */
.grade_progress{margin:0 auto var(--contentGap35);}
.grade_progress .title{font-size: 1.1rem;}
.grade_bar_area,
.grade_bar,
.grade_markers{/* font-size:1.335rem */font-size:1rem}
/* bar */
.grade_bar_area{position: relative; margin-top:1rem;}
.grade_bar{position: relative; width:100%; height: .4em; min-height:4px; border-radius: .2rem; background-color: #d6d6d6; /* font-size:1rem; */}
/* marker, pointer */
.grade_bar .marker,
.grade_bar .now{position: absolute; top:0; left:0; height:100%; border-radius:.2em;}
.grade_bar .marker{background-color: var(--contentColor);}
.grade_bar .marker .pointer,
.grade_bar .now .pointer{position: absolute; display:block; content:''; width: 1.6em; height: 1.6em; max-width:22px; max-height:22px; border-radius: .8em; background-color: #fff; box-sizing: border-box; z-index: 1;}
.grade_bar .marker .pointer{border: solid .3rem var(--contentColor); right:-.8em; top: 50%; transform: translateY(-50%);}
.grade_bar .now .pointer{border: solid .3rem #cacaca; right:-.8em; top: 50%; transform: translateY(-50%);}
/* bar_bubble */
.grade_bar .marker .bar_bubble,
.grade_bar .now .bar_bubble{position: absolute; right: auto; margin-left:-2em; font-size:1rem}
.grade_bar .marker .bar_bubble > p,
.grade_bar .now .bar_bubble > p{font-size:1.1em; padding:.3em 1em .4em; box-shadow: 0 .3em .6em 0 rgba(0, 0, 0, 0.05); background-color: #fff; border-radius: 1.5em; white-space: nowrap;}
.grade_bar .marker .bar_bubble{bottom: calc(100% + 1.5em);}
.grade_bar .marker .bar_bubble > p{border: solid .1rem var(--contentColor); color:var(--contentColor);}
.grade_bar .now .bar_bubble{top: calc(100% + 1.5rem); z-index: 1;}
.grade_bar .now .bar_bubble > p{position: relative; z-index:1; border: solid .1rem #cacaca; color:#999;}
.grade_bar .bar_bubble::after{display:block; content:''; position:absolute; width: .7rem; height: .7rem; background-color: #fff; border-radius: .1rem; transform: rotate(45deg);}
.grade_bar .marker .bar_bubble::after{margin-top:-.4rem; border-right:.1rem solid var(--contentColor); border-bottom:.1rem solid var(--contentColor)}
.grade_bar .now .bar_bubble::after{margin-bottom:-.4rem; border-left:.1rem solid #cacaca; border-top:.1rem solid #cacaca; z-index: 2;}
/* right */
.grade_bar .bar_bubble.right{right:-2.4rem; margin-right:0; left:auto !important}
.grade_bar .now .bar_bubble::after{bottom:100%; left:2.4em; right:auto}
.grade_bar .marker .bar_bubble::after{left:2.4em; right:auto}
.grade_bar .now .bar_bubble.right::after,
.grade_bar .marker .bar_bubble.right::after{right:1.8rem; left:auto}
/* in box_frame_content */
.box_frame_content .grade_progress{margin:0; padding-bottom:2rem; padding-top: 1.3rem;}
.box_frame_content .grade_progress .inner{padding:0;}
/* chart_legend */
.box_frame_content .chart_legend{margin-top:15px;}
.chart_legend{display: flex; gap:0 5px; justify-content: center; align-items: center;}
.chart_legend .chart_legend_dotted{display:block; width:.8em; height:.8em; background-color: var(--contentColor); border-radius: 50%; text-indent: -9999px;}
.chart_legend .legend_group{display: flex; align-items: center; gap:0 20px;}
.chart_legend .legend_group > li{display: flex; align-items: center; gap:0 5px;}
.chart_legend .legend_group > li.complete .chart_legend_dotted{background-color: #0aceff;}
.chart_legend .legend_group > li.correct .chart_legend_dotted{background-color: #4d47ff;}
.chart_legend .txt{font-size:1.2em; color: var(--contentColor);}
.chart_legend .chart_item{display: flex; justify-content: center; align-items: center; font-size:1rem}
.chart_legend .chart_item .txt{color:#999; line-height: 1; padding-left:.5em}
.chart_legend .chart_item:first-child .txt{padding-right:1.5em}
.chart_legend .chart_item .per,
.chart_legend .chart_item .per_last{display: block; position: relative; width: .8em; height: .8em; min-width:8px; min-height:8px; max-width:14px; max-height:14px; flex-shrink: 1;}
.chart_legend .chart_item .per::after,
.chart_legend .chart_item .per_last::after{content: ''; display: block; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; height:100%; border-radius: 100%}
.chart_legend .chart_item .per::after{background: var(--contentColor); opacity: 0.17; border:.3em solid transparent}
.chart_legend .chart_item .per_last::after{background: #ddd; opacity: 0.8; border:.3em solid transparent}
.chart_legend .chart_item .per::before,
.chart_legend .chart_item .per_last::before{content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; z-index: 1; width:100%; height:100%;}
.chart_legend .chart_item .per::before{background: var(--contentColor);}
.chart_legend .chart_item .per_last::before{background: #999;}

/* 그래프 영역 */
.chart_area .chart_tit{font-size:1.4rem; color:#666; margin-bottom:2rem; font-weight: normal; text-align: center;}
.chart_area .chart_view img{max-width:100%}
.chart_area .chart_view .chart_topic_icon{width:40px; height: 40px;}
.box_frame_content .chart_area:not(:only-child){padding-top:1.5rem}
.box_frame_content .chart_area + .chart_area{margin-top:3.5rem}
.box_frame_desc + .chart_area:not(:only-child){padding-top:3rem}

/* grade_markers */
.grade_markers{position: relative; display: flex; width:100%; justify-content: space-between; margin-top: -.4em; padding:0 1em; /* font-size:1rem;  */min-height: 2.6em;}
.grade_markers .marker_point{position: relative; }
.grade_markers .marker_point::before{display: block; width:.4em; height: .4em; content: ''; background-color: #999; border-radius: 50%; margin:0 auto;}
/* 예외 */
.box_frame_content .grade_markers .marker_point::before{background-color:#fff}
.grade_markers .marker_point .label{font-size:1.3rem; color: #999; display: block; margin-top:.3em; font-weight: 700;}
.grade_markers .marker_point.on::before{background-color:#fff}
/**/
.grade_bar_area.over_grade_m::after, .grade_bar_area.under_grade_m::after,
.grade_bar_area.over_grade::after, .grade_bar_area.under_grade::after,
.grade_bar_area.none_front::after, .grade_bar_area.none_front::before,
.grade_bar_area.none_back::after, .grade_bar_area.none_back::before,
.grade_bar_area.none_both::after, .grade_bar_area.none_both::before,
.grade_bar_area.none_both .grade_markers::after,
.grade_bar_area.none_both .grade_markers::before{width:.4em; height:.4em; min-width:4px; min-height:4px; max-width:4px; max-height:4px;}
/* 진단받은 위치가 bar에서 벗어날 경우 over_grade */
.grade_bar_area{/* font-size:1.335rem */}
.grade_bar_area.over_grade{/* padding-right:1rem; */ padding-right:1em;}
.grade_bar_area.over_grade::after{position: absolute; top:0; right:0; display:block; border-radius: 50%; background-color: var(--contentColor); content:'';}
.grade_bar_area.over_grade .grade_bar{background-color: var(--contentColor);}
.grade_bar_area.over_grade .grade_markers .marker_point::before{background-color: #fff;}
.grade_bar_area.over_grade .grade_bar .marker{width:100% !important}
.grade_bar_area.over_grade .grade_bar .marker .pointer{display:none}
.grade_bar_area.over_grade .marker .bar_bubble{right:-2.2rem; margin-right:0; left:auto !important}
.grade_bar_area.over_grade .marker .bar_bubble::after{right:1.9rem; left:auto}
/* 진단받은 위치가 bar에서 벗어날 경우 under_grade */
.grade_bar_area.under_grade{/* padding-left:1rem; */ padding-left:1em;}
.grade_bar_area.under_grade::after{position: absolute; top:0; left:0; display:block; border-radius: 50%; background-color: var(--contentColor); content:'';}
.grade_bar_area.under_grade .grade_bar{background-color: #d6d6d6;}
.grade_bar_area.under_grade .grade_markers .marker_point::before{background-color: #fff;}
.grade_bar_area.under_grade .grade_bar .marker{width:100% !important; background-color: transparent;}
.grade_bar_area.under_grade .grade_bar .marker .pointer{display:none}
.grade_bar_area.under_grade .marker .bar_bubble{left:0 !important; margin-right:0; right:auto}
.grade_bar_area.under_grade .marker .bar_bubble::after{left:1.9rem; right:auto}

/* s: 2024.01.16 */
/* over_grade_m */
.grade_bar_area.over_grade_m{padding-right:1em;}
.grade_bar_area.over_grade_m::after{position: absolute; top:0; right:0; display:block; border-radius: 50%; background-color: #d6d6d6; content:'';}
.grade_bar_area.over_grade_m .grade_markers .marker_point::before{background-color: #fff;}
.grade_bar_area.over_grade_m .grade_bar .now .pointer{display:none}
.grade_bar_area.over_grade_m .now .bar_bubble{right:-2.2rem; margin-right:0; left:auto !important}
.grade_bar_area.over_grade_m .now .bar_bubble::after{right:1.9rem; left:auto}
/* under_grade_m */
.grade_bar_area.under_grade_m{padding-left:1em;}
.grade_bar_area.under_grade_m::after{position: absolute; top:0; left:0; display:block; border-radius: 50%; background-color: var(--contentColor); content:'';}
.grade_bar_area.under_grade_m .grade_bar{background-color: #d6d6d6;}
.grade_bar_area.under_grade_m .grade_markers .marker_point::before{background-color: #fff;}
.grade_bar_area.under_grade_m .grade_bar .now .pointer{display:none}
/* e: 2024.01.16 */

/* 앞쪽 진도 없을 때 */
.grade_bar_area.none_front{/* padding-right:1.66rem; */ padding-right:1.3em;}
.grade_bar_area.none_front::after,
.grade_bar_area.none_front::before{position: absolute; top:0; display:block; border-radius: 50%; content:''; }
.grade_bar_area.none_front::after{right:.65em; background-color: #d6d6d6;}
.grade_bar_area.none_front::before{right:0; background-color: #e7e7e7;}
/* 뒤쪽 진도 없을 때 */
.grade_bar_area.none_back{/* padding-left:1.66rem; */ padding-left:1.3em;}
.grade_bar_area.none_back::after,
.grade_bar_area.none_back::before{position: absolute; top:0; display:block; border-radius: 50%; background-color: var(--contentColor); content:'';}
.grade_bar_area.none_back::after{left:.65em; background-color: #d6d6d6;}
.grade_bar_area.none_back::before{left:0; background-color: #e7e7e7;}
/* 앞뒤 모두 진도 없을 때 */
.grade_bar_area.none_both{/* padding-left:1.66rem; padding-right:1.66rem; */ padding: 0 1.3em;}
.grade_bar_area.none_both::after,
.grade_bar_area.none_both::before{position: absolute; top:0; display:block; border-radius: 50%; background-color: var(--contentColor); content:'';}
.grade_bar_area.none_both::after{left:.65em; background-color: #d6d6d6;}
.grade_bar_area.none_both::before{left:0; background-color: #e7e7e7;}
.grade_bar_area.none_both .grade_markers::after,
.grade_bar_area.none_both .grade_markers::before{position: absolute; top:0; display:block; border-radius: 50%;content:'';}
.grade_bar_area.none_both .grade_markers::after{right:-.63em; background-color: #d6d6d6;}
.grade_bar_area.none_both .grade_markers::before{right:-1.3em; background-color: #e7e7e7;}

/* Math games list */
.mathgames{background-image: linear-gradient(25deg, var(--gradationStart), var(--gradationEnd));}
.mathgames .container{background-color: #fff;}
.mathgames .container .main_contents{padding-top:3rem; padding-bottom:13rem}
.mathgames_list{max-width: 550px; margin:0 auto}
.mathgames_list ul li + li{margin-top:var(--contentGap35);}
.mathgames_item .img_wrap{margin-bottom:var(--contentGap20); max-height:240px; overflow: hidden;}
.mathgames_item .img_wrap img{object-fit: cover; width:100%; height:100%;}
.mathgames_item .info_desc{display:flex; align-items: center; font-size:1rem}
.mathgames_item .info_desc .thumnail{width:6em; height:6em; max-width: 76px; max-height: 76px; margin-right:1.5em; font-size: inherit; flex-shrink: 0;}
.mathgames_item .info_desc .game_info dt{font-weight: 700; font-size:1.6em;}
.mathgames_item .info_desc .game_info dd{color:#666; font-size:1.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5em; height: 3em; }
.mathgames_item .info_desc .btn_info{margin-left:auto; flex-shrink: 0;}
.mathgames_item .info_desc .btn_info.btn_sm > span{font-size: 1.2em;}
/* list_top_message */
.list_top_message{border-radius: 1rem; background-color: #f5f5f5; display:flex; align-items: center; justify-content: center; font-size:10px; padding:1.3em 0}
.list_top_message > .txt{font-size:1.4em; color:#303030; font-weight: 700; text-align: center;}
.list_top_message + ul{margin-top:25px}

/* no_data */
.no_data{position: relative; margin:60px 0}
.no_data .desc{display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%;}
.no_data .desc .txt{margin: 10px 0 0; font-size: 16px; font-weight:200; line-height: 1.5;  text-align: center; color: #666;}
/* none_list (old)common.css */
.none_list_wrap{position: relative; height:100%;}
.none_list_wrap .none_list{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%;}
.none_list_wrap .none_list p{margin: 10px 0 0; font-size: 16px; font-weight: bold; line-height: 1.5;  text-align: center; color: #666;}
.none_list_wrap .none_list p.type2{font-weight: 200;}

/* disabled_blur */
.disabled_blur{margin-top:20px; position: relative;}
.disabled_blur.on::before{display:block; content:''; width:calc(100% + 20px); height:100%; position: absolute; top:0; left: -10px; z-index: 5; background: rgba(245, 245, 245, 0.1); /* for iPhone */ -webkit-backdrop-filter: saturate(100%) blur(10px); -moz-backdrop-filter: saturate(100%) blur(10px); -o-backdrop-filter: saturate(100%) blur(10px); backdrop-filter: saturate(100%) blur(10px);}
.disabled_blur .disabled_guide{position: absolute; top:0; left:0; z-index: 6; display:flex; width:100%; height:100%;  justify-content: center; align-items: flex-start;;}
.disabled_blur .disabled_guide .inner .txt{text-align: center; font-size:1.6rem; font-weight: 700; margin:2rem 0;}
.disabled_blur .disabled_guide .inner .btn_mid{max-width:15.5rem; margin:0 auto}

/* top 버튼 (old)common.css  */
.top_btn{position: fixed; bottom:4em; right:2em; z-index: 99; font-size:1rem; width:6em; height:6em; padding: 1.8em; border-radius: 50%; box-shadow: 0 2em 3em 0 rgba(0, 0, 0, 0.3); background-image: linear-gradient(135deg, #fff, #eee); opacity: 0; visibility: hidden; transition: opacity, visibility, .3s;}
.top_btn.on{opacity: 1; visibility: visible;}
/* 기존 px 페이지 대응 */
.top_btn > i{font-size:1rem;}

/* card ui - Progress report(ai off), wm (old)common.css */
.card_wrap{display: flex; flex-wrap:wrap; width:100%;}
.card_ui{margin-top:20px; padding:0 7.5px; width:100%; }
.card_icon{width:48px; height:48px;}
.card_ui .card_ui_inner{ padding:20px 15px 25px; height:100%; border-radius: var(--borderRadius); background-color: #ffffff;  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.02); }
.card_ui .card_ui_inner a{ width:100%; height:100%; }
.card_ui .card_title_wrap{display: flex; gap:0 15px}
.card_ui .card_title_wrap .icon_wrap{flex-shrink: 0; display: flex; align-items: center;}
.card_ui .card_title_wrap .card_title h3{font-size:20px; font-weight:bold; line-height: 1.3; letter-spacing: -0.01px;}
.card_ui .card_title_wrap .card_title p{margin-top:5px; font-weight:500; line-height: 1.43; color:#666666;}
.card_ui_btns{display: flex; justify-content: center; align-items: center; width:100%; gap:0 10px; margin-top:20px; padding:0 7.5px}
.card_ui_btns > [class*="btn_"]{flex:1; min-height:50px; border-radius: 25px;}
.card_ui .card_question_img{margin-top:15px; display: flex; justify-content: center;}
.card_ui .card_btn_wrap{margin-top: 15px; display: flex; justify-content: center;}
.card_ui .card_btn_wrap .card_btn{padding:8px 15px 8px 20px; display:flex; justify-content: center; align-items: center; width:auto; background-image: -moz-linear-gradient(103deg, var(--gradationStart), var(--gradationEnd)); background-image: linear-gradient(103deg, var(--gradationStart), var(--gradationEnd)); border-radius: var(--borderRadius)}
.card_ui .card_btn_wrap .card_btn span{margin-right:5px; font-size: 16px; font-weight: bold; line-height: 1.5;
color: #fff;}

/* qz, dt (old)common.css */
.qz_progress{margin-top:16px; width:100%; height:5px; background-color: #f5f5f5;}
.qz_progress .bar{display: block; width:0; height:100%; border-radius: 0 2.5px 2.5px 0;  background-image: linear-gradient(to bottom, var(--point_yellow_g_start), var(--point_yellow_g_end));}

/* 상단 탭 ui Progress report (old)common.css */
/* tab btn 스크롤시 상단 고정 */
.sub_content_top_wrap .tab_wrap .tab_inner.sticky{padding:20px 20px 43px;  background-image: linear-gradient(to bottom, #f5f5f5, #f5f5f5 74%, rgba(245, 245, 245, 0));}
.sub_content_top_wrap .tab_wrap{margin-top:30px; height:45px;}
.sub_content_top_wrap .tab_wrap .tab_inner{ position: relative; z-index: 9; margin:0 auto; display: flex; justify-content: center; width:100%; border-radius: var(--borderRadius); transition: padding-top .3s; }

/* Tab btn (old)common.css */
.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav{ width:100%; height:45px; max-width: 335px; display: flex; border-radius: var(--borderRadius); background-color: #eeeeee; overflow: hidden;}
.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav li{width:50%;}
.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav li a{padding:13px; display: flex; justify-content: center; align-items: center; height:45px; font-weight:500; line-height: 1.43; color:#999999; text-align: center;  border-radius: var(--borderRadius);}
.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav li a.active{color:#ffffff; background-image: linear-gradient(to right, var(--gradationStart), var(--gradationEnd));}
/* Tab content */
.tab_content_wrap .tab_content{display: none;}
.tab_content_wrap .tab_content.active{display: block;}
.tab_content .tab_title{font-size:2.2rem; text-align: center; font-weight: 700; margin-top:var(--contentGap50); margin-bottom:var(--contentGap30); word-break: break-all;}
.tab_content .tab_title_desc{margin-top:var(--contentGap20); margin-bottom:var(--contentGap25); color:#666; font-size:1.6rem; text-align: center;}
.tab_content .tab_title_desc .tag_txt{color:#303030;}

/* tab btn : wings, faq from (old)wm.css */
.currency_cat_btn{padding:0 30px 0; max-width:590px; margin:0 auto; position:relative;}
.currency_cat_btn ul{display: flex; align-items: center; gap:0 16px;}
.currency_cat_btn ul li button{position: relative;}
.currency_cat_btn ul li button::before{content:""; position: absolute; top:calc(100% + 5px); left:50%; transform: translateX(-50%); display: none; width:7px; height:7px; border-radius: 50%; background-image: linear-gradient(to right, var(--gradationStart), var(--gradationEnd)); }
.currency_cat_btn ul li button span{font-size:18px; font-weight:400; line-height:1.56; letter-spacing:-0.01px; color: #999999;}
.currency_cat_btn ul li.active button span{font-weight: 700; color:#303030;}
.currency_cat_btn ul li.active button::before{display: block;}
/* Scroll type */
.currency_cat_btn.scroll_type{position: relative; max-width: none; width: calc(100% + 2rem); padding:0 0 12px; overflow-x: auto; overflow-y: hidden;}
.currency_cat_btn.scroll_type::-webkit-scrollbar{display: none;}
.currency_cat_btn.scroll_type ul{padding:0 1rem}
.currency_cat_btn.scroll_type ul {align-items: flex-start;}
.currency_cat_btn.scroll_type ul li button span{white-space: nowrap;}
.currency_cat_btn.scroll_type ul li:last-child{padding-right:3rem}

/* Form input style (old)common.css */
.form_wrap .input_wrap{height: 50px; display: flex; align-items: center; gap: 0 10px; padding: 0 20px; border-radius: 15px; border: solid 1px #999999;  background-color: #ffffff;}
.form_wrap .input_wrap:active,
.form_wrap .input_wrap:hover, 
.form_wrap .input_wrap:focus {border: solid 1px #303030; background-color: #ffffff;}
.form_wrap input {padding: 12px 0; margin: 0; width:100%;  font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0px; text-align: left; color: #999999; background: #ffffff; border: none;}
.form_wrap textarea{padding:15px 20px; width:100%;  border:none; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0px; text-align: left; color: #999999;}
.form_wrap input::placeholder,
.form_wrap textarea::placeholder{font-size: 16px; font-weight: 500; line-height: 1.33;  color: #999999;}
.form_wrap .new_placeholder{position: absolute; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0px; color: #999999; pointer-events: none;}
.form_wrap .new_placeholder small{font-size: 12px; font-weight: 500; line-height: 1.33;}
/* input active */
.form_wrap input:active, 
.form_wrap input:hover, 
.form_wrap input:focus,
.form_wrap input:valid,
.form_wrap textarea:active,
.form_wrap textarea:hover,
.form_wrap textarea:focus,
.form_wrap textarea:valid{color: #303030;}
.form_wrap input:active + .new_placeholder, 
.form_wrap input:hover + .new_placeholder, 
.form_wrap input:focus + .new_placeholder, 
.form_wrap input:valid + .new_placeholder{display: none;}
/* input message */
.input_message{margin-top:5px; display: none; gap:0 2px;}
.input_message.active{display: flex;}
.input_message span{font-size:12px; font-weight:500; color:#ff8678;}
.input_message > i{flex-shrink: 0;}
.pass_icon{flex-shrink: 0; pointer-events: inherit;}
.pass_icon .pass_h_icon{display: block;}
.pass_icon .pass_s_icon{display: none;}
.pass_icon.bi_eye .pass_h_icon{display:none;}
.pass_icon.bi_eye .pass_s_icon{display:block;}

/* check_box (old)common.css */
.check_box_wrap input[type="checkbox"]{position:absolute; padding:0; margin:-1px; width:1px; height:1px; border:0; overflow:hidden; clip:rect(0,0,0,0); }
.check_box_wrap input[type="checkbox"] + label{position:relative; display:flex;  gap:0 15px;  width:100%; height:100%; cursor:pointer; }
.check_box_wrap input[type="checkbox"] + label::before{content:""; position:relative; flex-shrink: 0; display:block; width:24px; height:24px; border-radius: 8px; box-shadow: 0 0 0 3px #dddddd inset; background-color: #ffffff;  }
.check_box_wrap input[type="checkbox"]:checked + label::before{background-color: var(--contentColor); box-shadow: none; background-image: url("../images/common/w_check_icon_16.svg"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px;}
.check_box_wrap input[type="checkbox"] + label span{padding-top:2px; font-weight: 500; line-height: 1.43; color: #666;}
.check_box_wrap input[type="checkbox"] + label span small{font-size: 12px; color: #999;}
.check_box_wrap.trans_type input[type="checkbox"] + label::before{background-color: transparent;  }
.check_box_wrap.trans_type input[type="checkbox"]:checked + label::before{background:#fff; position: relative;}
.check_box_wrap.trans_type input[type="checkbox"] + label > object{display:none; position:absolute; width:20px; height:20px; top:2px; left:2px}
.check_box_wrap.trans_type input[type="checkbox"]:checked  + label > object{display:block;}

/* 스크롤 바 (old)common.css */
.newscroll_bar::-webkit-scrollbar {margin-right:20px; width: 3px; height: 3px;}
.newscroll_bar::-webkit-scrollbar-thumb {background: var(--subText); border-radius: 1.5px;}
.newscroll_bar::-webkit-scrollbar-track {display: none;}
.newscroll_bar_grey::-webkit-scrollbar {margin-right:20px; width: 3px; height: 3px;}
.newscroll_bar_grey::-webkit-scrollbar-thumb {background: #cfcfcf; border-radius: 1.5px;}
.newscroll_bar_grey::-webkit-scrollbar-track {display: none;}

/* Bubble tool tip 말풍선 (old)common.css */
.bubble_desc{position:absolute; top:calc(100% + 15px); right:0; z-index: 99; padding:10px 20px; width:calc(100vw - 40px); max-width: 335px;	border-radius: var(--borderRadius); background-color: var(--point_yellow); transform: translateY(0); opacity: 1; visibility: visible; transition: transform, opacity, visibility, 0.5s; }
/* 2023.05 buble_arrow */
.bubble_desc .buble_arrow,
.bubble_desc::before{content:""; position:absolute; bottom:100%; right:30px; display:block; width:0px; height:0px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid var(--point_yellow); }
.bubble_desc p{font-weight:bold; line-height:1.43; text-align: center;}
.bubble_desc.hidden{transform: translateY(10px); opacity: 0; visibility: hidden; }
.bubble_desc .btn_close_bubble{position: absolute; top:13px; right:10px;}

/* 그리기 툴 (old)common.css */
.draw_tools{position: absolute; top:20px; left:0; right:0; width:100%;}
.draw_tools .inner_wrap{display:flex; justify-content:space-between; align-items: center;} 
.draw_tools .inner_wrap .tools_wrap{display: flex; align-items: center; border-radius:25px; background-color: #ffffff; overflow: hidden;}
.draw_tools .inner_wrap button{position: relative; padding:8px 15px;}
.draw_tools .inner_wrap button:nth-child(n+2){margin-left:1px;}
.draw_tools .inner_wrap button:nth-child(n+2)::before{content: ""; position:absolute; top:50%; left:-1px; transform: translateY(-50%); display: block; width:1px; height:10px; background-color: #dddddd;}

/* 약관 (old)common.css */
.terms{background-color: #ffffff; min-height: 100vh; overflow-y: auto;}
.terms .container {margin-top: 0px; padding-top:40px; height:auto; background-color: #ffffff; border-radius:0;}
.terms .main_contents {padding-top:0; padding-bottom: 205px;}
.terms .container .terms_title h2{ font-size:22px; letter-spacing:-0.01px;}
.terms .terms_article{margin-top:40px;}
.terms .terms_article .terms_aricle_title{font-size:18px; line-height:1.56; letter-spacing:-0.01px;}
.terms .terms_article .text_wrap{margin-top:20px;}
.terms .terms_article .text_wrap .terms_aricle_con,
.terms .terms_article .text_wrap .terms_aricle_con .terms_aricle_con_dep{font-weight: 500; line-height: 1.43; color: #666666;}
.terms .terms_article .text_wrap .terms_aricle_con .terms_aricle_con_dep{padding:10px 0 0 20px; display: block; }
.terms .terms_article ul{counter-reset: article_num;}
.terms .terms_article ul li:nth-child(n+2){margin-top:20px;}
.terms .terms_article ul li{display: flex; align-items: flex-start; gap:0 8px;}
.terms .terms_article ul li::before{counter-increment: article_num; content: counter(article_num)"."; font-size:14px; font-weight: 500; line-height: 1.43; color:#666666; }
.terms .terms_article ul li p{position:relative;}
.terms .terms_article .text_wrap .text_inner:nth-child(n+2){margin-top:20px;}
.terms .terms_article .text_wrap .text_inner .terms_aricle_subtitle{font-size: 16px; line-height: 1.5;}
.terms .terms_article .text_wrap .text_inner .terms_aricle_con{margin-top:10px;} 
.terms .terms_article .text_wrap .terms_aricle_con_dep strong{margin-bottom:10px; display: block; font-size: 14px; font-weight: 500;  line-height: 1.43; color: #303030;}
.terms .terms_agree{position: fixed; bottom: 0; left: 0;  z-index: 9; width: 100%;}
.terms .terms_agree button {padding: 30px 80px 38px; display: flex; justify-content: center; align-items: center; width: 100%; align-items: center; background-image: linear-gradient(103deg, var(--gradationStart), var(--gradationEnd) 100%);}
.terms .terms_agree button span{height: 22px; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center; color: #ffffff;}
.terms .bottom_zero_btn_wrap {position: fixed;}

/* 하단버튼 (old)common.css */
.bottom_zero_btn_wrap{position: relative; bottom: -2px; padding: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: 100%;}
.bottom_zero_btn_wrap .bottom_zero_btn{padding: 30px 0 38px; width: 100%; border-radius: 0; background-color: var(--disabled_bg);}
.bottom_zero_btn_wrap .bottom_zero_btn span{height: 22px; font-size: 16px; font-weight: bold; line-height: 1.375; text-align: center; color: var(--disabled_text);}
.bottom_zero_btn_wrap .bottom_zero_btn.active{background-color: transparent; background-image: linear-gradient(100deg, var(--gradationStart), var(--gradationEnd));}

/* 하단 scrollup popup ocr/ocr_result.html 일반 팝업과 별도 (old)common.css */
.scroll_popup {top: 100%; background-color: transparent; transition: top, backgroundColor, .3s; }
.scroll_popup.active + .overlay{display: block;}
.scroll_popup.active{top:137px; background-color: #f5f5f5;}
.scroll_popup .scroll_popup_symbol span{display: block; width:40px;height:5px; border-radius: 2.5px; background-color: #dadce3;}
.scroll_popup_symbol{padding-top:10px;  display: flex; justify-content: center; }
.overlay{position:fixed; top:0; left:0; z-index: 100; display: none; width:100%; height:100%; background-color: rgba(48, 48, 48, 0.7);}
.scroll_popup .scroll_popup_close{position: absolute; top:25px; right:25px; display: none;}
.scroll_popup .scroll_popup_close i{display: block; width:32px; height:32px;}

/* 뱃지 퀘스트 (old)common.css */
.badge_label{display:inline-flex; font-weight: 700; font-size:10px; height:2.0em; align-items: center; padding:0 .6em; border-radius: 1em; justify-content: center;}
.badge_label.new{background-color: #ee4700; color:#fff; }
.badge_label.beta{background: url("../images/main/icon_gnb_beta.svg") no-repeat; background-size: contain; width:3.5rem; height:1.6rem; text-indent: -99999px; border-radius: 0; padding:0}
.bullet_list > li:before{content:'-'; display:inline-block; margin: 0 5px 0 -10px;}

/* Error (old)common.css */
.error_wrap{width:100%; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #fff;}
.error_inner{display:flex; justify-content: center; flex-direction: column; text-align: center;}
.error_inner:before{display:block; content:''; width:70px; height:70px; background: url("../images/common/icon_error.svg"); margin:0 auto}
.error_inner h1{font-size:50px; font-weight: 700; color:#303030;}
.error_inner .desc{font-size:20px; margin-top:10px; color:#303030; text-transform:uppercase }
.system_wrap{width:100%; height:100vh; display:flex; justify-content: center; align-items: center; background-color: #fff;}
.system_inner{display:flex; justify-content: center; flex-direction: column; text-align: center;}
.system_inner .icon_wrap{display:flex; justify-content: center;}
.system_inner h1{font-size:50px; font-weight: 700; color:#303030; margin-top:20px;}
.system_inner .desc{font-size:22px; margin-top:15px; color:#303030;}
.system_inner .desc_bottom{display:flex; justify-content: center; margin-top:50px;}
.system_inner .desc_bottom .guide{display:flex; width:auto; height:48px; align-items: center; justify-content: center; border-radius: 20px; background-color: #ededed; font-size: 14px; color:#303030; padding:0 30px}

/* 전자칠판 */
.back_btn {position: fixed; bottom: 1rem; right: 2rem; z-index: 99999; width: 4.2rem; height: 4.2rem;  padding: 1.3rem; border-radius: 50%; box-shadow: 0 2rem 3rem 0 rgba(0, 0, 0, 0.3); background-image: linear-gradient(135deg, #fff, #eee); opacity: 1;}

.autocomplete-box {position: relative; width: 100%; height: 3.125rem; z-index: 10;}
.autocomplete-box .autocomplete-inner {position: absolute; top: 0; left: 0; width: 100%; box-shadow: 0 0 0 0.063rem inset #999; background-color: #fff; border-radius: 15px; transition: box-shadow .3s; overflow: hidden; padding-top: 5px;}
.autocomplete-box .autocomplete-value {display: flex; width: 100%; height: 50px; justify-content: space-between; padding: 0 20px; align-items: center; gap: 0.313rem; }
.autocomplete-box .autocomplete-value .autocomplete-input{width:100%; border:0; font-weight: 500; padding: 12px 0;}
.autocomplete-box .autocomplete-value .btn-icon-16{flex-shrink: 0;}
.autocomplete-box .autocomplete-value .ico-arrow-dropdown{flex-shrink: 0; transition: transform .2s;}
.autocomplete-box .autocomplete-value .ico-arrow-dropdown i {font-size: 1rem !important;}
.autocomplete-list{position: relative; overflow: hidden; height:0; max-height: 0; display:none; width: calc(100% - 0.25rem); left: 0.125rem;}

.autocomplete-box.active .autocomplete-list{max-height: 13.75rem; overflow-y: auto;}
.autocomplete-list{scrollbar-gutter: stable;}
.autocomplete-list::-webkit-scrollbar {width: 0.188rem; height: 0.188rem;}
.autocomplete-list::-webkit-scrollbar-thumb {background: #ddd; border-radius: 0.094rem;}
.autocomplete-list::-webkit-scrollbar-track {display: none;}
.autocomplete-item > a{display:flex; width:100%; align-items: flex-start; justify-content: flex-start; padding: 0.625rem 1.125rem; gap:0.313rem;}
.autocomplete-item .list-txt{font-size: 1rem; font-weight: 700; padding-right:0.313rem; /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */}
.autocomplete-item.inactive .list-txt{color: #303030}

/* active */
.autocomplete-box.active .autocomplete-inner{box-shadow: 0 0 0 0.125rem inset var(--primaryColor);  padding-bottom:0.875rem}
.autocomplete-box.active .autocomplete-list{display: block}
.autocomplete-box.active .autocomplete-value .ico-arrow-dropdown{transform: rotate(-180deg);}
.autocomplete-item.active > a{background-color: var(--secondaryColor);}
.autocomplete-item.active .list-txt{color:var(--primaryColor)}

/**** Mediaquery ****/
@media (max-width:359px) {
	/* Layout */
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1.333rem;}

	/* .character_comment */
	.character_comment .comment_box{max-width: 19.5rem;}
	/* grade_progress */
	/* .grade_bar{font-size:.9rem} */
	.grade_bar_area,
	.grade_bar,
	.grade_markers{font-size:.9rem}
}

@media (max-width:319px){   
	/* s: (old)common.css */ 
	/* Bubble tool tip 말풍선 */
	.bubble_desc {max-width: 240px;}
  	/* 그리기 툴 */
	.draw_tools .inner_wrap {flex-wrap: wrap;}
  	.draw_tools .inner_wrap button {padding: 8px 10px;}
	/* e: (old)common.css */
}

@media (max-width:290px) {
	/* Layout */
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1rem;}

	/* .character_comment */
	.character_comment .comment_box{max-width: 15rem;}
	/* .box_frame - bubble  */
	.box_frame_title .bubble_tip{max-width: 24em;}
}

@media (min-width:600px) {
	:root {--btnRadius:3em;}
	/* Layout */
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1.308rem;}
	.wrap{padding: 0; max-width: 550px;}
	.sub_page .container {margin-top: 0; height: calc(100vh - 76px);}
	/* Header */
    header{padding: 15px 0 13px;}
    header .header_wrap{padding: 0 40px; min-height:33px}
	/* Sub header */
	.sub_page header{padding: 23px 0 20px; min-height:76px}
	.sub_page header .sub_title{font-size: 13.33334px;}

	/* Buttons style */
	/* more */
	.btn_more_list{font-size:12px;}
	/* .box_frame */
	.box_frame_inner{font-size:.85rem}

	/* grade_progress */
	/* .grade_bar_area.over_grade,
	.grade_bar_area.under_grade,
	.grade_bar,
	.grade_markers{font-size:1.335rem} */
	.grade_bar_area,
	.grade_bar,
	.grade_markers{font-size:1.335rem}
	.grade_bar .now .pointer,
	.grade_bar .marker .pointer{border-width: 5px;}
	.grade_bar_area.over_grade_m::after, .grade_bar_area.under_grade_m::after,
	.grade_bar_area.over_grade::after, .grade_bar_area.under_grade::after,
	.grade_bar_area.none_front::after, .grade_bar_area.none_front::before,
	.grade_bar_area.none_back::after, .grade_bar_area.none_back::before,
	.grade_bar_area.none_both::after, .grade_bar_area.none_both::before,
	.grade_bar_area.none_both .grade_markers::after,
	.grade_bar_area.none_both .grade_markers::before{max-width:none; max-height:none;}
	/* mathgames_list */
	.mathgames_item .info_desc .game_info dd{font-size:1.231em;}
	.list_top_message{font-size:13px; padding:.95em 0}
	.list_top_message > .txt br{display:none}
	/* .character_comment */
	.character_comment .comment_box{font-size:.9rem}

	/* s: (old)common.css */
	/* card ui - Progress report(ai off), wm */
	.card_ui .card_ui_inner {padding: 22px 25px 25px;}
	.card_ui .card_title_wrap .card_title p {font-size: 16px; line-height: 1.5;}
	/* none_list */
	.none_list p br{display: none;}
	/* 상단 탭 ui Progress report */
	.sub_content_top_wrap .sub_content_top .text_wrap span{height:36px; font-size: 26px;}
	.sub_content_top_wrap .sub_content_top .text_wrap p{margin-top: 10px; height:24px; font-size: 18px; line-height: 1.56; letter-spacing: -0.01px;}
	.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav{max-width: 360px;}
	.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav li a {font-size: 18px; letter-spacing: -0.01px; }
	/* qz, dt */
	.qz_progress {margin-top: 25px;}
	/* Bubble tool tip 말풍선 */
	.bubble_desc {top:inherit; bottom: calc(100% + 20px);}
 	.bubble_desc::before {top: 100%;}  
	/* 그리기 툴 */
	.draw_tools .wrap{padding:0 30px; width:100%; max-width: inherit; }
	.draw_tools .inner_wrap button:not(.btn_bubble_close) {padding: 9px 20px;}
	.draw_tools .inner_wrap button:not(.btn_bubble_close) i{width:32px; height:32px;}
	.draw_tools .inner_wrap button i img{width:100%;}
	/* 약관 */
	.terms .container {padding-top:100px; height: auto;}  
	.terms .container .terms_title h2{font-size:24px; line-height:1.33; letter-spacing:-0.01px;  }
	.terms .main_contents {padding-top:0; padding-bottom:210px;}
	/* 하단버튼 */
	.bottom_zero_btn_wrap .bottom_zero_btn span{font-size: 20px;}
	/* 하단 scrollup popup ocr/ocr_result.html 일반 팝업과 별도 */
	.scroll_popup.active .scroll_popup_symbol{display: none;}
	.scroll_popup.active .scroll_popup_close{display: block;}
	/* e: (old)common.css */
}

@media (min-width:600px) and (orientation: portrait) {
	/* s: (old)common.css */
	/* card ui */
	.card_ui {padding: 0 10px;}
	/* big card */
	.big_card .card_question_img {margin-top: 10px;}
	.big_card .card_btn_wrap {margin-top: 10px;}  
	/* 상단 탭 ui Progress report */
	.sub_content_top_wrap{margin-top: 50px;}
	/* 약관 */
	.terms .terms_agree button span {height:27px; font-size:20px; line-height:1.3; letter-spacing:-0.01px;}
	/* 하단 scrollup popup ocr/ocr_result.html 일반 팝업과 별도 */
	.scroll_popup.active{top:127px;}	
	/* e: (old)common.css */
} 

@media (min-width:712px) and (orientation: landscape) { 
	/* s: (old)common.css */
	/* card ui */
	.card_ui {padding: 0;}
	/* 그리기 툴 */
	.draw_tools .wrap {padding: 0px 20px;}
	.draw_tools .inner_wrap button {padding: 8px 15px;}
	.draw_tools .inner_wrap button i {width: 24px; height: 24px;} 
	/* e: (old)common.css */
}

@media (max-width:768px) and (orientation: landscape) { 
	/* 약관 (old)common.css */
	.terms .wrap{padding:0 50px;}  
}

@media (min-width:728px) { }
@media (min-width:600px) and (max-aspect-ratio: 1/1.125), (min-height:1024px) and (orientation: landscape)  { }
@media (min-width:728px) and (orientation: portrait) {}
@media (min-width:768px) and (orientation: landscape) {}

@media (min-width:1024px) {
	/* Layout */
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1.429rem;} 

	/* Math games list */
	.mathgames_item .info_desc{font-size:.9rem}
}

@media (min-width:1024px) and (orientation: landscape) {
	/* Layout */
	.wrap {padding: 0 50px; max-width: inherit;}
	/* Header */
	header .header_wrap {padding: 0 50px;}

	/* s: (old)common.css */
	/* 가로 스크롤 */
	.ho_scroll{display: flex; overflow: auto; scrollbar-width: none;}
	.ho_scroll::-webkit-scrollbar {display: none;}  
	/* card ui */
	.card_ui{margin-top:0; padding:0;  padding-right:20px;} 
	.big_card .card_ui_inner{padding: 22px 25px 25px; width:452px; height:100%;}
	.big_card .card_question_img {margin-top: 10px;}
	.big_card .card_btn_wrap {margin-top: 10px;}  
	/* 그리기 툴 */
	.draw_tools .wrap {padding: 0 30px;}
	.draw_tools .inner_wrap button {padding: 9px 20px; }
	.draw_tools .inner_wrap button:not(.btn_bubble_close) i{width:32px; height:32px;}
	/* 상단 탭 ui Progress report */
	.sub_content_top_wrap{margin-top: 40px;}
	.sub_content_top_wrap .sub_content_top .text_wrap{margin-left:10px;}
	/*.sub_content_top_wrap .tab_wrap {margin-top: 0px;}*/
	.tab_content_wrap{padding:0;}
	/* 하단 scrollup popup */
	.scroll_popup {top: calc(100% - 93px);}
	/* e: (old)common.css */
}

@media (min-width:1180px) {
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1.333rem;} 
}

@media (min-width:1440px){
	/* card_ui (old)common.css */
	.big_card{width:475px;}
  }

@media (min-width:1600px) and (orientation: portrait) {
	/* s: (old)common.css */
	/* Header */
	.ko header .sub_title a .text_wrap h2 {line-height: 1.3;}

	/* 상단 탭 ui Progress report */
	.sub_content_top_wrap .tab_wrap {margin-top: 30px; height: 90px;}
	.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav { max-width: 720px; height: 90px;}
	.sub_content_top_wrap .tab_wrap .tab_inner .tab_nav li a {padding: 19px 20px 22px;  height:90px; font-size: 36px; line-height: 1.5; letter-spacing: -0.01px;}
	/* 프로그래스 */
	.qz_progress {margin-top: 50px; height:10px;}
 	.qz_progress .bar {border-radius: 0 5px 5px 0;}
	/* e: (old)common.css */
} 


/* PC (wide) */
@media (min-width:1680px) { 
	/* :root {--borderRadius:1.34rem;} */
}

@media (min-width:2650px) {
	.main_page, .sub_page.myclass, .sub_page.outcome{font-size: 2rem;} 

	/* bottom_fixed */
	.bottom_fixed .inner_btns{max-width: 42.5rem;}
	/* Buttons style */	
	.btn_mid,.btn_lg{max-height:none;}

	/* s: (old)common.css */
	/* Header */
	.ko header .sub_title a .text_wrap h2 {line-height: 1.3;}

	/* 프로그래스바*/
	.qz_progress {margin-top: 50px; height:10px;}
	.qz_progress .bar {border-radius: 0 5px 5px 0;}
	/* 그리기툴 */
	.draw_tools {top: 40px;}
	.draw_tools .wrap {padding: 0 60px;}
	.draw_tools .inner_wrap button:not(.btn_bubble_close) {padding: 18px 40px;}
	.draw_tools .inner_wrap button:not(.btn_bubble_close) i {width: 64px; height: 64px;}
	.draw_tools .inner_wrap button:nth-child(n+2)::before {left: -1px; width: 2px; height: 20px;}
	/* e: (old)common.css */
}

@media (min-width:3840px) {
	/* .main_page, .sub_page.myclass, .sub_page.outcome{font-size: 1vw;}

	.sub_page header {font-size:40px;}
	.sub_page header .sub_title .text_wrap h2{font-size: 58px;}
	.sub_page header .sub_title i{font-size: 58px;}
	.gnb .gnb_inner .gnb_info .service_list ul li a .icon_wrap{max-width: 130px; max-height:130px} */
}


/******** Global_slider ********/
/* 글로벌 슬라이드 ab (old)common.css */
.global_slider .global_slider_wrap{padding-top:40px; overflow: hidden;}
.global_slider .global_slider_wrap .slider_item{padding:0 20px;}
.global_slider .global_slider_wrap .slider_content .img_wrap{margin:0 auto; display: flex; justify-content: center;}
.global_slider .global_slider_wrap .slider_content .text_wrap{margin-top:20px;}
.global_slider .global_slider_wrap .slider_content .text_wrap p{margin:0 auto; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center;}
.global_slider .global_slider_wrap .slider_content .text_wrap p.pd_lr_36{padding:0 36px;}
.global_slider .global_slider_wrap .slider_content p.ai_text_wrap{margin-top:6px; display: flex; justify-content: center; align-items: center; gap: 0 7px;}
.global_slider .global_slider_wrap .slider_content p.ai_text_wrap .icon_24{display: flex; justify-content: center; align-items: center; background-color: #ffbe30; font-size: 12px; font-weight: bold; line-height: 1.33; color:#ffffff; text-align: center; border-radius: 50%;}
.global_slider .global_slider_wrap .slider_content p.ai_text_wrap .ai_text{height: 17px; font-size: 12px; font-weight: bold; line-height: 1.33; text-align: center; color: #ffbe30;}
.global_slider .global_slider_wrap .slider_content p.ai_text_desc{margin-top:22px; font-size: 14px; font-weight: 500; line-height: 1.43; text-align: center; color: #666;}
.global_slider .global_slider_wrap .help_slider .slider_content .text_wrap {margin-top: 0px;}
.global_slider .global_slider_wrap .help_slider .help_board{margin-top:20px; padding:35px 25px; border-radius: var(--borderRadius); background-color: var(--countrySelectBg);}
.global_slider .global_slider_wrap .help_slider .help_board ul{position: relative; display: flex; flex-wrap: wrap;}
.global_slider .global_slider_wrap .help_slider .help_board ul::before{content:""; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: block; width:1px; height:100%; background-color: rgba(48, 48, 48, 0.1);}
.global_slider .global_slider_wrap .help_slider .help_board ul li{width:50%; display: flex; flex-direction: column; justify-content: center;}
.global_slider .global_slider_wrap .help_slider .help_board ul li .help_board_title{font-weight: bold;  line-height: 1.43; text-align: center;}
.global_slider .global_slider_wrap .help_slider .help_board ul li .help_board_desc{margin-top:10px;  font-size:12px; font-weight:500; line-height:1.33; letter-spacing:-0.3px; text-align:center; color:#666;}
.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(-n+2){padding-bottom:25px; border-bottom: 1px solid rgba(48, 48, 48, 0.1);}
.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(n+3):nth-child(-n+4){padding:25px 5px 0;}
.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(1) .help_board_title span{display:inline-block;}
.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(odd) {padding-right: 18px!important;}
.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(even) {padding-left: 18px!important;}
.global_slider_wrap .global_slider_btn{display: none;}
/* slider dot */
.global_slider_dot{margin-top:30px; display: flex; justify-content: center; align-items: center; gap:0 5px;}
.global_slider_dot span{margin:0!important; display: block; width: 5px; height: 5px; border-radius: 2.5px;
  background-color: #dddddd; opacity: 1; transition: width .3s;}
.global_slider_dot span.swiper-pagination-bullet-active {width: 15px; background-color: var(--bulletColor);}
/* slider button */
.global_slider .bottom_btn_wrap{position:relative; bottom:0; left:50%; margin-top:75px; z-index: 1; transform: translateX(-50%); width:100%; display: flex; flex-direction: column; align-items: center; }
.global_slider .bottom_btn_wrap .create_acc_btn{height: 19px; font-weight: 500; line-height: 1.43;  text-align: center; color: #666; border-bottom: 1px solid;}
.global_slider .bottom_btn_wrap .btn_wrap{margin-top:30px; display: flex; align-items: center; width:100%;}
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn{padding:30px 30px 38px; height:90px; }
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.hav_acc_btn{width: 58.33333333%; background-color:#f2f7ff;}
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.start_btn{display: flex; justify-content: center; width: 41.66666667%;  background-image: linear-gradient(118deg, var(--currentSubjectBgStart), var(--currentSubjectBgEnd) 100%); }
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn span{height:22px; font-size: 16px;  font-weight: bold; text-align: center;}
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.hav_acc_btn span{color: var(--subText);}
.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.start_btn span{color:#ffffff;}

@media (max-width:359px) {
	.global_slider .global_slider_wrap .slider_content .img_wrap { width: auto;  height: auto;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li p br{display: none;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn {padding: 30px 12px 38px;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn span {font-size: 14px;}
}

@media (min-width:600px){
	.global_slider .global_slider_logo .img_wrap {width: 200px; height: 32px;}
	.global_slider .global_slider_wrap {padding-top: 50px;}
	.global_slider .global_slider_wrap .slider_content .text_wrap {margin-top: 30px;}
	.global_slider .global_slider_wrap .slider_content .text_wrap p {font-size: 18px; line-height: 1.56;    letter-spacing: -0.01px;}
	.global_slider .global_slider_wrap .slider_content .text_wrap p.ai_text_wrap {margin-top: 10px;}
	.global_slider .global_slider_wrap .slider_content .text_wrap p br{display: none;}
	.global_slider .global_slider_wrap .slider_content .text_wrap p.pd_lr_36 {padding: 0;}
	.global_slider .global_slider_wrap .item1 .slider_content .text_wrap p br{display: block;} 
	.global_slider .global_slider_wrap .item7 .slider_content .text_wrap p br{display: block;} 
	.global_slider .global_slider_wrap .slider_item{padding:0; height:auto; overflow:inherit;}
	.global_slider .global_slider_wrap .slider_content .text_wrap{margin:20px auto 0; max-width: 448px;}
	.global_slider .global_slider_wrap .help_slider .help_board {max-width: 555px; margin: 40px auto 0;   padding: 40px 35px;} 
	.global_slider .global_slider_wrap .help_slider .help_board .help_board_title br,
	.global_slider .global_slider_wrap .help_slider .help_board .help_board_desc br{display: none;}
	.global_slider .global_slider_wrap .help_slider .help_board .help_board_title b{display: block;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(-n+2) {padding-bottom: 30px;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(n+3):nth-child(-n+4) {padding: 30px 0 0;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(odd){padding-right: 32px!important;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(even){padding-left:32px!important;}
	.global_slider .global_slider_wrap .help_slider .help_board ul li .help_board_title {font-size: 16px; line-height: 1.5;}
	.global_slider .global_slider_wrap .help_slider .help_board ul::after {top: calc(50% + 12px);}
	.global_slider .bottom_btn_wrap .btn_wrap {margin-top: 50px;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn {padding: 26px 30px 37px;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.hav_acc_btn {width: 50%;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn.start_btn {width: 50%;}
	.global_slider .bottom_btn_wrap .btn_wrap .bottom_btn span {height:27px; font-size:20px; letter-spacing:-0.01px; text-align: center;}
	.facilitatorWrap .facilitator.facilitatorType01 i{width: 53px;}
}

@media (min-width:600px) and (orientation: portrait) {
	.global_slider .wrap {max-width: inherit;}
	.global_slider .global_slider_logo {padding-top: 21.5254px;}   
	.global_slider .bottom_btn_wrap {position: fixed; margin-top: 0;}
}

@media (min-width:712px) and (orientation: landscape) {
    .global_slider .main_contents {height: auto;}
}

@media (max-width:768px) and (orientation: landscape) { 
	.global_slider .wrap {max-width:100%;}
	.global_slider .global_slider_wrap .slider_item {padding: 0 50px;} 
}

@media (min-width:1024px) { 
    .global_slider_wrap  .global_slider_btn{display: block; width:60px; height:60px; border-radius: 50%; background:#f2f7ff; padding:18px; position: fixed; top: 50%; margin-top: calc(-1 * var(--swiper-navigation-size)/ 2); z-index: 10; cursor: pointer;}
    /*
    .global_slider_btn.swiper-button-next:after,
    .global_slider_btn.swiper-button-prev:after{content:''; display:block; width:100%; height:100%; background-color: var(--contentColor); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat ; mask-position: center; -webkit-mask-position: center; mask-image: url("../images/common/black_arrow_16.svg"); -webkit-mask-image: url("../images/common/black_arrow_16.svg");}
    */
    .global_slider_btn.swiper-button-next:after,
    .global_slider_btn.swiper-button-prev:after{content:''; display:block; width:100%; height:100%; background-image: url("../images/common/icon_arrow_blue.svg"); background-size: cover;}
    .global_slider_btn.swiper-button-prev:after{transform: scale(-1);}
    .global_slider_btn.swiper-button-next{right:25px}
    .global_slider_btn.swiper-button-prev{left:25px}
}

@media (min-width:1024px) and (orientation: landscape) {
    .global_slider .global_slider_logo {padding-top: 110px;}
    .global_slider .bottom_btn_wrap {position: fixed; margin-top: 0;}
    .global_slider .bottom_btn_wrap .btn_wrap {margin-top: 38px;}  
    .global_slider .global_slider_wrap {padding-top: 30px;}
    .global_slider .global_slider_wrap .slider_item {padding: 0; height: auto; overflow: inherit;}
    .global_slider .global_slider_wrap .help_slider .help_board {margin: 25px auto 0;} 
    .global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(odd) {padding-right: 34px;}
    .global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(-n+2){padding-bottom: 30px;}
    .global_slider .global_slider_wrap .help_slider .help_board ul li:nth-child(n+3):nth-child(-n+4) {padding: 30px 8px 0;}
}

@media (min-width:1024px)  and (max-height:768px) and (orientation: landscape){
    .global_slider .bottom_btn_wrap {position: relative; margin-top: 20px;}
    .global_slider .bottom_btn_wrap .btn_wrap {margin-top: 28px;}  
}

@media (min-width:1280px){
    .global_slider_btn.swiper-button-next{right:12.07vw}
    .global_slider_btn.swiper-button-prev{left:12.07vw}
}