@charset "utf-8";

/*********** 모바일 ***********/
.m_logo {padding: 15px 0 15px 15px; display: none;}
.m_logo img {width: 100px; height: auto;}
.m_search {display: block; position: absolute; top: 50%; right: 15px; transform: translate(-50% , -50%); z-index: 1;}
.m_search.on {display: none; opacity: 0;}
.m_search h2 img {width: 24px; height: 24px;}

/*********** 헤더 ***********/
header {height: 66px; background-color: #fff;}
header.active {height: 100vh;}
.header.down {transition: 0.1s;}
.header.on {display: none;}
.header {position: relative; top: 0%; width: 100%; z-index: 4; background-color: #fff; transition: 0.5s; -webkit-transition: 0.5s; box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%); border-bottom: 1px solid #eee;}
.header .logo {position: absolute; left: 0%; top: 34px; transform: translate(0% , -50%);}
.header .logo a img {transition: 0.5s; -webkit-transition: 0.5s;}
.header .logo a .logo_w {display: none;}
.header .logo a .logo_w.down {display: block;}
.header .logo a .logo_b.down {display: none; width: 50px; height: 50x;}
.header .logo a img.down {width: 50px; height: 50x;}
.beta_text {position: absolute; top: 25px; right: -28px; color: #999; font-size: 10px;}

/* GNB */
.header .gnb > ul {text-align: left; padding-left: 120px;}
.header .gnb > ul > li {position: relative; display: inline-block; vertical-align: middle; font-weight: bold;}
.header .gnb > ul > li > a {display: inline-block; padding: 25px 0 25px 25px;}
.header .gnb > ul > li > a:hover {color: #ef4d4d;}
.header .gnb > ul > li > a.active {color: #ef4d4d;}

.gnb_contest {position: absolute; right: 0; bottom: 10px; display: none;}
.gnb_contest.active {display: block;}
.gnb_contest a {display: inline-block; border-bottom: 1px solid #666666;}
.gnb_contest a span {color: #666666; font-size: 14px;}

/* GNB DEPTH2 */
.stock_depth ul {display: none;}
.contest_depth ul {display: none;}
.matching_depth ul {display: none;}
.contest_depth ul.active {opacity: 1;}

.gnb_depth2 ul {padding-left: 145px; width: 100%;}
.gnb_depth2 ul.active {display: block;}
.gnb_depth2 ul li {display: inline-block; padding: 0px 25px 13px 0;}
.gnb_depth2 ul li a {color: #999; font-size: 13px; box-sizing: border-box; transition: 0.5s;} 
.gnb_depth2 ul li a:hover {color: #333; transition: 0.3s; font-weight: bold;}
.gnb_depth2 ul li a.active {font-size: 14px; padding-bottom: 9px; border-bottom: 2px solid #000; color: #333; font-weight: bold; transition: 0.5s;}

.header .login_box {display: none; position: absolute; top: 35px; right: 0%; transform: translate(0 , -50%);}
.header .login_box.active {display: block;}
.header .login_box .login_btn {
    padding: 10px 16px; 
    border-radius: 33px; 
    border: 1px solid #ddd; 
    background-color: #fff; 
    color: #333; 
    display: inline-block; 
    font-size: 13px; 
    position: relative; 
    font-weight: bold; 
    transition: 0.2s; 
    -ms-transition: 0.2s; 
    -webkit-transition: 0.2s; 
    -o-transition: 0.5s; 
    -moz-transition: 0.2s;
    margin-left: 5px;
}
.header .login_box .login_btn:hover {background-color: #ef4d4d; color: #fff;}
.header .login_box .login_btn.down {transition: 0.3s;}

.header .user_box {display: none; position: absolute; right: 1%; top: 28%;}
.header .user_box.active {display: block;}
.header .user_box .img_box  {cursor: pointer; overflow: hidden; display: inline-block; vertical-align: middle; border: 1px solid #eee; border-radius: 50%; width: 32px; height: 32px;}
.header .user_box .img_box .user_img {width: 100%; height: 100%; object-fit: cover;}

.header .user_box .nick_box {cursor: pointer; display: inline-block; padding-left: 5px;}
.header .user_box .nick_box span {font-size: 11px; font-weight: bold;}
.header .user_box .nick_box span em {font-size: 13px;}

.header .user_box .user_id {vertical-align: middle; font-size: 14px; font-weight: bold;}

.other_box {display: inline-block; vertical-align: middle; margin-right: 20px;}
.other_box ul li {position: relative; display: inline-block; vertical-align: middle; margin-left: 20px;}
.other_num {position: absolute; right: 0; width: 8px; height: 8px; background-color: #ef4d4d; border-radius: 50%;}
.other_num1 {top: 0px; display: none;}
.other_num2 {top: 3px; display: none;}

.main_btn_box {display: inline-block; vertical-align: middle;}
.main_btn_box a {cursor: pointer; margin-left: 3px; padding: 10px 16px; border-radius: 33px; background-color: #ef4d4d; color: #fff; display: inline-block; font-size: 13px; position: relative; font-weight: bold;}

.user_info {position: absolute; right: 0%; top: 40px; z-index: 999; background-color: #fff; box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%); color: #999; border-radius: 15px;}
.user_info1 {display: none; width: 250px;}
.user_info1 .user_container ul li {text-align: left; border-top: 1px solid #eee; transition: 0.3s;}
.user_info1 .user_container ul li:first-child {padding: 25px 25px; text-align: left; border-top: 1px solid #eee; transition: 0.3s;}
.user_info1 .user_container ul li:hover a {color: #333; font-weight: bold;}
.user_info1 .user_container ul li a {color: #999; font-size: 14px; height: 60px; display: block; line-height: 60px; padding-left: 30px;}
.user_info1 .user_container ul li:last-child a {color: #ef4d4d;}

.user_info1 .user_container ul li .user_img_box {display: inline-block; margin-top: 3px; border: 2px solid #eee; border-radius: 50%;  vertical-align: middle; width: 35px; height: 35px; overflow: hidden ;} 
.user_info1 .user_container ul li .user_img_box img {width: 100%; height: 100%;}

.user_info1 .user_container ul li .name_box {margin-left: 8px; display: inline-block; vertical-align: middle;}
.user_info1 .user_container ul li .name_box .user_name {font-size: 14px; font-weight: bold; margin-left: 3px;} 
.user_info1 .user_container ul li .name_box .user_type {box-sizing: border-box; margin-bottom: 5px; display: inline-block; font-size: 12px; padding: 4px 8px; background-color: #FBF4F4; color: #ef4d4d; border-radius: 5px;}
.user_info1 .user_container ul li .name_box .user_type em {letter-spacing: 0px;}

.user_info2 {width: 275px; display: none;}
.user_info2 .info_top {box-sizing: border-box; padding: 15px 15px; border-bottom: 1px solid #eee;}
.user_info2 .info_top::after {content: ''; clear: both; height: 0; visibility: hidden; height: 0; display: block;}

.user_info2 .info_top .top_left {float: left; text-align: left; display: inline-block; vertical-align: middle;}
.user_info2 .info_top .top_left span {font-size: 13px;}
.user_info2 .info_top .top_left span em {color: #ef4d4d;}

.user_info2 .info_top .top_right {float: right; margin-bottom: 3px; text-align: right; display: inline-block; vertical-align: middle;}
.user_info2 .info_top .top_right a {font-size: 11px; color: #ef4d4d; padding: 7px 15px; background-color: #fbf4f4; border-radius: 50px;}

.user_info2 .info_middle {position: relative; height: 330px; overflow-y: auto;}
.user_info2 .info_middle::-webkit-scrollbar {display: none;}

.user_info2 .info_middle ul li {position: relative; border-bottom: 1px solid #eee; padding: 15px 15px;}
.user_info2 .info_middle ul li .middle_box span {font-size: 12px; font-weight: bold; color: #ef4d4d;}
.user_info2 .info_middle ul li .middle_box h2 {width: 98%; font-size: 12px; color: #333; margin: 8px 0 5px 0; -webkit-line-clamp: 1; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden;}
.user_info2 .info_middle ul li .middle_box p {width: 98%; color: #999; font-size: 11px; -webkit-line-clamp: 1; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden;}
.user_info2 .info_middle ul li .alarm_date {position: absolute; right: 15px; top: 15px;}
.user_info2 .info_middle ul li .alarm_date span {font-size: 11px; color: #999;}

.user_info2 .info_bottom {padding: 20px 0; text-align: center;}
.user_info2 .info_bottom a {display: inline-block; position: relative; color: #999; font-size: 12px; padding: 7px 23px 7px 12px; border-radius: 50px; border: 1px solid #eee;}
.user_info2 .info_bottom a::before {content: ''; position: absolute; background-image: url(/img/right_arr3.png); width: 15px; height: 100%; background-repeat: no-repeat; top: 8px; right: 3px;}

.alarm_bg {display: none; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.alarm_bg h2 {text-align: center;}
.alarm_bg h3 {font-size: 12px; text-align: center; padding-top: 10px;}

/*********** 헤더 신청 버튼 ***********/
.landing_art_btn {background-color: #333 !important;}
.landing_art_btn.active {display: none;}
.landing_cli_btn {}

/*********** 푸터 ***********/
.footer {background-color: #F9F9F9; height: 280px;}
.footer .top_box {position: relative;}
.footer .top_box:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}

.footer .top_box .footer_logo {padding-bottom: 20px;}

.footer .top_box .sns_box {float: right;}
.footer .top_box .sns_box::after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
.footer .top_box .sns_box ul {float: right;}
.footer .top_box .sns_box ul li {display: inline-block; vertical-align:top; margin-right: 15px; padding-top: 20px; padding-bottom: 20px;}
.footer .top_box .sns_box ul li:nth-child(4) {margin-right: 0px;}
.footer .top_box .sns_box ul li a {display: block; opacity: 1; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.footer .top_box .sns_box ul li a:hover {opacity: 0.7;}
.footer .top_box .sns_box ul li a img {width: 27px;}

.footer .top_box .left_box {position: absolute; top: 40px;}
.footer .top_box .left_box ul li {display: inline-block; vertical-align: top; padding-right: 40px;}
.footer .top_box .left_box ul li h2 {font-size: 12px; font-weight: bold; padding-bottom: 20px; color: #999;}
.footer .top_box .left_box ul li p {font-size: 12px; color: #999; padding-bottom: 13px;}
.footer .top_box .left_box ul li p b {font-weight: bold;}
.footer .top_box .left_box ul li p span:nth-child(2) {padding-left: 10px;}

.footer .bot_box{position: relative;}
.footer .bot_box:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
.footer .bot_box .left_box {float: left; padding-right: 30px;}
.footer .bot_box .left_box h3 img {width: 70px;}

.footer .bot_box .right_box {float: left; padding-top: 25px;}
.footer .bot_box .right_box ul {padding-top: 5px;}
.footer .bot_box .right_box ul li {position: relative; display: inline-block; vertical-align: top; margin-right: 20px; color: rgb(153, 153, 153); line-height: 1.3; font-size: 12px;}
.footer .bot_box .right_box ul li:before {content: ''; position: absolute; right: -12px; top: 4px; width: 1px; height: 9px; background: rgb(153, 153, 153);}
.footer .bot_box .right_box ul li:last-child:before {display: none;}
.footer .bot_box .right_box ul li a {display: block; color: rgb(153, 153, 153); font-size: 12px; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.footer .bot_box .right_box ul li a:hover {display: block; color: #999; font-size: 12px; opacity: 0.7; }
.footer .bot_box .right_box .top_btn {opacity: 1; color: rgb(245, 244, 244); position: absolute; right: 0; top: 30%; border: 1px solid #fff; padding: 20px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: bold; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.footer .bot_box .right_box .top_btn:hover {opacity: 0.7;}
.footer .bot_box .right_box .top_btn img {width: 27px;}
.footer .bot_box .copy p {padding-top: 5px; color: rgb(153, 153, 153); font-size: 12px; padding-left: 3px;}

/*********** 모바일 메뉴 ***********/
.m_inner {position: relative; padding: 0 15px; box-sizing: border-box; height: 100%;}
.menu_popup {position: fixed; z-index: 5; width: 100%; height: 100%; background-color: #f4f4f4; display: none; overflow-y: auto;}
.menu_popup.active {display: block;}
.m_menu_top {background-color: #fff; height: 90px; position: relative;}
.m_menu_top .top_left {position: absolute; top: 50%; left: 15px; transform: translate(0% , -50%);}
.m_menu_top .top_left .img_box {position: relative; display: inline-block; vertical-align: middle; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #f4f4f4;}
.m_menu_top .top_left .img_box img {width: 100%; height: 100%; border-radius: 50px;}
.m_menu_top .top_left .profile_btn {position: absolute; bottom: -5px; right: 0px;}
.m_menu_top .top_left .profile_btn label img {width: 25px; height: 25px; opacity: 80%; transition: 0.3s;}
.m_menu_top .top_left.profile_btn label img:hover {opacity: 100%;}
.m_menu_top .top_left .profile_btn input {display: none;}
.m_menu_top .top_left p {display: inline-block; vertical-align: middle; padding-left: 10px; font-weight: bold; font-size: 14px;} 
.m_menu_top .top_right {position: absolute; top: 50%; right: 15px; transform: translate(0% , -50%);}

.m_menu_middle {margin-top: 10px; background-color: #fff; padding: 16px 0;}
.m_menu_middle h2 {font-weight: bold; font-size: 16px; padding-bottom: 16px;}
.m_menu_middle ul li a {display: block; width: 100%; padding: 16px 0;}

.m_menu_bottom .logout_btn {display: none;}
.m_menu_bottom .logout_btn.on {display: block;}
.m_menu_bottom .m_login_btn.on {display: none;}

.m_menu_bottom {margin-top: 10px; background-color: #fff; padding: 16px 0;}
.m_menu_bottom h2 {font-weight: bold; font-size: 16px; padding-bottom: 16px;}
.m_menu_bottom ul li a {display: block; width: 100%; padding: 16px 0;}
.m_menu_bottom ul li:last-child a {color: #999;}

.m_footer {padding-top: 36px;}
.m_footer_top h2 {font-weight: bold; color: #999; font-size: 13px; padding-bottom: 20px;}
.m_footer_top p {font-size: 13px; color: #999; font-weight: bold; padding-bottom: 16px;}
.m_footer_top b {font-weight: lighter;}

.m_footer_middle {padding-top: 30px; display: none;}
.m_footer_middle h2 {font-size: 14px; color: #999; font-weight: bold; padding-bottom: 20px; text-align: left;}
.m_footer_middle::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.m_footer_middle .middle_left {float: left; width: 160px;}
.m_footer_middle .middle_right {float: left; width: 160px;}

.m_footer_middle ul li {padding-bottom: 16px;}
.m_footer_middle ul li a {color: #999; font-size: 12px; }

.m_footer_middle2 .sns_box::after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
.m_footer_middle2 .sns_box ul li {display: inline-block; vertical-align:top; margin-right: 15px; padding-top: 20px; padding-bottom: 20px;}
.m_footer_middle2 .sns_box ul li:nth-child(4) {margin-right: 0px;}
.m_footer_middle2 .sns_box ul li a {display: block; opacity: 1; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.m_footer_middle2 .sns_box ul li a:hover {opacity: 0.7;}
.m_footer_middle2 .sns_box ul li a img {width: 27px;}
 
.m_footer_bottom .right_box {padding-bottom: 150px;}
.m_footer_bottom .right_box ul li {position: relative; display: inline-block; vertical-align: top; margin-right: 20px; color: rgb(153, 153, 153); line-height: 1.3; font-size: 12px;}
.m_footer_bottom .right_box ul li:before {content: ''; position: absolute; right: -12px; top: 4px; width: 1px; height: 9px; background: rgb(153, 153, 153);}
.m_footer_bottom .right_box ul li:last-child:before {display: none;}
.m_footer_bottom .right_box ul li a {display: block; color: rgb(153, 153, 153); font-size: 12px; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.m_footer_bottom .right_box ul li a:hover {display: block; color: #ddd; font-size: 12px; opacity: 0.7; }
.m_footer_bottom .right_box .top_btn {opacity: 1; color: rgb(245, 244, 244); position: absolute; right: 0; top: 30%; border: 1px solid #fff; padding: 20px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: bold; transition: 0.5s; -ms-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s;}
.m_footer_bottom .right_box .top_btn:hover {opacity: 0.7;}
.m_footer_bottom .right_box .top_btn img {width: 27px;}
.m_footer_bottom .copy p {padding-top: 5px; color: rgb(153, 153, 153); font-size: 12px; padding-left: 3px;}

.m_partner_box {box-sizing: border-box; padding: 15px 15px;}
.m_partner_box a {position: relative; display: block; width: 100%; background-color: #000; border-radius: 10px;}
.m_partner_box a .text_box {box-sizing: border-box; padding: 24px 24px;}
.m_partner_box a .text_box h3 {color: #fff; font-weight: bold;}
.m_partner_box a .text_box h3 span {
    background: linear-gradient(90.97deg, #F46A6A 0.05%, #C676FF 98.62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.m_partner_box a .text_box p {padding-top: 8px; font-size: 12px; color: #fff;}

.m_partner_box a .img_box {position: absolute; right: 0; top: 50%; transform: translate(0% , -50%);}
.m_partner_box a .img_box img {}

/*********** 모바일 검색하기 팝업 ***********/
.search_popup {display: none; text-align: center; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #ffffff; z-index: 999; box-sizing: border-box; padding-top: 15px;}
.search_popup.on {display: block;}
.search_popup .left_box {width: calc(100% - 40px); display: inline-block; vertical-align: middle;}
.search_popup .m_browse_box {position: relative; width: 100%;} 
.search_popup .m_browse_form {width: 100%; box-sizing: border-box;}
.search_popup .m_browse_form .box_left {position: absolute; top: 50%; left: 10px; transform: translate(0% , -50%);}
.search_popup .m_browse_form .box_right input {
    width: 100% !important; 
    border: 1px solid #eee !important; 
    padding-left: 35px !important; 
    height: 40px !important; 
    line-height: 40px; 
    vertical-align: middle;
    border-radius: 5px; 
    background-color: #fff;
}

.search_popup .right_box {display: inline-block; vertical-align: middle;}
.search_popup .right_box span {font-size: 13px; padding-left: 10px; color: #999;}

.search_popup .m_search_box {padding-top: 20px; padding-left: 13px}
.search_popup .m_search_box ul {text-align: left;}
.search_popup .m_search_box ul li {padding-bottom: 20px; cursor: pointer;}
.search_popup .m_search_box ul li .box_left {display: inline-block; vertical-align: middle;}
.search_popup .m_search_box ul li .box_left img {width: 20px; height: 20px;}
.search_popup .m_search_box ul li .box_right {display: inline-block; vertical-align: top;}
.search_popup .m_search_box ul li .box_right span {font-size: 12px; color: #999; padding-left: 5px;}

/*********** 모바일 VER2 ***********/
.type_state {display: none;}
.m_menu_btn {display: none; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.m_my_btn {display: none; border-top: 1px solid #eee; background-color: #FBF4F4;}
.m_my_btn.active {display: block;}

.m_pro_btn {display: none; border-bottom: 1px solid #eee; background-color: #FBF4F4;}
.m_pro_btn.active {display: block;}
.m_pro_btn a {color: #ef4d4d; font-weight: bold;}

.m_logout_btn {display: none;}
.m_logout_btn.active {display: block;}
.m_logout_btn a {color: #999;}

.mobile_alarm_btn {display: none; position: relative;}
.mobile_alarm_btn.active {display: block;}

.m_alarm_circle {display: none; position: absolute; top: 0; right: -3px; width: 6px; height: 6px; background-color: #ef4d4d; border-radius: 50%;}
.m_alarm_circle.active {display: inline-block;}

.m_nav_box {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 999;}
.m_nav_box.active {display: block; overflow-y: auto;}

.m_nav_top {position: relative; width: 100%; border-bottom: 1px solid #ddd;}
.m_nav_top .top_left {}
.m_nav_top .top_right {position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
.m_nav_top .top_right ul {display: flex; align-items: center;}
.m_nav_top .top_right ul li {padding-left: 20px;}

.m_nav_middle {box-sizing: border-box; padding: 15px 15px; width: 100%;}
.m_login_btn2 {display: block;}
.m_login_btn2.active {display: none;}
.m_login_btn2 a {display: block; color: #ef4d4d; text-align: center; padding: 18px 0; font-weight: bold; border: 1px solid #ef4d4d; border-radius: 5px;}
.m_call_btn {margin-top: 10px;}
.m_call_btn a {display: block; color: #fff; text-align: center; padding: 18px 0; font-weight: bold; border: 1px solid #ef4d4d; border-radius: 5px; background-color: #ef4d4d;}
.cate_box ul li
.m_nav_bottom {padding: 20px 0 80px 0;}
.m_nav_bottom ul > .m_nav_item {box-sizing: border-box;}
.m_nav_bottom ul .m_nav_item > a {position: relative; font-weight: bold; display: block; padding: 15px 15px;}
.m_nav_bottom ul .m_nav_item > .m_arr_btn::before {
    content: '';
    background-image: url(/img/down_arr.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    transition: 0.3s;
}
.m_nav_bottom ul .m_nav_item > .m_arr_btn.active::before {
    transform: translateY(-50%) rotate(180deg);
    transition: 0.3s;
}

.m_nav_contest a {font-weight: normal !important; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}

.m_nav_bottom .m_submenu {display: none; background-color: #F4F4F4;}
.m_nav_bottom .m_submenu li a {box-sizing: border-box; padding: 20px 15px; display: block;}
.m_nav_bottom .m_submenu li:hover a {color: #999;}
.m_nav_bottom .m_submenu li a {font-weight: bold;}

.m_info_box {display: none; padding: 8px 0 0 0;}
.m_info_box.active {display: block;}
.m_info_box .m_info_top {position: relative; width: 100%;}
.m_info_box .m_info_top a {display: flex; align-items: center;}

.m_info_arr {position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}

.m_info_left .img_box {position: relative; display: inline-block; vertical-align: middle; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #f4f4f4;}
.m_info_left .img_box img {width: 100%; height: 100%; border-radius: 50px; object-fit: cover;}
.m_info_left .profile_btn {position: absolute; bottom: -5px; right: 0px;}
.m_info_left .profile_btn label img {width: 25px; height: 25px; opacity: 80%; transition: 0.3s;}
.m_info_left .profile_btn label img:hover {opacity: 100%;}
.m_info_left .profile_btn input {display: none;}

.m_info_right {padding-left: 20px;}
.m_info_right .m_nav_type span {
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 1px;
    padding: 4px 8px;
    background-color: #FBF4F4;
    color: #ef4d4d;
    font-weight: bold;
    border-radius: 5px;
    font-size: 12px;
}
.m_info_right .m_nav_nick {padding: 8px 0;}
.m_info_right .m_nav_nick p {    
    font-size: 16px;
    font-weight: bold;
}
.m_info_right .m_nav_date {}
.m_info_right .m_nav_date span {
    font-size: 13px;
    color: #999;
    position: relative;
    padding-left: 20px;
}
.m_info_right .m_nav_date span::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    background: url(/img/j_date.png);
    width: 16px;
    height: 16px;
}

.m_info_box .m_info_middle {padding-top: 12px;}
.m_info_box .m_info_middle a {display: inline-block; display: block; text-align: center; border: 1px solid #dbdbdb; padding: 10px 0; border-radius: 5px;}
.m_info_box .m_info_middle a span {width: 100%; height: 100%; font-size: 14px; position: relative; padding-left: 20px; color: #999;}
.m_info_box .m_info_middle a span:before{content: ''; position: absolute; top: 5px; left: 0; background: url(/img/change_icon.png); width: 16px ; height: 16px; background-repeat: no-repeat;}

.m_info_box .m_info_bottom {padding: 12px 0 2px 0;}
.m_info_box .m_info_bottom a {display: flex; align-items: center;}
.m_info_box .m_info_bottom img {padding-right: 2px;}
.m_info_box .m_info_bottom span {color: #999; font-size: 12px;}

.change_popup {position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: none;}
.change_popup.active {display: block;}
.change_popup_bg {background-color: rgb(0 0 0 / 0.6); width: 100%; height: 100%;}
.change_popup_box {position: relative; max-width: 288px; width: 100%; background-color: #fff; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.change_popup_inner {width: 100%; box-sizing: border-box; padding: 24px 24px;}
.change_popup_inner .change_popup_top {display: flex; align-items: center; padding-bottom: 18px ; border-bottom: 1px solid #eee;}
.change_popup_inner .change_popup_top img {}
.change_popup_inner .change_popup_top span {padding-left: 3px; font-size: 14px; font-weight: bold;}
.change_popup_inner .change_popup_middle {padding-top: 18px;}
.change_popup_inner .change_popup_middle ul {}
.change_popup_inner .change_popup_middle ul li {padding-bottom: 16px;}
.change_popup_inner .change_popup_middle ul li h2 {padding-bottom: 8px; font-size: 12px; font-weight: bold;}
.change_popup_inner .change_popup_middle ul li p {font-size: 12px; line-height: 1.4;}

.change_popup_close {position: absolute; top: 24px; right: 24px;}

/*********** 모바일 미디어쿼리 ***********/
@media screen and (max-width: 1200px){
    
    header {height: 46px;}
    .m_menu_btn {display: block;}
    .m_logo {display: block;}
    .m_menu {display: block;}
    .header_inner {display: none;}
    .mp_common {display: none;}

    .footer .top_box .sns_box ul {padding-top: 15px;}
    .footer .top_box .sns_box h3 {display: none}
    .footer .top_box .left_box ul li:nth-child(2) {display: none;}
    .footer .top_box .left_box ul li:nth-child(3) {display: none;}
    .footer .bot_box .right_box {padding-top: 95px}

    .footer .top_box .left_box ul li {display: flex; flex-direction: column;}
    .footer .inner {padding: 0 15px; box-sizing: border-box}
}

@media screen and (max-width: 480px){
    .m_partner_box a .img_box img {opacity: 50%; z-index: -1;}
}