@charset "utf-8";

/* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap');
.Poppins {font-family: 'Poppins', sans-serif !important;}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.Nex_lv2 {font-family: 'NEXON Lv2 Gothic' !important;}

/* reset */
@media all {
    html {font-size: 10px;}
    .clear:after { 
        content:""; 
        display:block; 
        clear:both;
    }
    * { margin:0; padding:0; outline:none; box-sizing:border-box;}
    body {
        line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'NEXON Lv2 Gothic' !important; word-wrap: break-word; word-break: keep-all;
        background:#191e3c;
        /* height: auto; */
    }

    body::before {
        content:''; position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: url(../img/mobile/body_bg.jpg) no-repeat 10% top / cover;
        z-index: -1;
    }

    /* font-family: 'Noto Sans KR', sans-serif !important; */
    h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'NEXON Lv2 Gothic' !important; line-height:1; font-size: 1em; }
    ul, ol { list-style:none; margin:0; padding: 0; }
    a { outline:0; text-decoration:none; color: #000; font-family: 'NEXON Lv2 Gothic' !important; }
    a:focus { outline:none; }
    figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
    img { border:none; outline:none; max-width: 100%; }
    p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
    button, input, submit { border: none; background: none; }
    dt { font-weight: normal; }
    ::placeholder { font-family: 'NEXON Lv2 Gothic' !important; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        box-shadow: none !important;
        -webkit-text-fill-color: none !important;
    }

    /* rem 설정 */
    @media (max-width:991px) {
        html { font-size: 9px; }
    }
    @media (max-width:768px) {
        html { font-size: 7px; }
    }
    @media (max-width:580px) {
        html { font-size: 5px; }
    }
    
    @media (max-width:480px) {
        html { font-size: 3.5px; }
    }
    
    @media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
    html { font-size: 8px; }
    }
    @media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
    html { font-size: 7.5px; }
    }
    @media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
    html { font-size: 6.5px; }
    }
}

:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1300;

	--main-color : #5e2bb8; /* mainColor */
    --basic-border-color: #5e2bb8;	/* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */
    --form-height: 110;

    --em-Logo : min(calc(10 / 992 * 100vw), 10px);

    /* 가입 및 로그인페이지 패딩 */
    --register-margin: 20rem 50px;
}

.containerV1 {padding: 0 max(15px, 4rem);}

/* 텍스트 줄처리 */
.ellipsis {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------------------------- */



/* 헤더 -------------------------------------------------------------------- */
#header {
    position: relative; z-index: 1000; height: max(50px, 12rem);
    display: flex; align-items: end; justify-content: space-between; padding: 0 max(15px, 4rem);
}

#header #logo a {font-size: max(20px, 6rem); color: #fff; font-weight: 600; letter-spacing: 2px;}

#hd_wrapper {display: flex; align-items: center; gap: 4.2rem;}

#header #user_btn img {width: 5.5rem;}
#header #gnb_open img {width: 5.6rem;}
#header #gnb_open, #header #user_btn {
    position: relative; top: unset; left: unset; right: unset; padding: 0;
    width: auto; height: auto; 
}


/* 헤더 끝-------------------------------------------------------------------- */


/* 인덱스 시작-------------------------------------------------------------------- */
#wrapper {height: 100%;}

#index {margin-top: max(60px, 9rem);}
#container .title-V1 {font-size: max(20px, 4.5rem); font-weight: 500; color: #fff; line-height: 1.2; margin-bottom: 5rem;}
#index .sec .slideBox {overflow: hidden;}


/* sec1 */
#index .sec1 {padding-bottom: max(60px, 12rem);}


/* sec2 */
#index .sec2 {padding-bottom: max(60px, 9.5rem);}


/* sec3 */
#index .sec3 {padding-bottom: max(60px, 10rem);}

/* 인덱스 끝-------------------------------------------------------------------- */

/* 테일 -------------------------------------------------------------------- */
#footer {
    position: fixed; bottom: 0; left: 0; width: 100%; background: #0f1225;
    border-radius: 90px 90px 0 0; padding: 3.6rem 4rem 2rem;
    box-shadow: 0 0 41px -22px #8265ff; z-index: 1000;
}
#footer .nav {display: flex; justify-content: space-around; align-items: center; gap: 20px;}
#footer .nav .link_item {
    display: flex; flex-direction: column;
    align-items: center; gap: 2rem;
}

#footer .nav .link_item p {
    font-size: max(15px, 3rem); line-height: 1.2; text-align: center;
    color: #fff;
}

