@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --wh-ff: #FFF;
    --wh-ef: #EFF2F6;
    --wh-e0: #E0E8F2;

    --main-navy: #001F60;
    --main-blue: #0035A6;
    --main-blue2: #1E4DAF;
    --main-mint: #1AA7BF;
    --bl-11: #111;
    --bl-22: #222;
    --bl-33: #333;
    --bl-4b: #4B4B4B;
    --bl-51: #515151;
    --bl-66: #666;

    --visual-tit-size: clamp(22px, 2.5vw, 48px);

    /* --f36-size: 36px; */
    /* --f30-size: clamp(24px, 1.5625vw, 30px); */
    --f28-size: clamp(18px, 1.4583vw, 28px);
    /* --f26-size: clamp(20px, 1.3542vw, 26px); */
    /* --f24-size: clamp(18px, 1.2500vw, 24px); */
    /* --f22-size: clamp(18px, 1.1458vw, 22px); */
    /* --f21-size: clamp(17px, 1.0938vw, 21px); */
    --f20-size: clamp(16px, 1.0417vw, 20px);
    /* --f19-size: clamp(16px, 0.9896vw, 19px); */
    --f18-size: clamp(16px, 0.9375vw, 18px);
    /* --f16-size: clamp(16px, 0.8333vw, 16px); */
    /* --f15-size: 15px;
    --f14-size: 14px;
    --f13-size: 13px;
    --f12-size: 12px; */
}

.mob-br {
    display: none;
}

* {
    font-family: Pretendard, 'Noto Sans KR', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

.scroll-stop {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

.flex-box {
    display: flex;
    align-items: center;
}

#header {
    width: 100%;
    z-index: 10000;
}

#header > .inner {
    /* padding-top: 60px; */
    padding-top: 30px;
    justify-content: space-between;
    align-items: start;
}

#header .logo {
    display: block;
    text-indent: -9999em;
    width: 20vw;
    height: 6.4583vw;
    max-width: 212px;
    max-height: 124px;
    background: url(../img/logo.svg) no-repeat top left;
    background-size: contain;
    transition: height .3s;
}

#header .util-menu .flex-box,
#header .util-menu {
    gap: 20px;
}

#header .util-log {
    transition: .3s;
    width: fit-content;
    display: block;
    font-size: var(--f18-size);
    color: var(--bl-66);
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: var(--wh-ff);
    padding: 13.4px 30px;
}

#header .util-log::after {
    transition: .3s;
    content: '';
    display: block;
    width: 14px;
    height: 16px;
    background: url(../img/ico_login.svg) no-repeat center / contain;
}

#header .util-log.logout-btn::after {
    width: 18px;
    background-image: url(../img/ico_logout.svg);
}

#header .util-log:focus,
#header .util-log:active,
#header .util-log:hover {
    color: var(--wh-ff);
    font-weight: 600;
    background-color: var(--main-navy);
}

#formSearchInput {
    width: fit-content;
    position: relative;
}

#searchInput {
    border: none;
    color: var(--bl-66);
    font-size: var(--f16-size);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    padding: 14.8px 30px;
    padding-right: 4.225em;
    border-radius: 999px;
    background: var(--wh-ff);
    transition: .3s;
}

#searchInput::-webkit-search-decoration,
#searchInput::-webkit-search-cancel-button,
#searchInput::-webkit-search-results-button,
#searchInput::-webkit-search-results-decoration{
    transition: .3s;
}

#searchInput:active::-webkit-search-decoration,
#searchInput:active::-webkit-search-cancel-button,
#searchInput:active::-webkit-search-results-button,
#searchInput:active::-webkit-search-results-decoration,
#searchInput:focus::-webkit-search-decoration,
#searchInput:focus::-webkit-search-cancel-button,
#searchInput:focus::-webkit-search-results-button,
#searchInput:focus::-webkit-search-results-decoration{
    filter: invert(100%) brightness(200%);
}

#searchInput::placeholder {
    color: inherit;
}

#formSearchInput .btn-search {
    content: '검색';
    position: absolute;
    top: calc(50% - 20px);
    right: 22px;
    text-indent: -9999px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url(../img/ico_search.svg) no-repeat center;
    transition: .3s;
}

#searchInput:active,
#searchInput:focus {
    background-color: var(--main-navy);
    color: var(--wh-ff);
}

