@charset "utf-8";

/* m_txt (shared across sec1/sec3/sec4/sec5/sec6) */
.m_txt{}
.m_txt h3{font-size: 45px; font-weight: 700; color:#000; word-break: keep-all;}
.m_txt h3 span{color:var(--primarycolor); word-break: keep-all;}
.m_txt p{font-size: 24px; font-weight: 500; color:#444; word-break: keep-all; line-height: 1.5em; margin-top: 45px;}
.m_txt a.more1{margin-top: 50px; font-size: 20px; color:#000; font-weight: 700; display: inline-flex; border-bottom: 1px solid #000; padding-bottom: 10px; align-items: flex-start;}
.m_txt a.more1 .link{color:var(--primarycolor); font-size: 14px; font-weight: 700; margin-left: 3px;}
.m_txt a.more2{background-color: var(--primarycolor); color:#fff; display: inline-flex; line-height: 60px; padding: 0 40px; font-size: 20px; font-weight: 700; border-radius: 10px;}

@media all and (max-width: 1600px){
    .m_txt h3{font-size: 40px;}
    .m_txt p{font-size: 22px; margin-top: 38px;}
    .m_txt a.more1{font-size: 19px; margin-top:45px;}
    .m_txt a.more2{font-size: 19px; line-height: 54px; padding: 0 34px;}
}
@media all and (max-width: 1024px){
    .m_txt h3{font-size: 36px;}
    .m_txt p{font-size: 20px; margin-top: 32px;}
    .m_txt a.more1{font-size: 18px; margin-top: 40px;}
    .m_txt a.more2{font-size: 18px; line-height: 50px; padding: 0 30px;}
}
@media all and (max-width: 768px){
    .m_txt h3{font-size: 32px;}
    .m_txt p{font-size:19px; margin-top: 27px;}
    .m_txt a.more1{font-size: 17px; margin-top: 35px;}
    .m_txt a.more2{font-size: 17px; line-height: 46px; padding: 0 27px;}
}
@media all and (max-width: 500px){
    .m_txt h3{font-size: 28px;}
    .m_txt p{font-size: 17px; margin-top: 20px;}
    .m_txt a.more1{font-size: 16px; margin-top: 30px;}
    .m_txt a.more2{font-size: 16px; line-height: 44px; padding: 0 24px;}
}


/* mVisual */
#mVisual{position: relative; background-color: #000; height: 100vh; overflow: hidden;}
#mVisual::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 1;
}
#mVisual .visual{height: 100%; opacity: 0.7;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{}
#mVisual .visual .mv video{}
#mVisual .text{
    position: absolute;
    left: calc(50% - 860px);
    width: 1720px;
    z-index: 2;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#mVisual .text .m-inner{
    width: 100%;
}
body.quick-on #mVisual .text{
    max-width: calc(50% + 390px);
    width: 100%;
}

@media all and (max-width:1719px) {
    #mVisual .text {left: 3%; width: 94%;}
    body.quick-on #mVisual .text {max-width: calc(100% - 3% - 470px); width: 100%;}
}
@media all and (max-width:1600px) {
    /* quick 패널이 펼쳐져도 mVisual .text가 줄어들지 않도록 (quick 기본상태도 JS에서 접힘으로 처리) */
    body.quick-on #mVisual .text {max-width: none; left: 3%; width: 94%;}
}

#mVisual .text .m-inner .top_cont{display: flex; justify-content: space-between; align-items: flex-end;}
#mVisual .text .m-inner .top_cont .l_cont{color:#fff;}
#mVisual .text .m-inner .top_cont .l_cont .sub_tit{font-size: 24px; font-weight: 700; margin-bottom: 5px;}
#mVisual .text .m-inner .top_cont .l_cont h2{font-size: 72px; letter-spacing: -0.0375em; word-spacing: -0.01em;}
#mVisual .text .m-inner .top_cont .r_cont{display: flex; align-items: center; gap:25px;}
#mVisual .text .m-inner .top_cont .r_cont .prev{color:#fff; font-size: 27px; font-weight: 500; cursor: pointer;}
#mVisual .text .m-inner .top_cont .r_cont .progress{width: 54px; height: 54px; border: 2px solid rgba(255,255,255,0.7); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center;}
#mVisual .text .m-inner .top_cont .r_cont .progress .pause{}
#mVisual .text .m-inner .top_cont .r_cont .progress .pause img{height: 15px;}
#mVisual .text .m-inner .top_cont .r_cont .progress .play{cursor: pointer;}
#mVisual .text .m-inner .top_cont .r_cont .progress .play img{height: 15px;}
#mVisual .text .m-inner .top_cont .r_cont .progress > div{display: none; cursor: pointer;}
#mVisual .text .m-inner .top_cont .r_cont .progress > div.on{display: block;}
#mVisual .text .m-inner .top_cont .r_cont .progress > div img{height: 15px;}
#mVisual .text .m-inner .top_cont .r_cont .next{color:#fff; font-size: 27px; font-weight: 500; cursor: pointer;}
#mVisual .text .m-inner .bot_cont{margin-top: 100px; margin-bottom: 120px;}
#mVisual .text .m-inner .bot_cont .gague{width: 100%; background-color: rgba(255,255,255,0.3); position: relative; height: 2px;}
#mVisual .text .m-inner .bot_cont .gague .bar{position: absolute; height: 2px; width: 0%; left: 0; background-color: var(--primarycolor);}


@media all and (max-width: 1919px){
    #mVisual .text .m-inner .top_cont .l_cont h2{font-size: 64px;}
    #mVisual .text .m-inner .top_cont .l_cont .sub_tit{font-size: 22px;}
    #mVisual .text .m-inner .bot_cont{margin-top: 90px; margin-bottom:110px;}
}
@media all and (max-width: 1024px){
    #mVisual .text .m-inner .top_cont .l_cont h2{font-size: 56px;}
    #mVisual .text .m-inner .top_cont .l_cont .sub_tit{font-size: 21px;}
    #mVisual .text .m-inner .top_cont .r_cont{gap: 18px;}
    #mVisual .text .m-inner .top_cont .r_cont .prev,
    #mVisual .text .m-inner .top_cont .r_cont .next{font-size: 25px;}
    #mVisual .text .m-inner .top_cont .r_cont .progress{width: 50px; height: 50px;}
    #mVisual .text .m-inner .bot_cont{margin-top: 80px; margin-bottom: 100px;}
}
@media all and (max-width: 768px){
    #mVisual{height: 85vh;}
    #mVisual .text .m-inner .top_cont{flex-direction: column; align-items: flex-start; gap: 24px;}
    #mVisual .text .m-inner .top_cont .l_cont h2{font-size: 48px;}
    #mVisual .text .m-inner .top_cont .l_cont .sub_tit{font-size: 20px;}
    #mVisual .text .m-inner .top_cont .r_cont .prev,
    #mVisual .text .m-inner .top_cont .r_cont .next{font-size: 24px;}
    #mVisual .text .m-inner .top_cont .r_cont .progress{width: 46px; height: 46px;}
    #mVisual .text .m-inner .bot_cont{margin-top: 70px; margin-bottom: 90px;}
}
@media all and (max-width: 500px){
    #mVisual .text .m-inner .top_cont .l_cont h2{font-size: 42px;}
    #mVisual .text .m-inner .top_cont .l_cont .sub_tit{font-size: 19px;}
    #mVisual .text .m-inner .top_cont .r_cont{gap: 14px;}
    #mVisual .text .m-inner .top_cont .r_cont .prev,
    #mVisual .text .m-inner .top_cont .r_cont .next{font-size: 23px;}
    #mVisual .text .m-inner .top_cont .r_cont .progress{width: 43px; height: 43px;}
    #mVisual .text .m-inner .top_cont .r_cont .progress .pause img,
    #mVisual .text .m-inner .top_cont .r_cont .progress .play img{height: 13px;}
    #mVisual .text .m-inner .bot_cont{margin-top: 60px; margin-bottom: 80px;}
}


/* sec1 */
#sec1{padding: 160px 0 120px;}
#sec1 .inner{display: flex; align-items: center; justify-content: space-between;}
#sec1 .inner .m_txt{}
#sec1 .inner .img{border-radius: 20px; overflow: hidden;}
#sec1 .inner .img img{max-width: 100%;}


@media all and (max-width: 1600px){
    #sec1{padding: 130px 0 100px;}
    #sec1 .inner .img{width: 50%;}
}
@media all and (max-width: 1024px){
    #sec1{padding: 110px 0 90px;}
    #sec1 .inner{flex-direction: column-reverse; align-items: stretch; gap: 45px;}
    #sec1 .inner .img{order: -1; width: 100%;}
}
@media all and (max-width: 768px){
    #sec1{padding: 95px 0 85px;}
}
@media all and (max-width: 500px){
    #sec1{padding: 90px 0;}
    #sec1 .inner .img{border-radius: 14px;}
}


/* sec2 */
#sec2{position: relative; height: 600vh;}
#sec2 .sec2_sticky{position: sticky; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;}

#sec2 .intro_center{
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: var(--intro-op, 1);
    transform: scale(var(--intro-scale, 1));
    pointer-events: none;
}
#sec2 .intro_center .circle_bg{
    position: absolute; width: 46vw; height: 46vw; max-width: 770px; max-height: 775px; background: url(/images/main/sec2_bg.webp) no-repeat center center / cover;
    animation: circleBgDrift 140s ease-in-out infinite;
}
@keyframes circleBgDrift{
    0%{ transform: rotate(0deg) scale(1); opacity: 0.25; }
    10%{ transform: rotate(36deg) scale(1.04); opacity: 0.35; }
    20%{ transform: rotate(72deg) scale(1); opacity: 0.2; }
    30%{ transform: rotate(108deg) scale(1.04); opacity: 0.35; }
    40%{ transform: rotate(144deg) scale(1); opacity: 0.2; }
    50%{ transform: rotate(180deg) scale(1.04); opacity: 0.35; }
    60%{ transform: rotate(216deg) scale(1); opacity: 0.2; }
    70%{ transform: rotate(252deg) scale(1.04); opacity: 0.35; }
    80%{ transform: rotate(288deg) scale(1); opacity: 0.2; }
    90%{ transform: rotate(324deg) scale(1.04); opacity: 0.35; }
    100%{ transform: rotate(360deg) scale(1); opacity: 0.25; }
}
#sec2 .intro_center .m_txt{position: relative;}
#sec2 .intro_center .logo{margin-top: 20px;}
#sec2 .intro_center .logo img{height: 71px;}

