@charset "utf-8";

.msg_sound_only{display:none;}

.img img{object-fit:cover;transition-duration: 500ms;}
.img:hover img{transform:scale(1.1);}

.cursor_poineter:hover{cursor:pointer}

.container{width: calc(100% - 100px); max-width:1400px; margin:0 auto;}
.section_wrap{position:relative; padding: 140px 0;}
.deco_title{display: flex; align-items: flex-end; justify-content: center;}
.title_box{text-align: center; font-size: 1.8rem; margin-bottom: 60px;}
.title_box .title{font-family: 'SokchoBadaDotum', sans-serif; font-size: 2.2em; line-height: 1.3; color: #161616;}
.title_box .title .color{color: var(--color_dark);}
.title_box .title .point{color: var(--color_point); filter: drop-shadow(1px 1px 1px #0000004d);}

.highlighter{box-shadow: inset 0 -0.6em 0 rgba(119, 243, 187, 0.7); padding: 0 0.2em; }
.title_box .text{margin-top: 30px; line-height: 1.6; color: #444; word-break: keep-all;}

.deco_box {overflow: hidden; display: inline-block; padding-top: 42px; width: fit-content;}
.title_box .deco{position: relative; border-top: 2px dashed rgba(255,255,255,0.6); padding-top: 12px; color: var(--color_point); } 
.title_box .deco::after{position: absolute; font-size: 1.2rem; content: "\e81d"; display: block; font-family: "FontAwesome"; font-weight: 900; top: -34px; color:  #fff; left: 0; animation: moveRight 6s linear infinite;}

@keyframes moveRight {
	0% {left: -10%;}
	100% {left: 120%;}
}

/* 01 상단 슬라이드배너 + 입력폼 */
#main_top{z-index:1; background-image:linear-gradient(to top,  var(--color_main), var(--color_dark)); padding: 0; padding-top: 120px;}
#main_top::before{position: absolute; left: 0; right: 0; bottom: 0;  content:""; height: 140px; z-index: -1; background-color: var(--color_gray);}
#top_article .container{position:relative; max-width: 1400px; width:100%; margin:auto;}
#section_1_1_inner{position:relative;margin-left:-120px;z-index:1;}
#section_1_2_inner{position:absolute;right:0;top:-40px;width:500px;background:#fff;z-index:10;}

#main_top .title, #main_top .text{color: #fff; filter: drop-shadow(1px 1px 1px #0000004d);}
#main_top .flex{display: flex; padding: 50px; background-color: #fff; gap: 30px; border-radius: 30px; box-shadow: 0 0 14px rgba(15, 23, 42, 0.1);}
.top_form_inner_all{flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px;}
.top_form_inner_all .wide {grid-column: span 2;}
.top_form_btn > button {display: flex; background-color: var(--color_dark); padding: 15px; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.6rem; border-radius: 20px;}
.top_form_btn > button > b{animation: text-pulse 2s ease-in-out infinite; color: #fff; font-weight: 800;}
.top_form_btn > label{display: block; margin-top: 12px; font-size: 0.9rem;}
.top_form_btn > label > small{vertical-align: text-top; font-weight: 800; color: #ff8920; margin-left: 4px;}
.top_form_infor > dt{margin-bottom: 10px; font-weight: 600; font-size: 1.2rem;}
.top_form_infor > dt > .color{display: inline-block; width: 1em; color: var(--color_dark);}
.top_form_infor > dt > i{font-weight: 600; color: #ff8920; margin-left: 0.2em;}
.top_form_infor > dd{display: flex; align-items: center; gap: 10px;}
.top_form_infor > dd > input, .top_form_infor > dd > select{flex: 1;}
.top_form_infor .mix > input{width: calc(100% - 4em - 10px);}
.top_form_infor .mix > label{width: 4em;}
.top_form_infor .mix > label:hover{cursor: pointer;}

.option{flex-wrap: wrap; gap: 0; padding: 5px; background-color: #f4f6f8; border-radius: 8px;}
.opt{flex: 1; text-align: center;}
.opt > input{position: absolute; opacity: 0; width: 0; height: 0; font-size: 15px;}
.opt > input + label{display: block; padding: 8.5px 4px; border-radius: 6px; transition-duration: 100ms; color: #666;}
.opt > input + label:hover{cursor: pointer;}
.opt > input[type="radio"]:checked + label{background-color: var(--color_dark); color: #fff; font-weight: 600;}
.opt > input + label > i{margin-right: 2px; font-size: 0.8em; vertical-align: middle;}


.sellphone_select_inner{display:flex; justify-content:space-between;}
.sellphone_select_inner > li{flex: 1;}
.top_form_btn_inner > dt{padding:15px 0;background:var(--color_main)}
.top_form_btn_inner > dt > a{display:block;text-align:center;}
.top_form_btn_inner > dt > button{font-family:'VitroCore' !important;font-size:26px;font-weight:600;color:#fff;}
.top_form_btn_inner > dd{font-size:1rem;margin-top:5px;text-align:center}
.top_form_btn_inner > dd > input[type="checkbox"]{border:1px solid #cbcbcb}
.top_form_btn_inner > dd > i{font-style:normal; }



/* 02 차량예약 아이콘+설명글 */
#main_merit{text-align:center; background-color: var(--color_gray); overflow:hidden;}
#main_merit .bus_title *{color:#fff;}
#main_merit ul{display:flex; gap: 30px;}
#main_merit ul li{flex: 1; display: flex; text-align: center; background-color: rgba(255, 255, 255, 0.98); aspect-ratio: 9 / 10; align-items: center; justify-content: center; flex-direction: column; padding: 30px 20px; gap: 30px; border-radius: 30px;     box-shadow: 0 0 14px rgba(15, 23, 42, 0.08);}
#main_merit ul li .img{ display: flex; width: 50%; max-width: 100px; aspect-ratio: 1 / 1; background-color: var(--color_dark); border-radius: 50%; margin-left: auto; margin-right: auto; align-items: center; justify-content: center;}
#main_merit ul li .img img{display: block; width: 50%;}
#main_merit ul li dl{display:flex; flex-direction:column; align-items:center; gap: 10px; word-break:keep-all; font-size:1.5rem; line-height: 1.4;}
#main_merit ul li dl dt{font-size: 1.4em; font-weight:800; color:#161616;}
#main_merit ul li dl dd{color:#444; min-height: 2.8em;}
.reserve_btn{position: relative; display: inline-block; line-height: 1; width: 80%; max-width: 480px; font-size: 2rem; font-weight: 800; padding: 30px 20px; margin-top: 60px; animation: text-pulse 2s ease-in-out infinite; z-index: 1 !important; overflow: hidden; color: var(--color_point); transition-duration: 200ms;}
.reserve_btn::before{content: ""; position: absolute; top: 0; left: 50%; width: 80%; max-width: 560px; height: 100%; background: #161616; transform: translateX(-50%) skewX(-16deg); z-index: -10000;}
.reserve_btn:hover{animation-play-state: paused;}
@keyframes text-pulse{
	0%		{transform:scale(1);}
	50%		{transform:scale(1.04);}
	100%	{transform:scale(1);}
}


/* 03 이용 방법 */
#main_step{background-color: var(--color_dark);}
#main_step .title_box{color: #fff; margin-bottom: 80px;}
#main_step .title, #main_step .text{color: inherit;}
.step_wrap{position: relative; border-top: 2px dashed rgba(255, 255, 255, 0.6); word-break: keep-all; padding-top: 40px;}
.step_wrap::after{position: absolute; font-size: 1.3rem; content: "\e81d"; display: block; font-family: "FontAwesome"; font-weight: 900; top: -32px; color:  #fff; left: 0; animation: moveRight2 50s linear infinite;}
@keyframes moveRight2 {
	0% {left: 0;}
	100% {left: 98%;}
}
.step_wrap > div{display: flex; gap: 60px;}
.step_img{width: 60%; border-radius: 30px; overflow: hidden; box-shadow: 0 0 14px rgba(20, 91, 58, 0.6);}
.step_img > img{position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;}
.step{display: flex; gap: 30px; flex-direction: column;}
.step > li{position: relative; font-size: 1.2rem; padding: 50px 30px 40px 30px; background-color: rgba(255,255,255,0.98); box-shadow: 0 0 14px rgba(20, 91, 58, 0.6); border-radius: 30px;}

.step > li::before{position: absolute; left: 54px; content: ""; top: -40px; height: 30px; opacity: 0; border-left: 2px dashed rgba(255, 255, 255, 0.6); transition-duration: 600ms;}
.step > li.aos-animate::before{opacity: 1; transition-delay: 800ms;}
.step > li::after{position: absolute; left: 30px; content: ""; top: -1em; width: 40px; height: 40px; display: flex; font-size: 1.4rem; background-color: var(--color_main); color: #fff; align-items: center; justify-content: center; border-radius: 50%; font-weight: 900; border: 6px solid rgba(255,255,255,0.98); content:"\f00c"; font-weight: 900; font-family: "FontAwesome";}
.step .tit{display: block; font-size: 1.6em; color: var(--color_dark); font-weight: 800; margin-bottom: 30px;}
.step .text{line-height: 1.8;}



/* 04 리뷰 */
#main_review{background-color: var(--color_gray); overflow-x: hidden;}
.review_wrap{font-size: 1.2rem; word-break: keep-all;}
.review{display: flex; width: max-content;}
.review li{flex: 0 0 auto; width: 360px; margin-right: 30px; padding: 40px 30px; box-shadow: 0 0 14px rgba(15, 23, 42, 0.08); border-radius: 30px; line-height: 1.8; background-color: #fff;}
.review .info{margin-bottom: 10px;}
.review .info .name{display: block; font-size: 1.1em;}
.review .info .name > small{margin-left: 0.4em;}
.review .info .star{color: #ffca00;}
.review .text{color: #444;}


/* 05 인사말 */
#main_greeting{position:relative; /* background: url("../img/greeting.png") no-repeat center; */ background-size:cover; background-attachment: fixed; background-color: var(--color_main);}
#main_greeting > div{background-color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); border-radius: 30px; font-size: 1.4rem; padding: 100px; word-break: keep-all; box-shadow: 0 0 14px rgba(14, 139, 83, 0.4);}
#main_greeting .title{font-size: 2em; line-height: 1.5; margin-bottom: 60px; text-align: center;} 
#main_greeting .flex{display: flex; gap: 60px;}
#main_greeting .img{width: 40%; border-radius: 30px; overflow: hidden; box-shadow: 0 0 14px rgba(15, 23, 42, 0.08);}
#main_greeting .img > img{display: block; width: 100%; height: 100%; object-fit: cover;}
#main_greeting .text{flex: 1; line-height: 2; padding-bottom: 60px;}
#main_greeting .text b{display:inline-block; font-size:1.2em; font-weight:700; line-height: 1.4; color: var(--color_dark);}




/* 사업영역 */
#section_2_all ul{display:flex; gap:50px;}
#section_2_all ul li{flex: 1; display:flex; flex-direction: column; gap: 40px; text-align:center;}
#section_2_all .img_box{position: relative; border-radius: 30px; overflow: hidden;}
#section_2_all .img_box img{display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2;}
#section_2_all ul li dl{flex: 1; word-break: keep-all; font-size: 1.6rem; line-height: 1.4;}
#section_2_all ul li dl dt{font-size: 1.4em;}
#section_2_all ul li dl dd{color: #444; margin-top: 10px;}


/* 차종 */
#section_4_all{background: var(--color_gray);}
#section_4_all li{position:relative; display:flex; height: -webkit-fill-available; flex-direction:column; text-align:center; gap: 20px; border-radius: 30px; box-shadow: 0 0 10px rgba(15, 23, 42, 0.08); overflow: hidden;}
#section_4_all li .img{display: flex; aspect-ratio: 3 / 2; align-items: center; justify-content: center;}
#section_4_all li .img img{width: 80%;}
#section_4_all li .txt{display:flex; flex-direction:column; gap: 10px; word-break:keep-all; font-size: 1.5rem; line-height: 1.4; color: #444;}
#section_4_all li .txt b{font-size: 1.4em; font-weight: 800; color: #161616;}
#section_4_all li .txt p{}

#section_4_all li:hover{cursor: pointer;}
#section_4_all li::before, #section_4_all li::after{position: absolute;}
#section_4_all li::before{left: 0; right: 0; bottom: 0; top: 0; content: ""; display: block; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px); transition-duration: 200ms; opacity: 0;}
#section_4_all li:hover::before{opacity: 1;}
#section_4_all li::after{top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; aspect-ratio: 1/1; background-color: var(--color_dark); color: #fff; border-radius: 50%; content: "+ 문의하기"; display: flex;  align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; font-weight: 600; transition-duration: 400ms; white-space: nowrap;}
#section_4_all li:hover::after{width: 40%;}
#section_4_all li > a{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10;}

.car-swiper{position:relative; padding: 15px; max-width: 1400px; margin: 0 auto;}
.car-swiper .swiper-slide{box-sizing:border-box; background-color: #fff; padding: 30px 20px; padding-bottom: 60px;}
.car-swiper .swiper-pagination{position: initial; margin-top: 30px;}
.car-swiper .swiper-pagination-bullet{width: 10px; height: 10px;}
.car-swiper .swiper-pagination-bullet-active{background: var(--color_dark);}


.common_tel{display: flex; justify-content: center; flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1; font-size: 0.95rem; color:#fff;}
.common_tel a{white-space: nowrap; flex-shrink: 0; position: relative; font-size: 2em; font-weight: 1000; color: #ffd700; padding-left: 1.2em; background: url('../img/icon/call_icon.png') no-repeat left 50%; background-size: 1em;}
.common_tel p{font-weight:500; align-self:flex-end;}

.common_tel .shine_text{position: relative; display: inline-block; padding-right: 8px; font-weight: 1000; filter: drop-shadow(1px 1px 1px #0000004d); color: transparent; background: linear-gradient(120deg, var(--color_point) 40%, var(--color_point) 40%); background-clip: text; -webkit-background-clip: text; animation: text-pulse 2s ease-in-out infinite; will-change: transform; z-index: 111;}
.common_tel .shine_text::after{content: attr(data-text); position: absolute; inset: 0; color: transparent; background: linear-gradient(120deg, transparent 35%, #ffffff80 50%, transparent 65%); background-size: 180% 100%; background-position: -200% 0; background-clip: text; -webkit-background-clip: text; animation: shine2 4s linear infinite; pointer-events: none;}
@keyframes shine2 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}


/* 팝업창 */
.pc_popup_policy_all{display: none; position: fixed; left: 0; top: 0; z-index: 10000; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);}
.pc_popup_policy_all > article{position:relative; top:50%; width:70vw; margin:0 auto; transform:translateY(-50%); max-width: 720px; border-radius: 20px; overflow: hidden;}
.pc_popup_policy_all .pc_popup_policy_inner p{padding: 30px; height: 60vh; overflow-y:scroll; line-height: 1.6; background:#fff;}
.pc_popup_policy_all .pc_popup_policy_inner p::-webkit-scrollbar {width: 5px;}
.pc_popup_policy_all .pc_popup_policy_inner p::-webkit-scrollbar-track {background: transparent;}
.pc_popup_policy_all .pc_popup_policy_inner p::-webkit-scrollbar-thumb {background: #ddd; border-radius: 5px;}

.pc_popup_policy_all h5{position: sticky; left: 0; top: 0; display: flex; justify-content: space-between; align-items: center; line-height: 1; font-size: 1.2rem; padding-left: 30px; background: #161616; color: #fff; }
.pc_popup_policy_all h5 i{padding: 20px 30px; display: block; width: fit-content;}
.pc_popup_policy_all h5 i:hover{cursor:pointer}



/* 고정 버튼 */
#fixed{position: fixed; right: 30px; bottom: 30px; z-index: 100;}
#fixed > * + *{margin-top: 10px;}
.fixed_btn, #apply_btn{display: flex; align-items: center; justify-content: center;}
.fixed_btn{width: 50px; aspect-ratio: 1/1; font-size: 1.2rem; text-align: center; border-radius: 50%; transition-duration: 100ms; margin-left: auto;}
.fixed_btn:hover{cursor: pointer;}

#call_btn{background-color: var(--color_dark); color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); border: 1px solid rgba(255,255,255,0.3);}
#top_btn{background-color: rgba(255,255,255,0.9); color: var(--color_dark); backdrop-filter: blur(4px); box-shadow: 0 0 10px rgba(15, 23, 42, 0.1);}

.apply_btn_wrap{position: relative;}
.apply_btn_wrap::before{content: ""; position: absolute; inset: -4px -8px; border-radius: 999px; background: linear-gradient(90deg, transparent, #cefd44, transparent); filter: blur(8px); opacity: 0.4; animation: glowLine 2s ease-in-out infinite;}
#apply_btn{position: relative; gap: 10px; font-size: 1.1rem; font-weight: 700; height: 50px; padding: 0 20px; background-color: #161616; color: var(--color_point); border-radius: 2em; z-index: 0; transition-duration: 100ms; border: 2px solid transparent;}
#apply_btn > span{display: flex; align-items: center; justify-content: center; gap: 4px; animation: text-pulse 2s ease-in-out infinite;}
#apply_btn:hover > span{animation-play-state: paused;}
@keyframes glowLine {
    0% {
        transform: scaleX(0.9);
        opacity: 0.4;
    }
    50% {
        transform: scaleX(1.1);
        opacity: 0.6;
    }
    100% {
        transform: scaleX(0.9);
        opacity: 0.4;
    }
}



/* @media query */
@media screen and (max-width:1400px){
	.title_box{font-size: 1.6rem;}
	#main_merit ul li dl, #section_2_all ul li dl, #section_4_all li .txt{font-size: 1.4rem;}
	.step .tit{font-size: 1.4em;}

	#main_top .flex{flex-direction: column;}
	.top_form_btn > button{border-radius: 10px;}
	.top_form_inner_all{gap: 20px 10px;}

	#main_greeting > div{padding: 80px 50px;}
	#main_greeting .flex{font-size: 1.2rem; gap: 40px;}

	#section_2_all ul{gap: 30px;}
}

@media screen and (max-width:1280px){
	.section_wrap{padding: 120px 0;}

	#main_merit ul li dl, #section_2_all ul li dl, #section_4_all li .txt{font-size: 1.2rem;}
	#main_merit ul li dl dt, #section_4_all li .txt b{font-weight: 700; font-size: 1.3em;}

	.top_form_inner_all{grid-template-columns: repeat(3,1fr);}
	.top_form_inner_all .wide{grid-column: span 3;}
	.top_form_infor > dt{font-size: 1.1rem;}

	#main_greeting .title{width: 90%; max-width: 560px; font-size: 1.6em; margin-left: auto; margin-right: auto; margin-bottom: 40px;}

	#main_step ul{}
	#main_step ul li{padding: 40px 20px;}
	.step .tit{font-size: 1.3em; margin-bottom: 10px;}

	/* 팝업창 */
	.pc_popup_policy_all > article{height:50vh;}
}

@media screen and (max-width:1024px){
	#fixed{right: 0; bottom: 0; left:0;}
	.apply_btn_wrap::before{display: none;}
	#apply_btn{border-radius: 0;}
	.fixed_btn{margin-right: 10px; font-size: 1rem; width: 3em;}

	#main_top .flex, #main_merit ul li, .step > li, .review li,
	#main_greeting .flex, #main_greeting > div, #main_greeting .img, .step_img,
	#section_2_all .img_box, #section_4_all li{border-radius: 20px;}

	#main_merit ul, #section_2_all ul{gap: 20px;}
	.review li{margin-right: 20px; width: 320px;}
}

@media screen and (max-width: 960px){
	.title_box{font-size: 1.4rem; margin-bottom: 40px;}
	.title_box .text{margin-top: 20px;}

	.top_form_inner_all{grid-template-columns: repeat(2,1fr);}
	.top_form_inner_all .wide{grid-column: span 2;}
	
	#main_merit ul{flex-direction: column; max-width: 560px; margin: auto;}
	#main_merit ul li{flex-direction: initial; gap: 5%; aspect-ratio: initial;}
	#main_merit ul li .img{width: 20%; max-width: 80px; margin: 0;}
	#main_merit ul li dl{flex: 1; align-items: initial; max-width: 400px; text-align: left;}
	#main_merit ul li dl dd{min-height: initial;}
	.reserve_btn{font-size: 1.6rem; padding: 1em 0.5em; margin-top: 40px; font-weight: 700;}

	.step_wrap > div, #main_greeting .flex{flex-direction: column; gap: 40px;}
	.step > li::after, .step > li::before{left: 50%; transform: translateX(-50%);}
	.step > li::after{width: 2em; height: 2em;}
	.step .tit, .step .text{text-align: center;}
	.step_img, #main_greeting .img{width: 100%; aspect-ratio: 1/1; max-height: 560px;}

	.step > li::after{font-size: 1.2rem; border-width: 4px;}

	#section_2_all ul{flex-direction: column;}
	#section_2_all ul li{flex-direction: initial; align-items: center; text-align: initial;}
	#section_2_all ul li:nth-child(even){flex-direction: row-reverse;}
	#section_2_all .img_box{width: 33.333%;}

	/* 팝업창 */
	.pc_popup_policy_all > article{width:80vw; height:60vh;}
}

@media screen and (max-width:768px){
	.section_wrap{padding: 100px 0;}
	.container{width: calc(100% - 40px);}
	.title_box{font-size: 1.2rem;}
	.title_box .deco::after{padding-top: 10px;}
	.title_box .deco::after{font-size: 1rem;}

	#main_merit ul li dl, .step > li, #section_2_all ul li dl, #section_4_all li .txt{font-size: 1.1rem;}

	#main_top .flex{padding: 40px 30px;}

	#main_step .title_box{margin-bottom: 60px;}
	#main_step ul li{padding: 30px 20px;}
	.step .tit{margin-top: 5px;}
    .step_wrap::after{animation-duration: 20s; font-size: 1.1rem; top: -24px;}

	.review_wrap{font-size: 1rem;}

	#main_greeting > div{padding: 60px 30px;}
	#main_greeting .title{font-size: 1.4em;}
	#main_greeting .text{line-height: 1.8; padding-bottom: 0;}
	#main_greeting p b{font-size: 1em; font-weight: 600;}

	#section_2_all ul li{gap: 30px;}
	#section_4_all li .txt br{display: none;}
	.car-swiper .swiper-slide{padding-bottom: 40px;}


	/* 팝업창 */
	.pc_popup_policy_all > article{width:90vw;}
}

@media screen and (max-width:640px){
	.section_wrap{padding: 80px 0;}

	.common_tel{font-size: 0.9rem;}	
	.top_form_inner_all{grid-template-columns: repeat(1, 1fr);}
	.top_form_inner_all .wide{grid-column: initial;}

	.review_wrap{font-size: 0.9rem;}
	.review li{width: 260px; padding: 30px 20px;}

	#main_greeting .flex{font-size: 1.1rem; gap: 20px;}

	#section_2_all .img_box{border-radius: 14px;}

	/* 팝업창 */
	.pc_popup_policy_all .pc_popup_policy_inner p{font-size:13px;}
	.pc_popup_policy_all h5{font-size:1rem;}
}

@media screen and (max-width:478px){
	.common_tel{font-size: 0.8rem;}	
	.title_box{font-size: 1.1rem;}
	.title_box .title{font-size: 2em;}

	#main_top .flex{padding: 30px 20px;}

	.reserve_btn, .top_form_btn > button{font-size: 1.4rem;}

	#main_greeting .title{font-size: 1.2em; margin-bottom: 20px;}
	#main_greeting .title br{display: none;}
	#main_greeting > div{padding: 40px 20px;}

	#section_2_all ul li{gap: 20px;}
	#section_2_all ul li dl, #main_greeting p, #main_merit ul li dl, #section_4_all li .txt, .step > li{font-size: 1rem;}
}