@charset "utf-8";

/** main 공통 s **/
:root {
    --point-color: #49A942;  /* 그린 */
    --point-color2:  #00AEEF; /* 블루 */
    --black: #020407;
    --red: #D31515;
}
html {font-size: 10px;}
img {max-width: 100%;}
.main {position: relative; padding-bottom: 10rem;}
.main section, .inner-section {max-width: 1800px; padding: 0 1.5rem; margin: 0 auto; box-sizing: border-box;}
.main section + section {padding-top: 6rem;}

.main-label {display: block; background: var(--black); color: #fff; padding: 0.6rem 1.6rem; max-width: fit-content; border-radius: 0.5rem; margin: 0 auto 2rem; font-size: 1.2rem;}
.main-tit-box {text-align: center; padding-bottom: 2rem;}
.main-tit-box>p {font-size: 1.7rem; padding-bottom: 0.8rem;}
.main-tit-box>h2 {font-size: 3rem; text-transform: uppercase;}
.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); }

.play-stop>button {display: none; align-items: center; justify-content: center;}
.play-stop>button.on {display: flex;}
.play-stop .play::before {content: ''; display: inline-block; height: 0; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;}
.play-stop .stop::before {content: ''; display: inline-block; width: 4px; height: 13px; border-left: 2px solid #fff; border-right: 2px solid #fff;}
.pc-br {display: none;}

@media screen and (min-width: 768px){
    .main section, .inner-section {padding: 0 30px; max-width: 1680px;}
    .main-tit-box>h2 {font-size: 4rem;}
    .mob-br {display: none;}
}

@media screen and (min-width: 1024px){
    .main-label {font-size: 1.5rem; padding: 0.6rem 1.4rem; border-radius: 0.7rem;}
    .main-tit-box>h2 {font-size: 5rem;}
    .main-tit-box {padding-bottom: 4rem;}
}
@media screen and (min-width: 1200px){
    .main {padding-bottom: 20rem;}
    .main section + section {padding-top: 17rem;}
    .main-label {font-size: 1.8rem; padding: 0.8rem 1.6rem; border-radius: 0.9rem;}
    .main-tit-box {padding-bottom: 6rem;}
    .main-tit-box>h2 {font-size: 6.6rem;}
    .main-tit-box>p {font-size: 2.5rem;}
}
/** main 공통 e **/

/* 메인 비주얼 s */
section.main-visual {padding: 6.5rem 1.5rem 0; max-width: 1880px;}
.visual-swiper {border-radius: 1rem; height: 46.5rem; overflow: hidden;}
.visual-swiper .swiper-container {height: 100%;}
.visual-swiper img {width: 100%; max-width: 100%; height: 100%; object-fit: cover;}
.swiper-txt { }
.visual-slide-txt {position: absolute; left: 3rem; bottom: 25%; z-index: 1; color: #fff; font-size: 2.2rem; line-height: 1.4;}
.visual-swiper .swiper-pagination-bullet {width: 24px; height: 24px; position: relative; background: transparent; opacity: 1;}
.visual-swiper .swiper-pagination-bullet::before {content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.swiper-pagination-bullet svg {width: 100%; height: 100%; transform: rotate(-90deg);}
.visual-swiper circle {fill: none; stroke-width: 4.5; cx: 18px; cy: 18px; r: 16px;}
.visual-swiper circle.bg {stroke: transparent;}
.visual-swiper circle.progress {stroke-dasharray: 100; stroke-dashoffset: 100;}
.swiper-pagination-bullet-active .progress {animation: dash 5s linear forwards; stroke: #fff;}
.visual-swiper.paused .swiper-pagination-bullet-active .progress {animation-play-state: paused;}
.visual-swiper .slide-control {display: flex; align-items: center; width: 100%; position: absolute; bottom: 3.5rem; left: 3rem; gap: 1rem;}
.visual-swiper .play-stop {position: relative; z-index: 1;}
.visual-swiper .swiper-pagination {position: static;}
.visual-slide-txt em {display: block; font-size: 1.5rem; padding-bottom: 5px; word-break: keep-all;}
.swiper-txt-item h2 em, .swiper-txt-item h2 span {opacity: 0;}

@keyframes dash {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

@media screen and (min-width: 768px){
    section.main-visual {padding: 6.5rem 3rem 0;}
}
@media screen and (min-width: 1024px){
    section.main-visual {padding: 7.5rem 3rem 0;}
    .visual-swiper {aspect-ratio: 190 / 77; height: auto; border-radius: 2rem;}
}
@media screen and (min-width: 1200px){
    section.main-visual {padding: 11rem 4rem 0;}
    .visual-slide-txt {font-size: 4rem; left: 10.4rem;}
    .visual-swiper .slide-control {left: 10.4rem; bottom: 13.86%;}
    .visual-slide-txt em {font-size: 2rem; padding-bottom: 2rem;}
}
@media screen and (min-width: 1400px){
    .visual-slide-txt {font-size: 5rem; left: 14.4rem;}
    .visual-swiper .slide-control {left: 14.4rem;}
}
/* 메인 비주얼 e */

/* sec1 ai s*/
.main-ai-list>li {display: flex; align-items: center; position: relative; padding: 2.4rem; box-sizing: border-box; border-radius: 1rem; font-size: 1.6rem; font-weight: 400; overflow: hidden; color: #fff; background: linear-gradient(0deg, rgba(5, 12, 31, 0.40) 0%, rgba(5, 12, 31, 0.40) 100%); min-height: 14.6rem; transition: .3s;}
.main-ai-list>li + li {margin-top: 1rem;}
.main-ai-list>li video {position: absolute; top: 50%; left: 50%; max-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -1;}
.main-ai-list .ai-more {position: absolute; right: 2.4rem; top: 2.4rem; color: #fff; font-size: 1.2rem; padding: 1rem 1.4rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); font-weight: 300;}
.main-ai-list em {display: block; font-weight: 300; font-size: 1.6rem; padding-bottom: 1rem;}
.main-ai-list h3 span {font-size: 2.6rem; line-height: 1;}
.ai-cont-box {display: none;}


@media screen and (min-width: 1024px) {
    .main-ai-list>li {height: 10rem; padding: 6rem 7rem; min-height: auto; border-radius: 1.5rem;}
    .main-ai-list h3 {display: flex; align-items: center;}
    .main-ai-list h3 span {font-size: 5.5rem;}
    .main-ai-list em {padding-bottom: 5rem; width: 0;}
    .main-ai-list .ai-more {top: 6rem; right: 9.8rem; border-radius: 0.8rem; font-size: 1.8rem; padding: 2rem 5rem; transition: 0.3s;}
    .main-ai-list .ai-more:hover {background: #00AEEF; color: #fff;}
    .main-ai-list .before-el {opacity: 0; visibility: hidden; position: absolute; right: 0; bottom: 0; display: block;}
    .main-ai-list > li .ai-cont-box {width: 0; height: 0;}

    .main-ai-list .ai-more, .main-ai-list em, .main-ai-list .ai-cont-box, .main-ai-list .ai-devel-list>li, .ai-cont-box::before {opacity: 0; visibility: hidden;}
    .main-ai-list>li.active {flex-direction: column; align-items: flex-start;}
    .main-ai-list>li.active h3 {flex-direction: column; align-items: flex-start;}
    .main-ai-list>li.active .ai-more, .main-ai-list>li.active em, .main-ai-list>li.active .ai-cont-box, .main-ai-list>li.active .ai-devel-list>li, .main-ai-list>li.active .ai-cont-box::before {opacity: 1; visibility: visible;}  .main-ai-list>li.active .ai-cont-box {width: 100%; height: 100%;}  .main-ai-list>li.active em {width: auto;}  .main-ai-list>li.active .before-el {opacity: 1; visibility: visible;}

    .ai-cont-box {width: 100%; padding-top: 5rem; display: block; position: relative; height: 100%;}
    .ai-cont-box p {font-size: 2.2rem; font-weight: 500;}

    .ai-devel-list {display: flex; justify-content: center; align-items: center; padding-top: 10rem; position: relative; font-size: 1.7rem;}
    .ai-devel-list>li {display: inline-flex; flex-shrink: 0; position: relative;}
    .ai-devel-list>li.divider {display: inline-block; width: 0.1rem; background: rgba(255,255,255,0.7); height: 15rem; margin: 0 auto;}
    .ai-devel-list .devel-cont::before {content: ''; display: block; width: 3.8rem; height: 3.8rem; padding-bottom: 3.5rem;}
    .ai-devel-item.num01 .devel-cont::before {background: url("/_user/img/main/ico-devel01.svg") no-repeat center / 2.5rem;}
    .ai-devel-item.num02 .devel-cont::before {background: url("/_user/img/main/ico-devel02.svg") no-repeat center / contain;}
    .ai-devel-item.num03 .devel-cont::before {background: url("/_user/img/main/ico-devel03.svg") no-repeat center / 2.5rem;}
    .devel-tit {font-size: 2rem;}
    .devel-txt {display: block; padding-top: 1rem;}

    .before-pipeline {width: 100%; height: 24rem; background: url("/_user/img/main/img-pipeline.png") no-repeat center right/contain;}
    .before-deinon {width: 100%; height: 100px; background: url("/_user/img/main/txt-deinon.svg") no-repeat center right/contain;}
}

@media screen and (min-width: 1400px) {
    .ai-devel-item.num03 .devel-cont {min-width: 34rem;}
}

/* sec1 ai e*/

/* sec2 provisioning s*/
.provisioning-box {background: url("/_user/img/main/img-provisioning.png") no-repeat center / cover; border-radius: 1.5rem; color: #fff; padding: 6rem 2.4rem 4rem; text-align: center; font-size: 1.8rem; line-height: 1.4; word-break: keep-all;}
.provisioning-box span {display: block; padding-bottom: 1.5rem; font-weight: 300;}
.provisioning-link {display: flex; width: 100%; height: 5rem; justify-content: center; align-items: center; box-sizing: border-box; color: #fff; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); font-size: 1.4rem; margin: 1.5rem auto 0; max-width: 30rem; word-break: keep-all;}
@media screen and (min-width: 1024px){
    .provisioning-box {display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: url("/_user/img/main/img-provisioning-pc.png") no-repeat center / cover; padding: 10rem 11rem; border-radius: 2rem; text-align: left; font-size: 2.5rem;}
    .provisioning-link {width: auto; min-width: 18rem; min-height: 6rem; max-width: unset; margin: 0; font-size: 1.8rem; transition: .3s; border-radius: 0.8rem; padding: 2rem 4rem;}
    .provisioning-link:hover {background: var(--point-color2);}
}
@media screen and (min-width: 1400px){
    .provisioning-box {font-size: 3rem;}
}
/* sec2 provisioning e*/

/* sec3 computing s*/
/*.main-computing {min-height: 1500rem;}*/
.computing-item {position: relative; display: block; padding: 3.5rem 2.4rem; box-sizing: border-box; border-radius: 1.5rem; color: #fff; font-size: 1.6rem; transition: .5s ease; overflow: hidden;}
.card:nth-of-type(1) .computing-item {background: url("/_user/img/main/img-computing01.png") no-repeat center / cover;}
.card:nth-of-type(2) .computing-item {background: url("/_user/img/main/img-computing03.png") no-repeat center / cover;}
.card:nth-of-type(3) .computing-item {background: url("/_user/img/main/img-computing02.png") no-repeat center / cover;}
.card:nth-of-type(4) .computing-item {background: url("/_user/img/main/img-computing04.png") no-repeat center / cover;}
.computing-item h3 {font-size: 2.8rem; font-weight: 700; line-height: 1.3; min-height: 10.9rem;}
.computing-item p {padding-top: 2rem; font-size: 1.6rem; word-break: keep-all; min-height: 5.8rem;}
.computing-item .txt-link {display: block; padding-top: 4rem; font-size: 1.4rem;}
.computing-item .num {display: block; font-size: 1.6rem; padding-bottom: 3rem;}
@media screen and (min-width: 1024px){
    .computing-swiper .swiper-wrapper {height: 360px;}
    .card {max-width: 260px; transition: box-shadow .3s;}
    .card:hover {box-shadow: 0 8px 20px rgb(0 0 0 / 38%);}
    .computing-item {width: 100%; height: 100%;}
    .computing-item .num {font-size: 2rem;}
    .computing-item h3 {font-size: 3.2rem; min-height: 12.4rem;}
    .computing-item p {font-size: 1.7rem;}
    .computing-item .txt-link {font-size: 1.8rem; position: absolute; bottom: -100px; transition: .5s ease; opacity: 0;}
    .computing-item:hover .txt-link {bottom: 5rem; opacity: 1;}

}
@media screen and (min-width: 1200px){
    .computing-list {width:100%; margin:0 auto; display:flex; justify-content:center; position:relative;}
    .computing-swiper .swiper-container {overflow:visible;}
    .computing-swiper .swiper-wrapper {height:430px; display:flex; flex-wrap:wrap; transform:none;}
    .card {width:25%; height:100%; max-width:368px; position:absolute; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.15); top:0; left:50%; transform:translateX(-50%);}
    .computing-item .num {padding-bottom: 6rem;}
    .computing-item {padding: 4.5rem 4.8rem;}
    .computing-item:hover .txt-link {bottom: 5.3rem; }
    .computing-item:hover {transform: scale(1.03);}

}
/* sec3 computing e*/

/* 공지사항 s */
.main-notice {position: relative; z-index: 1;}
.main-tit-box img {transform: scale(0.6);}
.board-box-tab {display: flex; max-width: 16rem; height: 4.2rem; background: #F3F3F3; border-radius: 10rem; margin: 0 auto 2rem;}

.board-box-tab {width: 100%; position: relative; display: flex; gap: 0.8rem; border-radius: 100px;}
.board-box-tab::before {content: ""; position: absolute; top: 0; left: 0; width: calc(50% - 0.4rem); height: 100%; border-radius: 100px; background: var(--black); transition: transform .3s ease; z-index: 0;}
.board-box-tab::after {content: ""; position: absolute; top: 50%; left: 50%; width: 17.4rem; height: 6.2rem; border-radius: 100px; background: #F3F3F3; transform: translate(-50%, -50%); z-index: -1;}
.board-box-tab > li {flex: 1;}
.board-box-tab > li > button {position: relative; z-index: 1; width: 100%; height: 100%; font-size: 1.4rem; font-weight: bold; border-radius: 100px; transition: color .3s;}
.board-box-tab > li.on > button {color: #fff;}
.board-box-tab.on-left::before {transform: translateX(0);}
.board-box-tab.on-right::before {transform: translateX(calc(100% + 0.8rem));}

.board-cont {min-height: 46rem; width: 100%; box-sizing: border-box; position: relative; font-size: 1.4rem; line-height: 1.4; transform: translateY(0); padding: 3rem 2.4rem; border-radius: 1.5rem; color: #fff;}
#news .no-contents {max-height: 65%;}
.board-cont:nth-of-type(1) {background: url("/_user/img/main/img-notice-m.png") no-repeat center / cover;}
.board-cont:nth-of-type(2) {background: url("/_user/img/main/img-news-m.png") no-repeat center / cover;}
.board-link {position: absolute; color: #fff; top: 0; right: 0; font-size: 1.2rem; transition: .3s;}
.notice-tit-link {display: block; max-width: fit-content; color: #fff;}
.notice-tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; margin-bottom: 1rem; font-size: 2.2rem;}
.board-cont {min-height:54rem; width:100%; height:100%; box-sizing:border-box; padding:3rem 2.4rem; border-radius:1.5rem; color:#fff; font-size:1.4rem; line-height:1.4; transform:translateY(0); position:relative; z-index:0; top: 0; left: 0;}
.board-cont:first-child {position:absolute;top:0;left:0;z-index:1;transform:translateY(25px);}
.board-list-box {position: relative; box-sizing: border-box; }
.board-txt-box {position: relative; word-break: keep-all;}
.board-txt-box h3 {padding-bottom: 4rem;}
.news-info {font-size: 2.2rem; padding-bottom: 4rem;}
.board-news-list > li > a {display: flex; align-items: center; gap: 20px; padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.55); color: #fff; word-break: keep-all;}
.board-news-list > li:last-of-type > a {border-bottom: unset;}
.list-tit-area {position: relative;}
.list-tit-area > p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden;}
.board-news-list .date-box {font-size: 13px; text-align: center; position: relative;}
.board-news-list .day {display: block; font-size: 26px; font-weight: bold;}
.notice-gallery-box {aspect-ratio: 1.5 / 1; margin-top: 5rem; border-radius: 1rem; overflow: hidden;}
.notice-gallery-box img {height: 100%; object-fit: cover; }
.label-notice {width: 3.3rem; min-height: 20px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); box-sizing: border-box;}
@media screen and (min-width: 500px) {
    .notice-gallery-box {aspect-ratio: 1.6 / 1;}
}
@media screen and (min-width: 768px){
    .news-info {padding-bottom: 4rem; font-size: 2.6rem;}
    .board-cont {padding: 5rem 4rem; font-size: 1.7rem; min-height: 64rem;}
    .board-news-list > li > a {padding: 1.5rem 0; gap: 3rem; position: relative; left: 0; transition: 0.3s;}
    .board-news-list > li > a:hover .date-box, .board-news-list > li > a:hover .list-tit-area {left: 1rem;}
    .board-news-list > li > a:hover .list-tit-area > p {font-weight: bold;}
    .notice-gallery-box {aspect-ratio: 1.8 / 1;}
    .list-tit-area, .date-box {transition: left .3s; left: 0;}
    .board-link:hover {text-decoration: underline; text-underline-position: under;}
    .board-link {font-size: 1.5rem;}
}
@media screen and (min-width: 800px) {
    .notice-gallery-box {aspect-ratio: 2.2 / 1;}
}
@media screen and (min-width: 1024px){
    .main-tit-box img {transform: scale(0.85); transform-origin: left;}
    .main-notice  .main-tit-box {text-align: left;}
    .notice-top-area {display: flex; align-items: flex-end; justify-content: space-between;}
    .board-cont {min-height: 50rem; display: flex; justify-content: space-between; gap: 5rem; padding: 5.5rem 7.3rem; border-radius: 3rem; top: 0; left: 0;}
    .board-cont:first-child {transform: translateY(5rem); background: url("/_user/img/main/img-notice-pc.png") no-repeat center / cover;}
    .board-cont:nth-of-type(2) {background: url("/_user/img/main/img-news-pc.png") no-repeat center / cover;}
    .board-txt-box {width: 50%;}
    .notice-gallery-box {width: 50%;}
    .board-cont .notice-gallery-box {margin-top: 0; border-radius: 2rem;}
    .board-link {left: 0; bottom: 0; top: auto; font-size: 2rem;}
    .board-txt-box .date {font-size: 2rem;}
    .notice-tit {font-size: 3rem; margin-bottom: 2.5rem;}
    .board-txt-box h3 {font-size: 2.2rem;}
    #news .no-contents {max-height: inherit;}

    .board-box-tab {margin: 0 0 7rem; gap: 2rem; max-width: 44rem; height: 6rem;}
    .board-box-tab::before {width: calc(50% - 1rem);}
    .board-box-tab::after {content: ""; width: 48rem; height: 8.5rem;}
    .board-box-tab > li > button {font-size: 2rem;}
    .board-box-tab.on-right::before {transform: translateX(calc(100% + 2rem));}


}
@media screen and (min-width: 1400px){
    .board-cont {min-height: 58rem; display: flex; justify-content: space-between; gap: 10rem; padding: 7.5rem 9.3rem; border-radius: 3rem; font-size: 2rem;}
    .board-txt-box {width: 56%;}
    .notice-gallery-box {width: 44%;}
    .main-tit-box img {transform: scale(1);}
    .notice-tit {font-size: 4.4rem; max-width: 58rem; margin-bottom: 3rem;}
    .board-txt-box h3 {font-size: 2.4rem;}
    .board-cont .notice-gallery-box {aspect-ratio: 97 / 72; border-radius: 2.5rem;}
    .board-txt-box .date {font-size: 2.2rem;}
    .board-news-list .date-box {font-size: 1.8rem;}
    .board-link {font-size: 2.5rem;}


    .board-news-list > li > a {padding: 2rem 0;}
    .news-info {font-size: 4.4rem;}
    .board-news-list .day {font-size: 3.2rem;}
    .label-notice {font-size: 1.6rem; min-width: 5rem; min-height: 2.8rem;}
    .list-tit-area {display: flex; gap: 1rem;}
    .list-tit-area > p {-webkit-line-clamp: 1;}
}
/* 공지사항 e */