@charset "utf-8";

/* CSS Document */

.clt_info_fw {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 60px;
    margin-top: 40px;
}

.clt_name_blk {
    color: var(--greygreen);
    font-size: 22px;
}

.b1 {
    text-align: right;
    font-size: 14px;
}

.b2 {
    padding: 0 0 0 10px;
}

.ed_prof img {
    width: 26px;
    height: 26px;
}

h1.swiHEADER {
    margin: 0;
    font-size: 36px;
    text-align: center;
    font-weight: 300;
    color: var(--greygreen);
    width: 100%;
    -webkit-transform: translateY(-28px);
    -ms-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cardSWI_BLK {
    background-color: var(--lightgrey);
    border-radius: 40px;
    background-image: url("../images/card_handle_w.png");
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
}

.cardSWI_BLK {
    position: relative;
}

.feature_mycard {
    padding: 30px 0;
}

.feature_mycard h3 {
    color: var(--greygreen);
    text-align: center;
    font-weight: 300;
    font-size: 16px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}

.feature_mycard .swiper-slide-active h3 {
    opacity: 1;
}

.feature_mycard .swiper-slide {
    position: relative;
    width: 300px;
}

.feature_mycard .swiper-slide .offcard {
    background-image: url("../images/offcard_g.svg");
    position: absolute;
    cursor: pointer;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    z-index: 10;
}

.feature_mycard .swiper-slide .offcard::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: var(--yellow);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 100%;
    z-index: -1;
    background-image: url(../images/offcard_g.svg);
}

.feature_mycard .swiper-slide .offcard:hover::after {
    opacity: 1;
}

.next-prev {
    width: 100px;
    position: absolute;
    right: 5px;
    top: 0;
}

.next-prev .divider {
    border-left: 3px solid #e7e7e7;
    height: 44px;
    width: 3px;
    left: 48px;
    margin-top: -22px;
    margin-left: -3px;
    position: absolute;
}

.next-prev .swiper-button-next,
.next-prev .swiper-rtl .swiper-button-prev,
.next-prev .swiper-button-prev,
.next-prev .swiper-rtl .swiper-button-next {
    color: #000;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.next-prev .swiper-button-next,
.next-prev .swiper-rtl .swiper-button-prev {
    right: -4px;
}

.next-prev .swiper-button-prev,
.next-prev .swiper-rtl .swiper-button-next {
    left: -8px;
}

.myfav_bar {
    margin-top: 50px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.myfav_header h1 {
    margin: 0;
    font-size: 46px;
    text-align: center;
    font-weight: 300;
    color: var(--greygreen);
    width: 100%;
}

.myfav_btn_bar a {
    padding-left: 15px;
}

.myfav_btn_bar img {
    vertical-align: middle;
}

.tagWRAP {
    border-top: 0;
}

.joybar {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.joybar .joybox {
    width: 30%;
}

.cardSWI_BLK_yel_btn{
    position: relative;
    background-color: var(--yellow);
    border-radius: 0 0 40px 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.cardSWI_BLK_yel_btn .flexR{
    justify-content: center;
    width: 50%;
    align-items: center;
    gap: 10px;
    color: var(--greygreen);
    font-weight: 500;
    padding: 15px;
}
.cardSWI_BLK_yel_btn .flexR:first-child{border-right: 1px solid #fff;}
.cardSWI_BLK_yel_btn .flexR img{
    width: 40px;
    height: 40px;
}

#card_added_alert{
    position: fixed;
    bottom: 25%;
    left: 37.5%;
    transform: translateX(-50%) translateY(100%);
    transition: all 1s ease;
    width: 520px;
    z-index: 9999;
    padding: 14px 20px;
    background-color: #ffeeb6;
    color: var(--greygreen);
    box-shadow: 2px 0px 18px -7px rgba(0,0,0,0.75);
    -webkit-box-shadow: 2px 0px 18px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 0px 18px -7px rgba(0,0,0,0.75);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    align-items: center;
    pointer-events: none;
    opacity: 0;
}
#card_added_alert.on{
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
}
#card_added_alert.off{
    transform: translateX(-50%) translateY(0%);
    opacity: 0;
}
#card_added_alert img{width: 35px; height: 35px;}
.clt_em{transform: translateY(50%);}

@media screen and (max-width: 1440px) {
    .clt_info_fw {
        width: calc(100% - 40px);
    }
    .cardSWI_BLK,
    .myfav_bar,
    .joybar {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    #card_added_alert{left: calc(50% - 170px);}
}

@media screen and (max-width: 1023px) {
    .feature_mycard {
        padding: 30px 0 80px 0;
    }
    .next-prev {
        position: relative;
        right: auto;
        left: calc(50% - 50px);
        bottom: 50px;
        top: auto;
    }
    .clt_info_fw {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .clt_name_blk {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin: 10px 0 0;
    }
    .clt_side_info.flexR {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .clt_em{transform: translateY(0%);}
    .feature_mycard .swiper-slide {
        width: 230px;
    }
    .feature_mycard .swiper-slide .offcard {
        right: -25px;
        top: -25px;
    }
    .myfav_bar.flexR {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 10px;
    }
    .cardSWI_BLK {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    h1.swiHEADER,
    .myfav_header h1 {
        font-size: 30px;
    }
    h1.swiHEADER {
        -webkit-transform: translateY(-14px);
        -ms-transform: translateY(-14px);
        transform: translateY(-14px);
    }
    .myfav_header h1,
    .myfav_btn_bar {
        margin-bottom: 20px
    }
    .joybar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .joybar .joybox {
        width: 100%;
        margin-bottom: 20px;
    }

    .cardSWI_BLK_yel_btn .flexR{
         flex-direction: column;
         gap:5px;
    }

    #card_added_alert{left: 20px;bottom: 20px;transform: translateX(0%) translateY(50%);width: calc(100% - 40px);}
    #card_added_alert.on{ transform: translateX(0%) translateY(0%);}
    #card_added_alert.off{transform: translateX(0%) translateY(0%);}
}

@media screen and (max-width: 600px) {
    .flexR.myfav_btn_bar .flexC div img {
        display: block;
        margin: auto;
    }
}