@charset "utf-8";

/*layout*/
.d_cont-wrapper{
	max-width:2000px;
	height:100%;
	margin:0 auto;
	display: flex;
	flex-direction: column;
}
.d_contBox{
	width:100%; 
	padding:0 30px;
	box-sizing: border-box;
}
.d_contBox-bt{
	width:100%; 
	padding:30px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.d_contBox:nth-child(1){
	font-size:30px;
	font-family: "Land Rover Web", "arial", "helvetica", sans-serif;
	height:120px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.d_contBox:nth-child(2){
	display: flex;
	justify-content: space-between;
}
.d_contBox:nth-child(3){
	display: flex;
	justify-content: space-between;	
	padding: 30px;
}
.d_contBox:nth-child(4) .option{
	width:100%;
}
.carImages{
	width:65%;	
}
.carImages img{	
	width:100%;
}
.carInfo{	
	width:35%;			
	display: flex;	
	flex-direction: column;
	justify-content: space-between;
}
.carInfo .info_list{
	display: flex;	
	flex-direction: column;
}
.carInfo li{		
	width:100%;
	margin-bottom:10px;
	padding-left: 30px;
	box-sizing: border-box;
}
.carInfo li p{
	display: block;
	width:100%;
}
.carInfo li p:first-child{
	font-weight:bold;
}
.carInfo li p:last-child{	
	color:var(--gray2);
}
.carInfo .price{
	height:60px;		
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top:1px solid var(--gray4);
	padding-left: 30px;
}
.carInfo .price a { 	
	font-size:14px;		
	display: flex;		
}
 .carInfo .price a img{
	width:22px;
}
.carInfo .price a p{		
	line-height: 22px;
	padding-left: 5px;
	font-weight:bold;
}
.info_bt{
	display: flex;
	align-items: center;	
	height:50px;	
	font-weight: bold;
	border-top:1px solid var(--gray4);
	border-bottom:1px solid var(--gray4);
}
/*결제고객정보입력페이지- .form_field_100는 common.css에 */
.orderForm{
	width:35%;
	display: flex;	
	flex-direction: column;	
	padding-left: 20px;
	box-sizing: border-box;
}
a.secondary_link{display:block; }
a.secondary_link:before{display:inline-block; content:""; background-image: url("../images/chevron-right-solid.svg"); background-size:6px 9px; 
          width:6px; height:9px; margin-right:10px;  }

.d_contBox .option{	
	width: 32%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.d_contBox .option .option_title{
	margin-bottom: 20px;
}
.d_contBox .option .option_title h3{
	display:flex;
	align-items: center;
	font-size:16px;
	font-weight: bold;
}
.d_contBox .option .option_title button{
	margin-left: 10px;
}

.d_contBox .option .option_img img{
	width:100%; 
	border-radius: 14px;
	padding:5px;
	border:2px solid rgba(0,0,0,0);
	box-sizing: border-box; 
	opacity: 0.5;
}
.d_contBox .option .option_img img.img_on{
	border:2px solid #005a2b; 
	opacity: 1;
}
.d_contBox .option .option_txt{
	margin-top: 10px;
}
.d_contBox .highlight .hl-pc-wrapper{
	
	display:flex;
	justify-content: space-between;
}
.d_contBox .highlight .hl-pc-slide{
	position: relative;
	width:19%;
}
.d_contBox .highlight img{
	width:100%;
	border-radius: 6px;
}
.highlight a.hl_pop_view{
	position: absolute;
	top:0;		 
    left:0;
	width:100%; 
	height:100%; 
	color:rgba(255, 255, 255, 0.5);
	transition: 0.3s;
	background: rgba(0,0,0,0);
	display: flex;
	justify-content: center;
	align-items: center;
}
.highlight a.hl_pop_view:hover{			
	cursor: pointer; 
	font-size:60px;
	line-height:30px; 		
	border-radius: 6px;
	background: rgba(0,0,0,0.5);

}

.highlight p.hl_ptext{
	position: absolute;  
	bottom:10px; 
	left:12px; 
	font-size:14px; 
	line-height: 16px; 
	color:#fff; 
	text-shadow: 0 2px 2px rgba(0,0,0,.5);
	ont-weight: 600; 
	letter-spacing: -1.6px; 
}
.d_contBox .highlight .swiper-container{
	display: none;
}
@media (min-width:1024px) and (max-width:1380px){
	.d_contBox .carImages{
		min-width:660px;	
	}	
	
	.d_contBox .carInfo .info_list ul{
		height:300px;
		overflow-y: auto;
	}
	
}

/*모바일-테블릿*/
@media screen and (max-width: 1024px){	
	.d_contBox:nth-child(1){
		font-size: 18px;
		height:80px;
	}
	.d_contBox:nth-child(2){
		display: flex;
		flex-direction: column;
	}
	.d_contBox:nth-child(3){
		flex-direction: column;
	}
	.carImages{
		width:100%;	
	}
	.carInfo{
		width:100%;
		margin-top: 30px;
	}
	.carInfo li,.d_contBox .info_bt{
		padding-left: 0;
	}
	.carInfo .info_list ul{
		height:100%;		
	}
	.d_contBox .carInfo .price{		
		padding-left: 0;
	}
	.d_contBox .option{	
	    width: 100%;
	    margin-top: 30px;
	}
	.d_contBox .highlight ul{
		display:flex;
		flex-direction: column;
	}
	.d_contBox .highlight li{
		width:100%;
	}	
	.d_contBox .highlight .hl-pc-wrapper{
		display: none;
	}
	.d_contBox .highlight .swiper-container{
		display: block;
	}
	.orderForm{
		width:100%;
		padding-left:0;
	}
}