@charset "utf-8";

.top_btn_area,
.top_btn_area{ width: 100%; text-align: right; }
.top_btn_area button,
.top_btn_area a,
.top_btn_area input[type="button"],
.top_btn_area input[type="submit"]{ display: block; text-indent: -99999px; width: 24px; height: 24px; line-height: 24px; background-image: url(../image/intro_exit.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }

/* Survey */
section.survey_section .survey_title { display: block; width: 100%; height: auto; max-height: none; margin-top: 0; font-weight: bold; font-size: 24px; line-height: 36px; text-align: left; word-break: keep-all; }

section.survey_section .input_area { width: 100%; margin-top: 36px; }
section.survey_section .input_area.unit_type input[type="text"], 
section.survey_section .input_area.unit_type input[type="number"] {
    padding-right: 55px; width: calc(100% - 120px);
}
section.survey_section .input_area .unit { position: absolute; display: inline-block; right: 24px; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 15px; color: #6e7191; }
section.survey_section .chk_list_area { width: 100%; }
section.survey_section .chk_list_area.type01 { width: 100%; padding-top: 34px; }
section.survey_section .chk_list_area.type01 ul { display: flex; justify-content: flex-start; flex-wrap: wrap;  }
section.survey_section .chk_list_area.type01 li { width: auto; margin-right: 8px; margin-bottom: 12px; }
section.survey_section .chk_list_area.type01 li input[type="checkbox"] { display: none; }
section.survey_section .chk_list_area.type01 li input[type="checkbox"] + label { display: inline-block; width: auto; height: 38px; line-height: 36px;  border: 1px solid #888888; box-sizing: border-box; border-radius: 8px; font-weight: 700; font-size: 14px; color: #888888; padding: 0px 20px; box-sizing: border-box; }
section.survey_section .chk_list_area.type01 li input[type="checkbox"]:checked + label { background-color: #8B4FF6; border: 1px solid #8B4FF6; color: #fcfcfc; }

section.survey_section .rank_chk .rank + label { position: relative; }
section.survey_section .rank_chk .rank + label::after { display: inline-block; position: absolute; right: 0; top: -10; width:32px; height: 20px; line-height: 20px; background-color: #222222; border-radius: 30px; color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; }

section.survey_section .rank_chk .rank.rank01 + label::after { content:'1위'; }
section.survey_section .rank_chk .rank.rank02 + label::after { content:'2위'; }
section.survey_section .rank_chk .rank.rank03 + label::after { content:'3위'; }
section.survey_section .rank_chk .rank.rank04 + label::after { content:'4위'; }
section.survey_section .rank_chk .rank.rank05 + label::after { content:'5위'; }
section.survey_section .rank_chk .rank.rank06 + label::after { content:'6위'; }
section.survey_section .rank_chk .rank.rank07 + label::after { content:'7위'; }
section.survey_section .rank_chk .rank.rank08 + label::after { content:'8위'; }
section.survey_section .rank_chk .rank.rank09 + label::after { content:'9위'; }
section.survey_section .rank_chk .rank.rank10 + label::after { content:'10위'; }
section.survey_section .rank_chk .rank.rank11 + label::after { content:'11위'; }
section.survey_section .rank_chk .rank.rank12 + label::after { content:'12위'; }
section.survey_section .rank_chk .rank.rank13 + label::after { content:'13위'; }
section.survey_section .rank_chk .rank.rank14 + label::after { content:'14위'; }
section.survey_section .rank_chk .rank.rank15 + label::after { content:'15위'; }
section.survey_section .rank_chk .rank.rank16 + label::after { content:'16위'; }
section.survey_section .rank_chk .rank.rank17 + label::after { content:'17위'; }
section.survey_section .rank_chk .rank.rank18 + label::after { content:'18위'; }
section.survey_section .rank_chk .rank.rank19 + label::after { content:'19위'; }
section.survey_section .rank_chk .rank.rank20 + label::after { content:'20위'; }

section.survey_section .chk_list_area.type02 { width: 100%; text-align: left; }

section.survey_section .input_box input + label { text-align: left; }

section.survey_section .scroll_area .chk_list_area.type01 {
    padding-bottom: 16px;
}
section.survey_section .scroll_area .chk_list_area.type02 { margin: 32px 0 0; padding-bottom: 36px; }
section.survey_section .scroll_area::-webkit-scrollbar { display: none; }
section.survey_section .scroll_area .etc_area { width: calc(100% - 16px); margin-bottom: 36px; }

section.survey_section .scroll_area { width: 100%; overflow-y: scroll; padding-right: 4px; position: relative; -ms-overflow-style: none; scrollbar-width: none; height: auto; overflow: auto; padding-top: 16px; padding-bottom: 72px; }
section.survey_section .scroll_area .bar_wrap { display: inline-block; position: absolute; width: 4px; height: 100%; right: 0; top: 0; background-color: transparent; overflow: hidden; }
section.survey_section .scroll_area .bar { content:""; display: inline-block; position: absolute; width: 4px; right: 0; top: 0; border-radius: 2px; }

section.survey_section .chk_list_area.type02 li { margin-bottom: 20px; padding-left: 32px; }
section.survey_section .chk_list_area.type02 li:last-of-type { margin: 0; }
section.survey_section .chk_list_area.type02 input[type="checkbox"],
section.survey_section .chk_list_area.type02 input[type="radio"] { display: none; }
section.survey_section .chk_list_area.type02 input[type="checkbox"] + label,
section.survey_section .chk_list_area.type02 input[type="radio"] + label { font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; position: relative; display: inline-block; }

section.survey_section .chk_list_area.type02 input[type="checkbox"] + label::before,
section.survey_section .chk_list_area.type02 input[type="radio"] + label::before { content: ""; display: inline-block; position: absolute; width: 24px; height: 24px; left: -32px; top: 0; border-radius: 50%; background-repeat: no-repeat; background-position: center; }

section.survey_section .chk_list_area.type02 input[type="checkbox"] + label::before { background-image: url(../image/survey/chkbox01_off.svg); }
section.survey_section .chk_list_area.type02 input[type="radio"] + label::before{ background-image: url(../image/survey/radio01_off.svg); }

section.survey_section .chk_list_area.type02 input[type="checkbox"]:checked + label::before { background-image: url(../image/survey/chkbox01_on.svg); }
section.survey_section .chk_list_area.type02 input[type="radio"]:checked + label::before{ background-image: url(../image/survey/radio01_on.svg); }

section.survey_section .list_sub_btn_area { margin-top: 32px; text-align: center; }
section.survey_section .list_sub_btn_area .btn01 { font-weight: 500; font-size: 14px; line-height: 20px; color: #888888; border-bottom: 1px solid #888888; }

section.survey_section .etc_area { width: 100%; margin-bottom: 94px; }
section.survey_section .input_area textarea { width: 100%; background-color: #ffffff; border: 1px solid #d0d0d0; padding: 15px 24px; border-radius: 12px; font-weight: normal; font-size: 15px; letter-spacing: 0.75px; box-sizing: border-box; min-height: 160px; line-height: 20px; }
section.survey_section .input_area textarea::placeholder { color: #6e7191; opacity:1; }
section.survey_section .input_area textarea:focus { background-color: #ffffff; border: 1px solid #8B4FF6; }
section.survey_section .textarea_wrap { margin-top: 38px; }

section.survey_section .etc_list_area { width: 100%; margin: 0 auto; padding-bottom: 177px; display: inline-block; }
section.survey_section .etc_list_area input[type="checkbox"] + label { width: 100%; }
section.survey_section .etc_list_area input[type="checkbox"] + label:first-of-type { margin-bottom: 18px; }

section.survey_section .bot_btn_area { position: absolute; width: calc(100% - 48px); left: 50%; transform: translateX(-50%); bottom: 32px; padding-bottom: 0; }
section.intro_section .bot_btn_area.fixed_btn_area,
section.survey_section .bot_btn_area.fixed_btn_area { position: fixed; bottom: 32px; transform: translateX(-50%); }
section.survey_section .scroll_btn_area { position: fixed; width: 100%; max-width: 480px; padding: 16px 24px 24px; padding-bottom: calc(constant(safe-area-inset-bottom) + 24px); padding-bottom: calc(env(safe-area-inset-bottom) + 24px); background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 80%, rgba(255, 255, 255, 0.5) 100%); bottom: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); }
section.survey_section .top_btn_area { position: fixed; top: 0; padding: 32px 24px 32px; left: 50%; transform: translateX(-50%); background-color: #ffffff; z-index: 1; max-width: 480px; }

.survey_section .name_view_area { width: 312px; height: 314px; background-image: url(../image/img_name_bg.png); background-repeat: no-repeat; background-position: center center; position: relative; }
.survey_section .name_view_area .text_box { position: absolute; left: 74px; top: 96px; }
.survey_section .name_view_area .target_name { font-weight: bold; font-size: 14px; line-height: 21px; }
.survey_section .name_view_area .pillgram_text { font-weight: bold; font-size: 14px; line-height: 21px; }

.survey_section .bot_btn_area { padding-bottom: 40px; }

.survey_section .worry_tip_top3 { margin-top: 48px; text-align: right; }
.survey_section .worry_tip_top3 .title_area { display: flex; justify-content: center; align-items: center; z-index: 1; }
.survey_section .worry_tip_top3 .title_area .label { border: 2px solid #8B4FF6; border-radius: 28px; padding: 0 8px; height: 22px; line-height: 20px; font-weight: 700; font-size: 13px; color: #8B4FF6; }
.survey_section .worry_tip_top3 .title_area .title { margin-left: 8px; font-weight: 700; font-size: 16px; line-height: 20px; }
.survey_section .worry_tip_top3 .text_list_area { margin: 16px auto 0; width: 288px; padding-bottom: 152px; }
.survey_section .worry_tip_top3 .text_list_area ul { display: flex; flex-direction: column; justify-content: center; width: auto; }
.survey_section .worry_tip_top3 .text_list_area li { width: auto; }
.survey_section .worry_tip_top3 .text_list_area li + li { margin-top: 8px; }
.survey_section .worry_tip_top3 .text_list_area .box { background-color: #ffeb81; display: inline-block; padding: 10px 12px; border-radius: 16px 16px 0px 16px; font-weight: 500; font-size: 14px; letter-spacing: 0.05em; text-align: left; }

section.survey_section .title_area.type_worry .survey_sub_title.border { border: 0; padding-bottom: 16px; }

.survey_section .title_area + .select_box { margin-top: 44px; }
.survey_section .textarea_hide_wrap { height: 0; overflow: hidden; margin-top: 16px; transition: height 0.5s; }
.survey_section .textarea_hide_wrap .textarea_wrap { margin-top: 0; }
.survey_section .textarea_hide_wrap.active { height: 184px; }

section.survey_section .bot_btn_area.static_type { position: static; left: 0; transform: none; width: 100%; margin-top: 20px; padding-bottom: 0; }


section.survey_section .section_wrap { padding: 68px 24px 124px; }
section.survey_section .section_wrap .bot_btn_area { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 68.02%); padding: 36px 24px 24px; }
section.survey_section .section_wrap .bot_btn_area .btn { background-color: #8b4ff6; color: #ffffff; font-size: 15px; }
section.survey_section .section_wrap .bot_btn_area .btn:disabled { background-color: #F3F3F3; color: rgba(34, 34, 34, 0.24); }
section.survey_section .section_wrap .title_area { padding-top: 24px; margin-bottom: 24px; }
section.survey_section .section_wrap .title_area .survey_title { font-weight: 700; font-size: 26px; line-height: 34px; }
section.survey_section .section_wrap .title_area .survey_title + .survey_sub_title { margin-top: 8px; }
section.survey_section .section_wrap .title_area .survey_title .name { display: block; font-size: 20px; font-weight: 500; color: #8B4FF6; line-height: 34px; }
section.survey_section .section_wrap .title_area .survey_sub_title { display: block; text-align:left; font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(34,34,34,0.72); }

section.survey_section .section_wrap .radio_area,
section.survey_section .section_wrap .chkbox_area,
section.survey_section .section_wrap .select_list_area { margin-top: 16px; }

section.survey_section .section_wrap .chkbox_area input[type="checkbox"],
section.survey_section .section_wrap .radio_area input[type="checkbox"],
section.survey_section .section_wrap .radio_area input[type="radio"] { display: none; }

section.survey_section .section_wrap .radio_area.type_2way > ul { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="radio"] + label { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 104px; background-color: #ffffff; border: 1px solid rgba(34,34,34,0.24); border-radius: 12px; box-sizing: border-box; }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="radio"]:checked + label { background-color: rgba(139,79,246,0.1); border: 1px solid #8b4ff6; }
section.survey_section .section_wrap .radio_area.type_2way > ul label img { width: 40px; }
section.survey_section .section_wrap .radio_area.type_2way > ul label .text { margin-top: 8px; font-weight: 500; font-size: 16px; line-height: 22px; }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="radio"]:checked + label  .text { color: #8b4ff6; }

section.survey_section .section_wrap .radio_area.type_2way > ul { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="checkbox"] + label { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 104px; background-color: #ffffff; border: 1px solid rgba(34,34,34,0.24); border-radius: 12px; box-sizing: border-box; }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="checkbox"]:checked + label { background-color: rgba(139,79,246,0.1); border: 1px solid #8b4ff6; }
section.survey_section .section_wrap .radio_area.type_2way > ul label img { width: 40px; }
section.survey_section .section_wrap .radio_area.type_2way > ul label .text { margin-top: 8px; font-weight: 500; font-size: 16px; line-height: 22px; }
section.survey_section .section_wrap .radio_area.type_2way > ul input[type="checkbox"]:checked + label  .text { color: #8b4ff6; }

section.survey_section .section_wrap .radio_area.type_mul01 > ul { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
section.survey_section .section_wrap .radio_area.type_mul01 > ul input[type="radio"] + label { display: inline-block; width: 100%; height: 38px; text-align: center; line-height: 36px; box-sizing: border-box; background-color: #ffffff; border: 1px solid rgba(34,34,34,0.24); border-radius: 8px; font-weight: 500; font-size: 14px; }
section.survey_section .section_wrap .radio_area.type_mul01 > ul input[type="radio"]:checked + label { background: rgba(139, 79, 246, 0.1); border: 1px solid #8B4FF6; color: #8B4FF6; }

section.survey_section .section_wrap .chkbox_area.type_mul01 > ul { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
section.survey_section .section_wrap .chkbox_area.type_mul01 > ul input[type="checkbox"] + label { display: inline-block; width: 100%; height: 38px; text-align: center; line-height: 36px; box-sizing: border-box; background-color: #ffffff; border: 1px solid rgba(34,34,34,0.24); border-radius: 8px; font-weight: 500; font-size: 14px; }
section.survey_section .section_wrap .chkbox_area.type_mul01 > ul input[type="checkbox"]:checked + label { background: rgba(139, 79, 246, 0.1); border: 1px solid #8B4FF6; color: #8B4FF6; }
section.survey_section .section_wrap .etc_text { margin-top: 8px; }


section.survey_section .section_wrap .radio_area.type_mul03 > ul li{ text-align: left; margin-bottom: 8px; }
section.survey_section .section_wrap .radio_area.type_mul03 > ul li:last-of-type{ margin-bottom: 0; }
section.survey_section .section_wrap .radio_area.type_mul03 > ul li input[type="radio"] + label{ display: block; font-size: 18px; font-weight: 500; border: 1px solid #cacaca; border-radius: 12px; padding: 12px 16px; }
section.survey_section .section_wrap .radio_area.type_mul03 > ul li input[type="radio"] + label::before{ width: 20px; height: 20px; border: 2px solid #D0D0D0; border-radius: 50%; box-sizing: border-box; vertical-align: -3px; content: ''; display: inline-block; margin-right: 10px; }
section.survey_section .section_wrap .radio_area.type_mul03 > ul li input[type="radio"]:checked + label{ color: #8B4FF6; background: rgba(139, 79, 246, 0.1); border: 1px solid #8B4FF6; }
section.survey_section .section_wrap .radio_area.type_mul03 > ul li input[type="radio"]:checked + label::before{ border: 5px solid #8B4FF6; }

section.survey_section .section_wrap .chkbox_area.type_mul02 > ul { display: grid; gap: 8px; }
section.survey_section .section_wrap .chkbox_area.type_mul02 > ul input[type="checkbox"] + label { display: inline-block; width: 100%; height: 38px; text-align: center; line-height: 36px; box-sizing: border-box; background-color: #ffffff; border: 1px solid rgba(34,34,34,0.24); border-radius: 8px; font-weight: 500; font-size: 14px; }
section.survey_section .section_wrap .chkbox_area.type_mul02 > ul input[type="checkbox"]:checked + label { background: rgba(139, 79, 246, 0.1); border: 1px solid #8B4FF6; color: #8B4FF6; }

section.survey_section .section_wrap .select_list_area.type_mul01 > ul > li { display: flex; justify-content: space-between; align-items: center; }
section.survey_section .section_wrap .select_list_area.type_mul01 > ul > li + li { margin-top: 16px; }
section.survey_section .section_wrap .select_list_area.type_mul01 .text_area { display: flex; align-items: center; }
section.survey_section .section_wrap .select_list_area.type_mul01 .text_area .main_text { font-weight: 500; font-size: 16px; line-height: 22px; }
section.survey_section .section_wrap .select_list_area.type_mul01 .text_area .unit_text { font-weight: 500; font-size: 14px; line-height: 22px; color: rgba(34,34,34,0.48); }
section.survey_section .section_wrap .select_list_area.type_mul01 select { width: 92px; height: 40px; line-height: 40px; background-color: #ffffff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 0 36px 0 24px; font-weight: 400; font-size: 16px; line-height: 22px; background-image: url(../image/survey/icon_select01.svg); background-repeat: no-repeat; background-position: calc(100% - 10px) center; }




.survey_contents h3{ position: relative; font-size: 18px; font-weight: 700; color: #222; line-height: 26px; }
.survey_contents h3::after{ position: absolute; right: 0; top: 50%; width: 16px; height: 16px; background: url(../image/common/icon_arrow_blcok16.svg) no-repeat center center; background-size: contain; content: ''; display: block; transform: translateY(-50%) rotate(180deg); }
.survey_contents .sur_title.on h3::after{ transform: translateY(-50%) rotate(0deg); }

.next_box{ margin-top: 24px; border-top: 8px solid #fafafa; padding: 24px 24px 0; width: calc(100% + 48px); margin-left: -24px; }
.next_box .radio_area{ display: none; }



/* ==================== 241119 - 추가작업 ====================*/
.survey_section .pill_pack_box { position: relative; width: 204px; height: 230px; padding: 28px 28px 19px; background: url(../image/bg_pill_pack_shadow.png) no-repeat center center; background-size: contain; margin: 32px auto 0; }
.survey_section .pill_pack_box::before { content: ''; display: block; width: 46px; height: 14px; background: url(../image/logo_pillgram_black.svg) no-repeat center center; background-size: contain; }
.survey_section .pill_pack_box::after { content: '건강기능식품'; display: block; position: absolute; left: 28px; bottom: 24px; font-size: 10px; font-weight: 500; color: #fff; line-height: 120%; letter-spacing: -0.2px; padding: 3px 10px; background: #222; border-radius: 2px; }
.survey_section .pill_pack_box .name_box { display: flex; align-items: center; width: 132px; border-bottom: 2px solid #000; margin-top: 20px; }
.survey_section .pill_pack_box .name_box .name { max-width: 110px; font-size: 16px; font-weight: 700; line-height: 140%; letter-spacing: -0.32px; vertical-align: -6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; margin-right: 4px; }
.survey_section .pill_pack_box .name_box em { font-size: 16px; font-weight: 700; line-height: 140%; letter-spacing: -0.32px; }
.survey_section .pill_pack_box .list_box { margin-top: 12px; }
.survey_section .pill_pack_box .list_box li { font-size: 12px; font-weight: 400; color: #757575; line-height: 130%; letter-spacing: -0.12px; margin-top: 4px; }
.survey_section .pill_pack_box .date_box { text-align: right; margin-top: 32px; }
.survey_section .pill_pack_box .date_box div { font-size: 10px; line-height: 120%; letter-spacing: -0.2px; }
.next_btn.disabled { color: #aaa !important; background: #efefef !important; border: 1px solid #efefef !important; }

.form_group_box { position: relative; margin-top: 40px; }
.form_group_box .form_limit { font-size: 14px; font-weight: 500; color: #aaa; line-height: 130%; letter-spacing: -0.28px; opacity: 0; display: block; position: absolute; right: 16px; top: 18px; height: 20px; transition: all .1s ease-in-out; }
.form_group_box .form_input { position: relative; width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: transparent; line-height: 22px; padding: 24px 48px 8px 20px; background: #fff; border: 1px solid #ddd; border-radius: 8px; transition: all .1s ease-in-out; } 
.form_group_box .form_input::placeholder { color: #aaa; }
.form_group_box .form_label { position: absolute; left: 20px; top: 20px; font-size: 16px; font-weight: 400; color: #aaa; line-height: 16px; display: inline-block; transition: all .1s ease-in-out; } 
/*? focus */
.form_group_box .form_input:focus,
.form_group_box .form_input.focus { color: #000; border: 1px solid #2aad5c; } 
.form_group_box .form_input:focus + .form_label,
.form_group_box .form_input.focus + .form_label { top: 8px; font-size: 13px; } 
.form_group_box .form_input:focus ~ .form_limit,
.form_group_box .form_input.focus ~ .form_limit { opacity: 1; }
/*? valid */
.form_group_box .form_input.valid { color: #000; } 
.form_group_box .form_input.valid + .form_label { top: 8px; font-size: 13px; } 
/*? readonly , disabled */
.form_group_box .form_input:read-only { background: #efefef; } 
.form_group_box .form_input:read-only:focus { border: 1px solid #ddd; }
/*? form - error */
.form_group_box .form_input.error { border: 1px solid #f60909; } 
.form_group_box .form_input.error + .form_label { color: #f60909; } 
.error_message { height: 0px; font-size: 13px; font-weight: 400; color: #f60909; padding-top: 0px; padding-left: 4px; overflow: hidden; transition: all .2s ease-in-out; } 
.error ~ .error_message { height: 18px; padding-top: 4px; }