@charset "UTF-8";

/** main 공통 s **/
:root {--point-color: #3F4FC0; --point-color2: #EFF5FF;}
html {font-size: 10px;}
img {max-width: 100%;}
.main {position: relative; padding: 7rem 0 7rem; background: linear-gradient(0deg, #FAFAFA 0%, #FAFAFA 100%), #FFF;}
.main .sec-box {padding: 3rem 1.5rem; border-radius: 2rem; background: #fff; border: 1px solid #ECEDF0; box-shadow: 16px 20px 80px 0 rgba(0, 0, 0, 0.05);}
.main-section-wrap {max-width: 162rem; margin: 0 auto; padding: 2rem 0;}
.main section, .inner-section {max-width: 1800px; padding: 0 1.5rem 6rem; margin: 0 auto; box-sizing: border-box;}
/*.main section + section {padding-top: 6rem;}*/

.main-tit-box {padding-bottom: 3rem; color: var(--black);}
.main-tit-box h2 {font-size: 2.6rem; color: var(--black);}
.main-tit-sub {padding: 1rem 2rem 0; font-size: 1.7rem; word-break: keep-all; font-weight: 700; margin: 0 auto;}
.btn-more {width: 13.5rem; height: 6rem; margin: 2rem auto 0; display: flex; align-items: center; justify-content: center; background: #fff; border-color: #fff; transition: .3s; font-size: 1.6rem; color: var(--black); box-shadow: 0 5px 40px 0 rgba(10, 22, 107, 0.10); border-radius: 5rem;}
.btn-more:hover {transition-delay: 0s;}
.btn-more i {margin-left:1rem;position:relative;display:flex;align-items:center;justify-content:center;width:3.7rem;height:3.7rem;background:var(--point-color);border-radius:5rem;box-sizing:border-box;overflow:hidden;}
.btn-more i::before, .btn-more i::after {content:'';position:absolute;top:50%;width:20px;height:17px;background:url("/_user/support/img/main/ico-arrow-more.svg") no-repeat center / contain;transform:translate(-50%, -50%);opacity:1;left:50%;transition:none;animation-play-state:paused;z-index:2;transform-origin:center center;}
.btn-more i::after {opacity:0;left:-20px;z-index:1;animation:none;}
.btn-more:hover i::before {animation:slideArrowOpacity 1.2s linear infinite;animation-play-state:running;left:-20px;opacity:1;z-index:3;}
.btn-more:hover i::after {animation:slideArrowOpacity 1.2s linear infinite;animation-delay:0.6s;animation-play-state:running;left:-60px;opacity:1;z-index:2;}
.btn-more i::before, .btn-more i::after {left:50%;opacity:1;animation:none;animation-delay:0s;}
@keyframes slideArrowOpacity {
    0% {
        left: -20px;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
.ico-link {width: 20px; height: 20px; margin-left: 5px; background: #222; --svg:url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='MDI / dock-window'%3E%3Cpath id='Path / dock-window' d='M5.00001 5.29443V3.62743L16.666 3.62743C17.1081 3.62743 17.5321 3.80306 17.8448 4.11568C18.1574 4.4283 18.333 4.85231 18.333 5.29443V13.6284H16.666V5.29543M1.66601 15.2954V8.62843C1.66601 8.18631 1.84164 7.7623 2.15426 7.44968C2.46688 7.13706 2.89089 6.96143 3.33301 6.96143L13.333 6.96143C13.7751 6.96143 14.1991 7.13706 14.5118 7.44968C14.8244 7.7623 15 8.18631 15 8.62843V15.2944C15 15.7365 14.8244 16.1605 14.5118 16.4732C14.1991 16.7858 13.7751 16.9614 13.333 16.9614L3.33301 16.9614C3.11409 16.9614 2.89732 16.9183 2.69507 16.8345C2.49282 16.7508 2.30906 16.628 2.15426 16.4732C1.99947 16.3184 1.87667 16.1346 1.7929 15.9324C1.70913 15.7301 1.66601 15.5133 1.66601 15.2944M3.33301 15.2944L13.333 15.2944V8.62843L3.33301 8.62843L3.33301 15.2944Z' fill='%23222222'/%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask: var(--svg); mask: var(--svg); }
.pc-br {display: none;}

@media screen and (min-width: 768px){
    .main section, .inner-section {padding: 0 3rem 5rem; max-width: 168rem;}
    .main-tit-box h2 {font-size: 4rem;}
    .main-tit-sub {font-size: 2rem;}
    .pc-br {display: block;}
    .mob-br {display: none;}
    /*.main section + section {padding-top: 4rem;}*/
}

@media screen and (min-width: 1024px){
    .main-tit-sub {font-size: 1.8rem;}
    .main-tit-box h2 {font-size: 5rem;}
    .main-tit-sub {font-size: 2.5rem;}
    .btn-more {margin-top: 5rem;}
}
@media screen and (min-width: 1200px){
    .main {position: relative; padding: 17.5rem 0 15rem; background: transparent;}
    .main::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 38%; border-top-right-radius: 21rem; background: #F5F5F5 url("/_user/support/img/main/bg-main.svg") no-repeat top left / contain; z-index: -1; opacity: 0.8;}
    .main::after {content: ''; width: 200rem; height: 204rem; position: absolute; left: 0; top: 0; background: url("/_user/support/img/main/bg-visual.png") no-repeat top left / contain; z-index: -1;}

    .main section, .inner-section {padding: 0 4rem 10rem; max-width: 170rem;}
    .main section + section {padding-top: 10rem;}
    .main-tit-box {padding-bottom: 8rem;}
    .main-tit-box h2 {font-size: 5.5rem;}
    .main-tit-sub {font-size: 3rem;}
    .btn-more {width: 16.3rem; height: 6.9rem; margin-top: 8rem; font-size: 2rem;}

}
/** main 공통 e **/

/* main-visual s*/
section.main-visual {position: relative; display: block; width: 100%; padding: 0;}
section.main-visual::before {content: ''; position: absolute; left: 0; top: 0; width: 56.3rem; height: 56.4rem; background: url("/_user/support/img/main/bg-visual-m.png") no-repeat center / contain; z-index: -1;}
.visual-slide-area {position: relative; color: #fff;}
.main-visual .swiper-container {position: relative; aspect-ratio: 8 / 5; border-radius: 0 0 0 3rem; margin: 0 0 0 1.5rem;}
.main-visual .swiper-slide img {width: 100%; height: 100%; object-fit: cover; max-width: 100%;}
.main-visual .swiper-slide img.pc {display: none;}
.visual-txt-box {position: absolute; left: 30px; bottom: 100px;}
.slide-title {position: absolute; top: 3rem; left: 3rem; color: var(--white); font-size: 2rem; line-height: 1.45; letter-spacing: -0.6px; font-weight: 500;}

.main-tit-box {text-align: center;}

.main-visual-control {position: relative; display: flex; align-items: center; flex-direction: row-reverse; padding: 1.5rem;}
.main-visual-control .swiper-pagination {width: auto; position: static; display: flex; gap: 7px; letter-spacing: 0; min-width: 50px; padding-right: 10px; font-size: 16px; white-space: nowrap;}
.main-visual-control .prev-button, .main-visual-control .next-button {position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 32px;}
.main-visual-control .prev-button::after, .main-visual-control .next-button::after {content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; border-top: 3px solid #111; border-right: 3px solid #111; transform: translate(-50%, -50%) rotate(225deg); border-radius: 2px 0 2px 0;}
.main-visual-control .next-button::after {transform:  translate(-50%, -50%) rotate(45deg);}
.main-visual-control .paging-btn {max-width: 17rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; height: 35px; padding-left: 2rem; box-sizing: border-box;}
.main-visual-control .paging-btn img {width: 7px; height: 13px;}
.main-visual-control .play-stop {display: flex; align-items: center; height: 24px;}
.main-visual-control .play-stop>button {display: none;}
.main-visual-control .play-stop>button.on {display: inline-block;}
.main-visual-control .play-stop .play {height: 0; border-left: 8px solid #111; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}
.main-visual-control .play-stop .stop {width: 8px; height: 13px; border-left: 2px solid #111; border-right: 2px solid #111;}
.visual-loader{width:100%;height:5px;display:flex;gap:4px;}
.visual-loader .bar{flex:1; max-width: 5rem; height:5px; background:#ccc; position:relative; overflow:hidden;}
.visual-loader .bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:0;background:#3F4FC0;}
.visual-loader .bar.active::after{animation:loaderFill 5s linear forwards;}
.paused + .main-visual-control .visual-loader .bar.active::after {animation-play-state: paused;}
@keyframes loaderFill{0%{width:0;}100%{width:100%;}}
.main-visual .swiper-slide img {transform: scale(1); filter: blur(3px); transition: 0.3s;}
.main-visual .swiper-slide .slide-title {opacity: 0;}
.main-visual .slide-title.animate {animation: textFadeUp 1s ease-in forwards;;}
.main-visual .swiper-slide-active img.animate {animation: imgFadeIn 3s ease-in-out forwards;}
.main-visual .swiper-slide-active .slide-title span {display: inline-block; opacity: 0; transform: translateX(-40px); animation: textFadeUp 0.8s forwards;}

@keyframes imgFadeIn {
    0% {
        transform: scale(1);
        filter: blur(3px);
    }
    100% {
        transform: scale(1.05);
        filter: blur(0);
    }
}

@keyframes textFadeUp {
    0% {
        opacity: 0;
        transform: translateX(-40px);
        letter-spacing: 1px;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        letter-spacing: 0;
    }
}

@media screen and (min-width: 1024px){
    section.main-visual {max-width: 180rem; margin: 0; margin-left: auto;}
    .main-visual .swiper-container {aspect-ratio: 3 / 1; margin: 0; border-radius: 0 0 0 8rem;}
    .main-visual-control {flex-direction: column; gap: 4rem; align-items: flex-start; position: absolute; left: 8%; bottom: 20%; z-index: 2; padding: 0;}
    .slide-title {font-size: 6rem; line-height: 1; top: 18%; left: 8%;}
    .visual-loader {gap: 1rem;}
    .visual-loader .bar {min-width: 10rem; height: 0.6rem; background: #fff;}
    .main-visual-control .paging-btn {color: var(--white); padding: 0;}
    .main-visual-control .swiper-pagination {font-size: 1.9rem;}
    .main-visual-control .prev-button::after, .main-visual-control .next-button::after {width: 1.2rem; height: 1.2rem; border-width: 4px; border-color: #fff;}
    .main-visual-control .play-stop .stop {border-color: #fff; height: 14px; border-width: 3px;}
    .main-visual-control .play-stop .play { border-left: 9px solid #fff; }
    .main-visual .swiper-slide img.mobile {display: none;}
    .main-visual .swiper-slide img.pc {display: block;}
}
/* main-visual e*/

/* main-ai s */
.main-ai-item {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.3rem; border-radius: 2rem; background: #FFF; box-shadow: 8px 10px 40px 0 rgba(31, 88, 146, 0.10); font-size: 1.8rem; transition: .3s;}
.main-ai-list > li + li {margin-top: 2rem;}
.main-ai-item .ai-tit {color: var(--point-color); font-weight: 500; padding-top: 1.5rem;}
.main-ai-item > i {display: flex; align-items: center; justify-content: center; width: 13rem; height: 13rem; border-radius: 13rem; background-color: #F1F5FD; transition: .3s;}
.ico-ai-01 {background: url("/_user/support/img/main/ico-ai-01.png") no-repeat center / 9.1rem 10rem;}
.ico-ai-02 {background: url("/_user/support/img/main/ico-ai-02.png") no-repeat center / 10rem 11rem;}
.ico-ai-03 {background: url("/_user/support/img/main/ico-ai-03.png") no-repeat center / 9.8rem 9.9rem;}
@media screen and (min-width: 768px){
    .main-ai-item:hover {background: linear-gradient(52deg, #5C6ED2 41.9%, #5EAFFF 100%);}
    .main-ai-item:hover > i {padding: 0 3rem; background-color: rgba(241, 245, 253, 0.10);}
    .main-ai-item:hover .ai-tit {color: #fff;}
}
@media screen and (min-width: 1024px){
    .main-ai-list {display: flex; gap: 2.5rem; max-width: 140rem; margin: 0 auto;}
    .main-ai-list > li + li {margin-top: 0;}
    .main-ai-list > li {flex: 1;}
    .main-ai-item {border-radius: 4rem; padding: 3rem 2.3rem;}
    .main-ai-item > i {width: 18rem; height: 18rem;}
    .main-ai-item .ai-tit {font-size: 2.2rem;}
}
@media screen and (min-width: 1200px){
    .main-ai-list {gap: 4rem;}
    .main-ai-item {border-radius: 5rem;}
    .ico-ai-01 {background: url("/_user/support/img/main/ico-ai-01.png") no-repeat center / 14.8rem 16.2rem;}
    .ico-ai-02 {background: url("/_user/support/img/main/ico-ai-02.png") no-repeat center / 14.2rem 15.6rem;}
    .ico-ai-03 {background: url("/_user/support/img/main/ico-ai-03.png") no-repeat center / 15.1rem 15.1rem;}
    .main-ai-item {border-radius: 4rem; padding: 4rem 3rem 8rem;}
    .main-ai-item > i {width: 20rem; height: 20rem;}
    .main-ai-item .ai-tit {font-size: 2.6rem; padding-top: 2.5rem;}
}
/* main-ai e */

/* main-status s */
.main-status-item {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 5rem 3.5rem; border-radius: 2rem; border: 1px solid #5C6ED2; background: linear-gradient(180deg, #F1F5FD 60.53%, #FFF 100%);}
.main-status-list > li + li {margin-top: 2rem;}
.main-status-item .status-tit {height: 4.3rem; padding: 0 4rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 3rem; border: 1px solid #7698E8; font-size: 1.8rem; color: var(--point-color);}
.main-status-item .status-cont {font-size: 3rem; color: #5C6ED2; padding-top: 3rem; font-weight: 300; line-height: 1;}
.main-status-item .txt-count {font-size: 6rem; color: var(--point-color); vertical-align: baseline; font-weight: 700;}
.main-status-item > i {width: 8rem; height: 8rem; margin-top: 3rem;}
.ico-status-01 {background: url("/_user/support/img/main/ico-status-01.png") no-repeat center / contain;}
.ico-status-02 {background: url("/_user/support/img/main/ico-status-02.png") no-repeat center / contain;}
.ico-status-03 {background: url("/_user/support/img/main/ico-status-03.png") no-repeat center / contain;}
@media screen and (min-width: 768px){
    .main-status-item {border: 2px solid transparent; border-color: transparent; transition: .3s;}
    .main-status-item:hover {border: 2px solid #5C6ED2; box-shadow: 0 5px 40px 0 rgba(10, 22, 107, 0.10);}
}
@media screen and (min-width: 1024px){
    .main-status-list {display: flex; max-width: 140rem; gap: 3rem; justify-content: center; margin: 0 auto;}
    .main-status-list > li {flex: 1;}
    .main-status-list > li + li {margin-top: 0;}
    .main-status-list > li:nth-of-type(2) .main-status-item {margin-top: 3rem;}
}
@media screen and (min-width: 1200px){
    .main-status-list {gap: 6rem;}
    .main-status-item {padding: 6rem 5rem 10rem; border-radius: 5rem;}
    .main-status-item .status-tit  {height: 5.7rem; font-size: 2.4rem; padding: 0 5rem;}
    .main-status-item .status-cont {padding-top: 10rem;}
    .main-status-item .txt-count {font-size: 8rem;}
    .main-status-item > i {width: 15rem; height: 15rem; margin-top: 5rem;}
}
/* main-status e */

/* main-notice s */
.main section.main-notice {position: relative; padding-bottom: 10rem; max-width: 168rem;}
.label-notice {min-width: 5.2rem; width: 5.2rem; padding-left: 2.2rem; box-sizing: border-box; color: #fff; height: 2.5rem; display: flex; align-items: center; background: #E71825 url("/_user/support/img/main/ico-notice.svg") no-repeat center left 0.5rem; border-radius: 0.6rem; margin-bottom: 0.5rem; font-size: 14px;}
td .label-notice {margin: 0 auto;}
.board-item-list > li + li {margin-top: 1rem;}
.board-item-list .board-item {display: flex; flex-direction: column; padding: 1.8rem 3rem; box-sizing: border-box; border-radius: 2rem; background: #fff; box-shadow: 0 5px 40px 0 rgba(10, 22, 107, 0.10);}
.board-cont {display: flex; align-items: center; gap: 1rem;}
.board-item-list .board-no-contents {display: flex; gap: 1rem; justify-content: center; align-items: center; flex-direction: column; padding: 2rem 3rem; box-sizing: border-box; border-radius: 2rem; background: var(--white);}
.board-no-contents img {max-width: 5rem;}
.board-item .board-tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; font-weight: 600; line-height: 1; transition: .3s; position: relative; left: 0; color: var(--black); font-size: 1.8rem;}
.board-item .date {display: block; font-size: 1.6rem; padding-top: 0.5rem;}
.main-notice .btn-more {position: absolute; bottom: 2rem; left: calc(50% - (13.5rem / 2)); transform: unset;}
@media screen and (min-width: 768px){
    .board-item-list .board-item {border: 2px solid transparent; transition: .3s; box-shadow: 0 5px 40px 0 rgba(10, 22, 107, 0.10);}
    .board-item-list .board-item:hover {border: 2px solid var(--point-color);}
}
@media screen and (min-width: 1024px){
    .main section.main-notice {display: flex; gap: 5%; justify-content: space-between; padding-top: 10rem;}
    .main-notice .main-tit-box {text-align: left; max-width: 26rem; padding: 0;}
    .main-notice .btn-more {position: static; margin: 0;}
    .main-notice .main-tit-sub {padding: 1rem 0 0 0;}
    .board-item-list {display: flex; flex-wrap: wrap; width: 100%; max-width: 97.6rem; gap: 3.6rem;}
    .board-item-list > li {width: calc(50% - 2rem);}
    .board-item-list > li:nth-of-type(odd) {position: relative; top: 3rem;}
    .board-item-list > li.board-no-contents {width: 100%; top: 0!important; border-radius: 4rem; font-size: 2rem;}
    .board-no-contents img {max-width: 10rem;}
    .board-item-list > li + li {margin-top: 0;}
    .board-item-list .board-item {height: 26rem; padding: 5.5rem 5rem; border-radius: 3rem;}
    .board-cont {flex-direction: column; align-items: flex-start;}
    .board-item .board-tit {font-size: 2.7rem;}
    .board-item .date {font-size: 2rem; margin-top: auto;}
    .main-notice .btn-more {margin-top: 6rem;}
    .label-notice {font-size: 1.5rem; min-width: 5.5rem; height: 2.6rem; border-radius: 0.8rem;}
}
@media screen and (min-width: 1200px){
    .board-item-list > li:nth-of-type(odd) {top: 7.4rem;}
}
/* main-notice e */

/* 메인메뉴 신규 추가 s*/
.main-menu-item {padding: 4rem 4rem 6rem; border-radius: 2rem; background: #5C6ED2; text-align: center;}
.main-menu-item:nth-of-type(2) {background: #00A6CA;}
.main-menu-item:nth-of-type(3) {background: #339AF0;}
.main-menu-item .tit {font-size: 3.6rem; font-weight: 700; line-height: 1.2; color: #fff;}
.main-menu-item .tit em {display: block; font-weight: 500; font-size: 2.2rem; color: rgba(255, 255, 255, 0.80);}
.main-menu-item + .main-menu-item {margin-top: 3rem;}
.menu-lnk-list {margin-top: 3rem;}
.menu-lnk-list a {display: flex; justify-content: center; align-items: center; height: 7rem; width: 100%; max-width: 36rem; margin: 0 auto; color: #fff; font-size: 2rem; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.80); transition: .3s;}
.menu-lnk-list li + li {margin-top: 1rem;}
@media screen and (min-width: 768px){
   .menu-lnk-list a:hover {background: #F1F5FD; color: var(--point-color); border-color: var(--point-color);}
}
@media screen and (min-width: 1024px){
    .main-menu-list {max-width: 156rem; margin: 0 auto; display: flex; gap: 3rem;}
    .main-menu-item {width: 33.33%; padding: 8rem 4rem; border-radius: 5rem; }
    .main-menu-item + .main-menu-item {margin-top: 0;}
}
@media screen and (min-width: 1200px){
    .main-menu-item .tit {font-size: 5rem;}
    .main-menu-item .tit em {font-size: 3rem;}
    .menu-lnk-list {margin-top: 5rem;}
    .menu-lnk-list a {font-size: 2.2rem; height: 8.4rem;}
}
/* 메인메뉴 신규 추가 e*/