@charset "utf-8";
/** 고민선택 **/
.title_box { position: relative; } 
.title_box::after { position: absolute; right: 0; top: 0; width: 48px; height: 48px; background: url(../../image/icon/icon_health_data.svg) no-repeat center center; background-size: 48px; content: ''; display: block; } 
.title_box h2 { font-size: var(--font-large-xl); font-weight: 700; line-height: 34px; word-break: keep-all; padding-right: 62px; } 
.title_box h2 .name { display: block; font-size: var(--font-medium); color: var(--color-main); line-height: 26px; margin-bottom: 4px; } 
.title_box p { font-size: var(--font-regular); font-weight: 400; color: var(--color-gray); line-height: 22px; word-break: keep-all; margin-top: 8px; } 
.survey_category_box { width: 100%; border-top: 1px solid #f2f4f6; margin-top: 16px; } 
.check_list_box { width: 100%; padding: 16px 0; border-bottom: 1px solid #f2f4f6; } 
.check_list_box h3 { font-size: var(--font-small); font-weight: 600; color: var(--color-black-70); line-height: 20px; } 
.check_list_box ul { display: grid; gap: 8px; grid-template-columns: auto auto auto; margin-top: 8px; } 
.check_list_box ul li:nth-of-type(3n) { margin-right: 0; } 
.check_list_box ul li input[type=checkbox] { display: none; } 
.check_list_box ul li input[type=checkbox] + label { position: relative; display: block; font-size: var(--font-small); font-weight: 500; line-height: 36px; text-align: center; background: #ffffff; border: 1px solid #dddddd; border-radius: 6px; } 
.check_list_box ul li input[type=checkbox] + label span { display: none; position: absolute; right: 1px; top: -10px; height: 20px; line-height: 20px; background-color: #222222; border-radius: 30px; font-weight: 700; font-size: 12px; color: #ffffff; text-align: center; border-radius: 30px; padding: 0 7px; } 
.check_list_box ul li input[type=checkbox]:checked + label { color: var(--color-main); background: rgba(138,82,220,0.1); border: var(--border-main); } 
.check_list_box ul li input[type=checkbox]:checked + label span { display: inline-block; } 
.text_box { padding: 24px 0; } 
.text_box h3 { font-size: 20px; font-weight: 700; line-height: 20px; margin-bottom: 8px; } 
.text_box p { font-size: var(--font-regular); font-weight: 400; color: var(--color-black-70); line-height: 20px; word-break: keep-all; } 
.check_box { margin-top: 16px; } 
.check_box input[type=checkbox] { display: none; } 
.check_box input[type=checkbox] + label { position: relative; font-size: 20px; font-weight: 400; line-height: 24px; padding-left: 32px; display: inline-block; } 
.check_box input[type=checkbox] + label::before { position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url(../../image/icon/agree_chk.svg) no-repeat center center; background-size: contain; content: ''; display: block; } 
.check_box input[type=checkbox]:checked + label { font-weight: 700; color: var(--color-main); } 
.check_box input[type=checkbox]:checked + label::before { background: url(../../image/icon/agree_chk_on.svg) no-repeat center center; background-size: contain; } 