@charset "utf-8";

.silde-wrap{height: 800px;}
.slider-container{position: relative;width: 95%;height: auto;overflow: hidden;margin: auto;}
.slider{display: flex;transition: transform 0.5s ease-in-out;}
.small-slider{display: none;}
.slide{min-width: 100%;height: auto;display: flex;align-items: center;justify-content: center;font-size: 24px;color: white;}
.slide>img{width: 100%;}
/* 이전, 다음 버튼 */
.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;}
.prev { left: 10px; }
.next { right: 10px; }
/* 이미지 크기 조정 */
.prev>img, .next>img{width: 50px;height: 50px;margin: 0 15px;}
.dots{text-align: center;padding: 10px;}
.dot{width: 12px;height: 12px;margin: 8px;display: inline-block;background-color: #666;border-radius: 50%;cursor: pointer;}
.active01{background-color: #2262C6;}

.list-wrap{height: 2700px;display: none;width: 100%;}
.list-container{width: 700px;margin: 0 auto;}
.list-container>ul{display: flex;flex-direction: column;gap: 100px;}
.list-container>ul>li{width: 700px;}
.list-container>ul>li>img{width: 700px;}

.list-wrap-mobile{height: 1750px;display: none;width: 100%;}
.list-container-mobile{width: 100%;}
.list-container-mobile>ul{display: flex;flex-direction: column;gap: 60px;}
.list-container-mobile>ul>li{}
.list-container-mobile>ul>li>img{width: 380px;margin: 0 auto;display: block;}

.explain-system{width: 100%;height: 1050px;background: url('../img/sub01-background.png') center/cover no-repeat;position: relative;display: flex;align-items: center;justify-content: center;margin-bottom: 120px;margin-top: 50px;}
.explain-cont{position: absolute;width: 78%;}
.explain-cont>p{font-weight: 400;line-height: 60px;font-size: 1.4rem;text-align: center;padding-bottom: 10px;}
.explain-cont>.full-img{width: 100%;margin: 0 auto;}
.explain-cont>.middle-img{width: 700px;margin: 0 auto;display: none;}
.explain-cont>.mobile-img{width: 380px;margin: 0 auto;display: none;}

.tabs-wrap{height: 950px;}
/* 탭 컨테이너 */
.tab-container{display: flex;justify-content: center;position: relative;}
/* 탭 스타일 */
.tabs{display: flex;position: relative;background: white;padding: 10px 0;border-radius: 10px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);width: 600px;justify-content: space-around;position: relative;}
/* 개별 탭 */
.tab{flex: 1;text-align: center;padding: 10px;cursor: pointer;position: relative;z-index: 2;transition: color 0.3s ease-in-out;font-size: 1.1rem;font-weight: 500;}
.tab.tab-active {color: white;}
/* 탭 활성화 애니메이션 */
.tab-indicator {position: absolute;bottom: 0;left: 0;width: 33.33%;height: 100%;background: #2262C6;border-radius: 10px;transition: transform 0.3s ease-in-out;z-index: 1;}
/* 이미지 컨테이너 */
.content-container {margin-top: 40px;display: flex;justify-content: center;}
/* 이미지 스타일 */
#tab-image{width: 1500px;height: 700px;object-fit: cover;border-radius: 10px;}

.minitabs-wrap{height: 1050px;display: none;width: 100%;}
.minitab-container{display: flex;justify-content: center;position: relative;}
.minitabs{display: flex;position: relative;background: white;padding: 10px 0;border-radius: 10px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);width: 600px;justify-content: space-around;position: relative;}
.minitab{flex: 1;text-align: center;padding: 10px;cursor: pointer;position: relative;z-index: 2;transition: color 0.3s ease-in-out;font-size: 1.1rem;font-weight: 500;}
.minitab.minitab-active {color: white;}
.minitab-indicator {position: absolute;bottom: 0;left: 0;width: 33.33%;height: 100%;background: #2262C6;border-radius: 10px;transition: transform 0.3s ease-in-out;z-index: 1;}
.minicontent-container {margin-top: 40px;display: flex;justify-content: center;}
#minitab-image{width: 700px;height: 790px;object-fit: cover;border-radius: 10px;}

/* brochure */
.gallery-wrapper {position: relative;width: 100%;margin: 0 auto;overflow: hidden;height: 600px;margin-top: 30px;}
.gallery-track {display: flex;transition: transform 0.6s ease;will-change: transform;}
.gallery-item {display: block;object-fit: contain;object-position: center;box-sizing: border-box;transition: all 0.5s ease;flex-shrink: 0;margin: 20px auto 0;opacity: 0.5;transform: scale(0.8);border-radius: 25px;width: 360px;height: 510px;box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 12px;}
/* 이미지 단계별 크기 */
.gallery-item.center {
    /* width: 360px;
    height: 510px; */
    opacity: 1;
    transform: scale(1);
}
.gallery-item.near {
    /* width: 300px;
    height: 425px; */
    opacity: 0.5;
    transform: scale(0.8);
}
.gallery-item.far {
    /* width: 240px;
    height: 340px; */
    opacity: 0.5;
    transform: scale(0.8);
}
.gallery-wrapper-mobile{display: none;position: relative;width: 100%;margin: 0 auto;overflow: hidden;height: 530px;margin-top: 30px;}
.gallery-track-mobile {display: flex;transition: transform 0.6s ease;will-change: transform;}
.gallery-item-mobile {display: block;object-fit: contain;object-position: center;box-sizing: border-box;transition: all 0.5s ease;flex-shrink: 0;margin: 20px auto 0;opacity: 0.5;transform: scale(0.8);border-radius: 25px;width: 275px;height: 390px;box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 12px;}
/* 이미지 단계별 크기 */
.gallery-item-mobile.center-mobile {
    opacity: 1;
    transform: scale(1);
}
.gallery-item-mobile.near-mobile {
    opacity: 0.5;
    transform: scale(0.8);
}
.gallery-item-mobile.far-mobile {
    opacity: 0.5;
    transform: scale(0.8);
}

.pdf-download{width: 280px;margin: 0 auto;padding-bottom: 120px;}
.pdf-download>a{display: block;width: 280px;margin: 0 auto;padding: 12px 0;border-radius: 10px;font-size: 1.2rem;background-color: #fff;border: 2px solid #2262C6;color: #2262C6;font-weight: 700;letter-spacing: 1px;text-align: center;}
.pdf-download>a:hover{background-color: #2262C6;transition: 0.3s;color: #fff;}

.row-group{width: 100%;height: 850px;}
.row-group>ul{display: flex;justify-content: space-between;width: 100%;}
.row-group>ul>li{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;border-radius: 25px;margin-left: 20px;position: relative;}
.row-group>ul>li:last-child{margin-left: 0;}
.row-group>ul>li>img{width: 100%;}
.row-group>ul>li>a{position: absolute;width: auto;height: auto;top: 76%;left: 11%;display: block;z-index: 10;padding: 5px 15px;border: 3px solid #2262C6;border-radius: 15px;}
.row-group>ul>li>a:hover{background-color: #9EBFE5;transition: 0.3s;}
.row-group>ul>li>a>img{padding-top: 5px;}
.row-group>ul>li>p{position: absolute;width: auto;height: auto;top: 90%;left: 24%;display: block;z-index: 10;font-size: 1.3rem;color: #2262C6;}

.col-group-mobile{width: 100%;height: 1700px;display: none;}
.col-group-mobile>div{display: flex;flex-direction: column;gap: 40px;}
.col-group-mobile>div img{width: 340px;display: block;margin: 0 auto;}

@media (max-width: 1800px) {
    .explain-system{width: 100%;height: 600px;background: none;margin-bottom: 200px;margin-top: 0px;}
    .row-group{height: 850px;}
    .row-group>ul>li{width: 380px;}
    .row-group>ul>li>a{left: 13%;}
    .row-group>ul>li>a>img{width: 250px;}
    .row-group>ul>li>p{left: 20%;}
}
@media (max-width: 1600px) {
    #tab-image{width: 1300px;height: auto;}
}
@media (max-width: 1570px) {
    .row-group{height: 700px;}
    .row-group>ul>li{width: 300px;}
    .row-group>ul>li>a{top: 76%;left: 9%;padding: 5px 10px;border-radius: 10px;}
    .row-group>ul>li>a>img{padding-top: 5px;width: 220px;}
    .row-group>ul>li>p{top: 91%;left: 20%;font-size: 1rem;}
}
@media (max-width: 1500px) {
    .silde-wrap{height: 750px;}
    .explain-system{height: 400px;}
}
@media (max-width: 1400px) {
    .explain-system{height: 300px;margin-bottom: 250px;}
    #tab-image{width: 1100px;}
}
@media (max-width: 1200px) {
    .silde-wrap{height: 800px;display: none;}
    .list-wrap{display: block;}
    .explain-system{height: 700px;margin-bottom: 250px;}
    .explain-cont>p{line-height: 35px;font-size: 1.4rem;text-align: center;padding-bottom: 20px;}
    .explain-cont>.full-img{width: 100%;margin: 0 auto;display: none;}
    .explain-cont>.middle-img{display: block;}
    .tabs-wrap{display: none;}
    .minitabs-wrap{display: block;}
    .row-group{height: 650px;}
    .row-group>ul>li{width: 250px;}
    .row-group>ul>li>a{top: 74%;left: 6%;padding: 3px 6px;border-radius: 10px;}
    .row-group>ul>li>a>img{padding-top: 5px;width: 200px;}
    .row-group>ul>li>p{top: 90%;left: 16%;font-size: 1rem;}
}
@media (max-width: 1000px) {
    .row-group{height: 2000px;}
    .row-group>ul{display: flex;flex-direction: column;gap: 30px;width: 400px;margin: 0 auto;}
    .row-group>ul>li{width: 400px;margin-left: 0px;}
    .row-group>ul>li>a{top: 76%;left: 11%;padding: 5px 15px;border-radius: 10px;}
    .row-group>ul>li>a>img{padding-top: 5px;width: 280px;}
    .row-group>ul>li>p{top: 90%;left: 21%;font-size: 1.3rem;}
}
@media (max-width: 850px) {
    .list-wrap{height: 1900px;}
    .list-container{width: 500px;}
    .list-container>ul{gap: 60px;}
    .list-container>ul>li{width: 500px;}
    .list-container>ul>li>img{width: 500px;}
    .explain-system{height: 600px;margin-bottom: 150px;}
    .explain-cont>.middle-img{width: 500px;}
    .minitabs-wrap{height: 900px;}
    #minitab-image{width: 600px;height: 676px;}
}
@media (max-width: 680px) {
    .minitabs-wrap{height: 800px;}
    #minitab-image{width: 500px;height: 564px;}
}
@media (max-width: 600px) {
    .list-wrap{height: 1750px;}
    .list-container{width: 460px;}
    .list-container>ul{gap: 60px;}
    .list-container>ul>li{width: 460px;}
    .list-container>ul>li>img{width: 460px;}
    .explain-system{height: 550px;}
    .explain-cont{width: 100%;}
    .explain-cont>p{width: 78%;margin: 0 auto}
    .explain-cont>.middle-img{width: 460px;}
}
@media (max-width: 585px) {
    .minitabs-wrap{height: 700px;}
    #minitab-image{width: 430px;height: 485px;}
}
@media (max-width: 500px) {
    .gallery-wrapper{display: none;}
    .gallery-wrapper-mobile{display: block;}
}
@media (max-width: 430px) {
    .list-wrap{display: none;}
    .list-wrap-mobile{display: block;}
    .explain-cont>.middle-img{display: none;}
    .explain-cont>.mobile-img{display: block;}
    .row-group{display: none;}
    .col-group-mobile{display: block;}
    .col-group-mobile>div img{width: 320px;}
    .minitabs-wrap{height: 600px;}
    #minitab-image{width: 360px;height: 406px;}
}
@media (max-width: 414px) {
    .col-group-mobile{height: 1500px;}
}
@media (max-width: 390px) {
    .list-wrap-mobile{height: 1500px;}
    .list-container-mobile>ul>li>img{width: 340px;}
    .explain-system{height: 450px;}
    .explain-cont>p{line-height: 30px;font-size: 1.1rem;}
    .explain-cont>.mobile-img{width: 340px;}
    .minitabs{padding: 5px 0;}
    .minitab{font-size: 1rem;}
    .col-group-mobile{height: 1500px;}
    .col-group-mobile>div img{width: 300px;}
}
@media (max-width: 375px) {
    .col-group-mobile{height: 1450px;}
    .col-group-mobile>div img{width: 290px;}
    .minitabs-wrap{height: 550px;}
    #minitab-image{width: 330px;height: 372px;}
}
@media (max-width: 365px) {
    .list-container-mobile>ul>li>img{width: 320px;}
    .explain-cont>.mobile-img{width: 320px;}
    .col-group-mobile{height: 1400px;}
    .col-group-mobile>div img{width: 270px;}
    .pdf-download{width: 240px;}
    .pdf-download>a{width: 240px;}
}