#sec2 .service_wrap{position: absolute; inset: 0; z-index: 2; background: #fff;}
#sec2 .service_item{
    position: absolute; top: 0; left: 0; width: 25%; height: 100%;
    overflow: hidden;
    background: #000;
    --active: 0;
}
#sec2 .service_item .bg{position: absolute; inset: 0; background-color:  #000 !important;}
#sec2 .service_item .bg img,
#sec2 .service_item .bg video{
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: var(--dim, 1);
    transition: opacity .2s linear;
}


@keyframes sec2Float1{
    0%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(10px, -14px) rotate(1.4deg); }
    50%{ transform: translate(-8px, -8px) rotate(-1deg); }
    75%{ transform: translate(-12px, 10px) rotate(1deg); }
    100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes sec2Float2{
    0%{ transform: translate(0, 0) rotate(0deg); }
    30%{ transform: translate(-12px, -10px) rotate(-1.3deg); }
    55%{ transform: translate(8px, -16px) rotate(1.2deg); }
    80%{ transform: translate(12px, 8px) rotate(-0.8deg); }
    100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes sec2Float3{
    0%{ transform: translate(0, 0) rotate(0deg); }
    20%{ transform: translate(13px, 9px) rotate(1deg); }
    45%{ transform: translate(-6px, -13px) rotate(-1.4deg); }
    70%{ transform: translate(-13px, 5px) rotate(1.2deg); }
    100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes sec2Float4{
    0%{ transform: translate(0, 0) rotate(0deg); }
    35%{ transform: translate(-9px, 13px) rotate(-1deg); }
    60%{ transform: translate(11px, -9px) rotate(1.3deg); }
    85%{ transform: translate(5px, -15px) rotate(-1.2deg); }
    100%{ transform: translate(0, 0) rotate(0deg); }
}
#sec2.is-resting .service_item.item1{ animation: sec2Float1 6.4s ease-in-out infinite; }
#sec2.is-resting .service_item.item2{ animation: sec2Float2 7.1s ease-in-out infinite; }
#sec2.is-resting .service_item.item3{ animation: sec2Float3 6.8s ease-in-out infinite; }
#sec2.is-resting .service_item.item4{ animation: sec2Float4 7.6s ease-in-out infinite; }
#sec2 .service_item::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,0) 65%);
    opacity: var(--grow, 1);
    transition: opacity .15s linear;
}
#sec2 .service_item .service_content{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 0 70px 100px; color: #fff; box-sizing: border-box;
    opacity: var(--grow, 1);
    transition: opacity .15s linear;
}
#sec2 .service_item .service_content h3{
    font-size: calc(45px * var(--active)); font-weight: 700; color: #fff;
    word-break: keep-all; transition: font-size .15s linear;
}
#sec2 .service_item .service_content .detail{
    max-height: calc(140px * var(--active));
    opacity: var(--active);
    overflow: hidden;
    transition: opacity .15s linear, max-height .15s linear;
}
#sec2 .service_item .service_content .detail p{
    font-size: 24px; font-weight: 400; line-height: 1.6; margin-top: 20px; color: rgba(255,255,255,1);
    word-break: keep-all;
}


