/********** 해상도 **********/
@media screen and (max-width: 1912px) {.closet_tab_content {padding: 15px 9px;}}
@media screen and (max-width: 1908px) {.closet_tab_content {padding: 15px 8px;}}
@media screen and (max-width: 1901px) {.closet_tab_content {padding: 15px 7px;}}
@media screen and (max-width: 1893px) {.closet_tab_content {padding: 15px 6px;}}
@media screen and (max-width: 1885px) {.closet_tab_content {padding: 10px 5px;}}
@media screen and (max-width: 1878px) {.closet_tab_content {padding: 10px 4px;}}
@media screen and (max-width: 1870px) {.closet_tab_content {padding: 10px 3px;}}
@media screen and (max-width: 1862px) {
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 109px;}
    .closet_tab_content {padding: 10px 4px;}
}
@media screen and (max-width: 1859px) {
    #closet_container .container_bottom .box_side {width: 30%;}
    #closet_container .container_bottom .box_character {width: 69.4%;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(1) {margin: 0 0 2% 0;}
    #closet_container .container_bottom .box_closet {width: 100%; height: auto; flex-direction: column;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 100%; height: auto; min-height: 65px; margin: 5px 0; display: flex; flex-wrap: wrap;}
    .bg_btn, .cap_btn {margin: 5px;}
    #closet_container .container_bottom .box_closet .closet_content {width: 100%; margin: 0;}
}
@media screen and (max-width: 1706px) {
    #closet_container .container_bottom .box_side {width: 29.9%;}
}


/* 1600x1200 */
@media screen and (max-width: 1600px) {
    .fix-layout {display: flex; align-items: center; justify-content: center;}
    #closet_container .container_bottom .box_side {width: 16%; margin: 0 5px 0 0;}
    #closet_container .container_bottom .box_side .cha_card {height: 49.65%; padding: 15px;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(1) {margin: 0 0 2.5% 0;}
    #closet_container .container_bottom .box_side .cha_card .name {font-size: 1.8em; margin: 0;}
    #closet_container .container_bottom .box_character {width: 53.2%;}
    #closet_container .container_bottom .box_character .cha_box {width: 750px; height: 473px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 750px; height: auto;}
    #closet_container .container_bottom .box_character .cha_voice p {height: 40px; font-size: 1.4em;}
    #closet_container .container_bottom .box_closet {width: 30.15%; height: 100%; margin: 0 0 0 5px; flex-direction: inherit;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 80px; height: 100%; margin: 0; display: unset;}
    #closet_container .container_bottom .box_closet .closet_content {margin: 0 0 0 5px;}
    .bg_btn, .cap_btn {width: 50px; height: 50px; margin: 5px auto 0;}
    .cap_btn .material-symbols-outlined, 
    .bg_btn .material-symbols-outlined {font-size: 2.7em;}
    .closet_tab_content {padding: 10px 7px;}
    .barcode_btn {font-size: 3.5em;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 91px; height: 150px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 75px; height: 90px;}
}
@media screen and (max-width: 1593px) {.closet_tab_content {padding: 10px 6px;}}
@media screen and (max-width: 1596px) {.closet_tab_content {padding: 10px 5px;}}
@media screen and (max-width: 1583px) {
    #closet_container .container_bottom .box_side {width: 30%;}
    #closet_container .container_bottom .box_character {width: 69.65%;}
    #closet_container .container_bottom .box_character .cha_box {width: 900px; height: 568px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 900px;}
    #closet_container .container_bottom .box_closet {width: 100%; height: auto; flex-direction: column;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 100%; height: auto; min-height: 65px; margin: 5px 0; display: flex; flex-wrap: wrap;}
    .bg_btn, .cap_btn {margin: 5px;}
    #closet_container .container_bottom .box_closet .closet_content {width: 100%; margin: 0;}
    #closet_container .container_bottom .box_closet .closet_tab_footer {height: 80px;}
}
@media screen and (max-width: 1466px) {
    #closet_container .container_bottom .box_side {width: 29.9%;}
}