#header .util-log:focus::after,
#header .util-log:active::after,
#header .util-log:hover::after,
#searchInput:active + .btn-search,
#searchInput:focus + .btn-search{
    filter: invert(100%) brightness(200%);
}

#header .guide-btn {
    display: block;
    color: var(--bl-33);
    font-size: var(--f16-size);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    display: flex;
    padding: 8px 24px;
    border-radius: 999px;
    background: var(--wh-ff);
}

#header .guide-btn {
    color: var(--bl-33);
    font-size: var(--f16-size);
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    border-radius: 999px;
    background: var(--wh-ff);
    transition: .3s;
    
    display: none;
}

#header.sitemap .guide-btn {
    display: flex;
}

#header .guide-btn:focus,
#header .guide-btn:active,
#header .guide-btn:hover {
    color: var(--wh-ff);
    background-color: var(--main-blue2);
}

#header .guide-btn::after {
    content: '?';
    width: 24px;
    height: 24px;
    background-color: var(--wh-e0);
    text-align: center;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

#header .guide-btn:focus::after,
#header .guide-btn:active::after,
#header .guide-btn:hover::after {
    background-color: var(--wh-ff);
    color: var(--bl-33);
}

#header.sitemap .logo {
    background-image: url(../img/logo_sitemap.svg);
    height: 62px;
    background-position: top left 0.8333vw;
}

/* PC) 사이트맵 클릭 시: 헤더 로고, 가이드 버튼 클릭되게 */
#header.sitemap .guide-btn,
#header.sitemap .logo {
    position: relative;
    z-index: 10001;
}

/* PC) 사이트맵 클릭 시: 로그인 버튼, 검색창 안보이게 */
#header.sitemap .util-log,
#header.sitemap #formSearchInput {
    z-index: -1;
}

#header .sitemap-wrap {
    position: relative;
}

#header .sitemap-btn {
    position: relative;
    text-indent: -999999em;
    width: 56px;
    height: 56px;
    background: transparent url(../img/ico_sitemap.svg) no-repeat;
    background-size: contain;
    z-index: 100000;
}

#header .sitemap-btn.on {
    background-image: url(../img/ico_sitemap-closed.svg);
}

#header #sitemap_menu {
    color: var(--wh-ff);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease 0s;

    display: flex;
    align-items: center;
    justify-content: center;
}

#header #sitemap_menu.on {
    z-index: 9999;
    visibility: visible;
    opacity: 1.0;
    transition-delay: 0.4s;
}

#header .sitemap-wrap::before {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100vw;
    height: 0;
    background: rgba(17, 17, 17, 0.90);
    opacity: 0;
    z-index: -1;
    transition: all 0.6s ease;
}

#header.sitemap .sitemap-wrap::before {
    height: 100vh;
    opacity: 1;
    backdrop-filter: blur(10px);
}

#sitemap_menu .sitemap-list {
    display: flex;
    align-items: start;
}

#sitemap_menu .sitemap-list > li {
    padding: 30px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    transition: .3s;
}

#sitemap_menu .sitemap-depth01 {
    color: #FFF;
    font-family: Pretendard;
    font-size: clamp(20px, 1.6667vw, 32px);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    position: relative;
    padding-top: 20px;
}

#sitemap_menu .sitemap-depth01::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--main-mint);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-1em);
    opacity: 0;
    transition: .3s;
}



/* #sitemap_menu .sitemap-depth02 {
    display: flex;
    flex-direction: column;
} */

#sitemap_menu .sitemap-depth02 a {
    width: fit-content;
    display: block;
    color: #FFF;
    font-family: Pretendard;
    font-size: var(--f20-size);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    margin: 20px 0;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#sitemap_menu .sitemap-depth02 > li:first-child > a {
    margin-top: 10px;
}

#sitemap_menu .sitemap-depth02 a.vpn::after {
    content: 'VPN';
    width: fit-content;
    height: fit-content;
    color: var(--wh-ff);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    padding: 3.7px 5.25px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    margin-bottom: auto;
    margin-top: 2px;
}

#sitemap_menu .sitemap-list:has(li.on) > li:not(.on),
#sitemap_menu .sitemap-list > li.on .sitemap-depth02 a:not(.on) {
    opacity: .4;
}

#sitemap_menu .sitemap-list > li:hover .sitemap-depth01::before,
#sitemap_menu .sitemap-list > li.on,
#sitemap_menu .sitemap-list > li.on .sitemap-depth02 a.on {
    opacity: 1;
}

