/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

@media(min-width: 992px){
	section.page_banner{ background: url("/img/sub_page_banner.jpg") no-repeat 50% 50%; background-size: cover;}

	section.tab{ padding: 60px 0 40px;}
	section.tab ul{ display: flex;}
	section.tab ul li{ width: 33.3333%;}
	section.tab ul li button{ display: block; width: 100%; height: 100%; padding: 20px 0; font-size: 18px; font-weight: 500; text-align: center; background: #f3f3f3;}
	section.tab ul li button.active{ color: #fff; background: #e51c28;}
 
	section.car_list{ padding: 50px 0;}

	section.search div.search_box{ padding: 20px; border: 1px solid #e0e0e0; border-radius: 15px;}
    section.search div.search_box h2{ margin-bottom: 20px; font-size: 30px; font-weight: bold; color: #e51c28;}
    section.search div.search_box div.subsearch_wrap{ display: flex; gap: 10px; margin-bottom: 20px;}
    section.search div.search_box div.subsearch_wrap div.subsearch{ width: calc((100% - 40px) / 5); }
    section.search div.search_box div.subsearch_wrap div.btn_wrap{ width: 100px; height: 59px; border-color: #e51c28; border-radius: 8px; background: #e51c28;}
    section.search div.search_box div.subsearch_wrap div.btn_wrap input{ display: block; width: 100%; height: 100%; font-size: 20px; font-weight: 500; color: #fff;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl{ position: relative;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt{ position: relative; padding: 16px 10px; font-size: 16px; border: 1px solid #d1d1d1; border-radius: 8px;
    cursor: pointer;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt::after{ content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: block;
    width: 14px; height: 14px; background: url("/img/sel_arr.png") no-repeat 50% 50%; background-size: cover; transition: all 0.3s;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt.active::after{ transform: translateY(-50%) rotate(180deg);}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd{ z-index: 10; overflow-y: auto; position: absolute; left: 0; top: 51px; display: none; width: 100%;
    /*max-height: 460px;*/ border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd.active{ display: block;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd div div{ padding: 15px 10px; font-size: 15px; cursor: pointer;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd div div:hover{ background: #f7f7f7;}
	section.search div.search_box div.flex_wrap{ display: flex; align-items: flex-end; border-top: 1px solid #ccc;}
	section.search div.search_box div.detail_search_wrap{ width: 100%; padding: 20px 0 0;}
	section.search div.search_box div.detail_search_wrap ul{ display: flex; flex-wrap: wrap; gap: 20px;}
	section.search div.search_box div.detail_search_wrap ul li:last-child{ margin-left: auto;}
	section.search div.search_box div.detail_search_wrap ul li label{ width: max-content; margin-right: 10px;}
	section.search div.search_box div.detail_search_wrap ul li select{ height: 40px; padding-left: 3px; font-weight: 500; border-radius: 5px;}
	section.search div.search_box div.detail_search_wrap ul li input{ width: 125px; height: 40px; padding: 5px; border-radius: 5px; border: 1px solid #767676;}
	section.search div.search_box div.detail_search_wrap ul li.txt input{ width: 100%;}
	section.search div.search_box li.btn_wrap{ text-align: right;}
	section.search div.search_box div.detail_search_wrap ul li.btn_wrap input{ font-size: 18px; color: #fff; border-radius: 8px; color: #e51c28; border: 1px solid #e51c28; background: #fff;}
	section.search div.search_box li.btn_wrap input:hover{ color: #fff; background: #e51c28; transition: all 0.3s;}
}

@media(max-width: 991px){
	section.page_banner{ background: url("/img/sub_page_banner.jpg") no-repeat 50% 50%; background-size: cover;}

	section.tab{ padding: 15px 10px 20px;}
	section.tab ul{ display: flex;}
	section.tab ul li{ width: 33.3333%;}
	section.tab ul li button{ display: block; width: 100%; height: 100%; padding: 12px 4px; font-size: 13px; font-weight: 500; text-align: center; background: #f3f3f3;}
	section.tab ul li button.active{ color: #fff; background: #e51c28;}

	section.search{ padding: 0 10px;}

	section.car_list div.page_wrap ul{ display: flex; justify-content: center; gap: 5px;}
	section.car_list div.page_wrap ul li button{ width: 25px; height: 25px; padding: 5px; text-align: center;}
	section.car_list div.page_wrap ul li button.active{ display: block; border: 1px solid #e51c28; color: #e51c28;}

	
	section.search div.search_box{ padding: 20px 10px; border: 1px solid #e0e0e0; border-radius: 15px;}
    section.search div.search_box h2{ margin-bottom: 20px; font-size: 20px; font-weight: bold; color: #e51c28;}
    section.search div.search_box div.subsearch_wrap{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;}
    section.search div.search_box div.subsearch_wrap div.subsearch{ width: calc((100% - 10px) / 2);}
	section.search div.search_box div.subsearch_wrap div.subsearch.step3{ width: 100%;}
    section.search div.search_box div.subsearch_wrap div.btn_wrap{ width: 100px; height: 59px; border-color: #e51c28; border-radius: 8px; background: #e51c28;}
    section.search div.search_box div.subsearch_wrap div.btn_wrap input{ display: block; width: 100%; height: 100%; font-size: 20px; font-weight: 500; color: #fff;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl{ position: relative;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt{ position: relative; padding: 15px 10px; font-size: 15px; border: 1px solid #d1d1d1; border-radius: 8px;
    cursor: pointer;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt::after{ content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: block;
    width: 14px; height: 14px; background: url("/img/sel_arr.png") no-repeat 50% 50%; background-size: cover; transition: all 0.3s;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dt.active::after{ transform: translateY(-50%) rotate(180deg);}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd{ z-index: 10; overflow-y: auto; position: absolute; left: 0; top: 47px; display: none; width: 100%;
    /*max-height: 460px;*/ border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd.active{ display: block;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd div div{ padding: 15px 10px; font-size: 15px; cursor: pointer;}
    section.search div.search_box div.subsearch_wrap div.subsearch:not(.btn_wrap) dl dd div div:hover{ background: #f7f7f7;}
	section.search div.search_box div.detail_search_wrap div.tab_btn button{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 10px; margin-bottom: 20px;
	border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
	section.search div.search_box div.detail_search_wrap div.tab_btn button p{ font-size: 16px;}
	section.search div.search_box div.detail_search_wrap div.tab_btn span{ transition: transform 0.3s ease-in-out;}
	section.search div.search_box div.detail_search_wrap div.tab_btn.active span{ transform: rotate(180deg);}
	section.search div.search_box div.detail_search_wrap ul{ overflow: hidden; display: flex; flex-wrap: wrap; gap: 15px; height: 0; transition: height 0.3s ease-in-out;}
	section.search div.search_box div.detail_search_wrap ul.active{ height: 325px;}
	section.search div.search_box div.detail_search_wrap ul li{ width: 100%;}
	section.search div.search_box div.detail_search_wrap ul li.half{ width: calc((100% - 15px) / 2);}
	section.search div.search_box div.detail_search_wrap ul li.half select{ width: 100%;}
	section.search div.search_box div.detail_search_wrap ul li.sel select{ width: 90px;}
	section.search div.search_box div.detail_search_wrap ul li.sel input{ width: calc(100% - 100px);}
	section.search div.search_box div.detail_search_wrap ul li label{ display: block; margin-bottom: 5px;}
	section.search div.search_box div.detail_search_wrap ul li select{ width: 100%; height: 45px; border-radius: 5px;}
	section.search div.search_box div.detail_search_wrap ul li input{ width: 100%; height: 45px; padding: 5px; border-radius: 5px; border: 1px solid #767676;}
	section.search div.search_box div.detail_search_wrap ul li.btn_wrap input{ width: 100%; padding: 15px 51px; font-size: 20px; color: #fff; border-radius: 8px; color: #fff;
	border: none; background: #e51c28;}
}