@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
*/

 /*메시지 팝업 */ 
 .message_popup{position: fixed; top:0; left:0; right:0; bottom:0;  display: none; width:100vw; height:100%; background-color: rgba(255,255,255,.9);}
 .message_popup .message_content{display: flex; justify-content: center;}
 .message_popup .message_content .message_item{width:100%; max-width: 375px;}
 .message_popup .message_content .message_item .message_title{font-family: 'baloobhaina', sans-serif; font-size: 40px; font-weight: bold; line-height: 1; letter-spacing: -0.02px; text-align: center; color: #6960eb;}
 .message_popup .message_content .message_item .message_title.purple{color: #6960eb;}
 .message_popup .message_content .message_item .message_title.green{color: #32d6c5;}
 .message_popup .message_content .message_item .message_title.peach{color: #fe7c6f;}
 .message_popup .message_content .message_item .message_title.yellow{color:#faac00;}
 .message_popup .message_content .img_wrap{position: relative; margin:0 auto; display: flex; justify-content: center; align-items: center;  max-width:375px; max-height:251px; overflow: hidden; }
 .message_popup .message_content .img_wrap figure{width:100%;}
 .message_popup .message_content .icon_wrap{position: relative; margin:0 auto; display: flex; justify-content: center; align-items: center;  width:100px; height:100px; max-width:150px; max-height:150px; overflow: hidden; }
 .message_popup .message_content .icon_wrap figure{width:100%;}
 .message_popup .message_content .message_desc{margin-top:20px; padding:0 20px; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center; color: #666;}
 .message_popup .message_content .message_desc.message_desc_em{margin-top:3px; font-family: 'baloobhaina', sans-serif; font-size: 24px; font-weight: bold; line-height: 1.33; letter-spacing: -0.01px; text-align: center; color: #12bcfb;}
 .message_popup .message_content .message_desc.sub_txt{font-size:16px; color:#303030; margin-top:8px; line-height: 1.4;}
 .message_popup .message_content .message_txt{margin-top:15px; font-family: 'baloobhaina', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.33; letter-spacing: -0.01px; text-align: center; color: #303030;}

 /* mathjax 답안 확대 */
 .box_answer_item .pv-ib{font-size:24px;}

 .message_popup .message_content .message_item{display: none;}
 .message_popup.active{display: block; z-index: 9999;}
 .message_popup .message_content .message_item.active{display: block;}
 .message_popup .message_content .message_item.nomal_desc{margin-top:23.7684vh;}
 .message_popup .message_content .message_item.bold_desc{margin-top:28.9408vh;}
 .message_popup .message_content .message_item.learn_end_popup{margin-top:15.35vh; margin-left:2px}
 .message_popup .message_content .message_item.bold_desc .img_wrap{max-height: 281px;}

/* learn_end_popup */
.message_popup .message_content .message_item.learn_end_popup .img_wrap{position: relative; align-items: flex-end; max-height: 436px;}
.message_popup .message_content .message_item.learn_end_popup .img_wrap img{object-fit: cover; object-position: 8px 0;}
.message_popup .message_content .message_item.learn_end_popup::before{content: ""; position: absolute; top:0; left:50%; z-index: -1; transform: translateX(-50%); width:160%; height:calc(380px + 22.0443vh); display: block; background-image: linear-gradient(to bottom, #6460f0, #7061e5); border-radius: 0 0 50% 50%;}
.message_popup .message_content .message_item.learn_end_popup .message_desc.message_desc_em{margin-top:35px; color:#6960eb;}
.message_popup .message_content .message_item.learn_end_popup .message_desc{margin-top:10px;}

/* 팝업 css 구조 개선 */
.message_popup .message_content.message_case .message_item.learn_end_popup::before{content:none}
.message_popup .message_content.message_case .message_item.learn_end_popup .img_bg::before{content: ""; position: absolute; bottom:0; left:50%; z-index: -1; transform: translateX(-50%); width:160%; height:80vh; display: block; background-image: linear-gradient(to bottom, #6460f0, #7061e5); border-radius: 0 0 50% 50%;}
.message_popup .message_content.message_case{width:100%; height:100%;}
.message_popup .message_content.message_case .message_item{margin-top:0 !important; max-width:100% !important; height:100%;}
.message_popup .message_content.message_case .message_item .item_wrap{display:flex; height: 100%; flex-direction: column; justify-content: center; }
.message_popup .message_content.message_case .message_item .img_bg{position: relative;}
.message_popup .message_content.message_case .learn_end_rolling_text .message_desc{min-height: 64px;}
.message_popup .message_content.message_case .message_item .item_wrap .bottom_zero_btn_wrap{position: fixed; bottom:0; height:90px}
.message_popup .message_content.message_case .message_item .item_wrap .bottom_zero_btn_wrap .bottom_zero_btn{height: 100%;}

.message_item.btn_type{padding-bottom:95px;}
.message_popup .message_content.message_case .message_item.btn_type .item_wrap{justify-content: flex-end;}
.message_item_answer{min-height:39.77vh; max-height:45vh; padding:40px 20px 20px;}
.message_item_inner{display:flex; flex-direction: column; height:100%; background-color: #e7e7e7; border-radius: 20px; padding:20px;}
.message_item_inner .tit{display:block; font-size:20px; font-weight: 700; color:#303030; text-align: center; margin-bottom:20px;}
.message_item_inner .box_inner{display:flex; align-items: center; border-radius: 15px; background-color: #fff; width:100%; height:100%; padding:15px; max-height:100%; overflow-y:auto;}
.box_answer_list{width:100%; display:flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap:25px; max-height:100%;}
.box_answer_list .box_answer_item{position: relative; display:flex; align-items: center; justify-content: center; min-height:40px;}
.box_answer_list .box_answer_item::after{display:block; content:','; font-size:24px; font-weight: 700; position: absolute; bottom:0; right:-8px; }
.box_answer_list .box_answer_item:last-child::after{content:none}
.box_answer_list:not(.multiple) .box_answer_item .pv-ib{margin:0;}
/* 객관식 */
.box_answer_list.multiple{flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; flex-direction: column; width:auto; margin:0 auto; gap:10px;}
.box_answer_list.multiple .box_answer_item{justify-content: flex-start;}
.box_answer_list.multiple .box_answer_item::after{content:none}
.box_answer_list.multiple .box_answer_item:last-child{padding-bottom:20px; box-sizing: content-box;}

/* confirm_popup */
.confirm_popup{position: fixed; top:0; left:0; right:0; bottom:0; display: none;  width:100vw; height:100vh; z-index: 9999; background-color: rgba(48, 48, 48,0.7); }
.confirm_popup.active{display: block;}
.confirm_popup .confirm_popup_content{padding:0 20px; display: flex; justify-content: center; align-items: center; height: 100%;}
.confirm_popup .confirm_popup_content .popup_box{position:relative; padding:30px 20px 20px; display: none; width:100%; max-width: 335px; border-radius: 15px; background-color: #ffffff;}
.confirm_popup .confirm_popup_content .popup_box.active{display: block;}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_ch{position: absolute; bottom:100%; left:20px; display: block; width:130px; height:90px;}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_desc{font-size:16px; font-weight:bold; line-height:1.5; text-align:center;}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_title{font-size:24px; font-weight:700; line-height:1.5; text-align:center; margin-bottom:20px}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_title.type2{color: var(--contentColor);}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_title.type3{color: var(--gradationStart);}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_title small{display:block; font-size:16px; font-weight:700; margin-top:5px}
.confirm_popup .confirm_popup_content .popup_box .confirm_popup_desc strong{font-size:16px; font-weight:bold; line-height:1.5; text-align:center; color: var(--contentColor);}

/* 2023.02.27 팝업 버튼 영역 공통화를 위해 css 수정 */
.confirm_popup .popup_box .btn_wrap{margin:30px 0 0; display: flex; gap:0 11px}
.confirm_popup .popup_box .btn_wrap li{ width:50%;}
.confirm_popup .popup_box .btn_wrap li:only-child{min-width:50%; width: auto;}
.confirm_popup .popup_box .btn_wrap li button{padding:14px 20px; width:100%; font-size:16px; font-weight:bold; line-height:1.5; text-align:center; color:#ffffff; background-color: #666666; border-radius: 15px;}
.confirm_popup .popup_box .btn_wrap li button.positive_btn{color:#ffffff; background-image: linear-gradient(109deg, var(--gradationStart), var(--gradationEnd)); }
.confirm_popup .popup_box.one_btn .btn_wrap li{width:100%;}
.confirm_popup .popup_box .btn_wrap.type2{margin:30px 0 10px}
.confirm_popup .popup_box .btn_wrap.type2 li button{max-width:142px; margin:0 auto;}

/* .popup_form_wrap */
.popup_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;}
.popup_form_wrap .input_wrap:active,
.popup_form_wrap .input_wrap:hover, 
.popup_form_wrap .input_wrap:focus {border: solid 1px #303030; background-color: #ffffff;}
.popup_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;}
.popup_form_wrap input::placeholder{font-size: 16px; font-weight: 500; line-height: 1.33;  color: #999999;}
.popup_form_wrap .new_placeholder{position: absolute; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0px; color: #999999; pointer-events: none;}
.popup_form_wrap .new_placeholder small{font-size: 12px; font-weight: 500; line-height: 1.33;}
.popup_form_wrap input:active, 
.popup_form_wrap input:hover, 
.popup_form_wrap input:focus,
.popup_form_wrap input:valid {color: #303030;}
.popup_form_wrap input:active + .new_placeholder, 
.popup_form_wrap input:hover + .new_placeholder, 
.popup_form_wrap input:focus + .new_placeholder, 
.popup_form_wrap input:valid + .new_placeholder{display: none;}
.popup_form_wrap .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); }
.popup_form_wrap .check_box_wrap input[type="checkbox"] + label{position:relative; display:flex;  gap:0 15px;  width:100%; height:100%; cursor:pointer; }
.popup_form_wrap .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;  }
.popup_form_wrap .check_box_wrap input[type="checkbox"]:checked + label::before{background-color: var(--subText); box-shadow: none; background-image: url("../images/common/w_check_icon_16.svg"); background-position: center; background-repeat: no-repeat; background-size: 16px 16px;}
.popup_form_wrap .check_box_wrap input[type="checkbox"] + label span{padding-top:2px; font-weight: 500; line-height: 1.43; color: #666;}
.popup_form_wrap .check_box_wrap input[type="checkbox"] + label span small{font-size: 12px; color: #999;}
.popup_form_wrap .full_agree{padding-bottom:17px; border-bottom: 1px solid #eeeeee;}
.popup_form_wrap .full_agree .check_box_wrap input[type="checkbox"] + label span{height:19px; font-weight: bold;}
.popup_form_wrap .select_agree li{margin-top:14px; display: flex; justify-content: space-between; gap: 0 8px; }
.popup_form_wrap .select_agree li a{padding:5px 0 5px 5px;}

/* 워크시트 이메일 정보 없는 팝업 */
.ws_email_none .popup_form_wrap{margin-top:20px}
.ws_email_none .popup_form_wrap .check_box_wrap{margin-top:20px;}
.ws_email_none .popup_form_wrap .check_box_wrap input[type="checkbox"] + label span { padding-top:0;}
.ws_email_none .popup_close_btn{position: absolute; bottom:-16px; transform: translateY(100%); right:0; display: flex; align-items: center; gap:0 5px;}
.ws_email_none .popup_close_btn span{font-size: 16px; font-weight: bold; line-height: 1.5; color: #fff;}

/* top icon popup 공통  */
.top_icon_popup{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; width: 100vw; height: 100vh; z-index: 9999; background-color: rgba(48, 48, 48,0.7); }
.top_icon_popup.active{ display: block;}
.top_icon_popup .top_icon_popup_con {padding: 0 20px; display: flex; justify-content: center; align-items: center; height: 100%;}
.top_icon_popup .popup_box {position: relative; padding: 94px 20px 50px; display: none; width: 100%; max-width: 335px; border-radius: 15px; background-color: #ffffff;}
.top_icon_popup .popup_box.active{display: block;}
.top_icon_popup .popup_box .top_icon{position: absolute; top:0; left:50%; transform: translate(-50%, -50%); padding: 4px; display: flex; justify-content: center; align-items: center; width:128px; height:128px; border-radius: 50%;  overflow: hidden;}
.top_icon_popup .popup_box .top_icon i{display: flex; justify-content: center; align-items: center;}
.top_icon_popup .popup_box .top_icon_desc{display: block; font-weight: 500; text-align: center; color: #999;}
/* 중간 버튼 */
.top_icon_popup .popup_box .btn_wrap{margin-top:35px;}
.top_icon_popup .popup_box .btn_wrap a{padding: 8px 15px; display: flex; align-items: center; gap:0 5px; border-radius: var(--borderRadius); background-image: linear-gradient(99deg, var(--gradationStart), var(--gradationEnd));}
.top_icon_popup .popup_box .btn_wrap a span{height: 22px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #fff;}
.top_icon_popup .popup_box .btn_wrap a i{margin-top: 2px; display:none;} /* 2023.06.28 아이콘 삭제 */
/* 팝업닫기 버튼 */
.top_icon_popup  .popup_box .popup_close_btn{position: absolute; bottom:-16px; transform: translateY(100%); right:0; display: flex; align-items: center; gap:0 5px;}
.top_icon_popup  .popup_box .popup_close_btn span{height: 22px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #fff;}
/* wing menu popup contents */
/* .top_icon_popup .popup_box .top_icon{position: absolute; top:0; left:50%; transform: translate(-50%, -50%); padding: 4px; display: flex; justify-content: center; align-items: center; width:128px; height:128px; border-radius: 50%;  overflow: hidden;} */
.wm_popup .top_icon{ background-image: linear-gradient(to bottom, #00cdff, #00cbfd 10%, #00c8fc 20%, #00c6fa 30%, #00c3f8 40%, #00c1f6 50%, #00bef5 60%, #00bcf3 70%, #00baf1 80%, #00b7ef 90%, #00b5ee); }
.top_icon_popup .txt_div .message{font-size:20px;font-weight: 700; text-align: center; line-height: 32px;}
.top_icon_popup .txt_div .message strong{font-size:26px; display: block; margin-bottom:5px}
.top_icon_popup .txt_div .desc{font-size:16px; font-weight: 500; text-align: center; margin-top:25px}
.top_icon_popup .txt_div .desc2{font-size:20px; font-weight: 700; text-align: center; margin-top:5px}
.top_icon_popup .txt_div + .btn_wrap > a{min-width: 133px; justify-content: center;}
.top_icon_popup .popup_box.wings_popup{padding: 80px 20px 50px;}
.top_icon_popup .popup_box.wings_popup .top_icon{width:100px; height:100px; padding:0}

/* 팝업 인터렉션 추가 */
.top_icon_popup .wm_popup .top_icon { overflow: visible;}
.wm_popup .top_icon i{position: relative; z-index: 1;}
.wm_popup .top_icon .particle_mission{position: absolute; top:50%; left:50%; transform: translate(-50%, -60%); width:320px;}
.wm_popup .wm_popup_desc{display: block; height: 19px; font-weight: 500; text-align: center; color: #999;}
.wm_popup .wm_popup_counter{margin-top:15px; display: flex; justify-content: center; align-items: center; gap:0 5px;}
.wm_popup .wm_popup_counter .wm_popup_num{height:40px; font-family:'baloobhaina', sans-serif; font-size: 48px; font-weight: bold; line-height: 1.17; letter-spacing: -0.01px;}
.wm_popup .wm_popup_text{margin-top:25px; text-align: center;}
.wm_popup .wm_popup_text p{font-size: 16px; font-weight: bold; line-height: 1.5;}
.wm_popup .wm_popup_text span{display: block; margin-top:5px; height:22px; font-size: 16px; font-weight: bold; line-height: 1.5; color:#32d6c5;}

/* 레벨업 팝업 */
.top_icon_popup .popup_box.levelup_pop{padding: 94px 20px 30px;}
.top_icon_popup .levelup_pop .top_icon {overflow: visible;}
.levelup_pop .top_icon i{position: relative; z-index: 1;}
.levelup_pop .top_icon .particle_mission{position: absolute; top:50%; left:50%; transform: translate(-50%, -60%); width:320px;}
.levelup_pop .levelup_text{text-align: center; margin-top:-15px}
.levelup_pop .levelup_text .title{font-family: 'baloobhaina', sans-serif; font-size: 30px; font-weight: 700; color:var(--gradationStart); line-height: 1;}
.levelup_pop .levelup_text .desc{font-size: 16px; font-weight: 700; color:#303030; margin-top:14px}
.levelup_pop .levelup_text .desc > span{font-size: 16px; color:var(--gradationStart); font-weight: 700;}

/* subscribe popup */
.top_icon_popup .subscribe_popup{padding: 70px 20px 40px;}
.subscribe_popup .top_icon .crown_icon{position: absolute; bottom:calc(100% - 30px); left:50%; transform: translateX(-50%); }
.subscribe_popup .subscribe_top_title{display: block; font-size: 24px; font-weight: bold; line-height: 1.33; letter-spacing: -0.01px; text-align: center;}
.subscribe_popup .subscribe_top_subtitle{margin-top:10px; display: block; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center; color: var(--contentColor);}
.subscribe_popup .subscribe_top_subtitle br{display: none;}
.subscribe_popup .subscribe_desc{margin-top:20px; padding:0 38px; font-weight: 500; text-align: center;  color: #666666;}
.subscribe_popup .subscribe_desc strong{font-weight: bold;}
.subscribe_popup .subscribe_desc br:nth-child(3){display: none;}
.subscribe_popup .discount_board_wrap{display: flex; justify-content: center;}
.subscribe_popup .discount_board{position:relative; margin:20px auto 0; padding:12px 18px 13px 20px; min-width:199px;  border-radius:var(--borderRadius); background-color:#f2f7ff;}
.subscribe_popup .discount_board .discount_board_inner{display: flex; justify-content: space-between; align-items: center; gap: 0 5px;}
.subscribe_popup .discount_board .price{font-size: 16px; font-weight: 500; line-height: 1.5; color: #999;} 
.subscribe_popup .discount_board .org_price{position: relative; padding-right:10px; width:100%;}
.subscribe_popup .discount_board .org_price::before{content:""; position: absolute; top:50%; left:0; z-index:1; transform:translateY(-50%); display:block; width:100%; height:1px; background-color:#ff8678;}
.subscribe_popup .discount_board .org_price::after{content:""; position: absolute; top:50%; right:0; z-index:1; transform:translateY(-50%); width: 0px; height: 0px; border-left: 4px solid #ff8678; border-top: 3px solid transparent; border-bottom: 3px solid transparent;}
.subscribe_popup .discount_board .opt_price{flex-shrink: 0;}
.subscribe_popup .discount_board .opt_price .price{font-weight: bold; text-align: center; color: var(--subText);}
.subscribe_popup .discount_board .opt_price .period{height:19px; font-weight: bold; line-height: 1.43; text-align: center; color: var(--subText);}
.subscribe_popup .btn_wrap {margin-top: 30px;}
.top_icon_popup .subscribe_popup .btn_wrap a {padding: 19px 20px; justify-content: center;}
.subscribe_popup .giveup_btn{margin-top:25px; display: flex; justify-content: center;  }
.subscribe_popup .giveup_btn span{height: 19px; font-weight: 500; text-align: center; color: #666666; border-bottom:1px solid #666666;}
/* nt 구독유도팝업*/
.subscribe_popup.logo_premi{padding:40px 20px 50px;}
.subscribe_popup.logo_premi .top_img{display: flex; justify-content: center; align-items: center; gap:0 15px;}
.subscribe_popup.logo_premi .top_img .logo_img figure{width:112px; height:18px;}
.subscribe_popup.logo_premi .top_img .premium_img{display: flex; align-items: center; gap:0 5px;}
.subscribe_popup.logo_premi .top_img .premium_img span{height: 22px; font-size: 16px; font-weight: bold; font-style: italic; line-height: 1.5;color: #00cdff;}
.subscribe_popup.logo_premi .text_wrap{margin-top:30px;}
.subscribe_popup.logo_premi .discount_board {margin: 35px auto 0;}
.top_icon_popup	.subscribe_popup.logo_premi .btn_wrap {margin-top: 20px;}
.subscribe_popup.logo_premi .btn_wrap a{width:100%; max-width: 295px;}

/* Notice pop */
.notice_popup{position: fixed; top:0; left:0; right:0; bottom:0; display: none;  width:100vw; height:100vh; z-index: 9999; background-color: rgba(48, 48, 48,0.7); }
.notice_popup.active{display: block;}
.notice_popup .notice_popup_content{padding:0 20px; display: flex; justify-content: center; align-items: center; height: 100%;}
.notice_popup .notice_popup_content .popup_box{position:relative; padding:30px 18px 20px; display: none; width:100%; max-width: 335px; border-radius: 20px; background-color: #ffffff;}
.notice_popup .notice_popup_content .popup_box.active{display: block;}
.notice_popup .notice_popup_content .popup_box .notice_popup_title{font-size:20px; font-weight:700; line-height:1.5; text-align:center; margin-bottom:15px}
.notice_popup .notice_popup_content .popup_box .notice_popup_desc{font-size:14px; line-height:1.5; text-align:center; color:#303030}
.notice_popup .notice_popup_content .popup_box .bl_list_area{font-size:10px; padding:0 0 0 1em}
.notice_popup .notice_popup_content .popup_box .bl_list_area .bl_list_tit{padding:0 0 0 .5em}
.notice_popup_link{display: flex; justify-content: center; margin-top:25px; gap:0 20px;}
.notice_popup_link li a{text-decoration: underline; color:#666; font-size:14px;}
.notice_popup .popup_box .btn_wrap{margin-top:30px; width: 100%; display: flex; gap:0 10px}
.notice_popup .popup_box .btn_wrap button{padding:14px 20px; width:100%; font-size:16px; font-weight:bold; line-height:1.5; text-align:center; color:#ffffff; background-color: #666666; border-radius: 15px;}
.notice_popup .popup_box .btn_wrap button.positive_btn{color:#ffffff; background-image: linear-gradient(109deg, var(--gradationStart), var(--gradationEnd)); }


/* slider up popup */
.slider_up_popup{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; width: 100vw; height: 100vh; z-index: 9999; background-color: rgba(48, 48, 48,0.7); }
.slider_up_popup.active{ display: block;}
.slider_up_popup .slider_up_popup_con {display: flex; justify-content: center; align-items: flex-end; height: 100%;}
.slider_up_popup .slider_up_popup_con .popup_box {padding: 42px 20px 50px; width:100%; background-color: #ffffff; border-radius: var(--borderRadius) var(--borderRadius) 0 0; overflow: hidden;}
.slider_up_popup .popup_box .btn_wrap{margin-top:20px;}
.slider_up_popup .popup_box .btn_wrap a{padding: 19px 15px; display: flex; align-items: center; justify-content: center; gap:0 5px; border-radius: var(--borderRadius); background-image: linear-gradient(99deg, var(--gradationStart), var(--gradationEnd));}
.slider_up_popup .popup_box .btn_wrap a span{height: 22px; font-size: 16px; font-weight: bold; line-height: 1.5; color: #fff;}
.slider_up_popup .popup_box .btn_wrap a i{margin-top: 2px;}

/* tl before popup */
.tl_before_popup .top_img{display: flex; justify-content: center; align-items: center; gap:0 15px;}
.tl_before_popup .logo_img figure{width:112px; height:18px;}
.tl_before_popup .premium_img{display: flex; align-items: center; gap:0 5px;}
.tl_before_popup .premium_img span{height: 22px; font-size: 16px; font-weight: bold; font-style: italic; line-height: 1.5;color: #00cdff;}
.tl_before_popup .text_wrap{margin-top:30px;}
.tl_before_popup .text_wrap .top_title{display: block; font-size: 24px; font-weight: bold; line-height: 1.33; letter-spacing: -0.01px; text-align: center;}
.tl_before_popup .text_wrap .desc{margin-top:10px; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center; color: #666666;}
.tl_before_popup .discount_board_wrap{display: flex; justify-content: center;}
.tl_before_popup .discount_board{position:relative; margin:35px auto 0; padding:12px 18px 13px 20px; min-width:199px;  border-radius:var(--borderRadius); background-color:#f2f7ff;}
.tl_before_popup .discount_board .discount_board_inner{display: flex; justify-content: space-between; align-items: center; gap: 0 10px;}
.tl_before_popup .discount_board .price{height: 22px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #999;} 
.tl_before_popup .discount_board .org_price{position: relative; width:100%;}
.tl_before_popup .discount_board .org_price::before{content:""; position: absolute; top:50%; left:0; z-index:1; transform:translateY(-50%); display:block; width:100%; height:1px; background-color:#ff8678;}
.tl_before_popup .discount_board .org_price::after{content:""; position: absolute; top:50%; right:0; z-index:1; transform:translateY(-50%); width: 0px; height: 0px; border-left: 4px solid #ff8678; border-top: 3px solid transparent; border-bottom: 3px solid transparent;}
.tl_before_popup .discount_board .opt_price{flex-shrink: 0;}
.tl_before_popup .discount_board .opt_price .price{font-weight: bold; text-align: center; color: var(--subText);}
.tl_before_popup .discount_board .opt_price .period{height:19px; font-weight: bold; line-height: 1.43; text-align: center; color: var(--subText);}
.tl_before_popup .giveup_btn{margin-top:25px; display: flex; justify-content: center;  }
.tl_before_popup .giveup_btn span{height: 19px; font-weight: 500; text-align: center; color: #666666; border-bottom:1px solid #666666;}

/* badge_popup contents */
.top_icon_popup .badge_popup {padding:74px 20px 50px;}
.top_icon_popup .badge_popup  .top_icon {overflow: visible;}
.badge_popup .top_icon i{position: relative; z-index: 1;}
.badge_popup .top_icon .particle_badge{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 320px;}
.badge_popup .text_wrap .badge_popup_title{display: flex; justify-content: center;}
.badge_popup .text_wrap .badge_popup_title h3{font-family: 'baloobhaina', sans-serif; font-size: 40px; font-weight: bold; line-height: 1.2; letter-spacing: -0.02px; color: #000; text-align: center;}
.badge_popup .text_wrap .badge_popup_text{margin-top:10px; display: block; font-weight: 500; text-align: center; color: #666;}
.badge_popup .sns_link{margin-top:30px;}
.badge_popup .sns_link ul{ display: flex; justify-content: center; gap:0 10px;} 
.badge_popup .sns_link ul li i{width:56px; height:56px}

.ko .badge_popup .text_wrap .badge_popup_title h3{font-family:'NotoSansCJK_KR', 'NotoSans', sans-serif;  font-size: 28px; color: #303030;}
.ko .badge_popup .text_wrap .badge_popup_text {margin-top: 15px;}

/* badge_popup contents */
.top_icon_popup .guide_badge_popup{padding: 89px 20px 50px;}
.guide_badge_popup .text_wrap .badge_popup_title{margin-top:15px;}
.guide_badge_popup .sns_link {margin-top: 35px;}

/* 진단정확도 팝업 */
.top_icon_popup .popup_box.accuracy_popup{padding:70px 20px 60px;}
.top_icon_popup.active .popup_box.accuracy_popup{display: block;}
.top_icon_popup .accuracy_popup .top_icon i{position: relative; z-index: 1; border-radius: 50%; background-color: #0098fd; padding:18px; box-sizing: border-box;}
.accuracy_popup .text_wrap .accuracy_popup_text{text-align: center; font-weight: 700; font-size: 18px;}
.accuracy_popup .text_wrap .accuracy_popup_text span{font-weight: 700; font-size: 18px; color: var(--contentColor);}

/* full popup */
.full_popup{position: fixed; top:0; left:0; z-index: 999; display: none; width:100%; height:100vh; overflow: auto; background-color: #ffffff; }
.full_popup.active{display: block;}

/* full popup concept popup*/
.concept_popup .concept_popup_header {padding: 19px 0 0px;}
.concept_popup .concept_popup_header .header_wrap {position: relative; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;}
.concept_popup .concept_popup_header .sub_title{display: flex; align-items: center; gap:0 10px;}
.concept_popup .concept_popup_header .sub_title button {display: flex; align-items: center; }
.concept_popup .concept_popup_header .sub_title .text_wrap h2 {height: 24px; font-size: 18px; line-height: 1.26; letter-spacing: -0.01px; color: #303030;}
.concept_popup_progress{margin-top: 12px; width: 100%; height: 5px; background-color: #f5f5f5;}
.concept_popup_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));}
.concept_popup .concept_popup_container{margin-top: 0; height:calc(100vh - 60px); overflow: auto;  background-color: #ffffff; border-radius: 0;}
.concept_popup .wrap{height:100%;}
.concept_popup .concept_popup_contents{position: relative; padding-top: 40px; height: 100%;}
.concept_popup .concept_popup_title{text-align: center;}
.concept_popup .concept_popup_title h3{height: 19px; font-weight: bold;  line-height: 1.43;  color: var(--contentColor);}
.concept_popup .concept_popup_title p{margin-top:10px; height:30px; font-size:22px; font-weight:bold; letter-spacing:-0.01px;}
.concept_popup .concept_popup_problem{ position: relative; margin-top:40px; padding-bottom:140px;  display: flex; justify-content: center;}
.concept_popup .concept_popup_problem .problem_inner{position:relative; padding:0 34px; width:100%;} 
.concept_popup .concept_popup_problem .problem_inner .problem_wrap{margin:0 auto; max-width: 267px;}
.concept_popup .concept_popup_problem .highlight_ms{position: absolute; transform: translate(-50%, -50%); display: block; padding: 10px 20px; border-radius: var(--borderRadius); background-color: var(--point_yellow);}
.concept_popup .concept_popup_problem .highlight_ms::before{content:""; position:absolute; bottom:100%; left:50%; transform: translateX(-50%); display:block; width:0px; height:0px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid  var(--point_yellow); }
.concept_popup .concept_popup_problem .highlight_ms p{height: 19px;  font-weight: bold;  text-align: center;}
.concept_popup .page_btn{position: absolute; top:50%; transform: translateY(-50%);}
.concept_popup .page_btn.page_prev{left:0;}
.concept_popup .page_btn.page_next{right:0;}
.concept_popup_btn{position: fixed; bottom:0; left:0;  z-index: 9; width:100%; transition: transform .3s;}
.concept_popup_btn button{padding:30px 80px 36px; display: flex; justify-content: center; align-items: center; gap:0 10px; width:100%; height:90px; background-image: linear-gradient(103deg, var(--gradationStart), var(--gradationEnd) 100%);}
.concept_popup_btn button span{height: 22px;  font-size: 16px; font-weight: bold; color:#ffffff;}
/* test */
.concept_popup_btn button{display: none;}
.concept_popup_btn button.active{display: flex;}

@media (max-width:319px){    
	.message_popup .message_content .message_desc {font-size: 16px;}
	.confirm_popup .confirm_popup_content .popup_box .confirm_popup_desc { font-size: 14px;}
	.confirm_popup .confirm_popup_content .popup_box .btn_wrap li button {padding: 12px 15px; font-size: 14px;} 
	.subscribe_popup .subscribe_desc { padding: 0 10px}
}

@media (max-width:375px) {
	.message_popup .message_content .message_item.learn_end_popup .img_wrap {width: 280px;}
	.message_popup .message_content .message_item.learn_end_popup::before {height: calc(280px + 22.0443vh);}	
	.message_popup .message_content.message_case .message_item.learn_end_popup .img_bg::before{width: 180%; height:70vh;}
}

@media (max-width: 599px) and (min-height:600px) {
	.top_icon_popup .subscribe_popup {padding: 56px 20px 32px; }
	.subscribe_popup .subscribe_desc {margin-top: 12px;}
	.subscribe_popup .discount_board {margin: 12px auto 0;}	
	.top_icon_popup .popup_box .btn_wrap { margin-top: 24px;}
	.top_icon_popup .popup_box .btn_wrap a span {font-size: 14px;}

	.subscribe_popup.logo_premi{padding:40px 20px 50px;}
	.top_icon_popup .popup_box .btn_wrap { margin-top: 24px;}	
}

@media (width: 512px) and (height:717px) and (orientation: portrait){
	.message_popup .message_content .message_item.learn_end_popup::before {height: calc(380px + 23.0443vh);}
}

@media (min-width:600px){	
	/* 팝업 */
	.message_popup .message_content .img_wrap {width: 326.5624px;}
	.message_popup .message_content .img_wrap::before{ width:180px; height:180px;}
	.message_popup .message_content .message_item {max-width: 505px;}
	.message_popup .message_content .message_desc {font-size: 24px; line-height: 1.17;}
	.message_popup .message_content .message_item.nomal_desc{margin-top:33.7288vh;}
	.message_popup .message_content .message_item.bold_desc{margin-top:35.5084vh;}
	.message_popup .message_content .message_item.learn_end_popup{margin-top:38.9830vh;}	
	.message_popup .message_content .message_item.learn_end_popup::before{width:120%; height:calc(380px + 38.9830vh);}

	/* subscribe popup */
	.top_icon_popup .subscribe_popup {padding: 70px 52px 40px; max-width: 455px;}
	.subscribe_popup .subscribe_top_title br{display: none;}
	.subscribe_popup .subscribe_top_subtitle br{display: block;}
	.subscribe_popup .subscribe_desc {padding: 0 24px;}
	.subscribe_popup .subscribe_desc br:nth-child(3){display: block;}

	/* nt subscribe popup */
	.subscribe_popup.logo_premi {padding: 40px 20px 50px;}
	.subscribe_popup.logo_premi .subscribe_top_title br {display: block;}
	
	.slider_up_popup .slider_up_popup_con .popup_box {padding: 50px 20px 70px;}
	.slider_up_popup .popup_box .popup_box_inner{margin:0 auto; width:335px;}

	.tl_before_popup .text_wrap .desc br{display: none;}
	.tl_before_popup .discount_board {margin: 39px auto 0;}

	.concept_popup .concept_popup_header {padding: 22px 0 0px;}
	.concept_popup .concept_popup_header .header_wrap {padding: 0 40px;}
	.concept_popup .concept_popup_header .sub_title{gap: 0 15px;}
	.concept_popup .concept_popup_header .sub_title button i {width: 32px; height: 32px;}	
	.concept_popup .concept_popup_header .sub_title .text_wrap h2 {height: 33px; font-size: 24px; line-height: 1.33;}
	.concept_popup_progress {margin-top: 28px;}
	.concept_popup .concept_popup_container {height: calc(100vh - 88px);}
	.concept_popup .concept_popup_contents {padding-top: 14.2372vh;}
	.concept_popup .concept_popup_title h3 {height: 24px; font-size: 18px; line-height: 1.56; letter-spacing: -0.01px;}
	.concept_popup .concept_popup_title p {height: 36px; font-size: 26px; letter-spacing: -0.01px;}
	.concept_popup .concept_popup_problem {margin-top: 60px;}
	.concept_popup .page_btn i {width: 32px; height: 32px;}	
	.notice_popup .notice_popup_content .popup_box .bl_list_area{font-size:11px;}
} 

@media (min-width:712px) and (orientation: landscape) {
	.top_icon_popup .popup_box {padding: 80px 20px 28px;}
	.message_popup .message_content .message_desc {font-size: 16px;}
	.message_popup .message_content .message_item.learn_end_popup {margin-top: -40px;}
	.message_popup .message_content .message_item.learn_end_popup::before {height: calc(380px - 40px);}
} 

@media (min-width:1024px) and (orientation: landscape) {
	.message_popup .message_content .message_item {max-width: inherit;}
	.message_popup .message_content .message_desc {font-size: 24px;}
	.message_popup .message_content .message_item.nomal_desc{margin-top:29.5122vh;}
	.message_popup .message_content .message_item.bold_desc{margin-top:28.6585vh;}
	.message_popup .message_content .message_item.learn_end_popup{margin-top:21.8292vh;}	
	.message_popup .message_content .message_item.learn_end_popup::before{height:calc(380px + 21.8292vh);}
	.top_icon_popup .popup_box { padding: 94px 20px 50px;}
	.top_icon_popup .subscribe_popup {padding: 70px 52px 40px; max-width: 455px;}

	.concept_popup .concept_popup_contents {padding-top: 6.0975vh;}
	.concept_popup .concept_popup_problem {margin-top: 30px; padding-bottom: 15.8536vh;}
}  

/* 높이가 작은 타블렛 */
@media (min-width: 1024px) and (max-height:819px) and (orientation: landscape){
	.message_popup .message_content .message_item.learn_end_popup {margin-top: 14.8292vh;}
	.message_popup .message_content .message_item.learn_end_popup::before {height: calc(380px + 14.8292vh);}
	.message_popup .message_content .message_item.nomal_desc {margin-top: 18.5122vh;}
}

