@charset "utf-8";
.register_section,
.member_section { padding-top: 48px; } 




/*! ────────────────────────────────────── 01 ────────────────────────────────────── */
/* login */
.login_section { width: 478px; height: 100%; min-height: calc(100vh - 48px); display: flex; flex-direction: column; justify-content: center; padding: 50px 0; margin: 0 auto; } 
.login_section #logo { width: 300px; height: 58px; background: url(../image/logo_p.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; margin: 0 auto 90px; } 
.login_section .link_btn_box { width: 100%; display: flex; justify-content: space-between; padding: 0 4px; } 
.login_section .link_btn_box a { font-size: 16px; font-weight: 500; color: var(--primary); line-height: 24px; display: block; } 
.login_section .btn_main_box .btn::after { width: 24px; height: 24px; vertical-align: -6px; } 

/* register */ 
.register_section .form_group_box { width: 1000px; padding: 12px 0; margin: 0 auto; }
.register_section .contract_box .paper_box { width: 100%; padding: 80px; border: 1px solid var(--gray-20); box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.06); margin-bottom: 24px; } 
.register_section .contract_box .paper_title { font-size: 28px; font-weight: 700; color: var(--base-80); line-height: 38px; letter-spacing: -1px; text-align: center; opacity: 0.8; margin-bottom: 40px; } 
.register_section .contract_box .paper_box > div { width: 100%; font-size: 18px; font-weight: 400; color: var(--base-80); line-height: 26px; letter-spacing: -0.3px; opacity: 0.8; } 
.register_section .contract_box .text_box { word-break: keep-all; } 
.register_section .contract_box .text_box h4 { margin: 24px 0 8px; } 
.register_section .contract_box .text_box p { margin: 8px 0; } 
.register_section .contract_box .text_box ul > li { margin: 8px 0; } 
.register_section .contract_box .text_box ul > li ol { padding-left: 16px; margin-bottom: 16px; } 
.register_section .contract_box .text_box ol > li { margin: 8px 0; } 
.register_section .contract_box .text_box table { width: 100%; border: 1px solid var(--gray-30); margin: 8px 0; } 
.register_section .contract_box .text_box table tr { border-bottom: 1px solid var(--gray-30); } 
.register_section .contract_box .text_box table tr th,
.register_section .contract_box .text_box table tr td { font-size: 16px; line-height: 24px; text-align: center; vertical-align: middle; border-right: 1px solid var(--gray-30); padding: 8px; } 
.register_section .contract_box .text_box table tr th { background: var(--gray-05); } 
.register_section .contract_box .date_box { text-align: center; margin-top: 40px; } 
.register_section .contract_box .info_box { width: 100%; display: flex; margin-top: 40px; } 
.register_section .contract_box .info_box dl { width: calc(50% - 20px); } 
.register_section .contract_box .info_box dl + dl { margin-left: 40px; } 
.register_section .contract_box .info_box dl dt { min-height: 54px; } 
.register_section .contract_box .info_box dl dd { position: relative; margin-top: 40px; } 
.register_section .contract_box .info_box dl dd .sign { position: relative; display: inline-block; margin-left: 40px; } 
.register_section .contract_box .info_box dl dd .sign img { position: absolute; left: calc(100% - 30px); top: 50%; transform: translateY(-50%); z-index: 1; } 
.register_section .btn_sub_box { position: absolute; right: 0; top: -5px; } 
.register_section .btn_sub_box .btn { width: 175px; } 
.register_section .btn_sub_box .btn::after { width: 20px; height: 20px; vertical-align: -4px; } 
.register_section .terms_box h3 { font-size: 22px; font-weight: 600; color: var(--gray-80); line-height: 32px; } 
.register_section .terms_box .terms_view_box { width: 100%; height: 340px; padding: 40px; border: 1px solid var(--gray-20); box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 2px 7px 0px rgba(0, 0, 0, 0.10); } 
.register_section .terms_box .text_box { width: 100%; height: 100%; font-size: 16px; font-weight: 400; color: var(--gray-80); line-height: 24px; word-break: keep-all; opacity: 0.8; overflow-y: scroll; } 
.register_section .terms_box .text_box h4 { font-size: 18px; margin: 36px 0 16px; } 
.register_section .terms_box .text_box h4:first-of-type { margin-top: 0; } 
.register_section .terms_box .text_box p,
.register_section .terms_box .text_box ul > li { margin: 8px 0; } 
.register_section .terms_box .text_box ol { padding-left: 18px; } 
.register_section .terms_box .text_box ol li { font-size: 15px; margin: 4px 0; } 
.register_section .terms_box .chk_box { text-align: right; } 
.register_section .chk_box input + label { font-size: 18px; font-weight: 500; color: var(--gray-50); line-height: 24px; display: inline-block; cursor: pointer; } 
.register_section .chk_box input + label .icon_check { width: 24px; height: 24px; background: #ffffff; border: 1px solid var(--gray-50); border-radius: 4px; display: inline-block; vertical-align: -5px; margin-right: 4px; } 
.register_section .chk_box input:checked + label .icon_check { background: url(../image/icon/icon_check_w.svg) no-repeat center center ,var(--primary); background-size: 20px; border: 1px solid var(--primary); } 
.register_section .all_agree_box { text-align: center; } 

/* member */
.member_section .find_box { width: 100%; height: 600px; display: flex; flex-direction: column; justify-content: center; padding: 48px; } 
.member_section .form_group_box { width: 580px; display: flex; flex-wrap: wrap; margin: 0 auto; } 
.member_section .form_group_box .half { width: calc(50% - 15px); margin-top: 0; } 
.member_section .form_group_box .half + .half { margin-top: 0; margin-left: 30px; } 
.member_section .result_id_box p { font-size: 28px; font-weight: 400; color: var(--gray-80); letter-spacing: -1px; text-align: center; } 
.member_section .result_id_box p:last-of-type { font-size: 38px; margin-top: 36px; } 
.member_section .text_box { width: 580px; margin: 0 auto; } 
.member_section .text_box p { position: relative; font-size: 14px; font-weight: 400; color: var(--gray-60); line-height: 20px; letter-spacing: -0.2px; padding-left: 22px; } 
.member_section .text_box p::before { position: absolute; left: 10px; top: 8px; width: 3px; height: 3px; background: var(--gray-60); border-radius: 50%; content: ''; display: block; z-index: 1; } 



/*! ────────────────────────────────────── 02 ────────────────────────────────────── */
.analyze_section .no_data_box { width: 100%; height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 80px; } 
.analyze_section .no_data_box .text_box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; } 
.analyze_section .no_data_box .text_box h2 { font-size: 38px; font-weight: 700; color: var(--gray-90); line-height: 50px; margin-bottom: 24px; } 
.analyze_section .no_data_box .text_box p { font-size: 22px; font-weight: 400; color: var(--gray-60); line-height: 32px; } 

