@charset "UTF-8";

.bg_frireco {background:#F5F9FF; !important; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }

/* 친구추천 이벤트 화면 */
.fri_explan {background: #FFFFFF; padding-bottom: 28px;}
.fri_explan .fri_pic_area img {width: 100%;}
.fri_explan .explan_box_area {margin-top: 38px; display: flex; flex-direction: column; align-items: center;}
.fri_explan .explan_box_area.first {margin-top: 31px;}
.fri_explan .explan_box_area .explan_order { display: flex; align-items: center;}
.fri_explan .explan_box_area .explan_order i { background-image:url(../../images/event/friendreco/icon_lightning.svg); background-repeat: no-repeat; display: inline-block; width: 17px; height: 17px; background-position: center; }
.fri_explan .explan_box_area .explan_order .one { line-height: 1.6; font-weight: 500; color: #529BFF; }
.fri_explan .explan_box_area .explan_order .two { line-height: 1.6; font-weight: 500; color: #006EF1; }
.fri_explan .explan_box_area .explan_title { width: 71px; height: 20px; border-radius: 4px; padding: 1px 6px; margin-bottom: 7px;
    background-color: #ddedff; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.6; color: #006ef1;}
.fri_explan .explan_box_area .explan_box_txt { display: flex; flex-direction: column; align-items: center;}
.fri_explan .explan_box_area .explan_box_txt .large_txt { font-size: 18px; font-weight: 600; line-height: 1.6; color: #0f0f0f; text-align: center;}
.fri_explan .explan_box_area .explan_box_txt .middle_txt {display: flex; flex-direction: column; align-items: center;
    margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #0f0f0f; }
.fri_explan .explan_box_area .explan_box_txt .grey_txt {display: flex; flex-direction: column; align-items: center;
    margin-top: 4px; font-size: 12px; font-weight: normal; line-height: 1.6; color: #8e919f; }
.fri_explan .explan_box_area .explan_box_txt .grey_txt.small { font-size: 10px; color: #737687; }
.fri_explan .explan_box_area .explan_box_txt .mission_box { margin-top: 8px; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 6px;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item {display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .card_icon {background-image:url(../../images/event/friendreco/icon_card_disabled.svg); background-repeat: no-repeat;
    display: inline-block; width: 48px; height: 48px; background-position: center;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .card_icon.on {background-image:url(../../images/event/friendreco/icon_card_enable.svg);}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .heart_icon {background-image:url(../../images/event/friendreco/icon_heart_disabled.svg); background-repeat: no-repeat;
    display: inline-block; width: 48px; height: 48px; background-position: center;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .heart_icon.on {background-image:url(../../images/event/friendreco/icon_heart_enable.svg);}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .battery_icon {background-image:url(../../images/event/friendreco/icon_battery_disabled.svg); background-repeat: no-repeat;
    display: inline-block; width: 48px; height: 48px; background-position: center;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_icon .battery_icon.on {background-image:url(../../images/event/friendreco/icon_battery_enable.svg);}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move {display: flex; align-items: center; justify-content: space-between; width: 60%;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move .mission_content {display: flex; flex-direction: column;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move .mission_content span:nth-child(1) {font-size: 10px; font-weight: 600; line-height: 1.6; color: #aaacb6; }
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move .mission_content span:nth-child(1).on {font-size: 10px; font-weight: 600; line-height: 1.6; color: #006ef1; }
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move .mission_content span:nth-child(2) {font-size: 14px; font-weight: 600; line-height: 1.3; color: #8e919f;}
.fri_explan .explan_box_area .explan_box_txt .mission_box .mission_item .mission_move .mission_content span:nth-child(2).on {font-size: 14px; font-weight: 600; line-height: 1.3; color: #0f0f0f;}
.fri_explan .explan_box_area .explan_box_txt .event_timer {padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: normal;
    line-height: 1.6; background-color: #f1faff; color: #737687; display: flex; align-items: center; height: 30px; gap: 4px; margin-top: 8px;}
.fri_explan .explan_box_area .explan_box_txt .event_timer.complete {background-color: #006EF1; color: #FFFFFF;}
.fri_explan .explan_box_area .explan_box_txt .event_timer .time_txt {color: #006ef1;}
.fri_explan .explan_box_area .explan_box_txt .event_timer .event_timer_ico {background-image:url(../../images/event/friendreco/friend_event_timer_ico.svg); background-repeat: no-repeat;
    display: inline-block; width: 12px; height: 12px; background-position: center;}

.fri_contents {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 14px; padding-left: 16px; padding-right: 16px; gap: 14px;}
.fri_contents .share_cd_box {display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 14px; width: 100%; padding-left: 28px; padding-right: 28px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);}
.fri_contents .share_cd_box.input_box {padding-bottom: 17px;}
.fri_contents .share_cd_box strong {font-size: 16px; font-weight: bold; color: #0f0f0f; padding-top: 16px; padding-bottom: 16px; line-height: 0.94;}
.fri_contents .share_cd_box .cd_input {font-size: 16px; font-weight: 500; color: #888888; background: #F5F8FC; border-radius: 6px; width: 100%; text-align: center; padding: 16px; margin-bottom: 10px;}
.fri_contents .share_cd_box .cd_input input {color: #888888; background: #F5F8FC; width: 100%; text-align: center;}
.fri_contents .share_cd_box .copy_items {display: flex; align-items: center; justify-content: space-around; width: 100%; padding-top: 16px; padding-bottom: 21px;}
.fri_contents .share_cd_box .copy_items .copy_cd {background-image:url(../../images/event/friendreco/frireco_copy_ico.svg); background-repeat: no-repeat; display: inline-block; width: 17px; height: 20px; background-position: center;}
.fri_contents .share_cd_box .copy_items .copy_url {background-image:url(../../images/event/friendreco/frireco_url_ico.svg); background-repeat: no-repeat; display: inline-block; width: 20px; height: 20px; background-position: center;}
.fri_contents .share_cd_box .copy_items .copy_kakao {background-image:url(../../images/event/friendreco/frireco_kakao_ico.svg); background-repeat: no-repeat; display: inline-block; width: 22px; height: 20px; background-position: center;}
.fri_contents .share_cd_box .copy_items div {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 33.3%;}
.fri_contents .share_cd_box .copy_items div:nth-child(2) {border-right: 1px solid #d3d4d9; border-left: 1px solid #d3d4d9; }
.fri_contents .share_cd_box .copy_items div span {font-size: 12px; font-weight: 500; color: #888888;}
.fri_contents .share_cd_box .cd_input_btn {width: 100%; text-align: center; padding: 13px; background: #1271F3; color: #FFFFFF; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 15px;}

.fri_contents .ranking_box {display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 14px; width: 100%; padding-left: 28px; padding-right: 28px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);}
.fri_contents .ranking_box .ranking_top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 3.5px; border-bottom: 1px solid #969CA4;}
.fri_contents .ranking_box .ranking_top .com01 {font-size: 16px; font-weight: bold; color: #0f0f0f; line-height: 1.6;}
.fri_contents .ranking_box .ranking_top .com02 {font-size: 16px; font-weight: bold; color: #0f0f0f; line-height: 1.6;}
.fri_contents .ranking_box .ranking_top .com02 span{color: #4293FE;}
.fri_contents .ranking_box .part_info {display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 10px; padding-bottom: 12px; gap: 2px;}
.fri_contents .ranking_box .part_info .part_info_items {display: flex; align-items: center; justify-content: space-between; width: 100%; line-height: 22.4px;}
.fri_contents .ranking_box .part_info .part_info_items .com01 {font-size: 14px; font-weight: 500; color: #444650; line-height: 1.6;}
.fri_contents .ranking_box .part_info .part_info_items .com02 {font-size: 14px; font-weight: normal; color: #131313; line-height: 1.6;}
.fri_contents .ranking_box .part_info .part_info_items .com02 span {color: #4293FE;}

.fri_contents .ranking_box .go_gift_card {font-size: 14px; font-weight: 500; width: 100%; padding: 11px 3px 11px 15px;
    background: #E8F1FF; border-radius: 6px; text-align: center; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;}
.fri_contents .ranking_box .go_gift_card .div01 {display: flex; align-items: center;}
.fri_contents .ranking_box .go_gift_card .span01 {line-height: 1.6; color: #0f0f0f; }
.fri_contents .ranking_box .go_gift_card .span02 {border-radius: 10px; color: #1271f3; line-height: 1.6; font-size: 14px;}

.fri_contents .ranking_box .ranking_benefit {width: 100%; margin-bottom: 12px; font-size: 12px; line-height: 19.2px; font-weight: 400; color: #006EF1;}
.fri_contents .ranking_box .ranking_benefit i {background-image:url(../../images/event/friendreco/icon_list.svg); background-repeat: no-repeat; display: inline-block; width: 20px; height: 20px; background-position: center;}
.fri_contents .ranking_box .ranking_benefit .line01 {display: flex; align-items: center;}
.fri_contents .ranking_box .ranking_benefit .line02 {margin-left: 20px;}

.fri_contents .ranking_box .show_more {padding: 12px 0px 8px; width: 100%; text-align: center; font-size: 12px; font-weight: 300; line-height: 1.25; color: #b1b2b6; }
.fri_contents .ranking_box .show_more i {background-image:url(../../images/event/friendreco/frireco_more_arrow.svg); background-repeat: no-repeat; display: inline-block; width: 100%; height: 4px; background-position: center; transition: all 0.5s;}
.fri_contents .ranking_box .show_more.on i {transform: rotate(180deg);}

.fri_contents .ranking_box .part_list {display: flex; flex-direction: column; width: 100%;}
.fri_contents .ranking_box .part_list .part_dtl {display: flex; flex-direction: column; margin-bottom: 16px;}
.fri_contents .ranking_box .part_list .part_dtl .div01 {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #B1B2B6;}
.fri_contents .ranking_box .part_list .part_dtl strong {line-height: 1.6; padding-bottom: 2px; font-size: 13px; font-weight: 500; color: #444650;}
.fri_contents .ranking_box .part_list .part_dtl strong.title_only {border-bottom: 1px solid #B1B2B6;}
.fri_contents .ranking_box .part_list .part_dtl .span01 {border-radius: 10px; padding: 0 10px; background-color: #f3f7ff; color: #1271f3; font-size: 12px; font-weight: 500; line-height: 1.6;}
.fri_contents .ranking_box .part_list .part_dtl .reco_list_items {line-height: 20.8px; padding-top: 8px; display: flex; align-items: center; justify-content: flex-start; font-size: 13px; font-weight: 300; color: #888888;}
.fri_contents .ranking_box .part_list .part_dtl .reco_list_items .chrg_no {background-image:url(../../images/event/friendreco/frireco_chrg_no.svg); background-repeat: no-repeat;
    display: inline-block; width: 20px; height: 20px; background-position: center;}
.fri_contents .ranking_box .part_list .part_dtl .reco_list_items .chrg_ok {background-image:url(../../images/event/friendreco/frireco_chrg_ok.svg); background-repeat: no-repeat;
    display: inline-block; width: 20px; height: 20px; background-position: center;}

.fri_contents .ranking_progress {margin-top: 16px; width: 100%; display: flex; flex-direction: column; gap: 47px; margin-bottom: 65px;}
.fri_contents .ranking_progress span {font-size: 16px; font-weight: bold; color: #0f0f0f; text-align: center; line-height: 1.6;}
.fri_contents .ranking_progress .ranking_bar_wrap {width: 100%; height: 8px; background: rgba(232, 241, 255, 1); border-radius: 9px;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_val {width: 0%; height: 8px; background: rgba(3, 102, 255, 1); border-radius: 9px;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_marker { position: relative; top: -35px; margin-left: 0%;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_marker i { position: relative; left: -7px; background-image:url(../../images/event/friendreco/rank_marker.svg);
    background-repeat: no-repeat; display: inline-block; width: 14px; height: 20px;
    background-position: center; top: 0;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals {position: relative; top: -37px; left: -30px;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals .goals_itm {display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; left: 0px;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals .goals_itm p {font-weight: 500; font-size: 12px; line-height: 19.2px; color: rgba(18, 113, 243, 1); background: rgba(243, 247, 255, 1); border-radius: 10px; padding-left: 8px; padding-right: 8px; text-align: center;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals .rank_third{ background-image:url(../../images/event/friendreco/fri_rank_third.svg); background-repeat: no-repeat; display: inline-block; width: 60px; height: 18px; background-position: center;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals .rank_second{ background-image:url(../../images/event/friendreco/fri_rank_second.svg); background-repeat: no-repeat; display: inline-block; width: 60px; height: 18px; background-position: center;}
.fri_contents .ranking_progress .ranking_bar_wrap .ranking_bar_goals .rank_first{ background-image:url(../../images/event/friendreco/fri_rank_first.svg); background-repeat: no-repeat; display: inline-block; width: 60px; height: 18px; background-position: center;}

.fri_note {margin-top: 18px; padding-left: 16px; padding-right: 16px;}
.fri_note .note_title {font-size: 12px; font-weight: bold; line-height: 1.6; color: #959ca4; }
.fri_note .note_div01 {margin-top: 8px;}
.fri_note .note_div01 .note_title.sub_txt {font-size: 10px;}
.fri_note .note_div01 .note_content {margin-top: 4px; font-size: 10px; line-height: 1.6; color: #959ca4; font-weight: normal; padding-left: 20px;}
.fri_note .note_div01 .note_content ul li {list-style: disc; line-height: 1.6;}

.move_arrow {background-image:url(../../images/event/friendreco/frireco_move_arrow.svg); background-repeat: no-repeat; display: inline-block; width: 24px; height: 24px; background-position: center;}
.move_arrow.complete {background-image:url(../../images/event/friendreco/ico_mission_check.svg);}

@keyframes motion {
    0% {top: 0px;}
    100% {top: -10px;}
}
-webkit-@keyframes motion { 0% {top: 0px;} 100% {top: -10px;} }

/* 이벤트 유의사항 */
.script_guide_caution_frame {
    width: calc(100% - 8%);
    height: auto;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    padding: 0;
}
.check {margin-top:53px; padding:0 24px;}
.check strong {color:#3e4857; font-size:10px; font-weight:900; line-height:1.6; letter-spacing:-0.025em;}
.check .dot_list {margin-top: 12px}
.check .dot_list li {position:relative; padding-left:6.5px; color:#959CA4; font-size:10px; font-weight:400; line-height:1.6; letter-spacing:-0.025em; word-break:keep-all;}
.check .dot_list li::before {content:''; position:absolute; z-index:1; left:0; top:8px; width:2.5px; height:2.5px; border-radius:30px; background:#6b7381;}
.check .dot_list li + li {margin-top:8px;}


/* 이벤트 허용 팝업 */
.allow_popup_background {
    z-index: 999999;
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 반투명한 검정색 배경 */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 하단에 위치 */
}

.allow_popup {
    z-index: 9999999;
    position: fixed; /* 화면에 고정 */
    bottom: 0; /* 화면 하단에 위치 */
    left: 0; /* 왼쪽 끝에 위치 */
    width: 100%; /* 디바이스 넓이 최대로 설정 */
    height: auto; /* 기존 높이 유지 */
    padding: 24px 32px 16px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.07);
    background-color: #fff;
    box-sizing: border-box; /* 패딩을 포함한 전체 크기를 설정 */
    border-top-left-radius: 16px; /* 왼쪽 위 모서리 반지름 16px */
    border-top-right-radius: 16px; /* 오른쪽 위 모서리 반지름 16px */
    /*transform: translateY(100%); !* 초기 위치를 화면 아래로 설정 *!*/
    /*animation: slideUp 0.5s ease-out forwards; !* 애니메이션 적용 *!*/
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

.title {
    height: 58px;
    flex-grow: 0;
    margin: 0 43px 20px 43px;
    font-family: Pretendard;
    font-size: 22px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    color: #000;
}

.sub-txt {
    height: 24px;
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 500;
    color: #0f0f0f;
    line-height: 1.35;
    align-content: end;
}

.span-list {
    list-style-type: none; /* 기본 리스트 스타일 제거 */
    padding: 0;
    margin: 0;
}

.span-list-item {
    display: block; /* 블록 요소처럼 보이게 설정 */
    height: 15px;
    flex-grow: 0;
    margin: 22px 12px 5px 11px;
    font-family: Pretendard;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.07;
    letter-spacing: normal;
    text-align: left;
    color: #5c5e6b;
}

.sub-txt-txt {
    height: 15px;
    font-family: Pretendard;
    font-size: 14px;
    line-height: 1.07;
    color: #5c5e6b;
}
.sub-txt-txt.agree-comment {text-align: center; font-size: 12px; margin-top: 26px; }

.check_button {
    width: 100%;
    height: 44px;
    margin: 35px 0px 10px 0px;
    border-radius: 6px;
    background-color: #AAACB6;
    color: #fff; /* 버튼 텍스트 색상 */
    font-family: Pretendard; /* Pretendard 폰트, 대체 폰트로 sans-serif */
    font-size: 16px; /* 버튼 텍스트 크기 */
    font-weight: 500; /* 버튼 텍스트 두께 */
    text-align: center; /* 버튼 텍스트 중앙 정렬 */
    border: none; /* 기본 테두리 제거 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
}
.check_button.all_agree {
    background-color: #1271F3;
}

    /* 동의하기 메인 체크박스 */
.checkbox-container {
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 10px 0px 10px 0px;
}
.checkbox-container input {
    display: none;
}
.checkmark {
    width: 24px;
    height: 24px;
    margin: 0px 10px 0px 0px;
    background-image: url('/resources/images/event/luckydraw/allow_box_uncheck.svg'); /* 체크되지 않은 이미지 경로 */
    background-size: cover;
}
.checkbox-container input:checked + .checkmark {
    background-image: url('/resources/images/event/luckydraw/allow_box_checked.svg'); /* 체크된 이미지 경로 */
}

/* 동의하기 서브 체크박스 */
.checkbox-sub-container {
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.checkbox-sub-container input {
    display: none;
}
.checkmark-sub {
    width: 24px;
    height: 24px;
    margin: 0px 10px 0px 0px;
    background-image: url('/resources/images/event/luckydraw/allow_uncheck.svg'); /* 체크되지 않은 이미지 경로 */
    background-size: cover;
}
.checkbox-sub-container input:checked + .checkmark-sub {
    background-image: url('/resources/images/event/luckydraw/allow_checked.svg'); /* 체크된 이미지 경로 */
}

/* 동의하기 서브 체크박스 */
.checkbox-arr-container {
    height: 30px;
    width: 30px;
    display: flex;
    margin-left: auto;
}
.checkbox-arr-container input {
    display: none;
}
.checkmark-arr {
    width: 24px;
    height: 24px;
    margin: 0px 0px 0px 0px;
    background-image: url('/resources/images/event/luckydraw/keyboard_arrow_right.svg'); /* 체크되지 않은 이미지 경로 */
    background-size: cover;
}
.checkbox-sub-container input:checked + .checkmark-arr {
    background-image: url('/resources/images/event/luckydraw/keyboard_arrow_down.svg'); /* 체크된 이미지 경로 */
}

.pr-content {
    flex-grow: 0;
    margin: 20px 0 0 20px;
    padding: 10px 14px 10px 14px;
    font-family: Pretendard;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #aaacb6;
}