:root {
    --primary-color: #187CED;
    --secondary-color: #111;
    --third-color:#fff;
    --font-size-base: 16px;
    }
section{ font-family: 'Pretendard';
        width: 100%; }
    
.wrap_1300 h1 {font-family: 'RiaSans-ExtraBold';font-size: 3.8rem; color:#fff; line-height: 1.25em; padding-top: 14px;
    margin-top: 122px;
}

.wrap_1300 h2 {font-family: 'RiaSans-ExtraBold' ; font-size: 2.75em; margin-top: 80px;}

main.sub  > #item_list > .titleBox_sub {margin-bottom: 0;}
main.sub  > #item_list.mb70{margin-bottom: 0 !important;}
/* 첫번째 section */

.main_visual {background: url(/images/rentcar/rentcar_visual_01.jpg) no-repeat center; 
        width: 100% ;height: 850px; overflow: hidden;
        background-size: cover; position: relative;}


        @keyframes visual-active { 
            0% {transform:scale(1.05)}
            100% {transform:scale(1)}
        }
    
.wrap_1300 {max-width: 1300px; margin: 0 auto; text-align: left; }

.wrap_1300 > p {margin-top: 32px; font-size:1.5em ;}
.main_visual .wrap_1300 > p {color:#fff;}
.cont_wrap { margin-top: 62px; opacity: 0;
    transform: translateX(100%); /* 처음 오른쪽에 숨김 */
    transition: transform 1s ease, opacity 1s ease;}

.cont_wrap ul {display: flex;}
.cont_wrap ul li { padding: 72px 10px; flex-basis: 30%; margin-right: 58px; flex-shrink: 0;
    background: rgba(255,255,255,0.5) no-repeat ; border-radius: 10px; backdrop-filter: brightness(1.5) blur(25px);
    -webkit-backdrop-filter: blur(21px);
    transform: rotate(75deg); /* 초기 75도 회전 */
    transition: transform 1s ease; /* 회전 애니메이션 */}

.show .cont_wrap {
        transform: translateX(0); /* 왼쪽으로 이동 */
        opacity: 1; /* 나타나게 함 */
    }
    
.show .cont_wrap ul li {
        transform: rotate(0); /* 회전을 초기화 */
    }    

.cont_wrap ul li:last-child {margin-right: 0;}
.cont_wrap ul li p:first-child {font-family: 'RiaSans-ExtraBold';
        font-size: 1.5em; color:var(--primary-color); text-align: center; font-weight: 800; margin-bottom: 38px;}

.cont_wrap ul li p:nth-child(2) {font-size: 1.5em; text-align: center;line-height: 29px;}

/* 두번째 section */

.rentsecond_con {border-top: 1px solid #D6E2F1; margin-top: 38px; display: flex;}
.rentsecond_con div {padding-top: 42px;}
.rentsecond_con div:first-child{flex-basis: 60%;}
.rentsecond_con div:last-child{flex-basis: 40%; width: 612px; height: 180px;}

.rentsecond_con div strong {font-size: 1.25em; font-weight: 600; color:var(--primary-color)}
.rentsecond_con div h3 {font-size: 2.0em; margin: 24px 0;}
.rentsecond_con div p {font-size: 1.25em; line-height: 24px;}

.rentmiddle_wrap {margin-top: 120px; padding-top: 10px; background:#F1F1F1; width: 100%;}
.rentmiddle_wrap .wrap_1300 {text-align: center;}

.rentmiddle_wrap .wrap_1300 p {color:#111; font-size: 1.25em; line-height: 28px; margin-bottom: 62px;}

.middlelist_wrap {display: flex; gap: 5%;}
.rentmiddle_list {background: #fff; border-radius: 10px; font-size: 1.25em; box-shadow: 0px 0px 10px #00000029; margin-bottom: 80px;}
.rentmiddle_list dt {padding: 20px 0;color:#fff;border-radius: 10px 10px 0 0;}
.rentmiddle_list dd:last-child {border-radius: 0 0 10px 10px;}
.rentmiddle_list dd {padding: 15px 0;}
.list01 {flex-basis: 42%;}
.list02 {flex-basis: 24%;}
.list03 {flex-basis: 24%;}

.rentmiddle_list dd:nth-child(even) {background: #F3F9FF;}

.middlelist_wrap .list03 dd:nth-child(even) {background: #F6F6F6;}
.middlelist_wrap .list01 dt {background: var(--secondary-color);}
.middlelist_wrap .list01 dd {line-height: 28px;}
.middlelist_wrap .list02 dt {background: var(--primary-color);}
.middlelist_wrap .list03 dt {background: #989898;}


/* 세번째 section */
.rentail_wrap {margin-top: 72px; display: flex; flex-wrap: wrap; gap:3.5%; align-items: center; justify-content: center}
.tail_list {width: 624px; height: 380px; border: 1px solid #EFEFEF; padding: 34px;border-radius: 10px; 
    background: url(/images/rentcar/car_back.png) no-repeat bottom; position: relative; margin-bottom: 3.5%;
    transition: all 0.3s;
}
.rentail_wrap h3 {font-family:'RiaSans-ExtraBold' ; font-size: 1.75em; text-align: center; margin-bottom: 18px;}

.tail_list .car_image {display:block; margin: 0 auto; position: relative; transition:all 0.5s} 
.tail_list .car_image2 {display:block; margin: 0 auto; position: relative; transition:all 0.5s} 


.tail_hover {padding: 20px 0; border-top: 1px solid #999; width: 55%; position: absolute; right: 0; top: 25%;
opacity: 0; }
.tail_hover > p {font-size: 1.25em; font-weight: 600; padding: 28px 0;}
.tail_hover ul li{display: flex; margin-bottom: 10px;}
.tail_hover ul span {padding: 8px 20px; background: #fff; border-radius: 17px; border: 1px solid #999;}
.tail_hover ul li p {margin-left: 10px; margin-top: 8px;}

.tail_list .ol02 {left: 5%;}

.tail_list:hover .tail_hover {opacity: 1;}
.tail_list:hover .car_image {transform: translateX(-45%)}
.tail_list:hover .car_image2 {transform: translateX(50%);} 


/* 상품보기 버튼 */
.more_wrap {display: inline-block; font-size: 1.25em; display: flex; gap: 40px; margin: 0 auto; margin-bottom: 100px; justify-content: center}
.rentcar_more { background: var(--primary-color); color:#fff; border-radius: 10px; padding: 20px 120px 20px 40px; 
     position: relative; transition: all 0.3s;}
.rentcar_more p {margin-right: 20px; }
.rentcar_more::after {content: '' ; position: absolute; right: 40px; top: 38%;
    display:inline-block; width: 60px; height: 10px; background: url(/images/rentcar/arrow_01.png) no-repeat center;}

.more_wrap a:hover .rentcar_more::after{left: 40px; right: 0;}
.more_wrap a:hover .rentcar_more  {padding: 20px 40px 20px 120px; background: var(--secondary-color);}


/* 반응형 */
@media screen and (max-width: 1300px) {
    .wrap_1300 {padding: 0 20px;} 
}

@media screen and (max-width: 720px) {
    .tail_list:hover .tail_hover {opacity: 0 !important;} /* 호버로 변경된 내용 초기화 */
    .tail_list:hover .car_image {transform: none !important;} /* 이미지 이동 효과 제거 */
    .tail_list:hover .car_image2 {transform: none !important;} 
   
    .wrap_1300{text-align: center;}
    .wrap_1300 h1 {margin-top: 72px;font-size: 3.2rem;}
    .wrap_1300 h2 {margin-top: 40px;}
    .rentsecond_con div:last-child {width: 100%;}
    .rentsecond_con div:last-child img {border-radius: 10px;}
    .rentsecond_con div:first-child {width: 100%;}
    .cont_wrap {margin-top: 28px;}
    .rentsecond_con {flex-direction: column;}
    .cont_wrap ul {flex-wrap: wrap; flex-direction: column; align-items: center ; gap: 20px;}
    .cont_wrap ul li {width: 100%;  margin-right: 0;padding: 24px 10px;}
    .cont_wrap ul li p:first-child {margin-bottom: 20px;}
    .cont_wrap ul li p span {display: none;} 
    .cont_wrap ul li br {display: none}
    .more_wrap {flex-direction: column; gap: 20px; margin-top: 20px;}
    .wrap_1300 > p {margin-top: 24px;}
    .rentmiddle_list {font-size: 1em;}
   
    .rentail_wrap {flex-wrap: nowrap; margin-top: 32px; justify-content: left;
        overflow-x: scroll; overflow-y: hidden;}
    .rentail_wrap::-webkit-scrollbar {width: 100%; height: 2px; border-radius: 100%; background: #f5f5f5;}
    .rentail_wrap::-webkit-scrollbar-thumb{height: 2px; background: var(--primary-color);}

    .tail_list {flex-shrink: 0; width: 100%; height: 35vh;}
    .more_wrap {width: 80%;}
    .rentcar_more {padding-left: 20px;}
    .rentmiddle_wrap {margin-top: 80px;}
}

@media screen and (max-width: 432px) {
    .middlelist_wrap .list01 dd {line-height: 1em; padding: 21.5px 0;}
    .middlelist_wrap .list02 dt {padding: 11px 0;}
    .rentcar_more {padding: 12px 120px 12px 40px;}
}

@media screen and (max-width: 374px) {
    .middlelist_wrap .list01 dd:nth-child(5) {padding: 14px 0;}
}