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

div#rightbanner{ display: none;}

@media(min-width: 992px){
	section.car_info{ padding-top: 60px;}
	section.car_info div.car_head{ padding: 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc;}
	section.car_info div.car_head h2{ overflow:hidden; display: -webkit-box; margin-bottom: 5px; font-weight: bold; font-size: 28px; text-overflow: ellipsis; -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;}
	section.car_info div.car_head p.car_price{ text-align: right;}
	section.car_info div.car_head p.car_price span{ font-weight: bold; font-size: 26px; color: #009543;}
	section.car_info div.car_tag{ margin-bottom: 10px;}
	section.car_info div.car_tag ul{ display: flex; gap: 6px;}
	section.car_info div.car_tag ul li::after{ content: "/"; display: inline-block; margin-left: 5px;}
	section.car_info div.car_tag ul li:last-child::after{ display: none;}
	section.car_info div.img_wrap{ display: flex !important; gap: 5px; margin-bottom: 30px;}
	section.car_info div.img_wrap div.big_img{ width: 70%;}
	section.car_info div.img_wrap div.big_img img{ display: block; width: 100%;}
	section.car_info div.img_wrap div.sm_img{ width: 30%;}
	section.car_info div.img_wrap div.sm_img ul{ display: flex; flex-wrap: wrap; gap: 5px;}
	section.car_info div.img_wrap div.sm_img ul li{ width: calc((100% - 15px) / 4);}
	section.car_info div.img_wrap div.sm_img ul li img{ display: block; width: 100%;}

	section.car_info h3.table_info_tit{ margin-bottom: 10px; color: #e51c28; font-size: 24px;}

	section.car_info div.flex_wrap{ display: flex; gap: 10px;}
	section.car_info div.flex_wrap div.db_wrap{ width: 233px; padding: 7px; border: 1px solid #ccc;}
	section.car_info div.flex_wrap div.db_wrap div.logo_wrap{ width: 100px; margin-bottom: 10px;}
	section.car_info div.flex_wrap div.db_wrap div.logo_wrap img{ display: block; width: 100%;}
	section.car_info div.flex_wrap div.db_wrap textarea{ width: 100%; height: 88px; padding: 7px; font-size: 14px; background: #e5e5e5; resize: none;}
	section.car_info div.flex_wrap div.db_wrap input{ width: 100%; padding: 10px; border: 1px solid #ccc;}
	section.car_info div.flex_wrap div.db_wrap input[type="submit"]{ display: block; width: 100%; padding: 10px 0; text-align: center; color: #fff; border: none; background: #e51c28;}
	section.car_info div.table_info{ width: 100%;}
	section.car_info div.table_info div.line{ display: flex;}
	section.car_info div.table_info div.line > div{ padding: 19px 12px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;}
	section.car_info div.table_info div.line > div.tit{ width: 15%; padding-left: 22px; color: #000; background: #e5e5e5;}
	section.car_info div.table_info div.line > div.desc{ width: 35%;}
	section.car_info div.table_info div.line > div.tit:first-child{ border-left: 1px solid #ccc;}
	section.car_info div.table_info div.line:last-child > div{ border-bottom: 1px solid #ccc;}

	section.counsel_btn{ padding-top: 20px;}
	section.counsel_btn ul{ display: flex; gap: 20px;}
	section.counsel_btn ul li{ overflow: hidden; border-radius: 999px;}
	section.counsel_btn ul li a{ display: block; padding: 16px 65px 14px; font-weight: bold; font-size: 20px; color: #fff;}
	section.counsel_btn ul li button{ display: block; padding: 16px 65px 14px; font-weight: bold; font-size: 20px; color: #fff;}
	section.counsel_btn ul li:first-child{ background: #3b5a99;}
	section.counsel_btn ul li:last-child{ background: #2083c0;}

	section.detail_info{ padding: 45px 0;}
	section.detail_info div.inner_wrap > div.tab_wrap ul{ display: flex;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li{ flex: 1;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li a{ display: block; width: 100%; height: 100%; padding: 15px 0; font-weight: 500; font-size: 18px; border-bottom: 1px solid #e51c28; text-align: center; background: #f7f7f7;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li a.active{ color: #e51c28; border: 1px solid #e51c28; border-bottom: none; background: #fff;}
	section.detail_info div.info_wrap{ padding: 15px; border: 1px solid #e51c28; border-top: none;}
	section.detail_info div.info_wrap div.tab_wrap ul{ display: flex;}
	section.detail_info div.info_wrap div.tab_wrap ul li{ flex: 1;}
	section.detail_info div.info_wrap div.tab_wrap ul li button{ display: block; width: 100%; height: 100%; padding: 12px 0; font-size: 18px; color: #fff; background: #e51c28; cursor: default;}
	section.detail_info div.info_wrap div.ul_wrap{ display: flex;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap{ position: relative; flex: 1; padding: 10px 15px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap::after{ content: ""; position: absolute; right:0; top: 10px; bottom: 10px; display: block; width: 1px; background: #ccc;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap:last-child::after{ display: none;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li{ color: #505050;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li.active{ color: #e51c28;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li + li{ margin-top: 5px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li span{ display: inline-block; margin-left: 5px;}

	section.detail_img div.info_wrap ul{ display: flex; flex-wrap: wrap; gap: 10px;}
	section.detail_img div.info_wrap ul li{ width: calc((100% - 10px) / 2);}
	section.detail_img div.info_wrap ul li img{ display: block; width: 100%;}

	div.right_info{ z-index: 10; position: fixed; right: 50px; top: 50%; transform: translateY(-50%); padding: 30px 15px; border-radius: 7px; box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);}
	div.right_info p.tit{ margin-bottom: 15px; font-weight: bold; font-size: 17px; text-align: center;}
	div.right_info p.car_pr{ margin-bottom: 5px; font-size: 13px;}
	div.right_info p.price{ margin-bottom: 10px; font-weight: bold; color: #009543}
	div.right_info div.car_tag{ margin-bottom: 10px;}
	div.right_info div.car_tag ul li{ margin-top: 8px; font-size: 13px;}
	div.right_info div.chat{ margin-bottom: 5px;}
	div.right_info div.chat a{ display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; font-size: 14px; font-weight: 500; color: #fff; border-radius: 5px;
	text-align: center; background: #3b5a99;}
	div.right_info div.chat a img{ display: block; width: 7px;}
	div.right_info button{ display: block; width: 100%; padding: 8px 0; font-size: 14px; font-weight: 500; color: #fff; border-radius: 5px; text-align: center; background: #000;}
}
@media(max-width: 991px){
	section.car_info{ padding: 30px 10px 0;}
	section.car_info div.car_head{ padding: 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc;}
	section.car_info div.car_head h2{ overflow:hidden; display: -webkit-box; margin-bottom: 10px; font-weight: 500; font-size: 22px; text-overflow: ellipsis; -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;} 
	section.car_info div.car_head p.car_price{ text-align: right;}
	section.car_info div.car_head p.car_price span{ font-weight: bold; font-size: 16px; color: #009543;}
	section.car_info div.car_tag{ display: none;}
	section.car_info div.img_wrap{ display: flex; gap: 5px; margin-bottom: 30px;}
	section.car_info div.img_wrap div.big_img{ width: 70%;}
	section.car_info div.img_wrap div.big_img img{ display: block; width: 100%;}
	section.car_info div.img_wrap div.sm_img{ width: 30%;}
	section.car_info div.img_wrap div.sm_img ul{ display: flex; flex-wrap: wrap; gap: 5px;}
	section.car_info div.img_wrap div.sm_img ul li{ width: calc((100% - 15px) / 4);}
	section.car_info div.img_wrap div.sm_img ul li img{ display: block; width: 100%;}
	section.car_info div.img_sl img{ display: block; width: 100%; margin-bottom: 20px;}
	
	section.car_info h3.table_info_tit{ margin-bottom: 10px; color: #e51c28; font-size: 18px;}

	section.car_info div.flex_wrap div.db_wrap{ padding: 12px; border: 1px solid #ccc;}
	section.car_info div.flex_wrap div.db_wrap div.logo_wrap{ width: 150px; margin-bottom: 20px;}
	section.car_info div.flex_wrap div.db_wrap div.logo_wrap img{ display: block; width: 100%;}
	section.car_info div.flex_wrap div.db_wrap textarea{ width: 100%; height: 88px; padding: 7px; font-size: 14px; background: #e5e5e5; resize: none;}
	section.car_info div.flex_wrap div.db_wrap input{ width: 100%; padding: 10px; border: 1px solid #ccc;}
	section.car_info div.flex_wrap div.db_wrap input[type="submit"]{ display: block; width: 100%; padding: 12px 0; font-size: 14px; text-align: center; color: #fff; border: none; background: #e51c28;}

	section.car_info div.table_info{ margin-bottom: 40px;}
	section.car_info div.table_info div.line{ display: flex; flex-wrap: wrap;}
	section.car_info div.table_info div.line > div{ padding: 13px 10px; border-top: 1px solid #ccc; border-right: 1px solid #ccc;}
	section.car_info div.table_info div.line > div.tit{ width: 30%; padding-left: 20px; color: #000; background: #e5e5e5;}
	section.car_info div.table_info div.line > div.desc{ width: 70%;}
	section.car_info div.table_info div.line:last-child > div:nth-child(3){ border-bottom: 1px solid #ccc;}
	section.car_info div.table_info div.line:last-child > div:nth-child(4){ border-bottom: 1px solid #ccc;}

	section.detail_info{ padding: 40px 10px 0;}
	section.detail_info div.inner_wrap > div.tab_wrap ul{ display: flex;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li{ flex: 1;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li a{ display: block; width: 100%; height: 100%; padding: 12px 0; font-size: 14px; border-bottom: 1px solid #e51c28; text-align: center;
	background: #f7f7f7;}
	section.detail_info div.inner_wrap > div.tab_wrap ul li a.active{ color: #e51c28; border: 1px solid #e51c28; border-bottom: none; background: #fff;}
	section.detail_info div.info_wrap{ padding: 10px; border: 1px solid #e51c28; border-top: none;}
	section.detail_info div.info_wrap div.tab_wrap ul{ display: flex;}
	section.detail_info div.info_wrap div.tab_wrap ul li{ flex: 1;}
	section.detail_info div.info_wrap div.tab_wrap ul li button{ display: block; width: 100%; height: 100%; padding: 12px 0 10px; font-size: 15px; background: #f7f7f7;}
	section.detail_info div.info_wrap div.tab_wrap ul li button.active{ display: block; width: 100%; height: 100%; padding: 12px 0 10px; font-size: 15px; color: #fff; background: #e51c28;}
	section.detail_info div.info_wrap div.ul_wrap{ display: flex;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap{ position: relative; flex: 1; padding: 10px 5px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul{ display: flex; flex-wrap: wrap; gap: 5px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li{ width: calc((100% - 5px) / 2); color: #505050; font-size: 14px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li.active{ color: #e51c28;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap ul li span{ display: inline-block; margin-left: 5px;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap2{ display: none;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap3{ display: none;}
	section.detail_info div.info_wrap div.ul_wrap div.opt_wrap4{ display: none;}

	section.detail_img div.info_wrap ul{ display: flex; flex-wrap: wrap; gap: 10px;}
	section.detail_img div.info_wrap ul li{ width: calc((100% - 10px) / 2);}
	section.detail_img div.info_wrap ul li img{ display: block; width: 100%;}

	section.counsel_btn{ padding: 0 10px;}
	section.counsel_btn ul{ display: flex; gap: 20px;}
	section.counsel_btn ul li{ overflow: hidden; flex: 1; border-radius: 999px;}
	section.counsel_btn ul li a{ display: block; width: 100%; padding: 16px 0 14px; font-weight: bold; font-size: 20px; color: #fff; text-align: center;}
	section.counsel_btn ul li button{ display: block; width: 100%; padding: 16px 0 14px; font-weight: bold; font-size: 20px; color: #fff; text-align: center;}
	section.counsel_btn ul li:first-child{ background: #3b5a99;}
	section.counsel_btn ul li:last-child{ background: #000;}
	
	div.right_info{ display: none;}
}

.bg_howmuch{ background-color: #f9d5d5;}

.big_img{ position: relative; transition: all 0.3s ease-in-out; border-radius: 5px;}

.big_img img{ border-radius: 5px;}

.sm_img li{ cursor: pointer;}

.sm_img li img{ border-radius: 5px;}

/* 기본 메인 플레이어 스타일 */
#youtube-video{ width: 836px; height: 627px; transition: all 0.3s ease-in-out; border-radius: 5px;}

/* PiP 모드 (고정 위치) */
.pip-mode #youtube-video{ position: fixed; bottom: 85px; right: 20px; width: 300px; height: 200px; z-index: 1000; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}

/* 닫기 버튼 */
.pip-mode .close-btn{ position: fixed; bottom: 250px; right: 25px; z-index: 1100; background: rgba(255, 0, 0, 0.85); color: white; border: none; padding: 8px 12px; cursor: pointer;
font-size: 14px; font-weight: bold; border-radius: 8px; display: none; transition: all 0.3s ease-in-out; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);}

/* 호버 시 효과 */
.pip-mode .close-btn:hover{ background: rgba(200, 0, 0, 0.95); transform: scale(1.1);}

/* 클릭 시 효과 */
.pip-mode .close-btn:active{ transform: scale(0.95);}

#detail_data img{ width: 100%;}


/* 슬라이더 전체 컨테이너 */
.img_sl{ width: 100%; max-width: 600px; margin: 0 auto; position: relative;}

.slider-for{ position: relative; width: 100%;}

/* 이미지 크기 조정 */
.slider-for img{ width: 100%; height: auto; max-height: 400px; object-fit: contain; background-color: #f5f5f5;}

/* 버튼 스타일 */
.slick-prev,
.slick-next{ position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: 0.3s;}

.slick-prev:hover,
.slick-next:hover{ background-color: rgba(0, 0, 0, 0.8);}

.slick-prev{ left: -10px;}

.slick-next{ right: -10px;}


/* 모바일 최적화 */
@media (max-width: 991px) {
	.slick-slide iframe {
		width: 100%;
		height: 300px;
		margin-bottom: 20px;
	}

	.img_sl {
		max-width: 100%;
		padding: 0 15px;
	}

	.slider-for img {
		max-height: 300px;
	}

	/* 모바일에서 버튼 작게 조정 */
	.slick-prev,
	.slick-next {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}