#footer .nav .quick_home .link_item img {width: 6rem;}
#footer .nav .quick_msg .link_item img {width: 5.1rem;}
#footer .nav .quick_tuner .link_item img {width: 5rem;}
#footer .nav .quick_lib .link_item img {width: 5.9rem;}


/* 알림 들어온 것 확인 */
#footer .nav .quick_msg .link_item {position: relative;}
#footer .nav .quick_msg .link_item .msg_check {
    content:''; position: absolute; top: -1rem; right: -1rem;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: #8265ff;
}


@media (max-width: 680px) {
   #footer {border-radius: 60px 60px 0 0 ;} 
}

@media (max-width: 480px) {
    #footer {border-radius: 40px 40px 0 0 ;} 
}

/* 테일 끝 -------------------------------------------------------------------- */


/* 서브페이지 */

#container {padding-bottom: 30rem !important; min-width: 250px;}
#container_title.fixed {z-index: 1000;}



/* 인덱스 외 로고 */
#main_logo {
    font-size: var(--em-Logo) !important;
    display: flex; flex-direction: column; align-items: center; gap: 4.6em; margin-bottom: 12em;
}
#main_logo img {width: 21.7em;}
#main_logo span {font-size: 6.5em; color: #fff; line-height: 1.2; font-weight: 300;}


/*@@@ 로그인 ------------------------------------------------------------------------------------------*/
#mb_login {padding: var(--register-margin);}


/* 로그인 폼 */
#flogin {width: 100%; max-width: 800px; margin: 0 auto;}
/* #mb_login #login_frm {} */
#mb_login .frm_input {
    background: transparent; border-radius: 60px; height: 12.3rem;
    border: 1px solid rgba(255,255,255,1); padding: 5px 7.3rem;
    font-size: 3.5rem; color: #fff;
}
#mb_login .frm_input::placeholder {color: #fff;}
#mb_login .frm_input#login_id {margin-bottom: 7.8rem;}

/* 로그인 실패 시 텍스트 */
#mb_login .login_fail_txt {
    font-size: 3.5rem; color: #ff5f6b; font-weight: 400;
    border: none; padding: 15px 0; display: none;
}


/* 자동로그인 */
#mb_login #login_info {
    margin-top: 12rem; display: flex; gap: 15px;
    justify-content: space-between; align-items: center;
    flex-wrap: wrap;
}
#mb_login #login_info > div > * {color: #fff; font-size: 3.5rem;}
#mb_login #login_info label {padding-left: 7rem !important;}
#mb_login .chk_box input[type="checkbox"] + label span {
    width: 5.4rem; height: 5.4rem; top: 50%; left: 0; transform: translateY(-50%);
    background: none; border: none; border-radius: unset; cursor: pointer;
    background: url('../img/mobile/auto_check_icon.png') no-repeat center center / cover;
}

#mb_login .chk_box input[type="checkbox"]:checked + label span {
    background: url('../img/mobile/auto_check_icon_active.png') no-repeat center center / cover;
}

/* 로그인 버튼 */
#mb_login .btn_submit {
    margin-top: 6.6rem;
    width: 100%; border-radius: 120px; height: 15rem; background: #02082d;
    color: #fff; font-size: 4.5rem; font-weight: 400; letter-spacing: 2px;
    padding: 0;
}

/* sns */
#mb_login #sns_login {margin: 8.4rem 0 7rem; border: none;}
#mb_login #sns_login .sns-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 4.5rem;
}
#mb_login #sns_login .sns-icon {width: 12rem; height: 12rem; padding-left: 0; border-radius: 50%; margin: 0;}
#mb_login #sns_login .sns-icon .ico {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

#mb_login #sns_login .sns-naver .ico svg {width: 85%; height: 85%;}
#mb_login #sns_login .sns-kakao .ico svg {width: 60%; height: 60%;}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right: 0 !important;}

#mb_login .social_text {color: #fff; font-size: 3.5rem; font-weight: 400; cursor: default;}
.mb_login_join {margin-top: 23rem;}
#mb_login .memeber_sb_box {
    display: flex; align-items: center; max-width: 600px; 
    margin: 0 auto; justify-content: space-between; gap: 4rem;
}
#mb_login .mb_login_join a {
    width: auto !important; float: unset !important; color: #fff !important; cursor: pointer;
    display: flex; justify-content: center; align-items: center; gap: 10px;
}

/* 로그인 끝------------------------------------------------------------------------------------------*/