#sitemap_menu .sitemap-list > li:hover .sitemap-depth01::before {
    transform: translateY(0);
}

/* sitemap end */

body.index .fix-btns {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
}

.btn-floating {
    display: flex;
    transition: .4s all;
    width: 100px;
    height: 100px;
    cursor: pointer;
    border: 0;
    display: block;
    background-color: var(--main-mint);
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: center;
    border-radius: 20px;
}

.btn-floating.on {
    width: 256px;
}

.btn-floating .btn-contact {
    flex: 1 1 0;
    height: 100%;
    text-align: center;
}

.btn-floating .btn-contact a {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 0;
    color: white;
    font-weight: 500;
}

.btn-floating.on .btn-contact a {
    transition: .4s;
    opacity: 1;
    font-size: inherit;
}

.top-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: url(../img/ico_chatbot.svg) no-repeat center;
    background-size: contain;
    cursor: pointer;
    float: right;
    border: 1px solid rgba(218, 220, 224, 0.60);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);
}

.btn-floating button {
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 100px;
    height: 100px;
    cursor: pointer;
    overflow: hidden;
    color: #FFF;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-floating button::before {
    content: ' ';
    display: block;
    width: 40px;
    height: 40px;
    background: url(../img/ico_chatbot.svg) no-repeat center/contain;
}

.btn-floating.on button::before {
    background-image: url(../img/ico_chatbot2.svg);
}

.btn-floating button::after {
    content: 'Agent 챗봇';
    display: block;
}

.btn-floating.on button::after {
    display: none;
}

body.index {
    background: url(../img/background.webp) no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    justify-content: space-evenly;
    gap: 60px;
    min-height: 100vh;
}

.inner {
    width: 1690px;
    position: relative;
    margin: 0 auto;
}

main.main {
    position: relative;
    /* padding-bottom: 100px; */
    padding-bottom: 30px;
}

.visual-tit {
    color: var(--bl-11);
    font-family: Pretendard;
    font-size: var(--visual-tit-size);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: 10px;
}

.visual-txt {
    color: var(--bl-22);
}

.txt-20 {
    font-size: var(--f20-size);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.banner-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

.banner-list > li {
    flex: 1 1 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 45%, rgba(0, 0, 0, 0.60) 100%), url(../img/banner-01.webp) no-repeat center / cover;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    max-height: 500px;
    aspect-ratio: 400 / 500;
}

.banner-list > li:nth-child(2) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 45%, rgba(0, 0, 0, 0.60) 100%), url(../img/banner-02.webp) no-repeat center / cover;
}

.banner-list > li:nth-child(3) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 45%, rgba(0, 0, 0, 0.60) 100%), url(../img/banner-03.webp) no-repeat center / cover;
}

.banner-list > li:nth-child(4) {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 45%, rgba(0, 0, 0, 0.60) 100%), url(../img/banner-04.webp) no-repeat center / cover;
}

.banner-list > li > .keywords {
    position: absolute;
    left: 40px;
    bottom: 50px;
}

.banner-list > li:hover > .keywords {
    opacity: 0;
}

.banner-list a.banner {
    width: 100%;
    height: 100%;
    padding: 12.5% 40px;
    padding-right: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: end;
    align-items: start;
    opacity: 0;
    transition: .3s;
}

.banner-list li:hover .link-group,
.banner-list li:hover a {
    opacity: 1;
}

.banner-list li:hover .link-group .banner > * {
    transition: .3s;
}

.banner-list li:hover .link-group .banner:not(:hover) > * {
    opacity: .4;
}

