@charset "utf-8";
[data-main-con]									{ margin-top:3.125em; }
@media all and (max-width:1568px){
	[data-main-con]											{ margin-top:4.63em; }
}
@media all and (max-width:1268px){
	[data-main-con]											{ margin-top:4em; }
}
@media all and (max-width:868px){
	[data-main-con]											{ margin-top:3.63em; }
}
@media all and (max-width:468px){
	[data-main-con]											{ margin-top:3em; }
}
				

/* 타이틀 */
h2.title									{ font-size:1.875rem; color:var(--color-point); line-height:1; margin-bottom:.75em; font-weight:700; } 


@media all and (max-width:1368px){
	h2.title								{ font-size:1.75em; }	
}
@media all and (max-width:868px){
	h2.title								{ font-size:1.563em; }
}

/**********************************************************************
 					Visual (전화번호, 비주얼) 
**********************************************************************/

[data-main-con="visual_wrap"]  										{ display:flex; flex-wrap:wrap; gap:40px; min-height:500px; margin-top:0 }

/* 전화번호안내 */
[data-main-con="visual_wrap"] .phone_info  							{ width:360px; padding:2.5rem; background-color:#dee9ff; border-radius:25px; text-align:center;}
[data-main-con="visual_wrap"] .phone_info h2  						{ position:relative; color:var(--color-black); display:flex; align-items: center; gap:10px; justify-content: center; margin-bottom:1.25em}
[data-main-con="visual_wrap"] .phone_info h2 .icon   				{ display: block; width: 41px; height: 42px; background: url(/resource/vehicle/images/main/phone_info.svg) no-repeat center / contain;}
[data-main-con="visual_wrap"] .phone_info ul  						{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); gap: 20px; } 
[data-main-con="visual_wrap"] .phone_info ul li 					{ display: flex; align-items: center; justify-content: center; } 
[data-main-con="visual_wrap"] .phone_info ul li a {display: flex;align-items: center;}
[data-main-con="visual_wrap"] .phone_info .number   				{ font-size:1.438rem; font-weight:600; letter-spacing: -0.05em;}
[data-main-con="visual_wrap"] .phone_info .label  					{ background:var(--color-white); border-radius:10px; color:#1a2f88; display:inline-block; width:110px; margin-right:1.25rem; padding:7px 0; font-weight:500}
[data-main-con="visual_wrap"] .area-code 							{ font-weight:300 }

/* 비주얼 */
[data-main-con="visual_wrap"] .visual  								{ flex:1; padding:2rem; background:#82d7e3; border-radius:25px; position: relative; overflow: hidden; width:100%}
[data-main-con="visual_wrap"] .visual:before  						{ content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); background: url(/resource/vehicle/images/main/visual_bg.png) no-repeat center bottom; width:100%; height:100%; background-size: cover;}

[data-main-con="visual_wrap"] .visual_tit  							{ text-align:center; max-width: calc(100% - 100px); position: relative; z-index: 1}
[data-main-con="visual_wrap"] .visual_tit .tit						{ font-family:var(--font-jalnan); font-size:1.25rem; color:var(--color-black);}
[data-main-con="visual_wrap"] .visual_tit .tit span					{ display:block; color:var(--color-white); font-size:2.813rem;}

[data-main-con="visual_wrap"] .visual_tit .list						{ color:var(--color-base1); font-size:1.188rem; }


[data-main-con="visual_wrap"] .visual .btn  						{ width:170px; height:170px; display:flex; align-items:center; color:var(--color-white); border-radius:100%; justify-content:center; padding:30px; text-align:center; position:absolute; right:30px; flex-direction:column; gap: 10px; line-height: 1.25rem;
																	font-size:1.125rem; font-weight:600}
[data-main-con="visual_wrap"] .visual .btn01  						{ background: linear-gradient(190deg,rgba(21, 187, 178, 1) 0%, rgba(64, 212, 172, 1) 100%); top:65px}
[data-main-con="visual_wrap"] .visual .btn02  						{ background: linear-gradient(190deg,rgba(7, 167, 218, 1) 0%, rgba(43, 199, 223, 1) 100%); bottom:65px }
[data-main-con="visual_wrap"] .visual .btn01 .icon   				{ display: block; width:100px; min-width:100px; height: 32px; background: url(/resource/vehicle/images/main/visual_btn01.png) no-repeat center top / cover}
[data-main-con="visual_wrap"] .visual .btn02 .icon   				{ display: block; width:60px; min-width:60px; height: 48px; background: url(/resource/vehicle/images/main/visual_btn02.svg) no-repeat center top / cover}

[data-main-con="visual_wrap"] .visual .btn:hover,
[data-main-con="visual_wrap"] .visual .btn:focus  					{ box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: scale(1.02); }



@media all and (max-width:1368px){	
	[data-main-con="visual_wrap"] .visual_tit .tit span				{ font-size:2.5rem }
	[data-main-con="visual_wrap"] .visual_tit .list					{ font-size:1rem; }

}
@media all and (max-width:1268px){
	[data-main-con="visual_wrap"]  									{ gap:20px; min-height:auto; flex-direction:column;}
	[data-main-con="visual_wrap"] .phone_info  						{ width:100%; padding:1.875rem}
	[data-main-con="visual_wrap"] .phone_info ul  					{ grid-template-columns: repeat(3, 1fr); grid-template-rows:auto}

	[data-main-con="visual_wrap"] .visual  							{ min-height:450px }
	[data-main-con="visual_wrap"] .visual_tit  						{ max-width:100% }
	[data-main-con="visual_wrap"] .visual .btn  					{ width:47%; display:flex; border-radius:10px; flex-direction:row; height:50px}
	[data-main-con="visual_wrap"] .visual .btn01  					{ right:inherit; left:2%; top:inherit; bottom:2%}
	[data-main-con="visual_wrap"] .visual .btn02  					{ right:2%; bottom:2% }
	

}
@media all and (max-width:1024px){
	[data-main-con="visual_wrap"] .phone_info ul  					{ grid-template-columns: repeat(2, 1fr);}

	[data-main-con="visual_wrap"] .visual  							{ min-height:400px } 
	[data-main-con="visual_wrap"] .visual .btn  					{ font-size:1rem; }

}
	
@media (max-width: 768px) {

  [data-main-con="visual_wrap"] .phone_info .number { font-size: 1.125rem; }
  [data-main-con="visual_wrap"] .phone_info .label {width: 80px;padding: 4px 0; margin-right: 0.75rem; text-align:center; }

  [data-main-con="visual_wrap"] .visual  							{ min-height:350px }  
  [data-main-con="visual_wrap"] .visual_tit .tit span  				{ font-size:1.875rem }


}
@media all and (max-width:568px){
	[data-main-con="visual_wrap"] .phone_info						{ padding:1.5rem; }
	[data-main-con="visual_wrap"] .phone_info ul					{ gap:10px; }
	[data-main-con="visual_wrap"] .visual_tit .tit 					{ font-size:1rem; }
	[data-main-con="visual_wrap"] .visual_tit .tit span  			{ font-size:1.25rem; }
	[data-main-con="visual_wrap"] .visual_tit .list  				{ display:none; }
	[data-main-con="visual_wrap"] .phone_info ul { grid-template-columns: 1fr; grid-template-rows: auto; }
	[data-main-con="visual_wrap"] .visual  							{ padding:2rem 1rem 200px; }
	[data-main-con="visual_wrap"] .visual .buttons  				{ position:static; margin-top:2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:1 }
	[data-main-con="visual_wrap"] .visual .btn  					{ position:static; width:100%; padding:1rem 2rem; flex-direction: row; gap: 0.5rem; }
	[data-main-con="visual_wrap"] .visual .btn01 .icon				{ width:50px; height:16px; min-width:50px; }
	[data-main-con="visual_wrap"] .visual .btn02 .icon				{ width:50px; height:40px; min-width:50px; }
  
 }
@media all and (max-width:368px){


}


/**********************************************************************
 							banner 
**********************************************************************/
[data-main-con="banner"]										{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
[data-main-con="banner"] .banner  								{ position:relative; border-radius:15px; padding:2.188rem; }
[data-main-con="banner"] .banner h2								{ margin-bottom:1.875rem; padding-left:10px}
[data-main-con="banner"] .banner ul								{ display:grid; grid-template-columns:repeat(2, 2fr); gap:10px }
[data-main-con="banner"] .banner ul li	 						{ display:flex; align-items:center; justify-content:center;}
[data-main-con="banner"] .banner ul li a  						{ position:relative; background-color:var(--color-white); border-radius:20px; padding:14px 10px 14px 40px; width:100%; line-height:1}
[data-main-con="banner"] .banner ul li a:before  				{ content:''; position:absolute; top:calc(50% - 1px); left:30px; transform:translateY(-50%); width:4px; height:7px; background:url(/resource/vehicle/images/common/icon_next.svg) no-repeat;  }	
[data-main-con="banner"] .banner ul li a:hover,
[data-main-con="banner"] .banner ul li a:focus  				{ box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: scale(1.02); color:var(--color-point);}

[data-main-con="banner"] .banner:before 						{ content: ''; position: absolute; top: 10px; right: 40px; width: 100px; height: 80px; background-repeat: no-repeat; background-position: right top; background-size: contain;  z-index: 0;}
[data-main-con="banner"] .ban01  								{ background:#d5ecfc }
[data-main-con="banner"] .ban01:before  						{ top: 25px; right: 40px; background-image:url("/resource/vehicle/images/main/ban01.svg"); width:130px; height:100px}
[data-main-con="banner"] .ban01 h2   							{ color:var(--color-point);}
[data-main-con="banner"] .ban02  								{ background:#dee9ff }
[data-main-con="banner"] .ban02:before  						{ background-image:url("/resource/vehicle/images/main/ban02.png")}
[data-main-con="banner"] .ban02 h2   							{ color:#1a2f88; }
[data-main-con="banner"] .ban03  								{ background:#def8ff }
[data-main-con="banner"] .ban03:before  						{ background-image:url("/resource/vehicle/images/main/ban03.svg")}
[data-main-con="banner"] .ban03 h2   							{ color:#19a8b9; }

@media all and (max-width:1368px){
	[data-main-con="banner"]  									{ gap:20px  }
	[data-main-con="banner"] .banner							{ padding:1.563rem; }
	[data-main-con="banner"] .banner ul 						{ grid-template-columns:repeat(1, 2fr); }
	[data-main-con="banner"] .banner:before  					{ width:80px }
	[data-main-con="banner"] .ban01:before     					{ width:100px; }
}
@media all and (max-width:1268px){
	[data-main-con="banner"] 									{ grid-template-columns: repeat(2, 1fr);}
	[data-main-con="banner"] .banner:nth-child(3) 				{ grid-column: span 2; }
}
	
@media all and (max-width:768px){
	[data-main-con="banner"]  									{ grid-template-columns: 1fr;}
	[data-main-con="banner"] .banner h2  						{ margin-bottom:1.25rem }
	[data-main-con="banner"] .banner:nth-child(3)   			{ grid-column: auto; }
	[data-main-con="banner"] .banner:before  					{ top:5px }
	[data-main-con="banner"] .ban01:before     					{ top:15px}
}


/**********************************************************************
 							notice
**********************************************************************/
[data-main-con="notice"]										{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom:5rem; }
[data-main-con="notice"] .notice								{ position:relative; border-radius:15px; padding:2.188rem; background-color:#f1f6f9;  min-width: 0;}
[data-main-con="notice"] .notice h2  							{ margin-bottom:1.875rem; padding-left:10px}
[data-main-con="notice"] .notice ul   							{ background:var(--color-white); border-radius:15px; padding:1.25rem 1.875rem}
[data-main-con="notice"] .notice ul li a 						{ display: block; position: relative; background-color: var(--color-white); padding: 1rem 0; text-decoration: none; transition: 0.3s ease; border-bottom:1px solid #e5e5e5;}
[data-main-con="notice"] .notice ul li a strong 				{ display: block; font-size: 1.25rem; color: #222; margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 50px); font-weight:500}
[data-main-con="notice"] .notice ul li a span 					{ display: block; color:var(--color-base3);}
[data-main-con="notice"] .notice ul li a::after 				{ content: ''; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 10px; height: 19px; background: url("/resource/vehicle/images/main/notice_arrow.png") no-repeat center / contain; transition: transform 0.3s ease;}
[data-main-con="notice"] .notice ul li a:hover::after,
[data-main-con="notice"] .notice ul li a:focus::after 			{ transform: translateY(-50%) translateX(3px);}
[data-main-con="notice"] .notice ul li:nth-child(3) a  			{ border-bottom:none }
[data-main-con="notice"] .notice ul li a:hover strong,
[data-main-con="notice"] .notice ul li a:focus strong  			{ color:var(--color-point); }

[data-main-con="notice"] .btn									{ position:absolute; display:flex; justify-content:end; right:0; top:0; background:url("/resource/vehicle/images/main/bg_notice.png") no-repeat right top / auto 100%; width:95px; height:91px;  }
[data-main-con="notice"] .btn .more								{ position:relative; display:inline-block; width:45px; height:45px; border-radius:100%; transition:var(--trans-ani); background-color:var(--color-point); vertical-align:middle}
[data-main-con="notice"] .btn .more::before						{ position:absolute; left:50%; top:50%; width:25px; height:25px; background:url("/resource/vehicle/images/main/notice_more.svg") no-repeat 100% 100% / auto; content:''; transform:translate(-50%, -50%); }
[data-main-con="notice"] .btn .more:hover,
[data-main-con="notice"] .btn .more:focus						{ background:#1a2f88 }

@media all and (max-width:1268px){
	[data-main-con="notice"]			  						{ grid-template-columns: 1fr;}

}

@media all and (max-width:1024px){

}
	
@media all and (max-width:768px){
	[data-main-con="notice"] 									{ gap:20px; margin-bottom:3.125rem; }
	[data-main-con="notice"] .notice  							{ padding:1.563rem; }
	[data-main-con="notice"] .notice h2  						{ margin-bottom:.75rem }
	[data-main-con="notice"] .notice ul  						{ padding:0.938rem 1.563rem; }
	[data-main-con="notice"] .notice ul li a strong 			{ white-space: normal; font-size:1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
	[data-main-con="notice"] .btn  								{ width:78px; height:76px;}
	[data-main-con="notice"] .btn .more  						{ width:40px; height:40px; }
}
@media all and (max-width:368px){
	[data-main-con="notice"] .notice ul li a strong 	 		{ margin-bottom:0 }
	[data-main-con="notice"] .notice ul li a span 				{ display:none }

}