@charset "utf-8";


/*index*/

.main-sec1{
    flex-shrink: 0; position: relative; width: 100%; height: 100vh; padding:11px 12px;
}
.mainSlide{
    overflow: hidden; width:100%; height: 100%; border-radius: 12px;
}
.mainSlide .swiper-slide img{
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.mainSlide .swiper-slide::before{
    content: ''; position: absolute; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.main-sec1 .slide-text{
    display: flex; flex-direction: column; align-items: center; position: absolute; left:50%; transform: translate(-50%, -50%); top:50%;
    color:white; text-align: center; font-size: 4.2rem; line-height: 1.5; z-index: 99;
    font-size: 1.8rem; line-height: 1.4;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    max-width: 90%;
}
.main-sec1 .slide-text .text-jungsung{
    width: 218px;
}
.main-sec1 .slide-text small{
    margin-top: 1.2rem; margin-bottom: 1rem;
    font-size: 0.82em;
}
.main-sec1 .scroll{
    width:165px; height: 165px;position: absolute; right:11px; bottom:10px; z-index: 99;
}
/* index main section2 */
.main-sec2{
    position:relative; width: 100%; flex-shrink: 0; position: relative; padding: 130px 0;
    /* background-color: #111; */

}

.main-sec2-list{
    /* display: flex; flex-direction: column; */
}
.main-sec2-list li{
    display: flex; align-items: center; gap:50px;
    transition: transform 0.3s ease;
}
.main-sec2-list li:hover{
    transform: translateY(-3px);
}
.main-sec2-list li .left {
    width: 450px;
}
.main-sec2-list li:nth-child(2n) .left{
    order: 3;
}
.main-sec2-list li:nth-child(2n) .right{
    margin-left: auto; text-align: right;
}
.main-sec2-list strong{
    color:white; width:320px;
}
.main-sec2-list p{
    width:320px;
    color: #DDE4EB; margin-top: 27px;
}
/* .main-sec2-list li figure{
    display: block; margin:0 auto;
}
.main-sec2-list li.img-1 figure{
    width:22%;transform: translateX(-130%);
}
.main-sec2-list li.img-2 figure{
    width:17%;transform: translateX(100%);
}
.main-sec2-list li.img-3 figure{
    width:20%;transform: translateX(-130%);
}
.main-sec2-list li.img-4 figure{
    width:25%; transform: translateX(75%);
}
.main-sec2-list li[class^="text"]{
    display: flex; align-items: center; flex-direction: column;
    z-index: 99;
}

.main-sec2-list li.text-1{
    margin-top: -8%; margin-bottom: 20%;
}
.main-sec2-list li.text-2{
    margin: 10% 0 15%;
}
.main-sec2-list li.text-3{
    margin-top: 10%; margin-bottom: 10%;
}
.main-sec2-list li.text-4{
    margin-top: -10%; margin-bottom: 200px;
}*/
.main-sec2 img{
    /* width:100vw; height: 100vh; */
}

.main-sec3{
    position: relative; height: 100vh;
}
.main-sec3::before{
    content: '';
    position: absolute; right:0; top:0; width:442px; height: 414px;;
    background: var(--section3-bg-logo); /* CSS 변수를 참조 */
    background-position: top -100px right -200px;
    background-size:contain;
    z-index: 999; pointer-events: none;
}
.main-sec3 .main-sec-title{
    display: flex; justify-content: space-between; position: absolute;  top:20%; left:50%; transform: translateX(-50%);
    z-index: 999;
}

.main-sec3 > .container{
    height: 100%;
}
.main-sec3-list{
    display: flex; height: 100%;
}
.main-sec3-list li{
    display: flex; flex-direction: column; align-items: center; justify-content: end; width:16.6666%; padding:20% 0;
    border-right: 1px solid #ECF1FA; font-family: var(--font-myeongjo); background-color: white;
    transition: all 0.2s ease-in-out;
}
.main-sec3-list li:hover{
    color:white;
    background-color: transparent;
}

.main-sec3-list li > div{
    text-align: center; margin-top: 20px; height: 82px;
}
.main-sec3-list li > div span{
    display: block; color:var(--sub-text-color); font-size: 1.4rem; margin-top: 13px;
}
.main-sec3-list li figure{
    position: relative; width:113px; height: 113px;
}
.main-sec3-list li figure img{
    position: absolute; object-fit: contain; object-position: center;
    transition: all 0.2s ease-in-out;
}
.main-sec3-list li figure .white{
    opacity: 0;
}
.main-sec3-list li:hover figure .white{
    opacity: 1;
}
.main-sec3-list li:hover figure img:not(.white){
    opacity: 0;
}
.main-sec4 {
    padding-left: 10%;
    height: 100vh;
}
.main-sec4 .left{
    margin-top: -18%;
}
.main-sec4 iframe{
    width:100%;
}
.main-sec4 {
    display: flex; align-items: center;
}
.main-sec4 .right{
    width: 80%;
}
/* Brand story */

.brandStory .sec1 .line {
    display: block; width: 1px; margin:0 auto; height: 180px;
    background-color: #080808;
}
.brandStory .sec4 .top{
    display: flex; justify-content: space-between;
}
.brandStory .sec4 .top-left{
    width:28%;
}
.brandStory .sec4 .top-right{
    width:62%;
}
.brandStory .sec4 .top-right .deco{
    position: relative;
}
.brandStory .sec4 .top-right .deco::before{
    content: ''; position: absolute; right:60px; top:69px; width:26px; height: 60px;
    background: url(/public/skin2/img/deco_img_1.png) no-repeat; background-size: contain;
}
.brandStory .sec5{
    position: relative;
}
.brandStory .sec5::before{
    content: ''; position: absolute; width:500px; height: 500px; right: 0; top:-80%; z-index: 999;
    background: url(/public/skin2/img/logo_bg.png) no-repeat; background-size: contain; background-position: right -200px bottom 0;
}
.brandStory .sec5 .brandStory-slide {
    height: 620px;
}
.brandStory .sec5 .brandStory-slide .swiper-slide{
    display: flex;
    background-color: #F7F7F7;
}
.brandStory .sec5 .brandStory-slide .swiper-slide .left{
    width:54%; flex-shrink: 0;
}
.brandStory .sec5 .brandStory-slide .swiper-slide .right{
    padding-left: 10rem; padding-top: 6rem;
}
.brandStory .sec5-list li{
    position: relative; padding-left: 25px;
}
.brandStory .sec5-list li::before{
    content: ''; position: absolute; left:0; top:4px; width:15px; height: 16px;
    background: url(/public/skin2/img/deco_img_2.png) no-repeat; background-size: contain; background-position: center;
}
.brandStory-thumb-slide.swiper {
    overflow: visible; position: absolute; right: 0; bottom:0;
    width: 40vw ; z-index: 9;
}
.brandStory-thumb-slide .swiper-slide{
    position: relative; overflow: unset; cursor: pointer;
}
.brandStory-thumb-slide .swiper-slide img{
    transition: all 0.2s ease-in-out;
}
.brandStory-thumb-slide .swiper-slide:hover img{
    transform: scale(1.1);
}
.brandStory-thumb-slide .swiper-slide-thumb-active::before{
    content: ''; position: absolute; width: 7px; height: 7px; top:-16px; left:50%; transform: translateX(-50%);
    border-radius: 50%; background-color: var(--primary-color);
}
/* strength html */
.strength .sec1 {
    text-align: center;
}
.strength .sec1 strong b{
    font-size: 58px;
}
.strength .sec1 img{
    display: block; width:80%; margin:0 auto;
}
.strength .sec2 .strength-list li{
    display: flex; position: relative; gap:42px;
}
.strength .sec2 .strength-list li:nth-child(n+2):nth-child(-n+6){
    margin-top: -19px;
}
.strength .sec2 .strength-list li .left{
    width: 260px; flex-shrink: 0;
}
.strength .sec2 .strength-list li .right{
    display: flex; flex-direction: column; justify-content: end;
}
.strength .sec2 .strength-list li:nth-child(2n){
    justify-content: end;
}
.strength .sec2 .strength-list li:nth-child(2n) .left{
    order: 2;
}
.strength .sec2 .strength-list li:nth-child(2n) .right{
    text-align: right;
}
.strength .sec2 .strength-list li:nth-child(2n) .right img{
    margin-left: auto;
}
.strength .sec2 .strength-list li .right img{
    width: 50px;
}
.strength .sec2 .strength-box{
    padding:0.8rem;
    background-color: #9F9888;
    color: white;
    text-align: center;
}
.strength .sec3{

}
.mono-textBox{
    display: inline-block;
    padding:0.7rem 2rem;
    background-color:#F2F5FC; border-radius: 0.8rem;
    font-size: 1.8rem; color:#898C91;
}
.strength-slide .swiper-wrapper{

}
.strength-slide-wrap{
    background:url(/public/skin2/img/strength_bg_1.jpg) no-repeat; background-size: cover; padding:8rem 0 6rem;
}
.strength-slide .swiper-slide{
    display: flex; align-items: flex-end;
}
.strength-slide .swiper-slide .left{
    max-width: 534px; margin-right: 76px; flex-shrink: 0;
}
.strength-slide .swiper-slide .left img{
    border-radius: 8px;
}
.strength-slide .swiper-slide .right{
    position: relative;
}
.strength-slide .swiper-slide .right span{
    margin-right: 13px;
}
.strength .sec4 .slide-control{
    display: flex; flex-direction: column; position: absolute; top:110px; left:610px;
    z-index: 999;
}
.strength .sec4 h3{
    display: flex; align-items: center; gap: 10px; margin-bottom: -60px;
}
.strength .sec4 .swiper-pagination{
    position: relative; width: unset; margin:unset; bottom: unset; top:unset;
    text-align: left;
}
.strength .sec4 .swiper-pagination-bullet{
    position: relative;
    background-color: var(--primary-color);
}
.strength .sec4 .swiper-pagination-bullet-active{
    margin:0 8px;
}
.strength .sec4 .swiper-pagination-bullet-active::before{
    content: ''; position: absolute; width:17px; height: 17px; left:50%; top:50%; transform: translate(-50%,-50%);
    background-color: rgba(var(--primary-color-rgb),0.4);
    border-radius: 50%;
}
.strength .sec5{
    display: flex; justify-content: space-between; padding-top: 12rem;
}
.strength .sec5 > .left .position-sticky{
    position: sticky; top:120px;
}
.strength .sec5 > .left .left-top{
    display: flex; height: 259px; flex-direction: column; justify-content: space-between;
}
.strength .sec5 > .right{
    display: flex;
}
.strength .sec5 .franchise-list{
    width: 574px;
}
.strength .sec5 .franchise-list li{
    margin-bottom: 4rem; padding:0 3.5rem 5rem;
    border-left: 1px solid #DADEE6;
}
.strength .sec5 .franchise-list li.item-lg{
    padding-bottom: 4rem;
}
.strength .sec5 .franchise-item{
    display: flex; gap: 2rem;
    transition: transform 0.3s ease;
}
.strength .sec5 .franchise-item:hover{
    transform: translateX(5px);
}
.strength .sec5 .franchise-item .badge-wrap{
    margin-bottom: 1.6rem;
}
.strength .sec5 .franchise-item .badge{
    padding: 4px 10px;
    border:1px solid var(--black); border-radius:34px;
    font-size: 1.5rem;
}
.strength .sec5 .franchise-item figure{
    width: 213px;
}
.strength .sec5 .franchise-item .price{
    display: flex; flex-direction: column; gap:10px;
}
.strength .sec5 .franchise-item .price strong{

}
.strength .sec5 .franchise-item.item-lg {
    flex-direction: column;
}
.strength .sec5 .franchise-item.item-lg figure{
    width:100%;
}
.strength .sec5 .franchise-item.item-lg .price{
    flex-direction: row; justify-content: space-between; align-items: end;
}
.strength .sec5 .franchise-item .franchise-text{
    display: flex; flex-direction: column; justify-content: space-between; padding:1rem 0;
}
.strength .sec5 .franchise-item.item-lg .franchise-text{
    justify-content: end;
}
.strength .sec6 {
    padding:17rem 0;
}
.strength .sec6 .place-list{
    display: flex; flex-direction: column; margin-right: 74px; margin-top: -1.4rem;
}
.strength .sec6 .place-list li {
    position: relative; padding: 1.4rem 1.2rem;
    opacity: 0.6;
}
.strength .sec6 .place-list li.on{
    opacity: 1;
}
.strength .sec6 .place-list li.on::before{
    position: absolute; content: ''; width: 7px; height: 7px; right:-10px; top:50%; transform: translateY(-50%);
    border-radius: 50%; background-color: var(--primary-color);
}
.strength .sec6 .franchise-wrap{
    display: flex; padding:4rem 0;
    border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);
}
.strength .sec6 .left {
    width: 62rem; margin-right: 6rem; flex-shrink: 0;
}
.strength .sec6 .left .root_daum_roughmap{
    width: 100%; height:100%;
}
.strength .sec6 .left .root_daum_roughmap .wrap_map{
    height: 100%;
}
.strength .sec6 .right{
    width:100%;
}
.strength .sec6 .right .map-list thead{
    display: table; width: 100%; table-layout:auto;
    background-color: rgba(255, 255, 255, 0.1); border-radius: 1.2rem;
    font-size: 1.4rem; font-weight: 500;
}
.strength .sec6 .right .map-list thead th{
    width: 60px; padding:1.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.strength .sec6 .right .map-list thead th:first-child{
    width: 30%; padding-left: 2.4rem;
    border-top-left-radius: 1.2rem; border-bottom-left-radius: 1.2rem;
    text-align: left;
}
.strength .sec6 .right .map-list thead th:last-child{
    padding-right: 1rem;
    border-top-right-radius: 1.2rem; border-bottom-right-radius: 1.2rem;
}
.strength .sec6 .right .map-list tbody{
    display: block; width: 100%; height: 480px; overflow:auto;
    text-align: center;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.strength .sec6 .right .map-list tbody::-webkit-scrollbar{
    display: none;
}
.strength .sec6 .right .map-list tbody tr{
    display: table; table-layout:auto; width:100%;

}
.strength .sec6 .right .map-list tbody td:first-child{
    width: 30%; white-space: pre-line;
    text-align: left; padding-left: 2.4rem; font-size: 1.6rem;
}
.strength .sec6 .right .map-list tbody td:last-child{
    padding-right: 1rem;
}
.strength .sec6 .right .map-list tbody td{
    width: 60px; padding: 2.2rem 0.5rem;
    font-size: 1.8rem;
    line-height: 1.5;
}
.strength .sec6 .right .map-list tbody td i{

    color: var(--primary-color);
}
.strength .sec6 .right .map-list tbody td.off i{
    opacity: 0.3; color: var(--black);
}
.strength .sec6 .right .map-list tbody td b{
    font-weight: 700;
}
.strength .sec6 .right .map-list tbody td p{
    font-size: 1.4rem; opacity: 0.7;
}
.startup .sec1{
    display: flex; align-items: center; gap: 80px;
}
.startup .sec1 .left{
    width: 73%;
}
.startup .sec1 iframe{
    overflow: hidden;
}
.startup .sec2 > .container{
    display: flex; gap:70px;
}
.startup .sec2 > .container > .left{
    display: flex; align-items: center; padding:0 9rem;color: white;
}
.startup .sec2 > .container > .right{
    position: relative; padding: 5.2rem 0;
}
.startup .sec2 > .container .startup-list{
    position: relative;
}
.startup .sec2 > .container .startup-list > li{
    display: flex; flex-direction: column; position: relative; margin:32px 0;
}
.startup .sec2 > .container .startup-list > li small {
    margin-bottom: 0.8rem;
}
.startup .sec2 > .container .startup-list > li small .badge{
    padding: 3px 8px;
    background-color: var(--black); border-radius: 30px;
    color: white;
}
.startup .sec2 > .container .startup-list > li b{
    display: block; margin-bottom: 0.7rem; flex-shrink: 0;
}
.startup .sec2 > .container > .left{
    justify-content: center; width: 40%;
}
.startup .sec3{
    overflow-x: hidden;
}
.startup .sec5 ul{
    display: flex; gap: 48px;
}
.startup .sec5 li{
    display: flex; gap: 12px;
}
.startup .sec5 li .left{
    width: 68px;
}
.price-table{
    text-align: center; width: 100%; margin-top: 34px;
}
.border-right-0{
    border-right: none!important;
}
.border-left-0{
    border-left: none!important;
}
.border-px-0{
    border-right: none!important;
    border-left: none!important;
}
.border-top-0{
    border-top: none!important;
}
.border-bottom-0{
    border-bottom: none!important;
}
.border-bottom-black{
    border-bottom-color: var(--black)!important;
}
.border-black{
    border-color: var(--black)!important;
}
.border-top-black{
    border-top-color: var(--black)!important;
}
.price-table, .price-table th, .price-table td{
    border-collapse : collapse;
}
.price-table th, .price-table td{
    border : 1px solid #DADFE9;
    padding:22px 35px;
    line-height: 1.5;
}
.price-table th{
    background-color: var(--black);
    color: white;
}
.table-info{
    margin-top: 32px;
    font-size: 1.5rem;
}
.table-info li{
    position: relative; margin-bottom: 5px; padding-left: 10px;
    line-height: 1.8; font-weight: 300;
}
.table-info li::before{
    content: '-'; position: absolute; left:0; top:-1px;
}
.menu .sec1 .ul-wrap{
    margin-bottom: 150px;
    border-top: 1px solid #DADEE6; border-bottom: 1px solid #DADEE6;
}
.menu .sec1 ul {
    display: flex;
}
.menu .sec1 ul li{
    display: flex; gap: 10px; flex-direction: column; position: relative; width: 20%; padding:4.2rem;
    border-right: 1px solid #DADEE6;
}
.menu .sec1 ul li:nth-child(2n) img{
    order:3;
}
.menu .sec1 ul li:first-child{
    border-left: 1px solid #DADEE6;
}
.menu .sec1 ul li .text-wrap{
}
.menu .sec2 .menu-list-wrap{
    border-top: 1px solid #DADEE6;
    border-bottom: 1px solid #DADEE6;
}
.menu .sec2 nav{
    position: sticky; top:102px; z-index: 99;
    text-align: center; background-color: #F7F7F7;
}
.menu .sec2 nav ul{
    display: flex; justify-content: center;
    margin-bottom: 24px;
}
.menu .sec2 nav::before{
    content: ''; position: absolute; width: 100%; height: 200px; bottom:0; left:0;
    background-color: #F7F7F7; z-index: -999;
}
.menu .sec2 nav ul li{
    position: relative; padding:1.9rem 2.2rem;
    color: var(--sub-text-color); font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}
.menu .sec2 nav ul li.on{
    color:var(--black); font-weight: 700;
}
.menu .sec2 nav ul li.on::before{
    content: ''; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); width:0.7rem; height: 0.7rem;
    background-color: var(--primary-color); border-radius: 50%;
}
.menu .sec2 .menu-list{

}
.menu .sec2 .menu-list li ul li{
    border-left:1px solid #DADEE6;
    border-bottom:1px solid #DADEE6;

}
.menu .sec2 .menu-list li ul li:last-child{
    border-right:1px solid #DADEE6;
}
.menu .sec2 .menu-list li ul li:nth-child(4n){
    border-right:1px solid #DADEE6;

}
.menu .sec2 .menu-item{
    margin:0 -10px; display: flex; flex-wrap: wrap;
}
.menu .sec2 .menu-item li{
    position: relative; width:25%; padding:0 60px 60px;
    transition: transform 0.3s ease;
}
.menu .sec2 .menu-item li:hover{
    transform: translateY(-3px);
}
.menu .sec2 .menu-item .new-badge{
    display: flex; justify-content: center; align-items: center; position: absolute; right:70px; top:30px; width: 6.9rem; height: 6.9rem;
    background:url(/public/skin2/img/menu_polygon.png); background-size: cover; border-radius: 50%;
    font-size: 1.5rem; color: white; font-weight: 700; z-index: 99;
}

.menu .sec2 .menu-item .category-badge{
    display: inline-block; margin-bottom: 0.6rem; padding:0.3rem 0.9rem;
    background-color: #EDF2FB; border-radius: 4px;
    color: var(--sub-text-color);
}

.diamond-image {
    width: 10v;
    height: 10v;
    aspect-ratio: 1;
    min-width: 46px;
    min-height: 46px;
    object-fit: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ------------ responsive ------------ */
@media screen and (max-width:1740px) {
    .strength .sec5 .franchise-list {
        width: 400px;
    }
    .strength .sec5 .fs-32{
        font-size: 2.4rem;
    }
    .strength .sec5 .fs-20{
        font-size: 1.8rem;
    }
    .strength .sec5 .franchise-item figure{
        width: 170px;
    }
    .strength .sec5 .franchise-list li{
        margin-bottom: 2.4rem; padding: 0 2.4rem 4rem;
    }
    .strength .sec5 .franchise-item .badge{
        font-size: 1.4rem; padding:3px 8px;
    }
    .menu .sec2 .menu-item .new-badge{
        top:20px; right:20px;
    }
}
@media screen and (max-width:1600px) {
    .main-sec3-link{
        width:300px; height: 300px; padding:0 40px;
    }
    .main-sec3-link p {
        margin: 10px 0 16px;
    }
    /* .main-sec2 .left{
        margin-right: 160px;
    } */
    .specialFeature_list{
        width:600px; margin:0 -12px; margin-bottom: 12px;
    }
    .specialFeature_list li{
        padding:0 12px;
    }
    .menu .sec2 .menu-item li{
        padding:0 40px 40px;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 570px;
    }
}
@media screen and (max-width:1440px) {
    .brandStory .sec1 .line{
        height: 150px;
    }
    .main-sec3-link{
        width:240px; height: 240px;
    }
    .strength .sec1 .strength-list{
        flex-wrap: wrap;
    }
    .strength .sec1 .strength-list .rectangle .text-rectangle{
        padding:0 1rem;
        font-size: 2rem;
    }

    .strength .sec2 .strength-list li:nth-child(n+2):nth-child(-n+6){
        margin-top: 20px;
    }
    .menu .sec1 ul li{
        width: 33.33333%; gap: 10px; padding:2.4rem;
    }
    .menu .sec1 ul li:nth-child(4){
        border-left: 1px solid #DADEE6;
    }
    .menu .sec1 ul{
        flex-wrap: wrap; justify-content: center;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 550px;
    }
}
@media screen and (max-width:1280px) {
    .brandStory-thumb-slide.swiper{
        width:40vw;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .right{
        padding-left: 5rem !important; padding-bottom: 2rem !important;
    }
    .brandStory .sec5::before{
        width: 300px; height: 300px; top:-70%;
        background-position: right -100px bottom 0;
    }
    .main-sec2-list li{
        gap:30px; margin-bottom: 30px;
    }
    /* .main-sec2 .left{
        margin-right: 5%;
    } */
    .specialFeature_list{
        width:500px;
    }
    .main-sec2-hover{
        font-size: 1.8rem;
    }
    .strength-slide .swiper-slide .left{
        max-width: 400px; margin-right: 44px;
    }
    .strength-slide .swiper-slide{
        padding-top: 12rem;
    }
    .strength .sec3 .slide-control{
        top:40px; left:0; margin-bottom: 4rem;
    }
    .strength .sec3 .swiper-pagination{
        margin-left: calc(400px + 44px);
    }
    .strength .sec3 .slide-control .swiper-pagination{
        margin-top: 1rem;
    }
    .strength .sec5 .franchise-list li{
        padding: 0 2rem 3rem;
    }
    .strength .sec5 .fs-32 {
        font-size: 2rem;
    }
    .strength .sec5 .fs-20{
        font: 1.6rem;
    }
    .strength .sec5 .franchise-list li.item-lg {
        padding-bottom: 2rem;
    }
    .strength .sec5 .franchise-list {
        width: 320px;
    }
    .strength .sec6 .left{
        width: 50rem; margin-right: 5rem;
    }
    .strength .sec6 .place-list{
        margin-right: 30px;
    }
    .strength .sec6 .left{
        margin-right: 2rem;
    }
    .startup .sec5 ul{
        flex-wrap: wrap;
    }
    .startup .sec5 li{
        width: calc(50% - 24px);
    }
    .menu .sec2 .menu-item li {
        padding: 0 20px 20px;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 450px;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .left {
        height: 100%;
    }
}
@media screen and (max-width:991px) {
    .main-sec2-list li.img-1 figure{
        width:52%;transform: translateX(-90%);
    }
    .main-sec2-list li.img-2 figure{
        width:47%;transform: translateX(100%);
    }
    .main-sec2-list li.img-3 figure{
        width:50%;transform: translateX(-80%);
    }
    .main-sec2-list li.img-4 figure{
        width:55%; transform: translateX(45%);
    }
    .main-sec2-hover{
        top:10px; left:10px; width: calc(100% - 20px); height: calc(100% - 20px);
    }
    .main-sec3{
        height: unset;
    }
    .brandStory .sec1 .line{
        height: 130px;
    }
    .brandStory .sec4 .top{
        flex-direction: column;
    }
    .brandStory .sec4 .top-left{
        width:100%; margin-bottom: 50px;;
    }
    .brandStory .sec4 .top-left img{
        overflow: hidden;  width:100%; height: 500px; object-fit: cover;
    }
    .brandStory .sec4 .top-right{
        width:100%;
    }
    .brandStory .sec4 .top-right img{
        /* width: 80%; */
    }
    .brandStory .sec5 .brandStory-slide {
        height: 950px;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .left {
        height: 60%;
    }
    .brandStory .sec5::before{
        z-index: -99; top:-20%;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .left{
        width:100%;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide{
        flex-direction: column;
    }
    .brandStory-thumb-slide.swiper{
        bottom:unset; top:30px; right:20px;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .right{
        padding-top: 4rem;
    }
    .main-sec3{
        padding:120px 0 0;
    }
    .main-sec3-list{
        width: 100%;
    }
    .main-sec3-list li > div{
        height: unset; margin-top: 0; margin-left: 30px; text-align: left;
    }
    .main-sec3-list li > div span{
        margin-top: 4px;
    }
    .main-sec3-list li figure{
        width:80px; height: 80px;
    }
    .main-sec3 .main-sec-title{
        width: 100%; position: relative; top:0; left: 0; margin-bottom: 3rem;
        transform: unset;
    }
    .main-sec3 .main-sec-title a{
        padding: 12px; margin-right: 12px;
    }
    .main-sec3-list{
        flex-direction: column;
    }
    .main-sec3-list li{
        width:100%; padding:20px 0; flex-direction: row; justify-content: start;
        border-right: 0; border-bottom: 1px solid #ECF1FA;
    }
    .main-sec3-list li:first-child{
        border-top: 1px solid #ECF1FA;
    }
    .specialFeature_list{
        width:380px; margin:0 -6px;
    }
    .specialFeature_list li{
        padding:6px; margin-bottom: 6px;
    }
    .specialFeature_list li:nth-child(2n-1) {
        transform: translateY(-100px);
    }
    .strength .sec3 .container > .container{
        width: 100%;
    }
    .strength-slide .swiper-wrapper{
        align-items: flex-start;
    }
    .strength-slide .swiper-slide{
        flex-wrap: wrap;
    }
    .strength-slide .swiper-slide .left{
        max-width: 100%; margin-right: 0;
    }
    .strength-slide .swiper-slide .right{
        width:100%; margin-top: 3rem;
    }
    .strength .sec1 .strength-list::before{
        content: unset;
    }
    .strength .sec1 .strength-list li{
        width:23.333333%; padding:0 5%; margin-bottom: 3rem;
        box-sizing: content-box;
    }
    .strength .sec1 .strength-list li > .ic{
        margin-bottom: -30px; z-index: 999;
    }
    .strength .sec1 .mono-textBox{
        margin-top: 2rem;
    }
    .strength .sec2 .strength-list li:nth-child(2n) {
        justify-content: start;
    }
    .strength .sec2 .strength-list li:nth-child(2n) .left {
        order: 0;
    }
    .strength .sec2 .strength-list li:nth-child(2n) .right{
        text-align: left;

    }
    .strength .sec2 .strength-list li:nth-child(2n) .right img{
        margin-left: unset;
    }
    .strength .sec3 .d-flex{
        flex-direction: column; gap: 30px;
    }
    .strength .sec3 .swiper-pagination{
        margin:0 auto; padding-bottom: 4rem;
    }
    .strength .sec4{
        flex-wrap: wrap;
    }
    .strength .sec4 > .left{
        width:100%;
    }
    .strength .sec4 > .right{
        width:100%; margin:0.6rem -0.6rem 0;
    }
    .strength .sec5 > .right{
        flex-direction: column;
    }
    .strength .sec5 .franchise-list {
        width: 340px;
    }
    .strength .sec6 .franchise-wrap{
        flex-wrap: wrap;
    }
    .strength .sec6{
        padding: 8rem 0;;
    }
    .strength .sec6 .place-list{
        flex-direction: row; overflow-x: scroll; margin-bottom: 1rem;
    }
    .strength .sec6 .franchise-wrap{
        padding:2rem 0;
    }
    .strength .sec6 .place-list li.on::before{
        width: 4px; height: 4px;
        right:50%; top:80%; transform: translate(50%, 0);
    }
    .strength .sec6 .left{
        width:100%; height: 400px; margin-right: 0; margin-bottom: 2rem;
    }
    .startup .sec1{
        gap: 40px; padding-right: 20px;
    }
    .startup .sec2 > .container > .right::before{
        height: 120%; top:-20%;
    }
    .startup .sec2 > .container{
        flex-wrap: wrap; gap: 30px;
    }
    .startup .sec2 > .container > .left{
        width: 100%; padding:5rem 2rem;
    }
    .startup .sec2 > .container > .right{
        padding:0;
    }
    .scrollX-tb-mb{
        overflow-x: scroll;
    }

    .startup .sec3 img{
        max-width: unset; max-width: 990px;
    }
    .startup .sec2 > .container .startup-list  > li::before{
        width:6px; height: 6px;
    }
    .startup .sec2 > .container .startup-list > li{
        padding-left: 0;
    }
    .startup .sec2 > .container .startup-list > li::before{
        left: 2px;
    }

    .menu .sec2 nav{
        top:50px;
    }
    .menu .sec2 .menu-item li{
        width:50%
    }
    .menu .sec2 .menu-list li ul li:nth-child(2n){
        border-right: 1px solid #DADEE6;
    }
    .menu .sec2 .menu-item .new-badge{
        width:5rem; height: 5rem;
    }
    .menu .sec1 ul li .text-wrap{
        bottom:1rem;
    }
}
@media screen and (max-width:768px) {
    /* .main-sec2{
        overflow-x: hidden;
        padding-top: 140px;
    }
    .main-sec2 .left{
        width:100%; margin-right: 0;
    } */
    .main-sec2-list li:nth-child(2n) .left{
        order: 0;
    }
    .main-sec2-list li:nth-child(2n) .right{
        text-align: left; margin-left: unset;
    }
    .main-sec2-list p{
        margin-top: 16px;
    }
    .specialFeature_list{
        width: calc(100% + 12px); margin:0 -6px;
    }
    .specialFeature_list li:nth-child(2n-1){
        transform: translateY(-76px);
    }
    .main-sec3::after{
        padding-top: 142%;
    }
    .main-sec3-right a{
        margin-bottom: 3rem;
    }
    .main-sec3 .container-lg{
        flex-direction: column; align-items: flex-start;
    }
    .mainSlide .swiper-slide img{
        object-position:60% center;
    }
    .mainSlide .slide-text{
        font-size: 3rem;
    }
    .mainSlide .slide-text small{
        font-size: 0.6em;
    }
    .mainSlide .slide-text{
        top:84%; font-size: 3.2rem;
    }
    .mainSlide .slide-progressBar-wrap{
        display:none;
    }
    .slide-control .swiper-button-next, .slide-control .swiper-button-prev{
        width:48px; height: 48px;
    }
    .slide-control img{
        width:20px;
    }
    .main-sec4{
        flex-direction: column; justify-content: start; padding:50px 0 200px; height: unset;
        text-align: center; background-position: right 0 !important;
    }
    .main-sec4 .left{
        margin-top: 50px;
    }
    .main-sec4 .right{
        width: 100%;
    }
    .brandStory .sec1 .line{
        height: 110px;
    }
    .brandStory .sec4 .top-right .deco::before{
        right:0; top:0;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 950px;
    }
    .strength .sec4 > .right li{
        width:50%;
    }
    .strength .sec5{
        flex-direction: column;
    }
    .strength .sec5 > .left .left-top{
        height: auto;
    }
    .strength .sec5 > .left .left-bottom{
        margin-top: 24px; margin-bottom: 40px;
    }
    .strength .sec5 .franchise-list{
        width: 100%;
    }
    .strength .sec6 .left{
        height: 300px;
    }
    .startup .sec1{
        flex-direction: column; padding-right: 0;
        text-align: center;
        gap: 20px;
    }
    .startup .sec1 .left{
        width: 100%;
    }
    .startup .sec2 .right .d-flex .left{
        width:120px; flex-shrink: 0;
    }
    .startup .sec5 li{
        width: 100%;
    }
    .price-table th, .price-table td{
        padding: 10px 12px;
    }
    .menu .sec1 ul{
        justify-content: center;
    }
    .menu .sec1 ul li{
        width:50%; padding:2rem;
    }
    .menu .sec1 ul li:nth-child(4){
        border-left: none;
    }
    .menu .sec1 ul li:nth-child(5){
        border-left: 1px solid #DADEE6;
    }
    .menu .sec2 .menu-item li{
        width:50%
    }
}
@media screen and (max-width:575px) {
    /* 모바일 간격 및 터치 영역 개선 */
    .menu .sec2 .menu-item li{
        padding: 0 12px 16px;
    }
    .main-sec1{
        padding:8px 10px;
    }
    .menu .sec2 nav ul li.on::before{
        bottom:6px; width: 0.5rem; height: 0.5rem;
    }
    .main-sec1 .scroll{
        right: 9px; bottom:7px; width: 130px; height: 130px;
    }
    .main-sec1 .slide-text .text-jungsung{
        width: 35%;
    }
    .main-sec2-list p{
        margin-top: 1.6rem;
    }
    /* .main-sec2-list li.img-1 figure{
        width: 80%; transform: translateX(-30%);
    } */
    .main-sec2-list li{
        flex-wrap: wrap; gap:16px; margin-bottom: 67px;
    }
    .main-sec2-list li .left, .main-sec2-list li .right{
        width: 100%;
    }

    /* .main-sec2-list li.text-1{
        margin-top: -38%;  margin-left: 42%;
    }
    .main-sec2-list li.img-2 figure{
        width:57%;
        transform: translateX(51%);
    }
    .main-sec2-list li.text-2{
        margin-top: -35%;
    }
    .main-sec2-list li.img-3 figure {
        width: 90%; transform: translateX(0);
    }
    .main-sec2-list li.text-3{
        margin-top: 10%;
        margin-left: 6%;
    }
    .main-sec2-list li.text-4{
        margin-top: -20%;
    } */
    .main-sec4 iframe{
        height: 380px;
    }
    .strength .sec2 .strength-list li{
        flex-direction: column; gap:20px; margin-bottom: 40px;
    }
    .strength .sec2 .strength-list li .left{
        width:100%;
    }
    .brandStory .sec1 .line{
        height: 80px;
    }
    .brandStory .sec2 .text-right{
        text-align: left; margin-top: 1.2rem!important;
    }
    .brandStory .sec4 .top-left img{
        height: 300px;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 80vh;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .left {
        height: 40%;
    }
    .brandStory-thumbnail .swiper-slide{
        width: 60px;
    }
    .brandStory-slide .slide-text strong{
        font-size: 6rem;
    }
    .brandStory-slide .slide-text{
        top:40%;
    }
    .brandStory-thumbnail .swiper-wrapper{
        flex-direction: row;
    }
    .brandStory .sec5 .brandStory-slide .swiper-slide .right{
        padding-left: 3rem; padding-top: 3rem;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 850px;
    }
    .brandStory-thumb-slide.swiper{
        width: 150px;
    }
    .strength .sec1 .strength-list{
        justify-content: space-around;
    }
    .strength .sec1 .strength-list li{
        width:40%; padding:0;
    }
    .strength .sec2 .strength-list li .right img{
        width:40px;
    }
    .strength .sec6 .place-list{
        margin-right: 0;
    }
    .strength .sec6{
        padding:3rem 0;
    }
    .startup .sec2 > .container{
        gap: 10px;
    }
    .startup .sec5 li .left{
        width: 52px;
    }
    .menu .sec1 ul{
        flex-wrap: wrap; justify-content: flex-start; padding: 0 10px;
    }
    .menu .sec1 ul li{
        width:50%; padding:12px;
    }
    .menu .sec1 ul li:nth-child(3) {
        border-left: 1px solid #DADEE6;
    }
    .menu .sec1 .ul-wrap{
        margin-bottom: 80px;
    }
    .menu .sec2 nav::before{
        height: 100px;
    }
    .menu .sec2 nav ul li{
        padding:1.4rem 1.6rem;
    }
    .menu .sec2 .menu-item li {
        padding: 0 12px 12px;
    }
    .menu .sec2 .menu-item .category-badge{
        font-size: 1.3rem;
    }
    .menu .sec2 .menu-item .new-badge{
        top:5px; right:5px; font-size: 1.2rem;
    }

}
@media screen and (max-width:412px) {
    .main-sec3 .main-sec-title{
        flex-direction: column;
    }
    .main-sec3 .main-sec-title .right{
        margin-left: auto;
    }
    .brandStory .sec1 .line{
        height: 720px;
    }
    .brandStory .sec5 .brandStory-slide {
        height: 650px;
    }
}
@media screen and (max-width:360px) {

}
@media screen and (max-width:320px) {

}