@charset "utf-8";


/*index*/
.mainSlide{
    height: 100vh;
}
.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.6);
}
.mainSlide .slide-control{
    display: flex; align-items: center; position: relative; bottom:35vh; z-index: 9999;
}
.mainSlide .slide-text{
    position: absolute; left:50%; transform: translate(-50%, -50%); top:50%;
    color:white; font-size: 3rem; font-weight: 300; line-height: 1.6; text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    max-width: 90%;
}
.mainSlide .slide-text small{
    position: relative; display: inline-block; margin-bottom: 2rem;
    font-size: 0.56em; opacity: 0.6;
}
.mainSlide .slide-text small::before{
    content: ''; position: absolute; width:84%; top:50%; right:-5px; transform: translate(100%, -50%); height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}
.mainSlide .slide-text small::after{
    content: ''; position: absolute; width:84%; top:50%; left:-5px; transform: translate(-100%, -50%); height: 1px;
    background-color:  rgba(255, 255, 255, 0.6);
}
.mainSlide .slide-text strong{
    font-size: 1.2em;
}
.ic-more{
    width:3.3rem; margin-top: 4px;
}


/* index main section2 */
.main-sec2{
    position: relative; padding-top: 267px;
}
.main-sec2 .container-lg{
    display: flex; align-items: center;
}
.main-sec2 h3{
    display: inline; position: relative;
}
.main-sec2 h3::before{
    content: ''; position: absolute; bottom:-9px; width:100%; height: 5px;
    background: url(/skin3/img/main_bg_1.png) no-repeat; background-size: cover;
}
.specialFeature_list{
    width: 100%;
}
.specialFeature_list li{
    display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; gap: 150px;
    margin-bottom: 40px;
    line-height: 1.8;
}
.specialFeature_list li .btn{
    margin-top: 4.8rem;
}
.specialFeature_list li:nth-child(2n-1) .left{
    order: 3;
}
.specialFeature_list li .rectangle > img{

}
.specialFeature_list li .rectangle::after{
    padding-top: 110%;
}
.specialFeature_list li .left{
    width: 40%;
}
.main-sec3{
    position: relative; width:100%; padding-top: 110px;
    color:white;
}
.main-sec3 .container{
    display: flex; justify-content: space-between; align-items: center;
}
.main-sec3 .left span{
    opacity: 0.5; font-weight: 300;
}
.main-sec3 .left span a{
    font-weight: 600;
}
.startup-progress{
    position: relative;
    color:white;
}
.startup-progress::before{
    content: ''; position: absolute; width: 100%; top:50%; height: 1px; background-color: white;
}
.startup-progress .swiper-slide{
    text-align: center;
}
.startup .startup-progress .swiper-slide:last-child{
    transform: translateY(5.5%);
}
.main-sec4 {
    position: relative; padding: 144px 20px;
    text-align: center;
}
.main-sec4::before{
    content: ''; position: absolute; width:100%; height: 292px; bottom:0; left:0; z-index: -999;
    background-color: #F5EBEB; border-top-left-radius: 30px; border-top-right-radius: 30px;
}
.main-sec4 iframe{
    width:100%;
    border-bottom-right-radius: 160px;
}
.main-sec4 .rectangle{
    position: relative;
}
.main-sec4 .rectangle::before{
    content: ''; position: absolute; right:0; bottom: 0; width: 98px; height: 98px;
    background: url(/skin3/img/ic_youtube.png); background-size: contain; z-index: 99;
}
/* Brand story */
.brandStory {
    padding-top: 0!important;
}
.brandStory .sec1 {
    height: 80vh; padding:300px 0;
    border-bottom-right-radius: 30em;
    color:white;
}
.brandStory .sec1 .rectangle::after{
    padding-top: 18%;
}
.brandStory .sec2{
    font-size: 4.8rem; font-weight: 600;
}
.brandStory .sec2 li{
    display: flex; align-items: center; position: relative; padding: 28px 0;
}
.brandStory .sec2 li::before{
    content: ''; position: absolute; width:0; height: 12px;
    background-color: #F4E0D100;
    transition: all 0.5s ease-in-out; z-index: -9999;
}
.brandStory .sec2 li:hover::before{
    width:100%;background-color: #F4E0D1;
}
.brandStory .sec2 li:hover img{
    margin-left: auto;
}
.brandStory .sec2 li img{
    transition: all 1s ease-in-out;
}
.brandStory .sec3 li{
    display: flex; align-items: center; gap: 84px;
}
.brandStory .sec3 li:first-child .left{
    width:40%;
}
.brandStory .sec3 li:first-child .right{
    margin-top: -5%;
}
.brandStory .sec3 li:last-child{
    margin-top: -50px;
}
.brandStory .sec3 li:last-child .left{
    order: 3; width: 60%; margin-bottom: -5%;
}
.brandStory .sec3 li:last-child .right{
    margin-bottom: -10%;
}
.brandStory .sec5{
    display: flex; justify-content: space-between;
}
.brandStory .sec5 .left{
    width:50%
}
.brandStory .sec5 .right{
    width:40%;
}
.brandStory .sec5 img{
    border-radius: 8px;
}
.brandStory .sec6{
    position: relative;
}
.brandStory-slide .slide-text{
    position: absolute; left:50%; transform: translate(-50%, calc(-50% + 200px)); top:50%;
    color:white;
}
.brandStory-slide .swiper-slide{
    position: relative; display: flex; align-items: center; gap:100px;
    background: white;
}
.brandStory-slide .swiper-slide .left{
    width: 60%; height: 533px; flex-shrink: 0;
}
.brandStory-slide .swiper-slide .right strong{
    font-size: 8rem;
}