/* 1440x900 */
@media screen and (max-width: 1440px) {
    #closet_container .container_top {height: 60px;}
    #closet_container .container_bottom .box_side {width: 15.5%;}
    #closet_container .container_bottom .box_side .cha_card .name {font-size: 1.5em;}
    #closet_container .container_bottom .box_side .cha_card .birth {font-size: 2.5em;}
    #closet_container .container_bottom .box_character {width: 54%;}
    #closet_container .container_bottom .box_character .cha_box {width: 675px; height: 426px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 675px;}
    #closet_container .container_bottom .box_character .cha_voice p {height: 35px; font-size: 1.3em;}
    #closet_container .container_bottom .box_closet {width: 29.95%; height: 100%; padding: 0; margin: 0; flex-direction: inherit;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 60px; height: inherit; min-height: inherit; margin: 0; display: initial;}
    #closet_container .container_bottom .box_closet .closet_content {height: inherit; margin: 0 0 0 3px;}
    #closet_container .container_bottom .box_closet .closet_tab_footer {height: 10%;}
    .closet_tab_content {padding: 5px 3px;}
    .bg_btn,
    .cap_btn {width: 35px; height: 35px; margin: 5px auto 0;}
    .custom_btn {width: 35px; height: 35px;}
    .cap_btn .material-symbols-outlined, .bg_btn .material-symbols-outlined {font-size: 2em;}
    .custom_btn .material-symbols-outlined {font-size: 2em; line-height: 1.4;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 85px; height: 135px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 70px; height: 85px;}
    .m_c_t {margin: 0 auto !important;}
    .m_c_b {height: 90% !important;}
}
@media screen and (max-width: 1438px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 84.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 69px;}
}
@media screen and (max-width: 1431px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 84px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 69px;}
}
@media screen and (max-width: 1424px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 83.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 68px;}
}
@media screen and (max-width: 1417px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 83px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 68px;}
}
@media screen and (max-width: 1411px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 82.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 67px;}
}
@media screen and (max-width: 1404px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 82px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 67px;}
}
@media screen and (max-width: 1397px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 81.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 66px;}
}
@media screen and (max-width: 1390px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 81px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 66px;}
}
@media screen and (max-width: 1383px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 80.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 65px;}
}
@media screen and (max-width: 1387px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 80px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 65px;}
}
@media screen and (max-width: 1370px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 79.5px}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 64px;}
}


/* 1366x768 */
@media screen and (max-width: 1366px) {
    #closet_container .container_top {height: 55px;}
    #closet_container .container_bottom .box_side .cha_card .name {padding: 5px 0 7px; font-size: 1.4em;}
    #closet_container .container_bottom .box_character {width: 53.7%;}
    #closet_container .container_bottom .box_character .cha_box {width: 640px; height: 404px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 640px;}
    #closet_container .container_bottom .box_closet {width: 30.15%;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 55px;}
    .closet_tab_content {padding: 5px 3.5px;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 81px;}
    .m_c_t {width: 100% !important;}
    .m_c_b {width: 100% !important;}
}
@media screen and (max-width: 1365px) {.closet_tab_content {padding: 5px 3px;}}
@media screen and (max-width: 1362px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 80.5px; height: 134px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 65px; height: 84px;}
}
@media screen and (max-width: 1355px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 80px; height: 134px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 65px; height: 84px;}
}
@media screen and (max-width: 1348px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 79.5px; height: 133px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 63px; height: 83px;}
}
@media screen and (max-width: 1341px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 79px; height: 133px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 63px; height: 83px;}
}
@media screen and (max-width: 1335px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 78.5px; height: 132px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 62px; height: 82px;}
}
@media screen and (max-width: 1328px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 78px; height: 132px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 62px; height: 82px;}
}
@media screen and (max-width: 1321px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 77.5px; height: 131px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 61px; height: 81px;}
}
@media screen and (max-width: 1314px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 77px; height: 131px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 61px; height: 81px;}
}
@media screen and (max-width: 1308px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 76.5px; height: 130px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 60px; height: 80px;}
}
@media screen and (max-width: 1301px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 76px; height: 130px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 60px; height: 80px;}
}
@media screen and (max-width: 1294px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 75.5px; height: 129px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 59px; height: 79px;}
}
@media screen and (max-width: 1287px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 75px; height: 129px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 59px; height: 79px;}
}
@media screen and (max-width: 1281px) {
    .cloth_btn, .hair_btn, .acc_btn, .etc_btn {width: 74.5px; height: 128px;}
    .cloth_btn .c_b_img, .hair_btn .h_b_img, .acc_btn .a_b_img, .etc_btn .e_b_img {width: 58px; height: 78px;}
}


