@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap");


/* Pretendard */
@font-face {
	font-family:'Pretendard';
	font-weight: 900;
	font-display: swap;
	src:
	url(font/Pretendard-Black.woff2) format('woff2'), 
	url(font/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 800;
	font-display: swap;
	src:
	url(font/Pretendard-ExtraBold.woff2) format('woff2'), 
	url(font/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: 
	url(font/Pretendard-Bold.woff2) format('woff2'), 
	url(font/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: 
	url(font/Pretendard-SemiBold.woff2) format('woff2'), 
	url(font/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 500;
	font-display: swap;
	src:
	url(font/Pretendard-Medium.woff2) format('woff2'), 
	url(font/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 400;
	font-display: swap;
	src:
	url(font/Pretendard-Regular.woff2) format('woff2'), 
	url(font/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family:'Pretendard';
	font-weight: 300;
	font-display: swap;
	src:
	url(font/Pretendard-Light.woff2) format('woff2'), 
	url(font/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family:'Pretendard';
	font-weight: 200;
	font-display: swap;
	src:
	url(font/Pretendard-ExtraLight.woff2) format('woff2'), 
	url(font/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family:'Pretendard';
	font-weight: 100;
	font-display: swap;
	src:
	url(font/Pretendard-Thin.woff2) format('woff2'), 
	url(font/Pretendard-Thin.woff) format('woff');
}


:root {
    --container-padding: 40px;
    --hd: 108px;
    --section-space: 200px;
    --gap: 4px;
    --basic: #333;
    --primary: #ff6600;
    --gray: #EFEFEF;
    --secondary: #F9F2ED;
    --blue: #0046ff;
    --gutters-margin: -12px
}
@media(max-width: 1199.98px) {
    :root {
        --section-space: 80px
    }
    
}
@media(max-width: 991.98px) {
    :root {
        --container-padding: 24px;
        --gutters-margin: -6px
    }
    
}
@media(max-width: 767.98px) {
    :root {
        --container-padding: 16px;
        --hd: 56px;
        --section-space: 50px;
        --gap: 2px;
        --gutters-margin: -4px
    }
    
}
html {
    font-size:16px
}
@media(max-width: 991.98px) {
    html {
        font-size:14px
    }
    
}
body,p,span,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,label {
    margin:0;
    padding:0;
    font-family:"Pretendard",-apple-system,sans-serif;
    color:inherit;
    outline:0
}
body {
    color:var(--basic);
    letter-spacing:-0.01em
}
body * {
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
main {background-color: #f1f5f8;}
a {
    color:inherit;
    -webkit-transition:all .4s;
    transition:all .4s
}
a:hover,a:focus,a:active {
    color:inherit;
    text-decoration:none
}
li {
    list-style:none
}
address,em {
    font-style:normal
}
table {
    width:100%
}
textarea {
    resize:none;
    font-size:1rem;
    outline:0
}
u {
    text-decoration-thickness:1px;
    text-underline-position:under
}
img {
    vertical-align:top;
    max-width:100%
}
button {
    cursor:pointer;
    border:0;
    -webkit-transition:all .4s;
    transition:all .4s;
    background:none
}
b,strong {
    font-weight:700
}
.row {
    margin-left:var(--gutters-margin);
    margin-right:var(--gutters-margin)
}
.row-gap {
    row-gap:calc(var(--gutters-margin)*-2)
}
.row>[class*=col],.row>div {
    padding-left:calc(var(--gutters-margin)*-1);
    padding-right:calc(var(--gutters-margin)*-1)
}
.no-gutters {
    --gutters-margin: 0 
}
h1,h2,h3,h4,.fs-1,.fs-2,.fs-3,.fs-4,.fs-5,.fs-6,.fs-7 {
    font-weight:700;
    line-height:1.5;
    color:#000;
    word-break:keep-all
}
.fs-1 {
    font-size:3.1111111111rem;
    font-weight:800
}
.fs-2 {
    font-size:2.6666666667rem
}
.fs-3 {
    font-size:2.2222222222rem
}
.fs-4 {
    font-size:1.7777777778rem
}
.fs-5 {
    font-size:1.5555555556rem
}
.fs-6 {
    font-size:1.3333333333rem
}
.fs-7 {
    font-size:1.1111111111rem;font-weight:400
}
.fs-7[class*=text-] {
    font-weight:400
}
.fbasic {
    font-size:1rem
}
.fsm {
    font-size:.8888888889rem !important
}
@media(max-width: 991.98px) {
    .fs-1,.fs-2 {
        font-size:1.75rem
    }
    .fs-3 {
        font-size:1.5rem
    }
    .fs-4 {
        font-size:1.375rem
    }
    .fs-5 {
        font-size:1.25rem
    }
    .fs-6 {
        font-size:1.25rem
    }
    .fs-6.text-primary {
        font-size:1.125rem
    }
    .fs-7 {
        font-size:1rem
    }
    
}
.text-base {
    font-size:1rem !important
}
.text-body {
    color:#333 !important
}
.text-primary,a.text-primary:focus,a.text-primary:hover {
    color:var(--primary) !important
}
.text-secondary {
    color:#5a371e !important
}
.text-gray {
    color:#666 !important
}
.text-light {
    color:#999 !important
}
.text-light2 {
    color:#888 !important
}
.text-dark {
    color:#000 !important
}
.bg-light {
    background-color:#f6f6f6 !important
}
.bg-primary {
    background-color:var(--primary) !important
}
.bg-white {
    background-color:#fff !important
}
.bg-ylw {
    background-color:var(--secondary) !important
}
.bg-dark {
    background-color:#000 !important
}
.bg-gray {
    background-color:#666 !important
}
.bg-beige {
    background-color:#eee5df !important
}
.bg-efefef {
    background-color:#efefef !important
}
.text-clamp {
    display:-webkit-box !important;
    overflow:hidden;
    max-height:3em;
    line-height:1.5em !important;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-wrap:break-word;
    word-break:break-all !important;
    white-space:normal !important;
    height:auto
}
details {
    position:relative
}
summary:focus {
    outline:none
}
caption {
    font:0/0 a;
    color:rgba(0,0,0,0);
    text-shadow:none;
    background-color:rgba(0,0,0,0);
    border:0
}
.icon {
    display:inline-block;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    text-indent:-9999px;
    vertical-align:middle;
    width:1.3333333333rem;
    height:1.3333333333rem;
    overflow:hidden
}
.icon-lang {
    background-image:url(../img/main/lang.svg);outline: none;width:24px!important; height:24px!important;;
}
.icon-lang:focus{outline: none;;}
.icon-link {
    width:1.1111111111rem;
    height:1.1111111111rem;
    background-image:url(../img/main/link.svg)
}
.icon-more {
    width:1.7777777778rem;
    height:1.7777777778rem;
    background-image:url(../img/main/more.svg);
    -webkit-transition:-webkit-transform .4s;
    transition:-webkit-transform .4s;
    transition:transform .4s;
    transition:transform .4s, -webkit-transform .4s
}
.icon-more.white {
    background-image:url(../img/main/more-white.svg)
}
a:hover .icon-more {
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.icon-write {
    background-image:url(../img/main/write.svg)
}
.icon-plus-dark {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-dark.svg)
}
.icon-plus-gray {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-gray.svg)
}
.icon-plus-red {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-red.svg)
}
.icon-error {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/error.svg);
    margin:-2px 2px 0 0
}
.icon-close-gray {
    position:absolute;
    right:12px;
    top:12px;
    background-image:url(../img/main/icon-close-gray.svg)
}
.icon-arr {
    background-image:url(../img/main/bt_arr.svg)
}
.icon-plus {
    background-image:url(../img/main/plus.svg)
}
.icon-print {
    background-image:url(../img/main/icon-print.svg)
}
.icon-goto {
    background-image:url(../img/main/goto.svg)
}

.dropdown-menu {
    background:#fff;
    border:0;
    border-radius:1.3333333333rem;
    -webkit-box-shadow:0px 0px 16px 0px rgba(0,0,0,.1);
    box-shadow:0px 0px 16px 0px rgba(0,0,0,.1);
    padding:1.0rem;
    max-width:8.4444444444rem;
    max-height:30vh;
    overflow-y:auto;
    color:#333
}
.dropdown-menu li+li {
    margin-top:.4444444444rem
}
.dropdown-menu .active {
    font-weight:700;
    color:#000
}

body.sitemap-open {
    overflow:hidden
}
body.sitemap-open .bt-sitemap {
    background-image:url(../img/main/gnb_x.svg); width:28px!important; 
}
body.sitemap-open .gnb {
    display:none
}
@media(min-width: 992px) {
    body.sitemap-open .hd .util-links {
        display:none;
    }
    
}
#wrap {
    overflow-x:clip
}
.container {
    max-width:calc(1320px + var(--container-padding)*2);
    padding-left:var(--container-padding);
    padding-right:var(--container-padding)
}
.container-fluid {
    max-width:calc(1660px + var(--container-padding)*2)
}
.container-wide {
    max-width:calc(1520px + var(--container-padding)*2)
}
.hd {
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:999;
    letter-spacing:0;
    background:#fff;
    font-size:18px;
    -webkit-box-shadow:0 1px 0 0 #e5e5e5;
    box-shadow:0 1px 0 0 #e5e5e5;
    font-size:20px;
    color:#000;
    word-break:keep-all
}
.hd>.container {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:var(--hd)
}
.hd .logo {
    line-height:0;
    -ms-flex-negative:0;
    flex-shrink:0
}
.hd .logo img {
    height:70px
}
.hd .logo .mo {
    display:none
}
@media(max-width: 1199.98px) {
    .hd .logo {
        margin-right:auto
    }
    .hd .logo .pc {
        display:none
    }
    .hd .logo .mo {
        display:block;
        height:20px
    }
    
}
@media(max-width: 767.98px) {
    .hd .logo .mo {
        height:12px
    }
    
}
.hd a:hover,.hd a:focus {
    color:var(--primary)
}
.hd-side {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:16px;
    -ms-flex-negative:0;
    flex-shrink:0;

    margin-left: auto;
}
@media(max-width: 1399.98px) {
    .hd-side {
        gap:4px
    }
    
}
@media(max-width: 767.98px) {
    .hd-side {
        margin-left:auto
    }
    
}
.hd-side .bts {
    width:32px;
    height:32px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
   
}

.hd-side .bt-sitemap {
    background:url(../img/main/sitemap.svg) no-repeat center/contain;
    padding:0.9rem 0.9rem
}
@media(max-width: 767.98px) {
    .hd-side .bts {
        width:32px;
        height:32px
    }
    
}
/* 기본(PC)에서는 숨김 */
.hd-side .bt-sitemap {
    
}

/* 1399.98px 이하에서만 표시 */
@media (max-width: 1299.98px) {
    .hd-side .bt-sitemap {
        display: flex;outline: none;
    }
}
.gnb {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:30px;
    margin:0 auto
}

.gnb>li>a {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:calc(var(--hd) - 1px);
    border-bottom:4px solid rgba(0,0,0,0);
    font-weight:800;
    letter-spacing: -0.03em;
}
.gnb>li>a.on {
    color:var(--primary);
    border-color:var(--primary)
}
.gnb:not(:hover) .active>a {
    color:var(--primary);
    border-color:var(--primary)
}
.gnb>li>a.future{font-weight:700!important; font-family: 'Domine', serif; font-size:23px; letter-spacing: -1px;font-style: normal;}

@media(min-width: 1600px) {
    .gnb {
        gap:56px
    }
    
}
@media(max-width: 1299.98px) {
    .gnb {
        display:none
    }
    
}
.depth {
    position:fixed;
    top:var(--hd)
}
body:has(.topbanner.visible):not(.is-scroll) .depth {
    top:calc(var(--hd) + 100px - var(--hd-offset))
}
@media(max-width: 767.98px) {
    body:has(.topbanner.visible):not(.is-scroll) .depth {
        top:calc(var(--hd) + 50px - var(--hd-offset))
    }
    
}
.depth {
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.5);
    -webkit-box-shadow:0 -1px 0 0 #e5e5e5;
    box-shadow:0 -1px 0 0 #e5e5e5;
    pointer-events:none
}
.depth:not(.active) {
    display:none
}
.depth-inner {
    background:#fff;
    pointer-events:auto;
    max-height:100%;
    overflow-y:auto
}
.depth .container {
    max-width:1200px;
    padding:40px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:40px;
}

@media(max-width: 1599.98px) {
    .depth .container {
        padding:40px 20px
    }
    
}
.depth:has(.depth-list>li:nth-child(4)) .depth-list {
    grid-template-columns:repeat(4, 1fr)
}
.depth-list {
    overflow:hidden;
    width: fit-content;
    margin: 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    font-size:17px;
  
}
.depth-list>li {
    position:relative;
    padding:0 30px;
    min-width:120px;
}

.depth-list>li>a {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    line-height:1.5;
    gap:8px;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-weight:800;border-bottom:1px solid #666;
    
}
.depth-list>li>a.nostyle {
    border-bottom:0;
    
}
.depth-list>li>a:not(:first-child) {
    margin-top:40px
}
.depth-list>li:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    height:200vh
}
@media(min-width: 1400px) {
    .depth-list>li:not(:nth-child(4n)):after {
        border-right:1px solid #e5e5e5
    }
    .depth-list>li:nth-child(4n):last-child:after {
        display:none
    }
    .depth-list>li:nth-child(3n):last-child:after {
        display:none
    }
}
@media(max-width: 1399.98px) {
    .depth-list>li:not(:nth-child(3n)):after {
        border-right:1px solid #e5e5e5
    }
    
}

.depth-list ul {
    font-size:15px;
    padding-top:8px;
    color:#000;
    line-height:1.3
}
.depth-list ul li { margin-top:10px; }


.depth-list ul li.graytxt {
    margin-bottom:10px;
    font-size:13px;
    font-weight:800;
    color:#878788;  
    line-height: 1.5;
    width:100%
}
@media(max-width: 1399.98px) {
    .depth-list {
        grid-template-columns:repeat(3, 1fr) !important
    }
    .depth-list:has(ul>li:nth-child(21)) {
        grid-template-columns:repeat(2, 1fr) !important
    }
    .depth-list:has(ul>li:nth-child(21))>li:nth-child(2n):after {
        display:none
    }
    .depth-list:has(ul>li:nth-child(21))>li:nth-child(3):after {
        border-right:1px solid #e5e5e5
    }
    
}
.depth-banner { font-size:50px; letter-spacing: -1.5px; font-weight: 300; font-family:"Outfit",sans-serif;  margin-top:-20px;line-height: 1.3;}
.depth-banner p{ font-size:16px;letter-spacing: 0px;font-weight:700; color: #0066ff;margin-top:20px }

.util-links {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    background:#f2f4f5;
    font-size:16px;
    border-radius:30px;
    padding:0 14px;
    margin-left:auto
}
.util-links a {
    padding:0 1em;
    color:#000 !important;
    height:60px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-weight:600;
    line-height:1.1;
    white-space:nowrap
}
.util-links i {
    height:1em;
    border-left:1px solid hsla(0, 0%, 16%, 0.9);
    -ms-flex-negative:0;
    flex-shrink:0
}
@media(max-width: 1299.98px) {
    .hd .util-links {
        display:none
    }
    
} 
@media(max-width: 991.98px) {
    .util-links {
        border-radius:16px;
        padding:0;
        margin-bottom:8px
    }
    .util-links a {
        -webkit-box-flex:1;
        -ms-flex:1;
        flex:1;
        height:56px;
        padding:0
    }
    
}
#sitemap {
    position:fixed;
    top:var(--hd);
    border-top:1px solid #e5e5e5
}
#sitemap .container {
    max-width:calc(1440px + var(--container-padding)*2)
}
body:has(.topbanner.visible):not(.is-scroll) #sitemap {
    top:calc(var(--hd) + 100px - var(--hd-offset))
}
@media(max-width: 767.98px) {
    body:has(.topbanner.visible):not(.is-scroll) #sitemap {
        top:calc(var(--hd) + 50px - var(--hd-offset))
    }
    
}
#sitemap {
    bottom:0;
    left:0;
    right:0;
    overflow-y:auto;
    background:#fff;
    z-index:99900;
    display:none;
    padding:40px 0
}
@media(min-width: 992px) {
    #sitemap .util-links {
        display:none
    }
    
}
@media(max-width: 991.98px) {
    #sitemap {
        padding:16px 0
    }
    
}
.sitemap a {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;

    color:#000
}
.sitemap a[target=_blank]:after {
    content:"";
    width:20px;
    height:20px;
    background:url(../img/main/link.svg) no-repeat center/contain;
    margin-top:-2px
}