.banner-list > li > .keywords,
.banner > .tit {
    color: var(--wh-ff);
    font-size: var(--f28-size);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.banner > .tit::after {
    content: '바로가기';
    text-indent: -9999em;
    width: 28px;
    height: 28px;
    display: block;
    background: url(../img/ico_banner-link.svg) no-repeat center / contain;
}

.banner .txt-20 {
    color: #F9F9F9;
    font-weight: 600;
}

.banner-list .link-group {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: .3s;
}

.banner-list .link-group .banner {
    background-color: transparent;
    backdrop-filter: none;
    position: relative;
}

.banner-list .link-group .banner::after {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.40);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.banner-list .link-group .banner:last-child::after {
    display: none;
}

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

    .inner {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.index .fix-btns {
        right: 20px;
    }
    
    .banner-list a.banner {
        padding: 30px;
        padding-right: 0;
    }


}

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

    .banner-list>li {
        aspect-ratio: 490 / 278;
        flex: auto;
        width: calc(50% - 20px);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.45%, rgba(0, 0, 0, 0.70) 100%), url(../img/banner-01_mob.webp) no-repeat center / cover;
    }

    .banner-list > li:nth-child(2) {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.45%, rgba(0, 0, 0, 0.70) 100%), url(../img/banner-02_mob.webp) no-repeat center / cover;
    }

    .banner-list > li:nth-child(3) {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.45%, rgba(0, 0, 0, 0.70) 100%), url(../img/banner-03_mob.webp) no-repeat center / cover;
    }

    .banner-list > li:nth-child(4) {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.45%, rgba(0, 0, 0, 0.70) 100%), url(../img/banner-04_mob.webp) no-repeat center / cover;
    }

    .banner-list > li > .keywords {
        left: 20px;
        bottom: 20px;
    }

    .banner-list a.banner {
        padding: 20px;
        padding-right: 0;
    }

    .banner .txt-20 {
        font-size: 14px;
    }

    .banner-list .link-group {
        flex-direction: row;
    }
    
    .banner-list .link-group .banner::after {
        width: 1px;
        height: calc(100% - 25px);
        position: absolute;
        left: auto;
        bottom: auto;
        right: 0;
        top: 50%;
        transform: translateX(0) translateY(-50%);
    }

    .banner>.tit::after {
        width: 22px;
        height: 22px;
        background-size: 90%;
    }
    
}

