@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
:root {
    --font-color-1: #030B2F;
    --font-color-2: rgba(3,11,47,.4);
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Pretendard';
    color: var(--font-color-1);
}
h1 {
    font-family: 'NexonLv1Gothic';
}
h1 {
    font-size: 48px;
}
p {
    font-size: 18px;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1780px;
    padding: 0 20px;
    margin: 0 auto;
}
.navbar {
    padding: 44px 0 29px 0;
    background: transparent;
    max-width: 1560px;
    margin: 0 auto;
}
.header-cap {
    border-top: 1px solid var(--font-color-1);
    border-left: 1px solid var(--font-color-1);
    border-right: 1px solid var(--font-color-1);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 42px;
    margin-top: 61px;
}
.header-cap.accord {
    width: 100%;
    border-bottom: 0;
    background: transparent;
    margin-bottom: 30px;
    line-height:1;
}
.header-cap.accord.collapsed {
    border-top: 0
    border-left: 1px solid var(--font-color-1);
    border-right: 1px solid var(--font-color-1);
    border-bottom: 1px solid var(--font-color-1);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.on-panel, .off-panel {
    display: none;
}
.header-cap.accord.collapsed .off-panel {
    display: block;
}
.section {
    padding-bottom: 130px;
}

.panel-item h3 {
    font-weight: 200;
    font-size: 28px;
    margin-bottom: 22px;
    color: var(--font-color-1);
}
.panel-item p {
    color: var(--font-color-2);
}
.panel-item .panel-caption {
    border-left: 1px solid #000;
    padding-left: 20px;
    margin-top: 26px;
    margin-bottom: 35px;
}

hr.hr {
    border-top: 1px solid var(--font-color-2);
    margin: 90px 0;
}
.arrow-section {
    background: url(/img/arrow-back.png) left bottom no-repeat;
}
.panel-sec3 {
    margin-bottom: 45px;
}
.panel-sec3 ol {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
}
.panel-sec3 ol li {
    position: relative;
    padding: 30px 30px 15px 75px;
    width: 50%;
}
.panel-sec3 ol li strong {
    position: absolute;
    left: 0;
    font-size: 100px;
    font-weight: 100;
    top: 0;
    color: var(--font-color-2);
}
.panel-sec3 ol li h3 {
    font-weight: 300;
}
.panel-sec3 ol li p {
    color: var(--font-color-2);
}
.section4 h2 {
    color: var(--font-color-2);
    font-size: 26px;
    font-weight: 700;
}
.section4 p {
    color: var(--font-color-2);
}
h1.hassmall {
    position: relative;
}
h1.hassmall small {
    font-size: 26px;
    position: absolute;
    right: 0;
}
.skyblue {
    background: #abc7ff;
    border-radius: 30px;
    padding: 42px 0;
    margin: 150px 0;
}
.skyblue h1 {
    color: #fff;
    margin-bottom: 56px;
}
.skyblue ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.section7 {
    height: 650px;
    background-image: url(/img/section7-back.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    padding-top: 78px;
}
.awards {
    margin-top: 56px;
}
.award-card {
    margin-bottom: 72px;
    padding: 34px 81px;
    border: 1px solid rgba(3,11,47,0.2);
    border-radius: 30px;
    height: 100%;
}
.award-card h3 {
    font-size: 26px;
    color: var(--font-color-2);
    margin-bottom: 32px;
}
.award-card .table tr td {
    vertical-align: middle;
    font-weight: 500;
    color: var(--font-color-2);
    font-size: 18px;
    border: 0;
}
.award-card .table tr td:first-child {
    white-space: nowrap;
}
.sec7-ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.seo p {
    font-size: 0;
    margin: 0;
}
#dynamic-content p {
    padding-bottom: 50px;
}
a.contact {
    background: #2E72FE;
    color: #fff;
    font-weight: 700;
    font-size: 36px;
    border-radius: 20px;
    padding: 15px 100px;
    margin-bottom: 50px;
    text-decoration: none;
}
footer {
    color: rgba(255,255,255,0.8);
    background: #030B2F;
    padding: 67px 0;
    text-align: center;
    font-size: 16px;
}
.swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}
.skyblue button {
    background: #fff;
    border: 0;
    border-radius: 20px;
    padding: 15px 15px 45px 15px;
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.skyblue button img {
    border-radius: 10px;
}
@media (max-width: 720px) {
    .skyblue button {
        padding: 10px 10px 40px 10px;
        border-radius: 15px;
    }
}
.skyblue button:hover {
    transform: translateY(-8px);
}
.more-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #2E72FE;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .more-link {
        bottom: 15px;
        font-size: 11px;
    }
}
.navbar-light .navbar-nav .nav-link {
    padding: 3px 12px;
    border: 1px solid transparent;
    border-radius: 500px;
    font-size: 18px;
}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
    border: 1px solid var(--font-color-1);
}

