@charset "utf-8";
/*마이페이지 메뉴 관련 css*/
/*=============== point ===============*/
.mypage.point .list_wrap .list::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -0.5rem;
    left: -1rem;
    width: calc(100% + 2rem);
    height: 8px;
    background: #F3F3F3;
}
.mypage.point .list_wrap .list div.text {
    width: 70%;
}
.mypage.point .list_wrap .list div {
    width: 30%;
}
@media ( max-width: 375px ) {
    .mypage.point .list_wrap .list div.text {
        width: 60%;
    }
    .mypage.point .list_wrap .list div {
        width: 40%
    }
}
@media ( max-width: 280px ) {
    .mypage.point .list_wrap .list div.text {
        width: 50%;
    }
    .mypage.point .list_wrap .list div {
        width: 50%
    }
}

/*=============== 친구초대 ===============*/
.mypage.invite .content {
    padding-top: 20%;
}
.mypage.invite .invite_code{
    letter-spacing: 0.2rem;
}

/*=============== 친구초대:상세===============*/
.mypage.invite .content.invite_detail {
    padding-top: 0
}
.mypage.invite .content.invite_detail .title_badge{
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: linear-gradient(300.63deg, #2CB573 25.33%, #4ED738 101.73%);
    color: #ffffff;
    font-family: 'GmarketSans';
    font-weight: 700;
    font-size: 0.75rem;
}
.mypage.invite .content.invite_detail .title {
    padding-top: 0.25rem;
    font-family: 'GmarketSans';
    font-weight: 700;
    font-size: 1.625rem;
}
.mypage.invite .content.invite_detail .icon_bg {
    border-radius: 100%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    text-align: center;
    background-color: #F1F0FF;
}
.mypage.invite .content.invite_detail .icon_bg>i {
    padding-top: 38px;
    transform: translateY(-50%);
}
.mypage.invite .content.invite_detail .text_highlight {
    width: fit-content;
    display: inline;
    box-shadow: inset 0 -10px 0 #F1F0FF; 
}


/*=============== 결제비밀번호 재설정 ===============*/
.mypage.payPassword .topArea {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.mypage.payPassword .topArea .password_bot{
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.mypage.payPassword .topArea .password_bot span {
    width: 16px;
    height: 16px;
    background: #EEEEEE;
    border-radius: 100%;
}
.mypage.payPassword .topArea .btn_line {
    width: fit-content;
    align-self: center;
    padding: 0 1rem;
    height: 30px;
    font-size: 0.85rem;
    font-weight: 400;
}
.mypage.payPassword .password_bot span.active {
    background: #289D72;
}
.mypage.payPassword .phone {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}
.mypage.payPassword .phone .timmer {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    font-size: 0.938rem;
    background-color: #ffffff;
    color: #999999;
}
.mypage.payPassword .phone .btn {
    font-size: 0.875rem;
    border-radius: 4px;
    width: auto;
    padding: 0 0.5rem;
    height: 52px;
    width: 98px;
}
@media ( max-height: 640px ) {
    .mypage.account .btn_area.bottom {
        position: relative;
    }
}

/*=============== 캐디피 상품권 ===============*/
.mypage.giftCard .giftCard_topArea{
    padding:2.182rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 10px;
    background: #F9F9F9;
}
.mypage.giftCard .giftCard_topArea h1{
    font-size: 1.5rem;
    font-weight: 700;
}
.mypage.giftCard .giftCard_topArea i.icon_gift_card::before{
    width: 88px;
    height: 88px;
}
.mypage.giftCard .giftCard_list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    overflow: hidden;
    width: 100%;
}
.mypage.giftCard .giftCard_list .giftCard_obj {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #E6E6E6;
    position: relative;
}
.mypage.giftCard .giftCard_list .giftCard_obj .img_area {
    padding: 0.75rem;
    flex-shrink: 0;
    width: 120px;
    background-color: #ffffff;
    border-radius: 15px;
}
.mypage.giftCard .giftCard_list .giftCard_obj .img_area>img {
    border-radius: 0.5rem;
}
.mypage.giftCard .giftCard_list .giftCard_obj .img_area .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: calc(0.25em + 1px) 0.5rem 0.5em 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px;
    background: #000000;
    color: #ffffff;
}
.mypage.giftCard .giftCard_list .giftCard_obj.disable .img_area {
    filter: brightness(0.6);
}
.mypage.giftCard .giftCard_list .giftCard_obj.disable>span {
    position: absolute;
    top: 50%;
    left: calc(60px + 0.5rem);
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.813rem;
    z-index: 1;
}
.mypage.giftCard .giftCard_obj .info_area{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 120%;
    font-size: 1rem;
    width: calc(100% - 120px - 0.5rem);
}

/*=============== 캐디피 상품권: 상세 ===============*/
.mypage.giftCard.detail .giftCard_topArea{
    background: none;
}
.mypage.giftCard.detail .giftCard_topArea>img{
    border-radius: 0.5rem;
}


.mypage.c.detail .giftCard_topArea.disable {/*사용 불가능할때_이미지 필터: 사용완료, 취소완료, 기간만료*/
    filter: brightness(0.45);
}
.mypage.giftCard.detail .giftCard_topArea ~ .disable_text {/*사용 불가능할때_안내 텍스트: 사용완료, 취소완료, 기간만료*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.75rem;
    z-index: 1;
}
.mypage.giftCard.detail .info_area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 120%;
}
.mypage.giftCard.detail .tab_content .use {
    background: #F9F9F9;
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 0.25rem;
}
.mypage.giftCard.detail .tab_content .use span {
    font-weight: 400;
    font-size: 0.875rem;
    padding: 0.25rem 0;
}
.mypage.giftCard.detail .accordion_content .notice {
    color: #565656;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 143%;
}
.mypage.giftCard.detail .notice_imgArea {
    display: block;
    width: 100%;
    max-height: 325px; /*이미지 전체보기 클릭 전*/
    overflow: hidden;
    background: #F1F1F1;
    border-radius: 8px;
    margin-bottom: 61px;
}
.mypage.giftCard.detail .notice_imgArea>img {
    width: 100%;
}
.mypage.giftCard.detail .tab_content.img_content {
    position: relative;
}
.mypage.giftCard.detail .tab_content.img_content .show_allImg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 1.25rem 1rem;
    color: #666666;
    background: #ffffff;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    font-size: 0.938rem;
    font-weight: 400;
    text-align: center;
}
.mypage.giftCard.detail .tab_content.img_content .show_allImg.active i::before{
    transform: rotate(270deg);
}

