@charset "utf-8";

#container_title {display: none}

/* 차량별 구매 가이드 */
#car .sec01 {}
#car .sub-con-tit {text-align: left; letter-spacing: -.05em}
#car .sub-con-tit p {letter-spacing: 0}
.car_guide_list {display: flex; flex-wrap: wrap; gap: 45px;}
.car_guide_list .box {display: block; flex: 1 1 30%; cursor: pointer}
.car_guide_list .box .name {margin-top: 10px}

.ex_list {display: flex; flex-direction: column; gap:40px}
.ex_list .list {position: relative; display: flex; align-items: center; width: 100%; aspect-ratio: 1300 / 384;}
.ex_list .list.studio {background:url('../../img/pages/buying/guide/bg_ex01.jpg') no-repeat center center / cover;}
.ex_list .list.gallery {background:url('../../img/pages/buying/guide/bg_ex02.jpg') no-repeat center center / cover;}
.ex_list .list.bespoke {background:url('../../img/pages/buying/guide/bg_ex03.jpg') no-repeat center center / cover;}
.ex_list .list.service {background:url('../../img/pages/buying/cover/bg_ex01.jpg') no-repeat center center / cover;}
.ex_list .list.showroom {background:url('../../img/pages/buying/cover/bg_ex02.jpg') no-repeat center center / cover;}
.ex_list .list.cn_gallery {background:url('../../img/pages/buying/cover/bg_ex03.jpg') no-repeat center center / cover;}