/* 회원가입------------------------------------------------------------------------------------------*/

.submit_btn {
    width: 100%; max-width: 80rem; margin: 0 auto;
    height: 15rem; color: #fff; font-size: max(15px, 4.5rem); font-weight: 500;
    text-align: center; background: #02072d; border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
}

.page-title {
    text-align: center; font-size: max(15px, 4.5rem) !important; 
    color: #fff; font-weight: 500; padding-bottom: 0 !important;
    margin-bottom: 10rem;
}

.register_form {margin: 12rem 0 0;}
.register_form .titleBox {color: #fff; margin-bottom: 7.5rem;}
.register_form .titleBox > h3 {font-size: max(16px, 6rem); font-weight: 500; line-height: 1.4; color: inherit; margin-bottom: 1.5rem;}
.register_form .titleBox > h3 small {font-size: 0.59em;}
.register_form .titleBox > p {font-size: max(14px, 3.5rem); color: inherit; line-height: 1.3;}


/* 약관동의 --------------------------------------------------------- */
.mbskin {padding: var(--register-margin);}
.mbskin #main_logo {margin-bottom: 5.5em;}
.mbskin .page-title {margin-bottom: 7rem;}
.mbskin .fre_title {
    font-size: max(15px, 4.5rem) !important; font-weight: 500; line-height: 1.2 !important; color: #fff;
    padding-bottom: 0 !important;
}
.mbskin .check_wrap {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem;
}


#fregister .fre_container {
    padding: 2.7rem 0 3.5rem;
    border: 1px solid #959595;
    border-left: none;
    border-right: none;
    margin-bottom: 8rem;
}

/* 텍스트상자 */
#fregister .fre_textBox {
    background: #ad9aff; border-radius: 30px;
    padding: 5rem 3.5rem 4.5rem; margin-bottom: 8rem;
}

/* 전체동의 */
#fregister .fre_textBox p {
    font-size: max(14px, 3.5rem); color: #fff;
    line-height: 1.4; border-bottom: none;
    text-align: left; padding-bottom: 0;
}

#fregister_chkall {background: transparent !important; border: none !important; padding: 0 !important;}
#fregister_chkall label {
    font-size: max(15px, 4rem); color: #fff; line-height: 1.2;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

.fregister_agree input[type="checkbox"] + label span,
#fregister_chkall .fregister_agree.chk_all input[type="checkbox"] + label span {
    position: relative !important; top: unset !important; right: unset !important; order: 2;
    width: max(20px, 5rem) !important; height: max(20px, 5rem) !important; border-radius: 10px !important;
    border: 2px solid #959595 !important;
}
.fregister_agree input[type="checkbox"]:checked + label span,
#fregister_chkall .fregister_agree input[type="checkbox"]:checked + label span {
    background:url('../img/chk.png') no-repeat 50% 50% var(--main-color) !important;
    border-color:#1471f6;border-radius:3px;
}

@media (max-width: 600px) {
    .fregister_agree input[type="checkbox"] + label span,
    #fregister_chkall .fregister_agree.chk_all input[type="checkbox"] + label span {
        border-radius: 5px !important;
    }

    #fregister .fre_textBox {border-radius: 20px;}
}


/* 약관동의 */
#fregister_term textarea {
    border: none !important; resize: none; min-height: 49.7rem;
    font-size: max(14px, 3.5rem); color: #fff !important;
    line-height: 1.4; border-bottom: none;
    text-align: left; padding-bottom: 0;
}

/* 개인정보수집동의 */
#fregister_private {margin-bottom: 10rem;}
#fregister_private .fre_textBox {padding: 0; overflow: hidden;}
#fregister_private .fre_textBox table {
    --border: 1px solid #fff;
    font-size: max(14px, 3.5rem); color: #fff;
}
#fregister_private .tbl_head01 thead th {
    border: none !important;
    border-bottom: var(--border) !important; background: #8468ff;
    padding: 4rem 10px !important;
    font-size: 1em; color: inherit !important; font-weight: normal !important;
}
#fregister_private .tbl_head01 thead tr:last-child th:first-child {border-right:  var(--border) !important;}
#fregister_private .tbl_head01 td {
    border: var(--border) !important; border-left: none !important; border-right: none !important;
    padding: 2.2rem 5px 2.2rem 3rem;
}
#fregister_private .tbl_head01 tbody tr:first-child td {border-top: none !important;}
#fregister_private .tbl_head01 tbody tr:not(:first-child, :nth-child(3)) td:first-child {border-right:  var(--border) !important;}
#fregister_private .tbl_head01 tbody tr:last-child td {border-bottom: none !important;}