.lang {
    position: fixed;
    bottom: 45px;
    right: 82px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 3;
}
.lang.show {
    opacity: 1;
    visibility: visible;
}
.lang ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.lang img {
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.4));
}
.lang ul li:first-child img {
    filter: none;
}
.swiper:before {
    position: absolute;
    content: '';
    left: 0;
    background-image: linear-gradient(270deg, rgba(255, 255, 255, 0),  rgba(255,255,255,1));
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 2;
}
.swiper:after {
    position: absolute;
    content: '';
    right: 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0),  rgba(255,255,255,1));
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 2;
}

.grad-border {
    --c1: #2e72fe;
    --c2: #ffc7a4;
    --c3: #dafb77;
    --bw: 4px; /* border width */
    --r: 16px; /* radius */
    --spd: 2.5s; /* speed */
    position: relative;
    border-radius: var(--r);
    padding: 20px;
    background: transparent; /* 내부 배경 */
    color: #fff;
}

.grad-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--bw);
    border-radius: inherit;
    background: conic-gradient(from var(--a), var(--c1) 20%, var(--c2) 40%, var(--c3) 60%, var(--c1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: spin var(--spd) linear infinite;
    pointer-events: none;
}

@keyframes spin{
    to {
        --a: 1turn;
    }
}

@property
--a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

.sec5border {
    display: none;
}
.spinworld {
    border-radius: 50%;
    width: 65%;
    margin: 0 auto;
    position: relative;
}
.spinworld.grad-border::before {
    padding: 2px;
}
.spinworld span {
    font-weight: 700;
    font-size: 26px;
    color: var(--font-color-2);
}
.spinworld .s-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.spinworld .s-icon.icon1 {
    left: -60px;
}
.spinworld .s-icon.icon2 {
    right: -60px;
}
@media (min-width: 1650px) {
    .container {
        max-width: 1620px;
    }
}
@media (min-width: 1024px) {
    .panel-col {
        max-width: 460px;
    }
    .panel-row {
        justify-content: space-between;
    }
    .panel-item.panel-1 {
        padding-top: 183px;
    }
    .panel-item.panel-2 {
        padding-top: 87px;
    }
    .panel-sec3 ol li:first-child, .panel-sec3 ol li:nth-child(2) {
        border-bottom: 1px solid var(--font-color-2);
    }
}
@media (max-width: 1024px) {
    h1 {
        margin-bottom: 44px;
        font-size: 33px;
    }
    .section {
        padding-bottom: 40px;
    }
    .panel-sec3 ol li {
        width: 100%;
        border-bottom: 1px solid var(--font-color-2);
    }
    .panel-sec3 ol li:last-child {
        border-bottom: 0;
    }
    .award-card {
        height: auto;
        padding-left: 30px;
        padding-right: 30px;
    }
    .award-card .table tr td:first-child {
        white-space: nowrap;
    }
    h1.hassmall small {
        position: static;
        display: block;
        font-size: 20px;
        margin-top: 10px;
        border-bottom: 0;
    }
    .container {
        max-width: 100%;
    }
    .sec5wrap {
        position: relative;
        padding-top: 50px;
        padding-bottom: 30px;
        padding-left: 25px;
        padding-right: 25px;
        max-width: 500px;
        margin: 0 auto;
    }
    .sec5border {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    .sec5border span {
        position: absolute;
        top: -75px;
        left: 0;
        font-weight: 700;
        font-size: 26px;
        color: var(--font-color-2);
        display: block;
        text-align: center;
        width: 100%;
    }
    .sec5border .b-icon {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        padding: 0 20px;
    }
    .sec5border .b-icon.icon1 {
        top: -25px;
    }
    .sec5border .b-icon.icon2 {
        bottom: -50px;
    }
}
@media (max-width: 720px) {
    .wrapper {
        padding: 0 10px;
    }
    .container {
        padding: 0;
    }
    .skyblue ul {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .skyblue ul li {
        width: 50%;
    }
    .section7 {
        height: 280px;
    }
    a.contact {
        font-size: 23px;
        padding: 12px 50px;
    }
    .lang {
        right: 20px;
        bottom: 20px;
        transform: scale(0.85);
        transform-origin: center right;
    }
    .award-card .table tr td {
        font-size: 10px;
    }
    .panel-sec3 ol li {
        padding: 30px 10px 15px 70px;
    }
    .sec5wrap {
        padding-left: 5px;
        padding-right: 5px;
    }
    .skyblue {
        padding: 42px 15px;
    }
    .awards {
        padding: 0 10px;
    }
    .award-card {
        padding: 25px 10px 10px;
    }
    .award-card h3 {
        margin-bottom: 10px;
    }
    h1 {
        padding: 0 10px;
    }
    .row {
        margin-left:0;
        margin-right: 0;
    }
}