@charset "utf-8";

:root {
    --point-color: #535BF2;
    --point-color2: #00B1D2;
}

/* 메인 비주얼 s */
.main-visual {position: relative;}
.main-visual .swiper-slide {position: relative; height: 500px;}
.main-visual .swiper-slide img {max-width: 100%; height: 100%; object-fit: cover; object-position: 41%;}
.main-visual .txt-layer {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main-visual .txt-layer .main-tit {font-size: 48px; line-height: 1; text-indent: -40px; padding-left: 40px; box-sizing: border-box; white-space: nowrap; background: linear-gradient(to right, var(--point-color), var(--point-color2), var(--point-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.main-visual .txt-layer .main-tit>span {font-size: 32px; display: block; text-indent: 0; white-space: nowrap;}
.main-visual .txt-layer>p {color: #fff; margin-top: 10px; box-sizing: border-box; text-indent: -62px; padding-left: 62px; line-height: 1.2; font-size: 26px; font-weight: 100; word-break: keep-all;}
.main-visual .txt-layer>p>span {display: block; text-indent: 0; color: #00C2CC;}
.main-visual .lnk-wrap {width: 100%; position: absolute; z-index: 1; bottom: 40px; display: flex; gap: 15px; align-items: center; justify-content: center;}
.main-visual .lnk-wrap>li>a {color: #fff;display: flex;align-items: center;flex-direction: column;font-size: 12px;font-weight: 300;word-break: keep-all;}
.main-visual .lnk-wrap span {width: 30px; padding-bottom: 10px;}
.main-visual .lnk-wrap img {max-width: 100%;}
.main-visual .txt-layer .main-tit.sm {font-size: 30px;}
.main-visual .txt-layer .main-tit.sm>span {font-size: 20px;}
.main-visual .txt-layer .main-tit.sm + p {font-size: 20px;}

.slide-control-wrap {position: absolute; z-index: 1; bottom: 120px; left: 50%; transform: translateX(-50%);}
.slide-control.main {position: relative; width: 170px; height: 30px;}
.slide-control.main .pagination-fraction {display: flex; justify-content: space-between; align-items: center; width: 66px; height: 24px; position: absolute; top: 5px; left: 50%; transform: translate(-50%, -50%);  color: #fff;}
.slide-control.main .swiper-button-prev, .slide-control.main .swiper-button-next {width: 10px; height: 21px; background-size: 10px 21px; background-image:url("/type/DEPT_5/img/main/arrow-main.svg")}
.slide-control.main .swiper-button-next {transform: rotate(180deg);}

@media screen and (min-width: 400px){
    .main-visual .lnk-wrap {gap: 20px;}
    .main-visual .lnk-wrap span {width: 40px;}
    .main-visual .lnk-wrap>li>a {font-size: 15px;}
}

@media screen and (min-width: 768px){
    .main-visual .swiper-slide {height: 650px;}
    .main-visual .txt-layer .main-tit {font-size: 70px; text-indent: -80px; padding-left: 135px; line-height: 1;}
    .main-visual .txt-layer .main-tit>span {font-size: 60px; text-indent: 70px;}
    .main-visual .txt-layer>p {position: absolute; left: 0; top: 66px; max-width: 255px; text-indent: -60px; padding-left: 60px; line-height: 1.5; font-size: 36px;}
    .main-visual .lnk-wrap {gap: 60px;}
    .main-visual .lnk-wrap>li>a {font-size: 18px;}
    .main-visual .lnk-wrap span {width: 50px; padding-bottom: 15px;}
    .main-visual .txt-layer .main-tit.sm {font-size: 40px;}
    .main-visual .txt-layer .main-tit.sm>span {font-size: 30px}
    .main-visual .txt-layer .main-tit.sm + p {font-size: 27px;max-width: 300px;}
    .slide-control-wrap {bottom: 150px;}
    .slide-control.main .pagination-fraction {top: 9px;}
    .slide-control.main .swiper-button-prev, .slide-control.main .swiper-button-next {width: 14px; height: 30px; background-size: 14px 30px; }
}
@media screen and (min-width: 1200px){
    .main-visual .swiper-slide {height: 936px;}
    .main-visual .txt-layer .main-tit {padding-left: 195px;}
    .main-visual .lnk-wrap {gap: 110px; bottom: 100px;}
    .main-visual .lnk-wrap:after {content: ''; position: absolute; z-index: -1; left: 0; top: 60px; width: 100%; height: 1px; background-color: #fff; opacity: 0.2;}
    .main-visual .lnk-wrap>li {height: 175px; width: 120px; display: flex; align-items: center; justify-content: center;}
    .main-visual .lnk-wrap>li>a {font-size: 20px;}
    .main-visual .lnk-wrap span {position: relative; width: 15px; height: 15px; overflow: hidden; padding: 0; background: linear-gradient(125deg, var(--point-color) 0%, var(--point-color2) 100%); transform: rotate(45deg); transition: all 0.3s;}
    .main-visual .lnk-wrap img {opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
    .main-visual .lnk-wrap p {padding-top: 20px;}
    .main-visual .lnk-wrap>li>a:hover span {width: 120px; height: 120px; transform: rotate(0); border-radius: 50%;}
    .main-visual .lnk-wrap>li>a:hover img {opacity: 1;}
    .slide-control-wrap {top: auto; left: auto; bottom: 270px; right: 30px; transform: inherit;}
}
@media screen and (min-width: 1550px){
    .main-visual .txt-layer {top: 40%;}
    .main-visual .txt-layer .main-tit {font-size: 120px;text-indent: -245px;padding-left: 490px;}
    .main-visual .txt-layer .main-tit.sm {font-size: 90px;}
     .main-visual .txt-layer .main-tit.sm>span {font-size: 65px;}
    .main-visual .txt-layer .main-tit>span {font-size: 90px;}
    .main-visual .txt-layer>p {top: 120px;line-height: 1.2;font-size: 40px;letter-spacing: -4px;text-indent: inherit;padding-left: 150px;max-width: 597px;}
    .main-visual .txt-layer .main-tit.sm + p {font-size: 40px; max-width: 600px}
}

/* 영상 */
.section:not(.main-visual) {padding-left: 20px; padding-right: 20px;}
.video-wrap {box-sizing: border-box;padding: 40px 20px;}
.video-box {border-radius: 10px; overflow: hidden; position: relative; min-height: 200px;}
.video-bg {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/type/DEPT_5/img/main/test01.jpg') center/cover; }
.video-wrap .video-box:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; background: #000; border-radius: 10px;}
.video-box.play:after {display: none;}
.video-box.play .video-bg {display: none;}
.video-box .play-btn {position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%,-50%); text-indent: -9999px; border-radius: 50%; width: 60px; height: 60px; background: rgba(255,255,255,0.5) url("/type/common/img/layout/btn-video-play.png") center no-repeat; background-size: 25px 25px;}
.video-box .play-btn.hide {z-index: -1;}
.video-box video {width: 100%;}
.video-box iframe {/*display: none;*/ position: absolute; width:100%; height:100%;}
/*.video-box.play iframe {display: inline-block;}*/

@media screen and (min-width: 768px){
    .section:not(.main-visual) {padding-left: 30px; padding-right: 30px;}
    .video-wrap {padding: 75px 30px;}
    .video-box {min-height:303px; border-radius: 15px;}
    .video-box .play-btn {width: 80px; height: 80px;  background-size: 30px 30px; background-position: center left 55%;}
}
@media screen and (min-width: 1024px){
    .video-box {display: inherit; position: relative;}
}
@media screen and (min-width: 1200px){
    #main {margin-left: 240px;overflow: hidden;}
    .section:not(.main-visual) {padding-left: 40px; padding-right: 40px;}
    .tab-wrap {max-width: 1280px; margin: 0 auto;}
    .video-wrap {max-width: 1200px; margin: 0 auto;}
    .video-wrap {position: relative; padding: 100px 30px;}
    .video-wrap::before {content: ''; position: absolute; top: 220px; right: -40px; width: 45px; height: 45px; border-radius: 45px; background: #74D7BA; }
    .video-wrap::after {content: ''; position: absolute; bottom: 250px; right: -140px; width: 45px; height: 45px; border-radius: 45px; background: #8A8DFF; }
    .video-box {min-height: 440px;}
    .video-deco {display: block; content: ''; position: absolute; right: 12px; bottom: 78px; width: 54px; height: 84px; border-radius: 45px; background: #C7F851; transform: rotate(30deg);}
    .video-box .play-btn {width: 120px; height: 120px;  background-size: auto;}
}

.scrolling-text-wrap {position: fixed;mix-blend-mode: color-dodge;left: 0;top: 40%;width: 100%;letter-spacing: -3px;font-size: 100px;font-weight: 900;overflow: hidden;color: #EFEFEF;}
.scrolling-text {white-space: nowrap; display: flex; transform: translateX(0); animation: marquee 40s linear infinite;}
.scrolling-text .line-txt {color: transparent; -webkit-text-stroke: 2px #EFEFEF;}

@keyframes marquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-2673px);}
}

@media screen and (min-width: 1024px){
    .scrolling-text-wrap {font-size: 180px; letter-spacing: -10px;}

    @keyframes marquee {
        0% {transform: translateX(0);}
        100% {transform: translateX(-4582px);}
    }
}

/* news&notice */
#main .section-tit {position: relative;}
#main .section-tit.flex {justify-content: space-between; align-items: flex-end; margin-bottom: 30px;}
.section-tit h2 {font-size: 28px; color: var(--point-color); line-height: 1.2;}
#main .section-tit:before {content: ''; position: absolute; bottom: -16px; width: 20px; height: 5px; background: var(--point-color2); border-radius: 45px;}
.tab-wrap .tab>li {text-align: right;}
.tab-wrap .tab button {font-size: 14px; font-weight: 500; color: var(--point-color); position: relative;}
.tab-wrap .tab .active button {font-size: 20px; font-weight: bold;}
.tab-wrap .tab .active button:before {content: ''; position: absolute; left: -15px; top: 8px; width: 8px; height: 8px; border-radius: 45px; background: var(--point-color2);}
.tab-slide {margin: 0 -20px; padding: 15px 0 50px;}
.tab-slide .slide-wrap {display: none;}
.tab-slide .slide-wrap.active {display: block;}
.tab-slide .swiper-container {padding: 0 30px;}
.tab-slide .swiper-slide {max-width: 230px !important; display: flex; flex-direction: column; font-weight: 500; color: #111; padding: 30px; box-sizing: border-box; border: 1px solid #CCC; border-radius: 20px 7px 20px 40px;}
.tab-slide .swiper-slide em {color: var(--point-color2); font-weight: 700;}
.tab-slide .swiper-slide p {margin: 10px 0 20px; height: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all;}
.tab-slide .swiper-slide .date {font-size: 13px; padding-top: 20px; display: block; border-top: 1px solid #ccc;}
.control {display: flex; justify-content: flex-end; align-items: center; padding: 10px 0; margin: 0 -10px;}
.control .swiper-scrollbar {height: 3px; width: 100%; background: #F5F5FA;}
.control .swiper-scrollbar-drag {background: var(--point-color2);}
.control .more-btn {display: flex; position: relative; margin-left: 10px; text-indent: -9999px; width: 45px; min-width: 45px; height: 45px; border-radius: 45px; background: #F5F5F6;}
.control .more-btn:before, .control .more-btn:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 2px; background: var(--point-color); border-radius: 2px;}
.control .more-btn:after {transform: translate(-50%,-50%) rotate(90deg);}

@media screen and (min-width: 768px){
    .section-tit h2 {font-size: 36px;}
    #main .section-tit:before {width: 30px; height: 7px; bottom: -20px;}
    .tab-wrap .tab>li+li {padding-top: 10px;}
    .tab-wrap .tab button {font-size: 20px;}
    .tab-wrap .tab .active button {font-size: 28px;}
    .tab-wrap .tab .active button:before {width: 10px; height: 10px; left: -19px; top: 12px;}
    .tab-slide {margin: 0 -30px; padding: 30px 0 100px;}
    .tab-slide .swiper-container {padding: 0 45px;}
    .tab-slide .swiper-slide {font-size: 18px; padding: 35px; max-width: 310px !important;}
    .tab-slide .swiper-slide em {font-size: 17px;}
    .tab-slide .swiper-slide .date {font-size: 16px; padding-top: 45px;}
    .tab-slide .swiper-slide p {height: 60px; margin: 20px 0 45px;}
    .control {padding-top: 25px;}
    .control .more-btn {width: 55px; height: 55px; min-width: 55px;}
    .control .more-btn:before, .control .more-btn:after {width: 16px;}
}
@media screen and (min-width: 1200px){
    .section-tit h2 {font-size: 48px; white-space: nowrap; line-height: 1;}
    #main .section-tit:before {bottom: auto; top: 115px;}
    #main .section-tit.flex {display: block; margin-bottom: 0; width: 190px;}
    .tab-wrap {display: flex; justify-content: space-between; padding-bottom: 80px;}
    .tab-wrap .tab {padding-top: 100px;}
    .tab-wrap .tab button {font-size: 26px;}
    .tab-wrap .tab .active button {font-size: 32px;}
    .tab-wrap .tab .active button:before {width: 12px; height: 12px; top: 16px; left: -25px;}
    .tab-slide {padding: 0; margin: 0; width: calc(100% - 230px);}
    .tab-slide .swiper-container {padding: 0;}
    .tab-slide .swiper-slide {max-width: 307px !important; border-radius: 30px 7px 30px 50px; transition: background-color 0.3s;}
    .tab-slide .swiper-slide:hover, .tab-slide .swiper-slide:focus {background: #1B2E57; color: #fff;}
    .tab-slide .swiper-slide:hover em, .tab-slide .swiper-slide:focus em {color: #fff;}
    .control {margin: 0; padding-top: 30px;}
    .control .more-btn {margin-left: 20px;}
}
@media screen and (min-width: 1550px){
    .tab-slide {max-width: 970px;}
}