@media screen and (min-width:1025px) {
    body:not(.mob) #sitemap_menu .sitemap-depth02 {
        display: block !important;
    }
}


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

    .mob-br {
        display: block;
    }

    
    #header.sitemap .util-log,
    #header.sitemap #formSearchInput {
        position: relative;
        z-index: 10001;
    }

    #header {
        position: fixed;
        top: 0;
        left: 0;
        background: url(../img/mob_background.webp) no-repeat top / cover;
    }

    #header>.inner {
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #header .logo {
        background: url(../img/logo_mob.svg) no-repeat center / contain;
        width: 70px;
        height: 34px;
    }

    #header.sitemap .logo {
        display: none;
    }

    #header .util-menu {
        width: calc(100% - 70px);
        justify-content: end;
    }

    #header.sitemap .util-menu {
        width: 100%;
    }

    #header.sitemap .util-menu .flex-box {
        width: calc(100% - 40px);
        justify-content: space-between;
        gap: 8px;
    }

    #header .util-log {
        font-size: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        background-color: transparent;
        border-radius: 6px;
    }
    
    #searchInput {
        display: none;
    }

    #formSearchInput .btn-search {
        position: static;
        background-size: 36px;
    }

    #header .guide-btn {
        padding: 10px 14.33px;
        color: var(--main-blue2);
        background-color: var(--wh-ef);
        margin-left: auto;
    }

    #header .guide-btn::after,
    #header .guide-btn > span {
        display: none;
    }

    #header .sitemap-btn {
        width: 40px;
        height: 40px;
    }

    #header .util-menu .flex-box, #header .util-menu {
        gap: 0;
    }

    #header .util-log:focus, 
    #header .util-log:active, 
    #header .util-log:hover {
        background-color: transparent;   
    }

    
    #searchInput:active + .btn-search, #searchInput:focus + .btn-search {
        filter: none;
    }
    
    #header .util-log::after {
        width: 20px;
        height: 40px;
        filter: brightness(62%);
    }

    #header .util-log.logout-btn::after {
        width: 26px;
    }
    
    #header .util-log:focus::after, 
    #header .util-log:active::after, 
    #header .util-log:hover::after {
        filter: brightness(62%);
    }

    #header.sitemap .sitemap-wrap::before {
        background-color: var(--wh-ff);
        display: none;
    }

    #header .sitemap-btn.on {
        filter: invert(1);
    }

    #header #sitemap_menu {
        transition: unset;
        background-color: var(--wh-ff);
        align-items: start;
    }

    #header #sitemap_menu.on {
        transition-delay: unset;
    }

    #sitemap_menu .sitemap-list {
        flex-direction: column;
        margin-top: 60px;
        padding-bottom: 20px;
        gap: 12px;
        max-height: calc(100vh - 60px);
        overflow-x: hidden;
        /* overflow-y: auto; */
    }

    #sitemap_menu .sitemap-list > li {
        width: 100%;
        gap: 0;
        padding: 0;
        background-color: var(--wh-ef);
        border-radius: 6px;
    }

    #sitemap_menu .sitemap-list:has(li.on)>li:not(.on),
    #sitemap_menu .sitemap-list>li.on .sitemap-depth02 a:not(.on) {
        opacity: 1;
    }

    #sitemap_menu .sitemap-depth01 {
        color: var(--bl-4b);
        font-weight: 600;
        line-height: 140%;
        display: flex;
        padding: 20px 24px;
        justify-content: space-between;
        align-items: center;
    }

    #sitemap_menu .sitemap-depth01::before {
        display: none;
    }

    #sitemap_menu .sitemap-depth01::after {
        content: 'more';
        text-indent: -999em;
        width: 20px;
        height: 20px;
        background: url(../img/ico_more.svg) no-repeat center / contain;
        transition: .3s;
    }

    #sitemap_menu .sitemap-list > li.open .sitemap-depth01::after {
        background-image: url(../img/ico_more_open.svg);
        transform: rotate(180deg);
    }

    #sitemap_menu .sitemap-list > li.open .sitemap-depth01 {
        color: var(--main-blue);
    }

    #sitemap_menu .sitemap-depth02 {
        padding-bottom: 1rem;
        display: none;
    }

    #sitemap_menu .sitemap-depth02 a {
        width: 100%;
        color: var(--bl-51);
        font-weight: 500;
        padding: 8px 24px;
    }

    #sitemap_menu .sitemap-depth02 > li:first-child > a,
    #sitemap_menu .sitemap-depth02 a {
        margin: 0;
    }

    #sitemap_menu .sitemap-depth02 a:focus,
    #sitemap_menu .sitemap-depth02 a:active,
    #sitemap_menu .sitemap-depth02 a:hover {
        background-color: var(--main-blue2);
        color: var(--wh-ff);
    }

    #header.sitemap #sitemap_menu .sitemap-depth02 a.vpn::after {
        color: var(--main-blue2);
        border-color: rgba(30, 77, 175, 0.60);
    }

    #header.sitemap #sitemap_menu .sitemap-depth02 a:focus::after,
    #header.sitemap #sitemap_menu .sitemap-depth02 a:active::after,
    #header.sitemap #sitemap_menu .sitemap-depth02 a:hover::after {
        color: var(--wh-ff);
        border-color: var(--wh-ff);
    }

    body.index {
        background-image: url(../img/mob_background.webp);
    }

    body.index .fix-btns {
        position: fixed;
        top: auto;
        bottom: 30px;
    }

    .btn-floating {
        width: 66px;
        height: 66px;
        border-radius: 14px;
        background: #12E4E4;
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.40);
    }

    .btn-floating button {
        width: 100%;
        height: 100%;
        color: var(--bl-11);
        font-style: normal;
        font-weight: 600;
        flex-direction: row-reverse;
        position: relative;
    }

    .btn-floating button::before {
        width: 10px;
        height: 10px;
        background-image: url(../img/ico_banner-link.svg);
        filter: invert(1);
        position: absolute;
        right: 13px;
        top: 36px;
    }

    .btn-floating button::after {
        content: 'Agent\A챗봇\00a0\00a0\00a0';
        white-space: pre;
    }

    main.main {
        margin-top: 60px;
        padding-bottom: 30px;
    }

    #main_visual .text-sect {
        margin: 20px 0;
    }

    .banner-list {
        margin-top: 0;
        gap: 20px;
    }

    .banner-list > li {
        aspect-ratio: 350 / 145;
        min-height: 145px;
    }

    .banner-list > li > .keywords {
        display: none;
    }

    .banner-list .link-group,
    .banner-list a.banner {
        opacity: 1;
        background-color: transparent;
        backdrop-filter: none;
    }


    .banner > .tit {
        width: 100%;
        align-items: end;
        gap: 6px;
    }

    .banner > .tit::after {
        min-width: 22px;
        max-width: 22px;
        height: 100%;
        background-position: left bottom 2px;
    }

    .banner .txt-20 {
        display: none;
    }

}

@media screen and (max-width:768px) {
    .banner-list {
        flex-direction: column;
    }

    .banner-list > li {
        width: 100%;
    }
}