@charset "utf-8";

.minner{max-width:1360px; width: calc(100% - 40px); margin:0 auto}
.btn-more{width: 40px; aspect-ratio: 1 / 1; text-indent: -999%; background: var(--color-light) url(/resources/images/home/main/view-more-icon.png) center no-repeat; border-radius: 50%; overflow: hidden;}
.btn-more.bg-white{background-color: white;}
.btn-more:hover{background-color: var(--color-m); background-image: url(/resources/images/home/main/view-more-icon-on.png); transform: rotate(90deg);}
.h2-tit{font-family:'WavvePADO-Regular';font-size:24px;margin-bottom:20px}

.js-swiper-play.stop .stop{display: block;}
.js-swiper-play.stop .play{display: none;}
.js-swiper-play.play .stop{display: none;}
.js-swiper-play.play .play{display: block;}

.main-v{padding:60px 0; background-color:var(--color-light);}
.main-v .minner{display:flex;gap:20px}

.main-v .swiper-control{position:absolute; right:20px; bottom:20px; z-index:100; display:flex; gap:10px;}
.main-v .swiper-control .swiper-page-wrap{display:flex; justify-content:center; align-items:center; gap:8px;height:32px; padding:4px 8px; color:#fff; background-color:rgba(0,0,0,.4); border-radius:30px;}
.main-v .swiper-control .swiper-prev,
.main-v .swiper-control .swiper-next{display:flex; justify-content:center; align-items:center; width: 24px; aspect-ratio: 1 / 1; color:#fff;}
.main-v .swiper-control .swiper-page{display:flex; align-items:center; gap:5px; width: auto;}
.main-v .swiper-control .btn-control{display:flex; justify-content:center; align-items:center; width: 32px; aspect-ratio: 1 / 1; background-color:rgba(0,0,0,.4); border-radius:30px;}

.main-v .main-left{display: flex; flex-direction: column; gap: 20px; width:calc(100% - 500px);}
.main-v .main-left .slide-wrap{flex: 1;}
.main-v .main-slide{position:relative; height: 100%; border-radius:20px; overflow:hidden;}
.main-v .main-slide .item{position:relative;}
.main-v .main-slide .item::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 35, 102, .8), rgba(0, 35, 102, 0));}
.main-v .main-slide .text-box{position: absolute; top: 50%; left: 40px; transform: translateY(-50%); color: white;}
.main-v .main-slide .text-box .visual-title{font-family: 'WavvePADO-Regular'; font-size: 2.5rem;}
.main-v .main-slide .text-box .visual-cont{font-size: 1.25rem;}