/* main_board_box */
.main_board_box .member_info_box { align-items: center; } 
.main_board_box .member_info_box > div > * { display: inline-block; } 
.main_board_box .member_info_box .bedge { font-size: 14px; font-weight: 600; color: var(--primary-10); line-height: 22px; padding: 8px 12px; background: var(--primary-60); border-radius: 20px; margin-right: 6px; } 
.main_board_box .member_info_box .bedge::after { width: 16px; height: 16px; font-size: 12px; font-weight: 700; color: var(--primary-60); line-height: 16px; text-align: center; background: var(--primary-10); border: 1px solid var(--primary-30); border-radius: 50%; display: inline-block; vertical-align: 1px; margin-left: 4px; } 
.main_board_box .member_info_box .bedge.premium::after { content: 'P'; } 
.main_board_box .member_info_box .bedge.standard::after { content: 'S'; } 
.main_board_box .member_info_box .bedge.basic::after { content: 'B'; } 
.main_board_box .member_info_box .name { font-size: 18px; font-weight: 700; color: var(--gray-90); line-height: 24px; margin-right: 6px; } 
.main_board_box .member_info_box .number { font-size: 14px; font-weight: 400; color: var(--gray-90); line-height: 20px; } 
.main_board_box .member_info_box .count { font-size: 18px; font-weight: 700; color: var(--primary); line-height: 24px; border-bottom: 2px solid var(--primary); } 
.main_board_box .member_info_box .date { font-size: 18px; font-weight: 400; color: var(--primary-60); line-height: 24px; margin-left: 8px; } 
.main_board_box .link_info_box { width: 100%; padding: 24px 0; background: var(--primary-10); } 
.main_board_box .link_info_box ul { display: flex; } 
.main_board_box .link_info_box ul li { display: flex; align-items: center; width: 50%; padding: 0 36px; } 
.main_board_box .link_info_box ul li:last-of-type { border-left: 1px solid var(--primary-60); } 
.main_board_box .link_info_box ul li .text { font-size: 18px; font-weight: 700; color: var(--primary); margin-right: auto; } 
.main_board_box .link_info_box ul li .text::before { width: 24px; height: 24px; background: url(../image/icon/icon_alert_notice.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -5px; margin-right: 8px; } 
.main_board_box .link_info_box ul li .copy_box{ max-width: 300px; display: flex; align-items: center; }
.main_board_box .link_info_box ul li .link { max-width: 250px; font-size: 16px; font-weight: 700; color: var(--gray-50); text-decoration: underline; display: inline-block; word-break: break-all; } 
.main_board_box .link_info_box ul li .copy_link { width: 1px; height: 1px; opacity: 0; } 
.main_board_box .link_info_box ul li .btn_copy { width: 24px; height: 24px; background: url(../image/btn/btn_copy.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; display: inline-block; vertical-align: -1px; margin-left: 6px; } 
.main_board_box .link_info_box ul li .btn { padding: 12px 24px; } 
.main_board_box .link_info_box ul li .btn::after { width: 20px; height: 20px; vertical-align: -4px; } 
.main_board_box .sub_title_box { align-items: center; width: 100%; margin-bottom: 24px; } 
.main_board_box .sub_title_box h3 { font-size: 28px; font-weight: 700; color: var(--gray-90); line-height: 32px; letter-spacing: -1px; } 
.main_board_box .sub_title_box .btn_link { font-size: 16px; font-weight: 500; color: var(--primary); line-height: 24px; display: inline-block; } 
.main_board_box .sub_title_box .btn_link::after { width: 16px; height: 16px; background: url(../image/icon/icon_add_p.svg) no-repeat center center; background-size: contain; vertical-align: -2px; content: ''; display: inline-block; margin-left: 4px; } 
.main_board_box .state_list_box ul { display: flex; align-items: center; } 
.main_board_box .state_list_box ul li { width: 33.33%; text-align: center; padding: 36px 16px; background: var(--gray-05); border-radius: 8px; margin-right: 30px; } 
.main_board_box .state_list_box ul li:last-of-type { margin-right: 0; } 
.main_board_box .state_list_box ul li strong { font-size: 28px; font-weight: 700; color: var(--gray-90); line-height: 32px; letter-spacing: -1px; display: block; margin-bottom: 8px; } 
.main_board_box .state_list_box ul li span { font-size: 18px; font-weight: 600; color: var(--gray-40); line-height: 26px; letter-spacing: -0.5px; display: block; } 
.main_board_box .board_list_box { width: 100%; padding: 16px 8px; } 
.main_board_box .board_list_box ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } 
.main_board_box .board_list_box ul li:last-of-type { margin-bottom: 0; } 
.main_board_box .board_list_box ul li a { font-size: 14px; font-weight: 600; color: var(--gray-90); line-height: 24px; display: inline-block; } 
.main_board_box .board_list_box ul li .new { font-size: 12px; font-weight: 500; color: var(--primary); line-height: 20px; padding: 0 8px; background: #ffffff; border: 2px solid var(--primary); border-radius: 14px; display: inline-block; vertical-align: 1px; margin-left: 8px; } 
.main_board_box .board_list_box ul li .date { font-size: 14px; font-weight: 400; color: var(--gray-50); line-height: 24px; padding: 0 16px; display: inline-block; } 

/* membership_type_list */
.membership_type_box { flex: 1; } 
.membership_type_box ul li { position: relative; display: flex; align-items: center; width: 100%; padding: 42px 0; background: #ffffff; border: 1px solid var(--gray-20); border-radius: 8px; cursor: pointer; margin-bottom: 16px; } 
.membership_type_box ul li:last-of-type { margin-bottom: 0; } 
.membership_type_box ul li .mark { position: absolute; left: -6px; top: -6px; font-size: 14px; font-weight: 500; color: #ffffff; line-height: 20px; padding: 3px 12px; background: var(--primary); border: 2px solid var(--primary); border-radius: 15px; display: inline-block; } 
.membership_type_box ul li .info_box { flex: 1; padding: 0 36px; border-right: 2px solid var(--gray-20); } 
.membership_type_box ul li .info_box .title h3 { font-size: 28px; font-weight: 700; color: var(--gray-90); line-height: 32px; letter-spacing: -1px; display: inline-block; vertical-align: middle; } 
.membership_type_box ul li .info_box .btn_view { font-size: 16px; font-weight: 500; color: var(--primary); line-height: 24px; padding: 4px 8px; background: #ffffff; border: 1px solid var(--primary); border-radius: 4px; display: inline-block; vertical-align: middle; margin-left: 16px; } 
.membership_type_box ul li .info_box .btn_view::after { width: 16px; height: 16px; background: url(../image/icon/icon_download_p.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -2px; margin-left: 4px; } 
.membership_type_box ul li .info_box dd { font-size: 22px; font-weight: 400; color: var(--gray-90); line-height: 32px; letter-spacing: -0.8px; word-break: keep-all; margin-top: 16px; } 
.membership_type_box ul li .price_box { width: 250px; padding: 0 36px; }
.membership_type_box ul li .price_box .origin { position: relative; font-size: 16px; font-weight: 400; color: var(--gray-30); display: inline-block; margin-bottom: 4px; }
.membership_type_box ul li .price_box .origin::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: var(--gray-30); content: ''; display: block; }
.membership_type_box ul li .price_box .origin strong { font-size: 20px; letter-spacing: -0.5px; }
.membership_type_box ul li .price_box .discount { font-size: 20px; font-weight: 400; color: var(--gray-40); letter-spacing: -0.5px; display: inline-block; }
.membership_type_box ul li .price_box .discount strong { font-size: 38px; font-weight: 700; color: var(--gray-80); letter-spacing: -1.2px; display: inline-block; vertical-align: -3px; } 
.membership_type_box ul li .price_box .discount em { font-size: 16px; }
.membership_type_box ul li.active { background: var(--primary); border: 1px solid var(--primary); } 
.membership_type_box ul li.active .mark { background: #ffffff; color: var(--primary); } 
.membership_type_box ul li.active .info_box { border-right: 2px solid var(--primary-80); } 
.membership_type_box ul li.active .info_box .title h3,
.membership_type_box ul li.active .info_box dd { color: #ffffff; } 
.membership_type_box ul li.active .info_box .btn_view { color: var(--primary-30); background: var(--primary); border: 1px solid var(--primary-30); } 
.membership_type_box ul li.active .info_box .btn_view::after { background: url(../image/icon/icon_download_p30.svg) no-repeat center center; background-size: contain; } 
.membership_type_box ul li.active .price_box .origin { color: var(--primary-80); } 
.membership_type_box ul li.active .price_box .origin::before { background: var(--primary-80); } 
.membership_type_box ul li.active .price_box .discount { color: var(--primary-60); } 
.membership_type_box ul li.active .price_box .discount strong { color: var(--primary-30); } 

/* membership_detail_box */
.membership_detail_box { display: flex; flex-direction: column; justify-content: center; width: 380px; padding: 36px 48px; background: var(--gray-05); margin-left: 30px; } 
.membership_detail_box > ul > li { display: none; } 
.membership_detail_box > ul > li.active { display: block; } 
.membership_detail_box .title { text-align: center; } 
.membership_detail_box .title h3 { font-size: 28px; font-weight: 600; color: var(--primary); line-height: 38px; } 
.membership_detail_box .title p { font-size: 14px; font-weight: 500; color: var(--primary-80); line-height: 20px; word-break: keep-all; margin-top: 4px; } 
.membership_detail_box .current_detail_box { width: 100%; padding: 12px 16px; background: var(--gray-10); border-radius: 8px; } 
.membership_detail_box .current_detail_box h3 { font-size: 14px; font-weight: 700; color: var(--gray-80); line-height: 20px; margin-bottom: 4px; } 
.membership_detail_box .current_detail_box dl { margin-bottom: 4px; } 
.membership_detail_box .current_detail_box dl:last-of-type { margin-bottom: 0; } 
.membership_detail_box .current_detail_box dl dt { font-size: 14px; font-weight: 600; color: var(--gray-30); line-height: 20px; } 
.membership_detail_box .current_detail_box dl dd { font-size: 13px; font-weight: 400; color: var(--gray-40); line-height: 20px; } 
.membership_detail_box .current_detail_box dl dd b { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; } 
.membership_detail_box .current_detail_box dl.active { border-bottom: 1px solid var(--gray-20); padding-bottom: 4px; } 
.membership_detail_box .current_detail_box dl.active dt { color: var(--primary-80); } 
.membership_detail_box .detail_price_list,
.membership_detail_box .total_price_box { padding: 16px 0; border-top: 1px solid var(--gray-20); } 
.membership_detail_box .detail_price_list li { margin-bottom: 8px; } 
.membership_detail_box .detail_price_list li:last-of-type { margin-bottom: 0; } 
.membership_detail_box .detail_price_list .text { font-size: 16px; font-weight: 600; color: var(--gray-40); line-height: 24px; } 
.membership_detail_box .detail_price_list .price { font-size: 14px; font-weight: 400; color: var(--gray-60); line-height: 24px; } 
.membership_detail_box .detail_price_list .price b { font-size: 16px; font-weight: 500; color: var(--gray-90); } 
.membership_detail_box .total_price_box .text { font-size: 18px; font-weight: 600; color: var(--gray-60); line-height: 24px; } 
.membership_detail_box .total_price_box .price { font-size: 16px; font-weight: 400; color: var(--gray-90); line-height: 24px; } 
.membership_detail_box .total_price_box .price b { font-size: 28px; font-weight: 600; letter-spacing: -1.2px; } 
.membership_detail_box .btn_sub_box .btn { padding: 10px 20px; } 
.membership_detail_box .btn_sub_box .btn + .btn { margin-left: 4px; } 

/* total_box */
.analyze_total_box { padding: 32px 0; } 
.analyze_total_box ul { display: flex; align-items: center; } 
.analyze_total_box ul li { width: 33.33%; text-align: center; padding: 0 16px; border-right: 2px solid var(--gray-40); } 
.analyze_total_box ul li:last-of-type { border-right: none; } 
.analyze_total_box ul li span { font-size: 22px; font-weight: 700; color: var(--gray-40); line-height: 32px; letter-spacing: -0.5px; display: inline-block; } 
.analyze_total_box ul li strong { font-size: 28px; font-weight: 700; color: var(--gray-90); line-height: 32px; letter-spacing: -1px; display: inline-block; margin-left: 24px; } 

/* table_box */
.analyze_table_box .thead .tr,
.analyze_table_box .tbody .tr { align-items: center; justify-content: space-between; padding: 8px 30px; } 
.analyze_table_box .tbody .tr .td.end_date { font-weight: 600; color: var(--primary); } 
.analyze_table_box .gender > span::after { width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; content: ''; display: inline-block; margin-left: 4px; } 
.analyze_table_box .gender > span.female::after { background: #ff8787; } 
.analyze_table_box .gender > span.male::after { background: #87b0ff; } 
.analyze_table_box .tr .btn { min-width: 114px; font-size: 14px; padding: 6px 12px; } 
.analyze_table_box .btn::after { width: 16px; height: 16px; vertical-align: -2px; margin-left: 4px; } 
.analyze_table_box .start_date { width: 100px; } 
.analyze_table_box .name { min-width: 100px; } 
.analyze_table_box .copy { min-width: 70px; }
.analyze_table_box .birth { width: 180px; } 
.analyze_table_box .gender { width: 50px; } 
.analyze_table_box .phone { width: 150px; } 
.analyze_table_box .end_date { width: 120px; } 
.analyze_table_box .btn_box { width: 120px; } 



/*! ────────────────────────────────────── 03 ────────────────────────────────────── */
.membership_main_box { width: 100%; padding: 32px 40px; border: 1px solid var(--gray-20); } 
.membership_main_box .title { font-size: 28px; font-weight: 500; color: #ffffff; line-height: 38px; letter-spacing: -0.8px; word-break: keep-all; padding: 16px 20px; background: var(--primary-90); border-radius: 8px; overflow: hidden; margin-bottom: 36px; } 
.membership_main_box .title b { color: var(--primary-30); } 
.membership_main_box .info_box { padding: 32px 0; } 
.membership_main_box .info_box + .info_box { border-top: 1px solid var(--gray-20); } 
.membership_main_box .info_box ul li { display: flex; align-items: center; margin-bottom: 32px; } 
.membership_main_box .info_box ul li:last-of-type { margin-bottom: 0; } 
.membership_main_box .info_box .text { width: 120px; font-size: 18px; font-weight: 600; color: var(--gray-40); line-height: 28px; margin-right: 30px; } 
.membership_main_box .info_box .right { width: calc(100% - 150px); font-size: 18px; font-weight: 400; color: var(--gray-90); line-height: 32px; letter-spacing: -0.5px; } 
.membership_main_box .info_box .right em { font-size: 14px; font-weight: 400; color: var(--gray-60); line-height: 24px; } 
.membership_main_box .info_box .right img { width: 62px; max-height: 38px; vertical-align: -13px; } 
.membership_main_box .info_box .right .btn { min-width: 150px; padding: 10px 24px; margin-left: 24px; } 
.membership_main_box .btn_sub_box { text-align: right; } 
.membership_main_box .btn_sub_box .btn_cancle { color: var(--gray-60); background: var(--gray-05); } 

/* table_box */
.membership_table_box .tbody .tr .td.membership { font-weight: 600; color: var(--primary); } 
.membership_table_box .tbody .tr .td.period { color: var(--gray-40); } 
.membership_table_box .price { width: 110px; } 
.membership_table_box .pay_date,
.membership_table_box .use_date { width: 140px; } 
.membership_table_box .period { width: 240px; } 
.membership_table_box .membership,
.membership_table_box .times,
.membership_table_box .tfoot .td { width: 100px; } 

/* card_register */
.card_register_section .membership_box { align-items: center; width: 100%; padding: 16px; background: var(--primary-10); border-radius: 8px; } 
.card_register_section .membership_box .text strong { font-size: 16px; font-weight: 700; color: var(--primary-60); line-height: 24px; display: inline-block; margin-right: 4px; } 
.card_register_section .membership_box .price { font-size: 14px; font-weight: 400; color: var(--primary-90); line-height: 24px; } 
.card_register_section .membership_box .price b { font-size: 16px; font-weight: 700; } 
.card_register_section .membership_box .btn { font-size: 14px; padding: 2px 12px; color: var(--primary); background: var(--primary-10); border: 2px solid var(--primary); } 
.card_register_section .terms_agree_box { width: 100% !important; margin-top: 36px; } 
.card_register_section .terms_wrap_box { width: 100%; height: 72px; padding: 8px; border: 2px solid var(--gray-20); overflow-y: scroll; border-radius: 6px; } 
.card_register_section .terms_wrap_box .terms_text { font-size: 14px; font-weight: 400; color: var(--gray-60); line-height: 20px; word-break: keep-all; } 
.card_register_section .btn_main_box .btn::after { width: 24px; height: 24px; vertical-align: -6px; } 
.card_register_section .form_group_box .left_box,
.card_register_section .form_group_box .right_box { width: calc(50% - 18px); } 
.card_register_section .form_group_box .form_input.type_card { padding-right: 100px; } 
.card_register_section .form_group_box .form_input + .card_img { position: absolute; right: 12px; top: 45px; text-align: right; } 
.card_register_section .form_group_box .form_input + .card_img img { height: 24px; } 



/*! ────────────────────────────────────── 04 ────────────────────────────────────── */
.account_section > .flex_box { align-items: flex-start; }
.account_list_box { flex: 1; } 
.account_list_box .hospital_info_box { width: 100%; padding: 16px 20px; background: var(--gray-10); } 
.account_list_box .hospital_info_box h3 { font-size: 14px; font-weight: 700; color: var(--gray-60); line-height: 18px; } 
.account_list_box .hospital_info_box ul { display: flex; } 
.account_list_box .hospital_info_box ul li { border-left: 1px solid var(--gray-20); padding-left: 16px; margin-left: 36px; } 
.account_list_box .hospital_info_box ul li:first-of-type { margin-left: 0; } 
.account_list_box .hospital_info_box ul li > * { font-size: 14px; font-weight: 600; line-height: 20px; display: inline-block; } 
.account_list_box .hospital_info_box ul li span { width: 90px; color: var(--gray-40); } 
.account_list_box .hospital_info_box ul li strong { min-width: 90px; color: var(--gray-60); text-align: right; } 

/* table_box */
.account_table_box .use_label_box > span { display: inline-block; font-size: 14px; font-weight: 400; color: var(--gray-60); margin-right: 16px; } 
.account_table_box .use_label_box > span::before { width: 10px; height: 10px; border-radius: 50%; content: ''; display: inline-block; margin-right: 4px; } 
.account_table_box .use_label_box > span.red::before { background: #ff8787; } 
.account_table_box .use_label_box > span.blue::before { background: #87b0ff; } 
.account_table_box .thead .tr { padding: 8px 30px; } 
.account_table_box .tbody .tr { align-items: center; padding: 16px 30px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; } 
.account_table_box .tbody .tr .td { font-size: 14px; font-weight: 500; } 
.account_table_box .tbody .tr .td.id { font-weight: 600; color: var(--primary-60); } 
.account_table_box .circle { display: inline-block; width: 16px; height: 16px; border-radius: 50%; } 
.account_table_box .circle.red { background: #ff8787; } 
.account_table_box .circle.blue { background: #87b0ff; } 
.account_table_box .tr .btn { padding: 2px 8px; background: transparent; } 
.account_table_box .tr .btn::after { width: 16px; height: 16px; vertical-align: -2px; margin-left: 4px; } 
.account_table_box .numb { width: 20px; } 
.account_table_box .hospital { width: 100px; } 
.account_table_box .manager { width: 80px; } 
.account_table_box .id { flex: 1; min-width: 180px; } 
.account_table_box .date { width: 120px; } 
.account_table_box .auth { width: 80px; } 
.account_table_box .use { width: 60px; } 
.account_table_box .btn_box { width: 74px; } 
.account_table_box .tbody .tr.active { background: var(--primary-10); border-top: 2px solid var(--gray-20); border-bottom: 2px solid var(--gray-20); } 

/* edit_box */
.account_edit_box { width: 380px; padding: 36px 20px; margin-left: 24px; } 
.account_edit_box .radio_group_box { width: 100%; border-top: 1px solid var(--gray-20); padding-top: 24px; margin-top: 24px; } 
.account_edit_box .radio_group_box ul > li { align-items: center; margin-bottom: 16px; } 
.account_edit_box .radio_group_box ul > li:last-of-type { margin-bottom: 0; } 
.account_edit_box .radio_text { width: 100px; font-size: 16px; font-weight: 600; color: var(--gray-80); line-height: 24px; letter-spacing: -0.5px; } 
.account_edit_box .radio_list_box { flex: 1; justify-content: flex-end; } 
.account_edit_box .btn::after { width: 24px; height: 24px; vertical-align: -6px; } 
.account_edit_box .btn.disabled { background: var(--gray-10); border: 2px solid var(--gray-10); } 



/*! ────────────────────────────────────── 05 ────────────────────────────────────── */
.cs_section .btn_sub_box { text-align: center; } 
.cs_section .btn_sub_box .btn { min-width: 175px; } 

/* notice */
.notice_table_box .tbody .tr { align-items: center; padding: 8px 40px; } 
.notice_table_box .tbody .subject a { line-height: 26px; } 
.notice_table_box .thead .subject,
.notice_table_box .tbody .subject { flex: 1; } 
.notice_table_box .thead .date,
.notice_table_box .tbody .date { width: 120px; text-align: center; } 
.notice_table_box .tbody .subject { font-weight: 600; display: inline-block; } 
.board_view_box { min-height: 400px; padding: 0 48px 48px; } 
.board_view_box .text_box { font-size: 16px; font-weight: 400; color: var(--gray-80); line-height: 26px; } 
.board_view_box .file_box { margin-top: 36px; } 
.board_view_box .file_box h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 16px; } 
.board_view_box .file_box ul { display: flex; flex-wrap: wrap; } 
.board_view_box .file_box ul li a { font-size: 15px; font-weight: 500; color: var(--gray-80); padding: 12px 24px 12px 16px; background: var(--gray-05); border: 1px solid var(--gray-20); border-radius: 8px; display: inline-block; margin-right: 16px; } 
.board_view_box .file_box ul li a::before { width: 22px; height: 22px; background: url(../image/icon/icon_download_p.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -6px; margin-right: 8px; } 
.board_write_box { padding: 0 0 48px; }
.board_write_box .upload_box h3 { font-size: 16px; font-weight: 700; color: var(--gray-80); line-height: 24px; display: block; margin-bottom: 8px; }
.board_write_box .upload_box h3 em { font-size: 13px; font-weight: 400; color: var(--gray-50); display: inline-block; }
.board_write_box .upload_box ul { display: flex; flex-wrap: wrap; }
.board_write_box .upload_box ul li { position: relative; width: calc(25% - 18px); height: 52px; background: var(--gray-05); border: 1px solid var(--gray-30); border-radius: 6px; z-index: 0; margin-bottom: 8px; margin-right: 24px; }
.board_write_box .upload_box ul li:nth-of-type(4n) { margin-right: 0; }
.board_write_box .upload_box ul li .file_name { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); max-width: calc(100% - 65px); font-size: 16px; font-weight: 500; color: var(--gray-60); background: transparent; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: -1; }
.board_write_box .upload_box ul li .btn_upload { display: block; width: 100%; height: 38px; background: url(../image/icon/icon_add_g.svg) no-repeat center center; background-size: 20px; text-indent: -9999px; overflow: hidden; cursor: pointer; }
.board_write_box .upload_box ul li .btn_delete { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url(../image/btn/btn_exit.svg) no-repeat center center; background-size: 18px; text-indent: -9999px; overflow: hidden; opacity: 0.5; }

/* FAQ */
.faq_box { width: 100%; height: 650px; display: flex; } 
.faq_box .faq_nav_box { position: relative; width: 275px; height: 100%; background: var(--gray-05); overflow: hidden; } 
.faq_box .tab_nav li { width: 100%; font-size: 14px; font-weight: 400; color: var(--gray-80); line-height: 22px; padding: 12px 24px; cursor: pointer; } 
.faq_box .tab_nav li.active { font-size: 16px; font-weight: 600; color: var(--gray-90); background: var(--gray-10); } 
.faq_box .contact_box { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; padding: 32px 0; } 
.faq_box .contact_box p { font-size: 14px; font-weight: 400; color: var(--gray-80); line-height: 20px; } 
.faq_box .contact_box p b { font-weight: 600; } 
.faq_box .contact_box .btn { width: 175px; font-size: 16px; padding: 10px 24px; display: inline-block; margin: 12px auto 8px; } 
.faq_box .contact_box .btn::after { width: 20px; height: 20px; vertical-align: -4px; } 
.faq_box .faq_main_box { flex: 1; height: 100%; background: #ffffff; border: 1px solid var(--gray-20); overflow: hidden; } 
.faq_box .tab_group_box,
.faq_box .tab_group_box .tab_box,
.faq_box .faq_list_box { width: 100%; height: 100%; } 
.faq_box .tab_group_box .tab_box { position: relative; padding-bottom: 40px; } 
.faq_box .faq_list_box { overflow-y: scroll; } 
.faq_box .faq_list_box li { width: 100%; border-bottom: 1px solid var(--gray-20); } 
.faq_box .faq_list_box .q_box { display: flex; align-items: center; width: 100%; padding: 24px 40px; cursor: pointer; } 
.faq_box .faq_list_box .q_box::after { width: 24px; height: 24px; transform: rotate(180deg); background: url(../image/icon/icon_arrow_down.svg) no-repeat center center; background-size: contain; content: ''; display: block; opacity: 1; } 
.faq_box .faq_list_box .off .q_box::after { transform: rotate(0deg); opacity: 0.6; } 
.faq_box .faq_list_box .q_box h3 { flex: 1; font-size: 16px; font-weight: 600; color: var(--gray-90); line-height: 20px; } 
.faq_box .faq_list_box .a_box { display: none; position: relative; background: var(--gray-05); border-top: 1px solid var(--gray-20); } 
.faq_box .faq_list_box .a_box .text { font-size: 14px; font-weight: 400; color: var(--gray-80); line-height: 20px; width: 100%; padding: 24px 40px; } 
.faq_box .pager_box { position: absolute; left: 0; bottom: 0; width: 100%; background: #ffffff; border-top: 1px solid var(--gray-20); z-index: 10; } 

/* helpdesk */
.helpdesk_box { text-align: center; } 
.helpdesk_box { width: 100%; height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; } 
.helpdesk_box h3 { font-size: 22px; font-weight: 700; color: var(--gray-90); line-height: 32px; letter-spacing: -1px; } 
.helpdesk_box .btn_main_box { width: 378px; } 
.helpdesk_box .btn_main_box .btn::after { width: 24px; height: 24px; vertical-align: -6px; } 
.helpdesk_box .btn_main_box .btn_basic { margin-top: 16px; } 
.helpdesk_box .text_box { text-align: center; } 
.helpdesk_box .text_box h4 { font-size: 18px; font-weight: 700; color: var(--gray-80); line-height: 24px; margin-bottom: 4px; } 
.helpdesk_box .text_box h4::before { width: 24px; height: 24px; background: url(../image/icon/icon_clock.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -6px; margin-right: 4px; } 
.helpdesk_box .text_box p { font-size: 18px; font-weight: 400; line-height: 27px; letter-spacing: -0.5px; } 



/*! ────────────────────────────────────── 06 ────────────────────────────────────── */
.statistic_section h2 { font-size: 28px; font-weight: 700; color: var(--gray-80); line-height: 38px; letter-spacing: -1px; } 
.condition_search_box { align-items: flex-end; }
.condition_search_box > * { margin-left: 8px; }
.date_search_box { flex-wrap: wrap; width: 300px; } 
.date_search_box .period_list_box { display: flex; width: 100%; margin-bottom: 8px; } 
.date_search_box .period_list_box li { width: calc(25% - 6px); } 
.date_search_box .period_list_box li:last-of-type { margin-right: 0; } 
.date_search_box .period_list_box li input + label { width: 100%; font-size: 14px; font-weight: 500; color: var(--primary); line-height: 30px; text-align: center; background: #ffffff; border: 1px solid var(--primary); border-radius: 4px; display: block; cursor: pointer; transition: all 0.1s ease-in-out; } 
.date_search_box .period_list_box li input + label:hover { color: #ffffff; background: var(--primary); } 
.date_search_box .btn_search { flex: 1; padding: 0 8px; margin-left: 8px; } 

/* chart */
.chart_wrap_box { padding: 24px; background: var(--gray-05); border-radius: 16px; } 
.chart_title_box { display: flex; justify-content: space-between; border-bottom: 1px solid var(--gray-20); padding-bottom: 24px; } 
.chart_title_box > h3 { font-size: 22px; font-weight: 600; color: var(--gray-80); line-height: 36px; } 
.chart_title_box > h3 i { display: inline-block; width: 40px; height: 40px; border-radius: 6px; vertical-align: -13px; } 
.chart_title_box > h3 .icon_age { background: url(../image/icon/icon_user_age.svg) no-repeat center center, #ffffff; background-size: 24px; } 
.chart_title_box > h3 .icon_gender { background: url(../image/icon/icon_user_gender.svg) no-repeat center center, #ffffff; background-size: 24px; } 
.chart_title_box > .statistic { font-size: 22px; font-weight: 400; color: var(--gray-80); line-height: 24px; padding: 6px 0; } 
.chart_title_box > .statistic strong { font-weight: 600; display: inline-block; } 
/*? chart - mix */
.chart_mix_box .graph_control_box { align-items: center; } 
.chart_mix_box .graph_control_box .month_box > button { width: 32px; height: 32px; text-indent: -9999px; border: 2px solid var(--gray-90); border-radius: 6px; overflow: hidden; } 
.chart_mix_box .graph_control_box .month_box > .btn_prev { background: url(../image/btn/btn_pg_prev_on.svg) no-repeat center center, #ffffff; background-size: 20px; } 
.chart_mix_box .graph_control_box .month_box > .btn_next { background: url(../image/btn/btn_pg_next_on.svg) no-repeat center center, #ffffff; background-size: 20px; } 
.chart_mix_box .graph_control_box .month_box .current_month { font-size: 22px; font-weight: 700; color: var(--gray-90); line-height: 32px; margin: 0 16px; } 
.chart_mix_box .graph_control_box .tab_box { padding: 4px; background: #ffffff; border-radius: 24px; } 
.chart_mix_box .graph_control_box .tab_box > span { font-size: 16px; font-weight: 400; color: var(--gray-40); line-height: 40px; padding: 0 24px; border-radius: 20px; cursor: pointer; } 
.chart_mix_box .graph_control_box .tab_box > span.active { font-weight: 700; color: #ffffff; background: var(--primary); } 
.chart_mix_box .graph_box { position: relative; width: 100%; } 
.chart_mix_box .graph_box > span { position: absolute; top: 50%; display: block; font-size: 16px; font-weight: 600; color: var(--gray-40); line-height: 24px; } 
.chart_mix_box .graph_box .graph_left { left: -45px; transform: translateY(-50%) rotate(-90deg); } 
.chart_mix_box .graph_box .graph_right { right: -25px; transform: translateY(-50%) rotate(90deg); } 
.chart_mix_box .graph_wrap { width: 1090px; height: 225px; margin: 0 auto; } 
.chart_mix_box .graph_label_box ul { display: flex; justify-content: flex-end; } 
.chart_mix_box .graph_label_box ul li { display: flex; align-items: center; margin-right: 24px; } 
.chart_mix_box .graph_label_box ul li:last-of-type { margin-right: 0; } 
.chart_mix_box .graph_label_box span { position: relative; width: 24px; height: 24px; border-radius: 4px; display: inline-block; margin-right: 8px; } 
.chart_mix_box .graph_label_box span.color01 { background: #87B0FF; } 
.chart_mix_box .graph_label_box span.color02 { background: #FF8787; } 
.chart_mix_box .graph_label_box span.color_bar::before { position: absolute; left: 0; top: 11px; width: 24px; height: 2px; background: var(--primary); content: ''; display: block; } 
.chart_mix_box .graph_label_box span.color_bar::after { position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; background: var(--primary-25); border: 2px solid var(--primary); border-radius: 50%; content: ''; display: block; z-index: 1; } 
.chart_mix_box .graph_label_box p { font-size: 16px; font-weight: 500; color: var(--gray-80); line-height: 24px; } 
/*? chart - doughnut */
.chart_doughnut_box { align-items: flex-end; width: 420px; padding-top: 24px; margin: 0 auto; } 
.chart_doughnut_box .graph_box { position: relative; } 
.chart_doughnut_box .graph_box .total_count { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 16px; font-weight: 700; color: var(--gray-80); line-height: 24px; display: block; } 
.chart_doughnut_box .graph_label_box ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } 
.chart_doughnut_box .graph_label_box ul li:last-of-type { margin-bottom: 0; } 
.chart_doughnut_box .graph_label_box i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin: 0 4px 3px 0; } 
.chart_doughnut_box .graph_label_box i.color01 { background: #87B0FF; } 
.chart_doughnut_box .graph_label_box i.color02 { background: #FF8787; } 
.chart_doughnut_box .graph_label_box i.color03 { background: #BDD1F9; } 
.chart_doughnut_box .graph_label_box i.color04 { background: #D7E2F5; } 
.chart_doughnut_box .graph_label_box i.color05 { background: #ffffff; } 
.chart_doughnut_box .graph_label_box p { font-size: 16px; font-weight: 400; color: var(--gray-90); line-height: 24px; } 
.chart_doughnut_box .graph_label_box p span { min-width: 50px; display: inline-block; } 
.chart_doughnut_box .graph_label_box p strong { text-align: right; min-width: 50px; display: inline-block; } 

/* table_box */
.statistic_table_box .tbody .co01 { font-weight: 600; color: var(--primary); } 
.statistic_table_box .tbody .co02 { font-weight: 600; color: var(--primary-60); } 
.statistic_table_box.type01 .age,
.statistic_table_box.type01 .gender { width: 110px; } 
.statistic_table_box.type01 .data,
.statistic_table_box.type01 .tfoot .td { width: 100px; } 
.statistic_table_box.type02 .hospital,
.statistic_table_box.type02 .id { width: 160px; } 
.statistic_table_box.type02 .auth,
.statistic_table_box.type02 .data,
.statistic_table_box.type02 .tfoot .td { width: 110px; } 

/* btn_sub_box */
.statistic_section .btn_sub_box { text-align: right; } 
.statistic_section .btn_sub_box .btn { width: 175px; } 
.statistic_section .btn_sub_box .btn::before { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; } 



/*! ────────────────────────────────────── 07 ────────────────────────────────────── */
.profile_section .form_group_box { margin-bottom: 48px; } 
.profile_section .form_group_box h3 { width: 100%; font-size: 28px; font-weight: 600; color: var(--gray-90); line-height: 38px; margin-bottom: 16px; } 
.profile_section .btn_sub_box { margin-left: 36px; } 
.profile_section .btn_sub_box .btn { width: 175px; } 
.profile_section .btn_sub_box .btn::after { width: 20px; height: 20px; vertical-align: -5px; }