@charset "utf-8";

/*
 * File : rwd-mypage.css
 * 회원가입, 마이페이지 반응형 css
 */



/* **************************************** *
* 860px
* **************************************** */
@media screen and (max-width: 860px) { 

    /* 회원가입 */
    .join_main .main_tit { font-size: 28px; }
    .join_main .join_title { margin: 0 auto 50px; }
    .join_main .join_title img { top: -22px; width: 50px }
    .join_main .btn_wrap .btn1 { max-width: 230px; font-size: 18px; }
    .join.wrap { padding-top: 120px; }

    /* 마이페이지 */
    .mypage_wrap { flex-wrap: wrap; gap: 40px }
    .snb_wrap_broker, .snb_wrap { width: 100%; }
    .snb_wrap::after { display: none; }
    .snb_list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
    .snb_wrap .snb_list li { margin:0; white-space: nowrap; font-size: 15px; width: auto; padding: 0 20px; height: 40px; display: flex; align-items: center; }
    .snb_wrap .menu_tit { font-size: 22px; margin-bottom: 20px; }
    .mypage_con { margin-left: 0; }
    .mypage_con .sub_tit2 { margin-bottom: 20px; }
    .mypage_con .content_box .btn_wrap2 .btn1 { font-size: 15px; width: 110px; }
    .mypage_con .content_box .num { font-size: 15px; width: 170px; }
    .mypage_con .content_box .price { font-size: 18px; }
    .mypage_con .content_box .img { height: 150px; }
    .mypage_con .content_box .apt_name { font-size: 20px; }
    .mypage_con .content_box .btn_wrap .btn1 { font-size: 15px; max-width: 100px; }

    .mypage_con.broker_mypage .top_col .btn_wrap3 .btn { font-size: 14px; white-space: nowrap; }
    .mypage_con.broker_mypage .top_col .search_wrap .search_input { min-width: 200px; }
    .mypage_con.broker_mypage .bot_con { flex-wrap: wrap; }
    .mypage_con.broker_mypage .bot_con select.apt_sel { max-width: 100%; }
    .mypage_con.broker_mypage .bot_con ul { margin-top : 10px; width: 100%; display: flex; justify-content: right; }
    .mypage_con .tit_col img { margin-bottom: 20px; }

    /*나의 매물*/
    .mypage_con .content_box .col2 { padding-right: 20px; }
    .mypage_con .content_box .type1 { font-size: 15px; width: 70px; height: 30px; line-height: 30px; }
    .mypage_con .content_box .type2 { font-size: 15px; width: 70px; height: 30px; line-height: 30px; }
    .mypage_con .content_box .type3 { font-size: 15px; width: 70px; height: 30px; line-height: 30px; }

}



