@charset "utf-8";

.tab_view {
    display:none;
}
.tab_view.active {
    display:block;
}


/* 사이트 소개 */
#introduction {
    border:1px solid #8E8E8E;
    padding:50px;
    display:flex;
    flex-direction:column;
    gap:30px;
}
#introduction .introduction_text {
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:20px;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150" fill="none"%3E%3Ccircle cx="75" cy="75" r="75" fill="url(%23paint0_radial_252_1716)"/%3E%3Cdefs%3E%3CradialGradient id="paint0_radial_252_1716" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(75 75) rotate(90) scale(75)"%3E%3Cstop stop-color="%23FFE6EC"/%3E%3Cstop offset="1" stop-color="white"/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position:center center;
}
#introduction .introduction_text p {
    font-size:1.22rem;
    font-weight:300;
    letter-spacing:-0.66px;
    line-height:normal;
    font-family: "S-Core Dream";
}
#introduction .introduction_text span {
    font-size:1.22rem;
    font-weight:500;
    letter-spacing:-0.66px;
    line-height:normal;
    font-family: "S-Core Dream";
}

#introduction .introduction_round_wrap {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:100px
}
#introduction .introduction_round_wrap .round_box {
    width:240px;
    display:flex;
    flex-direction:column;
    gap:30px;
}
#introduction .introduction_round_wrap .round_box .round {
    width:100%;
    height:240px;
    border-radius:50%;
    border-style: solid;
    border-width: 5px;
    border-color: #774C9E;
    border-image-slice: 0;
    background-origin: border-box;
    background-clip: content-box, border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    position: relative;
}
#introduction .introduction_round_wrap .round_box .round .round_ti {
    font-size:1.11rem;
    font-weight:600;
    letter-spacing:-0.6px;
    line-height:normal;
}
#introduction .introduction_round_wrap .round_box .round_co {
    font-size:0.88rem;
    font-weight:400;
    line-height:normal;
    letter-spacing:-0.48px;
    text-align:center;
}

#introduction .introduction_round_wrap .round_box01 .round {
    border-image-source: linear-gradient(to top, #982e4d, #774C9E);
    background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to top, #982e4d, #774C9E);
}
#introduction .introduction_round_wrap .round_box02 .round {
    border-image-source: linear-gradient(to top, #774C9E, #4463AE);
    background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to top, #774C9E, #4463AE);
}
#introduction .introduction_round_wrap .round_box03  .round {
    border-image-source: linear-gradient(to top, #4463AE, #3FBCBB);
    background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to top, #4463AE, #3FBCBB);
}

#introduction .introduction_round_wrap .round_box01 .round::before,
#introduction .introduction_round_wrap .round_box02 .round::after {
    content:'';
    width:10px;
    height:10px;
    background-color:#CACACA;
    border-radius:50%;
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
}
#introduction .introduction_round_wrap .round_box01 .round::after {
    content:'';
    width:70px;
    height:1px;
    background-color:#CACACA;
    position:absolute;
    right:-90px;
    top:50%;
    transform:translateY(-50%);
}
#introduction .introduction_round_wrap .round_box02 .round::before,
#introduction .introduction_round_wrap .round_box03 .round::before {
    content:'';
    width:10px;
    height:10px;
    background-color:#CACACA;
    border-radius:50%;
    position:absolute;
    left:-20px;
    top:50%;
    transform:translateY(-50%);
}
#introduction .introduction_round_wrap .round_box03 .round::after {
    content:'';
    width:70px;
    height:1px;
    background-color:#CACACA;
    position:absolute;
    left:-90px;
    top:50%;
    transform:translateY(-50%);
}


/* 통합회원 안내 */
#membership {
    display:flex;
    flex-direction:column;
    gap:80px;
}
#membership .membership_box {
    border:1px solid #8E8E8E;
    position: relative;
    display:flex;
    flex-direction:column;
    gap:30px;
}
#membership .membership_box::before {
    content:'';
    width:1px;
    height:80px;
    background-color:#8E8E8E;
    position:absolute;
    left:50%;
    bottom:-80px;
    transform:translateX(-50%);
}
#membership > div:nth-child(3)::before,
#membership > div:last-child::before {
    display:none;
}
#membership .membership_box .membership_title {
    background-color:#222;
    max-width:200px;
    width:96%;
    margin:auto;
    padding:7px 5px;
}
#membership .membership_box .membership_title p {
    font-size:1.11rem;
    font-weight:600;
    letter-spacing:-0.6px;
    color:#fff;
    text-align:center;
}