/* 1366x768 */
@media screen and (max-width: 1280px) {
    #closet_container .container_bottom .box_character .cha_box {width: 600px; height: 379px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 600px;}
    #closet_container .container_bottom .box_character .cha_voice p {height: 30px; font-size: 1.2em; line-height: 1.9;}
    #closet_container .container_bottom .box_closet .closet_content .closet_label {font-size: 1em;}
    .cloth_btn p, .hair_btn p, .acc_btn p, .etc_btn p {font-size: 0.8em;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {height: 115px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {height: 65px;}
}
@media screen and (max-width: 1274px) {
    #closet_container .container_bottom .box_side {width: 30%;}
    #closet_container .container_bottom .box_character {width: 69.4%;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(1) {margin: 0 0 2% 0;}
    #closet_container .container_bottom .box_closet {width: 100%; height: auto; flex-direction: column;}
    #closet_container .container_bottom .box_closet .bg_menu_list {width: 100%; height: auto; min-height: 50px; margin: 5px 0; display: flex; flex-wrap: wrap;}
    .bg_btn, .cap_btn {margin: 5px;}
    #closet_container .container_bottom .box_closet .closet_content {width: 100%; margin: 0;} 
    #closet_container .container_bottom .box_character .cha_box {width: 640px; height: 404px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 640px;}
}

/** 모바일 **/
@media screen and (max-width: 1024px) {
    html {overflow: auto;}
    #closet_container .container_bottom {height: auto; display: flex; flex-direction: column;}
    #closet_container .container_bottom .box_side {width: 100%; height: 400px; margin: 0 0 10px 0; display: flex;}
    #closet_container .container_bottom .box_side .cha_card {height: 100%; padding: 30px;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(1) {margin: 0 5px 0 0;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(2) {margin: 0 0 0 5px;}
    #closet_container .container_bottom .box_side .cha_card .name {font-size: 2em;}
    #closet_container .container_bottom .box_side .cha_card .birth {font-size: 3em;}
    #closet_container .container_bottom .box_character {width: 100%; height: 800px;}
    #closet_container .container_bottom .box_character .cha_box {width: 900px; height: 568px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 900px;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 104.7px; height: 160px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 85px; height: 98px;}
    .cloth_btn p, .hair_btn p, .acc_btn p, .etc_btn p {font-size: 1em;}
}
@media screen and (max-width: 960px) {
    #closet_container .container_bottom .box_character .cha_box {width: 800px; height: 505px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 800px;}
}
@media screen and (max-width: 860px) {
    #closet_container .container_bottom .box_character {height: 650px;}
    #closet_container .container_bottom .box_character .cha_box {width: 700px; height: 442px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 700px;}
}


@media screen and (max-width: 768px) {
    #closet_container .container_bottom .box_character {height: 630px;}
    #closet_container .container_bottom .box_character .cha_box {width: 650px; height: 410px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 650px;}
    #closet_container .container_bottom .box_closet .closet_tab_footer {font-size: 0.8em;}
    .second {width: 75%;}
}
@media screen and (max-width: 710px) {
    #closet_container .container_bottom .box_character {height: 550px;}
    #closet_container .container_bottom .box_character .cha_box {width: 550px; height: 347px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 550px;}
    #closet_container .container_bottom .box_character .cha_voice p {font-size: 1.1em;}
}
@media screen and (max-width: 610px) {
    #closet_container .container_top .co_middle {width: 200px;}
    #closet_container .container_bottom .box_character {height: 470px;}
    #closet_container .container_bottom .box_character .cha_box {width: 470px; height: 297px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 470px;}
    #closet_container .container_bottom .box_character .cha_voice p {height: 25px; font-size: 0.9em;}
}


@media screen and (max-width: 430px) {
    #closet_container .container_top {height: 50px;}
    #closet_container .container_top .co_middle {width: 100px;}
    #closet_container .container_top .co_middle div:nth-child(1),
    #closet_container .container_top .co_middle div:nth-child(2) {height: 50%;}
    .custom_btn {width: 30px; height: 30px;}
    .custom_btn .material-symbols-outlined {font-size: 1.7em;}
    #closet_container .container_bottom .box_side {height: 270px; margin: 0 0 5px 0;}
    #closet_container .container_bottom .box_side .cha_card {padding: 15px;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(1) {margin: 0 2px 0 0;}
    #closet_container .container_bottom .box_side .cha_card:nth-child(2) {margin: 0 0 0 2px;}
    #closet_container .container_bottom .box_side .cha_card .name {font-size: 1.5em;}
    #closet_container .container_bottom .box_side .cha_card .birth {font-size: 2.2em;}
    #closet_container .container_bottom .box_character {height: 370px;}
    #closet_container .container_bottom .box_character .cha_box {width: 350px; height: 221px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 350px;}
    #closet_container .container_bottom .box_character .cha_voice p {font-size: 0.7em; line-height: 2.5;}
    #closet_container .container_bottom .box_character .cha_voice p:nth-child(2) {margin: 5px 0 0 0;}
    #closet_container .container_bottom .box_closet .bg_menu_list {min-height: 40px;}
    .bg_btn, .cap_btn {margin: 2px;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 91px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 70px; height: 90px;}
    .first, .second {width: 90%;}
    .first input[type="text"], input[type="file"],
    .first select {width: 70%;}
    #file_box .file .label {font-size: 0.8em;}
}


@media screen and (max-width: 412px) {
    #closet_container .container_bottom .box_character .cha_box {width: 330px; height: 208px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 330px;}
    #closet_container .container_bottom .box_character .cha_voice p {font-size: 0.65em; line-height: 2.7;}
    .bg_btn, .cap_btn {margin: 2px;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 86.5px; height: 130px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 65px; height: 80px;}
    .cloth_btn p,
    .hair_btn p,
    .acc_btn p,
    .etc_btn p {
        font-size: 0.8em;
    }
}


@media screen and (max-width: 390px) {
    #closet_container .container_bottom .box_side {height: 250px;}
    #closet_container .container_bottom .box_character {height: 340px;}
    #closet_container .container_bottom .box_character .cha_box {width: 300px; height: 189px;}
    #closet_container .container_bottom .box_character .cha_voice {width: 300px;}
    #closet_container .container_bottom .box_character .cha_voice p {font-size: 0.6em; line-height: 2.9;}
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 81px; height: 120px;}
    .cloth_btn .c_b_img,
    .hair_btn .h_b_img,
    .acc_btn .a_b_img,
    .etc_btn .e_b_img {width: 60px; height: 75px; margin: 0 0 -5px 0;}
    .first input[type="text"], input[type="file"],
    .first select {width: 60%;}
    #file_box .file .label {font-size: 0.7em;}
}


@media screen and (max-width: 375px) {
    .cloth_btn,
    .hair_btn,
    .acc_btn,
    .etc_btn {width: 77px;}
    #closet_container .container_bottom .box_character .cha_voice p {font-size: 0.55em; line-height: 3.2}
}