/* 약관동의창 소셜로그인  */
.sns_register_mob {margin-top: 15rem;}
.sns_register_mob #sns_register {border: none; background: transparent;}
.sns_register_mob .page-title {text-align: left; padding: 0 !important; border-bottom: unset !important; margin-bottom: 4.5rem;}
.sns_register_mob .sns-wrap {display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 4rem;}
.sns_register_mob #sns_register .sns-icon {
    float: unset !important; 
    padding-left: 0 !important; margin: 0 !important;
    display: flex !important; height: 12rem !important;
    
    border-radius: 100px;
    justify-content: center; align-items: center;
    font-size: max(15px, 4rem);  gap: max(5px, 1rem);
}
.sns_register_mob #sns_register .txt {padding: 0 !important; border: none !important;}

.sns_register_mob #sns_register .sns-naver {background-color: #03cf5d !important; color: #fff;}
.sns_register_mob #sns_register .sns-naver .ico {
    width: 4rem; height: 4rem; background: url(../img/mobile/naver_icon.png) no-repeat center center / cover;
}

.sns_register_mob #sns_register .sns-kakao {background-color: #fae100 !important; color: #371c1d;}
.sns_register_mob #sns_register .sns-kakao .ico {
    width: 4.9rem; height: 4.5rem; background: url(../img/mobile/kakao_icon.png) no-repeat center center / cover;
}

/* 약관동의 끝 --------------------------------------------------------- */




/* 회원가입 입력폼 or 수정 --------------------------------------------*/

.register {padding: var(--register-margin);}
.register #main_logo {margin-bottom: 5.5em;}

/* 입력폼 */
.register #fregisterform {width: 100%; max-width: 80rem; margin: 0 auto;}
.register .form_01 > ul li {margin: 0 0 5.5rem !important;}
.register .form_01 .frm_input {
    border: 2px solid #fff !important;
    height: 12.3rem !important;
    background: transparent !important;
    border-radius: 100px;
    padding: 0 7rem;
    color: #fff; font-size: max(14px, 3.5rem);
}
.register .form_01 .frm_input::placeholder {color: inherit;}

/* 가입 or 수정하기 버튼 */
#fregisterform .btn_confirm {display: flex; align-items: center; gap: 1.8rem;}



/* 회원가입폼 or 수정 끝 --------------------------------------------*/

/* 회원탈퇴, 수정  --------------------------------------------*/
#mb_confirm .fmemberconfirm {width: 100%; max-width: 80rem; margin: 0 auto;}
#mb_confirm fieldset > ul li {margin: 0 0 5.5rem !important;}
#mb_confirm .frm_input {
    border: 2px solid #fff !important;
    height: 12.3rem !important;
    background: transparent !important;
    border-radius: 100px;
    padding: 0 7rem;
    color: #fff; font-size: max(14px, 3.5rem);
}
#mb_confirm .frm_input::placeholder {color: inherit;}

/* 가입 or 수정하기 버튼 */
#mb_confirm .btn_confirm {display: flex; align-items: center; gap: 1.8rem;}

#mb_confirm .submit_btn {font-size: max(15px, 4.5rem) !important; cursor: pointer;}


/* 회원탈퇴, 수정 끝 --------------------------------------------*/



/* 선호 장르선택 --------------------------------------------*/

/* 체크박스 상자 */
#genre_form .check_list {
    --check_radius: 40px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4.5rem;
    margin-bottom: 13rem;
}
#genre_form .check_list > li {
    position: relative;
    border-radius: var(--check_radius); overflow: hidden;
}
#genre_form .check_list > li > img {width: 100%;}

#genre_form .check_list > li > .check_unit {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s; z-index: 2;
}

#genre_form .check_list > li label input {position: absolute; top: 0; left: 0; display: none;}

/* label */
#genre_form .check_list > li label {
    display: block; width: 100%; height: 100%; cursor: pointer; position: relative;
    z-index: 1;
}
#genre_form .check_list > li label::after {
    content:''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border-radius: var(--check_radius);
    z-index: 2; border: 0.8rem solid #5832f6;
}

#genre_form .check_list > li label > .border-box {
    opacity: 0; visibility: hidden;
    position: absolute; top: 0; left: 0; font-size: 15rem;
    display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.8);
    width: 100%; height: 100%; z-index: 2; border-radius: 20px; color: var(--main-color);
}