#membership .membership_target .target_title {
    font-size:1.22rem;
    font-weight:300;
    line-height:normal;
    letter-spacing:-0.66px;
    font-family: "S-Core Dream";
    text-align:center;
}
#membership .membership_target .target_title span {
    font-weight:500;
}
#membership .membership_target .target_wrap {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:30px;
}
#membership .membership_target .target_wrap ul {
    padding:5px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    border-bottom:1px solid #8E8E8E;
    width:150px;
}
#membership .membership_target .target_wrap .target_ti {
    font-size:1.11rem;
    font-weight:600;
    line-height:120%;
    letter-spacing:-0.6px;
}
#membership .membership_target .target_wrap .target_co {
    font-size:0.88rem;
    font-weight:400;
    line-height:120%;
    letter-spacing:-0.48px;
}
#membership .membership_target .target_img {
    width:80%;
    max-width:600px;
    margin:auto;
}




#membership .membership_process {
    padding-bottom:50px;
    padding-left:50px;
    padding-right:50px;
}
#membership .membership_process .process_sroll_wrapper {
    position: relative;
}
#membership .membership_process .process_wrap {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:20px;

}
#membership .membership_process .process_wrap .process {
    flex:1;
    max-width:220px;
}
#membership .membership_process .process_wrap .process .process_icon {
    width:120px;
    height:120px;
    background-color:#F6F4F6;
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
}
#membership .membership_process .process_wrap .process .process_num {
    width: 20px;
    height: 20px;
    background-color: #9A2C48;
    border-radius: 5px;
    font-size: 0.77rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.42px;
    position: relative;
    top: -10px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#membership .membership_process .process_wrap .process .process_text {
    display:flex;
    flex-direction:column;
    gap:10px;
}
#membership .membership_process .process_wrap .process .process_text .process_ti {
    font-size:1rem;
    font-weight:600;
    line-height:normal;
    letter-spacing:-0.54px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}
#membership .membership_process .process_wrap .process .process_text .process_ti a {
    padding:3px 5px;
    background-color:#9A2C48;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.77rem;
    font-weight:700;
    letter-spacing:-0.42px;
    color:#fff;
    line-height:normal;
    width:fit-content;
}
#membership .membership_process .process_wrap .process .process_text .process_co {
    font-size:0.88rem;
    font-weight:400;
    letter-spacing:-0.48px;
    line-height:normal;
    text-align:center;
}
#membership .membership_process .process_wrap .process_arrow {
    align-self:center;
}





#membership .membership_power {
    padding-bottom:50px;
    padding-left:50px;
    padding-right:50px;
}
#membership .membership_power .power_wrap {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:30px;
}
#membership .membership_power .power_wrap .power {
    flex:1;
    max-width:250px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
#membership .membership_power .power_wrap .power .power_who {
    background-color:#F6F4F6;
    padding:15px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}
#membership .membership_power .power_wrap .power .power_who .who_ti {
    font-size:1.11rem;
    font-weight:600;
    line-height:120%;
    letter-spacing:-0.6px;
    text-align:center;
}
#membership .membership_power .power_wrap .power .power_who .who_co {
    font-size:0.88rem;
    font-weight:400;
    line-height:120%;
    letter-spacing:-0.48px;
    text-align:center;
}
#membership .membership_power .power_wrap .power .power_list {
    display: flex;
    flex-direction:column;
    gap:3px;
}
#membership .membership_power .power_wrap .power .power_list p {
    font-size:1rem;
    font-weight:400;
    letter-spacing:-0.54px;
}


#membership .membership_info {
    display:flex;
    flex-direction:column;
    gap:10px;
    position: relative;
    padding:50px 100px;
}
#membership .membership_info::after {
    content:'';
    width:150%;
    height:100%;
    background-color:#F6F4F6;
    border-radius:80px 0px 0px 80px;;
    position:absolute;
    right:-50%;
    top:0;
    z-index:-1;
}
#membership .membership_info p {
    font-size:1rem;
    font-weight:400;
    letter-spacing:-0.54px;
    line-height:normal;
    padding-top:3px;
    padding-bottom: 3px;
}






