@charset "utf-8";

.serif { font-family: 'Noto Serif KR', serif; }
.sub-contents { padding: 150px 0; } 


/* title */
h3.title{ margin-bottom: 3%; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 3.3rem; font-weight: 600; }
h3.white{ color: #fff; }
h3.black{ color: #333; }

/* 고정 버튼 */
.fab-container{z-index:999; position:fixed; bottom:50px; right:50px; cursor:pointer;display: flex;flex-direction: row-reverse;align-items: center;}
.iconbutton{display:flex; color:#fff; font-size:2.3rem;width:60px; height:60px; border-radius: 100%; background: rgb(171 130 92 / 58%); align-items: center;justify-content: center;}
.iconbutton:hover{box-shadow: 1px 1px 3px #aaaaaa;}
.fab-text{display:none; }
.iconbutton:hover + .fab-text{display:block; color:#333; font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 1.1rem; font-weight: 600; margin-right: 15px;;}




/* mate_contents */
.mate_content .inner-wrap {display: flex;  flex-wrap: wrap; box-sizing: border-box; position: relative; justify-content: space-between;}
.mate_content .inner-wrapper{display: flex;  flex-wrap: wrap; box-sizing: border-box; position: relative; }
.mate_content .mate_content_theme { display: flex; }
.mate_content .mate_content_theme ul { display: flex;}
.mate_content .mate_content_theme ul li { box-sizing: border-box; border: 2px solid #E8EBF5; border-radius: 90px; margin: 0 1%; position: relative; }
.mate_content .mate_content_theme ul li:hover{background-color:#E8EBF5;}
.mate_content .mate_content_theme ul li a{text-align: center; width: 90px; padding: 5% 4%;  }
.mate_content .mate_content_theme ul li a:hover{color:#fff; font-weight:600; }
.mate_content .theme_search {margin-top:2%}
.mate_content .theme_search form{ position: relative; display:flex; box-sizing: border-box;}
.mate_content .theme_search input[type="text"]{border: none; outline: none; padding: 1% 2%; background-color: rgb(246, 246, 246); }
.mate_content .theme_search button{appearance: none; margin-left:10px; padding: 1% 2%; cursor: pointer; width:100px;  border:1px solid rgb(246, 246, 246); }
.mate_content .theme_search select{position: relative;  padding: 1% 2%;  border: none; outline: none; background-color:rgb(246, 246, 246); }



.mate_content .mate_content_list{ overflow: hidden; display: flex; box-sizing: border-box; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); background: #fff; border-radius: 20px; margin: 2% 2% 2% 0; flex-direction: column; width: 0; position: relative; min-width:23%; }
.mate_content .mate_contents{ display: flex; flex-direction: column; width: 0; position: relative; min-width:100%; }
.mate_content_img {overflow: hidden; margin: 0 auto; min-height: 250px; height: 0; }
.mate_content_img img{ position: relative; object-fit: cover; width: 100%; height: 100%;}
.mate_content_img .deadline_btn { margin:4%; border-radius: 5px; position: absolute; top: 0%; left: 0%; padding: 3px 10px; background-color: #b48869; color: #fff;}
.mate_content_text{padding: 25px; }
.mate_content_title{font-weight: bold;}
.mate_content_date{font-size: 0.8rem;}


/*=========================== ~1399 ==================================*/
/*=========================== ~1399 ==================================*/
@media screen and (max-width: 1399px) {



}






/*=========================== ~1280 ==================================*/
/*=========================== ~1280 ==================================*/
@media screen and (max-width: 1280px) {
   

}





/*=========================== ~1180 ==================================*/
/*=========================== ~1180 ==================================*/
@media screen and (max-width: 1180px) {
    


}








/*=========================== ~1025 ==================================*/
/*=========================== ~1025 ==================================*/
@media screen and (max-width: 1025px) {
    *{font-size: 16px;}

    

}






/*=========================== ~820 ==================================*/
/*=========================== ~820 ==================================*/
@media screen and (max-width: 820px) {


}






/*=========================== ~768 ==================================*/
/*=========================== ~768 ==================================*/
@media screen and (max-width: 768px) {
    .inner-wrap { width: 100%; }
    #main-banner .inner-wrap .title { padding: 160px 10px 100px; }
    #main-banner .inner-wrap .indicator { padding: 0 10px; }
    #main-banner { height: 500px; padding: 0; }


   


    
}







/*=========================== ~712 ==================================*/
/*=========================== ~712 ==================================*/
@media screen and (max-width: 767px) {
   
}









/*=========================== ~414 ==================================*/
/*=========================== ~414 ==================================*/
@media screen and (max-width: 414px) {
    *{font-size: 14px;}
    .sub-contents { padding: 130px 0; }
    .map { padding: 130px 10px; }
    #main-banner .inner-wrap .indicator { width: auto; }

    
    






}







/* ============================ iphone567 ============================= */
/* ============================ iphone567 ============================= */
@media screen and (max-width: 375px){
    *{ font-size: 12px; }

    #main-banner .inner-wrap .title h2 { font-size: 3rem; }




}




/*===========================iphone5 & se==================================*/
/*===========================iphone5 & se==================================*/
@media screen and (max-width: 320px){

 


}





/*===========================gallaxy fold==================================*/
/*===========================gallaxy fold==================================*/
@media screen and (max-width: 280px){

 


}