@charset "utf-8";

/* ==========================================================================
   MAIN CONTENTS
   ========================================================================== */
#content{padding-top: 0;}
.top-footer{border-top: 0;}
.main-sec01{position: relative; padding-top: 50px; padding-bottom: 72px;}
.main-sec01 .row-sec01{display: flex; flex-wrap: wrap; gap: 60px;}
.main-sec01 .row-sec01 .left-area{width: 880px;}
.main-sec01 .row-sec01 .right-area{width: 300px;}
.main-sec01 .grid-container01{display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}
.main-sec01 .main-box{grid-area: 1 / 1 / 1 / 6; border-radius: 20px; overflow: hidden;}
.main-sec01 .main-box .swiper-container-horizontal>.swiper-pagination-bullets{width: auto; left: 68px; bottom: 36px;}
.main-sec01 .main-vis{height: 376px;}
.main-sec01 .main-vis > a{display: block; width: 100%; height: 100%; padding: 45px 60px;}
.main-sec01 .main-vis .sub-text01{font-size: 16px; font-weight: bold; margin-bottom: 14px;}
.main-sec01 .main-vis .main-text01{font-size: 38px; font-weight: bold; color: var(--point-color0101); line-height: 44px;}
.main-sec01 .main-vis .btn-more{font-size: 16px; height: 42px; border-radius: 21px; margin-top: 20px;}
.main-sec01 .main-vis .btn-more span{padding-right: 15px; background: url('../images/common/arr0101.png') no-repeat right center; background-size: 7px auto;}
.main-sec01 .main-vis01{background: #e1f4ff url('../images/main/obj_mvis01.png') no-repeat right bottom; background-size: auto 320px;}
.main-sec01 .main-vis02{background: #e1f4ff url('../images/main/obj_mvis02.png') no-repeat right bottom; background-size: auto 333px;}
.main-sec01 .main-vis03{background: #e1f4ff url('../images/main/obj_mvis03.png') no-repeat right bottom; background-size: auto 324px;}

.main-sec01 .grid-container01 .item-box{height: 150px;}
.main-sec01 .grid-container01 .item-box > a{display: flex; align-items: flex-end; width: 100%; height: 100%; padding-bottom: 27px; background-color: #f4f4f4; border-radius: 20px;}
.main-sec01 .grid-container01 .item-box span{width: 100%; text-align: center; padding-top: 81px; font-size: 16px; font-weight: 600;}
.main-sec01 .grid-container01 .ico01{background: url('../images/main/obj_m0101.png') no-repeat center 9px; background-size: 92px auto;}
.main-sec01 .grid-container01 .ico02{background: url('../images/main/obj_m0102.png') no-repeat center 6px; background-size: 82px auto;}
.main-sec01 .grid-container01 .ico03{background: url('../images/main/obj_m0103.png') no-repeat center 6px; background-size: 82px auto;}
.main-sec01 .grid-container01 .ico04{background: url('../images/main/obj_m0104.png') no-repeat center 0; background-size: 39px auto;}
.main-sec01 .grid-container01 .ico05{background: url('../images/main/obj_m0105.png') no-repeat center 0; background-size: 48px auto;}
.main-sec01 .grid-container02{display: flex; flex-direction: column; gap: 20px;}
.main-sec01 .grid-container02 .item-box{height: 178px;}
.main-sec01 .grid-container02 .item-box:last-child{height: 150px;}
.main-sec01 .grid-container02 .item-box > a{display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 20px 35px; border-radius: 20px;}
.main-sec01 .grid-container02 .item-box .txt-en{font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: bold; color: rgba(0,0,0,.3); letter-spacing: 0; text-transform: uppercase; margin-bottom: 6px;}
.main-sec01 .grid-container02 .item-box .main-text{font-size: 22px; font-weight: bold;}
.main-sec01 .grid-container02 .item-box p{font-size: 15px; line-height: 20px; margin-top: 7px;}
.main-sec01 .grid-container02 .item-box .btn-more{margin-top: 14px;}
.main-sec01 .grid-container02 .item-box .btn-more span{display: inline-block; font-size: 14px; font-weight: bold; line-height: 18px; border-bottom: 1px solid var(--point-color0101);}
.main-sec01 .grid-container02 .item-box01 > a{background: #d5e7fc url('../images/main/obj_m0201.png') no-repeat calc(100% - 20px) calc(100% - 14px); background-size: 119px auto;}
.main-sec01 .grid-container02 .item-box02 > a{background: #d5f3fc url('../images/main/obj_m0202.png') no-repeat calc(100% - 15px) calc(100% - 22px); background-size: 146px auto;}
.main-sec01 .grid-container02 .item-box03 > a{background: #ffe4c9 url('../images/main/obj_m0203.png') no-repeat right 0; background-size: 147px auto;}

.main-sec01 .row-sec02{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 35px;}
.main-sec01 .row-sec02 .btn-area{width: 300px;}
.main-sec01 .cs-area{display: flex; align-items: center; letter-spacing: 0; }
.main-sec01 .cs-area > div{position: relative; font-size: 18px; font-weight: bold; padding-right: 12px; margin-right: 12px;}
.main-sec01 .cs-area > div::after{content: ""; position: absolute; right: 0; top: calc(50% - 7px); display: block; width: 1px; height: 14px; background-color: #e9e9e9;}
.main-sec01 .cs-area .btn-tel{color: var(--point-color02);}
.main-sec01 .cs-area .txt-set{display: flex;}
.main-sec01 .cs-area .txt-set > li{display: flex; align-items: center; font-size: 14px; color: #888;}
.main-sec01 .cs-area .txt-set > li::after{content: "/"; color: #bbb; margin: 0 8px;}
.main-sec01 .cs-area .txt-set > li:last-child::after{display: none;}
.main-sec01 .cs-area .txt-set .txt01{margin-right: 4px;}
.main-sec01 .cs-area .txt-set .txt-time{color: #222;}
.main-sec01 .btn-area > a{display: flex; justify-content: space-between; align-items: center;}
.main-sec01 .btn-area .title{display: flex; align-items: center; font-size: 18px; font-weight: bold; line-height: 34px; padding-left: 68px; background: url('../images/main/obj_m0204.png') no-repeat 0 center; background-size: 60px auto;}
.main-sec01 .btn-area .title::after{content: ""; display: block; width: 40px; height: 1px; background-color: #e5e5e5; margin-left: 20px;}
.main-sec01 .btn-area .circle{display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: #fff; letter-spacing: 0; background-color: var(--point-color02); border-radius: 50%;}
.main-sec01 .btn-area .circle span{position: relative; top: 1px;}

.main-sec02{position: relative; padding-top: 78px; padding-bottom: 78px; background-color: #ebf4ff;;}
.main-sec02 .row-sec{display: flex; flex-wrap: wrap; gap: 60px;}
.main-sec02 .tit-set{position: relative; width: 250px; background: url('../images/main/obj_m0301.png') no-repeat center bottom; background-size: 259px auto;}
.main-sec02 .tit-set .txt-en{font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: bold; color: rgba(29,32,136,.5); letter-spacing: 0; text-transform: uppercase; margin-bottom: 25px;}
.main-sec02 .tit-set .main-text{font-size: 38px; font-weight: bold; color: var(--point-color01);}
.main-sec02 .tit-set p{font-size: 16px; line-height: 24px; margin-top: 14px;}
.main-sec02 .tit-set .btn-more{margin-top: 25px;}
.main-sec02 .tit-set .btn-more span{display: inline-block; font-weight: bold; line-height: 18px; border-bottom: 1px solid var(--point-color0101);}
.main-sec02 .list-cars{position: relative; width: 920px;}
.main-sec02 .list-cars .item-cars{display: flex; flex-direction: column; gap: 36px;}
.main-sec02 .box-car{box-shadow: none;}
/* Direction */
.main-sec02 .swiper-button-prev,
.main-sec02 .swiper-button-next{top: 263px; width: 48px; height: 48px; border: 1px solid #fff; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 16px auto;}
.main-sec02 .swiper-button-prev{left: 0; background-image: url('../images/common/arr0201.png');}
.main-sec02 .swiper-button-next{right: auto; left: 60px; background-image: url('../images/common/arr0202.png');}
.main-sec02 .swiper-button-next.swiper-button-disabled, 
.main-sec02 .swiper-button-prev.swiper-button-disabled{opacity: .6;}

@media only screen and (max-width: 1320px) {
    .main-sec01{padding-top: var(--main-gap);}
    .main-sec01 .row-sec01{justify-content: space-between; gap: 0;}
    .main-sec01 .row-sec01 .left-area{width: 70%;}
    .main-sec01 .row-sec01 .right-area{width: calc(30% - 20px);}
    .main-sec01 .grid-container01{gap: 20px;}
    .main-sec01 .row-sec02{margin-top: 20px;}
    .main-sec01 .row-sec02 .btn-area{width: calc(30% - 20px);}
    .main-sec01 .btn-area > a{justify-content: flex-end;}
    .main-sec01 .btn-area .title{margin-right: 14px;}
    .main-sec01 .btn-area .title::after{display: none;}

    .main-sec02 .row-sec{justify-content: space-between; gap: 0;}
    .main-sec02 .tit-set{width: 20%; background-size: 100% auto;}
    .main-sec02 .list-cars{width: calc(80% - 40px);}
    .main-sec02 .tit-set .main-text{font-size: 32px;}
    .main-sec02 .tit-set p{font-size: 15px; line-height: 22px;}
    .main-sec02 .list-cars .item-cars{gap: 24px;}
    
}

@media only screen and (max-width: 1280px) {
    .main-sec01 .main-vis01{background-size: auto 280px;}
    .main-sec01 .main-vis02{background-size: auto 288px;}
    .main-sec01 .main-vis03{background-size: auto 284px;}
    .main-sec01 .main-vis .main-text01{font-size: 34px; line-height: 40px;}
}

@media only screen and (max-width: 1200px) {
    .main-sec01 .main-vis01{background-size: auto 260px;}
    .main-sec01 .main-vis02{background-size: auto 266px;}
    .main-sec01 .main-vis03{background-size: auto 260px;}
    .main-sec01 .main-vis .sub-text01{font-size: 15px; margin-bottom: 10px;}
    .main-sec01 .main-vis .main-text01{font-size: 32px;}

    .main-sec01 .grid-container01 .item-box{height: 138px;}
    .main-sec01 .grid-container01 .item-box span{font-size: 15px; padding-top: 72px;}
    .main-sec01 .grid-container01 .ico01{background-size: 78px auto;}
    .main-sec01 .grid-container01 .ico02{background-size: 70px auto;}
    .main-sec01 .grid-container01 .ico03{background-size: 70px auto;}
    .main-sec01 .grid-container01 .ico04{background-size: 33px auto;}
    .main-sec01 .grid-container01 .ico05{background-size: 41px auto;}
    .main-sec01 .grid-container02 .item-box:last-child{height: 138px;}
    .main-sec01 .grid-container02 .item-box > a{padding: 24px;}
    .main-sec01 .grid-container02 .item-box .txt-en{font-size: 10px;}
    .main-sec01 .grid-container02 .item-box .main-text{font-size: 20px;}
    .main-sec01 .grid-container02 .item-box01 > a{background-size: 107px auto;}
    .main-sec01 .grid-container02 .item-box02 > a{background-size: 131px auto;}
    .main-sec01 .grid-container02 .item-box03 > a{background-size: 126px auto;}
    .main-sec01 .cs-area .title{display: none;}

    .main-sec02{padding-top: 60px; padding-bottom: 60px;}
    .main-sec02 .tit-set .txt-en{margin-bottom: 12px;}
    .main-sec02 .tit-set .main-text{font-size: 28px;}
    .main-sec02 .tit-set p{font-size: 15px; line-height: 22px;}
    .main-sec02 .list-cars .item-cars{gap: 20px;}
}


@media only screen and (max-width: 1023px) {
    .main-sec01{padding-bottom: var(--main-gap);}
    .main-sec01 .row-sec01 .left-area,
    .main-sec01 .row-sec01 .right-area{width: 100%;}
    .main-sec01 .main-vis{height: 340px;}
    .main-sec01 .main-vis > a{padding: 40px;}
    .main-sec01 .main-vis .main-text01{font-size: 32px; line-height: 40px;}
    .main-sec01 .main-vis01{background-size: auto 250px;}
    .main-sec01 .main-vis02{background-size: auto 260px;}
    .main-sec01 .main-vis03{background-size: auto 254px;}
    .main-sec01 .grid-container01 .item-box{height: 116px;}
    .main-sec01 .grid-container01 .item-box > a{padding-bottom: 18px;}
    .main-sec01 .grid-container01 .item-box span{font-size: 15px; padding-top: 63px;}
    .main-sec01 .grid-container01 .ico01{background-size: 70px auto;}
    .main-sec01 .grid-container01 .ico02{background-size: 63px auto;}
    .main-sec01 .grid-container01 .ico03{background-size: 63px auto;}
    .main-sec01 .grid-container01 .ico04{background-size: 30px auto;}
    .main-sec01 .grid-container01 .ico05{background-size: 37px auto;}

    .main-sec01 .grid-container02{flex-direction: row; margin-top: 20px;}
    .main-sec01 .grid-container02 .item-box{flex: 1;}
    .main-sec01 .grid-container02 .item-box,
    .main-sec01 .grid-container02 .item-box:last-child{height: 136px;}
    .main-sec01 .grid-container02 .item-box > a{padding: 24px;}
    .main-sec01 .grid-container02 .item-box .txt-en{display: none;}
    .main-sec01 .grid-container02 .item-box .main-text{font-size: 18px;}
    .main-sec01 .grid-container02 .item-box p{font-size: 14px; line-height: 18px;}
    .main-sec01 .grid-container02 .item-box .btn-more span{font-size: 13px;}
    .main-sec01 .grid-container02 .item-box01 > a{background-size: 84px auto;}
    .main-sec01 .grid-container02 .item-box02 > a{background-size: 102px auto;}
    .main-sec01 .grid-container02 .item-box03 > a{background-size: 98px auto;}
    .main-sec01 .row-sec02{justify-content: center;}
    .main-sec01 .row-sec02 .btn-area{display: none; width: 100%;}

    .main-sec02{padding-top: 40px; padding-bottom: 40px;}
    .main-sec02 .row-sec{justify-content: space-between; gap: 0;}
    .main-sec02 .tit-set,
    .main-sec02 .list-cars{width: 100%;}
    .main-sec02 .tit-set{position: static; display: flex; justify-content: space-between; align-items: center; background: none;}
    .main-sec02 .tit-set .btn-more{margin-top: 0;}
    .main-sec02 .tit-set .txt-en,
    .main-sec02 .tit-set p{display: none;}
    .main-sec02 .tit-set .main-text{font-size: 25px;}
    .main-sec02 .list-cars{margin-top: 30px;}
    .main-sec02 .swiper-button-prev,
    .main-sec02 .swiper-button-next{top: calc(50% + 24px); box-shadow: 3px 3px 6px 0px rgba(0,0,0,.09);}
    .main-sec02 .swiper-button-prev{left: 16px;}
    .main-sec02 .swiper-button-next{right: 16px; left: auto;}
}

@media only screen and (max-width: 767px) {
    .top-footer{border-top: 1px solid #ededed;}
    .main-sec01 .grid-container01{grid-template-columns: repeat(3, 1fr); gap: 14px;}
    .main-sec01 .main-box{grid-area: 1 / 1 / 1 / 4;}
    .main-sec01 .grid-container01 .item-box:nth-child(6){grid-area: 3 / 2 / 4 / 4;}
    .main-sec01 .grid-container01 .item-box > a,
    .main-sec01 .main-box,
    .main-sec01 .grid-container02 .item-box > a{border-radius: 14px;}
    .main-sec01 .main-vis > a{padding: 30px 30px;}
    .main-sec01 .main-vis .sub-text01{display: none;}
    .main-sec01 .main-vis .main-text01{font-size: 28px; line-height: 36px;}
    .main-sec01 .main-vis01{background-size: auto 180px;}
    .main-sec01 .main-vis02{background-size: auto 192px;}
    .main-sec01 .main-vis03{background-size: auto 170px;}
    .main-sec01 .main-box .swiper-container-horizontal>.swiper-pagination-bullets{left: 26px; bottom: 26px;}

    .main-sec01 .grid-container01 .item-box{height: 106px;}
    .main-sec01 .grid-container01 .item-box > a{padding-bottom: 15px;}
    .main-sec01 .grid-container01 .item-box span{font-size: 15px; padding-top: 60px;}
    .main-sec01 .grid-container01 .ico01{background-size: 63px auto;}
    .main-sec01 .grid-container01 .ico02{background-size: 57px auto;}
    .main-sec01 .grid-container01 .ico03{background-size: 57px auto;}
    .main-sec01 .grid-container01 .ico04{background-size: 27px auto;}
    .main-sec01 .grid-container01 .ico05{background-size: 33px auto;}

    .main-sec01 .grid-container02{flex-direction: column; gap: 14px; margin-top: 14px;}
    .main-sec01 .grid-container02 .item-box,
    .main-sec01 .grid-container02 .item-box:last-child{height: 145px;}
    .main-sec01 .grid-container02 .item-box > a{padding: 28px 32px;}
    .main-sec01 .grid-container02 .item-box .txt-en{display: none;}
    .main-sec01 .grid-container02 .item-box .main-text{font-size: 20px;}
    .main-sec01 .grid-container02 .item-box p{font-size: 15px; line-height: 20px;}
    .main-sec01 .grid-container02 .item-box .btn-more span{font-size: 14px;}
    .main-sec01 .grid-container02 .item-box01 > a{background-size: 107px auto;}
    .main-sec01 .grid-container02 .item-box02 > a{background-size: 131px auto;}
    .main-sec01 .grid-container02 .item-box03 > a{background-size: 126px auto;}
    .main-sec01 .cs-area{display: none;}

    .main-sec02{padding-bottom: 0;}
    .main-sec02 .row-sec{padding: 0;}
    .main-sec02 .tit-set{padding: 0 20px;}
    .main-sec02 .tit-set .main-text{font-size: 23px;}
    .main-sec02 .list-cars{background-color: #fff;}
    .main-sec02 .list-cars .item-cars{gap: 0;}
    .main-sec02 .box-car:last-child > a{border-bottom: 0;}
    .main-sec02 .swiper-button-prev,
    .main-sec02 .swiper-button-next{top: calc(50% + 32px); width: 38px; height: 38px; background-size: 12px auto;}
    .main-sec02 .swiper-button-prev{left: 8px;}
    .main-sec02 .swiper-button-next{right: 8px;}
    .main-sec02 .box-car > a{align-items: center;}
    .main-sec02 .box-car .info-car .bt-set{display: none;}
}


/* ADD - 202412 */
/* .item-thumb{}
.item-thumb a{display: block;}
.item-thumb .img{aspect-ratio: 394 / 220; border-radius: 12px; overflow: hidden; background-color: #000;}
.item-thumb .img img{width: 100%; max-width: 100%; height: 100%; object-fit: cover; transition: .3s ease-in-out;}
.item-thumb a:hover .img img{transform: scale(1.1);}
.item-thumb .txt{padding: 12px 0 0;}
.item-thumb .txt .title{font-size: 17px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 24px; height: 48px;} */

.main-sec01 .row-sec03{border-top: 1px solid #eee; box-sizing: border-box; margin: 40px 0 0; padding: 40px 0 0;}
.main-sec01 .row-sec03 .tit-area{display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 34px;}
.main-sec01 .row-sec03 .tit-area .title{font-size: 26px; font-weight: 700; color: var(--point-color01);}
.main-sec01 .row-sec03 .tit-area .more{margin-left: auto; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--point-color0101); line-height: 18px;}

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

}

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

}

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

}

@media only screen and (max-width: 1023px) {
    .main-sec01 .row-sec03 .tit-area .title{font-size: 25px;}
}

@media only screen and (max-width: 767px) {
    .main-sec01 .row-sec03{margin: 20px 0 0; padding: 20px 0 0;}
    .main-sec01 .row-sec03 .tit-area{margin-bottom: 20px;}
    .main-sec01 .row-sec03 .tit-area .title{font-size: 23px;}
}