@charset "utf-8";

* {font-family: "NotoSansKR", sans-serif;}
.main-container {overflow: hidden; padding-bottom: 40px;}
.section {padding: 40px 0;}
.section>* {max-width: 1240px; margin: 0 auto; padding: 0 20px;}
.section-tit {font-size: 24px; font-weight: 700;}
.section-sub {color: #696969;}

.main-visual-wrap {overflow: hidden; height: 40vh; position: relative;}
.main-visual-wrap .main-img {position: absolute; left: 0; right: 0; top: 0; bottom: 0; animation: imgzum 5s cubic-bezier(0, 0, 0.15, 1); transform:scale(1); background: url('/_user/restructure2022/SUSO/img/main/main_bg.png') 100% / 100% #18181c; background-size: cover;}
.main-visual-wrap .txt-box {position: absolute; z-index: 2; text-align: center; width: 100%; left: 0; top: 50%; transform: translateY(-50%); margin-top: 30px; color: #fff;}
.main-visual-wrap .txt-box .top-txt {color: #445c7e; position: relative; font-size: 24px; animation: fadein 3s cubic-bezier(0, 0, 0.15, 1);}
.main-visual-wrap .txt-point {color: #8ab3ec;}
.main-visual-wrap .main-tit {font-size: 36px; line-height: 36px; margin-bottom: 8px; position: relative; font-weight: 700; animation: fadein 4s cubic-bezier(0, 0, 0.15, 1);}
.main-visual-wrap .bottom-txt {color: #cbcbcb; position: relative; animation: fadein 5s cubic-bezier(0, 0, 0.15, 1);}
.canvas-wrap {display: none;}

@keyframes imgzum {
    from {opacity: 0; transform:scale(1.2);}
    to {opacity: 1; transform:scale(1);}
}
@keyframes fadein {
    0% {opacity: 0;top:-20px;}
    80% {opacity: 0; top:-20px;}
    100% {opacity: 1; top:0;}
}

@media screen and (min-width: 769px){
    .main-visual-wrap .txt-box {font-size: 16px; margin-top: 40px;}
    .main-visual-wrap .txt-box .top-txt {font-size: 33px;}
    .main-visual-wrap .main-tit {font-size: 56px; line-height: 56px; margin-bottom: 16px;}
}
@media screen and (min-width: 1241px){
    .main-visual-wrap {height: 100vh; min-height: 400px;}
    .main-visual-wrap:after {content: url('/_user/restructure2022/SUSO/img/main/scroll_ico.png'); position: absolute; bottom: 20px; left: 50%; animation: move 0.6s infinite ease-in-out alternate forwards; transform: translateX(-50%); }
    .main-visual-wrap .txt-box {text-align: left; margin-top: 0; left: 20px;}
    .main-visual-wrap .txt-box .top-txt {font-size: 40px; padding-left: 4px;}
    .main-visual-wrap .main-tit {font-size: 84px; line-height: 84px;}
    .main-visual-wrap .bottom-txt {padding-left: 8px;}
    .main-visual {position: relative; max-width: 1240px; margin: 0 auto; height: 100%;}
    .canvas-wrap {display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 1;}

    @keyframes move  {
        0% {bottom: 40px;}
        100% {bottom: 20px;}
    }
}


.news-wrap {background: #234095; padding: 0;}
.news-slide {padding: 16px 20px; display: flex; align-items: center; color: #fff;}
.news-slide .swiper-pagination {position: static; line-height: 40px; letter-spacing: -1.5px; width: auto; white-space: nowrap; padding: 0 13px;}
.news-slide .swiper-pagination-current {position: relative; top: -6px; color: #5efff9; font-weight: 500;}
.news-slide .swiper-pagination-total {position: relative; bottom: -6px;}
.news-slide .pager {display: flex; position: relative; padding-top: 0;}
.news-slide .pager:after {position: absolute; content: ''; right: 0; top: 11px; width: 1px; height: 20px; background: #9e9e9e;}
.news-slide .pager p {font-size: 18px; font-weight: 500; line-height: 40px;}
.news-slide .swiper-container {width: 100%; height: 40px; overflow: hidden; padding: 0 13px;}
.news-slide a {color: #fff; font-size: 16px; line-height: 40px;}
.news-slide .swiper-slide p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.news-slide .swiper-slide .date {display: none;}
.news-slide .swiper-button-next, .news-slide .swiper-button-prev {position: static; margin-top: 0; background: none; width: 34px; height: 24px;}
.news-slide .swiper-button-next.swiper-button-disabled, .news-slide .swiper-button-prev.swiper-button-disabled {opacity: 1;}

@media screen and (min-width: 769px){
    .news-slide .pager p {font-size: 24px;}
    .news-slide .swiper-pagination, .news-slide a {font-size: 18px;}
    .news-slide .swiper-pagination {padding: 0 30px;}
    .news-slide .swiper-container {padding: 0 20px;}
    .news-slide .swiper-slide .date {display: block; color: #bbc1d3; min-width: 100px; text-align: right;}
    .news-slide a {display: flex; justify-content: space-between;}
}
@media screen and (min-width: 1241px){
    .news-wrap {background-image: url('/_user/restructure2022/SUSO/img/main/notice_img.jpg');}
    .news-slide {background: #fff; color: #333;}
    .news-slide .pager {color: #3f3f3f;}
    .news-slide .swiper-pagination-current {color: #218adb; font-weight: 400;}
    .news-slide a, .news-slide .swiper-slide .date, .news-slide .swiper-pagination {color: #333;}
    .news-slide .swiper-slide a:hover p {font-weight: 500; color: #244094;}
    .news-slide .slide-control .swiper-button-prev img {content: url('/_user/restructure2022/SUSO/img/main/btn_top_img.png')}
    .news-slide .slide-control .swiper-button-next img {content: url('/_user/restructure2022/SUSO/img/main/btn_bottom_img.png')}
}


.gallery-wrap {position: relative;}
.list-slide {height: 180px; overflow: hidden; position: relative; margin-top: 24px;}
.list-slide.short {height: 120px;}
.list-slide.one {height: 60px; margin-bottom: 10px;}
.list-slide:before {content: ''; position: absolute; z-index: 10; left: 0; bottom: 0; width: 100%; height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0% ,rgba(255,255,255,0.5) 30%, rgba(255,255,255,1) 100% );}
.list-slide.short:before {height: 40px;}
.list-slide.one:before {display: none;}
.list-slide .swiper-container {height: 60px; overflow: visible;}
.list-slide .swiper-container:before {content: ''; position: absolute; width: 100%; height: 60px; border: 2px solid #234095; box-sizing: border-box; left: 0; top: 0;}
.list-slide .swiper-slide {height: 60px !important;}
.list-slide .swiper-slide>a {display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #333; font-weight: 500; height: 60px; line-height: 60px;}
.list-slide .swiper-slide>a .no {color: #333; min-width: 60px; text-align: center;}
.list-slide .swiper-slide>a .more {min-width: 56px; transition: all 0.3s; margin-right: 20px; margin-left: 10px; width: 56px; height: 24px; line-height: 22px; text-align: center; color: #fff; background: #efefef; font-size: 14px;}
.list-slide .swiper-slide.swiper-slide-active>a {color: #234095;}
.list-slide .swiper-slide.swiper-slide-active>a .more {background: #234095;}
.gallery-wrap .slide-control {position: absolute; right: 0; top: 0;}
.gallery-wrap .swiper-button-next, .gallery-wrap .swiper-button-prev {position: static; margin-top: 0; background: none; width: 34px; height: 24px;}
.gallery-wrap .swiper-button-next.swiper-button-disabled, .gallery-wrap .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.list-slide .swiper-slide p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.thumb-slide.swiper-container {height: 200px; overflow: hidden;}
.thumb-slide.swiper-container .swiper-slide {display: block;}
.thumb-slide.swiper-container img {width: 100%; height: 100%; object-fit: cover;}

@media screen and (min-width: 769px){
    .gallery-wrap {display: flex; justify-content: space-between; padding-bottom: 20px;}
    .gallery-wrap>div {width: 45%; position: relative;}
    .gallery-wrap .thumb-slide.swiper-container {width: 52%; margin: 0; height: 320px; border-bottom-left-radius: 100px;}
    .list-slide {height: 244px;}
    .list-slide.short {height: 140px;}
    .list-slide.middle {height: 190px;}
    .list-slide .swiper-slide>a {height: 61px; line-height: 61px;}
}
@media screen and (min-width: 1025px){
    .gallery-wrap>div {width: 35%; margin-right: 3%; height: 320px;}
    .gallery-wrap .thumb-slide.swiper-container {width: 65%; max-width: 744px;}
}

.banner-wrap {background: #22305b; color: #d8d8d8; font-size: 16px;}
.banner {position: relative;}
.banner .right {position: absolute; right: -60px; bottom: -40px; width: 160px; height: 110px;}
.banner .right img {width: 100%;}
.banner p {font-size: 28px; color: #fff;}
.banner p>em {color: #fff288; font-weight: 700;}
.banner .ebook-link {background: #141414; box-shadow: 0 0 0 rgb(68 255 188 / 50%); transition: all 0.5s; margin-top: 20px; color: #fff; height: 56px; display: block; width: 230px; text-align: center; line-height: 56px;}
.banner .ebook-link:hover {box-shadow: 6px 6px 16px rgb(68 255 188 / 50%); color: #66ffe4;}

@media screen and (min-width: 769px){
    .banner-wrap {padding: 20px;}
    .banner {display: flex; justify-content: center; align-items: center;}
    .banner .left {margin-right: 60px; text-align: center;}
    .banner .right {position: relative; right: 0; bottom: 0; width: 247px; height: 100%;}
}
@media screen and (min-width: 1025px){
    .banner-wrap {padding: 0;}
    .banner {justify-content: space-evenly;}
    .banner .left {display: flex; align-items: center; text-align: left; margin-right: 0; width: 60%;}
    .banner .left>div {margin-right: 64px;}
    .banner .ebook-link {margin-top: 0;}
    .banner .right {margin-right: 30px;}
    .banner .right img {position: relative; top: 17px;}
}
@media screen and (min-width: 1241px){
    .banner-wrap {background-image: url('/_user/restructure2022/SUSO/img/main/now_cc_bg.png'); background-repeat: no-repeat; background-position: 0 100%; margin-bottom: 20px;}
    .banner .left {width: 50%;}
    .banner .right {height: 150px; bottom: 34px; margin-right: 85px;}
}

.video-wrap {text-align: center;}
.video-list {display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 20px;}
.video-list>li {width: 48.75%; margin-bottom: 2.5%;}
.video-list>li img {width: 100%;}
.video-list>li>a {position: relative; display: block; height: 100%;}
.video-list>li>a:before {position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.2) url('/_user/restructure2022/SUSO/img/main/video_btn.png') 50% no-repeat; background-size: 48px 33px;}

@media screen and (min-width: 1241px){
    .video-list {flex-wrap: nowrap; padding-top: 40px;}
    .video-list>li {width: 23%;}
}