/* **************************************** *
* 600px
* **************************************** */
@media screen and (max-width: 600px) { 

    /* 회원가입 - 메인 */
    .join_main.w800 { max-width: unset; width: 90%; } 
    .join_main .join_title { margin: 80px auto 60px; } 
    .join_main .join_title img { top: -35px; } 
    .join_main .main_tit { font-size: 3rem; } 
    .join_main .btn_wrap .btn1 { margin-right: 10px; height: 70px; font-size: 16px; } 

    /* 회원가입 - 중개사회원 */
    .join .btn_wrap .btn1 { margin-bottom: 100px; height: 60px; } 
    .join_broker .ranking { flex-direction: column; align-items: flex-start; margin-bottom: 20px; } 
    .join_broker .ranking .fl_right { align-items: center; justify-content: flex-start; flex-wrap: wrap; } 
    .join_broker .ranking .w100 { width: auto; margin-right: 20px; } 
    .join_broker .apt_content_wrap2 .rank_tit.re { margin-bottom: 10px; } 
    .join_broker .ranking:first-child .w100 { margin-right: 0; } 
    .join_broker .apt_select { margin-top: 10px; width: 100%; } 
    .join_broker .apt_content_wrap3 .sns_select { margin-right: 0; max-width: none; } 
    .join_broker .apt_content_wrap3 .sns_select:nth-child(2) { margin-bottom: 10px; } 

    /*마이페이지(일반회원)*/
    .mypage_wrap { flex-direction: column; justify-content: normal; align-items: center; } 
    .mo_snb { display: block; width: 100%; } 
    .snb_wrap_broker,
    .snb_wrap { display: none; } 
    .snb_wrap .snb_list li { width: 100%; justify-content: center; }

    .tab_snb_wrap_broker,
    .tab_snb_wrap { display: flex; flex-direction: column; width: 100%; } 
    .tab_snb_wrap_broker .snb_list,
    .tab_snb_wrap .snb_list { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } 
    .snb_wrap .sub_nav_on h2 { width: 100%; background-color: var(--red-color); color: var(--white-color); font-size: 18px; text-align: center; padding: 10px 0; margin-bottom: 10px; cursor: pointer; border: 2px solid var(--red-color); transition: border 0.3s; word-break: keep-all; background-image: url("../image/sub/arrow_bot.png"); background-repeat: no-repeat; background-position: right 20px center; } 
    .snb_wrap::after { display: none; } 
    .mypage_con .content_box .row { flex-direction: column; justify-content: normal; align-items: center; margin-top: 30px; } 
    .mypage_con .content_box .img { margin-bottom: 20px; } 
    .mypage_con .content_box .row .flex_bw { flex-direction: column; justify-content: normal; align-items: center; margin-left: 0; } 
    .mypage_con .content_box .col { align-items: center; justify-content: normal; width: 100%; } 
    .mypage_con .content_box .col2 { padding-right: 0; } 
    .mypage_con .content_box .btn_wrap .btn1 { max-width: 100%; } 
    .mypage_con .content_box .state { margin-bottom: 10px; } 
    .mypage_con .content_box .apt_name { text-align: center; margin-bottom: 10px; padding-top: 14px; overflow: unset; white-space: unset; text-overflow: unset; width: 100%; font-size: 1.6rem; } 
    .mypage_con .content_box .num { margin-bottom: 10px; } 
    .deco_line { width: 100%; height: 2px; margin: 20px 0; } 
    .mypage_con { margin-left: 0; margin-bottom: 40px; } 
    .mypage_con .content_box { padding: 15px; } 
    .mypage_con .content_box .count { width: 100%; position: unset; margin-top: 5px; } 
    .mypage_con .content_box .col3 { flex-direction: column; } 
    .mypage_con .content_box .state_wrap .state_list li { font-size: 4vw; margin-left: 4%; word-break: keep-all; } 
    .mypage_con .content_box .state_wrap .state_list li img { width: 8px; } 
    .mypage_con .content_box .col3 .btn3 { margin-top: 5px; width: 120px; font-size: 15px; } 
    .mypage_con .content_box .col3 .box_tit + div { width: 100%; text-align: center; margin-top: 10px; }

    /*나의 매물*/
    .mypage_con .apt_content_box:nth-child(2),
    .mypage_con .apt_content_box:nth-child(4),
    .mypage_con .apt_content_box:nth-child(6),
    .mypage_con .apt_content_box:nth-child(8) { margin-right: 0; } 
    .mypage_con .notice a { font-size: 3vw; } 

    /*회원정보*/
    .mypage_con .info_box .user_info tr td input.number { width: 100%; margin-right: 0; margin-bottom: 10px; } 
    .mypage_con .info_box .user_info tr td .tb_btn2 { margin-right: 10px; width: 40%; } 
    .mypage_con .info_box .user_info tr th { padding: 10px; word-break: keep-all; } 
    .mypage_con .info_box .agree { flex-direction: column; justify-content: normal}
    .mypage_con.broker_mypage .content_box .state_wrap .state_list li { margin-left: auto; height: 94px; } 
    .mypage_con.broker_mypage .conbox_wrap .count { width: auto; padding: 4px 20px; } 
    .mypage_con.broker_mypage .conbox_wrap .count { width: 100%; position: unset; } 
    .mypage_con.broker_mypage .content_box .state_red { margin-bottom: 20px; } 
    .mypage_con.broker_mypage .content_box .col4 { flex-direction: column; justify-content: normal; } 
    .mypage_con.broker_mypage .content_box .col4:nth-child(3) .col5 { margin-bottom: 10px; } 
    .mypage_con.broker_mypage .content_box .btn_wrap1 { flex-direction: column; } 
    .mypage_con.broker_mypage .content_box .btn_wrap1 .btn1 { margin-right: 0; margin-bottom: 10px; } 
    .mypage_con.broker_mypage .content_box .col4:nth-child(2) .col5 { flex-direction: column; justify-content: normal; } 
    .mypage_con .notice td.notice_txt { padding: 10px; font-size: 0; } 
    .mypage_con .content_box .btn_wrap { justify-content: center; } 
    .mypage_con.broker_mypage .top_col { flex-direction: column; justify-content: normal; } 
    .mypage_con.broker_mypage .top_col .search_wrap { margin-right: 0; } 
    .mypage_con.broker_mypage .top_col .btn_wrap3 { margin-top: 10px; width: 100%; } 
    .mypage_con.broker_mypage .top_col .btn_wrap3 .btn { height: 45px; max-width: none;width: 100%; margin-right: 10px; } 
    .mypage_con.broker_mypage .top_col .search_wrap .search_input { max-width: 480px; width: 100%; height: 50px; } 
    .mypage_con .notice td.date { font-size: 3vw; } 
    .mypage_con.broker_mypage .notice td button.print { width: 50px; height: 35px; font-size: 3vw; } 
    .mypage_con.broker_mypage .notice td.notice_txt { padding: 10px; } 
    .mypage_con.broker_mypage .notice td { padding: 10px; } 
    .mypage_con.broker_mypage .top_col .search_wrap .search_icon { min-width: 50px; height: 50px; } 

    .mypage_con.broker_mypage .detail_box .btn_wrap3 { width: 100%; flex-direction: column; align-items: flex-end; } 
    .mypage_con.broker_mypage .detail_box .btn_wrap3 .btn2 { height: 40px; max-width: 120px; width: 100%; } 
    .mypage_con.broker_mypage .detail_box .btn_wrap3 .btn {width: 100%; height: 40px; margin-bottom: 5px; margin-right: 0; } 
    .mypage_con.broker_mypage .detail_box .btn_wrap3 .btn1 { height: 50px; width: 140px; } 
    .mypage_con.broker_mypage .detail_box .btn_wrap3 .btn1_red { width: 140px; height: 50px; } 
    .mypage_con.broker_mypage .notice { width: 600px; } 
    .mypage_con.broker_mypage .bookmark td img.ic { width: 100%; } 
    .mypage_con.broker_mypage .bot_con { flex-direction: column; justify-content: normal; } 
    .mypage_con.broker_mypage .bot_con ul.line { margin-top: 10px; } 
    .mypage_con.broker_mypage .search_detail .search_col1 { flex-direction: column; align-items: flex-start; justify-content: normal; } 
    .mypage_con.broker_mypage .search_detail { flex-direction: column; justify-content: normal; } 
    .mypage_con.broker_mypage .search_detail { padding: 10px; width: 100%; } 
    .mypage_con.broker_mypage .search_detail .col_wrap { width: 100%; } 
    .mypage_con.broker_mypage .search_detail .search_btn { margin-top: 30px; } 
    .mypage_con.broker_mypage .search_detail .search_pc { display: none; } 
    .mypage_con.broker_mypage .search_detail .search_mo { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 100%; } 
    .mypage_con.broker_mypage .search_detail .search_mo p { font-size: 16px; font-weight: 600; color: var(--black-color); margin-right: 10px; margin-bottom: 5px; } 
    .mypage_con.broker_mypage .search_detail .search_col1 select.type { margin-bottom: 20px; } 
    .mypage_con.broker_mypage .search_detail .search_col3 { margin-top: 20px; margin-bottom: 0; flex-direction: column; align-items: flex-start; justify-content: normal; width: 100%; } 
    .mypage_con.broker_mypage .search_detail .search_col2 span { margin: 0 5px;width: 26px; } 
    .mypage_con.broker_mypage .search_detail .search_col2 span.w39 { min-width: 27px; } 
    .mypage_con.broker_mypage .search_detail input {font-size: 1rem; padding: 0 5px !important; } 
    .mypage_con.broker_mypage .search_detail .search_col2 input { width: 100%; } 
    .mypage_con.broker_mypage .search_detail p { margin-bottom: 5px; } 
    .mypage_con.broker_mypage .search_detail .search_col2_1 input { width: 100%; max-width: none; } 
    .mypage_con.broker_mypage .search_detail .search_col2 { width: 100%; } 
    .mypage_con.broker_mypage .search_detail .search_col2 .search_col2:first-child { width: 85%; } 
    .mypage_con.broker_mypage .search_detail .search_col1:first-child { width: 100%; margin-bottom: 0; } 

    /*내포인트*/
    .mypage_con.broker_mypage .notice2 { width: 100%; } 
    .mypage_con.broker_mypage .notice td { font-size: 3vw; } 

    /*프리미엄 클럽*/
    .mypage_con.broker_mypage .clubbtn_wrap .btn1 { width: 100%; margin-right: 0; margin-bottom: 10px; } 
    .mypage_con.broker_mypage .clubbtn_wrap .btn2 { width: 100%; } 
    .mypage_con.broker_mypage .img_wrap { height: 400px; } 
    .mypage_con.broker_mypage .coupon_wrap .input_wrap input { margin-right: 10px; } 

    .mypage_con.broker_mypage .notice tr.cancel td { padding: 10px; } 
    .mypage_con.broker_mypage .date_wrap { flex-direction: column; } 
    .mypage_con.broker_mypage .date_wrap button.search_bt { margin-left: 0; margin-top: 20px; width: 80%; } 
    .mypage_con.broker_mypage .date_wrap .data_in { width: 100%; justify-content: center; } 
    .mypage_con.broker_mypage .date_wrap input[type="text"].datepicker { width: 100%; max-width: none; font-size: 1.1rem; height: 40px; } 
    .mypage_con .info_box .user_info tr td .sel { margin-bottom: 10px; margin-right: 0; width: 100%; } 
    .mypage_con .info_box .user_info2 tr td.flex_bw { flex-direction: column; align-items: flex-start}
    .mypage_con .info_box .txt { margin-bottom: 10px; } 
    .mypage_con.join_broker .info_box .user_info tr td .tb_btn2 { width: 120px; } 
    .mypage_con .info_box .user_info2 tr td.flex_bw .tb_btn2 { margin-top: 10px; } 
    .mypage_con .info_box { margin-bottom: 60px; } 
    .mypage_con .info_box .pwbtn_wrap .pw_btn1 { font-size: 1.1rem; width: 110px; height: 35px; } 

}


