@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
:root{
  --main_color:#f2a243;
  --sub_color:#697f14;
}

*{box-sizing: border-box;}
html{font-size: 10px; }
body{font-family: 'Pretendard'; font-size: 2rem; color:#333; font-weight: normal; word-break: keep-all;}
.wrap{width: 132rem; margin: auto;}
/* 상단메뉴 */
header{display: flex; align-items: center; justify-content:space-between; padding:1rem 0}
header nav{width:60%}
header nav ul{display: flex; align-items: center;}
header nav ul li{flex:1; text-align: center;}
header nav ul li a{display:block; font-weight: bold; font-size: 2.4rem; padding:2rem 0; transition: all .5s;}
header nav ul li a:hover{color:var(--sub_color)}
/*header nav ul li:first-child a{background: var(--main_color); color:#fff;}
header nav ul li:nth-child(2) a{background: var(--sub_color); color:#fff;}*/

.visit{position: absolute; top: 2rem; left:5%; font-size: 1.6rem;}
.visit span{font-weight: bold; color:var(--main_color)}
.visit i{}
@media (max-width: 1280px) {
  .visit{position: relative; left: auto; top: auto; padding:2rem 0}

}


.right_banner{position: absolute; top: 50%; left: 0;}
.right_banner li{margin-bottom: 30px;}

.right_banner2{position: absolute; top: 50%; right: 0;}

.search_box{padding:5rem 0}
/* 검색 */
.check-group{display: flex; flex-wrap: wrap; gap:2rem; padding:0 0 2rem 0; display: block; text-align: center;}
.check-group li{position: relative; width:calc(33% - 2rem); width: 30%; display: inline-block; margin: 1rem 2rem;}
.check-group li:first-child{display: block; margin: auto; width:50%}
.checkbox {appearance: none; height: 5rem; width: 100%; background: var(--main_color); background-size: 360% 100%; border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; line-height: 1;}
.checkbox:after {content: attr(data-name); top: 50%; position: absolute;left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; text-align:center; font-weight: bold; color: #3f3f3f; z-index: 99; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.checkbox:before {content: ""; position: absolute; top: 0%; left: 0px; height: 200%; width: 200%; background: #e9e9e9; z-index: 0; transition: all 0.2s linear; transform: scale(0.6) translate(-50%, -50%);}
.checkbox:hover:before,
.checkbox:focus-visible:before {background: #cacaca; top: -4%; left: 20%;}
.checkbox:checked:before {opacity: 0; transform: scale(0.9);}
.checkbox:checked:after {color: white;}
.checkbox:checked {box-shadow: 0px 4px 10px -6px black;}
.checkbox:focus-visible {outline: none; box-shadow: 0px 0px 0px 5px #480f5d;}

.radio-group {display:flex; flex-wrap: wrap; gap:2rem; padding:0 0 2rem 0; clear:both;}
.radio-group li{width:calc(20% - 2rem)}
.radio-group input[type=radio] {position: absolute;visibility: hidden; display: none;}
.radio-group label {display: block; cursor: pointer; font-weight: bold; text-align:center; padding:1.5rem; border: 1px solid #ccc;}
.radio-group input[type=radio]:checked + label { color: #fff; background:var(--main_color);}
.radio-group label + input[type=radio] + label {}

.radio-city{gap:2px}
.radio-city li{margin: 0 0 -1px -1px; width: calc(11.11% - 1px);}
.radio-city input[type=radio]:checked + label {background:var(--main_color);}

/*.radio-select{gap:0}*/
.radio-select li{flex:1; margin-left: -1px;}
.radio-select input[type=radio]:checked + label {  background:var(--main_color);}

.custom-select {appearance: none; width: 30rem; height: 5.7rem; font-size: 2rem; padding: 1.5rem 3rem; background: #fff url("../images/arrow.png") no-repeat right 16px center;  background-size: 10px; 
  transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out;  border: 1px solid #ddd; border-radius: 0;}
.custom-select:hover {  border: 1px solid #999;}
.custom-select:focus {  border: 1px solid #999;  box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);  outline: none;}
.select-group{padding:0 0 2rem 0}
.btn_search{ display: block; margin: auto; padding: 1.5rem 10rem; font-weight: bold; font-size: 2.4rem; background: var(--main_color); color:#fff; text-align: center; border-radius: 1rem; }

.main_wirte_btn{padding:0 0 2rem 0; width: 50rem; margin: auto;}
.main_wirte_btn a{display: block; background: #f28101; border-radius: .5rem; color:#fff; font-weight: bold; font-size: 2rem; text-align: center; padding:2rem 0}
.main_wirte_btn span{display: inline-block; padding-right: 1rem;}


.cate_sell label,
.cate_buy label{padding:3rem 0}

.cate_buy input[type="radio"]:checked + label,
#check-cate-buy .checkbox,
#radio-city-buy input[type="radio"]:checked + label,
#btn-search-buy{background: var(--sub_color);}
/* 리스트 */
.list{display: flex; flex-wrap: wrap; gap:2rem; margin-right: -2rem;  padding:8rem 0}
.list li{width: calc(33% - 2rem); }
.list li p{width: 100%; height: 32rem; position: relative;}
.list li p img{width: 100%; height: 100%; object-fit: cover;}
.list li em{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0,0,0,0.5); color:#fff; font-weight: bold; font-size: 3rem; position: absolute; top: 0; left: 0;}
.list li dl{padding:2rem 0}
.list li dl dt{font-size: 2.4rem; text-overflow: ellipsis; overflow: hidden; white-space:nowrap; }
.list li dl dt span {float:right;}
.list li dl dd{font-size:1.6rem ;}
.list li dl dd span{display: block; font-size: 1.4rem; color:#999;}

/* 카피라이트 */
footer{background:#443838; clear:both;}
footer address{color:#fff; padding:5rem 0; font-size: 1.4rem;}

/* 광고 배너 */
.site {padding:5rem 0}
.site img{width: 100%; border: 1px solid #ccc;}
.site_slide .swiper-pagination{position: relative; padding:2rem 0 0 0}
.site_slide .swiper-pagination-bullet-active{background: var(--sub_color);}

.sub-contents{padding:8rem 0; min-height: 50rem;}

/* 상세 */
.detail_top{/*padding:8rem; border: 1px solid #ccc;*/ margin-bottom: 5rem;}
.detail_con{display: flex; gap:5rem; padding:0 0 3rem 0}
.detail_con .detail_photo, .detail_con .detail_text{flex:1}
.detail_con .detail_photo{overflow: hidden}
.detail_con .detail_photo img{width: 100%;}
.detail_text h2{ padding:0 0 3rem 0; margin-bottom: 3rem; font-family: 'Pretendard' !important; font-size: 3rem; border-bottom: 1px solid #ccc; }
.detail_text h2 span{display: block; font-weight: bold; font-size: 4rem;}
.detail_text h2 span em{display: inline-block; font-weight: normal; font-size: 3rem; padding:0 0 0 1rem}
.detail_con dl{display: flex; padding:0 0 2rem 0; font-size: 1.6rem;}
.detail_con dl dt{font-weight: bold; width: 30%; color:#666; position: relative; padding:0 0 0 2rem}
.detail_con dl dt::before{content: ''; width: .5rem; height:.5rem; border-radius: 100%; background: #666; position: absolute; top: .7rem; left: 0;}
.detail_con dl dd{width: 70%;}
#bo_v{padding:3rem 0; border-top:1px solid #ccc}
.swiper-button-next::after, .swiper-button-prev::after{color:#fff !important}
.detail_text ul{display: flex; padding:0 0 3rem 0; gap:2rem}
.detail_text ul li{color:#a3a3a3}
.detail_text ul li i{display: inline-block; padding:0 .5rem 0 0}
.box{background: #fafafa; border: 1px solid #ccc; padding:2rem; font-size:1.4rem; display: flex; justify-content: center; align-items: center;}
.box i{display: inline-block; padding:0 1rem 0 0}
.con_tomok{padding:8rem; border: 1px solid #ccc;}

#bo_w .write_div{text-align: center;}
#bo_w .write_div a,
#bo_w .write_div .btn_submit{min-width: 100px !important; height: 50px !important; line-height: 50px !important; font-size:16px !important}



@media (max-width: 768px) {
body{font-size:1.6rem;}
img{max-width: 100%;}
.wrap{width: 100%;}

/* 상단메뉴 */
header{flex-direction: column; justify-content: center; padding:0}
header h1{text-align: center; padding:1rem 0}
header h1 img{width: 60%;}
header nav{width: 100%;}
header nav ul li a{font-size: 1.8rem;}

/* 광고 배너 */
.site{padding:1rem}

/* 검색 */
.check-group{gap:1rem; padding:1rem}
.check-group li{margin:5px; width: 45%;}
.checkbox{border-radius: .5rem;}
.checkbox::after{font-size:1.4rem}
.radio-group{padding:1rem}
.radio-city{gap:2px}
.radio-city li{}
.radio-group label{padding:1rem}
.select-group{display: flex; padding:1rem}
.custom-select{padding:0 1rem; height: 3rem; font-size: 1.4rem;}
.btn_search{padding:1rem;font-size: 1.4rem; margin: 0 1rem; width: calc(100% - 2rem);}

/* 리스트 */
.list{padding:1rem}
.list li{width: calc(50% - 2rem);}
.list li p{height: 15rem;}
.list li dl dt{font-size:1.8rem}
.list li dl dt span {float:right; color:#888;}
.list li dl dd{font-size: 1.4rem;}

/* 카피라이트 */
footer address{padding:2rem 1rem; font-size:1.2rem; text-align: center;}

/* 글올리기 */
.write_div{padding:1rem;}
.write_div label{font-size:1.4rem !important; text-align:left; width: 20%;}
.write_div input[type="text"], .write_div input[type="password"], .write_div input[type="number"], .write_div input[type="date"]{font-size: 1.4rem !important; height: 3rem !important;}

/* 상세 */
.con_tomok{padding: 1rem;}
.detail_con{flex-direction: column; gap:0}
.detail_con .detail_photo{flex:none; width: 100%;}
.detail_text h2{padding:1rem 0; font-size:2rem;}


/* 게시판 */
#bo_v_top,
#bo_v_top ul{display: flex;}
.write_div label{width: 80px !important;}

/* 팝업창 */
.rPopup{padding:0 !important; width: 90%;}

.right_banner,
.right_banner2{display: none;}
}