@charset "utf-8";

/*
 * File    : main.css
 * 메인 인덱스 레이아웃 css
 */

 

/* **************************************** *
 * MAIN
 * **************************************** */
.m-wrap { width: 100%; min-height: calc(100% - 100px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.m-wrap .wrap { max-width: 600px; }
.m-wrap .m-mform { display: flex; justify-content: center; }
.m-wrap .m-mform .searchBox .inputbox_n { width: 100%; display: flex; justify-content: center; }
.m-wrap .m-mform input { border-radius: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0px 0px 0px 20px; height: 50px; background: var(--white-color) 0% 0% no-repeat padding-box; border: 2px solid var(--red-color); font: normal normal normal 16px/28px Noto Sans KR; letter-spacing: 0px; color: var(--black-color); }
.m-wrap .m-mform input::placeholder { color: var(--grey-color-01); font-size: 16px; width: 50%; overflow: hidden; text-overflow: ellipsis; }
.m-wrap .m-mform input:focus::placeholder { color: transparent !important; }
.m-wrap .m-mform input[hidden="hidden"] { display: none }
.m-wrap h1 { padding-top: 60px; text-align: center; font-size: 34px; line-height: 40px; color: var(--red-color); padding-bottom: 30px; box-sizing: border-box; }
.m-wrap p { padding-top: 120px; text-align: center; font-size: 34px; line-height: 40px; color: var(--red-color); padding-bottom: 20px; box-sizing: border-box; }
.m-wrap h1 span { color: var(--black-color); }
.m-wrap p span { color: var(--black-color); }
.m-wrap .iconbox { position: absolute; top: 0; right: -180px; }
.m-wrap .iconbox ul { display: flex; }
.m-wrap .iconbox ul ul { display: flex; align-items: center; flex-direction: initial; }
.m-wrap .iconbox ul .m-icon { justify-content: center; width: 50px; height: 50px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.173); border-radius: 50%; display: flex; align-items: center; cursor: pointer; box-sizing: border-box; background: linear-gradient(110deg, var(--white-color) 30%, #ddd); margin-right: 10px; }
.m-wrap .iconbox ul .m-icon:last-child { margin-right: 0; }
.m-wrap .iconbox ul .m-icon img { display: inline-block; max-width: 35px; max-height: 37px; } 
.m-wrap .iconbox ul ul li { margin-right: 10px; }
.m-wrap .iconbox_n { position: absolute; right: 4px; }
.m-wrap .iconbox_n .m-icon { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; }
.m-wrap .iconbox_n .m-icon img { display: inline-block; max-width: 30px; max-height: 30px; } 
.m-box { margin-top: 80px; }
.nonpopup_con select .option-title { color: var(--red-color) !important; }
.nonpopup .nonpopup_con { width: 100%; margin-top: 10px; }
.select-wrap { width: calc(100% - 60px); margin-right: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.searchBox{ position: relative; text-align: center; width: 100%}
.search_result{ display:none; position:absolute; left:0; top: 60px; width:100%; z-index:11000; background-color:var(--white-color); height:auto; max-height: 500px; min-height: 100px; overflow-y:auto; border: 2px solid var(--grey-color-02);}
.search_result table { width: 100%; }
.search_result table tr:first-child td span { padding-right: 10px; display: inline-block; cursor: pointer; }
.m-wraptop { width: 100%; display: flex; justify-content: center; flex-direction : column; }
.m-wraptop .m-img { width: 100%; aspect-ratio: 16 / 9; }
.m-wraptop .m-img img { width: 100%; height: 100%; object-fit: cover; }
.m-bannerbox { margin: 10px auto 100px; max-width: 1200px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.m-bannerbox > div { width: 50%; aspect-ratio: 4 / 1; overflow: hidden; }
.m-bannerbox > div img { width: 100%; cursor: pointer; justify-content: center; align-items: center; }
.m-topbtn { margin: 40px 0 20px; text-align: center;  }
.m-topbtn h2 { text-decoration:none; color: var(--black-color); font-size: 30px; font-weight: 600; }
.nonpopup  { max-width: 100%; display: flex; align-items: center; justify-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 { height: 50px;border: 2px solid var(--grey-color-02);  background-color: var(--white-color);background-size: 15px; font-size: 0.9rem;color: var(--black-color);font-weight: 500;outline: none;padding: 0 16px;cursor: pointer; }
.nonpopup .nonpopup_con select#addressCity { border-radius: 50px 0 0 50px; }
.nonpopup .nonpopup_con select#county { border-radius: 0px 50px 50px 0px; }
.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; }