#sec2 .service_dots{
    position: absolute; left: 50%; bottom: 40px; z-index: 4; transform: translateX(-50%);
    display: flex; gap: 10px;
    opacity: var(--grow, 1);
}
#sec2 .service_dots .dot{width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .3s, transform .3s;}
#sec2 .service_dots .dot.on{background: #fff; transform: scale(1.3);}


@media all and (max-width: 1919px){
    #sec2 .intro_center .logo img{height: 60px;}
    #sec2 .service_item .service_content{padding: 0 50px 70px;}
    #sec2 .service_item .service_content h3{font-size: calc(38px * var(--active));}
#sec2 .service_item .service_content .detail p{font-size: 20px;}
}
@media all and (max-width: 1024px){
    #sec2{height: auto; padding-top: 50px;}
    #sec2 .sec2_sticky{position: static; height: auto; overflow: visible;}

    #sec2 .intro_center{position: static; opacity: 1; transform: none; padding: 0 5% 60px;}
    #sec2 .intro_center .circle_bg{display: none;}
    #sec2 .intro_center .logo img{height: 56px;}

    #sec2 .service_wrap{position: static;}
    #sec2 .service_item{
        position: relative !important; left: auto !important; top: auto !important;
        width: 100% !important; height: 60vh !important; min-height: 320px;
        border-radius: 0 !important; box-shadow: none !important;
    }
    #sec2 .service_item{ animation: none !important; }
    #sec2 .service_item:last-child{margin-bottom: 0;}
    #sec2 .service_item::after{opacity: 1 !important;}

    /* 뷰포트 진입 전: 이미지 어둡게, 텍스트 숨김 / .in-view(JS IntersectionObserver)로 진입 시 밝아지고 텍스트 등장 */
    #sec2 .service_item .bg img,
    #sec2 .service_item .bg video{opacity: .45 !important; transition: opacity .5s ease;}
    #sec2 .service_item.in-view .bg img,
    #sec2 .service_item.in-view .bg video{opacity: 1 !important;}

    #sec2 .service_item .service_content{
        opacity: 0; padding: 0 30px 50px;
        transform: translateY(16px);
        transition: opacity .5s ease, transform .5s ease;
    }
    #sec2 .service_item.in-view .service_content{opacity: 1; transform: translateY(0);}
    #sec2 .service_item .service_content h3{font-size: 32px !important;}
    #sec2 .service_item .service_content .detail{opacity: 1 !important; max-height: none !important;}
    #sec2 .service_item .service_content .detail p{font-size: 19px;}

    #sec2 .service_dots{display: none;}
}
@media all and (max-width: 768px){
    #sec2 .intro_center .logo img{height: 50px;}
    #sec2 .service_item{height: 55vh !important; min-height: 280px;}
    #sec2 .service_item .service_content h3{font-size: 28px !important;}
    #sec2 .service_item .service_content .detail p{font-size: 18px; margin-top: 15px;}
}
@media all and (max-width: 500px){
    #sec2 .intro_center .logo img{height: 46px;}
    #sec2 .service_item{height: 50vh !important; min-height: 260px;}
    #sec2 .service_item .service_content{padding: 0 25px 40px;}
    #sec2 .service_item .service_content .detail p{font-size: 17px;}
}