.sitemap .sitemap-depth>li ul a {
    color:#000;font-size:14px;letter-spacing: 0; margin-bottom:10px;
}

.sitemap .sitemap-depth>li {
    font-size:14px;
}

.sitemap .sitemap-depth>li ul a:hover {
    color:var(--primary);
}
.sitemap .sitemap-depth>li .graytxt {
    margin-bottom:10px;
    margin-top:10px;
    font-size:13px;
    font-weight:800;
    color:#878788;
    
    
    letter-spacing: 0;
}
@media(min-width: 992px) {
    
    .sitemap .sitemap-depth { display: flex;padding:20px 30px;background-color: #f7f7f7; gap:80px;    }
    .sitemap .sitemap-depth.sd2 {gap: 80px;display: grid; grid-template-columns: repeat(4, 1fr); padding:50px;background-color: #f7f7f7; }
    

    .sitemap>li>a {
        font-size:18px;
        font-weight:800;
        line-height:1.3;padding-bottom:10px;
    }
    .sitemap>li>a.future {

        font-weight:800!important; font-family: 'Domine'; letter-spacing: -1px;;
    }
    .sitemap .sitemap-depth>li {
        
        font-size:14px
    }
    .sitemap .sitemap-depth>li>a {
        font-size:15px;
        font-weight:800;border-bottom:1px solid #666;
    }
     .sitemap .sitemap-depth>li>a.nostyle {
       border-bottom:0;
    }
    .sitemap .sitemap-depth>li>a~a {
        margin-top:24px
    }
    .sitemap .sitemap-depth>li ul>li {
        margin-top:8px
    }
    .sitemap .depth4 {
        display:none
    }
    
}
@media(min-width: 1400px) {
    .sitemap {
    display: block;
   
    
    }
    
}
@media(max-width: 1399.98px) {
    .sitemap>li:nth-child(3n) {
        border-right:0
    }
    
}
@media(max-width: 991.98px) {

    .sitemap .sitemap-depth>li ul a {
        color:#000;font-size:15px;letter-spacing: 0; margin-bottom:10px;gap:0;display: block;width:100%;grid-template-columns:none
    }
    
    .sitemap>li>a {
        font-size:20px;
        line-height:24px;
        padding:20px 0;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        font-weight:700;
        border-bottom:1px solid #e5e5e5;
    }
    .sitemap>li>a::after {
        content:"";
        width:24px;
        height:24px;
        background:url(../img/main/gnb_arr.svg) no-repeat
    }
    .sitemap>li>a.on::after {
        background-image:url(../main/img/gnb_arr_on.svg)
    }
    .sitemap>li>a.nosub::after {
        content:"";
        width:24px;
        height:24px;
        background:url(../img/main/gnb_more.svg) no-repeat
    }
    .sitemap>li>a i{display: none;}

    .sitemap .sitemap-depth:not(.active),.sitemap-depth>li>ul:not(.active) {
        display:none
    }
    .sitemap .sitemap-depth>li+li {
        margin-top:8px
    }
    .sitemap .sitemap-depth>li>a~a {
        margin-top:8px
    }
    .sitemap .sitemap-depth>li:has(.depth3:not(.d-none))>a::after {
        content:"";
        width:16px;
        height:16px;
        background:url(../img/main/depth_arr.svg) no-repeat
    }
    .sitemap .sitemap-depth>li>a {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        font-size:16px;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        padding:16px 24px;
        background:var(--gray);
        border-radius:16px;
        font-weight:700;
    }
    .sitemap .sitemap-depth>li>a:first-child{margin-top:10px;}
    .sitemap .depth3 {
        padding:16px 24px
    }
    .sitemap .depth3>li+li {
        margin-top:16px
    }
    .sitemap .depth3>li>a {
        font-size:16px;
        color:#000;
        font-weight:500;
        gap:4px
    }
    .sitemap .depth3>li>a:before {
        content:"";
        width:4px;
        height:4px;
        border-radius:100%;
        background:var(--primary)
    }
    .sitemap .depth4 {
        padding-top:4px;
        font-size:14px
    }
    .sitemap .depth4 li {
        margin-top:4px
    }
    
}
.futuredot{color: #00d8ff; font-weight: 900;}

.main-top {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    gap:24px;
    padding-top:50px;
}
@media(max-width: 1399.98px) {
    .main-top {
        gap:16px
    }
    
}
@media(max-width: 1199.98px) {
    .main-top {
        display:block
    }
    
}
@media(max-width: 767.98px) {
    .main-top {
        padding-top:20px;
    }
    
}

.main-visual{
    position:relative;
    overflow:hidden;
    border-radius:40px;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    aspect-ratio:16/9;
    border-radius:24px;
    min-height:100%;
    background: #000;
}

/* 영상 */

.main-video{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.main-video.active {
  opacity: 1;
}
.visual-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.48),
    rgba(0,0,0,.18)
  );
  z-index: 2;
}
/* 어둡게 */

.overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.28),
        rgba(0,0,0,.18)
    );

    z-index:2;

}