/* ********************* */
/* 반응형 미디어쿼리 css */
@media (max-width:1440px) {
    #introduction .introduction_round_wrap .round_box {
        width:200px;
    }
    #introduction .introduction_round_wrap .round_box .round {
        height:200px;
    }


    #membership .membership_process .process_wrap .process .process_icon {
        width:100px;
        height:100px;
    }
    #membership .membership_process .process_wrap .process .process_icon svg {
        width:50px;
        height:50px;
    }
}
@media (max-width:1200px) {
    #membership .membership_process {
        padding-left: 30px;
        padding-right: 30px;
    }
    #membership .membership_process .process_wrap {
        gap:10px;
    }
    #membership .membership_process .process_wrap .process .process_icon {
        width:80px;
        height:80px;
        border-radius:20px;
    }

    #membership .membership_power {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (max-width:1024px) {}
@media (max-width:991px) {
    
    #introduction .introduction_round_wrap {
        gap:50px;
    }
    #introduction .introduction_round_wrap .round_box {
        width:170px;
    }
    #introduction .introduction_round_wrap .round_box .round {
        height:170px;
    }
    #introduction .introduction_round_wrap .round_box01 .round::after {
        width:40px;
        right:-50px;
    }
    #introduction .introduction_round_wrap .round_box03 .round::after {
        width:40px;
        left:-50px;
    }



    #membership .process_scroll {
        overflow-x:scroll;
        padding-bottom:10px;
    }
    #membership .membership_process .process_wrap {
        width:1024px;
    }
 

    .shadow-left:before,
    .shadow-right:after {
        content:'';
        width: 20px;
        height:100%;
        position:absolute;
        top:0;
    }
    .shadow-left:before {
        left:0;
        background: rgb(255,255,255);
        background: linear-gradient(270deg, rgba(255,255,255,0.5) 0%, rgba(222,222,222,1) 100%);
    }
    .shadow-right:after {
        right: 0;   
        background: rgb(255,255,255);
        background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(222,222,222,1) 100%);
    }
    
    #membership .membership_info {
        padding:50px;
    }
}
@media (max-width:768px) {
    #introduction {
        padding:30px;
    }
    #introduction .introduction_round_wrap {
        flex-direction:column;
        gap:30px;
    }
    #introduction .introduction_round_wrap .round_box {
        width:100%;
        flex-direction: row;
        align-items: center;
    }
    #introduction .introduction_round_wrap .round_box .round {
        width:200px;
        height:100px;
        border-radius:30px;
    }
    #introduction .introduction_round_wrap .round_box .round .round_ti {
        font-size:1rem;
    }
    #introduction .introduction_round_wrap .round_box .round_co {
        flex:1;
    }

    #introduction .introduction_round_wrap .round_box01 .round::before,
    #introduction .introduction_round_wrap .round_box01 .round::after,
    #introduction .introduction_round_wrap .round_box02 .round::before,
    #introduction .introduction_round_wrap .round_box02 .round::after,
    #introduction .introduction_round_wrap .round_box03 .round::before,
    #introduction .introduction_round_wrap .round_box03 .round::after {
        display:none;
    }


    #membership .membership_process .process_wrap {
        width:991px;
    }

}
@media (max-width:640px) {
    #introduction .introduction_text p,
    #introduction .introduction_text span {
        font-size:1.11rem;
    }
    #introduction .introduction_text span br {
        display:none;
    }
    #introduction .introduction_round_wrap .round_box {
        flex-direction:column;
        gap: 15px;
    }
    #introduction .introduction_round_wrap .round_box .round {
        width: 100%;
        height: 70px;
        border-radius: 20px;
    }


    #membership .membership_target .target_wrap {
        gap:20px;
        flex-direction:column;
        align-items:center;
    }
    #membership .membership_process .process_wrap {
        width:768px;
    }
    #membership .membership_process .process_wrap .process .process_text .process_ti {
        flex-direction:column;
    }
    #membership .membership_power .power_wrap {
        gap:20px;
        flex-direction:column;
    }
    #membership .membership_power .power_wrap .power {
        max-width:100%;
    }
    #membership .membership_info {
        padding:50px 30px;
    }
}
@media (max-width:480px) {
    #membership .membership_process .process_wrap {
        width:640px;
    }
}
@media (max-width:320px) {}