@font-face {
    font-family: 'Pretendard';
    src: url('../font/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 100 900; 
    font-style: normal;
    font-display: swap;
    /* 영문/숫자 특정 비율 조절 */
    size-adjust: 110%; 
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* 한글 범위 등을 포함하거나 아예 비워둠 */
}

body {overflow-x: hidden; font-size: 18px; scroll-behavior: smooth;}


h1 {font-size: 64px; font-weight: 600;}
h2 {font-size: 58px; font-weight: 600;}
h3 {font-size: 52px; font-weight: 600; line-height: normal;}
h4 {font-size: 32px; font-weight: 600; line-height: 1.2em;}
h5 {font-size: 28px; font-weight: 600;}
h6 {font-size: 22px; font-weight: 400; line-height: 1.4em}
p {font-size: 20px; line-height: 1.4em;}
h3.title {font-size: 48px;}

.bold {font-weight: 700;}

.py-100 {padding: 100px 0;}
.m-r-auto {margin-right: auto;} 
.in-y-center {display: flex; justify-content: center; flex-direction: column;}

.black {color: #000;}
.gray {color: #595959;}
.blue {color: #0088FF;}
.light-blue {color: #627FAD;}
.green {color: #009E87;}
.orange {color: #FD7700;}

.gray-bg {background-color: #595959;}
.blue-bg {background-color: #0088FF;}
.green-bg {background-color: #009E87;}
.orange-bg {background-color: #FD7700;}

.content {display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Pretendard', sans-serif; font-size: 20px; color: #3A3A3A; word-break: keep-all;}
section {width: 100%; margin: auto;}
section:nth-child(n+2) {margin: 87px auto;}

.box-w-xlg {max-width: 1820px;}
.box-w-lg {max-width: 1780px;}
.box-w-m {max-width: 1640px;}
.box-w-s {max-width: 1540px;}
.box-w-xs {max-width: 1400px;}

.radius-lg {border-radius: 36px;}
.radius-m {border-radius: 26px;}
.radius-s {border-radius: 16px;}

/* loding */
.loading {position: fixed; width: 100vw; height: 100vh; background-color: #fff; z-index: 100; top: 0;}
.loading > div {position: relative; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 40px)); width: fit-content;}
.loading > div::before {content: ""; position: absolute; left: -120px; width: 100%; height: 100%; z-index: -1; background-color: #fff;}
.loading > div img {height: 40px;}
.loading > div img:first-child {transform: translateX(70px); animation: loding1 0.6s both; animation-delay: 0.9s;}
.loading > div img:last-child {transform: translateX(-130px); opacity: 0; z-index: -2; position: relative; animation: loding2 1s both; animation-delay: 1s;}

@keyframes loding1 {
    0% {transform: translateX(70px);}
    100% {transform: translateX(0);}
}

@keyframes loding2 {
    0% {transform: translateX(-130px); opacity: 0;}
    60% {transform: translateX(0); opacity: 1;}
    100% {transform: translateX(0); opacity: 1;}
}

/* tab 공통 css */
.tab-group {position: relative;}
.nav.nav-pills {width: fit-content; flex-wrap: nowrap; background-color: #f4f4f4;  padding: 8px; border-radius: 80px; position: relative; z-index: 1;}
.nav.nav-pills .nav-item {width: fit-content;}
.nav .nav-link {font-size: 18px; border-radius: 50px; padding: 16px 24px; color: #595959;}
.tab-content > .tab-pane {padding: 55px 0;}
.tab-content > .tab-pane .tab-box {display: flex; align-items: center; justify-content: space-between; gap: 40px;}

.tab-content > .tab-pane .tab-box .tab-header div {padding-top: 30px; width: 480px; display: inline-flex; flex-direction: column;}
.tab-content > .tab-pane .tab-box .tab-header div p {display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 12px; margin: 8px 0; text-align: left; font-size: 26px; word-break: keep-all;}
.tab-content > .tab-pane .tab-box .tab-header div p::before {content: ""; display: block; width: 26px; height: 26px; background-image: url(../img/check-circle-fill.svg); background-size: contain; background-repeat: no-repeat;}

.tab-content > .tab-pane .tab-box .tab-img {max-width: 1240px; max-height: 580px; overflow: hidden; display: inline-flex; align-items: center;}

.main-btn {position: relative; padding: 8px 24px 8px 16px; background-color: #252525; border: 1px solid #252525; color: #fff; display: flex; align-items: baseline; gap: 12px; font-size: 22px;}
.main-btn::after {content: ""; display: inline-flex; width: 18px; height: 2px; background-color: #fff; margin: auto; border-radius: 3px;}
.main-btn::before {content: ""; position: absolute; width: 12px; height: 12px; background-color: #fff; border-radius: 50%; right: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s ease-in-out;}
.main-btn:hover::before {right: 12px;}

.header {position: fixed; z-index: 99; box-sizing: border-box; top: 0; left: 0; right: 0; width: auto !important; height: 87px; color: #fff; font-size: 16px; background: linear-gradient(180deg, #010d24 0, transparent); transition: 0.3s;}
.header > div {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; margin: auto; padding: 0 20px;}
.header .logo {max-width: 240px; width: 100%; transform: scale(1); position: relative; left: 0; transition: 0.4s cubic-bezier(.87,-0.03,.04,1.06);}
.header .menu-list {display: inline-flex; gap: 55px; height: 100%; width: 100%; padding-left: 55px; justify-content: flex-end; align-content: center;} 
.header .menu-list a {display: inline-flex; align-items: center; position: relative; transition: 0.2s; font-weight: 600; white-space: nowrap;}
.header .menu-list a:not(.active) {opacity: .5; font-weight: 400;}
.header .menu-list a:not(.active):hover {opacity: 1;}

.header .menu-list > p,
.header .close-but,
.header .menu-but {display: none;}
.header .menu-but {border-radius: 30px; padding: 12px 0;}
.header .menu-but img {width: 38px; height: 38px;}
.header .close-but {width: calc(100% - 230px - 17.5px); position: absolute; right: 0; display: none;}
.header .close-but span {position: absolute; display: block; right: 0; width: 35px; height: 4px; border-radius: 6px; background-color: #fffF; transform: rotate(45deg) translate(-50%, 17.5px);}
.header .close-but span:last-child {transform: rotate(-45deg) translate(-50%, -17.5px);}

.header .language {position: relative; margin-left: 55px;}
.header .language .lang-check {color: #fff; padding: 0; display: flex; gap: 10px;}
.header .language .lang-check::after {content: ""; display: block; width: 18px; height: 18px; background-image: url(../img/globe_w.svg); background-size: cover; background-repeat: no-repeat;}
.header .language ul {position: absolute; right: 0; display: none; margin-top: 10px; color: #252525; background-color: #fff; width: fit-content; padding: 5px 8px; border-radius: 6px; border: 1px solid #252525;}
.header .language ul li {margin: 5px 0;}
.header .language ul li a {padding: 8px 15px; border-radius: 16px; display: flex; gap: 5px; align-items: center; color: #898989;}
.header .language ul li a::after {content: ""; display: block; width: 14px; height: 14px; margin-top: 2px; background-image: url(../img/globe.svg); background-size: cover; background-repeat: no-repeat; opacity: 0;}
.header .language ul li.on a::after {opacity: 0.4; animation: language 1s infinite;}
.header .language ul li.on a,
.header .language ul li a:hover {background-color: #f5f5f5;}
.header .language ul li.on a {color: #252525;}
.header .language ul li a:hover::after {opacity: 0.3; transition: 0.4s;}

@keyframes language {
    0% {opacity: 0;}
    40% {opacity: 0.4;}
    60% {opacity: 0.4;}
    100% {opacity: 0;}
}

.header.on {background: #fff; transition: 0.3s;}
.header.on .logo {filter: unset;}
.header.on .menu-but img {filter: brightness(0.25);}
.header.on .menu-list a {color: #252525;}
.header.on .close-but img {filter: brightness(0.3);}
.header.on .close-but span {background-color: #3A3A3A;}
.header.on .language .lang-check {color: #252525;}
.header.on .language .lang-check::after {background-image: url(../img/globe.svg);}

#home.main-banner {width: 100vw; margin: 0 auto; height: fit-content; overflow: hidden; display: block; padding-top: 0;}
.main-banner .banner {height: 100vh; height: 100dvh; transition: 0.4s;}
.main-banner .banner .swiper-pagination {padding: 18px 0; top: unset; bottom: 0; border-top: 1px solid #fff}
.main-banner .banner .swiper-pagination-bullet {width: 140px; height: 40px; border-radius: 0; position: relative; background-color: unset; opacity: .6;}
.main-banner .banner .swiper-pagination-bullet:hover,
.main-banner .banner .swiper-pagination-bullet-active { opacity: 1; transition: 0.3s;}
.main-banner .banner .swiper-pagination-bullet::before {content: "safety"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; display: inline-flex; align-items: center; justify-content: center;text-transform: uppercase;}
.main-banner .banner .swiper-pagination-bullet:nth-child(2):before {content: "specialist";}
.main-banner .banner .swiper-pagination-bullet:nth-child(3):before {content: "EXPERTISE";}
.main-banner .banner .swiper-pagination-bullet::after {content: ""; position: absolute; top: -18px; left: 0; width: 100%; height: 0; background-color: #fff; border-radius: 0 0 10px 10px;}
.main-banner .banner .swiper-pagination-bullet-active::after {height: 3px; transition: 0.3s;}
.main-banner .swiper-button-next,
.main-banner .swiper-button-prev {top: unset !important; bottom: 18px; z-index: 11; padding: 8px; color: #fff0; background-image: url(../img/arrow-line.svg); background-repeat: no-repeat; background-position: center; background-size: calc(100% - 8px); filter: brightness(10); opacity: 0.6;}
.main-banner .swiper-button-next:hover,
.main-banner .swiper-button-prev:hover {opacity: 1; transition: 0.3s;}
.main-banner .swiper-button-next {left: calc(100% - 140px * 3 + 30px) !important;}
.main-banner .swiper-button-prev {transform: rotate(-180deg); right: calc(100% - 140px * 3 + 30px) !important; left: unset !important;}

.main-banner .banner .swiper-slide {align-items: center; justify-content: center; display: flex;}
.main-banner .banner .swiper-slide > img {filter: brightness(0.65); width: 100%; height: 100%; object-position: center; object-fit: cover;}
.main-banner .banner .swiper-slide .item {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-shadow: 4px 5px 5px #0000008c; text-align: center; display: flex; flex-direction: column; gap: 2vw;}
.main-banner .banner .swiper-slide .item h1 {display: flex; justify-content: center; align-items: baseline; gap: 0 15px; font-size: 64px; transform: translateY(50px); opacity: 0;}
.main-banner .banner .swiper-slide .item h1::after,
.main-banner .banner .swiper-slide .item h1::before {content: '"'; font-size: 1em; font-weight: 600; display: block;}
.main-banner .banner .swiper-slide .item h4 {font-size: 32px; transform: translateY(50px); opacity: 0; transition: 0.3s; word-break: keep-all;}

.main-banner .banner .swiper-slide-active .item h4,
.main-banner .banner .swiper-slide-active .item h1 {transform: none; opacity: 1; transition: 0.3s; transition-delay: 0.4s;}
.main-banner .banner .swiper-slide-active .item h4 {transition-delay: 0.6s;}

#company {display: flex; align-items: center; flex-direction: column;}
#company > div:nth-child(1) {display: flex; align-items: center; position: relative; gap: 40px; padding: 0 20px 87px;}
#company > div:nth-child(1) > div:nth-child(1) {padding-left: 50px; word-break: keep-all;}
#company > div .title h6 {padding: 10px 0 45px 0;}
#company > div .title h1 span {font-size: inherit;}
#company > div .text {display: inline-flex; flex-direction: column; gap: 15px;}

#company .ribbon-banner {width: 100%; height: 215px; color: #fff;}
#company .ribbon-banner .title {padding: 0 0 0 90px; white-space: nowrap; background-color: #10274A; position: relative; z-index: 6;}
#company .ribbon-banner .title p {font-size: 42px; font-weight: 700; margin: 0;}
#company .ribbon-banner .title > span {font-size: 18px; color: #D9D9D9; padding-top: 10px; display: block;}
#company .ribbon-banner .swiper-set {position: relative; width: 100%; height: 100%; z-index: 5;}

body.en #company .ribbon-banner .title {white-space: normal; flex-shrink: 0.2;}
body.en #company .ribbon-banner .title p {line-height: 1;}

#company .ribbon-banner,
#company .ribbon-banner > div {display: flex; align-items: center; justify-content: center; background-color: #10274A; position: relative;}
#company .ribbon-banner > div {width: 100%; height: 100%;}
#company .ribbon-banner .ribbon {width: 100%; height: 100%; display: flex; align-items: center; position: relative; z-index: 1; text-align: center;}
#company .ribbon-banner .ribbon,
#company .ribbon-banner .ribbon-child {max-width: calc(100% - 60px);}
#company .ribbon-banner .ribbon-child {position: absolute; width: 100%; height: calc(100% + 20px); top: -10px; right: 30px; z-index: 0;}
#company .ribbon-banner .ribbon-child .move {width: calc(100% - 100px); height: 100%; display: block; border-radius: 8px; background: linear-gradient(#0088FF 20%, #006DCC 80%); transform: skewX(-18deg); position: relative; left: -5px; z-index: -1;}
#company .ribbon-child:has(.swiper-slide:hover) .move {animation: none; transition: left 0.4s ease;}
#company .ribbon-banner .ribbon-child .swiper-slide,
#company .ribbon-banner .ribbon .swiper-slide {width: calc(100% / 3) !important; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: default;}
#company .ribbon-banner .ribbon div > p {font-size: 24px; font-weight: 600; margin: 0; padding:0; position: relative;display:flex;flex-direction:row;align-items: center;justify-content: space-between;gap:20px}
#company .ribbon-banner .ribbon div > p::before,
#company .ribbon-banner .ribbon div > p:after {content: ""; width: 2px; height: 18px;background-color: #fff; transform: skewX(-18deg) translateY(0%);}
#company .ribbon-banner .ribbon div > span {font-size: 18px; font-weight: 200; display: block; padding-top: 12px; line-height: 1.25em;}

body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 35px;}
body.en #company .ribbon-banner .ribbon .swiper-slide > * {width: fit-content; align-content: center;}
body.en #company .ribbon-banner .ribbon .swiper-slide > p {min-height: 68px;}
body.en #company .ribbon-banner .ribbon .swiper-slide > span {white-space: nowrap; margin-left: -12px;}

#company .ribbon-banner .ribbon-child:has(.swiper-slide[data-swiper-slide-index=3]:hover) .swiper-slide[data-swiper-slide-index=0] .move {opacity: 0;} 

#company .skew-l,
#company .skew-r {position: absolute; width: 95px; height: calc(100% + 20px); background-color: #53719e; background: linear-gradient(180deg,#ffffff 10px, #10274A 10px,  #10274A 50%, #10274A 225px, #00163f 225px); bottom: -10px; right: -20px; transform: skew(-18deg); z-index: 5;}
#company .skew-l {left: 485px; background: linear-gradient(180deg,#ffffff 10px, #10274A 10px,  #10274A 50%, #10274A 225px, #00163b 225px);}

body.en #company .skew-l {left: 575px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 50%, #10274A 225px, #011d45 225px);}

#company .mission {background-image: url(../img/mission1920_1970.jpg); background-repeat: no-repeat; background-size: cover; background-position-y: bottom; background-position-x: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; height: 100vh; height: 100dvh; width: 100%; text-align: center; margin: auto; color: #fff;}
#company .mission h3 {font-weight: 400; line-height: 1.4; max-width: 1160px; word-break: keep-all;}
#company .mission h3 span {font-size: inherit;}
#company .mission h5 {color: #A8D7FF; font-weight: 800;}

#business {height: auto;}
#business h3 {text-align: center; padding: 87px 0 0;}
#business .swiper.plaza {max-width: 1920px;}
#business .swiper.plaza .swiper-button-group,
#business .swiper.plaza .swiper-slide {width: calc(100% / 2.5 - 15px); opacity: 0.8; transition: 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
#business .swiper.plaza .swiper-slide .card-front > img {filter: blur(3px);}
#business .swiper.plaza .swiper-slide h5 {font-size: 28px; font-weight: 500; text-align: center; padding: 0.85em 0; opacity: 0.4;}
#business .swiper.plaza .swiper-slide-active,
#business .swiper.plaza .swiper-slide-active h5 {opacity: 1; transition: 0.3s; transition: 3s cubic-bezier(0.165, 0.84, 0.44, 1);}
#business .swiper.plaza .swiper-slide-active .card-front > img {filter: blur(0); transition: 0.3s}

#business .swiper.plaza .swiper-button-group {position: absolute; display: flex; height: 52px; top: -26px; left: 50%; transform: translate(-50%, 36px); z-index: 3; }
#business .swiper.plaza .swiper-button-next, 
#business .swiper.plaza .swiper-button-prev {display: block; pointer-events: auto; cursor: pointer; width: 52px; height: 52px; color: #fff0; background: url(../img/arrow-line.svg) no-repeat; background-size: 90% auto; background-position: center; opacity: 0.4;}
#business .swiper.plaza .swiper-button-next:hover, 
#business .swiper.plaza .swiper-button-prev:hover {opacity: 1; transition: 0.3s;}
#business .swiper.plaza .swiper-button-prev {transform: rotate(-180deg);}
#business .swiper.plaza .swiper-button-next::after,
#business .swiper.plaza .swiper-button-prev::after {display: none;}

#business .card {display: inline-grid; height: 580px; max-height: calc(100vh - 285px); transition: transform 0.3s; transform: perspective(800px) rotateY(0deg); transform-style: preserve-3d; border: none;}
#business .card.on {transform: perspective(600px) rotateY(180deg);}

#business .card > * {grid-area: 1 / 1 / 1 / 1; border-radius: 16px; overflow: hidden; backface-visibility: hidden; font-size: 2rem; position: relative;}
#business .card .card-front {display: flex; justify-content: center; align-items: center;}
#business .card .card-back {background-color: #fff; border: 1px solid #C8C9CA; transform: rotateY(180deg); color: #212529; text-align: center;}

#business .card .card-front {visibility: visible;}
#business .card.on .card-front {transition-delay: 0.3s; visibility: hidden;}
#business .card .card-front img {height: auto; width: auto; display: flex; align-items: center; justify-content: center;}
#business .card.hover .card-front > img {filter: blur(5px);}
#business .card .card-front > div::before {content: ""; position: absolute; z-index: 1; width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background-color: #0000007a;}
#business .card.hover .card-front > div::before {width: 100%; height: 100%; transition: 0.3s;}
#business .card .card-front > div .rotation {position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
#business .card .card-front > div .rotation img {width: 100%;}
#business .card.hover .card-front > div .rotation {z-index: 3; opacity: 1; transition: 0.6s;}

#business .card .card-back .back {padding: 60px 0 90px;}
#business .card .card-back > div {max-width: 600px; width: 100%; padding: 0 20px; margin: auto;}
#business .card .card-back p {display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 10px; margin: 20px 0; text-align: left; font-size: 26px; line-height: 28px; word-break: keep-all;}
#business .card .card-back p::before {content: ""; display: block; width: 28px; height: 28px; background-image: url(../img/check2-square.svg); background-size: contain;}

body.en #business .card .card-back > div {max-width: unset;}

#nsplaza .tab-shop {margin: auto; padding-top: 87px;}
#nsplaza .tab-shop div:has(h3) {display: flex; flex-direction: column; align-items: start; gap: 11px; padding: 0 20px;}
#nsplaza .tab-shop div:has(h3) h6 {word-break: keep-all;}
#nsplaza .tab-shop .tab-group {padding: 68px 20px 50px;}
#nsplaza .tab-shop .tab-group .swiper-scrollbar {background: #60a5fa3d; height: 2px; width: calc(100% - 45px); margin: auto; left: 50%; transform: translateX(-50%);}
#nsplaza .tab-shop .tab-group .swiper-scrollbar-drag {background: #60a5fa;}
#nsplaza .tab-shop .nav.nav-pills {background-color: unset; padding: 8px 0; gap: 8px;}
#nsplaza .tab-shop .nav-pills .nav-link {background-color: #f5f5f5; padding: 14px 24px;}
#nsplaza .tab-shop .nav-pills .nav-link.active {background-color: #0088FF;}
#nsplaza .tab-shop .tab-content {position: relative; min-height: 520px;}
#nsplaza .tab-shop .tab-content::before {content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 460px; background-color: #F5F5F5; z-index: -1;}
#nsplaza .tab-shop .tab-content > .tab-pane {position: absolute; width: 100%; padding: 100px 20px; display: block !important; opacity: 0;}
#nsplaza .tab-shop .tab-content > .tab-pane .tab-box {align-items: flex-start; width: calc(100% + 190px); gap: 40px;}
#nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div {gap: 15px; padding-top: 25px; width: unset;}
#nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {width: fit-content; align-items: center; font-size: 22px; margin: 0; padding: 14px 24px; border-radius: 50px; border: 1px solid #60A5FA;}
#nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-height: 440px; max-width: 960px; border-radius: 6px;}

/* tab 전환 에니메이션 설정 */
#nsplaza .tab-shop .tab-content > .tab-pane.active {opacity: 1;}

#nsplaza .tab-shop .tab-content > .tab-pane .tab-header h4 {transform: translateY(-50px); opacity: 0;}
#nsplaza .tab-shop .tab-content > .tab-pane.active .tab-header h4 {transform: translateY(0); opacity: 1; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.3s;}

#nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p  {transform: translateY(-50px); opacity: 0; white-space: nowrap;}
#nsplaza .tab-shop .tab-content > .tab-pane.active .tab-box .tab-header div p {transform: translateY(0); opacity: 1; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.4s;}
#nsplaza .tab-shop .tab-content > .tab-pane.active .tab-box .tab-header div p:nth-child(2) {transition-delay: 0.5s;}
#nsplaza .tab-shop .tab-content > .tab-pane.active .tab-box .tab-header div p:nth-child(3) {transition-delay: 0.6s;}

#nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {transform: translateX(100%); opacity: 0;}
#nsplaza .tab-shop .tab-content > .tab-pane.active .tab-box .tab-img {transform: translateX(0); opacity: 1; transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.4s;}

#technology {text-align: center; padding: 100px 0 0;}
#technology div:has(.list) {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 20px 0; margin: auto;}
#technology .list {padding: 40px; display: flex; flex-direction: column; align-items: center;}
#technology .list:nth-child(6) {padding: 30px 80px;}
#technology .list h6 {padding: 28px 0 15px;}
#technology .list span {line-height: 1.4em; word-break: keep-all;}
#technology .list img {max-width: 54px;}
#technology .list:hover img {animation: jello-vertical 0.6s 1;}

@keyframes jello-vertical {
    0% {transform: scale3d(1, 1, 1);}
    30% {transform: scale3d(0.75, 1.25, 1);}
    40% {transform: scale3d(1.25, 0.75, 1);}
    50% {transform: scale3d(0.85, 1.15, 1);}
    65% {transform: scale3d(1.05, 0.95, 1);}
    75% {transform: scale3d(0.95, 1.05, 1);}
    100% {transform: scale3d(1, 1, 1);}
}
#contact {overflow-x: hidden; margin: 0 auto 160px; display: flex;}
#contact > div {}
#contact .map-wrapper {max-width: 780px; width: 100%; padding-left: 20px;}
#contact .map-wrapper iframe {width: 100% !important; height: 480px; max-height: calc(100dvh - 485px); max-height: calc(100vh - 485px); object-fit: cover;}
#contact .info-text {padding: calc(50vh - 180px) 0 80px 100px; display: inline-flex; flex-direction: column; justify-content: flex-end; position: relative;}
#contact .info-text::before {content: ""; position: absolute; width: 1578px; height: 440px; max-height: calc(100dvh - 450px); max-height: calc(100vh - 450px); background-color: #f5f5f5; right: 0; left: auto; z-index: -1; bottom:0}
#contact .info-text h3 {padding-bottom: 20px;}
#contact .info-text .info-item {min-height: 68px; border-bottom: 1px solid #C8C9CA; line-height: 1.4em; display: flex; align-items: center; gap: 15px; padding: 10px 5vw 10px 0; max-width: calc(100% - 26px - 15px);}
#contact .info-text button::before,
#contact .info-text .info-item::before {content: ""; flex-shrink: 0; display: inline-block; width: 26px; height: 26px; background-image: url(../img/geo-alt-fill.svg); background-size: contain; background-repeat: no-repeat;}
#contact .info-text .info-item:nth-child(3)::before {background-image: url(../img/geo-phon-fill.svg);}
#contact .info-text .info-item:nth-child(4)::before {background-image: url(../img/geo-email-fill.svg);}
#contact .info-text button::before {background-image: url(../img/arrow-line.svg); width: 16px; height: 16px; opacity: .5; margin-top: 2px;}
#contact .info-text button {width: fit-content; font-size: 15px; font-weight: 400; color: #a9a9a9; padding: 15px 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;}

.tab-group.terms-and-conditions {display: flex; justify-content: center; padding: 0 20px;}

.tab-content.terms-and-conditions {background-color: #f5f5f5; margin: 20px; border-radius: 26px;}
.tab-content.terms-and-conditions > .tab-pane {padding: 0;}
.tab-content.terms-and-conditions > .tab-pane .tab-box {padding: 0 20px;}
.tab-content.terms-and-conditions > .tab-pane .tab-box .tab-header {max-height: calc(100vh - 250px); align-items: flex-start; overflow: auto; padding: 30px 10px;}
.tab-content.terms-and-conditions > .tab-pane .tab-box .tab-header div {width: 100%;}
.tab-content.terms-and-conditions > .tab-pane .tab-box .tab-header div p {font-size: 14px; line-height: 1.5; width: 100%; display: block; color: #595959; word-break: keep-all;}
.tab-content.terms-and-conditions > .tab-pane .tab-box .tab-header div p::before {display: none;}

/* 이용약관 */
body:has(#terms-tab) footer .footer .left .menu-list a span,
body:has(#terms-tab) .header .menu-list a span {display: none; font-size: inherit;}
body:has(#terms-tab) .header:has(.lang-item.en.on) .menu-list a span.en,
body:has(#terms-tab) .header:has(.lang-item.ko.on) .menu-list a span.ko,
body.en:has(#terms-tab) footer .footer .left .menu-list a span.en,
body.ko:has(#terms-tab) footer .footer .left .menu-list a span.ko {display: block;}
#terms-tab {height: auto; overflow-x: hidden; margin: 0 auto;}
#terms-tab .tab-terms {padding: 0 20px; margin: 87px auto;}
#terms-tab .tab-terms .nav.nav-pills {background-color: #ffffff; padding: 0;}
#terms-tab .tab-terms .nav .nav-link {border-radius: 6px 6px 0 0; transition: unset;}
#terms-tab .tab-terms .nav .nav-link p {display: none; font-size: inherit;}
#terms-tab .tab-terms .nav .nav-link p.show {display: block;}
#terms-tab .tab-terms .nav-pills .nav-link.active, 
#terms-tab .tab-terms .nav-pills .show > .nav-link {background-color: #0088FF; position: relative; transition: unset;}
#terms-tab .tab-terms .tab-content {background-color: #F4F4F4; color: #616161; padding: 30px 10px 30px 30px; border-radius: 26px; position: relative;}
#terms-tab .tab-terms .tab-content::before {content: ""; width: 30px; height: 30px; position: absolute; background-color: #0088FF00; left: 0; top: 0; z-index: -1;}
#terms-tab:has(#privacy.active) .tab-terms .tab-content::before {background-color: #0088FF;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box {max-height: calc(100vh - 300px); overflow: auto; align-items: flex-start;}
#terms-tab .tab-terms .tab-content > .tab-pane {padding: 0; height: auto; box-sizing: border-box;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header {display: none; width: 100%; overflow-x: hidden;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header.show {display: block;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header p {font-size: 13px; word-break: keep-all;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header p.title {font-size: 38px; font-weight: 600;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header p span {font-size: inherit;}
#terms-tab .tab-terms .tab-content > .tab-pane .tab-box::-webkit-scrollbar-thumb {background-color: #d9d9d9;}

footer {background-color: #10274A; width: 100%;}
footer .footer {display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 60px 20px; margin: auto;}
footer .footer .logo {max-height: 45px; width: fit-content; filter: grayscale(1) brightness(10); opacity: 0.38;}
footer .footer .left {display: flex; justify-content: space-between;}
footer .footer .left .menu-list {display: inline-flex; align-items: flex-end; gap: 45px;}

footer .footer .right div:first-child > *:not(.light-blue),
footer .footer .left .menu-list a:nth-child(n+2) {color: #fff; opacity: 0.38; font-weight: 300;}

footer .footer .right {padding-top: 40px;}
footer .footer .right div {display: flex;}
footer .footer .right div:first-child {flex-direction: column; gap: 10px;}
footer .footer .right div:first-child p {font-size: 24px;}
footer .footer .right div:first-child > *:not(p) {font-size: 18px;}

footer .footer .right div:last-child {padding: 12px 0;}
footer .footer .right div:last-child > * {border-right: 1px solid #627FAD; font-size: 14px; padding-right: 20px;}
footer .footer .right div:last-child > *:last-child {border-right: none;}
footer .footer .right div:last-child > *:nth-child(n+2) {padding-left: 20px;}

.banner-m {display: none;}
.banner-1080-none {display: block;}

@media screen and (min-width: 1920px) {
    #business .swiper.plaza .swiper-button-group {width: calc(100% / 3 - 20px);}
}

@media screen and (max-width: 1740px) {
    body.en #company .ribbon-banner .title {padding: 0 0 0 60px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 55px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: 0.85em;}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: 2.15em;}
    body.en #company .skew-l {left: 555px;}
}

@media screen and (max-width: 1640px) {
    body.en #company .ribbon-banner .title {padding: 0 0 0 60px; flex-shrink: 0;}
    body.en #company .ribbon-banner .title > p {font-size: 38px;}
    body.en #company .ribbon-banner .title > span {font-size: 14px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 55px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 15px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 22px; min-height: 60px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: calc(100% - 205px);}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: calc(100% - 180px);}
    body.en #company .ribbon-banner .ribbon-child .move {width: calc(100% - 80px);}

    body.en #company .skew-l {left: 485px;}
    body.en #company .skew-r {right: -30px;}

    #company > div:nth-child(1) {padding: 0 20px 87px;}

    body.en #business .swiper.plaza .swiper-button-group {height: 42px; top: -18px;}
    body.en #business .swiper.plaza .swiper-button-next, 
    body.en #business .swiper.plaza .swiper-button-prev {width: 42px; height: 42px;}
    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 26px;}

    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {width: calc(100% + 160px);}
    
    #contact .info-text::before {width: 1340px;}
    #contact .info-text .info-item {padding-right: 0;}
}

@media screen and (max-width: 1540px) {
    h1 {font-size: 56px;}
    h2 {font-size: 48px;}
    h3 {font-size: 45px;}
    h4 {font-size: 28px;}
    span {font-size: 16px;}

    body.en #company .ribbon-banner .title {padding: 0 0 0 20px;}

    body.en #company .skew-l {left: 455px;}
    body.en #company .skew-r {right: -20px;}

    #company .mission h3 {max-width: 1020px;}

    #business .card .card-back p::before {margin-top: 1px;}
    #business .card .card-back > div {max-width: 510px;}
    #business .card .card-back p {font-size: 22px; line-height: 26px;}

    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {width: calc(100% + 90px);}
}

@media screen and (max-width:1480px) {
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {margin-left: -26px;}
    body.en #company .ribbon-banner .swiper-set,
    body.en #company .ribbon-banner .ribbon-child {padding-left: 40px;}
    body.en #company .ribbon-banner .ribbon-child .move {width: calc(100% - 30px); left: -5px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: calc(100% - 160px); bottom: -2px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: calc(100% - 190px);}
    body.en #company .skew-l {left: 420px;}
    body.en #company .skew-r {right: -80px;}

    #company .ribbon-banner .title {padding: 0 0 0 20px;}
    #company .ribbon-banner .ribbon-child,
    #company .ribbon-banner .ribbon {max-width: unset; right: 0;}
    #company .ribbon-banner .ribbon-child .swiper-slide {padding: 0 25px;}
    #company .ribbon-banner .ribbon-child .move {width: calc(100% - 30px); transform: skewX(-18deg); left: -5px;}

    #company .skew-r {right: -75px;}
    #company .skew-l {left: 360px; width: 110px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 225px, #10274A 225px, #011536 225px);}

    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 24px;}
    body.en #business .card .card-back .back {padding: 60px 0;}

    #nsplaza .tab-shop .tab-group {padding: 30px 20px 22px;}
    #nsplaza .tab-shop .tab-content > .tab-pane {padding: 45px 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {align-items: flex-start;}
    #nsplaza .tab-shop .tab-content::before {height: 370px;}

    #contact .info-text::before {width: 1160px;}
}

@media screen and (max-width:1400px) {
    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 45px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: calc(100% - 160px);}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: calc(100% - 190px);}

    #company .ribbon-banner {height: 185px;}
    #company .ribbon-banner .ribbon-child .swiper-slide {padding: 0 10px;}
    #company .ribbon-banner .ribbon div > p {font-size: 22px;}
    #company .ribbon-banner .ribbon div > span {font-size: 16px;}

    #company .ribbon-banner .ribbon-child .move {width: calc(100% - 45px); left: 0;}
    body.en #company .skew-l {left: 420px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 50%, #10274a 195px, #001435 195px);}

    #company .skew-l {background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 195px, #10274A 185px, #011536 185px);}
    #company .skew-r {right: -65px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 50%, #10274A 195px, #00163f 195px);}

    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-height: 400px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {width: 100%;}
}

@media screen and (max-width:1340px) {
    h6 {font-size: 22px;}

    #business .swiper.plaza .swiper-button-group {width: calc(100% / 1.8 - 10px);}

    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 40px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: calc(100% - 150px); bottom: -4px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: calc(100% - 175px); top: 14px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {min-height: 56px; font-size: 20px;}

    body.en #company .skew-l {left: 410px;}
    #company .skew-l {left: 345px; width: 120px;}

    #contact .map-wrapper {max-width: 700px;}
    #contact .map-wrapper iframe {height: 420px;}
    #contact .info-text {padding: calc(50vh - 210px) 0 60px 100px;}
    #contact .info-text::before {height: 400px;}
}

@media screen and (max-width:1280px) {
    #company {background-size: auto;}
    #company .ribbon-banner {height: 145px;}
    #company .ribbon-banner .title p {font-size: 34px;}
    #company .ribbon-banner .title > span {font-size: 14px;}
    #company .ribbon-banner .ribbon .swiper-slide p {font-size: 20px;}
    #company .ribbon-banner .ribbon .swiper-slide span {font-size: 16px;}

    #company .ribbon-banner .ribbon-child .swiper-slide {padding: 0 18px;}
    #company .ribbon-banner .ribbon-child .move {width: calc(100% - 40px); transform: skewX(-18deg);}

    body.en #company .ribbon-banner .swiper-set, 
    body.en #company .ribbon-banner .ribbon-child {padding-left: 20px;}
    body.en #company .ribbon-banner .title > p {font-size: 34px;}
    body.en #company .ribbon-banner .title > span {font-size: 13px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {min-height: 50px; font-size: 18px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: calc(100% - 165px);}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: calc(100% - 140px);}
    body.en #company .ribbon-banner .ribbon-child .move {left: -5px;}
    body.en #company .skew-l {left: 350px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 155px, #001435 155px, #00193d 165px);}
    body.en #company .skew-r {right: -70px;}

    #company .skew-r {right: -65px; background: linear-gradient(180deg,#fff 10px, #10274A 10px,  #10274A 50%, #10274A 155px, #00163f 155px);}
    #company .skew-l {left: 255px; background: linear-gradient(180deg, #ffffff 10px, #10274A 10px, #10274A 155px, #001435 155px, #00193d 165px);}

    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 24px;}
    body.en #business .card .card-back p {font-size: 20px;}
    body.en #business .card .card-back p::before {width: 24px; height: 24px;}

    #nsplaza .tab-shop .nav-pills .nav-link {font-size: 16px; padding: 12px 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 20px; padding: 10px 22px;}

    body.en #technology .list:nth-child(6) {padding: 30px 40px;}

    #contact .map-wrapper iframe {height: 380px;}
    #contact .info-text {padding: calc(50vh - 255px) 0 80px 50px;}

    footer .footer .left .menu-list a {font-size: 16px;}

    footer .footer .right div:first-child p {font-size: 22px;}
    footer .footer .right div:first-child > *:not(p) {font-size: 16px; line-height: 1.25em;}
}

@media screen and (max-width: 1240px) {
    h3 {font-size: 36px;}
    h4 {font-size: 26px;}
    h6 {font-size: 19.5px;}

    body.en .header .logo {max-width: 180px;}
    body.en .header .menu-list {gap: 35px;}
    body.en .header .language {margin-left: 35px;}

    .main-banner .swiper-button-prev {right: calc(100% - 100px * 3 + 30px) !important;}
    .main-banner .swiper-button-next {left: calc(100% - 100px * 3 + 30px) !important;}

    .nav .nav-link {padding: 14px 20px;}

    #company > div .title h6 {padding: 10px 0 35px 0; font-size: 17px;}
    #company > div .text p {font-size: 17px; word-break: keep-all;}

    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 40px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 18px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 14px;}

    #company .mission h3 {max-width: 840px;}
    #company .mission h5 {font-size: 24px;}

    .tab-content > .tab-pane .tab-box .tab-header div {width: 380px;}
    .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 22px; grid-template-columns: 22px 1fr;}
    .tab-content > .tab-pane .tab-box .tab-header div p::before {width: 22px; height: 22px;}

    #nsplaza .tab-shop .tab-content::before {height: 340px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {flex-shrink: 0.9;}
    
    #technology {padding: 60px 0 0;}

    #contact {margin: 0 auto 87px;}
    #contact > div {max-width: 820px !important;}
    #contact .map-wrapper iframe {height: 420px; max-width: calc(100dvw - 40px);  max-width: calc(100vw - 40px);}
    #contact .info-text { z-index: -1; padding: calc(45vh - 180px) 0 80px 50px;}
    #contact .info-text::before {width: 1040px;}
}

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

    body.en #company .ribbon-banner .ribbon-child .swiper-slide,
    body.en #company .ribbon-banner .ribbon .swiper-slide {width: 100% !important; z-index: 0;}
    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0 50px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 22px; min-height: unset;}
    body.en #company .ribbon-banner .ribbon div:last-child > p::before {left: -15px; top: 16px;}
    body.en #company .ribbon-banner .ribbon div:last-child > p:after {right: -10px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 16px; margin-left: 0;}

    body.en #company .ribbon-banner .ribbon-child .move {width: calc(100% - 30px); max-width: 480px; left: unset; transform: skewX(-18deg); position: relative;}
    body.en #company .skew-l,
    body.en #company .skew-r {display: none;}

    #company .ribbon-banner .ribbon .swiper-slide span {font-size: 14px;}

    body.en #nsplaza .tab-shop .tab-content {min-height: 380px;}
    body.en #nsplaza .tab-shop .tab-content::before {height: 100%;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {align-items: center;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {white-space: normal; align-items: flex-start; font-size: 16px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p::before {margin-top: 6px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {flex-shrink: unset; max-width: 460px;}

    body.en #technology .list {padding: 20px;}

    #contact .map-wrapper iframe {height: 385px;}
    #contact .info-text {padding: calc(45vh - 220px) 0 80px 50px; gap: 10px;}
    #contact .info-text button::before, #contact .info-text .info-item::before {width: 22px; height: 22px;}
}

@media screen and (max-width: 1080px) {
    h2 {font-size: 42px;}

    .header .logo {max-width: 200px;}

    .banner-m {display: block;}
    .banner-1080-none {display: none;}

    .main-banner .banner .swiper-slide .item {width: 65vw; gap: 35px;}
    .main-banner .banner .swiper-slide .item h1 {font-size: 62px;}
    .main-banner .banner .swiper-slide .item h4 {font-size: 32px; line-height: 1.4;}

    .main-banner .swiper-button-prev {right: calc(100% - 80px) !important;}
    .main-banner .swiper-button-next {left: calc(100% - 80px) !important;}

    #company {align-items: flex-end;}
    #company > div:nth-child(1) > div {width: 100%; max-width: unset;}
    #company > div:nth-child(1) div:nth-child(1) {flex-shrink: 0.8;}
    #company > div .title h6 {padding: 10px 0 15px 0;}

    #company .mission {gap: 1.2rem;}
    #company .mission h3 {padding: 0 20px;}

    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p::before {margin-top: 4px;}
    #nsplaza .tab-shop .tab-content::before {height: 330px;}
    #nsplaza .tab-shop .tab-content > .tab-pane {padding: 40px 20px;}
    #nsplaza .tab-shop div h6 span {display: block; height: 8px;}

    body.en #technology .list:nth-child(6) {padding: 20px 20px;}
    #technology {padding: 0 20px;}
    #technology div:has(.list) {padding: 60px 0; gap: 12px;}
    #technology .list,
    #technology .list:nth-child(4) {padding: 30px 0;}
    #technology .list:nth-child(6) {padding: 30px 30px;}

    #contact {flex-direction: column; align-items: center; gap: 20px; height: auto; margin: 0 auto 87px; overflow: hidden;}
    #contact .map-wrapper iframe {height: 480px;}
    #contact .info-text {padding: 20px 20px 87px; position: relative; transform: unset;}
    #contact .info-text::before {width: 100vw; height: 100dvh; height: 100vh; max-height: calc(100dvh - 340px); max-height: calc(100vh - 340px); transform: translate(50%, 0); right: 50%; bottom: 0;}
    #contact .info-text .info-item {max-width: unset;}
}

@media screen and (max-width: 1024px) {
    h2 {font-size: 38px;}
    h3 {font-size: 32px;}
    h4 {font-size: 24px;}

    body.en .header .logo {max-width: 140px;}
    .header .logo {max-width: 180px;}
    .header .menu-list {gap: 45px;}
    .header .language {margin-left: 45px;}

    #company .ribbon-banner .ribbon-child .swiper-slide,
    #company .ribbon-banner .ribbon .swiper-slide {width: 100% !important; z-index: 0;}

    #company .ribbon-banner .ribbon-child .move {width: 100%; max-width: 320px; left: unset; transform: skewX(-18deg); position: relative;}
    #company .skew-l,
    #company .skew-r {display: none;}

    #company .mission h3 {max-width: 820px; font-size: 36px;}

    body.en #business .swiper.plaza .swiper-button-next, 
    body.en #business .swiper.plaza .swiper-button-prev {width: 38px; height: 38px;}
    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 20px;}

    #business .card .card-front > div .rotation {opacity: 1; z-index: 3; width: 64px; height: 64px; top: unset; left: unset; bottom: 30px; right: 30px; transform: unset;}
    #business .card.hover .card-front > div::before {display: none;}
    #business .card.hover .card-front > img {filter: blur(0);}

    .nav .nav-link {font-size: 16px;}

    .tab-content > .tab-pane {padding: 35px 0;} 

    .tab-content > .tab-pane .tab-box .tab-header div {width: 300px; padding-top: 20px;}
    .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 18px; grid-template-columns: 18px 1fr; margin: 5px 0;}
    .tab-content > .tab-pane .tab-box .tab-header div p::before {width: 18px; height: 18px;}

    .tab-content > .tab-pane .tab-box .tab-img {height: 340px;}

    body.en #nsplaza .tab-shop .tab-content {min-height: 320px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: 375px;}
    #nsplaza .tab-shop .tab-content {min-height: 420px;}
    #nsplaza .tab-shop .tab-content::before {height: 320px;}
    #nsplaza .tab-shop .tab-content > .tab-pane {padding: 30px 20px;}
    #nsplaza .tab-content > .tab-pane .tab-box {gap: 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div {width: 100%;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: 50vw; height: 100%;}

    #terms-tab .tab-terms .tab-content > .tab-pane .tab-box .tab-header p.title {font-size: 28px;}

    #contact .map-wrapper {padding: 0 20px;}
}

@media screen and (max-width: 964px) {
    h3 {font-size: 28px;}
    h4 {font-size: 22px;}

    body.en .header .logo {max-width: 180px;}
    .header {border: none; height: 65px;}
    .header .menu-list > p,
    .header .close-but,
    .header .menu-but {display: block; transition:  0.6s cubic-bezier(.87,-0.03,.04,1.06);}
    .header .close-but {z-index: -1; opacity: 0; right: -280px;}
    .header .menu-but {transition-delay: 0.3s;}
    .header .menu-list {position: absolute; background-color: #f5f5f5b5; background: linear-gradient(180deg, #f5f5f5 87px, #f5f5f5b5 87px); border-left: 3px solid #fff; backdrop-filter: blur(10px); flex-direction: column; align-items: center; gap: 0; top: 0; width: 100%; max-width: calc(100% - 230px); height: 100vh;  right: -100%; padding: 90px 20px 5vw; z-index: -1; text-align: center; transition: 0.6s cubic-bezier(.87,-0.03,.04,1.06);}
    .header:not(.on) .menu-list {background: linear-gradient(180deg, #212529 87px, #2125298f 125px); border-left: 3px solid #212529;}
    .header .menu-list > * {height: calc(100% / 5); align-content: center; font-size: 22px; opacity: 0; transition: opacity 0.6s;}
    .header:has(.show) .menu-list > * {opacity: 1; transition: opacity 0.6s; transition-delay: 0.2s;}
    .header .menu-list a::after {display: none;}
    .header .menu-list a::before {content: ""; background-image: url(../img/menu_bg2.jpg); background-size: 100%; background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0;}
    .header .menu-list a:nth-child(2):before {background-image: url(../img/menu_bg3.jpg);}
    .header .menu-list a:nth-child(3):before {background-image: url(../img/menu_bg4.jpg);}
    .header .menu-list a:nth-child(4):before {background-image: url(../img/menu_bg5.jpg); background-position: center 70%;}
    .header .menu-list a:nth-child(5):before {background-image: url(../img/menu_bg6.jpg);}
    .header .menu-list a:nth-child(6):before {background-image: url(../img/menu_bg7.jpg); background-position: center 38%;}
    .header .menu-list a.active::before {opacity: 0.5;}
    .header .menu-list a {width: 100%; justify-content: center; box-shadow: #32325d00 0px 50px 100px -20px, #00000000 0px 30px 60px -30px; border-radius: 16px; overflow: hidden;}
    .header:has(.show) .logo {left: calc(100% - 230px - 50% + 30px); transform: scale(1) translateX(calc(125px + 50%));} /*left = .menu-list 넓이 - 전체넓이의 반 - .close-but의 넓이*/ /* translateX = .menu-list의 px 반 + 전체넓이의 반*/
    .header:has(.show) .close-but {z-index: 5; opacity: 1; right: 0;}
    .header:has(.show) .menu-list {right: 0; transition:  0.6s cubic-bezier(.87,-0.03,.04,1.06);}
    .header:has(.show) .menu-but {transform: translateX(120px); transition: 0.4s cubic-bezier(.87,-0.03,.04,1.06);}
    .header .menu-list > p {position: absolute; bottom: 10px; font-size: 12px; color: #8b8b8b; height: auto;}

    .header .menu-list a.active {color: #fff; font-weight: 600; text-shadow: 4px 5px 5px #0000008c; box-shadow: #32325d40 0px 50px 100px -20px, #0000004d 0px 30px 60px -30px; transition: 0.4s;}
    .header .menu-list a.active::before {opacity: 1; filter: grayscale(0.8);}
    .header .menu-list a:not(.active) {opacity: 1;}
    .header.on .menu-list > p {color: #8b8b8b;}

    body.en .header .language {margin-left: auto;}
    .header .language {margin-left: auto; margin-right: 20px; padding: 10px 20px; background-color: #f5f5f5; border-radius: 30px; transition:  0.6s cubic-bezier(.87,-0.03,.04,1.06); transition-delay: 0.3s;}
    .header .language:has(.active) {border-radius: 6px; transition: 0.4s;}
    .header .language .lang-check {color: #252525;}
    .header .language .lang-check::after {background-image: url(../img/globe.svg);}
    .header .language ul { margin-top: 20px; background-color: #f5f5f5; border: unset; width: 100px;}

    .header:has(.show) .language {transform: translateX(300px); transition:  0.6s cubic-bezier(.87,-0.03,.04,1.06);}

    .main-banner .swiper-button-next,
    .main-banner .swiper-button-prev {display: none;}

    #company > div {position: relative;}
    #company > div:nth-child(1) {flex-direction: column;}
    #company > div:nth-child(1) > div:nth-child(1) {max-width: unset; padding-left: 0;}
    #company > div .title h6 {word-break: keep-all;}
    #company > div div:has(img) {background-color: #f5f5f5; display: inline-flex;}
    #company > div div:has(img) img {max-width: 560px; margin: auto;}

    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 26px; top: -15px;}
    #business .card .card-back > div {max-width: 600px;}
    #business .swiper.plaza .swiper-button-group {width: calc(100% / 1.15 - 10px);}
    #business .card .card-front img {height: 100%;}

    .nav .nav-link {font-size: 14px; padding: 12px 18px;}

    .tab-content > .tab-pane .tab-box {flex-direction: column; gap: 22px; align-items: flex-start;}
    .tab-content > .tab-pane .tab-box .tab-header div {width: 100%;}
    .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 16px; grid-template-columns: 16px 1fr;}
    .tab-content > .tab-pane .tab-box .tab-header div p::before {width: 16px; height: 16px;}
    .tab-content > .tab-pane .tab-box .tab-img {height: 440px; align-items: flex-start;}

    #nsplaza .tab-shop .tab-content::before {height: 300px;}
    #nsplaza .tab-shop .tab-content > .tab-pane {padding: 35px 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {flex-direction: row;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {padding: 8px 18px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: calc(50vw + 20px); transform: translateX(30px);}

    body.en #technology .list, 
    body.en #technology .list:nth-child(4) {padding: 30px 20px;}
    #technology {height: fit-content;}
    #technology div:has(.list) {grid-template-columns: repeat(2, 1fr);}

    footer .footer .left {flex-wrap: wrap; gap: 40px;}
}

@media screen and (max-width: 860px) {
    h2 {font-size: 34px;}
    h5 {font-size: 24px;}

    body.en #company .ribbon-banner .title > p {font-size: 30px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide {padding: 0;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 20px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 14px;}
    body.en #company .ribbon-banner .ribbon-child .move {width: 100%;}

    #company .mission h5 {font-size: 20px;}
    #company .mission h3 {max-width: 760px; font-size: 32px;}

    body.en #business .swiper.plaza .swiper-button-group {display: none;}
    body.en #business .card {height: 580px;}
    #business .card {height: 480px;}
    #business .swiper.plaza .swiper-slide h5 {font-size: 26px;}
    #business .card .card-back .back {padding: 60px 0;}
    #business .card .card-back p {font-size: 20px; gap: 5px;}
    #business .card .card-back p::before {width: 24px; height: 24px;}

    body.en #nsplaza .tab-shop .tab-content {min-height: 620px;}
    body.en #nsplaza .tab-shop .tab-group {padding: 5px 20px 10px; margin-top: 30px; background-color: #fff;}
    body.en #nsplaza .tab-shop .tab-content {min-height: 520px;}
    body.en #nsplaza .tab-shop .tab-content::before {display: none;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane {padding: 20px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {flex-direction: column-reverse; gap: 25px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header {margin: auto;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div {flex-direction: row; flex-wrap: wrap;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header h4 {text-align: left; font-size: 28px;}
    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: 100%; transform: none; max-height: 320px; margin-right: 0;}

    #nsplaza .tab-shop .tab-content::before {height: 280px;}
    #nsplaza .tab-shop div h6 {font-size: 17px;}
    #nsplaza .tab-shop .nav-pills .nav-link {font-size: 15px; padding: 10px 18px;}
    #nsplaza .tab-content > .tab-pane .tab-box {gap: 0;}
    #nsplaza .tab-content > .tab-pane {padding: 65px 0;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 16px; gap: 6px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: calc(50vw + 50px); align-items: center; margin-right: -30px;}
}

@media screen and (max-width: 768px) {
    h1 {font-size: 48px;}
    h3 {font-size: 24px;}
    h4 {font-size: 20px;}
    h3.title {font-size: 42px;}

    .header .menu-list {max-width: unset; padding: 120px 20px 5vw;}
    .header .close-but {width: 55px; right: -100px;}
    .header:has(.show) .close-but {right: 20px;}
    .header:has(.show) .logo {transform: translate(-50%, 5px) scale(1.3); position: relative; left: 50%; transition: 0.6s cubic-bezier(.87,-0.03,.04,1.06);}

    .main-banner .banner .swiper-slide .item {width: 85vw; gap: 25px;}
    .main-banner .banner .swiper-slide .item h1 {font-size: 52px;}
    .main-banner .banner .swiper-slide .item h4 {font-size: 28px;}

    #company .ribbon-banner .ribbon-child,
    #company .ribbon-banner .ribbon {padding-left: 20px; padding-right: 0;}
    #company .ribbon-banner .ribbon-child .move {max-width: 240px;}

    body.en #company .ribbon-banner .title {width: fit-content;}
    #company .ribbon-banner .title {width: 100%;}
    #company .ribbon-banner .title > span {white-space: wrap; word-break: keep-all; line-height: 18px;}
    body.en #company .ribbon-banner .swiper-set, 
    body.en #company .ribbon-banner .ribbon-child {padding-left: 0;}
    body.en #company .ribbon-banner > div {flex-direction: column; padding-bottom: 10px;}
    body.en #company .ribbon-banner .title {position: relative; width: 100%; text-align: center; padding: 20px 0 10px;}
    body.en #company .ribbon-banner .title p {font-size: 27px;}
    body.en #company .ribbon-banner .swiper-set {max-width: 100vw; background-color: #10274a;}
    body.en #company .ribbon-banner .ribbon {padding-left: 0;}
    body.en #company .ribbon-banner .ribbon-child {height: calc(100% - 20px); top: 10px;}
    body.en #company .ribbon-banner .ribbon-child, #business .ribbon-banner .ribbon {padding: 0;}
    body.en #company .ribbon-banner .ribbon-child .move {right: unset; left: 0; transform: unset; width: calc(100% - 20vw);}
    body.en #company .ribbon-banner .ribbon-child .move::before,
    body.en #company .ribbon-banner .ribbon-child .move::after {content: ""; position: absolute; border: 18px solid transparent; border-left-color: #10274a; border-top-color: #10274a; transform: translate(-1px, -1px);}
    body.en #company .ribbon-banner .ribbon-child .move::after {transform: translate(1px, 1px) rotate(180deg); bottom: 0; right: 0;}
    body.en #company .skew-r {display: block; background: unset; height: 100%; width: 100%; right: 0; top: 42px; transform: none; border-top: 10px solid #10274a; border-bottom: 20px solid #10274a;}

    #company .mission h3 {font-size: 32px;}

    body.en #business .card .card-back p::before {margin-top: 2px;}
    #business .card .card-back p {font-size: 18px; line-height: 24px;}

    .tab-group {background-color: #f4f4f4; padding-right: 20px;}
    .nav.nav-pills {border-radius: 0; padding: 4px;}
    .nav .nav-link {padding: 8px 16px;} 
    .tab-content > .tab-pane {padding: 25px 0;}

    body.en #nsplaza .tab-shop .tab-content {min-height: 620px;}
    #nsplaza .tab-shop .tab-group {padding: 5px 20px 10px; margin-top: 30px; background-color: #fff;}
    #nsplaza .tab-shop .tab-content {min-height: 520px;}
    #nsplaza .tab-shop .tab-content::before {display: none;}
    #nsplaza .tab-shop .tab-content > .tab-pane {padding: 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box {flex-direction: column-reverse; gap: 25px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header {margin: auto;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div {flex-direction: row; flex-wrap: wrap;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header h4 {text-align: left; font-size: 28px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-width: 100%; transform: none; max-height: 320px;}

    body.en #technology .list, 
    body.en #technology .list:nth-child(4) {padding: 30px 0;} 
    #terms-tab .tab-terms .tab-group {background-color: unset;}

    footer .footer .right div:last-child > * {font-size: 12px;}

    body.en footer .footer .left .menu-list {gap: 20px 40px; flex-wrap: wrap; justify-content: flex-end; text-align: right;}
    body.en footer .footer .left .menu-list a {min-width: 110px;}
}

@media screen and (max-width: 650px) {
    .header .logo {transition-delay: 0.1s;}
    .header:has(.show) .logo {transform: translate(-50%, 10px) scale(1.2); position: relative; left: 50%;  transition: 0.6s cubic-bezier(.87,-0.03,.04,1.06);}
    .header .close-but {transform: translateY(10px);}

    #company > div::before {height: calc(100% - 10vw + 15px);}
    #company > div .title h6 {max-width: unset;}

    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 22px;}
    body.en #business .card .card-back p {font-size: 18px; line-height: 22px; margin: 30px 0;}
    body.en #business .card .card-back p::before {width: 19px; height: 19px;}

    #business .swiper.plaza .swiper-button-group {top: -5px; height: 40px; transform: translate(-50%, 20px);}
    #business .swiper.plaza .swiper-button-next,
    #business .swiper.plaza .swiper-button-prev {width: 40px; height: 40px;}
    #business .swiper.plaza .swiper-slide h5 {font-size: 22px;}

    #business .card .card-back .back {padding: 50px 0 40px; width: 44px;}
    #business .card .card-back p {font-size: 20px; line-height: 24px; grid-template-columns: 22px 1fr;}
    #business .card .card-back p::before {width: 22px; height: 22px;}

    #nsplaza .tab-shop div h6 {font-size: 15.5px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 16px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-height: 280px;}

    body.en footer .footer .left .menu-list {justify-content: flex-start; text-align: left;}
    body.en footer .footer .left .menu-list a {min-width: 130px;}

    footer .footer .right div:first-child p {font-size: 20px;}
    footer .footer .right div:first-child > *:not(p) {font-size: 14px;}
}

@media screen and (max-width: 620px) {
    h2 {font-size: 28px;}
    h5 {font-size: 20px;}

    .header .menu-list {padding: 90px 20px 30px; border: none;}
    body.en .header .logo,
    .header .logo {max-width: 160px;}
    .header .menu-but img {width: 28px; height: 28px;}
    .header .close-but span {width: 25px; transform: rotate(45deg) translate(-50%, 12.5px);}
    .header .close-but span:last-child {transform: rotate(-45deg) translate(-50%, -12.5px);}
    .header .menu-list > p {bottom: 8px;}
    .header .language {padding: 8px 10px; margin-right: 15px;}
    .header .language .lang-check {font-size: 14px;}
    .header .language .lang-check::after {width: 14px; height: 14px;}

    #company .ribbon-banner .ribbon div > p {font-size: 16px;}
    #company .ribbon-banner .ribbon div > span {font-size: 13px;}
    #company .ribbon-banner .ribbon-child .move {max-width: 200px;} 

    #company .mission h5 {font-size: 18px;}
    #company .mission h3 {font-size: 28px;}

    #technology .list img {max-width: 44px;}
    #technology .list span {font-size: 14px;}
    #technology .list h6 {font-size: 18px; padding: 18px 0 10px;}

    #contact .map-wrapper {padding: 0 20px;}

    #terms-tab .tab-terms .tab-content {padding: 20px 10px 20px 10px;}

    #contact .info-text .info-item::before {width: 20px; height: 20px;}

    footer .footer .logo {max-height: 32px;}
    footer .footer .left .menu-list {gap: 20px 40px; flex-wrap: wrap; justify-content: flex-end; text-align: right;}
    footer .footer .left .menu-list a {min-width: 85px;}

    footer .footer .right div {flex-direction: column; gap: 15px;}
    footer .footer .right div:first-child {padding: 0 0 30px;}
    footer .footer .right div:last-child {border-top: 1px solid #627FAD; padding: 30px 0 12px 0;}
    footer .footer .right div:last-child > *:nth-child(n+2) {padding-left: 0;}
    footer .footer .right div:last-child > * {border: none;}
}

@media screen and (max-width: 580px) {
    h1 {font-size: 42px;}
    h6 {font-size: 17.5px;}
    h5, p {font-size: 16px;}

    body.en #company .ribbon-banner .ribbon-child .move {width: 100%;}

    #company > div .title h6 {padding: 10px 0 25px 0;}

    #company .ribbon-banner .title p {font-size: 30px;}
    #company .ribbon-banner .ribbon {padding-left: 30px;}
    #company .ribbon-banner .ribbon-child .move {max-width: unset; left: unset; right: -35px; transform: skewX(-18deg) scaleX(1.2);}
    #company .ribbon-banner .ribbon .swiper-slide p {font-size: 18px;}
    #company .ribbon-banner .ribbon .swiper-slide span {font-size: 15px;}

    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-height: 240px;}

    #technology .list:nth-child(6) {padding: 30px 0px;}

    .tab-pane .tab-box .tab-header p.title {font-size: 24px;}
}
@media screen and (max-width: 540px) {
    h3.title {font-size: 36px;}

    body.en .header .logo,
    .header .logo {max-width: 140px;}
    .header .menu-list > * {font-size: 22px;}

    .main-banner .banner .swiper-slide .item h1 {font-size: 48px;}
    .main-banner .banner .swiper-slide .item h4 {font-size: 26px;}

    #company > div::before {height: calc(100% + 15px);}

    body.en #company .skew-r {top: 0;}

    #company .ribbon-banner > div {justify-content: flex-end;}
    #company .ribbon-banner .swiper-set { max-width: 50vw;}
    #company .ribbon-banner .title {padding: 0 0 0 20px; position: absolute; left: 0; width: calc(50vw + 20px);}
    #company .ribbon-banner .ribbon {padding-left: 60px;}
    #company .ribbon-banner .ribbon-child .move {right: -35px; transform: skewX(-18deg) scaleX(1.2);}

    body.en #business .swiper.plaza .swiper-button-group {display: none;}
    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 20px;}
    body.en #business .card {height: 540px;}
    body.en #business .card .card-back .back {padding: 60px 0 50px;}

    #business .swiper.plaza .swiper-button-group {transform: translate(-50%, 10px);}
    #business .swiper.plaza .swiper-slide h5 {font-size: 18px;}

    #business .card .card-back .back {padding: 40px 0 50px;}
    #business .card .card-back p {font-size: 18px;}
    #business .card .card-back p::before {width: 20px; height: 20px; margin-top: 3px;}

    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p::before {margin-top: 3px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div {gap: 10px; padding-top: 20px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 15px;}

    body.en #technology .list {justify-content: space-between;}

    body.en footer .footer .left .menu-list a {min-width: 110px;}

    footer .footer .left .menu-list {justify-content: flex-start; text-align: left;}
    footer .footer .left .menu-list a {min-width: 95px;}
}

@media screen and (max-width: 480px) {
    .header:has(.show) .logo {transform: translate(-50%, 10px) scale(1.3);}
    .header .menu-list {padding: 100px 20px 30px;}

    .main-banner .banner .swiper-slide .item h1 {font-size: 36px;}
    .main-banner .banner .swiper-slide .item h4 {font-size: 20px;}

    #company.in-y-center {justify-content: center;}

    #company > div:nth-child(1) {padding: 0 20px 140px;}
    #company .ribbon-banner > div {flex-direction: column; padding-bottom: 10px;}
    #company .ribbon-banner .title {position: relative; width: 100%; text-align: center; padding: 20px 0 10px;}
    #company .ribbon-banner .title p {font-size: 27px;}
    #company .ribbon-banner .swiper-set {max-width: 100vw;}
    #company .ribbon-banner .ribbon {padding-left: 0;}
    #company .ribbon-banner .ribbon-child {height: calc(100% - 20px); top: 10px;}
    #company .ribbon-banner .ribbon-child, #business .ribbon-banner .ribbon {padding: 0;}
    #company .ribbon-banner .ribbon-child .move {right: unset; transform: unset; width: calc(100% - 20px);}
    #company .ribbon-banner .ribbon-child .move::before,
    #company .ribbon-banner .ribbon-child .move::after {content: ""; position: absolute; border: 18px solid transparent; border-left-color: #10274a; border-top-color: #10274a; transform: translate(-1px, -1px);}
    #company .ribbon-banner .ribbon-child .move::after {transform: translate(1px, 1px) rotate(180deg); bottom: 0; right: 0;}
    #company .skew-r {display: block; background: unset; height: 100%; width: 100%; right: 0; top: 0; transform: none; border-top: 10px solid #10274a; border-bottom: 20px solid #10274a;}

    #company .mission h5 {font-size: 16px;}
    #company .mission h3 {font-size: 24px;}

    body.en #business .card .card-back .back {padding: 60px 0 30px;}

    body.en #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p::before {margin-top: 4px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-img {max-height: 200px;}

    #contact {height: fit-content;}
    #contact .info-text {padding: 0px 20px 87px;}
    #contact .info-text h3 {padding-bottom: 0px;}
    #contact .info-text span.info-item {font-size: 14px; gap: 10px;}
}

@media screen and (max-width: 450px) {
    h1 {font-size: 38px;}
    h2 {font-size: 24px;}
    h3 {font-size: 21px;}
    h4 {font-size: 18px;}
    h5,
    p {font-size: 15px;}
    h6 {font-size: 16.5px;}
    span {font-size: 13px;}

    .main-banner .banner .swiper-pagination-bullet {width: calc(100% / 4);}

    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 20px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 16px;}

    #business .swiper.plaza .swiper-button-group {display: none;}
    #business .card .card-front > div .rotation {right: unset; left: 50%; transform: translateX(-50%);}
    #business .swiper.plaza .swiper-slide {padding: 0 15px;}
    #business .card .card-back .back {padding: 40px 0 30px;}

    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header h4 {font-size: 24px;}
}

@media screen and (max-width:420px) {
    body.en #company .ribbon-banner .title > span {padding: 10px 10px 0;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > p {font-size: 18px;}
    body.en #company .ribbon-banner .ribbon .swiper-slide > span {font-size: 14px;}

    body.en #business .swiper.plaza .swiper-slide h5 {font-size: 19px;}

    #business .card .card-back .back {padding: 40px 0 20px;}
    #business .card .card-back p {margin: 15px 0;}

    #nsplaza .tab-shop .tab-content {min-height: 480px;}

    #technology .list img {max-width: 38px;}
    #technology .list h6 {font-size: 16px; padding: 12px 0 4px;}
}

@media screen and (max-width: 380px) {
    h5, p {font-size: 14px;}

    .header:has(.show) .logo {transform: translate(-50%, 10px) scale(1.25);}

    body.en #business .swiper.plaza .swiper-slide h5 {line-height: 1.4; font-size: 20px; min-height: 90px; align-content: center;}
    body.en #business .card .card-back p::before {margin-top: 4px;}

    #nsplaza .tab-shop h3.title {font-size: 30px;}
    #nsplaza .tab-shop div h6,
    #nsplaza .tab-shop .nav-pills .nav-link,
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {font-size: 14px;}
    #nsplaza .tab-shop .tab-content > .tab-pane .tab-box .tab-header div p {padding: 6px 20px; gap: 6px;}

    body.en #technology div:has(.list) {grid-template-columns: repeat(1, 1fr); padding: 30px 20px;}

    footer .footer .left .menu-list {justify-content: flex-start; text-align: left;}
}

@media screen and (max-width:360px) {
    h2 {font-size: 22px;}

    #business .swiper.plaza .swiper-button-next, 
    #business .swiper.plaza .swiper-button-prev {width: 30px;}

    body.en #nsplaza .tab-shop .tab-content {min-height: 580px;}
    #nsplaza .tab-shop .tab-content {min-height: 440px;}
}

@media screen and (max-width: 350px) {
    h3 {font-size: 18px;}
    span {font-size: 12px;}
    h3.title {font-size: 32px;}

    #company .ribbon-banner .title {padding: 20px 20px 10px;}
    #company .ribbon-banner .title p {font-size: 26px;}
    #company .ribbon-banner .title > span {padding: 10px 20px 0;}

    #business h3 {padding: 3.5rem 0 1rem 0;}
    #business .swiper.plaza .swiper-slide h5 {font-size: 15px;}

    #technology div:has(.list) {grid-template-columns: repeat(1, 1fr); padding: 30px 20px;}
}

@media screen and (max-width: 330px) {
    h3.title {font-size: 28px;}

    #business .swiper.plaza .swiper-button-group {top: -8px;}
    #business .card .card-back p {font-size: 16px; grid-template-columns: 15px 1fr;}
    #business .card .card-back p::before {width: 15px; height: 15px; margin-top: 5px;}

    #nsplaza .tab-shop .tab-content {min-height: 420px;}

    body.en footer .footer .left .menu-list {gap: 20px;}
}