/* 텍스트 */

.visual-inner{

    position:relative;
    z-index:3;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:90px;

    color:#fff;

}

.visual-inner h2{

    font-size:74px;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-0.02em;
    color:#fff;
    

}

.visual-inner .txt{

    margin-top:26px;
    font-size:20px;
    line-height:1.6;

}
.visual-inner h2 span{
    display:block;
    opacity:0;
    transform:translateY(40px);
    animation:titleUp .8s cubic-bezier(.16,1,.3,1) forwards;
    font-family: 'Outfit';
}

.visual-inner h2 span:nth-child(1){
    animation-delay:.2s;
}

.visual-inner h2 span:nth-child(2){
    animation-delay:.45s;
}

.visual-inner .txt{
    opacity:0;
    transform:translateY(25px);
    animation:titleUp .8s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.75s;
}
@keyframes titleUp{

0%{

    opacity:0;

    transform:translateY(40px);

}

100%{

    opacity:1;

    transform:translateY(0);

}

}
.video-control {
  position: absolute;
  right: 60px;
  bottom: 50px;
  z-index: 5;

  display: flex;
  gap: 10px;
}

.video-control button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  color: #111;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.video-control button:hover {
  background: #fff;
}

@media (max-width: 768px) {
  
  .visual-inner {
    width: calc(100% - 40px); padding-left:10px;
  }

  .visual-inner h2 {
    font-size: 47px;
  }

  .visual-inner .txt {
    font-size: 18px;
  }

  .video-control {
    right: 24px;
    bottom: 28px;
  }
}
@media(max-width: 767.98px) {
    .main-visual {width:100%;height:380px;}
    .visual-inner {padding-left:15px; }
    .visual-inner h2 { font-size: 35px;  }
    .visual-inner .txt { font-size: 14px;  }
    .video-control button { width: 30px; height: 30px;font-size: 17px;}
}

