@charset "utf-8";
/** 섭취 알람 설정 **/
.alarm_list li { position: relative; width: 100%; }
.alarm_list li:not(:last-of-type) { margin-bottom: 16px; }
.alarm_list .title { display: block; font-size: var(--font-regular); font-weight: 700; color: var(--color-main); margin-bottom: 4px; }
.alarm_list .list_box { position: relative; padding: 14px 16px; background-color: rgba(42, 173, 92, 0.1); border-radius: var(--border-radius); }
.alarm_list .list_box.off { background-color: rgba(239, 240, 246, 0.5); }
.alarm_list .time_select_box label { display: inline-block; margin-right: 16px; }
.alarm_list .time_select_box span { display: inline-block; font-size: var(--font-regular); font-weight: 500; line-height: 44px; margin-left: 4px; }
.alarm_list .time_select_box select { width: 64px; height: 44px; font-size: var(--font-regular); font-weight: 500; line-height: 19px; padding-left: 12px; background: url(../../image/sub_mypage/icon_arrow_select.svg) no-repeat calc(100% - 8px) center, var(--color-white); border: 0px; border-radius: var(--border-radius-s); }
.alarm_list .time_select_box select:disabled { background: url(../../image/sub_mypage/icon_arrow_select.svg) no-repeat calc(100% - 8px) center, transparent; }
.alarm_list .chk_area { position: absolute; right: 16px; bottom: 21px; width: 70px; height: 30px; overflow: hidden; }
.alarm_list .chk_area input[type="checkbox"] { display: none; }
.alarm_list .chk_area input[type="checkbox"] + label { width: 100%; height: 100%; display: inline-block; position: relative; background: #c6c6c6; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 15px; }
.alarm_list .chk_area input[type="checkbox"] + label i { position: absolute; display: inline-block; width: 24px; height: 24px; left: 3px; background: var(--color-white); top: 3px; border-radius: 50%; transition: left 0.5s, background-color 0.5s; }
.alarm_list .chk_area input[type="checkbox"] + label i::after { content: "OFF"; position: absolute; left: 32px; font-weight: 500; font-size: var(--font-small); line-height: 21px; color: var(--color-white); top: 50%; transform: translateY(-50%); }
.alarm_list .chk_area input[type="checkbox"] + label i::before { content: "ON"; position: absolute; right: 32px; font-weight: 500; font-size: var(--font-small); line-height: 21px; color: var(--color-white); top: 50%; transform: translateY(-50%); }
.alarm_list .chk_area input[type="checkbox"]:checked + label { background: var(--color-main); }
.alarm_list .chk_area input[type="checkbox"]:checked + label i { left: calc(100% - 28px); }