@charset "utf-8";

/*
 * File : rwd-layout.css
 * 헤더, 푸터, 모달, 팝업 등 반응형 css
 */



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

    /* LAYOUT */
    .w1240 { padding-left: 30px; padding-right: 30px; }

    /* HEADER */
    header .nav { padding: 0 30px; }

    /* FOOTER */
    footer { padding: 0 30px; }
    footer .footerwarp ul { flex-wrap: wrap; }

    /* POPUP */
    .popup_con { max-height: 60vh; }

}



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

    /* LAYOUT */
    .wrap { padding: 0 30px; }
    .w1240 { padding-top: 120px; }
    .w1400 { padding-top: 120px; }

    /* HEADER */
    header { height: 70px; }
    header .nav { display: none; }
    header .mob-nav { display: block; }
    .mob-menu.active { display: block; }

}



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

    /* LAYOUT */
    body, html { font-size: 12px !important; } 
    .w800 { width: 90%; padding-top: 140px; } 

    /* POPUP */
    .popup .title_wrap { background-position: 0px center; } 
    .popup .popup_con .btn_wrap2 .btn1 { height: 50px; font-size: 1.6rem; } 
    .mypage_con .m-nomalconbox .btn_wrap_4 .btn2,
    .popup .popup_con .btn_wrap .btn2 { height: 50px; font-size: 1.6rem; } 
    .mypage_con .m-nomalconbox .btn_wrap_4 .btn1,
    .popup .popup_con .btn_wrap .btn1 { font-size: 1.6rem !important; height: 50px !important; } 
    .popup .popup_con .btn_wrap2 .btn2 { font-size: 1.6rem; height: 50px; } 
    .popup .popup_con .btn_wrap { margin-top: 30px !important; } 
    .popup .filebox label { max-width: none; width: 50%; } 
    .mypage_con .m-nomalconbox .btn_wrap_4 .btn1,
    .popup .popup_con .btn_wrap .btn1 { margin-right: 20px; } 

    .popup .popup_con .apt_content_wrap table tr { align-items: flex-start; flex-direction: column; } 
    .popup .popup_con .apt_content_wrap table tr th.table_tit { margin-bottom: 5px; } 
    .popup .popup_con .type_radio_wrap { flex-direction: column; align-items: flex-start; } 
    .popup .popup_con .type_radio_wrap .btn_wrap .btn1 { height: 40px !important; margin-top: 10px; font-size:16px !important; } 
    .popup .popup_con .apt_content_wrap table tr td input[type="text"] { font-size: 1.3rem; } 
    .popup .popup_con ul.top_col { flex-direction: column; } 
    .popup .popup_con ul.top_col li { margin-bottom: 5px; } 
    .popup .popup_con ul.top_col li:last-child { margin-bottom: 0; } 
    .popup .popup_con .apt_content_wrap table tr td input[type="text"].datepicker { font-size: 1.1rem; height: 40px; } 
    .popup .popup_con .btn_wrap3 .btn1 { height: 50px; font-size: 1.6rem; } 
    .popup .popup_con .btn_wrap3 { margin-top: 40px; } 
    .popup .popup_con .apt_radio_wrap .radio_txt, 
    .popup .popup_con .apt_content_wrap .radio_txt { margin-right: 20px; } 
    .popup .popup_con ul li select#reason { height: 40px; font-size: 1.1rem; padding: 0 5px; } 
    .popup .popup_con ul li select#reason option { font-size: 1.1rem; } 
    .popup .popup_con ul li.radio_list .content_box .row { flex-direction: column; align-items: center; justify-content: normal; } 
    .popup .popup_con ul li.radio_list .content_box .row .flex_bw { justify-content: center; margin-left: 0; } 
    .popup .popup_con ul li.radio_list .content_box .btn_wrap .btn1 { height: 40px !important; font-size: 16px !important; } 
    .popup .popup_con ul li.radio_list .content_box .col { align-items: center; justify-content: normal; } 
    .popup .popup_con ul li.radio_list .content_box .num { margin-bottom: 10px; } 
    .popup .popup_con ul li.radio_list .content_box .apt_name { margin-bottom: 10px; font-size: 1.6rem; } 
    .popup .popup_con ul li.radio_list .content_box .img { margin-bottom: 20px; } 
    .popup .popup_con ul li.radio_list .content_box { padding: 15px; margin-left: 0; } 
    .popup .popup_con ul li.radio_list2 { width: calc(50% - 5px); } 
    .popup .popup_con ul li.radio_list2:nth-child(1), 
    .popup .popup_con ul li.radio_list2:nth-child(3), 
    .popup .popup_con ul li.radio_list2:nth-child(5), 
    .popup .popup_con ul li.radio_list2:nth-child(7),
    .popup .popup_con ul li.radio_list2:nth-child(7),
    .popup .popup_con ul li.radio_list2:nth-child(9) { margin-right: 10px; } 
    .popup .popup_con ul li.radio_list2:nth-child(2), 
    .popup .popup_con ul li.radio_list2:nth-child(4), 
    .popup .popup_con ul li.radio_list2:nth-child(6), 
    .popup .popup_con ul li.radio_list2:nth-child(8),
    .popup .popup_con ul li.radio_list2:nth-child(10) { margin-right: 0px; } 
    .popup .popup_con ul li.radio_list3 .broker-box .right-wrap .top-box { display: flex; flex-wrap: wrap; align-items: center; } 
    .popup .popup_con ul li.radio_list3 .broker-box .right-wrap .bot-box { display: flex; flex-wrap: wrap; align-items: center; } 
    .popup .popup_con ul li.radio_list3 .broker-box .right-wrap span.broker-sns { height: auto; } 
    .popup .popup_con ul li.radio_list3 .broker-box .right-wrap span.broker-level, 
    .popup .popup_con ul li.radio_list3 .broker-box .right-wrap span.broker-rest { height: auto; margin-bottom: 5px; } 
    .popup .popup_con ul li.radio_list3 .broker-box .left-image { margin-right: 10px; } 
    .popup .popup_con ul li.radio_list3 .broker-box { padding: 15px; } 
    .popup .popup_con .apt_content_wrap table tr.fl_wrap td .img_box_wrap { overflow-x: auto; padding-bottom: 10px; } 
    .popup .popup_con .apt_content_wrap table tr.fl_wrap td .img_box_wrap .img_box { min-width: 200px; height: 260px; } 
    .popup .popup_con .apt_content_wrap table tr td img.change { padding: 0 10px; } 
    .popup .popup_con .apt_content_wrap table tr td span.bold { margin-right: 0px; } 
    .popup .popup_con .btn_wrap4 .btn1 { margin-right: 10px; padding: 0 15px; } 
    .popup .popup_con ul li.radio_list { flex-direction: column; } 
    .popup .popup_con ul li.radio_list .apt_radio { margin-bottom: 10px; } 
    .popup .popup_con ul li.phone_wrap { flex-direction: column; } 
    .popup .popup_con ul li.phone_wrap .phone_col { margin-bottom: 10px; width: 100%; } 
    .popup .popup_con ul li button.pone_btn { max-width: none; height: 40px; width: 100%; } 
    .popup .popup_con ul li.phone_wrap .phone_col input { margin-right: 0; width: 100%; height: 50px; } 
    .popup .popup_con ul li.phone_wrap .phone_col span:last-child { margin-right: 0; } 
    .popup .popup_con .notice td { font-size: 1.1rem; padding: 5px; } 

}



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

    /* LAYOUT */
    .wrap { padding: 0 20px; }
    h1.page_tit { font-size: 24px; }

    /* HEADER */
    header { height: 64px; }
    .mob-nav .mob-logo { left: 20px; }
    .mobile-m { right: 20px; }
    .mob-menu { width: 80%; padding: 60px 20px; }

    /* FOOTER */
    footer .footerwarp img { width: 44px; height: 46px; }
    footer .footerwarp .footerinfobox ul { font-size: 12px; }
    footer .copyright { font-size: 11px; }

    /* MODAL */
    .modalwrap { width: calc(100% - 40px); padding: 30px 20px 40px; }
    .modalwrap .title_wrap h1, .modalwrap .title_wrap p { font-size: 20px; }
    .m-content .m-nomalconbox .m-loginmflex { flex-wrap: wrap; gap: 6px; }
    .modalheader ul li .m-logo { width: 30px; }
    .modalheader ul li span.m-tt { font-size: 20px; }
    .m-content form .m-inputbox input { height: 46px; padding: 0 50px 0 12px; }
    .m-content .m-nomalconbox .m-loginmflex label #m-checkid { width: 16px; height: 16px; }
    .m-content .m-submit p { height: 50px; line-height: 50px; margin-top: 20px; font-size: 16px; }

    /* POPUP */
    .popup { padding: 20px; }

}



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

    /* POPUP */
    .popup .popup_con select#addressCity_subw,
    .popup .popup_con select#fullCity_subw,
    .popup .popup_con select#county_subw {max-width: none; width: 100%; font-size: 1.1rem; height: 40px; padding: 0 5px; margin-right: 0px; margin-bottom: 10px; } 

    .popup .popup_con select#addressCity { max-width: none; width: 100%; font-size: 1.1rem; height: 40px; padding: 0 5px; margin-right: 0px; margin-bottom: 10px; } 
    .popup .popup_con select#fullCity { max-width: none; width: 100%; font-size: 1.1rem; height: 40px; padding: 0 5px; margin-right: 0px; margin-bottom: 10px; } 
    .popup .popup_con select#county { max-width: none; width: 100%; font-size: 1.1rem; height: 40px; padding: 0 5px; } 
    .popup .title_wrap { -webkit-background-size: 30px; background-size: 30px; } 

    .popup .title_wrap .x_button img { width: 15px; } 
    .popup .filebox .upload-name { height: 40px; font-size: 14px; } 
    .popup .filebox label { height: 40px; font-size: 16px; line-height: 38px; margin-left: 5px; } 
    .popup .popup_con .col_gray { font-size: 1.15rem; } 
    .mypage_con .m-nomalconbox .btn_wrap_4 .btn1,
    .popup .popup_con .btn_wrap .btn1 { margin-right: 10px; } 
    .popup .popup_con .apt_content_box .img { height: 200px; } 
    .popup .popup_con .apt_content_wrap table tr td input[type="text"].meter { width: 88%; } 
    .popup .popup_con .apt_content_wrap table tr td img.change { padding: 10px; } 
    .popup .popup_con .apt_content_wrap table tr td.col_row { flex-direction: row; flex-wrap: wrap; } 
    .apt_find .apt_content_wrap table tr td.col_row,
    .apt_putout .apt_content_wrap table tr td.col_row { flex-direction: row; flex-wrap: wrap; } 
    .popup .popup_con .apt_content_wrap table tr td img,
    .apt_find .apt_content_wrap table tr td img.change_img,
    .apt_putout .apt_content_wrap table tr td .change_img { padding: 10px; } 
    .apt_putout .apt_content_wrap table tr td input[type="text"].meter, 
    .apt_find .apt_content_wrap table tr td input[type="text"].meter { width: 88%; } 
    .popup .popup_con ul li button.company_btn { padding: 0 20px; } 
    .popup .popup_con ul.broker_company li .col_wrap2 { flex-direction: column; } 
    .popup .popup_con ul.broker_company li input.num { margin-right: 0; width: 100%; } 
    .popup .popup_con ul li .col_wrap2 button.company_btn { width: 100%; margin-top: 10px; } 
    .popup .popup_con .notice .tit_border th { font-size: 16px; word-break: keep-all; } 

}



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

    /* POPUP */
    .popup .popup_con .apt_content_box .img { height: 180px; } 
    .popup .popup_con ul li.level span.level { font-size: 1.4rem; } 
    .popup .popup_con .apt_radio2 { width: 20px; height: 20px; border: 6px solid var(--red-color); } 
    .popup .popup_con ul li.radio_list .content_box .type_price { justify-content: center; } 
    .popup .popup_con .notice td { font-size: 1rem; } 

}