.main-top-side {
    -ms-flex-preferred-size:19%;
    flex-basis:19%;
    max-width:410px;
    min-width:410px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    gap:24px
}
@media(max-width: 1399.98px) {
    .main-top-side {
        gap:16px
    }
    
}
@media(max-width: 1199.98px) {
    .main-top-side {
        max-width:none;
        min-width:0;
        margin-top:16px
    }
    
}
@media(max-width: 767.98px) {
    .main-top-side {
        margin-top:10px;
        gap:10px
    }
    
}
.main-top .top-link {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    padding:30px;
    background:#fff;
    border-radius:24px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
@media(max-width: 767.98px) {
    .main-top .top-link {  padding:20px;}
}

.mTabList{width:100%;}
.mTab{display:flex; align-items:flex-start; border-bottom:1px solid #E5E8EB;gap:24px; margin-top:10px}


/* 메인 탭 */

.mTab li a {
    font-size: 17px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    padding: 12px 0;
    color: #999;
    border-bottom: 2px solid transparent;
}

.mTab li a.on {
    color: #000;
    border-bottom-color: #000;
}
.mDetail>div{display:none;}


.mDetail>div.on {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.mDetail .list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: start;
    gap: 12px;
    margin-top: 25px;
    margin-right: -12px;
    width: 100%;
}
.mDetail .list li {
    width: calc(50% - 10px);
    flex-shrink: 0;
}

@media(max-width: 1024px) {
    .mDetail .list li { width: calc(33.33% - 10px);}
}

@media(max-width: 767.98px) {
    .mDetail .list li { width: calc(50% - 10px);}
}

.mDetail .list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
    padding: 0 6px;
    min-height: 100px; 
    transition:.3s cubic-bezier(.2,.8,.2,1);
}
.mDetail .list li a:hover {transform:translateY(-5px);}

.mDetail .list li .icoBx {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    padding:10px;
    background-color: #e5effe;
    border-radius: 8px;;
}
.mDetail .list li .icoBx img {
    display: block;
    width: 100%;
    height: 100%;
   
}
.mDetail .list li a>.tit {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    letter-spacing: -0.51px;;
}

.icon {
    display:inline-block;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    text-indent:-9999px;
    vertical-align:middle;
    width:1.3333333333rem;
    height:1.3333333333rem;
    overflow:hidden
}

.sect { margin-top: 120px}


@media(max-width: 1199.98px) {
    .sect { margin-top: 60px }
}

@media(max-width: 767.98px) {
    .sect { margin-top: 40px}
}

.main-top2 {}
.main-top2 .sect-hd{width:fit-content;}
.main-top2 h3 { font-size:40px; letter-spacing: -3px;font-weight: 400; line-height: 1.2;}

.paint-text { --paint-before: #ccc;--paint-after: #000;   }

@media(max-width: 1199.98px) {
    .paint-text { font-size:30px;letter-spacing: -2px;}
}

@media(max-width: 767.98px) {
    .paint-text { font-size:20px;letter-spacing: -1px;line-height: 1.3;}
}

.paint-white{--paint-before: #333; --paint-after:#fff;}
.paint-text>span {  display:block;  position:relative;  white-space:nowrap; color: var(--paint-before);}
.paint-text.active>span::after {animation: textcolor 1s both; animation-delay: var(--delay); }
.paint-text > span::after {
    content: attr(data-copy);
    position: absolute;
    top: 0;
    left: 0;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--paint-after);
    animation: none;
}

@-webkit-keyframes textcolor {
    0% {
        max-width:0
    }
    100% {
        max-width:100%
    }
    
}
@keyframes textcolor {
    0% {
        max-width:0
    }
    100% {
        max-width:100%
    }
    
}


.ai-bubble-sectiondiv{width:100%;}
.bubble-wrap { width:fit-content;  min-height: 310px;  padding: 40px 50px;  display: flex;  align-items: center;  overflow: hidden;  margin:0 auto}

.ai-bubble {
  border-radius: 50%;
  margin-left: -28px;
  flex-shrink: 0;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity:1;
  transform: none;
  animation: none;
  
}
.ai-bubble:first-child {  margin-left: 0;}

.bubble-item {
  margin-left: -32px;
  flex-shrink: 0;
  position: relative;

  opacity: 0;
  transform: translateY(24px) scale(.88);
  animation: none;
}

.bubble-wrap.active .bubble-item {
  animation: bubbleIn .95s cubic-bezier(.22,.61,.36,1) forwards;
}

.bubble-wrap.active .bubble-item:nth-child(1){animation-delay:0s;}
.bubble-wrap.active .bubble-item:nth-child(2){animation-delay:.12s;}
.bubble-wrap.active .bubble-item:nth-child(3){animation-delay:.24s;}
.bubble-wrap.active .bubble-item:nth-child(4){animation-delay:.36s;}
.bubble-wrap.active .bubble-item:nth-child(5){animation-delay:.48s;}
.bubble-wrap.active .bubble-item:nth-child(6){animation-delay:.60s;}
.bubble-wrap.active .bubble-item:nth-child(7){animation-delay:.72s;}
.bubble-wrap.active .bubble-item:nth-child(8){animation-delay:.84s;}

/* 크기 차이 */
.bubble-item:nth-child(1) .ai-bubble{
    width:220px;
    height:220px;
}

/* 2. 언어 */
.bubble-item:nth-child(2) .ai-bubble{
    width:190px;
    height:190px;
}

/* 3. 이미지/비전 */
.bubble-item:nth-child(3) .ai-bubble{
    width:200px;
    height:200px;
}

/* 4. 특화도메인 */
.bubble-item:nth-child(4) .ai-bubble{
    width:180px;
    height:180px;
}

/* 5. 로보틱스 */
.bubble-item:nth-child(5) .ai-bubble{
    width:170px;
    height:170px;
}

/* 6. AI 에이전트 */
.bubble-item:nth-child(6) .ai-bubble{
    width:210px;
    height:210px;
}

/* 7. 음성 */
.bubble-item:nth-child(7) .ai-bubble{
    width:170px;
    height:170px;
}

/* 8. 기타 */
.bubble-item:nth-child(8) .ai-bubble{
    width:210px;
    height:210px;
}
/* 투명도 */
.blue {  background: rgba(0, 52, 176, .85); border:1px solid #16398b;}
.sky {  background: rgba(0, 127, 240, .90);border:1px solid #2269a8;}
.teal {  background: rgba(0, 191, 169, .91);border:1px solid #168a7d;}
.green {  background: rgba(104, 190, 34, .90);border:1px solid #558a2b;}
.orange {  background: rgba(244, 127, 32, .91);border:1px solid #aa6329;}
.purple {  background: rgba(125, 43, 223, .92);border:1px solid #61309e;}
.pink {  background: rgba(228, 81, 123, .90);border:1px solid #a04761;}
.gray {  background: rgba(103, 93, 89, .88);border:1px solid #554f4c;}

.ai-bubble span {  font-size: 18px;  font-weight: 600;  margin-bottom: 10px;  letter-spacing: -0.04em;}
.ai-bubble strong {  font-size: 36px;  font-weight: 700;  line-height: 1;  font-family: 'Montserrat';}

.ai-bubble em { font-size: 18px;  font-style: normal;  margin-left: 4px;  font-weight: 700;}


@keyframes bubbleIn{
0%{
    opacity:0;
    transform:
        translateY(24px)
        scale(.88);
}

55%{
    opacity:1;
    transform:
        translateY(-1px)
        scale(1.015);
}

75%{
    transform:
        translateY(1px)
        scale(.997);
}

90%{
    transform:
        translateY(0)
        scale(1.002);
}

100%{
    opacity:1;
    transform:
        translateY(0)
        scale(1);

}
}
@media (max-width:1024px){
   .bubble-wrap {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding: 20px 12px 30px;
        justify-items: center;
        align-items: center;
        overflow: visible;
    }

    .bubble-item {
        margin: 0 !important;
    }

    .bubble-item .ai-bubble {
        width: 145px !important;
        height: 145px !important;
        margin-left: 0 !important;
    }

    .bubble-item:nth-child(1) {
        grid-column: 1 / 3;
        margin-bottom: -12px !important;
    }

    .bubble-item:nth-child(2),
    .bubble-item:nth-child(3) {
        margin-top: -8px !important;
    }

    .bubble-item:nth-child(4) {
        grid-column: 1 / 3;
        margin-top: -10px !important;
        margin-bottom: -16px !important;
    }

    .bubble-item:nth-child(5) {
        margin-right: -20px !important;
    }

    .bubble-item:nth-child(6) {
        margin-left: -20px !important;
    }

    .bubble-item:nth-child(7),
    .bubble-item:nth-child(8) {
        margin-top: -10px !important;
    }

    .ai-bubble span {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .ai-bubble strong {
        font-size: 28px;
    }

    .ai-bubble em {
        font-size: 13px;
    }

}

@media (max-width:1024px){
   .bubble-wrap {
        
        grid-template-columns: repeat(2, 1fr);
      
    }
}

.ai-list {width: 100%; padding: 18px 15px 28px;  box-sizing: border-box;}

.ai-list-row {
  display: grid;
  grid-template-columns: 220px 380px 1fr;
  align-items: center;
  min-height: 54px;
  margin-bottom: 10px;
  padding: 0 56px;
  background: #fff;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 14px;
}

.ai-list-row:last-child {
  margin-bottom: 0;
}

.ai-title {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-category {
  font-weight: 600;
  white-space: nowrap;
}

.ai-category b {
  margin: 0 8px;
  color: #999;
  font-weight: 300;
}

.ai-index {
  font-weight: 400;
  white-space: nowrap;
}

/* 컬러 */
.reasoning .ai-title { color: #0046d5; }
.language .ai-title { color: #0089ff; }
.vision .ai-title { color: #00a99a; }
.specialized .ai-title { color: #30a000; }
.robotics .ai-title { color: #d88400; }
.agents .ai-title { color: #7f35d9; }
.speech .ai-title { color: #d64287; }

@media (max-width: 1200px) {
  .ai-list-row {
    grid-template-columns: 200px 320px 1fr;
    padding: 0 36px;
  }
}

@media (max-width: 1024px) {
  .ai-list-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
    border-radius: 24px;
    padding: 18px 24px;
  }

  .ai-category,
  .ai-index {
    white-space: normal;
  }
}

.main-top3 {position: relative;min-height: 400px;padding: 100px 20px 80px;background-color: #151440; text-align: center; text-align: center;  overflow: hidden; box-sizing: border-box;}

.main-top3::after{
    content:"";
    position:absolute;
    left:48%;
    bottom:-200px;      /* ↓ 원하는 만큼 내리기 */
    transform:translateX(-50%);
    width:667px;
    height:515px;
    background:url("../img/main/main-top3-b.png") no-repeat center;
    background-size:contain;
    z-index:1;
    pointer-events:none;
     animation:bgFloat 8s ease-in-out infinite;
}
.main-top3 .in{ position: relative;  z-index: 2;}

.main-top3 h3{color:#fff; text-align: center; font-size:50px; letter-spacing: -1px;line-height:1.2;}
.main-top3 h4{margin-top:20px; color:#fff; text-align: center; font-size:20px; letter-spacing: -1px;line-height:1.3; font-weight: 400;;}
.main-top3 p{color:#00fff6; text-align: center; font-size:16px; margin-bottom:20px; font-weight:800;}
.main-top3 p span{font-size:30px;  font-family: 'Domine',serif;font-weight:700;}

.main-top3::after {
  animation: bgFloat 10s ease-in-out infinite;
}
@media (max-width: 1023.98px) {
    .main-top3 {padding: 80px 20px 50px;}
    .main-top3 h3{font-size:40px;}
    .main-top3 h4{font-size:16px;margin-bottom:20px;}
}
@media (max-width: 767.98px) {
    .main-top3 {padding: 70px 10px 50px;}
    .main-top3 h3{font-size:30px;}
    .main-top3 h4{font-size:14px;}
}
@keyframes bgFloat{

    0%{
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-1deg)
            scale(1);
    }

    25%{
        transform:
            translateX(-35%)
            translateY(-20px)
            rotate(1deg)
            scale(1.03);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-35px)
            rotate(0deg)
            scale(1.05);
    }

    75%{
        transform:
            translateX(-65%)
            translateY(-18px)
            rotate(-1deg)
            scale(1.03);
    }

    100%{
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-1deg)
            scale(1);
    }
}


.bt {
    border-radius:2em;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    font-weight:500;
    gap:.4444444444rem;
    font-size:1rem;
    border:0;
    color:#fff !important;
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
    line-height:1.5;
    background:#000;
    border:1px solid rgba(0,0,0,0);
    font-family:"Montserrat","Pretendard",sans-serif;
    min-width:9em;
    padding:.6666666667rem 1.7777777778rem
}
.bt:not(:has(.icon)) {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
@media(min-width: 1200px) {
    .bt {
        min-height:3.5555555556rem
    }
    
}
.bt .icon {
    width:16px;
    height:16px
}
.bt-sm {
    padding:.9em 1.7777777778rem;
    font-size:16px;
    min-width:7.2222222222rem;
    min-height:0
}
@media(max-width: 767.98px) {
    .bt-sm {
        font-size:14px
    }
    
}
.bt-lg {
    padding:1rem 2.2222222222rem;
    font-size:1.1111111111rem;
    line-height:1.6;
    min-width:15.5555555556rem;
    gap:.8888888889rem
}
@media(max-width: 767.98px) {
    .bt-lg {
        padding:.8888888889rem 2.2222222222rem
    }
    
}
.bt-lg .icon {
    width:1em;
    height:1em
}
.bt-block {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.bt-outline:hover,.bt-outline:focus{
    background:#666 !important;
    border-color:rgba(0,0,0,0) !important;
    color:#fff !important
}

.bt-outline {
    background:none;
    border-color:#000;
    color:#000 !important;
    background:#fff
}
.bt-outline .icon {
    -webkit-filter:brightness(0) contrast(100);
    filter:brightness(0) contrast(100)
}
.bt-outline:hover .icon,.bt-outline:active .icon {
    -webkit-filter:none;
    filter:none
}
.bt-wh {
    background:#fff;
    border-color:#fff;
    color:#000 !important
}
.bt-wh .icon {
    -webkit-filter:brightness(0) contrast(100);
    filter:brightness(0) contrast(100)
}
.bt-primary {
    background:var(--primary)
}
.bt-blue {
    background:var(--blue) 
}
.bt-blue:hover,.bt-blue:focus{
    background:#001c65 !important;
    
}

@media(max-width: 991.98px) {
    .bt {
        min-width:0 !important
    }
    
}
.bt-wrap {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-top:56px;
    gap:1.3333333333rem
}
.bt-wrap.row {
    gap:0;
    row-gap:calc(var(--gutters-margin)*-2)
}
.bt-wrap.row .bt-lg {
    min-width:0 !important;
    width:100%;
    white-space:nowrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
@media(min-width: 992px) {
   
    .bt-wrap.wide:has(.bt-lg:nth-child(2):last-child) .bt-lg {
        min-width:20rem
    }
    
}
@media(max-width: 767.98px) {
    .bt-wrap {
        margin-top:32px;
        gap:10px
    }
    
}
@media(max-width: 575.98px) {
    .bt-wrap .bt:first-child:last-child {
        width:100%
    }
    
}

.icon-write {
    background-image:url(../img/main/write.svg)
}
.icon-plus-dark {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-dark.svg)
}
.icon-plus-gray {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-gray.svg)
}
.icon-plus-red {
    width:.8888888889rem;
    height:.8888888889rem;
    background-image:url(../img/main/plus-red.svg)
}

.icon-close-gray {
    position:absolute;
    right:12px;
    top:12px;
    background-image:url(../img/main/icon-close-gray.svg)
}
.icon-arr {
    background-image:url(../img/main/bt_arr.svg)
}
.icon-plus {
    background-image:url(../img/main/plus.svg)
}
.icon-goto {
    background-image:url(../img/main/goto.svg)
}
.icon-go {
    background-image:url(../img/main/icon-go.svg)
}
.icon-go-white {
    background-image:url(../img/main/icon-go.svg)
}
.icon-link {
    background-image:url(../img/main/link.svg)
}
.main-top4 {width:100%; }
.main-top4 h3{color:#000; text-align: center; font-size:60px; letter-spacing: -1.7px;line-height:1.5;}
.main-top4 h4{ text-align: center; font-size:20px; letter-spacing: -1px;line-height:1.3; font-weight: 400;;}

.case-section { padding: 70px 0 65px; overflow: hidden;}

.case-swiper { width: 100%; padding-left: 30px; padding-right: 30px;  box-sizing: border-box;  overflow: visible;  cursor: grab;}
   
.case-swiper:active {  cursor: grabbing;}

.case-swiper .swiper-slide {  width: 420px;}

.case-card { display: block;  color: #000;  text-decoration: none;  background-color: #fff;border-radius: 0px 0px 9px 9px;overflow: hidden;}
.case-card:hover {  color: #ff6600;  }

.case-card img {  display: block;  width: 100%;  height: 290px;  object-fit: cover;  border-radius: 9px 9px 0px 0px;  margin-bottom: 20px;transition:all 0.8s ease; }
.case-card img:hover {transform:scale(1.02); }
.case-card div {margin:30px;}
.case-card p {display: inline-block; padding: 6px 20px;background: #00cc4d; border-radius: 4px;font-size: 14px;color:#fff; font-weight: 600;margin-right:3px;}

.case-card p.c01 {background:#00CC4D;} /* Green */
.case-card p.c02 {background:#FF1F83;} /* Pink */
.case-card p.c03 {background:#7D39FF;} /* Purple */
.case-card p.c04 {background:#0096FF;} /* Blue */
.case-card p.c05 {background:#FF7A00;} /* Orange */
.case-card p.c06 {background:#00C7B7;} /* Teal */
.case-card p.c07 {background:#FFD400; color:#111;} /* Yellow */
.case-card p.c08 {background:#FF4D4D;} /* Red */
.case-card p.c09 {background:#3E5BFF;} /* Indigo */
.case-card p.c10 {background:#8BCF00;} /* Lime */
.case-card p.c11 {background:#8A5A3C;} /* Brown */
.case-card p.c12 {background:#00B8D9;} /* Cyan */
.case-card p.c13 {background:#D63384;} /* Rose */
.case-card p.c14 {background:#5A54FF;} /* Violet */
.case-card p.c15 {background:#00A86B;} /* Emerald */
.case-card p.c16 {background:#FF5C39;} /* Coral */
.case-card p.c17 {background:#6E44FF;} /* Deep Purple */
.case-card p.c18 {background:#009688;} /* Turquoise */
.case-card p.c19 {background:#E91E63;} /* Magenta */
.case-card p.c20 {background:#3F51B5;} /* Royal Blue */
.case-card p.c21 {background:#F57C00;} /* Deep Orange */
.case-card p.c22 {background:#43A047;} /* Forest Green */
.case-card p.c23 {background:#0088CC;} /* Ocean Blue */
.case-card p.c24 {background:#C2185B;} /* Raspberry */

.case-card strong {  display: block;  font-size: 22px;  line-height: 1.4;  font-weight: 600;  letter-spacing: -0.05em; padding-bottom:10px;padding-top:10px;}
.case-card span {display:block; width:100%; max-width:100%; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-0.04em; color:#555555; display: -webkit-box;
    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    overflow: hidden;   white-space: normal;   line-height: 1.4;  max-height: calc(1.4em * 2); /* 2줄 높이 */}

.case-swiper .swiper-wrapper{  transition-timing-function:linear !important;}

@media(max-width: 1023.98px) {
    .main-top4 h3{font-size:50px;}
    .main-top4 h4{font-size:18px;}
}

@media(max-width: 767.98px) {
    .main-top4 h3{font-size:40px;}
    .main-top4 h4{font-size:15px;}
    .case-section { padding: 50px 0 40px;  }
    .case-card img { height: 180px; }
    .case-card strong {font-size: 18px;   padding:10px 20px 30px 20px}
    .case-card p {margin:10px 20px 0px 20px;}
    .case-swiper { padding-left: 20px;   padding-right: 20px;  overflow: visible;  }
    .case-swiper .swiper-slide { width: 82vw;  max-width: 360px; }
    .case-section .bt-wrap{margin:30px 30px 0 30px!important;}
}


.main-top5{background-color: #fff; padding:100px 0;}
.main-top5 h3{color:#000; font-size:50px; letter-spacing: -1px;line-height:1.2; text-align: center;}
.main-top5 h3 span{ font-style: italic;}

.main-top5 h4{color:#000;margin-top:20px;font-size:20px; letter-spacing: -1px;line-height:1.3; font-weight: 400;margin-bottom:50px;text-align: center;;}





.hashtagmain {display:flex; flex-wrap:wrap; justify-content:center;  gap:8px;}
.hashtagmain > a {padding: 10px 28px; background: #0046ff; border: 1px solid #0046ff; border-radius: 50px;  font-size: 15px; transition: all ease .2s; color: #fff; letter-spacing: 0;}
.hashtagmain > a:hover{background:#ff6400; color:#fff; border-color:#ff6400;}


.insightlist { margin-top:80px; display: grid;  grid-template-columns: repeat(4, minmax(0, 1fr));  gap: 32px;}
.insightlist .insight-item {min-width: 0; }
.insightlist .insight-item {display:block; position:relative; transition:all 0.3s ease; overflow:hidden;}
.insightlist .insight-item .thumbnail {aspect-ratio:1.45; border-radius:24px; overflow:hidden;}
.insightlist .insight-item .thumbnail img {width:100%; height:100%; object-fit:cover; transition:all 0.2s ease;}
.insightlist .insight-item:hover .thumbnail img {transform:scale(1.02);}
.insightlist .insight-item .title {margin-top:20px; font-size:22px; font-weight:600; line-height:1.4; letter-spacing:-0.08em; color:#000; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; word-break:break-all;}
.insightlist .insight-item .date {margin-top:20px; font-size:15px; font-weight:400; line-height:1.4;  }



@media (max-width: 1200px) {
    .insightlist {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .insightlist .insight-item {margin-bottom:30px;}
    .insightlist .insight-item .title {font-size:20px; }
    .insightlist .insight-item .date {margin-top:5px; font-size:15px;}
}

@media (max-width: 640px) {
    .main-top5 h3{font-size:35px; }
    .main-top5 h4{margin-top:10px;font-size:15px;}
    .insightlist { grid-template-columns: 1fr;  gap: 20px;margin-top:50px;}
    .insightlist .insight-item .title {font-size:18px; }
    .insightlist .insight-item .date { font-size:14px;}
    .hashtag > a {padding: 5px 10px;  font-size: 14px;}
}



.ai-page {background:linear-gradient(90deg, #13135c 0%, #07092b 28%, #07092b 100%);}
.visual {padding-top:100px; display: grid;  grid-template-columns: 1fr 650px;  gap: 80px; min-height:450px;}
.visual h1 {color:#fff!important; font-size: 50px!important; font-weight:800!important; line-height: 1.5; letter-spacing: -0.04em;}
.visual p {  color: #fff;  font-size: 18px;margin-top:20px;}

.visual-orb{ background:url("../img/main/future-orb.png") no-repeat center; background-size:contain;}

.chapter02 {background-color: #19255b;}
.chapter03 {background-color: #173030;}
.chapter04 {background-color: #241a37;}
.chapter06 {background-color: #095c86;}
.chapter07 {background-color: #02052e;}

.chapter-section { position: relative; padding: 80px 0 80px; color: #fff;}
.chapter-inner { width:100%;display: grid; grid-template-columns: 130px 1fr;  gap: 60px; position: relative;}
.chapter-side { position: relative; min-height: 100%;  display: flex;  justify-content: flex-start;}
.chapter-side p { font-size: 32px; font-weight: 800;  line-height: 1.2; color: #fff;  writing-mode: vertical-rl; text-orientation: upright;}
.chapter-line {position: absolute;top: 16px; left: 98px;  width: 1px;  height: calc(100% + 70px);  background: rgba(255, 255, 255, 0.55);}
.chapter-dot { position: absolute; top: 10px;left: 87px;z-index: 2;width: 26px; height: 26px; border-radius: 50%;  background: #fff; box-shadow:0 0 12px rgba(143, 250, 255, 0.9), 0 0 28px rgba(38, 210, 255, 0.9);}

.chapter-cont {  padding-top: 6px;font-size: 16px;color:#fff; }
.chapter-label { display: block; font-size: 22px;  font-weight: 800;  color: #8bedff;line-height: 1.5; }
.chapter-copy { font-size: 18px; font-style: italic; }
.chapter-cont h2 {font-size: 34px; line-height: 1.5;  font-weight: 800;  margin:5px 0;color:#fff; }
.chapter-desc {}

.history-list { display: grid;  gap: 12px;  margin-top: 20px;}
.history-item {  padding: 18px 24px;  border-radius: 4px;  background:#3e3d64}
.history-item strong {  display: block;   margin-bottom: 5px;  font-size: 22px;  font-weight: 800;  color: #8bedff;}
.history-item h3 { margin: 0 0 3px;  font-size: 16px;  line-height: 1.4;  font-weight: 800;color:#fff; }
.history-item p {  font-size: 15px;  }

.service-area { margin-top: 50px;}
.service-title {  display: flex; align-items: center;  gap: 12px;  margin-bottom: 18px;}
.service-title span { flex-shrink: 0;  font-size: 15px;  font-weight: 800;}
.service-title::after { content: "";  width: 100%;  height: 1px;  background: rgba(255, 255, 255, 0.35);}

.service-grid {  display: grid;  grid-template-columns: repeat(4, 1fr); gap: 10px;}
.service-grid div {min-height: 76px; padding: 17px 20px; border-radius: 4px;  background:#3e3d64;}
.service-grid div.ch02 {background:#47517c;}
.service-grid div.ch03 {background:#455959;}
.service-grid div.ch04 {background:#50485f;}

.service-grid strong { display: block;  margin-bottom: 6px;  font-size: 13px;  font-weight: 900;  color: #8bedff;}
.service-grid p {font-size: 13px;  line-height: 1.45;  color: #fff;}

@media (max-width: 1024px) {
    .visual {padding-top:60px; grid-template-columns: 1fr 350px;  gap: 20px; min-height:400px;}
    .visual h1 { font-size: 40px!important;}
    .visual p { font-size: 16px;}
    .visual-orb{ background-position: top;;}
    .chapter-section {    padding: 30px 0; }
    .chapter-inner { grid-template-columns: 90px 1fr;  gap: 30px;}

    .chapter-side p { font-size: 21px;  }
    .chapter-line {  left: 68px; }
    .chapter-dot {  left: 57px; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .visual { grid-template-columns: 1fr 250px;  gap: 0px; min-height:350px;}
    
}
@media (max-width: 640px) {
    .visual h1 { font-size: 28px!important; }
    .visual p { font-size: 14px;}
    .chapter-section { padding: 50px 0; }
    .chapter-inner { display: block;}
    .chapter-side { display: block;   margin-bottom:5px; }
    .chapter-side p { font-size: 24px; line-height: 1.2;writing-mode: horizontal-tb; text-orientation: initial;}
    .chapter-line, .chapter-dot {  display: none;  }
    .chapter-label { margin-bottom: 10px; font-size: 15px; }
    .chapter-copy { font-size: 15px; line-height: 1.6; }
    .chapter-cont h2 {font-size: 27px;line-height: 1.4;  }
    .chapter-desc { font-size: 14px;  }
    .history-list { margin-top: 25px;}
    .history-item { padding: 18px; width:100%;}
    .history-item p {  font-size: 13px;  }
    .service-grid { grid-template-columns: 1fr;    }
}

.chapter-card-grid {    display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 12px;  margin-top: 25px;}
.chapter-card {  padding: 30px 24px;  border-radius: 4px;  background:#47517c}
.chapter-card strong {  display: block;   margin-bottom: 5px;  font-size: 16px;  font-weight: 800;  color: #8bedff;}
.chapter-card h3 { margin: 0 0 3px;  font-size: 22px;  line-height: 1.4;  font-weight: 800;color:#fff; }
.chapter-card p {  font-size: 15px;  }

.wide-card { padding: 30px 24px; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; border-radius: 4px;  background:#47517c; margin-top:12px;}
.wide-card .wide-text strong {  display: block;   margin-bottom: 5px;  font-size: 18px;  font-weight: 800;  color: #8bedff;}
.wide-card .wide-text h3 { margin: 0 0 3px;  font-size: 22px;  line-height: 1.4;  font-weight: 800;color:#fff; }
.wide-card .wide-text p {  font-size: 15px;  }

.wide-stats {  display: grid;  grid-template-columns: repeat(3, 1fr);}
.wide-stats div { text-align: center; padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, 0.35);}
.wide-stats div:first-child {  border-left: 0;}
.wide-stats span { display: block; margin-bottom: 14px; font-size: 14px;}
.wide-stats strong { font-size: 30px; font-weight: 900;}
.wide-stats em { margin-left: 2px; font-size: 13px;}

@media (max-width: 768px) {
    .chapter-card h3 { font-size: 20px; }
    .wide-card { display: block;}
    .wide-stats div { margin-top:20px}
    .wide-stats span {margin-bottom: 5px;}

}

@media (max-width: 640px) {
    .chapter-card-grid {display: block; }
    .chapter-card {margin-bottom:12px;}
    .wide-stats {grid-template-columns: repeat(1, 1fr);}
    .wide-stats div {padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); border-left:0}
    .wide-stats div:last-child {  border-bottom: 0;}

}

.trust-grid {    display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 14px;  margin-top: 25px;}
.trust-card {  padding: 30px 24px;  border-radius: 4px;  background:#455959}
.trust-card.tool {  background:#50485f}

.trust-card strong {  display: block;   margin-bottom: 5px;  font-size: 16px;  font-weight: 800;  color: #8bedff;}
.trust-card h3 { margin: 0 0 3px;  font-size: 22px;  line-height: 1.4;  font-weight: 800;color:#fff; }
.trust-card p {  font-size: 15px;  }

.trust-list { display: grid; gap: 12px; margin: 14px 0 0;  padding: 0;  list-style: none;}
.trust-list li { position: relative;  padding: 21px 28px 21px 54px;  border-radius: 4px;  background:#455959; font-size: 18px;font-weight:600; }
.trust-list li::before { content: "";  position: absolute;  left: 34px;  top: 50%;  width: 5px; height: 5px; border-radius: 50%; background: #6ff5ff; transform: translateY(-50%);}

@media (max-width: 768px) {
    .trust-card {  padding: 30px 18px;}
    .trust-card h3 { font-size: 20px; }
}

@media (max-width: 640px) {
    .trust-grid {display: block;}
    .trust-card {margin-bottom:14px}
    .trust-list li { font-size: 16px; }
}

.roadmap-list {display: grid; gap: 20px;margin-top: 25px;}

.roadmap-item {
    display: grid;
    grid-template-columns: 36px 1fr 150px;
    align-items: center;
    gap: 24px;
    min-height: 132px;
    padding: 28px 36px 28px 28px;
    border-radius: 4px;
    background: rgba(83, 87, 126, 0.72);
    color: #fff;
}

.roadmap-num { font-size: 18px; font-weight: 900;  color: #63eaff;}
.roadmap-text h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.3;  color:#fff;}
.roadmap-text p {font-size: 15px; color:#fff;}

.roadmap-status {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 30px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 14px;
    color: #fff;
}

.roadmap-status.green {  background: #01896b;}
.roadmap-status.pink { background: #b40072;}
.roadmap-status.blue {  background: #0084ff;}
.roadmap-status.brown { background: #7e6154;}

@media (max-width: 768px) {
    .roadmap-text h3 {font-size: 20px;}

}

@media (max-width: 640px) {
    .roadmap-list {display: block;}
    .roadmap-item {display: block;margin-bottom:20px;}
    .roadmap-status {margin-top:20px;}
    .roadmap-text p {font-size: 14px;}
}

.package-grid{  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px;}
.package-card{ display:flex; flex-direction:column;  padding:30px 20px;  border:1px solid #44dfff; border-radius:4px; background:#063a55;}
.package-card .num{ margin-bottom:10px; font-size:14px;  font-weight:900; color:#fff;}
.package-card .cate{ margin-bottom:10px; font-size:14px;  font-weight:900;  color:#3fd8ff;}

.package-card h3{ margin:0 0 16px; font-size:22px;   font-weight:800;  line-height:1.3;  color:#fff;}

.package-card p{ font-size:15px; color:#fff;}
.package-card ul{  margin-top:10px;}
.package-card li{ position:relative; padding-left:14px; margin-bottom:3px; font-size:14px; line-height:1.3; color:rgba(255,255,255,.72);}
.package-card li::before{ content:"-"; position:absolute;  left:0;}
.package-card a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:132px;
    height:40px;
    margin:26px auto 0;
    border-radius:999px;
    background:#edf1f6;
    color:#0d1636;
    font-size:14px;
    font-weight:800;
    transition:.3s;
}

.package-card:hover{ transform:translateY(-8px);  transition:.35s;}
.package-card:hover a{  background:#39d8ff;  color:#fff;}

@media (max-width: 1024px) {
    .package-grid{  grid-template-columns:repeat(2,1fr); gap:14px;}

}
@media (max-width: 767.98px) {
    .package-grid{  grid-template-columns:repeat(1,1fr); gap:14px;}
}

.cta-list{ text-align: center; margin-top:30px}
.cta-list h3 { font-size:40px; font-weight: 800; line-height: 1.3;  color:#fff; letter-spacing: -1px;margin-bottom:20px;;}
.cta-list p {font-size: 20px; color:#fff;margin-bottom:20px;;}

@media (max-width: 768px) {
    .cta-list h3 { font-size:30px;margin-bottom:10px;;}
    .cta-list p {font-size: 18px;}
}

@media (max-width: 640px) {
    .cta-list h3 { font-size:22px;}
    .cta-list p {font-size: 14px;}
}


.ft{background:#000;color:#fff;padding:60px 0px;font-size:.8333333333rem}

@media(min-width: 1600px){
    .ft{ padding-left:66px; padding-right:66px    }
}

@media(max-width: 1199.98px){
    .ft{ padding:50px 0px; }
}

.ft-btm{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:24px;align-items: center;}
.ft-btm-hd{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

.ft-side{width:100%;}


.ft-info img{width:230px; margin-bottom:20px;}
.ft-info>div{margin-bottom:4px;display:-webkit-box;display:-ms-flexbox;display:flex}
.ft-info span:not(:last-child){padding-right:1.3333333333rem;position:relative}
.ft-info span:not(:last-child)::after{content:"";position:absolute;right:.6666666667rem;border-left:1px solid #fff;height:8px;top:50%;margin-top:-4px}
.ft-info a{font-size:22px; letter-spacing: -0.5px;}


@media(max-width: 1199.98px){
    .ft-info>div{-ms-flex-wrap:wrap;flex-wrap:wrap}
}

.ft-sns{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;margin-right:24px}
.ft-sns .icon{width:43px;height:43px; display: block;}
.ft-sns .icon-blog{background-image:url(../img/main/icon_blog.svg);}
.ft-sns .icon-ytb{background-image:url(../img/main/icon_you.svg);}

@media(max-width: 768px){
    .ft-side{font-size:12px;;}
    .ft-info a{font-size:19px;}
    .ft-info img{width:180px; }

}

.ft .fnb{font-size:15px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:40px}

@media(max-width: 1399.98px){
    .ft .fnb{-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px 16px}
}
@media(max-width: 1199.98px){
    .ft .fnb{ font-size:.875rem}
}

.ft .copy{letter-spacing:0;opacity:.6;margin-top:40px}

@media(max-width: 1199.98px){
    .ft .copy{margin-top:20px}
}
.family_site {position:relative;}
.family_site .family_site_btn {display:flex; align-items:center; justify-content:space-between; width:210px; height:50px; padding:10px 20px; border-radius:4px; background:#212121; box-sizing:border-box;}
.family_site .family_site_btn .tit {font-size:14px; line-height:20px; letter-spacing:-0.05em; color:#ffffff;}
.family_site .family_site_btn .ico {display:block; width:6px; height:5px; background:url('../img/main/ico_family_arrow.svg')center center no-repeat; background-size:6px 5px; transition:all 0.3s ease;}
.family_site .family_site_btn.open .ico {transform:rotate(180deg);}
.family_list {display:none; position:absolute; bottom:55px; left:0; width:100%; padding:20px; border-radius:4px; background:#212121; box-sizing:border-box;}
.family_list .family_link {display:block; padding:4px 0; font-size:14px;  line-height:26px; letter-spacing:-0.05em; color:#fff; transition:all 0.3s ease;}
.family_list .family_link:hover, .footer_top .family_site_box .family_link:focus {color:#ff6600;}


/* floating */
#gotocta { position: fixed;  right: 2rem;  bottom: 8.5rem; z-index: 999;  cursor: pointer;  transition: 0.5s all;}
#gotocta a{width:80px; height:80px; background: #ff6400; border-radius:50%;  transition: all 0.4s ease-in-out; display: flex;align-items: center; justify-content: center;  }
#gotocta a img{ opacity: 1;  width: 35px;  height: 35px;  }
#gotocta a:hover { background: #ff1800;-webkit-transform: translateY(-10px);transform: translateY(-10px);}

#gnb-gotop { position: fixed; right: 2rem;  bottom: 3rem; z-index: 999;  cursor: pointer;  transition: 0.5s all;   z-index: 999;}
#gnb-gotop a {width:80px; height:80px; background: #0046ff;    border-radius: 50%;    transition: all 0.3s;transition: all 0.3s;display: flex;align-items: center; justify-content: center; }
#gnb-gotop a img {   opacity: 1;   width: 32px;   height: 32px;}
#gnb-gotop a:hover {-webkit-transform: translateY(-10px);transform: translateY(-10px); background-color: #00aeff;transition: all 0.3s; }

@media(max-width: 768px){
    #gotocta { right: 1rem; bottom: 6.8rem; }
    #gotocta a{width:66px; height:66px; }
    #gotocta a img{width: 30px;  height: 30px;  }

    #gnb-gotop { right: 1rem;bottom: 2rem;}
    #gnb-gotop a {width:66px; height:66px; }
    #gnb-gotop a img {  width: 30px;   height: 30px;}

}

@media(max-width: 400px){
    #gotocta { bottom: 5.2rem; }
    #gotocta a{width:50px; height:50px; }
    #gnb-gotop { bottom: 1.5rem;}
    #gnb-gotop a {width:50px; height:50px; }
}

.tabwrap { display: flex; width: 100%; margin-top:30px;}
.tabwrap.t1 { width: calc(100% + 10px); margin-left: -5px;}
.tabwrap.t1 li {  position: relative;  box-sizing: border-box;  width: 100%;  padding: 0 5px; text-align: center;}
.tabwrap.t1 .tab {display: inline-block;vertical-align: middle;  position: relative; box-sizing: border-box;  width: 100%;  padding: 7px 0;  border-radius: 30px; border: var(--gray) solid 3px;background-color: var(--gray); font-size: 20px; font-weight: 700; line-height: 40px;letter-spacing: -0.8px; transition: 0.3s;}
.tabwrap.t1 .tab.on {  border-color: var(--blue); background-color: var(--white); color: var(--blue); font-weight: 800;}

@media(max-width: 767.98px){
   .tabwrap { display: block;}
   .tabwrap.t1 .tab { font-size: 16px; margin-bottom:10px;}
 
}

.quick-banner {position: relative; width: 100%; height: 190px;overflow: hidden; border-radius: 24px;}
.quick-banner-track { display: flex;  width: 200%; height: 100%; animation: quickBannerSlide 8s infinite ease-in-out;}
.quick-banner-item { position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: 50%; height: 100%; flex-shrink: 0;padding: 30px 28px;box-sizing: border-box;color: #fff;text-decoration: none;}

.quick-banner-item.banner01 {  background-image: url("/img/main/main-right-bg.jpg");background-position: center; background-size: 100%;transition: background-size .6s ease; }
.quick-banner-item.banner02 { background-image: url("/img/main/main-right-bg02.jpg");background-position: center; background-size: 100%;transition: background-size .6s ease; }
.quick-banner-item:hover{background-size: 110%;color:#fff;}

.quick-banner-text { position: relative;  z-index: 2;}
.quick-banner-text strong { display: block; margin-bottom: 10px; margin-top:10px; font-size: 24px; font-weight: 700; line-height: 1.3;}
.quick-banner-text p { margin: 0;  font-size: 15px; line-height: 1.5;}
.quick-banner-item .icon-more{margin-bottom:0;}


/* 1번 배너 정지 → 2번으로 이동 → 2번 정지 → 다시 1번 */
@keyframes quickBannerSlide {
    /* 1번 배너 정지 */
    0%,
    40%{
        transform:translateX(0);
    }

    /* 1번 → 2번 이동 */
    50%{
        transform:translateX(-50%);
    }

    /* 2번 배너 정지 */
    50%,
    90%{
        transform:translateX(-50%);
    }

    /* 2번 → 1번 이동 */
    100%{
        transform:translateX(0);
    }
}
.lnb{display:flex;justify-content:center; white-space:nowrap;overflow-y:auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:26px;font-weight:800;color:#ccc;;padding:0 var(--container-padding);}

@media(max-width: 767.98px){
    .lnb{gap:16px}
}
.lnb.nav{margin-top:2.3333333333rem;}
.lnb a{position:relative;padding-bottom:.8888888889rem;font-size:30px;}
.lnb a:after{content:"";position:absolute;bottom:0;left:50%;width:8px;height:8px;border-radius:100%;margin-left:-4px}
.lnb a:hover,.lnb a:focus{color:var(--blue)}
.lnb a.active{color:var(--blue)}
.lnb a.active::after{background:var(--blue)}

@media(max-width: 1199.98px){
    .lnb a{font-size:25px}
}

@media(max-width: 450px){
    .lnb a{font-size:18px}
    .lnb.nav{margin-top:1.3333333333rem;}
}
.contact-wrp {  display: grid; gap: 1.3333333333rem; grid-template-columns: repeat(2, 1fr); margin: 80px 0 ;}