#sec3{padding: 160px 0; background: #F6F7F7 url(/images/main/sec3_bg.webp) no-repeat right center / auto;}
#sec3 .inner{}
#sec3 .inner .cont_box{display: grid; grid-template-columns: repeat(3, 1fr); gap:60px;}
#sec3 .inner .cont_box .box{aspect-ratio: 1/1; border-radius: 20px; overflow: hidden;}
#sec3 .inner .cont_box .box.box1{display: flex; align-items: center;}
#sec3 .inner .cont_box .box .m_txt{}
#sec3 .inner .cont_box .box.bg{position: relative; background: #000 !important;}
#sec3 .inner .cont_box .box.bg .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; transition: .3s;}
#sec3 .inner .cont_box .box.bg:hover .img{opacity: 1;}
#sec3 .inner .cont_box .box.bg .img img{width: 100%; height: 100%; object-fit: cover;}
#sec3 .inner .cont_box .box.bg p{font-size: 38px; font-weight: 700; color:#fff; padding: 60px 55px; display: flex; align-items: flex-end; position: absolute; bottom: 0; left: 0;}
#sec3 .inner .cont_box .box.box6{display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;}
#sec3 .inner .cont_box .box.box6 p{font-weight: 500; font-size: 20px; color:#666; margin-bottom: 15px;}