/*=============== 결제수단 관리 ===============*/
.mypage.paysetting .card.card_add {
    border: 1px dashed #999999;
    border-radius: 10px;
    text-align: center;
    padding: 2.5rem 0;
}
.mypage.paysetting .card.card_add {
    border: 1px dashed #999999;
    text-align: center;
}
.mypage.paysetting .card.card_add span {
    display: block;
    padding-top: 1rem;
    color: #999999;
    font-weight: 400;
    font-size: 0.875rem;
}
.mypage.paysetting .card.card_add i.icon_plus::before {
    filter: brightness(1.8);
}
.mypage.paysetting .list.disable {
    filter: grayscale(1) brightness(0.9);
}

/*=============== 골프로또게임 ===============*/
.mypage.lotto .game_select .btn_select{
    height: 70px !important;
}
.mypage.lotto .game_select .btn_select p {
    text-align: start;
}
.mypage.lotto .game_select .select_list li{
    height: 70px;
}
.mypage.lotto .lotto_result table {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
}
.mypage.lotto .lotto_result table .title th{
    background-color: #289D72;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.938rem;
    padding: 0.5rem 0;
}
.mypage.lotto .lotto_result table .title th:nth-child(2){
    border-left: 1px solid #ffffff;
}
.mypage.lotto .lotto_result table .value:nth-child(2n-1) {
    background-color: #EAF6F1;
}
.mypage.lotto .lotto_result table .value td {
    padding: 0.5rem 0;
}
.mypage.lotto .lotto_result table .value td:nth-child(2){
    color: #289D72;
    font-family: 700;
    border-left: 1px solid #ffffff;
}