@charset "UTF-8"; /*Reset CSS*/
* { word-break: keep-all; box-sizing: border-box; } 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, 
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video, button { margin: 0; padding: 0; border: 0; vertical-align: baseline; } 

html, body { font-family: Pretendard , sans-serif; font-size:16px; color:#333; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
img { max-width: 100%; } 
table { border-collapse: collapse; border-spacing: 0; } 
a {display: block; color: #333; text-decoration: none; outline: none; }  
a:hover, a:active { text-decoration: none; } 

input { border:transparent; outline:none; } 
button { border: none; background-color: transparent; cursor: pointer; } 

/* Remove IE arrow */
select::-ms-expand { display: none; } 

/*header*/
#header { background:#354b72; padding:30px 0; } 
#header .header_inner { padding:0 30px; display:flex; align-items: center; justify-content: space-between; gap:25px; } 

/*search*/
#header .search_wrap { width:100%; max-width:800px; } 
#header .search_wrap .title { font-size: 32px; color:#fff; font-weight:bold; letter-spacing: 0; text-align: center; margin-bottom:15px; } 
#header .search_box { display:flex; align-items:center; padding: 10px 15px; border-radius: 100px; background:#fff; } 
#header .search_box input { width:100%; padding:5px; font-size:16px; } 
#header .search_box input::-ms-clear, .search_box input::-ms-reveal { display:none; width:0; height:0; } 
#header .search_box input::-webkit-search-decoration, .search_box input::-webkit-search-cancel-button, 
.search_box input::-webkit-search-results-button, .search_box input::-webkit-search-results-decoration { display:none; } 

#header .search_box button{font-size:20px;}

#header .rnb_box { align-self:flex-start; } 
#header .rnb_box ul { display:flex; gap:10px; } 
#header .rnb_box * { color:#fff; } 
#header .m_btn {display:none;}
/*wrap*/
.cont_wrap{display:flex; width: 100%;min-height:100vh;}

/* 공통 class */
.img_box{border-radius: 15px; overflow:hidden;}

/*side_box*/
.close_btn {display:none;}
.side_box { /*position: fixed; padding-top:284px; left:0; */padding:30px; background:#fafafa; min-width: 350px; 
    display:flex; flex-direction:column; gap:70px; position: sticky; top: 0; height:100vh; overflow-y: scroll;
    }
.side_box::-webkit-scrollbar{width:10px; height:10px;}
.side_box::-webkit-scrollbar-thumb { background-color: #B0B0B0; border-radius: 10px;  background-clip: padding-box;  border: 2px solid transparent; }
.side_box::-webkit-scrollbar-track { background-color: #E0E0E0; border-radius: 10px; box-shadow: inset 0px 0px 3px white;}
.side_box .cont_box { display: flex; flex-direction:column; gap:45px; } 
.side_box .filter{ display:flex; flex-direction:column; gap:15px;}
.side_box .filter1 .tit_box { display:flex; align-items:center; justify-content:space-between; } 
.side_box .tit { font-size:18px; font-weight: 700; } 
.side_box .reset_btn { font-size:18px; font-weight: 500; display:flex; align-items:center; gap:10px; align-items:center; 
    background:#fff; border-radius: 100px; padding:10px 20px; border:1px solid #ddd; } 
:root { --gray: #415a85; --darkgray: #354b72; } 
.select_wrap { display: flex; flex-direction:column; gap:10px; } 
.select_box { position:relative; } 

/* Other styles*/
.btn-select { display:flex; align-items:center; justify-content:space-between; width: 100%; font-size: 18px; height:50px; 
    line-height: 50px; background: #354b72; border-radius: 5px; cursor: pointer; color:#fff; padding:5px 10px; } 
.list-member { display: none; position: absolute; width: 100%; top: 50px; left: 0; border-radius: 5px; background: #354b72; 
    overflow: hidden; z-index:5; } 
.btn-select.on+.list-member { display: block; } 
.list-member li { box-sizing: border-box; } 
.list-member li button { width: 100%; padding:0 10px; line-height: 45px; border: none; cursor: pointer; color:#fff; 
    text-align: left; } 
.list-member li button:hover, .list-member li button:focus { background: #415a85; } 

/*slider 원형필터*/
.slider_wrap { display: flex; flex-direction:column; gap:40px; } 
.slider_tit { display: block; font-size: 18px; font-weight: 500; margin-bottom:15px; } 
.range-slider { position: relative; height: 10px; } 
.range-slider input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; width: 100%; height: 5px; 
    margin: 0; background: #ddd; border-radius: 5px; outline: none; pointer-events: none; } 
.range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
    background: #354b72; border-radius: 100px; pointer-events: auto; cursor: pointer; position: relative; z-index: 2; } 
.range-slider input[type="range"]:nth-child(2)::-webkit-slider-thumb { z-index: 3; /* 오른쪽 핸들이 왼쪽 핸들 위에 표시되도록 설정 */ } 
.selected-range { position: absolute; height: 5px; background: rgba(53, 75, 114, 0.8); /* 선택된 범위 색상 */
border-radius: 5px; pointer-events: none; z-index: 1; } 
.slider-values { display: flex; justify-content: space-between; font-size: 12px; margin-top: 5px; } 
.slider-values span { font-weight: bold; } 

/* dropdown_menu */
.menu-container { width: 100%; } 
/* 기본 스타일 */
.menu-item {position: relative; border-top:1px solid #ddd; }
.menu-item:last-child{border-bottom:1px solid #ddd;}
.menu-button, .menu-button.no-submenu {width: 100%; padding: 15px 10px; text-align: left; display: flex; align-items:center; justify-content: space-between;
    font-size:18px; font-weight:500;}
.submenu {list-style: none; padding: 0; margin: 0; display: none; /* 기본적으로 숨김 */}
.submenu-item {padding: 5px 10px; position: relative; font-size: 16px; color:#555; }
.submenu-item label {cursor: pointer; position: relative; display: block; }
.submenu-item input[type="checkbox"] {appearance: none; -webkit-appearance: none; 
    -moz-appearance: none; margin:0; width: 15px; height: 15px; border: 2px solid #354b72; border-radius: 4px; 
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s ease;}
.submenu-item input[type="checkbox"]:checked {background-color: #354b72; border-color: #354b72;}
.submenu-item input[type="checkbox"]:checked::after {content: ''; position: absolute; left: 3px;
    top: 0px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);}

/*대메뉴 체크박스*/
.no-submenu  label {cursor: pointer; position: relative; display: block; }
.no-submenu label {cursor: pointer; position: relative; display: block; }
.no-submenu input[type="checkbox"] {appearance: none; -webkit-appearance: none; 
    -moz-appearance: none; margin:0; width: 20px; height: 20px; border: 2px solid #354b72; border-radius: 4px; 
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: all 0.3s ease;}
.no-submenu input[type="checkbox"]:checked {background-color: #354b72; border-color: #354b72;}
.no-submenu input[type="checkbox"]:checked::after {content: ''; position: absolute; left: 5px;
    top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);}
/* 메뉴 클릭 시 서브메뉴 표시 */
.menu-item.active .submenu { display: block; padding-bottom:10px; } 
.menu-item.active .arrow {transform: rotate(180deg); /* 위로 회전 */}

.filter_container{width:100%; padding:50px; display: flex; flex-direction: column; gap:15px; }
.filter_tit_box {display:flex; justify-content:space-between; font-weight: 700;}
.filter_tit_box .tit{font-size:24px;}
.filter_tit_box .res{font-size:18px;}
.filter_container .container{ width:100%; position: relative;}

/*
ul.cont{overflow: hidden; }
ul.cont .cont_list{float: left; width:33%;}
ul.cont{display:flex; flex-wrap:wrap; gap:25px; }
ul.cont .cont_list{flex: 1 1 30%; align-self:flex-start}
*/

ul.cont .cont_list{display:inline-block; font-size:0; width:calc(33.33% - 25px);}
ul.cont .cont_list .img_box{ overflow: hidden; max-height: 500px; text-align:center;}
ul.cont .cont_list:nth-child(2n) .img_box{max-height: 300px;}
ul.cont .cont_list .cont_txt{padding:30px 20px }
ul.cont .cont_list .txt_box{display:flex; flex-direction:column; gap:15px; padding-bottom:30px;border-bottom:1px solid #ddd;}
ul.cont .cont_list .txt_box .tit{font-size:24px; font-weight:700;}
ul.cont .cont_list .txt_box .desc{font-size:18px; font-weight:300; color:#777; line-height: 1.2em;}
ul.cont .cont_list .tag_box{padding:30px 0; display: flex; gap:10px; flex-wrap: wrap;}
ul.cont .cont_list .tag_box a{background:#fafafa; border-radius:100px; padding:8px 15px; font-size:14px; font-weight:400;}


@media screen and (max-width:1440px){
	/* header */
	#header #logo { max-width:170px; } 
	#header .search_wrap .title{font-size:28px;}

	ul.cont .cont_list{width:calc(50% - 25px);}
	ul.cont .cont_list .img_box{max-height: 400px;}
	ul.cont .cont_list:nth-child(2n) .img_box{max-height: 400px;}

 }


  
 @media screen and (max-width:1280px){
 	/* header */
	#header #logo { max-width:140px; } 
	#header .search_wrap .title{font-size:24px;}
	#header .search_box { padding: 8px 12px; } 
	#header .search_box input { width:100%; padding:5px; font-size:16px; } 
 }

 @media screen and (max-width:1024px){
 	/* header */
 	#header .header_inner{flex-wrap:wrap; }

	#header .head_list{flex: 1 1 50%; order:3;}
	#header .rnb_box{align-self:center; display: flex;justify-content: space-between;align-items: center; width:100%; order:1; flex: 1 1 100%;}
	#header .m_btn {display: block; padding: 10px; cursor: pointer; font-size:25px;}

	/* 공통 class */
	.img_box{border-radius: 12px;}

	/*side_box*/
	.close_btn {display:block; position: absolute; top: 10px; right: 10px; font-size: 25px; cursor: pointer; color: #333;}
	.no_scroll {overflow: hidden;}
	.side_box{position:absolute; width:350px; left:-350px; transition: left 0.3s ease; z-index:10;}
	.side_box.active {left: 0; /* 활성화 시 화면 안으로 이동 */}

	.side_box .tit { font-size:16px; } 
	.side_box .reset_btn { font-size:16px; padding:8px 15px;} 

	/* Other styles*/
	.btn-select { font-size: 16px; height:45px; line-height: 45px; } 
	.list-member {top: 45px; border-radius: 5px; } 
	.list-member li button { padding:0 8px; line-height: 40px; } 

	/*slider 원형필터*/
	.slider_wrap { gap:30px; } 
	.slider_tit { font-size: 16px; margin-bottom:12px; } 
	.range-slider { height: 8px; } 
	.range-slider input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px;} 
	.selected-range { position: absolute; height: 5px; background: rgba(53, 75, 114, 0.8); /* 선택된 범위 색상 */
	border-radius: 5px; pointer-events: none; z-index: 1; } 
	.slider-values {font-size: 10px; } 

	
	/* 기본 스타일 */
	.menu-button, .menu-button.no-submenu {font-size:16px;}
	.submenu-item {padding: 5px 8px; font-size: 14px; }
	

	/*대메뉴 체크박스*/
	.no-submenu  label {cursor: pointer; position: relative; display: block; }
	.no-submenu label {cursor: pointer; position: relative; display: block; }
	.no-submenu input[type="checkbox"] {appearance: none; -webkit-appearance: none; 
		-moz-appearance: none; margin:0; width: 20px; height: 20px; border: 2px solid #354b72; border-radius: 4px; 
		position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: all 0.3s ease;}
	.no-submenu input[type="checkbox"]:checked {background-color: #354b72; border-color: #354b72;}
	.no-submenu input[type="checkbox"]:checked::after {content: ''; position: absolute; left: 5px;
		top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);}
	/* 메뉴 클릭 시 서브메뉴 표시 */
	.menu-item.active .submenu { display: block; padding-bottom:10px; } 
	.menu-item.active .arrow {transform: rotate(180deg); /* 위로 회전 */}

	.filter_container{width:100%; padding:40px; gap:12px; }
	.filter_tit_box .tit{font-size:24px;}
	.filter_tit_box .res{font-size:18px;}
	.filter_container .container{ width:100%; position: relative;}
	
	ul.cont .cont_list .img_box{max-height: 300px;}
	ul.cont .cont_list:nth-child(2n) .img_box{max-height: 300px;}
	ul.cont .cont_list .cont_txt{padding:25px 15px }
	ul.cont .cont_list .txt_box{padding-bottom:25px;}
	ul.cont .cont_list .txt_box .tit{font-size:20px;}
	ul.cont .cont_list .txt_box .desc{font-size:16px; }
	ul.cont .cont_list .tag_box{padding:25px 0; }
	ul.cont .cont_list .tag_box a{padding:8px 12px; font-size:14px;}
	


 }

 @media screen and (max-width:768px){
 	/* header */
 	#header .header_inner{flex-direction:column; padding:0 15px; }
	/*#header .rnb_box{align-self:center; }*/

	/* 공통 class */
	.img_box{border-radius: 8px;}

	#header #logo { max-width:120px; } 
	#header .search_wrap .title{font-size:20px;}
	#header .search_box{padding: 6px 10px; }
	#header .search_box input { font-size:14px; } 
	

	ul.cont .cont_list{width:100%;}
	
	.side_box{min-width:auto; width:100%; left:-100%;}
	
 }