.main-v .link-wrap{display:flex; flex-wrap:wrap; gap:12px;}
.main-v .link-wrap .item{display: flex; aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; align-items: center; gap: 16px; flex: 1; padding:20px; background-color:#fff; border:1px solid #dddddd;border-radius:20px;}
.main-v .link-wrap .category{padding:8px 16px; font-size: 14px; color:var(--color-m); background-color:var(--color-light); border-radius:30px;}
.main-v .link-wrap .img{width:60px; aspect-ratio: 1 / 1; text-indent:-999%; background:url('/resources/images/home/main/quick-01.png') center / contain no-repeat; overflow:hidden;}
.main-v .link-wrap .caption{font-size: 1.125rem; font-weight: 600;}
.main-v .link-wrap .item:nth-child(2) .img{background-image:url('/resources/images/home/main/quick-02.png')}
.main-v .link-wrap .item:nth-child(3) .img{background-image:url('/resources/images/home/main/quick-03.png')}
.main-v .link-wrap .item:nth-child(4) .img{background-image:url('/resources/images/home/main/quick-04.png')}
.main-v .link-wrap .item:hover{background-color:var(--color-m);color:#fff}
.main-v .link-wrap .item:hover .category{background-color:var(--color-dark);color:#fff}
.main-v .link-wrap .item:nth-child(1):hover .img{background-image:url('/resources/images/home/main/quick-01-on.png')}
.main-v .link-wrap .item:nth-child(2):hover .img{background-image:url('/resources/images/home/main/quick-02-on.png')}
.main-v .link-wrap .item:nth-child(3):hover .img{background-image:url('/resources/images/home/main/quick-03-on.png')}
.main-v .link-wrap .item:nth-child(4):hover .img{background-image:url('/resources/images/home/main/quick-04-on.png')}

.main-v .main-right{width: 480px; aspect-ratio: 12 / 17;}
.main-v .banner-wrap{position:relative; width: 100%; height: 100%;}
.main-v .banner-wrap .swiper{height: 100%; overflow:hidden;}
.main-v .banner-wrap .swiper-slide .item{display:block; width: 100%; height: 100%; border-radius:20px;overflow:hidden}
.main-v .banner-wrap .swiper-slide .item img{width:100%; height: 100%; object-fit: cover;}

.main-board{padding-bottom:60px; background-color:var(--color-light);}
.main-board .swiper{overflow: clip; overflow-clip-margin: 8px;}
.main-board .cinner{position:relative;}
.main-board .tab-wrap{position:relative;display:flex; padding: 4px;border-radius:35px;overflow:hidden;background-color:#fff;width:max-content;margin-bottom:30px}
.main-board .tab-wrap .tab-item{position:relative;display:block; font-size: 1.25rem; font-weight:600;padding:12px 24px;text-align:center;width:120px}
.main-board .tab-wrap .tab-item:nth-child(2){width:250px}
.main-board .tab-wrap .tab-item.on span{position:relative;color:#fff}
.main-board .tab-wrap::before{position:absolute;content:"";width:120px;height: calc(100% - 8px);background-color:var(--color-m);color:#fff;border-radius:30px;top:4px;left:4px;transition:.3s}
.main-board .tab-wrap:has(.tab-item:nth-child(2).on)::before{left:120px;width:250px}
.main-board .tab-wrap:has(.tab-item:nth-child(3).on)::before{left:370px;width:120px}
.main-board .item{position: relative; display:flex;flex-direction: column; gap: 20px; height: 260px; padding:20px;background-color:#fff;border-radius:20px; border: 1px solid #ddd; box-shadow:0 4px 8px rgb(0 0 0 / 8%);overflow:hidden;transition:.3s}
.main-board .item:hover{border-color: var(--color-m)}
.main-board .item:hover .board-subject{color:var(--color-m)}
.main-board .item:hover .category{color:#fff;background-color:var(--color-m)}

.main-board .board-subject-wrap{display:flex;align-items:center;gap:8px;}
.main-board .category{display: flex; justify-content: center; align-items: center; width: 52px; aspect-ratio: 1 / 1; font-weight: 600; color: var(--color-m); background-color: var(--color-light);}
.main-board .board-subject{flex: 1;}
.main-board .board-date{position: absolute; bottom: 20px; right: 20px; font-size: 14px; color: #767676}

.main-board .swiper-control{position:absolute;right:20px;top:0;display:flex;gap:10px}
.main-board .swiper-control .swiper-prev,
.main-board .swiper-control .swiper-next{width: 40px; aspect-ratio: 1 / 1; text-indent: -999%; background: #fff url(/resources/images/home/main/slide-left.png) center no-repeat; border-radius: 50%; transition: .3s; overflow: hidden;}
.main-board .swiper-control .swiper-next{background-image: url(/resources/images/home/main/slide-right.png);}
.main-board .swiper-control .swiper-prev:hover,
.main-board .swiper-control .swiper-next:hover{background-color:var(--color-m);}
.main-board .swiper-control .swiper-prev:hover{background-image: url(/resources/images/home/main/slide-left-on.png);}
.main-board .swiper-control .swiper-next:hover{background-image: url(/resources/images/home/main/slide-right-on.png);}

.main-board .tab-con{display:none}
.main-board .tab-con:first-child{display:block}

.main-review{position: relative; padding:60px 0;}
.main-review::before{content: ''; position: absolute; top: 0; left: 0; z-index: -1; display: block; width: 50%; height: 100%; background: url(/resources/images/home/main/review-bg01.png) top -50px left 50px no-repeat, url(/resources/images/home/main/review-bg02.png) bottom 20px right 40px no-repeat, var(--color-m); border-radius: 0 80px 0 80px;}
.main-review::after{content: ''; position: absolute; bottom: 0; left: 0; z-index: -2; display: block; width: 80px; aspect-ratio: 1 / 1; background-color: var(--color-light);}
.main-review .title-wrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.main-review .h2-tit{background:url('/resources/images/home/main/main05.png') left center no-repeat; margin-bottom: 0; padding-left:48px; color: white;}
.main-review .review-list{display: flex; gap: 20px;}
.main-review .review-first{position: relative; display: flex; gap: 20px; width: calc(100% - 560px); padding: 20px; background-color: white; border: 1px solid #ddd; border-radius: 20px; box-shadow:0 4px 8px rgb(0 0 0 / 8%); transition: .3s;}
.main-review .review-first .img-box{width: calc(100% - 420px); border-radius: 8px; overflow: hidden;}
.main-review .review-first .text-box{width: 400px;}
.main-review .review-first .text-box .board-subject{margin-bottom: 20px;}
.main-review .review-first .text-box .board-date{position: absolute; bottom: 20px; right: 20px; font-size: 14px; color: #767676;}
.main-review .review-first:hover{border-color: var(--color-m);}
.main-review .review-first:hover .text-box .board-subject{color: var(--color-m);}

.main-review .sub-review{width: 540px;}
.main-review .sub-review .item{position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 60px;}
.main-review .sub-review .item::before{content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: #ddd;}
.main-review .sub-review .item::after{content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 2px; background-color: var(--color-m); transition: .3s;}
.main-review .sub-review .item .board-subject{flex: 1; white-space: nowrap; transition: .3s;}
.main-review .sub-review .item .board-date{font-size: 14px; color: #767676;}
.main-review .sub-review .item:hover .board-subject{color: var(--color-m);}
.main-review .sub-review .item:hover::after{width: 100%;}

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

@media (max-width:1200px){
    .main-v .minner{flex-direction: column;}
    .main-v .main-left{width: 100%;}
    .main-v .main-right{max-width: 600px; width: 100%; margin: auto;}

    .main-board{position: relative;}
    .main-board::before{content: ''; position: absolute; bottom: -80px; right: 0; z-index: -1; display: block; width: 80px; aspect-ratio: 1 / 1; background-color: var(--color-light);}


    .main-review::before{width: 100%; height: 100%;}
    .main-review .review-list{flex-direction: column;}
    .main-review .review-first{width: 100%;}
    .main-review .sub-review{width: 100%;}
    .main-review .sub-review .item::before{background-color: #3f5681;}
    .main-review .sub-review .item::after{background-color: white;}
    .main-review .sub-review .item .board-subject{color: white;}
    .main-review .sub-review .item .board-date{color: var(--color-light);}
    .main-review .sub-review .item:hover .board-subject{color:var(--color-light);}
    
}

@media (max-width:1024px){
    .main-v{padding: 40px 0;}
    .main-board{padding-bottom: 40px;}
    .main-review{padding: 40px 0;}
    .main-board .item{height: 200px;}
    .main-review::before{border-radius: 0 60px 0 60px;}
    .main-review .review-first .img-box{width: 40%; aspect-ratio: 3 / 2;}
}

@media (max-width:720px){
    .main-v .swiper-control{bottom: 16px; right: 16px;}
    .main-v .main-left .slide-wrap{aspect-ratio: 1 / 1;}
    .main-v .main-slide .text-box{left: 20px;}
    .main-v .main-slide .text-box .visual-title{font-size: 2rem;}
    .main-v .link-wrap .item{gap: 8px; flex: unset; width: calc(50% - 6px); aspect-ratio: unset; padding: 16px;}
    .main-v .link-wrap .img{width: 40%;}
    .main-board .item{padding: 16px;}
    .main-board .board-date{bottom: 16px; right: 16px;}
    .main-review .review-list{gap: 16px;}
    .main-review .review-first{flex-direction: column; gap: 16px; padding: 16px 16px 40px;}
    .main-review .review-first .img-box{width: 100%;}
    .main-review .review-first .text-box{width: 100%;}
    .main-review .review-first .text-box .board-subject{margin-bottom: 12px;}
    .main-review .review-first .text-box .board-date{bottom: 16px; right: 16px;}
    
}

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