@charset "utf-8";

/*
 * File : rwd-main.css
 * 메인 인덱스 레이아웃 반응형 css
 */



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

    .m-wrap h1 { padding-top: 20px; padding-bottom: 20px; font-size: 27px; }
    .m-topbtn { margin: 20px 0; }
    .m-topbtn h2 { font-size: 24px; }
    .m-bannerbox { width: 100%; padding: 0 30px; }
    .m-bannerbox > div { width: 600px; min-width: 50%; }
    .m-bannerbox > div img { opacity: 0; }
    
}



/* **************************************** *
* 992px
* **************************************** */
@media (min-width: 992px) {

    /* MAIN */
    .nonpopup { max-width: 100%; display: flex; align-items: center; justify-content: center; align-content: center; } 
    .nonpopup .nonpopup_con { height: 50px; display: flex; align-items: center; justify-content: center; align-content: center; text-align: center; margin-right: 0px; margin-left: 0px; } 
    .nonpopup .nonpopup_con .address_wrap { max-width: 550px; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; align-content: center; text-align: center;}
    .nonpopup .nonpopup_con select#addressCity option,
    .nonpopup select#fullCity option,
    .nonpopup select#county option { font-size: 0.9rem; color: var(--black-color); font-weight: 500; outline: none; } 
    .nonpopup .nonpopup_con .mic-icon { display: flex; justify-content: center; align-items: center; align-content: center; width: 50px; height: 50px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.173); border-radius: 50%; cursor: pointer; box-sizing: border-box; background: linear-gradient(110deg, var(--white-color) 30%, #ddd); } 
    .nonpopup .nonpopup_con .mic-icon img { max-width: 32px; max-height: 40px; } 

}


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

    /* MAIN */
    .m-box { margin-top: 70px }
    .m-wrap .wrap { max-width: none; width: 100%; padding: 0 30px; }
    .m-wrap .m-mform input::placeholder { width: 85%; font-size: 14px; }
    .m-bannerbox { flex-wrap: wrap; }
    .m-bannerbox > div { width: 100%; }
    .m-bannerbox > div img { width: 100%; height: 100%; object-fit: cover; }

}




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

    /* MAIN */
    .m-box { margin-top: 64px }
    .m-wrap .wrap { padding: 0 20px; }
    .m-wrap h1 { padding: 15px 0px 0; font-size: 20px; line-height: 34px; margin-bottom: 15px; word-break: auto-phrase; }
    .m-wrap .m-mform input { padding: 0px 0px 0px 20px; height: 45px; }
    .m-wrap .m-mform input::placeholder { font-size: 12px; }
    .m-wrap .iconbox_n .m-icon img { max-width: 27px; max-height: 27px; }
    .nonpopup .nonpopup_con { margin-top: 6px; height: 46px; }
    .nonpopup .nonpopup_con select { height: 43px; padding: 0 8px; font-size: 10px; }
    .nonpopup .nonpopup_con .mic-icon { width: 43px; height: 43px; }
    .select-wrap { gap: 6px; margin-right: 6px; width: calc(100% - 52px); }
    .m-topbtn { margin: 15px 0 10px; }
    .m-topbtn h2 { font-size: 18px; }
    .m-wraptop .m-img img { width: 100%; height: 100%; object-fit: cover; }
    .m-bannerbox { margin: 10px 0 60px; gap: 10px; padding: 0 20px; }
    

}