@media all and (max-width: 1600px){
    #sec3{padding: 130px 0;}
    #sec3 .inner .cont_box{gap: 30px;}
    #sec3 .inner .cont_box .box.bg p{font-size: 30px; padding: 40px 32px;}
    #sec3 .inner .cont_box .box.box6 p{font-size: 18px;}
}
@media all and (max-width: 1024px){
    #sec3{padding: 110px 0;}
    #sec3 .inner .cont_box{grid-template-columns: repeat(2, 1fr); gap: 24px;}
    #sec3 .inner .cont_box .box.box1{aspect-ratio: auto;}
    #sec3 .inner .cont_box .box.bg p{font-size: 28px; padding: 32px 28px;}
    #sec3 .inner .cont_box .box.box6 p{font-size: 17px;}
}
@media all and (max-width: 768px){
    #sec3{padding: 95px 0;}
    #sec3 .inner .cont_box{grid-template-columns: 1fr; gap: 16px;}
    #sec3 .inner .cont_box .box{aspect-ratio: 4/3;}
    #sec3 .inner .cont_box .box.box1{margin-bottom: 30px; border-radius: 0;}
    #sec3 .inner .cont_box .box .m_txt{width: 100%;}
    #sec3 .inner .cont_box .box .m_txt p br{display: none;}
    #sec3 .inner .cont_box .box.bg p{font-size: 28px; padding: 30px 26px;}
    #sec3 .inner .cont_box .box.box6{display: none;}
    #sec3 .inner .cont_box .box.box6 p{font-size: 16px; margin-bottom: 12px;}
}
@media all and (max-width: 500px){
    #sec3{padding: 90px 0;}
    #sec3 .inner .cont_box .box.bg p{font-size: 28px; padding: 30px 24px;}
}


/* sec4 */
#sec4{padding: 160px 0;}
#sec4 .inner{}
#sec4 .inner .top_cont{display: flex; align-items: center;}
#sec4 .inner .top_cont .logo{width: 50%; display: flex; justify-content: center; align-items: center;}
#sec4 .inner .top_cont .logo img{max-width: 100%;}
#sec4 .inner .top_cont .m_txt{width: 50%;}
#sec4 .inner .bot_cont{margin-top: 120px; display: flex;}
#sec4 .inner .bot_cont .box{width: 100%; padding: 40px; border-left: 1px solid #B6B6B6;}
#sec4 .inner .bot_cont .box h4{font-size: 56px; color:#000; font-weight: 700; display: flex; align-items: center;}
#sec4 .inner .bot_cont .box h4 span{}
#sec4 .inner .bot_cont .box h4 small{font-size: 32px; font-weight: 700; color:#000;}
#sec4 .inner .bot_cont .box p{font-size: 22px; font-weight: 500; color:#000; margin-top: 70px;}
#sec4 .inner .info{margin-top: 40px;}
#sec4 .inner .info p{color:#999; font-size: 16px;}