.ex_list .list .txt {color: #fff; margin-left: 75px}
.ex_list .list .txt dt {font-size: var(--font25); margin-bottom: 5px; font-weight: 600}
.ex_list .list .txt .btn_wrap {margin-top: 20px}
.ex_list .list .txt .btn_wrap .btn {height: 30px; font-size: var(--font12); border-radius: 0}


/* 구매가이드 상세 */
#car_detail .sec_pic {padding-top: var(--gap-md)}
#car_detail .sec_pic .con-txt {line-height: 2; font-size: var(--font20); margin-bottom: var(--gap-lg)}
#car_detail .sec_pic .img_wrap {position: relative; width: 100%; aspect-ratio: 1300 / 484; background:url('../../img/pages/buying/guide/pic_detail01.jpg') no-repeat center center / cover; margin-top: var(--gap-md)}
#car_detail .sec_pic .img_wrap .con-txt {position:absolute;top:50%;left:100px;transform:translate(0,-50%);font-size:35px; line-height: 1.3; letter-spacing: -.04em; font-weight: bold; color: #fff}


.detail_title {display: block; text-align: center; font-size: var(--font32); font-weight: 500; margin-bottom: var(--gap-tit)}
#car_detail.sub-com .sub-page-tit h2 {letter-spacing: -.05em; font-size: var(--font45);}

.basic_tbl {width: 100%; text-align: left; font-size: var(--font18); border-top: 1px solid var(--bk);}
.basic_tbl th {padding: 10px; width: calc(100% / 4); background: #D9D9D9; border-bottom: 1px solid var(--bk); font-weight: 700}
.basic_tbl td {padding: 10px; border-bottom: 1px solid var(--bk);}

.basic_info {display: flex; gap: var(--gap-md); margin-top: var(--gap-md); font-size: var(--font18)}
.basic_info dt {width: 290px; flex-shrink: 0; display: flex; flex-direction: column; justify-content:center; background: #F5F5F5; padding: 10px}
.basic_info dt strong, .basic_info dd strong {font-weight: 700;}

/* 아코디언메뉴 */
.accordion_list {border-top: 1px solid var(--bk)}
.accordion_list .list {display: block; border-bottom: 1px solid var(--bk)}
.accordion_list .con_head {display: block; position: relative; font-size: var(--font25); padding: 20px 50px; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid #aaa}
.accordion_list .con_head em {position: absolute; left: 0; font-weight: 700;}
.accordion_list .con_head:after {content: ""; display: block; width: 24px; height: 24px; position: absolute; top:50%; right: 0; transform: translate(0, -50%); background:url('../../img/pages/buying/guide/accordion_arrow_down.svg') no-repeat center center / contain;}
.accordion_list .con_inner {padding: 20px 50px; font-size: var(--font18); line-height: 2}

/* 추천옵션 */
.feature_list {}
.feature_list .con-flex {gap:20px}
.feature_list .feature-bx {width: calc(100% / 3); background: #fff; border: 1px solid #C5C4C2}
.feature_list .feature-bx .con-img  {width: 100%; aspect-ratio: 418 / 255;}
.feature_list .feature-bx .con-txt {padding: 20px; height: 200px; font-size: var(--font16); line-height: 1.5}
.feature_list .feature-bx .con-txt h4 {font-weight: bold; margin-bottom: 5px}
.feature-bx1 .con-img{background:url('../../img/pages/buying/guide/option_01.jpg') no-repeat center center / cover;}
.feature-bx2 .con-img{background:url('../../img/pages/buying/guide/option_02.jpg') no-repeat center center / cover;}
.feature-bx3 .con-img{background:url('../../img/pages/buying/guide/option_03.jpg') no-repeat center center / cover;}

/* 테이블 */
.bk_tbl_wrap {}
.bk_tbl {width: 100%; text-align: left; font-size: var(--font18)}
.bk_tbl th {background: var(--bk); color: #fff;}
.bk_tbl td {border-bottom: 1px solid #C1C1C1}
.bk_tbl th, .bk_tbl td {padding: 10px 20px}
.bk_tbl tr.sub td {background: #D9D9D9; font-weight: 700}
.bk_tbl .name {padding: 0 40px;}
.bk_tbl td.name {font-weight: 700}
.mb_md {margin-bottom: var(--gap-md)}

.bk_tbl.option th, .bk_tbl.option td {width: calc(100% / 6);}

.bk_tbl.pkg td {padding: 20px 20px}
.bk_tbl.pkg th.option, 
.bk_tbl.pkg td.option {width: 20%;}
.bk_tbl.pkg th.price, 
.bk_tbl.pkg td.price {width: 20%;}
.bk_tbl.pkg th.w, 
.bk_tbl.pkg td.w {width: calc(80% / 3);}

#car_detail .sec06 .con-flex.pic {gap: 20px}
#car_detail .sec06 .con-txt {margin-top: 20px}
#car_detail .sec11 .btn_wrap {text-align: center}
#car_detail .sec11 .btn_wrap .btn {border-color: var(--bk); border-radius: 0; height: 30px; font-size: var(--font14)}

/* 찾아가는 시승서비스 */
#cn-service {}
#cn-service .sec01 .img_wrap {position: relative; width: 100%; aspect-ratio: 1300 / 642; background:url('../../img/pages/buying/service/service_img_sec01.jpg') no-repeat center center / cover; }
/* #cn-service .sec01 .img_wrap .con-txt {position: absolute; top: 50%; left: 100px; transform: translate(0, -50%); font-size: 35px; letter-spacing: -.04em; font-weight: bold;color: #fff;} */
#cn-service .sec01 .img_wrap .con-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; letter-spacing: -.04em; font-weight: bold;color: #fff;text-align: center;}
#cn-service .sec02 .inner {display: flex; justify-content: space-between; gap:40px}
#cn-service .sec02 .con-txt h4 {font-size: var(--font32); font-weight: 700; margin: 0 0 20px}
#cn-service .sec02 .con-txt p {line-height: 2; margin-bottom: 50px}
#cn-service .sec02 .pic {position: relative; width:609px; aspect-ratio: 609 / 562;  background:url('../../img/pages/buying/service/service_img_sec02.jpg') no-repeat center center / cover; }

/* 전시장 */
#showroom .map_area { aspect-ratio: 1300 / 700; background: #f8f8f8}
#showroom .sec01 .info_list {margin-top:var(--gap-md)}
.info_list {font-size: var(--font20)}
.info_list li {display: block; position: relative; padding: 0 0 0 10px; margin: 0 0 10px}
.info_list li:before {content: ""; width: 3px; height: 3px; background: var(--bk); border-radius: 100%; position: absolute; left: 0; top:10px;}
.info_list li:last-child {margin: 0}
.info_list li em {display: inline-block; width: 100px; font-weight: 700}

/**********커버***********/
.btn-com{display:flex;align-items: center;justify-content: center;height:50px;border-radius: 3px;font-size:var(--font16);font-weight:600;}
.btn-com.wh{background:#fff;color:var(--bk);border:1px solid #E6E6E6;}
.btn-com.bk{background:var(--bk);color:#fff;}
#buying-cover .cars-list-group{margin-bottom:var(--gap-lg);}
#buying-cover .cars-list-item{width:calc((100% - 40px) / 3);padding:40px;background:#F5F5F5;}
#buying-cover .con-img{aspect-ratio: 450 / 242;}
#buying-cover .btn-wrap{margin-top:40px;}
#buying-cover .btn-wrap>a{width:calc((100% - 8px) / 2);font-size:var(--font16);font-weight:600;}
#buying-cover .cars-list-item .con-txt{font-size:30px;font-weight: 700;border-bottom:none;padding:0;margin:0;}
#buying-cover .cars-list-item h5 {font-weight: 700}
#buying-cover .cars-list-item .con-txt{border-bottom:none;margin-bottom:40px;}
#buying-cover .cars-list-item .con-txt .cost-wrap{margin-top:10px;font-size:16px;font-weight:500;}
#buying-cover .cars-list-item .con-txt .cost-wrap span{font-weight:700;}
#buying-cover .btn-wrap a span{font-weight:inherit !important;}
#buying-cover .go-pick-btn span::after{content: '';display: inline-block;position:relative;top:-2px;width: 6px;height: 10px;margin-left: 10px;background: url(../../img/estimate/est_result_arr.svg) no-repeat center center;background-size: contain;}
#buying-cover .btn-wrap{margin-top:40px;}
#buying-cover .btn-wrap>a{width:calc((100% - 8px) / 2);font-size:var(--font16);}
#buying-cover .cars-lst-item-wrap{display:flex;gap:20px;flex-wrap: wrap;}
#buying-cover .con-top{padding-bottom:10px;border-bottom:1px solid #E6E6E6;margin-bottom:20px;}
#buying-cover .con-top h4{font-size:var(--font16);font-weight:700;color:#5d5d5d;}

.cars-detail-com .sub-contents{padding-top:0;}

#buying-cover .sec01 .img_wrap {position: relative; width: 100%; aspect-ratio: 1300 / 542; background:url('../../img/pages/buying/cover/cover_img_sec01.jpg') no-repeat center center / cover; }
#buying-cover .sec01 .img_wrap .con-txt {position: absolute; top: 50px; left: 75px; font-size: var(--font20); letter-spacing: -.04em;}
#buying-cover .sec01 .img_wrap .con-txt h4{font-size:var(--font25);font-weight:500;}
#buying-cover .sec01 .img_wrap .btn_wrap {margin: 20px 0 0}
#buying-cover .sec01 .img_wrap .btn_wrap .btn {height: 30px; font-size: var(--font12); border-radius: 0; border-color: var(--bk); letter-spacing: 0}
#buying-cover .sec02.sec_ex{padding-top:40px;}



@media screen and (max-width:1280px){

	#buying-cover .cars-list-item {width: calc((100% - 20px) / 2);}

}

@media screen and (max-width:1024px){
	
	.bk_tbl_wrap {overflow-x: auto}
	.bk_tbl_wrap .bk_tbl {width: 1200px}
	.car_guide_list {gap: 16px}
	
	#cn-service .sec01 .img_wrap .con-txt {left: 40px;font-size: var(--font32);transform: translate(0, -50%);text-align: left;}
	#buying-cover .cars-list-item .con-txt {font-size: 26px}
}

@media screen and (max-width:768px){
	
	#car_detail .sec_pic .img_wrap .con-txt {left: 40px; font-size: var(--font32)}
	.basic_info {flex-direction: column}
	.basic_info dt {width: 100%}
	
	.feature_list .feature-bx {width: 100%}
	.feature_list .feature-bx .con-txt {height: auto}
	.feature_list .con-flex {flex-direction: column}
	
	.car_guide_list {gap: 16px}
	.car_guide_list .box {flex:1 1 40%}
	.ex_list .list {aspect-ratio: 16 / 7;}
	.ex_list .list .txt {margin-left: 40px}
	
	#buying-cover .cars-list-item {width: 100%; padding: 28px}
	#buying-cover .btn-wrap {margin-top:20px}
	
	#cn-service .sec02 .inner {flex-direction: column}
	#cn-service .sec02 .pic {width: 100%}
	
	#buying-cover .sec01 .img_wrap .con-txt {left: 40px; top:40px}
	#buying-cover .sec02.sec_ex{padding-top:16px;}
	
}

@media screen and (max-width:500px){
	.bk_tbl_wrap .bk_tbl {width: 700px; font-size: 14px}
	.bk_tbl th, .bk_tbl td {padding:8px 10px; font-size: 14px}
	.bk_tbl.pkg td {padding: 10px 10px}
	.bk_tbl.pkg th.option, .bk_tbl.pkg td.option {width: 100px}
	.bk_tbl.pkg th.w, .bk_tbl.pkg td.w {width: calc(600px / 3)}
	.bk_tbl_wrap .bk_tbl.option {width: 900px}
	.bk_tbl.option th, .bk_tbl.option td {width: calc(800px / 5);}
	.bk_tbl.option th.name, .bk_tbl.option td.name {padding: 0 10px; width: 100px}
	
	#car_detail .sec06 .con-flex.pic {flex-direction: column; gap: 16px}
	
	.basic_tbl {font-size: 14px; display: flex; border-top:1px solid var(--bk)}
	.basic_tbl tr {display: flex; flex-direction: column}
	.basic_tbl th {width: 100%}
	.basic_tbl thead {width: 130px}
	.basic_tbl tbody {width: calc(100% - 130px)}
	.basic_tbl tbody td {text-align: right}
	.basic_info {font-size: 14px}
	
	.accordion_list .con_head {padding: 16px 30px}
	.accordion_list .con_inner {font-size: 14px; padding: 16px 30px}

	.car_guide_list .box .name {font-size: 12px}
	
	#buying-cover .cars-list-item {width: 100%}
	#buying-cover .btn-wrap {margin-top:20px}
	#buying-cover .cars-lst-item-wrap {gap:16px}
	
	.ex_list .list { aspect-ratio: 16 / 9;}
	.ex_list .list .txt {margin-left: 20px}
	.ex_list .list .txt dd {font-size: 12px}
	.ex_list {gap:16px}
	
	.btn-com {height: 44px}
	#cn-service .sec01 .img_wrap .con-txt {left: 20px}
	#buying-cover .sec01 .img_wrap .con-txt {left: 20px; top:20px}
	
}