/**** 첫번째 섹션 ****/

* {font-family: 'Pretendard Variable' !important}
.design_service_sec{position:relative;height:100vh;min-height:720px;overflow:hidden;background:#fffbf7 url(../../../img/newport_sec1_txt_bg.png) no-repeat center 100px/contain;}
.floating_canvas{position:relative;width:100%;height:100%;overflow:hidden;}
.center_txt{position:absolute;left:50%;top:20%;transform:translateX(-50%);text-align:center;z-index:100;pointer-events:none;width:max-content;}
.center_txt p{color:#ff4b22;font-size:70px;font-weight:700;}
.center_txt h2{color:#222;font-size:70px;font-weight:500;}
.float_item{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;cursor:grab;user-select:none;z-index:10;will-change:transform;}
.float_item:active{cursor:grabbing;}
.float_item img{display:block;width:auto;height:auto;max-width:min(22vw,320px);max-height:min(18vh,220px);object-fit:contain;pointer-events:none;}
.float_item .txt_img{max-width:min(28vw,430px);max-height:min(16vh,160px);transform:none;}


.nt-container-wide {max-width:100%;}
.new_web_page,
.new_port_page {width:100%}
.new_web_page > section ,
.new_port_page > section {width:100%}


/**** 두번째 섹션 ****/

 .main_sec2{position:relative;z-index:2;background:#fffbf7;overflow:hidden;}
.webwise_sec{position:relative;min-height:100vh;background:#fffbf7 url("../../../img/newport_sec2_bg.png") no-repeat center top / contain;overflow:hidden;}
.webwise_title{position:relative;z-index:30;padding:250px 0 0;text-align:center;}
.webwise_title h2{font-size:4em;line-height:1.3;font-weight:700;}
.webwise_title p{margin-top:10px;font-size:1.3em;}
.webwise_pin{position:relative;height:100vh;overflow:hidden;}
.webwise_intro{position:absolute;inset:0;z-index:10;overflow:hidden;}

.webwise_scene{position:absolute;left:50%;top:calc((100vh + 70px) / 2);width:min(98vw,1800px);height:calc(100vh - 70px);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:20px;}
.webwise_scene .ww_img  {border-radius: 20px;;}
.ww_col{display:flex;flex-direction:column;gap:20px;}
.ww_col_left{width:calc((100% - 910px) / 2 - 10px);}
.ww_col_center_top{width:180px;align-self:flex-end;}
.ww_col_center_bottom{width:400px;align-self:flex-start;}
.ww_col_right{width:448px;}
.ww_img{position:relative;display:block;width:100%;height:auto;max-width:none;object-fit:contain;border-radius:10px;box-shadow:0 18px 42px rgba(0,0,0,.12);will-change:transform,opacity;}
.ww_img img {width:100%}
.ww_main_box{position:relative;width:910px;height:430px;aspect-ratio:auto;z-index:20;overflow:hidden;background:#111;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.22);will-change:width,height,border-radius,transform;}
.ww_slider{position:absolute;left:50%;top:50%;width:95vw;height:calc(100vh - 100px);transform:translate(-50%,-50%);overflow:hidden;border-radius:32px;background:#111;z-index:80;opacity:1;visibility:visible;pointer-events:none;will-change:transform,clip-path;}
.ww_slide{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;opacity:0;z-index:1;clip-path:inset(0 100% 0 0 round 32px);will-change:opacity,clip-path,transform;}
.ww_slide:first-child{opacity:1;z-index:10;clip-path:inset(0 0 0 0 round 32px);}
.ww_slide > img,
.ww_slide > picture{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;transform:translate(-50%,-50%);display:block;will-change:transform;}

.ww_slide > img,
.ww_slide > picture > img{width:100%;height:100%;object-fit:cover;display:block;}
.ww_slide::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,.14) 55%,rgba(0,0,0,0));}
.ww_slide_info{position:absolute;left:50%;bottom:0;z-index:8;display:flex;align-items:flex-end;justify-content:space-between;width:calc(100% - 110px);max-width:800px;padding-bottom:20px;border-bottom:1px solid #fff;transform:translate(-50%,-50%);opacity:0;will-change:opacity,transform;}
.ww_info_left{position:relative;}
.ww_info_left strong{display:block;margin-bottom:8px;color:#fff;font-size:42px;font-weight:600;line-height:1.1;}
.ww_info_left p{color:rgba(255,255,255,.82);font-size:20px;font-weight:400;}
.ww_info_more{transition:.35s;}
.ww_info_more > img{position:static;width:auto;height:auto;max-width:none;transform:none;display:block;transition:.35s;}

.ww_main_box{position:relative;width:910px;height:430px;aspect-ratio:auto;z-index:20;overflow:hidden;background:#111;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.22);will-change:width,height,border-radius,transform;}

.ww_slider{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#111;z-index:80;opacity:1;visibility:visible;pointer-events:none;will-change:transform,clip-path;}

.ww_slide{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;opacity:0;z-index:1;clip-path:inset(0 100% 0 0 round 32px);will-change:opacity,clip-path,transform;}

.ww_slide > img{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;object-fit:cover;transform:translate(-50%,-50%);display:block;will-change:transform;}
/* ===========================
세번째 섹션
=========================== */


.stats_bg {position: absolute;inset: -5%;background: url('../../../img/newport_sec3_bg.jpg') center center / cover no-repeat;animation: bgFloat 14s ease-in-out infinite alternate;height:100%}
.stats_bg::before {content: '';position: absolute;inset: -20%;background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 22%),radial-gradient(circle at 80% 60%, rgba(255,255,255,.06), transparent 28%),radial-gradient(circle at 55% 20%, rgba(255,255,255,.08), transparent 25%);filter: blur(120px);mix-blend-mode: screen;animation: lightMove 10s ease-in-out infinite alternate;}
.stats_bg::after {content: '';position: absolute;inset: -40%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.03) 44%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.03) 56%,transparent 65%);filter: blur(80px);mix-blend-mode: screen;animation: shineMove 8s linear infinite;}
.stats_inner {position: relative;z-index: 10;width: 100%;max-width: 1200px;text-align: center;}
.stats_list {display: flex;justify-content: center;gap: 90px;list-style: none;margin: 0 0 120px;padding: 0;}
.stats_list li {width:30%}
.stats_list strong {display: block;margin-bottom: 10px;font-size: 36px;line-height: 1;font-weight: 500;color: #fff;}
.stats_list strong  span {font-size:60px;}
.stats_list p {margin: 0 0 6px;color: #fff;font-size: 36px;}
.stats_list em {display: block;font-style: normal;color: #fff;font-size: 20px;;}
.main_sec3 {position:relative;height:100vh;background:#000;overflow:visible;}
.stats_wave_sec {position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;}
.stats_text p {font-size:20px;line-height:1.8;color:#fff}
@keyframes bgFloat{

    0%{
        transform:scale(1.2) translate(0,0);
    }

    50%{
        transform:scale(1.24) translate(-12px,-8px);
    }

    100%{
        transform:scale(1.22) translate(15px,10px);
    }

}

@keyframes lightMove {
    0% {
    transform: translate(-60px,-20px) scale(1);
    }
    50% {
    transform: translate(20px,30px) scale(1.12);
    }
    100% {
    transform: translate(60px,-10px) scale(1);
    }
}

@keyframes shineMove {
    from {
    transform: translateX(-35%);
    }
    to {
    transform: translateX(35%);
    }
}






/*** 네번째 섹션 ***/

.newport_sec4_mo {display:none}
.newport_sec4{position:relative;min-height:100vh;padding:160px 0;background:#fffbf7;overflow:hidden;cursor:none;}
.sec4_title{text-align:center;margin-bottom:160px;}
.sec4_title h2{margin:0;color:#212121;font-size:80px;line-height:1.3;font-weight:700;letter-spacing:-.03em;}
.sec4_title p{margin:15px 0 0;color:#222;font-size:30px;}
.file_stack{position:relative;width:92%;max-width:1387px;height:670px;margin:0 auto;z-index:5;}
.file_item{position:absolute;left:0;width:100%;height:430px;transform-origin:center top;will-change:transform,opacity;pointer-events:none;}
.file_shape{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:auto;transition:transform .45s cubic-bezier(.22,1,.36,1),filter .35s ease;}
.txt_wrap{position:absolute;color:#111;transition:color .25s;pointer-events:none;display:none}
.txt_wrap span{width:80px;display:inline-block;font-size:23px;}
.txt_wrap b{font-size:26px;font-weight:600;}
.file_item.center .txt_wrap{width:270px;left:50%;top:15px;transform:translateX(-50%);}
.file_item.right .txt_wrap{width:280px;right:185px;top:17px;}
.file_item.left .txt_wrap{width:270px;left:190px;top:15px;}
.file_item.active .file_shape{transform:translateY(-22px);filter:drop-shadow(0 16px 18px rgba(0,0,0,.16));}
.file_item.active .txt_wrap{color:#fff;}
.file_item:nth-child(1){top:0;z-index:2;}
.file_item:nth-child(2){top:37px;z-index:3;}
.file_item:nth-child(3){top:72px;z-index:4;}
.file_item:nth-child(4){top:109px;z-index:5;}
.file_item:nth-child(5){top:146px;z-index:6;}
.file_item:nth-child(6){top:184px;z-index:7;}
.file_item:nth-child(7){top:211px;z-index:8;}
.file_item:nth-child(8){top:248px;z-index:9;}
.file_item:nth-child(9){top:285px;z-index:10;}
.sec4_desk{position:relative;width:98%;max-width:1800px;aspect-ratio:1800/197;margin:-150px auto;background:url('/img/newport_sec4_desk.png') no-repeat center/100% 100%;z-index:60;}
.cursor_preview{position:fixed;left:0;top:0;width:350px;aspect-ratio:1;background:center/cover no-repeat;pointer-events:none;opacity:0;transform:translate(34px,34px) scale(.96);transition:opacity .2s,transform .25s;z-index:9999;box-shadow:0 16px 35px rgba(0,0,0,.18);}
body.sec4-cursor-mode .cursor_preview.show{opacity:1;transform:translate(34px,34px) scale(1);}
.file_item { position:absolute; left:0; width:100%; height:430px; transform-origin:center top; pointer-events:none; will-change:transform,opacity; }
.file_shape { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transition:transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease; }
.file_hit { fill:#fff; stroke:#212121; stroke-width:2; stroke-miterlimit:10; pointer-events:visiblePainted; cursor:none; transition:fill .25s ease; }
.file_item.active .file_hit { fill:#ff5638; }
.file_item.active .txt_wrap { color:#fff;}
.txt_wrap { position:absolute; color:#111; pointer-events:none; transition:color .25s ease; }
.file_item .txt_wrap { transition:color .25s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.file_item.center.active .txt_wrap { transform:translateX(-50%) translateY(-22px); }
.file_item.left.active .txt_wrap { transform:translateY(-22px); }
.file_item.right.active .txt_wrap { transform:translateY(-22px); }
.file_stack::before{content: '';position: absolute;left: 50%;bottom: 28px;transform: translateX(-50%);width: 98%;aspect-ratio: 1393 / 557;background: url(/img/newport_sec4_imgbg.png) no-repeat center bottom / cover;z-index: 1;pointer-events: none;}
.file_txt{fill:#212121;transition:fill .3s ease;}

.file_item:hover .file_txt,
.file_item.active .file_txt{fill:#fff!important;}









.main_sec5 {position:relative;background:#fffbf7;}
.designer_match_sec {position:relative;height:350vh;background:#fffbf7;}
.designer_match_pin {position:sticky;top:0;height:100vh;overflow:hidden;background:#fffbf7;color:#222;}

.dm_bg_wrap {position:absolute;inset:0;}

.dm_bracket {position:absolute;left:50%;top:50%;z-index:20;transform:translate(-50%,-50%);pointer-events:none;}
.dm_bracket img {display:block;width:auto;height:270px;}

.dm_center_prigin_wrap {position:absolute;left:50%;top:50%;z-index:5;width:520px;aspect-ratio: 1/1;transform:translate(-50%,-50%);pointer-events:none;}
.dm_center_prigin_wrap img {position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.92);}

.dm_center_wrap {position:absolute;inset:0;z-index:10;pointer-events:none;}
.dm_center {position:absolute;left:50%;top:50%;width:600px;max-width:90vw;text-align:center;opacity:0;}

.dm_num {font-size:30px;margin-bottom:30px;color:#222;font-weight:600;}
.dm_shuffle {font-size:96px;font-weight:600;line-height:1.2;margin:0;color:#222;letter-spacing:-0.05em;}
.dm_line {display:block;overflow:hidden;}
.text_wrap {margin-top:50px;}
.text_wrap em {display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:999px;background:#ff694f;color:#fff;font-size:20px;font-style:normal;margin-bottom:30px;font-weight:400;}
.text_wrap p {font-size:23px;line-height:1.65;margin:0;color:#222;font-weight:500;}

.dm_side {position:absolute;top:50%;z-index:50;pointer-events:none;overflow:hidden;opacity:1;visibility:visible;}
.dm_side span {display:block;font-size:clamp(46px,4vw,72px);font-weight:700;line-height:1;color:#222;opacity:0;transform:translateY(100px);}
.dm_left {left:8vw;transform:translateY(-50%);}
.dm_right {right:8vw;transform:translateY(-50%);}

.direction_caption { margin:0 0 16px; font-size:22px;color:#fff;}
.direction_inner h2 strong { color:#ff4b2f; font-weight:600; }
.direction_head { height:33px; margin:0 0 12px; border:1px solid rgba(255,255,255,.16); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:rgba(255,255,255,.72); }

.direction_col.active .direction_head { margin:-1px -1px 13px; height:35px; border-color:#ff4b2f; background:#ff4b2f; color:#fff; }

.compare_title .compare_head {opacity:0}
.compare_title li{color: #fff;height: 55px;display: flex;align-items: center;justify-content: flex-start;font-size: 20px;}
.compare_title ul,
.compare_col ul{margin:0;padding:0;list-style:none;}
.compare_col li{height:55px;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed rgba(255,255,255,.12);font-size:23px;}
.compare_col{text-align:center;border-radius: 10px;}
.compare_col li{color:#8a8a8a;}
.compare_col.active .compare_head{background:#ff5a33;border-color:#ff5a33;color:#fff;border-radius: 10px;}
.compare_col.active ul {border: 3px solid #FF5635;border-radius: 10px;background: linear-gradient(220deg, rgba(255, 42, 0, 0.15), rgba(255, 86, 53, 0.05));padding: 0 25px;}
/* .compare_col.active li{color:#ff5a33;} */
.compare_col.active li{color:#fff;}
.main_sec6 { position:relative; background:#050505; }
.service_direction_sec { position:relative; min-height:100vh; padding:160px 0; ; background:radial-gradient(circle at center top, #46474C 0%, #1d1e20 42%, #090807 100%); color:#fff; overflow:hidden; }
.direction_inner { position:relative; z-index:2; max-width:1300px;  margin:0 auto; display:flex; flex-direction:column; align-items:center;  text-align:center;}
.direction_inner h2 { margin:0 0 70px; font-size:45px; line-height:1.35; color:#fff; font-weight:400; }
.direction_table { display:grid; grid-template-columns:150px repeat(3,1fr); gap:35px; width:95%; transform-origin:center center; will-change:transform; }
.compare_col { position:relative; text-align:center; border-radius:10px; transform-origin:center center; will-change:transform, opacity, filter; }
.compare_col.active { z-index:10; transform-origin:center center; }
.compare_head { width:100%; height:60px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:10px; margin-bottom:12px; font-size:26px; }
.compare_col.active{position:relative;z-index:2;animation:activeFloat 3s ease-in-out infinite;}
.compare_col.active > ul::before{content:'';position:absolute;inset:-20px;border-radius:28px;background:rgba(255,86,53,.18);filter:blur(40px);z-index:-2;animation:activeGlow 3s ease-in-out infinite;}



@keyframes activeFloat{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}

@keyframes activeGlow{
    0%{
        opacity:.45;
        transform:scale(.96);
        filter:blur(35px);
    }
    50%{
        opacity:.9;
        transform:scale(1.05);
        filter:blur(55px);
    }
    100%{
        opacity:.45;
        transform:scale(.96);
        filter:blur(35px);
    }
}

@keyframes activeShadow{
    0%{
        box-shadow:0 35px 75px rgba(255,86,53,.22);
    }
    50%{
        box-shadow:0 45px 95px rgba(255,86,53,.35);
    }
    100%{
        box-shadow:0 35px 75px rgba(255,86,53,.22);
    }
}











.main_sec7 { position:relative; background:#fffbf7; overflow:hidden; }
.w_intro_sec { position:relative; height:100vh; background:#fffbf7; overflow:hidden; }
.w_pin { position:relative; width:100%; height:100vh; overflow:hidden; background:#fffbf7; }
.w_full_bg { position:absolute; inset:0; background-position:center center; background-size:cover; background-repeat:no-repeat; opacity:1; z-index:1;}
.w_hole_svg { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.w_hole_group { transform-box:view-box; transform-origin:50% 50%; will-change:transform; }
.w_center_txt { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; color:#fff; text-align:center; opacity:0; pointer-events:none;width:max-content }
.w_center_txt p { margin:0; font-size:60px; font-weight:500; }




@media (max-width:1800px) {
    .dm_left{left:3vw}
    .dm_right {right:3vw}

}


@media (max-width:1500px) {
    .dm_center_prigin_wrap {width:420px}
    .dm_shuffle {font-size:80px}
    .dm_center {width:500px;}
    .file_item .txt_wrap {width:250px!important}
    .txt_wrap b {font-size: 23px;}
    .file_item.right .txt_wrap {right:200px;}

}

@media(max-width:1480px) {
    .file_stack::before {width:100%}
}

@media (max-width:1399px) {
    .file_stack .file_item .txt_wrap {top:32px}
    .ww_img {transform:scale(.9);} 
    .file_item.right .txt_wrap {right:155px;}
    .file_item.left .txt_wrap {left:165px}
    .sec4_desk {margin:-100px auto}
    .sec4_title{margin-bottom:100px;}
    .dm_side span {font-size: 50px;}
}

@media (max-width:1199px) {
    .stats_list {gap:0}
    .file_item .txt_wrap {width:230px!important}
    .file_stack .file_item .txt_wrap{top:55px}
    .file_item.right .txt_wrap {right:110px;}
    .file_item.left .txt_wrap {left:140x} 
    .txt_wrap span {font-size: 18px;width:60px;;}
    .txt_wrap b {font-size: 20px;;}
    .dm_side span {font-size: 40px;}
    .webwise_title {padding:150px 0 0 }

}

@media (max-width:1024px) {
    .center_txt p ,
    .center_txt h2 {font-size: 2.5em;}
    .ww_img {display:none}
    .ww_main_box {width:100%}
    .webwise_title{padding:140px 20px 0;}
    .webwise_title h2{font-size:48px;}
    .webwise_title p{font-size:17px;}

    .webwise_scene{position:absolute;left:50%;top:50%;width:100%;height:100vh;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:0;}
    .ww_col_left,.ww_col_right,.ww_col_center_top,.ww_col_center_bottom{display:none!important;}
    .ww_col_center{display:flex!important;width:100%;height:100%;align-items:center;justify-content:center;transform:none;}
    .ww_main_box{position:relative!important;flex:0 0 auto;}
    .ww_info_left strong{font-size:30px;}
    .ww_info_left p{font-size:18px;}
    
    .dm_side{position:absolute;left:50%;width:100%;transform:translateX(-50%);display:flex;justify-content:center;pointer-events:none;}
    .dm_side.left{top:80px;}
    .dm_side.right{bottom:80px;}
    .dm_side.left span,
    .dm_side.right span{position:static !important;transform:none !important;}
    .dm_side{position:absolute;left:50%;right:auto;width:auto;z-index:50;overflow:hidden;transform:translateX(-50%);pointer-events:none;}
    .dm_left{top:100px;}
    .dm_right{top:auto;bottom:70px;}
    .dm_side span{display:block;text-align:center;font-size:clamp(36px,7vw,64px);line-height:1;white-space:nowrap;}
    .direction_table {gap:20px}
    .compare_head {font-size: 20px;}
    .compare_col li {font-size:18px}
    .compare_title li {font-size: 14px;;}
    .direction_table {grid-template-columns: 100px repeat(3, 1fr);}
    .direction_inner h2  {font-size: 40px;;}
    .w_center_txt p {font-size: 40px;}
    .ww_slide_info{top: 80%;width: calc(100% - 48px);max-width: none;padding-bottom: 14px;display: flex;align-items: flex-start;gap: 30px;flex-direction: column;justify-content: flex-start;;}
    .ww_info_more {width:60px}
    .ww_info_more img {width:100%}

    .ww_slide_info {top:78%; border-bottom:none} 





}

@media (max-width:768px){
    .newport_sec4{display:none;}
    .newport_sec4_mo{display:block;position:relative;padding:100px 0 0;background:#fffbf7;overflow:hidden;}
    .newport_sec4_mo .sec4_title{margin-bottom:60px;text-align:center;}
    .newport_sec4_mo .sec4_title h2{font-size:42px;line-height:1.2;font-weight:700;color:#212121;}
    .newport_sec4_mo .sec4_title p{margin-top:12px;font-size:18px;color:#212121;}
    .file_stack_mo{position:relative;width:92%;margin:0 auto;z-index:5;transition:height .65s cubic-bezier(.22,1,.36,1);        background: url(/img/newport_sec4_imgbg_mo.png) no-repeat center 55px / 94%;}
    .file_item_mo_list{position:absolute;left:50%;transform:translateX(-50%);width:92%;height:auto;transform-origin:center top;will-change:top;pointer-events:auto;transition:top .65s cubic-bezier(.22,1,.36,1);}
    .file_item_mo{position:relative;width:100%;margin-bottom:-38px;cursor:pointer;z-index:2;transition:transform .35s ease;}
    .file_item_mo svg{display:block;width:100%;height:auto;}
    .file_item_mo .file_hit{transition:fill .3s ease,stroke .3s ease;}
    .file_item_mo .file_txt{transition:fill .3s ease;}
    .file_item_mo_list.active{z-index:30!important;}
    .file_item_mo_list.active .file_item_mo{transform:translateY(-2px);}
    .file_item_mo_list.active .file_hit{fill:#ff5635;stroke:#ff5635;}
    .file_item_mo_list.active .file_txt{fill:#fff!important;}
    .file_preview_mo{height:0;overflow:hidden;transition:height .65s cubic-bezier(.22,1,.36,1);position:absolute; top:0;left:50%; transform: translateX(-50%);width :70%}
    .file_preview_mo > div{padding:100px 0 24px;opacity:0;transition:opacity .4s ease,transform .65s cubic-bezier(.22,1,.36,1);}
    .file_preview_mo img{display:block;width:100%;margin:0 auto;border-radius:18px;box-shadow:0 20px 45px rgba(0,0,0,.16);}
    .file_item_mo_list.active .file_preview_mo > div{opacity:1;transform:translateY(0) scale(1);}

    .file_stack_mo .sec4_desk  {position:absolute;width:100%;aspect-ratio:737/197;margin:0 auto;background:url('/img/newport_sec4_desk_mo.png') no-repeat center/100% 100%;z-index:60;bottom:0}
}

@media (max-width:768px){
    .file_item_mo svg path:first-of-type{pointer-events:visiblePainted;cursor:pointer;transition:fill .3s ease,stroke .3s ease;}
    .file_item_mo svg path:not(:first-of-type){pointer-events:none;transition:fill .3s ease;}
    .file_item_mo_list.active .file_item_mo svg path:first-of-type{fill:#ff5635!important;stroke:#ff5635!important;}
    .file_item_mo_list.active .file_item_mo svg path:not(:first-of-type){fill:#fff!important;}
}

@media (max-width:768px) {
       .float_item{pointer-events:none;}
.center_txt p ,
.center_txt h2 {font-size: 1.8em;}


.main_sec3 {height:auto}
.stats_wave_sec {height: auto; padding:160px 0;}
.stats_list strong {font-size:30px; ;}
.stats_list strong span {font-size: 60px;}
.stats_list p {font-size: 25px;}
.stats_list em {font-size: 20px;}
.stats_text p{font-size: 20px;        word-break: keep-all;}
.stats_text {width:80%;margin:0 auto}
.stats_list{flex-direction: column;gap:50px;align-items: center; margin-bottom:50px}
.stats_list li {width:100%}
.compare_title{display:none;}
.direction_table{display:grid;grid-template-columns:1fr 1fr 1fr;}
.direction_inner h2 {font-size: 35px;}
.w_center_txt p {font-size: 30px;} 
.newport_sec4_mo .file_item.left .txt_wrap {width: 50% !important;left: 100px;}
.newport_sec4_mo .file_item.right .txt_wrap {width: 50% !important;right: 0;padding-left:100px;}
.dm_num {font-size:22px;}
.dm_shuffle {font-size: 60px;;}
.text_wrap {margin-top:30px;}
.text_wrap em {font-size: 18px;margin-bottom:20px;}
.text_wrap p {font-size: 20px;}
    /* .ww_slide_info {top:68%;}  */
    .ww_slide_info{top:auto !important;bottom:42px;width:calc(100% - 44px);max-width:none;padding-bottom:14px;transform:translateX(-50%);}


}

@media (max-width:640px) {
    .direction_table {display:flex; flex-direction: column;}
}

@media (max-width:500px) {
    .center_txt p ,
    .center_txt h2 {font-size: 1.5em;}
    .stats_text p{font-size: 16px;}
    .direction_inner h2 {font-size: 28px;}  
    .newport_sec4_mo .file_item.left .txt_wrap,
    .newport_sec4_mo .file_item.right .txt_wrap{width:100%!important; left:30px!important; padding-left:0} 
    .dm_bracket,
    .dm_side {display:none}
    .ww_info_left p {font-size: 16px;}

}





@media (min-width:1200px) and (max-width:1399px){
    .webwise_scene{width:min(98vw,1360px);gap:18px;}
    .ww_col_left{width:calc((100% - 820px) / 2 - 9px);}
    .ww_col_right{width:390px;}
    .ww_col{gap:18px;}
}

@media (min-width:1025px) and (max-width:1199px){
    .webwise_scene{width:min(98vw,1180px);gap:14px;}
    .ww_col_left{width:calc((100% - 720px) / 2 - 7px);}
    .ww_col_right{width:320px;}
    .ww_col{gap:14px;}
}

@media (max-width:1024px){
    .webwise_scene{width:100%;height:100vh;top:50%;gap:0;}

    .ww_col_left,
    .ww_col_right,
    .ww_col_center_top,
    .ww_col_center_bottom{display:none;}

    .ww_col_center{display:flex;width:100%;align-items:center;justify-content:center;}

    .ww_main_box{flex:0 0 auto;width:min(calc(100vw - 40px),520px);height:auto;aspect-ratio:4/5;max-width:calc(100vw - 40px);max-height:calc(100vh - 100px);border-radius:22px;}

    .ww_slider{width:100%;height:100%;border-radius:inherit;}
}

@media (max-width:768px){
    .ww_main_box{max-width:calc(100vw - 32px);max-height:calc(100vh - 100px);}
}






@media (max-width:1399px){
    .float_item img{max-width:min(20vw,280px);max-height:min(17vh,190px);}
    .float_item .txt_img{max-width:min(26vw,360px);max-height:min(15vh,140px);}
}

@media (max-width:1199px){
    .design_service_sec{min-height:680px;}
    .center_txt p{font-size:2.5em;}
    .center_txt h2{font-size:2.5em;}
    .float_item img{max-width:min(22vw,230px);max-height:min(16vh,160px);}
    .float_item .txt_img{max-width:min(30vw,300px);max-height:min(14vh,120px);}
}

@media (max-width:768px){
    .design_service_sec{min-height:640px;background-position:center 90px;background-size:140% auto;}
    .center_txt{top:16%;width:calc(100% - 40px);}
    .center_txt p{font-size:1.55em;}
    .center_txt h2{font-size:1.55em;line-height:1.35;}
    .float_item img{max-width:min(30vw,150px);max-height:min(13vh,110px);}
    .float_item .txt_img{max-width:min(42vw,220px);max-height:min(11vh,86px);}
}

@media (max-width:500px){
    .design_service_sec{min-height:600px;}
    .center_txt{top:15%;}
    .center_txt p{font-size:1.25em;}
    .center_txt h2{font-size:1.25em;}
    .float_item img{max-width:min(34vw,120px);max-height:min(12vh,90px);}
    .float_item .txt_img{max-width:min(48vw,180px);max-height:min(10vh,70px);}
}