@charset "utf-8";

:root {
    --point-color: #1B2E57;
    --point-color2: #535BF2;
}

/* 공통 섹션 */
#main.container {position: relative; display: flex; padding-top: 60px; flex-direction: column; align-items: center;}
h3.section-title {font-size: 24px; font-weight: bold; color: var(--black);}
.section-title-box p {font-size: 13px; color: #777; word-break: keep-all;}
.bg-lightgray {position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: var(--lightgray);}
.sec-3 {position: relative; max-width: 1640px; width: 100%; box-sizing:border-box; margin: 0 auto; }

@media screen and (min-width: 768px) {
    h3.section-title {font-size: 36px;}
    .section-title-box p {font-size: 18px;}
    .sec-3 {background: #fff; max-width: 1600px; justify-content: space-between; margin: 0 40px; position: relative;}
    .sec-3-inner { padding: 0 40px;}

    .bg-lightgray::before {content: 'DEPARTMENT OF INTERNATIONAL STUDIES'; font-size: 124px; top: 0; left: 0; position: absolute; color: #FFFFFF; opacity: 0.5; line-height: 1; font-weight: 800;}
}
@media screen and (min-width: 1024px){
    .sec-3-inner {width: 100%; display: flex; gap: 20px; padding: 30px 30px 80px; justify-content: space-between; background: #fff; box-sizing: border-box;}
}
@media screen and (min-width: 1200px){
    h3.section-title {font-size: 36px;}
    .sec-3-inner {justify-content: center; gap: 120px; padding: 75px 40px 100px;}
    .bg-lightgray {padding: 80px 0 120px 0;}
    .bg-lightgray::before {font-size: 200px; top: -30px;}
}


/*** 메인 비주얼 s ***/
.main-visual {max-width: 1640px; width: 100%; padding: 30px 20px 0; box-sizing: border-box;}
.main-visual .txt-area {padding-bottom: 40px;}
.main-visual .txt-area .top {display: block; font-size: 13px; padding-bottom: 15px; color: var(--point-color);}
.main-visual .txt-area .main-tit {font-size: 40px; line-height: 1; padding-bottom: 19px; font-weight: 800; color: var(--point-color);}
.main-visual .txt-area .bottom {display: block; font-size: 16px; line-height: 1.4; color: var(--point-color);}
.main-visual .lnk-area {display: flex; flex-wrap: wrap; padding: 0 20px 53px 0; gap: 13px;}
.main-visual .lnk-area li {width: calc(25% - 10px); display: flex; justify-content: center;}
.main-visual .lnk-area li>a {display: block;}
.main-visual .lnk-area li>a>span {display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border: 1px solid #EBEBEB; box-sizing: border-box; border-radius: 50%;}
.main-visual .lnk-area li>a>span:hover {border: 1px solid var(--point-color2);}
.main-visual .lnk-area li>a>span img {width: 30px;}
.main-visual .lnk-area li:hover p {color: var(--point-color2);}
.main-visual .lnk-area li>a>p {padding-top: 10px; font-size: 13px; text-align: center; color: #111;}

@keyframes indiBar {
    0% {width: 0;}
    100% {width: 100%;}
}

.main-visual .right {position: static;}
.main-visual-slider {height: 214px;}
.main-visual-slider .swiper-button-disabled {opacity: 1;}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet {width:100%; max-width: 50px; height: auto; margin: 0; font-size: 1em; color: #fff; border-radius: 0; background: transparent; vertical-align: top; opacity: 1;}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet .rect {position:relative; overflow:hidden; height:2px; margin-bottom:0; background:#ccc; box-sizing:border-box; }
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet .rect span {position:absolute; left:0; top:0; height:100%; background:#ccc; transform-origin:left; opacity:1;}

.main-visual-slider .swiper-pagination {width: 100%;}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet {display: none;}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet-active {display: block;}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet-active .rect {opacity:1; background:var(--point-color2);}
.main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet-active .rect span {animation: indiBar 4s linear 0.0001s 1 forwards;}
/* .main-visual-slider:hover .swiper-pagination-bullets .swiper-pagination-bullet-active .rect span {animation: none; width: 0;} */
.main-visual .swiper-slide {position: relative;}
.main-visual .swiper-slide img {width: 100%; height: 100%; object-fit: cover; }
.main-visual-slider .swiper-pagination-bullets {bottom: 0; left: auto; right: 0; display: flex; max-width: 135px; height: 43px; align-items: center; justify-content: center;}
.main-visual-slider .swiper-pagination-fraction {position: absolute; left: auto; right: 0; bottom: 0;  display: flex; background: #fff; width: 135px; height: 43px; padding: 0 15px; box-sizing: border-box; justify-content: space-between; align-items: center; color: var(--black); z-index: 1; font-size: 12px;}
.main-visual .swiper-control {position: absolute; width: 88px; height: 44px; bottom: 0; right: 135px;}
.main-visual .swiper-button-next, .main-visual .swiper-button-prev {bottom: 0; top: auto; width: 44px; height: 44px; background-image: url("/type/DEPT_6/img/main/ico-arrow.png"); background-size: 15px 13px; transition: .4s;}
.main-visual .swiper-button-prev {background-color: var(--point-color2); left: 0; }
.main-visual .swiper-button-next {background-color: var(--point-color); right: 0; transform: rotate(180deg);}
.main-visual .swiper-button-next:hover, .main-visual .swiper-button-prev:hover {opacity: 0.6; background-position: 40%;}

@media screen and (min-width: 918px){
    .main-visual {height: auto; padding: 55px 0 0 40px;}
    .main-visual .right {width: 50%; position: absolute; right: 0; top: 60px;}
    .main-visual .txt-area .top {font-size: 18px; padding-bottom: 19px;}
    .main-visual .txt-area .main-tit {font-size: 80px; padding-bottom: 18px;}
    .main-visual .txt-area .bottom {font-size: 22px;}
    .main-visual .lnk-area {max-width: 360px; padding-bottom: 60px;}

    .main-visual-slider {height: 497px;}
    .main-visual .swiper-control {width: 200px; height: 100px; right: 200px;}
    .main-visual .swiper-button-next, .main-visual .swiper-button-prev {width: 100px; height: 100px; background-size: 36px 32px;}
    .main-visual-slider .swiper-pagination-bullets {height: 100px; right: 60px;}
    .main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet {max-width: 80px;}
    .main-visual-slider .swiper-pagination-fraction {justify-content: flex-start; width: 200px; height: 100px; font-size: 15px; gap: 40px;}
}

@media screen and (min-width: 1200px){
    .main-visual {height: 680px; padding: 130px 20px 0 20px;}
    .main-visual .txt-area {padding-bottom: 62px;}
    .main-visual .txt-area .bottom {font-size: 22px;}
    .main-visual .lnk-area {max-width: 440px; padding: 0;}
    .main-visual .lnk-area li>a>p {font-size: 16px;}
    .main-visual .lnk-area li>a>span {width: 100px; height: 100px;}
    .main-visual .lnk-area li>a>span img {width: 40px;}
    .main-visual .right {width: 60%;}
    .main-visual-slider {height: 680px;}
    .main-visual .swiper-control {right: 400px}
    .main-visual-slider .swiper-pagination-bullets {right: 240px;}
    .main-visual-slider .swiper-pagination-bullets .swiper-pagination-bullet {max-width: 100px;}
    .main-visual-slider .swiper-pagination-fraction {width: 400px; gap: 60px;}

}
/*** 메인 비주얼 e ***/

/* 교육과정, 입학안내 s */
.information-wrap {max-width: 1640px; width: 100%; display: flex; padding: 40px 20px; box-sizing: border-box; flex-direction: column; justify-content: center;}
.information-wrap .section-title {color: #fff;}
.information-wrap .section-title-box p {position: relative; color: #fff; text-shadow: 2px 2px 2px #7777777a; z-index: 1;}
.information-wrap .course-area {position: relative; display: flex; justify-content: space-between; background: url("/type/DEPT_6/img/main/bg-info.jpg") no-repeat bottom ; background-size: cover;  color: #fff;}
.information-wrap .course-area::before {content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.0001) 100%); mix-blend-mode: normal; opacity: 0.7;}
.information-wrap .course-area .section-title-box {position:relative; padding: 20px 15px; z-index: 1;}
.information-wrap .course-area  .section-title-box p {color: #C4C4C4;}
.information-wrap .course-area .course-list {padding: 20px;flex-shrink: 0;background: #0310ff26;backdrop-filter: blur(25px);font-weight: 300;display: flex;flex-direction: column;justify-content: center;/* color: #fff; */}
.information-wrap .course-area .course-list li a {color: #CBCEFB;transition: .2s;}
.information-wrap .course-area .course-list li a:hover {color: #fff; text-decoration: underline;}
.information-wrap .guide-area {position: relative; padding: 20px 15px; background: #69AFB5; box-sizing: border-box; }
.information-wrap .guide-area .img-box {position: absolute; right: 0; bottom: 0;  width: 187px; height: 116px; overflow: hidden;}
.information-wrap .guide-area .img-box img {max-width: 100%;}
/*.information-wrap .guide-area::before {content: ''; position: absolute; right: 0; bottom: 0; width: 187px; height: 116px; background: url("/_user/components/type6/img/main/img-guide.png") no-repeat; background-size: cover;}*/
.information-wrap .guide-area .section-title-box em {display: block;}
.information-wrap .guide-area .left {line-height: 1.4;}
.information-wrap .guide-area .left>a {display: flex; justify-content: center; align-items: center; width: 83px; height: 30px; margin-top: 10px; color: #fff; border: 1px solid #fff; border-radius: 25px; box-sizing: border-box; font-size: 13px; transition: .3s;}
.information-wrap .guide-area .left>a:hover {background: #fff; color: #69AFB5;}

@media screen and (min-width: 768px){
    .information-wrap {max-width: 1680px; flex-direction: row; padding: 110px 40px 45px;}
    .information-wrap .section-title {font-size: 28px;}
    .information-wrap .course-area {width: 50%;}
    .information-wrap .course-area .section-title-box {padding: 30px;}
    .information-wrap .course-area .course-list {padding: 30px;font-size: 18px;}
    .information-wrap .guide-area {width: 50%; padding: 30px 0 20px 20px;}
    .information-wrap .guide-area .img-box {width: 303px; height: 219px;}
    .information-wrap .guide-area .section-title-box em {font-size: 20px;}
    .information-wrap .guide-area .left>a {width: 100px; height: 37px; font-size: 17px; margin-top: 20px;}
}

@media screen and (min-width: 1200px){
    .information-wrap {padding: 0 40px 45px;}
    .information-wrap .course-area .course-list {min-width: 240px;box-sizing: border-box;}
    .information-wrap .guide-area .img-box {width: 453px; height: 262px;}
}
/*** 교육과정, 입학안내 e ***/

/*** 학과강의 s ***/
.video-wrap {padding: 35px 20px 35px 20px; background: #fff;}
.video-wrap .section-title-box {display: flex; justify-content: space-between; align-items: flex-end;}

.lecture-slide-wrap {padding: 30px 20px 0; margin-top: 20px; position: relative;}
.lecture-slide {height: 0; padding-top: 60%; position: relative;}
.slides-wrapper {position: absolute; bottom: 0; width: 100%; height: 100%;}
.slides-wrapper>li {width: 100%; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; transition: all 0.2s;}
.slides-wrapper>li:first-child {z-index: 10;}
.slides-wrapper>li:nth-child(2) {padding-bottom: 15px; width: calc(100% - 30px); z-index: 5; opacity: 0.8;}
.slides-wrapper>li:nth-child(3) {padding-bottom: 30px; width: calc(100% - 60px); z-index: 1; opacity: 0.5;}
.slides-wrapper>li:nth-child(4) {padding-bottom: 45px; width: 70%; z-index: -1; opacity: 0.3;}
.slides-wrapper>li>a {display: block; height: 100%;}
.slides-wrapper>li>a img {width: 100%; height: 100%; object-fit: cover;}
.lecture-slide-wrap .slide-controls {cursor: pointer;position: absolute;margin-top: 25px;top: 50%;transform: translateY(-50%);z-index: 20;border-radius: 50%;width: 50px;height: 50px;background: #fff;box-shadow: 0 3px 8px rgba(162,162,162,0.5);}
.lecture-slide-wrap .slide-prev {left: 0;}
.lecture-slide-wrap .slide-next {right: 0;}
.lecture-slide-wrap .slide-controls:before {content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--point-color); border-left: 2px solid var(--point-color);}
.lecture-slide-wrap .slide-prev:before {transform: translate(-50%,-50%) rotate(-45deg); margin-left: 3px;}
.lecture-slide-wrap .slide-next:before {transform: translate(-50%,-50%) rotate(135deg); margin-left: -3px;}
/*** 학과강의 e ***/

/*** 공지사항 / 열린게시판 s ***/
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        left: -25px;
    }
    to {
        opacity: 1;
        left: -20px;
    }
}
.btn-more {display: flex; position: relative; width: 40px; height: 40px; border-radius: 28px; background: #F5F5F6; transition: .3s;}
.btn-more::before, .btn-more::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 2px; background: var(--point-color); border-radius: 2px;}
.btn-more::after {transform: translate(-50%,-50%) rotate(90deg);}
.btn-more:hover, .btn-more:focus {transform: rotate(180deg);}

.community-wrap {position: relative; padding: 20px 20px 60px 20px; background: #fff;}
.community-wrap .section-title-box>p {max-width: 300px; padding-bottom: 30px;}
.community-wrap .tab-box {display: flex; flex-direction: column;}
.community-wrap .tab {display: flex; overflow: hidden; margin-bottom: 30px;}
.community-wrap .tab > li {display: flex; justify-content: center; width: 50%; height: 45px; position: relative; border: 2px solid #c8c8c8; border-radius: 27px; box-sizing: border-box; cursor: pointer;}
.community-wrap .tab > li.on {border-color: #111;}
.community-wrap .tab > li > button {font-size: 18px; color: #777;}
.community-wrap .tab > li.on > button {color: var(--black); font-weight: bold;}

.community-wrap .list-box {border-top: 3px solid #081118;}
.community-wrap .list-box .btn-more-wrap {position: absolute; top: 35px; right: 20px;}
.community-wrap .list-box li {padding: 20px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; transition: .3s;}
.community-wrap .list-box li:hover {border-top-color: var(--point-color2);}
.community-wrap .list-box li:hover .list-tit-area p, .community-wrap .list-box li:hover .date {color: var(--point-color2);}
.community-wrap .list-box li:hover .list-tit-area p {left: 5px;}
.community-wrap .list-box li:hover .arrow {display: block; animation: fadeInLeft .3s;  transform: rotate(135deg); opacity: 1;}
.community-wrap .list-box .tab-view {display: none; min-height: 100px;}
.community-wrap .list-box .tab-view.on {display: block;}
.community-wrap .unit .list-tit-area {display: flex; align-items: center; width: 100%; justify-content: space-between;}
.community-wrap .unit .list-tit-area>p {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: var(--black); transition: .3s; max-width: 440px; width: calc(100% - 40px); position: relative; left: 0;}
.community-wrap .unit .date {display:block; padding-bottom: 10px; color: var(--black); transition: .3s;}

@media screen and (min-width: 768px) {
    .video-wrap .btn-more {left: 20px;}
    .lecture-slide-wrap {padding: 40px 10px 0;}
    .slides-wrapper>li:nth-child(2) {padding-bottom: 20px; width: calc(100% - 40px);}
    .slides-wrapper>li:nth-child(3) {padding-bottom: 40px; width: calc(100% - 80px);}
    .slides-wrapper>li:nth-child(4) {padding-bottom: 60px; width: calc(100% - 120px);}
    .lecture-slide-wrap .slide-controls {width: 60px; height: 60px; background: rgba(162,162,162,0.5); transition: background-color 0.25s;}
    .lecture-slide-wrap .slide-controls:before {border-color: #fff; width: 12px; height: 12px;}
    .lecture-slide-wrap .slide-controls:hover {background: #fff;}
    .lecture-slide-wrap .slide-controls:hover:before {border-color: var(--point-color);}
    .lecture-slide-wrap .slide-prev {left: -20px;}
    .lecture-slide-wrap .slide-next {right: -20px;}
    .community-wrap .tab {margin-bottom: 15px;}
    .community-wrap .tab > li {width: 132px; height: 54px; }
    .community-wrap .tab > li:last-of-type {margin-left: 5px;}
    .community-wrap .list-box {min-height: 320px;}
    .community-wrap .list-box .btn-more-wrap {top: 80px; right: 0;}
    .community-wrap .list-box li {font-size: 18px; padding: 23px 0;}
    .community-wrap .list-box li>a{display: flex; gap: 25px;}
    .community-wrap .unit .date {flex-shrink: 0; padding-bottom: 0;}
    .community-wrap .unit .list-tit-area .arrow {opacity: 0; width: 32px; height: 32px; transform: rotate(135deg); top: 0; transition: .3s; position: relative; left: -20px;}
    .community-wrap .unit .list-tit-area .arrow::before, .community-wrap .unit .list-tit-area .arrow::after {content: ''; position: absolute;}
    .community-wrap .unit .list-tit-area .arrow::before {width: 7px; height: 7px; border: 1px solid var(--point-color2); border-right: 0; border-bottom: 0}
    .community-wrap .unit .list-tit-area .arrow::after {width: 19px; border: 1px solid var(--point-color2); transform-origin: 0 100%; transform: rotate(45deg);}
}

@media screen and (min-width: 918px) {
    .community-wrap .section-title-box>p {max-width: none;}
    .community-wrap .list-box .btn-more-wrap {top: 50px;}
}
@media screen and (min-width: 1024px) {
    .video-wrap {width: 50%; min-width: 450px; display: flex; flex-direction: column; padding-bottom: 0;}
    .lecture-slide-wrap {margin-top: auto; padding-top: 60px;}
    .slides-wrapper>li:nth-child(4) {z-index: 0;}
    .community-wrap {width: 50%; padding-bottom: 0;}
}
@media screen and (min-width: 1200px){
    .video-wrap {padding: 0; width: 45%;}
    .btn-more {width: 55px; height: 55px;}
    .video-wrap .section-title-box {max-width: 570px;}
    .lecture-slide-wrap {max-width: 550px;}
    .community-wrap {max-width: 630px; width: 55%; padding: 0;}
    .community-wrap .list-box .btn-more-wrap {top: 35px;}
    .community-wrap .section-title-box>p {max-width: none;}
}
/*** 공지사항 / 열린게시판 e ***/