@media all and (max-width: 1600px){
    #sec4{padding: 130px 0;}
    #sec4 .inner .bot_cont{margin-top: 90px;}
    #sec4 .inner .bot_cont .box{padding: 30px;}
    #sec4 .inner .bot_cont .box h4{font-size: 44px;}
    #sec4 .inner .bot_cont .box h4 small{font-size: 26px;}
    #sec4 .inner .bot_cont .box p{font-size: 19px; margin-top: 50px;}
}
@media all and (max-width: 1024px){
    #sec4{padding: 110px 0;}
    #sec4 .inner .top_cont{flex-direction: column; gap: 30px;}
    #sec4 .inner .top_cont .logo,
    #sec4 .inner .top_cont .m_txt{width: 100%;}
    #sec4 .inner .bot_cont{flex-wrap: wrap; margin-top: 70px;}
    #sec4 .inner .bot_cont .box{width: 50%; padding: 24px;}
    #sec4 .inner .bot_cont .box h4{font-size: 36px;}
    #sec4 .inner .bot_cont .box h4 small{font-size: 22px;}
    #sec4 .inner .bot_cont .box p{font-size: 17px; margin-top: 35px;}
}
@media all and (max-width: 768px){
    #sec4{padding: 95px 0;}
    #sec4 .m_txt p br{display: none;}
    #sec4 .inner .top_cont .logo{justify-content: flex-start;}
    #sec4 .inner .top_cont .logo img{max-width: 85%;}
    #sec4 .inner .bot_cont{margin-top: 50px;}
    #sec4 .inner .bot_cont .box h4{font-size: 30px;}
    #sec4 .inner .bot_cont .box h4 small{font-size: 20px;}
    #sec4 .inner .bot_cont .box p{font-size: 16px; margin-top: 25px;}
    #sec4 .inner .info p{font-size: 15px;}
}
@media all and (max-width: 500px){
    #sec4{padding: 90px 0;}
    #sec4 .inner .bot_cont .box{width: 50%; padding: 16px 18px;}
    #sec4 .inner .bot_cont .box h4{font-size: 28px;}
    #sec4 .inner .bot_cont .box h4 small{font-size: 18px;}
    #sec4 .inner .bot_cont .box p{font-size: 16px; margin-top: 18px;}
    #sec4 .inner .info{margin-top: 24px;}
}


/* sec5 */
#sec5{padding: 160px 0; background: #F8F8F8 url(/images/main/sec5_bg.webp) no-repeat bottom center / 100%; text-align: center;}
#sec5 .m_txt{text-align: center;}
#sec5 .dots{margin: 40px 0 50px; display: inline-flex; justify-content: center; background-color: #fff; padding: 20px 25px; border-radius: 40px;}
#sec5 .dots .slick-dots{position: static; display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0;}
#sec5 .dots .slick-dots li{width: 8px; height: 8px; line-height: 0; background-color: #CACACA; border-radius: 100%; margin: 0;}
#sec5 .dots .slick-dots li.slick-active{background: var(--primarycolor);}
#sec5 .cont{}
#sec5 .cont .box{position: relative; margin: 0 20px; border-radius: 20px; overflow: hidden; transform: scale(0.857143); transform-origin: center bottom; transition: transform .3s;}
#sec5 .cont .box.slick-current{transform: scale(1);}
#sec5 .cont .box:has(+ .box.slick-current){transform-origin: right bottom;}
#sec5 .cont .box.slick-current + .box{transform-origin: left bottom;}
#sec5 .cont .box::after{content:''; position: absolute; bottom:0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(14, 47, 78, 0) 30%, rgba(14, 47, 78, 1) 100%); opacity: 0; transition: .3s;}
#sec5 .cont .box.slick-current::after{opacity: 1;}
#sec5 .cont .box .img{position: relative; background-color: #000;}
#sec5 .cont .box .img img{width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: .3s;}
#sec5 .cont .box.slick-current .img img{opacity: 1;}
#sec5 .cont .box .txt{position: absolute; color:#fff; bottom: 0; left: 0; padding: 40px 45px; z-index: 2; text-align: left;}
#sec5 .cont .box .txt h4{font-size: 18px; font-weight: 500; visibility: hidden; margin-bottom: 5px;}
#sec5 .cont .box.slick-current .txt h4{visibility: visible;}
#sec5 .cont .box .txt h3{font-size: 30px;}
#sec5 .cont .box.slick-current .txt h3{font-size: 36px;}
#sec5 > .m_txt{text-align: center; margin-top: 65px;}