/* 체크박스 클릭시 */
#genre_form .check_list > li label > input[type='checkbox']:checked + .border-box {opacity: 1; visibility: visible;}


@media (max-width: 768px) {
    #genre_form .check_list {--check_radius: 30px;}
}

@media (max-width: 450px) {
    #genre_form .check_list {--check_radius: 20px;}
}

/* 선호 장르선택 끝--------------------------------------------*/



/* 연주 경력 --------------------------------------------*/
#career_form .radio_list {width: 100%; max-width: 80rem; margin: 0 auto min(calc(500 / 1080 * 100vw), 500px);}
#career_form .radio_list > li {
    border-radius: 100px; position: relative;
    width: 100%;
}
#career_form .radio_list > li:not(:last-child) {margin-bottom: 3rem;}
#career_form .radio_list > li > * {position: relative; z-index: 2;}

/* 테두리 */
#career_form .radio_list > li::before {
    content:''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border-radius: inherit;

    border: max(2px, 0.5rem)  solid transparent;
    background-image: linear-gradient(#02072d, #02072d),
    linear-gradient(to right, #5a33fe 0%,  #37287d 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

#career_form .radio_list > li input {display: none;}

#career_form .radio_list > li label {
    display: flex; gap: 1.8rem; align-items: center;
    padding: 5.2rem 15px 5.2rem 5.2rem;
}

#career_form .radio_list > li label .check_icon {
    --check-size: 4.5rem;
    background: #fff; border-radius: 50%; width: var(--check-size); height: var(--check-size);
    display: inline-block; position: relative;
}
#career_form .radio_list > li label .check_icon::before {
    content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50%; height: 50%; background: #fff; border-radius: inherit; z-index: 1;
}

#career_form .radio_list > li label .check_icon > i {
    color: #5933fe; font-size: var(--check-size); line-height: var(--check-size); opacity: 0; text-align: center;
    position: relative; z-index: 2;
}

#career_form .radio_list > li label input[type='radio']:checked + .check_icon {background: transparent;}
#career_form .radio_list > li label input[type='radio']:checked + .check_icon > i {opacity: 1;}

#career_form .radio_list > li label > p {
    color: #fff; font-size: max(15px, 4.5rem); font-weight: 500;
    line-height: 1.2;
}

/* 연주 경력 끝--------------------------------------------*/



/* 가입완료--------------------------------------------*/
#reg_result {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: end;
}

#reg_result::before {
    content:''; position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    background: url(../img/mobile/result_bg.png) no-repeat top center / cover;
}

#reg_result .result_box {position: relative; z-index: 2; text-align: center;}

#reg_result .reg_result_wr {color: #fff;}
#reg_result .reg_result_wr > h4 {font-size: max(14px, 3.5rem); color: inherit; margin-bottom: 1em; font-weight: 500; line-height: 1.3;}
#reg_result .reg_result_wr > h2 {font-size: max(18px, 5.5rem); color: inherit; font-weight: bold; line-height: 1.4;}

#reg_result .btn_confirm {margin: 7.5rem 0 7rem;}
#reg_result .btn_confirm a {
    width: 100%; max-width: 80rem; height: 15rem; margin: 0 auto; 
    display: flex; align-items: center; justify-content: center;
    background: #02072d; border-radius: 100px; color: #fff;
    font-size: max(16px, 4.5rem); font-weight: 600; letter-spacing: 1px;
}



/* 가입완료 끝----------------------------------------*/


/* 회원가입 끝------------------------------------------------------------------------------------------*/



/*@@@ 마이페이지 ------------------------------------------------------------------------------------------*/

/* 페이지 공용 wrrapper head */
#container_title {
    background: transparent; margin-top: 5rem; border: none; box-shadow: none; color: #fff;
    font-size: max(18px, 4.5rem); font-weight: 400; height: auto; line-height: 1.2; padding: 0;
    display: flex; align-items: center; gap: 8.6rem;
}
#container_title a {color: inherit;}
#container_title a img {width: max(10px, 2.3rem);}

/* 마이페이지 본문 */
#smb_my {margin-top: 13rem;}
#smb_my_ov {background: transparent;}
#smb_my_ov .smb_my_ov_title {
    font-size: max(18px, 4.5rem); font-weight: 600; color: #fff; line-height: 1.2;
    margin-bottom: 1em; letter-spacing: 2px;
}
#smb_my_ov .my_name {background: inherit; padding: 0 max(10px, 2rem); border: none;}
#smb_my_ov .my_name .member_name {
    font-size: max(18px, 4.5rem); font-weight: 300; color: #fff; line-height: 1.4;
    display: flex; align-items: center; justify-content: space-between;
}