.brandStory-slide .swiper-slide .right li{
    position: relative; padding-left: 16px; margin-bottom: 5px;
}
.brandStory-slide .swiper-slide .right li::before{
    content: ''; position: absolute; top:50%; left:0px; transform: translateY(-50%); width: 6px; height: 6px;
    border-radius: 50%; background-color: #64707C;
}
.brandStory-slide .swiper-slide img{
    height: 100%; object-fit: cover;
}
.brandStory-slide .slide-text small{
    display: inline-block; margin-bottom: 2rem;
    font-size: 0.42em;
}
.brandStory .sec4 .slide-control{
    display: flex; position: absolute; left:60%; transform: translateX(-100%); bottom:10px; padding:10px 20px; z-index: 99;
    border-radius: 50px;
}
.brandStory .sec4 .slide-control > div{
    background: white; padding:1.2rem 2.6rem; box-sizing: content-box;
    color: var(--black);
}
.brandStory .sec4 .slide-control > div:first-child{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.brandStory .sec4 .slide-control > div:last-child{
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.brandStory .sec4 .swiper-button-next:after, .brandStory .sec4 .swiper-button-prev:after{
    font-size: 20px;

}
.brandStory .sec4 .swiper-button-next, .brandStory .sec4 .swiper-button-prev{
    position: relative; right:unset; left:unset; margin: 0;
}
.sec6 .slide-control{
    text-align: left;
}
.sec6 .slide-control .swiper-pagination{
    text-align: left; margin-left: 20px; bottom: 50px;
}
.sec6 .slide-control .swiper-pagination-bullet{
    width:0.9rem; height: 0.9rem;
    background-color: white;
}

/* strength html */
.strength .sec1 .strength-list{
    position: relative;
    border-top:1px solid #DADFE9;
}
.strength .sec1 .strength-list li{
    width: 100%;
    border-bottom:1px solid #DADFE9;
}
.strength .sec1 .strength-list li .container-lg{
    display: flex; justify-content: space-between; padding-top:28px; padding-bottom:28px;
}
.strength .sec1 .strength-list li .left{
    display: flex; gap: 32px; align-items: center;
}
.strength .sec1 .strength-list li .left strong{
    font-weight: 500;
}
.strength .sec1 .strength-list li .right{
    max-width: 700px;
}
.strength .sec1 .strength-list .ic{
    display: flex; justify-content: center; align-items: center; width:50px; height: 50px; flex-shrink: 0;
    background-color: var(--primary-color); border-radius: 50%;
}
.strength .sec1 .strength-list .ic img{
    width: 2.4rem;
}
.strength .sec3{
    color: white;
}
.strength-slide .swiper-wrapper{
    align-items: flex-end; overflow: hidden;
    background-color: var(--black);
}
.strength-slide .swiper-slide{
    display: flex; align-items: flex-end;
    background-color: var(--black);
}
.strength-slide .swiper-slide .left{
    width: 60%; height: 732px; flex-shrink: 0;
}
.strength-slide .swiper-slide .left img{
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.strength-slide .swiper-slide .right{
    position: relative; padding: 60px;
}
.strength-slide .swiper-slide .right p{
    line-height: 1.9;
    letter-spacing: -0.02em;
}
.strength-slide .swiper-slide .right span{
    margin-right: 13px;
}
.strength .sec3 > .left{
    display: flex; justify-content: space-between; flex-direction: column; width: 40rem; flex-shrink: 0; padding:6.6rem 4.1rem;
    background-color: var(--primary-color); color: white; border-radius: 8px;
}
.strength .sec3 .slide-control{
    display: flex; position: absolute; left:60%; transform: translateX(-100%); bottom:0; padding:60px; z-index: 99;
}
.strength .sec3 .slide-control > div{
    position: relative; right: unset; left: unset; margin: 0;
    background: white; padding:1.2rem 2.6rem; box-sizing: content-box;
    color: var(--black);
}
.strength .sec3 .slide-control > div:first-child{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.strength .sec3 .slide-control > div:last-child{
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.strength .sec3 .swiper-button-next:after, .strength .sec3 .swiper-button-prev:after{
    font-size: 20px;

}
.strength .sec3 .swiper-button-next, .brandStory .sec3 .swiper-button-prev{
    position: relative; right:unset; left:unset; margin: 0;
}
.strength .sec4 .title-box-wrap{
    border-bottom: 1px solid #DADFE9;
}
.strength .sec4 .title-box-wrap .average-price{
    padding:28px 44px;
    background: var(--black); border-radius: 18px;
    color: white;
}
.strength .sec4 .title-box-wrap .average-price > div{
    display: flex; align-items: center; text-wrap: nowrap;
}

.strength .sec4 .title-box-wrap .average-price > div .line{
    width:100%; height: 1px; margin:6px; background: rgba(255, 255, 255, 0.7);
}
.strength .sec4 .title-box{
    display: flex; justify-content: space-between; align-items: end; padding-bottom: 36px;
}
.strength .sec4 .franchise-list{
    display: flex; flex-wrap: wrap; justify-content: space-between;
}
.strength .sec4 .franchise-list li{
    display: flex; align-items: end; width: 33.333333%; margin-bottom: 48px;
    transition: transform 0.3s ease;
}
.strength .sec4 .franchise-list li:hover{
    transform: translateY(-3px);
}
.strength .sec4 .franchise-list li .left{
    position: relative; flex-shrink: 0;
}
.strength .sec4 .franchise-list li .left img{
    width: 224px;
}
.strength .sec4 .franchise-list li .left .badge{
    position: absolute; left:20px; top:20px; padding:3px 8px;
    font-size: 1.3rem; color: white;
    background: var(--black); border-radius: 20px;
}
.strength .sec4 .franchise-list li .right{
    padding: 24px;
}
.strength .sec5 .place-list{
    display: flex; margin:1rem 0 4rem; justify-content: start;
}
.strength .sec5 .place-list li {
    position: relative; padding: 1.4rem 1.2rem;
    color:var(--sub-text-color);
}
.strength .sec5 .place-list li.on::before{
    content: ''; position: absolute; bottom:2px; width: 50%; left:50%; transform: translateX(-50%); height: 2px;
    background: var(--black);
}
.strength .sec5 .place-list li.on{
    color:var(--black);
}
.strength .sec5 .franchise-wrap{
    display: flex;
}
.strength .sec5 .left {
    width: 62rem; margin-right: 8.7rem; flex-shrink: 0;
}
.strength .sec5 .left .root_daum_roughmap{
    width: 100%; height:100%;
}
.strength .sec5 .left .root_daum_roughmap .wrap_map{
    height: 100%;
}
.strength .sec5 .right{
    width:100%;
}
.strength .sec5 .map-list {
    border-bottom: 1px solid var(--black);
}
.strength .sec5 .right .map-list thead{
    display: table; width: 100%; table-layout:auto;
    background-color: rgba(255, 255, 255, 0.1); border-radius: 1.2rem;
    border-top:1px solid var(--black);    border-bottom:1px solid var(--subLight-text-color);
    font-size: 1.4rem; font-weight: 500;
}
.strength .sec5 .right .map-list thead th{
    width: 60px; padding:1.4rem 0;
}
.strength .sec5 .right .map-list thead th:first-child{
    width: auto; padding-left: 2.4rem;
    border-top-left-radius: 1.2rem; border-bottom-left-radius: 1.2rem;
    text-align: left;
}
.strength .sec5 .right .map-list thead th:last-child{
    padding-right: 1rem;
    border-top-right-radius: 1.2rem; border-bottom-right-radius: 1.2rem;
}
.strength .sec5 .right .map-list tbody{
    display: block; width: 100%; height: 330px; overflow:auto;
    text-align: center;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.strength .sec5 .right .map-list tbody::-webkit-scrollbar{
    display: none;
}
.strength .sec5 .right .map-list tbody tr{
    display: table; table-layout:auto; width:100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.strength .sec5 .right .map-list tbody td:first-child{
    width: auto;
    text-align: left; padding-left: 2.4rem; text-wrap: nowrap; font-size: 1.6rem;
}
.strength .sec5 .right .map-list tbody td:last-child{
    padding-right: 1rem;
}
.strength .sec5 .right .map-list tbody td{
    width: 60px; padding: 2.2rem 0.5rem;
    font-size: 1.8rem;
    line-height: 1.5;
}
.strength .sec5 .right .map-list tbody td.off{
    opacity: 0.3;
}
.strength .sec5 .right .map-list tbody td b{
    font-weight: 700;
}
.strength .sec5 .right .map-list tbody td p{
    font-size: 1.4rem; opacity: 0.7;
}
.startup .sec1{
    position: relative;
}
.startup .sec1 .container{
    display: flex; justify-content: space-between; gap: 116px;
}
.startup .sec1 .container .left{
    flex-shrink: 0; width: 20%;
}
.startup .sec1 .container .right{
    width: 80%;
}
.startup .sec1 iframe{
    overflow: hidden; border-bottom-right-radius:160px;
}
.startup .sec1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 292px;
    bottom: -85px;
    left: 0;
    z-index: -999;
    background-color: #F5EBEB;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.ytp-large-play-button{
    opacity: 0; display: none;
}
.startup .sec1 .rectangle::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 98px;
    height: 98px;
    background: url(/skin3/img/ic_youtube.png);
    background-size: contain; z-index: 999;
}
.startup .sec2{
    padding:120px 0;
    color:white;
}
.startup .sec2 .startup-progress::before{
    /* transform: translateY(-15px); */
}

.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 tr:nth-child(2n) td{
   background-color: #F2F6FF;
}
.price-table th{
    background-color: var(--black);
    color: white;
}
.table-info{
    margin-top: 32px; text-align: left;
    font-size: 1.5rem;
}
.table-info li{
    position: relative; margin-bottom: 5px; padding-left: 10px;
    line-height: 1.8; font-weight: 300;
    color:var(--sub-text-color);
}
.table-info li::before{
    content: '-'; position: absolute; left:0; top:50%; transform: translateY(-50%);
}
.startup .sec3{
    overflow-x: hidden;
}
.startup .sec5 ul{
    display: flex; gap: 132px;
}
.startup .sec5 li{
    display: flex; gap: 12px;
}
.startup .sec5 li .left .square{
    display: block; width: 2px; height: 31px; margin-top: 7px;
    background-color: var(--primary-color);
}
.startup .sec5 li .right p{
    font-weight: 300;
}
.startup .sec5 li .right i{
    margin-right: 5px;
}
.menu .sec1{
    position:relative;
}
.menu .sec1 .fs-48{
    padding-top: 40px;
}
.menu .sec1::before{
    content: ''; position: absolute; width: 100%; height: 180px; top:0;
    background-color: #333333;
}
.menu .sec1 ul {
    display: flex; flex-wrap: wrap; gap:18px;
}
.menu .sec1 ul li{
    display: flex; flex-direction: column;
    position: relative; width: calc(20% - 14.4px);
}
.menu .sec1 ul li .text-wrap{
    margin-top: 20px;
}
.menu .sec1 small{
    font-weight: 200;
}
.menu .sec2 nav{
    position: sticky; top:102px; z-index: 9999;
    text-align: center; background-color: white;
}
.menu .sec2 nav ul{
    display: flex; justify-content: center;
    border-bottom: 1px solid #DADFE9;
}
.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; width: 2.6rem; height: 2px;
    background-color: var(--black);
}
.menu .sec2 .menu-list{
    margin-top: 74px;
}
.menu .sec2 .menu-list li{
    margin-bottom: 90px;
}
.menu .sec2 .menu-item{
    margin:0 -10px; display: flex; flex-wrap: wrap;
}
.menu .sec2 .menu-item li{
    position: relative; width:33.33333%; padding:0 10px; margin-bottom: 2.4rem;
    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; left:0; top:0; width: 6.9rem; height: 6rem;
    background-color: var(--primary-color); border-radius: 7px;
    font-size: 1.5rem; color: white; font-weight: 700;
}

.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);
}

/* ------------ responsive ------------ */
@media screen and (max-width:1700px) {

}
@media screen and (max-width:1600px) {
    .main-sec3-link{
        width:300px; height: 300px; padding:0 40px;
    }
    .main-sec3-link p {
        margin: 10px 0 16px;
    }
    .strength .sec4 .franchise-list li{
        width: 50%;
    }
}
@media screen and (max-width:1440px) {

    .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-slide .swiper-slide .left{
        height: 600px;
    }
    .brandStory .sec3 li:last-child{
        margin-top: 30px;
    }

}
@media screen and (max-width:1280px) {
    .brandStory .sec3 li{
        flex-direction: column;  gap: 20px; margin-bottom: 60px;
    }
    .brandStory .sec3 li:last-child .left{
        order: 0;
    }
    .brandStory .sec3 li .right{
        text-align: center!important;
    }
    .brandStory .sec3 li:first-child .right{
        margin-top: unset;
    }
    .brandStory .sec3 li:last-child .left{
        margin-bottom: unset;
    }
    .brandStory-slide .swiper-slide {
        gap: 40px;
    }
    .brandStory-slide .swiper-slide .left{
        width:50%;
    }
    .brandStory .sec4 .slide-control{
        left:50%
    }
    .brandStory-slide .swiper-slide .right strong{
        display: block; font-size: 4rem; margin-bottom: 24px;
    }
    .strength .sec1 .strength-list li .right{
        max-width: 500px;
    }
    .strength-slide .swiper-slide .left{
        max-width: 50%;
    }
    .strength .sec3 .slide-control{
        top:unset; bottom:0; left:0; transform: unset; padding:40px;
    }
    .strength .sec3 .swiper-pagination{
        margin-left: calc(400px + 44px);
    }
    .strength .sec3 .slide-control .swiper-pagination{
        margin-top: 1rem;
    }
    .strength .sec5 .left{
        width: 50rem; margin-right: 5rem;
    }
    .startup .sec5 ul{
        flex-wrap: wrap; gap:40px 132px;
    }
    .startup .sec5 li{
        width: calc(50% - 66px);
    }
    .menu .sec1 ul{
        gap:12px;
    }
    .menu .sec1 ul li{
        width: calc(33.333333% - 8px);
    }

}
@media screen and (max-width:991px) {
    .main-sec4::before{
        height: 150px;
    }
    .main-sec2 {
        padding-top: 100px;
    }
    .main-sec2 h3{
        margin-bottom: 30px;
    }
    .brandStory .sec1{
        position: relative; overflow: hidden; border-bottom-right-radius: 10em; background-position: right -50%;
    }
    .brandStory .sec1::before{
        content: ' ';  position: absolute; width: 100%; height: 100%; top:0;
        background: rgba(0,0,0,0.25);
    }
    .brandStory .sec2{
        font-size: 2.4rem;
    }
    .brandStory .sec2 li{
        padding: 14px 0;
    }
    .brandStory .sec2 li img {
        width: 60px;
    }
    .specialFeature_list{
        margin-top: 40px;
    }
    .specialFeature_list li{
        gap: 100px;
    }
    .strength .sec1 .strength-list li .right{
        max-width: 100%; padding-left: 66px; margin-top: 10px;
    }
    .strength .sec1 .strength-list li .container-lg{
        padding-top: 16px; padding-bottom: 16px;
    }
    .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%; width: 100%; margin-right: 0;
    }
    .strength .sec3 .slide-control{
        padding:30px 60px; bottom:50px;
    }
    .strength .sec3 .slide-control > div{
        padding:0.6rem 1.2rem;
    }
    .strength-slide .swiper-slide .right{
        width:100%; padding-bottom: 150px;
    }
    .strength .sec1 .strength-list li .container-lg{
        flex-direction: column;
    }
    .strength .sec1 .strength-list li .left{
        gap:16px
    }
    .strength .sec3 .swiper-pagination{
        margin:0 auto; padding-bottom: 4rem;
    }
    .strength .sec4{
        flex-wrap: wrap;
    }

    .strength .sec4 .franchise-list li{
        flex-direction: column; align-items: start; padding:8px;
    }
    .strength .sec4 .franchise-list li .left{
        width:100%;
    }
    .strength .sec4 .franchise-list li .right{
        padding:24px 0;
    }
    .strength .sec4 .franchise-list li .left img{
        width: 100%;
    }
    .strength .sec4 > .left{
        width:100%;
    }
    .strength .sec4 > .right{
        width:100%; margin:0.6rem -0.6rem 0;
    }
    .strength .sec5 .place-list{
        overflow-x: scroll;
    }
    .strength .sec5 .left{
        width:100%; height: 400px; margin-bottom: 5rem;
    }
    .strength .sec5 .franchise-wrap{
        flex-wrap: wrap;
    }
    .scrollX-tb-mb{
        overflow-x: scroll;
    }
    .startup .sec1 .container{
        gap:60px
    }
    .startup .sec1 .container .right{
        width: 90%;
    }
    .startup .sec1::before{
        height: 150px;
    }
    .startup .sec3 img{
        max-width: unset; max-width: 990px;
    }
    .menu .sec2 nav{
        top:50px;
    }
    .menu .sec2 .menu-item li{
        width:33.333333%
    }
    .menu .sec2 .menu-item .new-badge{
        width:5rem; height: 5rem;
    }
    .menu .sec1 ul li .text-wrap{
        bottom:1rem;
    }
}
@media screen and (max-width:768px) {
    .brandStory .sec3 li .left{
        width: 100%!important;
    }
    .specialFeature_list li{
        flex-direction: column;
    }
    .specialFeature_list li .left{
        width: 100%;
    }
    .specialFeature_list li:nth-child(2n-1) .left{
        order: 0;
    }

    .main-sec2{
        padding-top: 140px;
    }
    .specialFeature_list li{
        gap: 40px; margin-bottom: 60px;
    }
    .main-sec3 {
        margin-top: 150px; padding:50px 0 30px;
    }
    .main-sec3::after{
        padding-top: 142%;
    }
    .main-sec3 .container{
        flex-direction: column; align-items: start;
    }
    .main-sec3 .container .right{
        margin-top: 1rem; margin-left: auto;
    }
    .main-sec3-right a{
        margin-bottom: 3rem;
    }
    .main-sec3 .container-lg{
        flex-direction: column; align-items: flex-start;
    }
    .mainSlide{
        height: 80vh;
    }
    .mainSlide .swiper-slide img{
        object-position:60% center;
    }
    .mainSlide .slide-text{
        font-size: 3rem;
    }
    .mainSlide .slide-text small{
        font-size: 0.6em;
    }
    .mainSlide .slide-control{
        bottom:10vh;
    }
    .mainSlide .slide-text{
        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;
    }
    .brandStory .sec2{
        font-size: 1.8rem;
    }
    .brandStory .sec2 li{
        padding:4px 0;
    }
    .brandStory .sec2 img{
        width: 50px;
    }
    .brandStory-slide .swiper-slide{
        flex-direction: column; align-items: start;
    }
    .brandStory-slide .swiper-slide .left{
        width: 100%;
    }
    .brandStory .sec4 strong + p{
        text-align: left;
    }
    .brandStory .sec4 .slide-control{
        left:unset; right:0; top:0; padding:20px; bottom:unset; transform: none;
    }
    .brandStory .sec4 .slide-control > div{
        padding:0.8rem 1.6rem;
    }
    .brandStory .sec5{
        flex-wrap: wrap; justify-content: flex-end;
    }
    .brandStory .sec5 .left{
        margin-right: 5%;
    }
    .brandStory .sec5 .right{
        width:45%;
    }
    .strength .sec3{
        padding-bottom: 0;
    }
    .strength .sec2 .d-flex{
        flex-wrap: wrap;
    }
    .strength .sec2 .d-flex .right{
        margin-top: 2.4rem;
    }
    .strength .sec4 > .right li{
        width:50%;
    }
    .strength .sec5 .left{
        height: 300px;
    }
    .startup .sec1 .container .left{
        width: 100%;
    }
    .menu .sec1{
        background-position: bottom 0 center;
    }
    .menu .sec1::before{
        height: 150px;
    }
    .menu .sec1 ul{
        flex-wrap: wrap; gap:20px;
    }
    .menu .sec1 ul li{
        width:calc(50% - 10px); margin: unset !important;;
    }
    .menu .sec2 .menu-list li{
        margin-bottom: 20px;
    }
    .menu .sec2 .menu-item li{
        width:50%
    }
    .menu .sec2 .menu-list{
        margin-top: 40px;
    }
    .price-table th, .price-table td{
        padding: 10px 12px;
    }
    .startup .sec1 .container {
        flex-direction: column; gap: 10px;
    }
    .startup .sec1 .container .right{
        width: 100%;
    }
    .startup .sec5 li{
        width: 100%;
    }

    .menu .sec1::before{
        top:0;
    }
    .brandStory .sec4 .brandStory-slide {
        height: 1100px;
    }
}
@media screen and (max-width:575px) {
    /* 모바일 간격 및 터치 영역 개선 */
    .menu .sec2 nav ul li{
        padding: 1.4rem 1.2rem;
        min-height: 44px;
    }
    .menu .sec2 .menu-item li{
        padding: 0 8px;
        margin-bottom: 1.6rem;
    }
    .specialFeature_list li{
        gap: 20px;
    }
    .main-nav > li:last-child a{
        padding: 0 2rem;
    }
    .main-nav {
        width: 100%;
    }˙
    .main-nav li{
        width: 100%;
    }
    .specialFeature_list li .btn{
        margin-top: 1.2rem;
    }
    .mainSlide .slide-text{
        font-size: 2.4rem;
    }
    .mainSlide .slide-text small{
        margin-bottom: 0.3em;
    }
    .main-sec2{
        padding-top: 80px;
    }
    .main-sec4 iframe{
        border-bottom-right-radius: 60px;
    }
    .main-sec4::before{
        bottom:10%
    }
    .main-sec4 .rectangle::before{
        width:70px; height: 70px;
    }
    .brandStory .sec1{
        height: 60vh;
    }
    .brandStory .sec4 .slide-control > div{
        padding:0 0.8rem;
    }
    .brandStory-slide .swiper-slide .left{
        height: 300px;
    }
    .brandStory .sec2 li::before{
        height: 6px;
    }
    .brandStory .sec2 li img{
        width: 40px;
    }
    .brandStory-slide .slide-text strong{
        font-size: 6rem;
    }
    .brandStory-slide .slide-text{
        top:40%;
    }
    .brandStory-slide{
        height: 624px;
    }
    .strength .sec1 .strength-list{
        justify-content: space-around;
    }
    .strength .sec1 .strength-list li .left{
        align-items: start;
    }
    .strength .sec1 .strength-list .ic{
        width: 40px; height: 40px;
    }
    .strength .sec1 .strength-list .ic img{
        width:1.8rem
    }
    .strength-slide .swiper-slide .right{
        padding: 30px 30px 110px;
    }
    .strength .sec3 .slide-control{
        padding:10px 30px; bottom: 30px;
    }
    .strength .sec4 .title-box{
        flex-direction: column; align-items:start
    }
    .strength .sec4 .title-box-wrap .average-price{
        width: 100%; padding:14px 24px; margin-top: 20px; border-radius: 10px;
    }
    .strength .sec4 .franchise-list li .right{
        padding:12px 0;
    }
    .startup .sec2{
        padding:80px 0;
    }
    .menu .sec1 ul{
        gap:12px;
    }
    .menu .sec1 ul li{
        width:calc(50% - 6px);
    }
    .menu .sec1 ul{
        flex-wrap: wrap; justify-content: flex-start;
    }
    .menu .sec1::before{
        top:-5%;
    }
    .startup .sec1 iframe{
        border-bottom-right-radius: 60px;
    }
    .startup .sec1 .rectangle::before {
        width: 70px;
        height: 70px;
    }
    .startup .sec5 ul{
        flex-wrap: wrap; gap:20px;
    }
    .menu .sec1{
        background-size: contain;
        background-position: bottom 100px center;
    }

    .menu .sec1 ul{
        gap:10px;
    }
    .menu .sec1 ul li{
        width:calc(50% - 5px); margin: unset !important;;
    }

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

}
@media screen and (max-width:360px) {
    .main-nav li a span{
        display: none;
    }
}
@media screen and (max-width:320px) {

}