.mo { display: none; }
.mt { opacity: 0; transition: all 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); }
.mt.up { transform: translate(0, 50px); }
.mt.bt { transform: translate(0, -50px); }
.mt.rt { transform: translate(50px, 0); }
.mt.lt { transform: translate(-50px, 0); }
.mt.show { opacity: 1; transform: none; }
.mt.bar { height: 0; }
.mt.bar.show { height: auto; }

#next-generation { width: 100%; height: 100dvh; margin-top:0; background:#1a1a1a;}
.sec2 { position: relative; display: flex; justify-content: center; align-items: center; }
.contents { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: calc(9.5vh + 88px) 6.65vw 9.5vh; box-sizing: border-box; }
.contents .or { color: #ff5f00; }
.bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.4; /* z-index: -1; */}
.bg-video__content { width: 100%; height: 100%; object-fit: cover; }

.section { color: #fff; }

.sec1 { }
.sec1 .cate { position: absolute; top: calc(5.6vh + 88px); left: 6.65vw; display: flex; align-items: center; gap: 17px; font-size: 24px; font-weight: 500; }
.sec1 .cate:before { content: ""; width: 14px; height: auto; aspect-ratio: 14/33; background: url('../../../../ko/img/products/next-generation/ico_brace_w.png') center / 100% auto no-repeat; }
.sec1 .text { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sec1 .text h3 { font-size: 32px; font-weight: 600; margin-bottom: 40px; }
.sec1 .text h1 { font-size: 94px; font-weight: 600; text-align: center; }
.sec1 .text p { font-size: 26px; font-weight: 500; text-align: center; margin-top: 20px; line-height: 1.7; }

.sec2 .contents { height: auto; }
.sec2 .title { position: absolute; top: calc(3.5vh + 88px); left: 6.65vw; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sec2 .title h3 { font-size: 35px; font-weight: 600; }
.sec2 .title .wr { display: flex; align-items: center; gap: 15px; }
.sec2 .title .wr .brace { width: 17px; height: auto; aspect-ratio: 17/43; background: url('../../../../ko/img/products/next-generation/ico_brace_o.png') center / 100% auto no-repeat; }
.sec2 .title .wr p { font-size: 40px; font-weight: 500; }
.sec2 .twrap { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; max-width: 1400px; gap: 1.3vh; margin-top: 5vh; height: calc(100% - 9.5vh); }
.sec2 .twrap .ans { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5vw; }
.sec2 .twrap .ans .tit { }
.sec2 .twrap .ans .tit span { font-size: 20px; font-weight: 500; color: #ff5f00; }
.sec2 .twrap .ans .tit p { font-size: 36px; font-weight: 500; margin-top: 11px; }
.sec2 .twrap .desc { display: flex; align-items: stretch; width: 60%; flex-shrink: 0; margin-top: 40px; gap: 28px; }
.sec2 .twrap .desc .bar { width: 2px; background: #ff5f00; flex-shrink: 0; }
.sec2 .twrap .desc .wr { display: flex; flex-direction: column; gap: 20px; }
.sec2 .twrap .desc .wr .text { font-size: 25px; font-weight: 500; line-height: 1.44; }
.sec2 .twrap .desc .wr .text.or { font-size: 18px; font-weight: 500; }

.contents.youtube { padding: 0; padding-top: calc(9.5vh + 120px); flex-direction: column; justify-content: space-between; gap: 30px; background: #fff; }
.contents.youtube iframe { width: calc(100% - 13.3vw); height: auto; aspect-ratio: 560/285; max-width: 1100px; margin: 0 auto; }

#next-generation .quickmenu{position:absolute;}
#next-generation .quickmenu .share_pop{position: absolute; left:calc(-45vw - 9vw); top: -100%;}

.sec4{background:#fff; padding-top:85px}
.sec4 .quickmenu{display:none;}

@media screen and (max-width: 768px){
 .mo { display: block; }
 .contents { padding: 8.5vh 6.65vw 5vh; flex-direction: column; align-items: flex-start; }
 .sec1 .cate { top: 11vh; font-size: min(max(5vw, 20px), 24px); gap: min(max(2vw, 8px), 17px); }
 .sec1 .cate:before { width: min(max(2vw, 8px), 14px); }
 .sec1 .text h3 { font-size: min(max(5.5vw, 20px), 32px); margin-bottom: min(max(3vw, 10px), 40px); }
 .sec1 .text h1 { font-size: min(11vw, 94px); }
 .sec1 .text p { font-size: min(3.4vw, 26px); margin-top: min(2.5vw, 10px), 20px); line-height: 1.5; }
 @keyframes breath {
 from { transform: translate(-50%, 0); }
 to { transform: translate(-50%, 12px); }
 }
 .sec1 .mo { position: absolute; left: 50%; bottom: 8vh; transform: translate(-50%, 0); width: min(max(11vw, 40px), 60px); height: auto; aspect-ratio: 86/45; background: url('../../../../ko/img/products/next-generation/ico_arrowDown_w.png') center / 100% auto no-repeat; animation-duration: 1.2s; animation-name: breath; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); }

 .sec2 { box-sizing: border-box; }
 .sec2 .contents { justify-content: flex-start; overflow-x: hidden; padding: 85px 3.65vw 5vh 6.65vw; }
 .sec2 .title { position: relative; left: unset; top: unset; flex-direction: column; align-items: flex-start; }
 .sec2 .title h3 { font-size: min(max(5vw, 18px), 35px); }
 .sec2 .title .wr { gap: min(2vw, 8px), 15px); }
 .sec2 .title .wr .brace { width: min(max(2.5vw, 10px), 17px); }
 .sec2 .title .wr p { font-size: min(max(5.5vw, 20px), 40px); }

 .sec2 .twrap { gap: 4vh; padding-right: 3vw; margin-top: 4.5vh; padding-bottom: 2vh; }
 .sec2 .twrap .ans { display: block; }
 .sec2 .twrap .ans .tit span { font-size: min(max(3.5vw, 15px), 20px); }
 .sec2 .twrap .ans .tit p { font-size: min(max(5.4vw, 22px), 36px); margin-top: 5px; }
 .sec2 .twrap .desc { width: 100%; margin-top: min(max(2vh, 15px), 40px); gap: min(max(4vw, 15px), 28px); }
 .sec2 .twrap .desc .bar { width: 1px; }
 .sec2 .twrap .desc .wr { display: flex; flex-direction: column; gap: min(max(3vw, 12px), 20px); }
 .sec2 .twrap .desc .wr .text { font-size: min(max(3.4vw, 14px), 25px); }
 .sec2 .twrap .desc .wr .text.or { font-size: min(max(3vw, 13px), 18px); }

 .contents.youtube { padding-top: 8.5vh; justify-content: center; gap: 0; }
 .contents.youtube iframe { margin: auto; }
 .contents.youtube .quick-links { display: flex; flex-direction: column; }
 .contents.youtube .quick-links a { width: 100%; }
 .contents.youtube .quick-links a .btn-link h4 { font-size: min(max(6vw, 20px), 48.4px); }
 .contents.youtube .quick-links a .btn-link .arrow i { width: min(8vw, 48px); }
 
  .sec4{padding-top:0}
}