#smb_my_ov .my_name a.mp_btn {
    font-size: max(16px, 3.5rem); line-height: 1.2;
    color: #413de4;
}


#smb_my_ov .smb_my_act {
    position: relative; right: unset; top: unset; margin-top: 2rem; width: 100%;
    margin-bottom: 7rem;
}
#smb_my_ov .smb_my_act li {
    font-size: max(16px, 3.5rem); line-height: 1.2; font-weight: 400; color: #fff;
    display: block;
}
#smb_my_ov .smb_my_act li:last-child {margin-top: 4rem;}
#smb_my_ov .setting_list > li:not(:last-child) {margin-bottom: 5rem;}
#smb_my_ov .setting_list > li a {
    font-size: max(16px, 3.5rem); line-height: 1.2;  color: #fff;
    font-weight: 600; display: flex; align-items: center; gap: 5rem;
}
#smb_my_ov .setting_list > li a img {width: max(8px, 1.8rem); position: relative; bottom: 1px;}

/* 관리자일때 버튼 스타일 조정 */
a.btn_admin {font-size: 1em;}


/* 마이페이지 끝 ------------------------------------------------------------------------------------------*/



/*@@@ 악보검색창 ------------------------------------------------------------------------------------------*/

#sch_res_detail {margin: 6.6rem 0 8.2rem;}

/* 검색창 */
#sch_res_detail .search_switch {
    display: flex; align-items: center; gap: 5rem;
    margin: 0 0 4.5rem auto; width: fit-content; color: #fff;
}
#sch_res_detail .search_switch > div input[type='checkbox'] {display: none;}
#sch_res_detail .search_switch label {
    font-size: max(14px, 3.5rem); display: flex; align-items: center; gap: max(10px, 1.5rem);
}
#sch_res_detail .search_switch .check_icon {
    --check-size: 4rem;
    background: #fff; border-radius: 50%; width: var(--check-size); height: var(--check-size);
    display: inline-block; position: relative;
}
#sch_res_detail .search_switch .check_icon::before {
    content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50%; height: 50%; background: #fff; border-radius: inherit; z-index: 1;
}

#sch_res_detail .search_switch .check_icon > i {
    color: #5933fe; font-size: var(--check-size); line-height: var(--check-size); opacity: 0; text-align: center;
    position: relative; z-index: 2;
}

#sch_res_detail .search_switch > div input[type='checkbox']:checked + label .check_icon {background: transparent;}
#sch_res_detail .search_switch > div input[type='checkbox']:checked + label .check_icon > i {opacity: 1;}

#sch_res_detail .frm_input_box {position: relative;}
#sch_res_detail .frm_input {
    height: 15rem; border-radius: 100px;
    color: #000; font-size: max(14px, 3.5rem);
    padding: 5px 6rem;
}
#sch_res_detail .frm_input::placeholder {color: #a0a0a0;}
#sch_res_detail .btn_submit {
    position: absolute; top: 45%; right: 6rem;
    transform: translateY(-50%); color: #9b9b9b;
    font-size: 5rem; background: transparent;
}

/* 인기검색어 */
#sch_res_detail .hot-keyword {
    margin-top: 5.5rem; width: 100%; 
}

#sch_res_detail .hot-keyword ul {
    display: flex; align-items: center;
    gap: 2rem; flex-wrap: wrap; justify-content: center;
}

#sch_res_detail .hot-keyword ul > li {
    background: #5933fe;
    border-radius: 100px; display: flex; align-items: center; justify-content: center;
    padding: 1.4rem 4.5rem 1rem; text-align: center; cursor: pointer;
}
#sch_res_detail .hot-keyword ul > li span {color: #fff; font-size: max(14px, 3.5rem);}

/* 하단 리스트 */
.title_bar {display: flex; justify-content: space-between; align-items: center; margin-bottom: 5rem;}
.title_bar .title-V1 {margin-bottom: 0 !important;}
.title_bar .select-box {position: relative;}
.title_bar .select-box > i {
    color: #fff; font-size: 3rem; position: absolute; top: 50%; right: 0;
    transform: translateY(-50%); z-index: 1;
}
.title_bar .select-box select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;

    font-size: 3.5rem; color: #fff; width: 15.5rem;
    position: relative; z-index: 2;
}

/* 악보검색창 끝 ------------------------------------------------------------------------------------------*/