@media all and (max-width: 1919px){
    #sec5{padding: 130px 0;}
}
@media all and (max-width: 1024px){
    #sec5{padding: 110px 0;}
    #sec5 .dots{margin: 30px 0 40px; padding: 14px 18px;}
    /* the box width previously fell back to the source image's intrinsic pixel size (nothing else
       constrained it), which is why the active (scale:1) card could overflow past the viewport on
       narrower screens - give it an explicit width + aspect-ratio at every mobile tier instead */
    #sec5 .cont .box{width: 68vw; margin: 0 16px;}
    #sec5 .cont .box .img{aspect-ratio: 3/2;}
    #sec5 .cont .box .txt{padding: 30px 35px;}
    #sec5 .cont .box .txt h4{font-size: 16px;}
    #sec5 .cont .box .txt h3{font-size: 26px;}
    #sec5 .cont .box.slick-current .txt h3{font-size: 30px;}
}
@media all and (max-width: 768px){
    #sec5{padding: 95px 0;}
    #sec5 .dots{margin: 24px 0 30px; padding: 12px 16px;}
    #sec5 .cont .box{width: 76vw; margin: 0 14px;}
    #sec5 .cont .box .txt{padding: 24px 26px;}
    #sec5 .cont .box .txt h3{font-size: 22px;}
    #sec5 .cont .box.slick-current .txt h3{font-size: 26px;}
    #sec5 > .m_txt{margin-top: 45px;}
}
@media all and (max-width: 500px){
    #sec5{padding: 90px 0;}
    #sec5 .dots{margin: 20px 0 24px; padding: 10px 14px;}
    #sec5 .cont .box{width: 82vw; margin: 0 12px;}
    #sec5 .cont .box .txt{padding: 20px 20px;}
    #sec5 .cont .box .txt h3{font-size: 20px;}
    #sec5 .cont .box.slick-current .txt h3{font-size: 22px;}
    #sec5 > .m_txt{margin-top: 32px;}
}


/* sec6 */
#sec6{padding: 160px 0;}
#sec6 .inner{}
#sec6 .inner .top_cont{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px;}
#sec6 .m_txt a.more1{margin-top: 0;}
#sec6 .inner .bot_cont{}
#sec6 .inner .bot_cont .slick-list{margin: 0 -15px;}
#sec6 .inner .bot_cont .img{width: calc(100% - 30px); aspect-ratio: 74/99; margin: 0 15px; border-radius: 20px; overflow: hidden; border: 1px solid #EEE;}
#sec6 .inner .bot_cont .img img{width: 100%; height: 100%; object-fit: cover;}

@media all and (max-width: 1600px){
    #sec6{padding: 130px 0;}
}
@media all and (max-width: 1024px){
    #sec6{padding: 110px 0;}
    #sec6 .inner .top_cont{margin-bottom: 35px; flex-wrap: wrap; gap: 12px;}
    #sec6 .inner .bot_cont .slick-list{margin: 0 -12px;}
    #sec6 .inner .bot_cont .img{width: calc(100% - 24px); margin: 0 12px;}
}
@media all and (max-width: 768px){
    #sec6{padding: 95px 0;}
    #sec6 .inner .top_cont{margin-bottom: 28px;}
    #sec6 .inner .bot_cont .slick-list{margin: 0 -10px;}
    #sec6 .inner .bot_cont .img{width: calc(100% - 20px); margin: 0 10px;}
}
@media all and (max-width: 500px){
    #sec6{padding: 90px 0;}
    #sec6 .inner .top_cont{margin-bottom: 22px;}
    #sec6 .inner .bot_cont .slick-list{margin: 0 -8px;}
    #sec6 .inner .bot_cont .img{width: calc(100% - 16px); margin: 0 8px;}
}


/* sec7 */
#sec7{padding: 160px 0; background-color: #f3f3f3;}
#sec7 .inner{}
#sec7 .inner .top_cont{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px;}

@media all and (max-width: 1600px){
    #sec7{padding: 130px 0;}
}
@media all and (max-width: 1024px){
    #sec7{padding: 110px 0;}
    #sec7 .inner .top_cont{margin-bottom: 35px;}
}
@media all and (max-width: 768px){
    #sec7{padding: 95px 0;}
    #sec7 .inner .top_cont{margin-bottom: 28px;}
}
@media all and (max-width: 500px){
    #sec7{padding: 90px 0;}
    #sec7 .inner .top_cont{margin-bottom: 22px;}
}