/* **************************************** *
* 540px
* **************************************** */
@media screen and (max-width: 540px){

    /* 회원가입 */
    .join_main .main_tit { font-size: 24px; }
    .join_main .join_title { margin: 0 auto 40px; }
    .join_main .join_title img { left: 50px; }
    .join_main .btn_wrap { flex-wrap: wrap; }
    .join_main .btn_wrap .btn1 { max-width: 100%; margin-right: 0; margin-bottom: 10px; }

    .join.wrap { padding-top: 100px; }
    .join .apt_content_wrap { margin-top: 40px; }
    .join .bot_chk .policy_list li { font-size: 15px; }
    .join .bot_chk .policy_list li button.button1 { width: 60px; white-space: nowrap; }
    .join .apt_content_wrap .btn3 { font-size: 15px; width: 136px; white-space: nowrap; }
    .join .bot_chk .policy_list { margin-bottom: 60px; }
    .join .btn_wrap .btn2 { margin-bottom: 60px; }

    .join .apt_content_wrap3 input[type="text"], .join .apt_content_wrap input[type="text"], 
    .join .apt_content_wrap input[type="number"], .join .apt_content_wrap input[type="password"] { height: 46px; padding: 0 12px; }
    .filebox label { margin-top: 10px; }
    .join_broker .apt_content_wrap3 .profile .img_wrap { flex-wrap: wrap; }

    /* 마이페이지 */
    .snb_list { gap: 8px; }
    .mypage_con .apt_content_box { width: 100%; }
    .mypage_wrap { gap: 30px; }
    .mypage_con .content_box .btn_wrap2 { flex-direction: row; gap: 10px; }
    
    .mypage_con.broker_mypage .txt_wrap h1 { font-size: 27px; }
    .mypage_con .info_box .user_info2 tr { display: flex; flex-direction: column; }
    .mypage_con .info_box .user_info tr td { padding: 10px; }

}



/* **************************************** *
* 360px
* **************************************** */
@media screen and (max-width: 360px){

    .mypage_con .apt_content_box .img { height: 180px; } 
    .mypage_con .info_box .txt { font-size: 1.4rem; margin-bottom: 10px; } 
    .mypage_con .info_box .user_info.user_pw tr { display: flex; flex-direction: column; align-items: flex-start; } 
    .mypage_con .info_box .user_info.user_pw col { width: 100% !important; } 
    .mypage_con .info_box .user_info.user_pw tr th { padding: 10px 0 0; } 
    .mypage_con .info_box .user_info.user_pw tr td { width: 100%; padding: 5px 0 16px 0; } 
    .mypage_con.broker_mypage .content_box .state_wrap .state_list li { height: 82px; } 
    .mypage_con.broker_mypage .notice .tit_border th { font-size: 16px; } 
    .broker_wrap .broker_content .bot_con .line li { font-size: 16px; } 
    .mypage_con.broker_mypage .bot_con .line li { font-size: 16px; } 
    .mypage_con .content_box .type_price { justify-content: center; } 

}