@charset "utf-8";

/**************************************************
*
*   영문 main.css
*
***************************************************/
#main-section-01 {height: 900px; position: relative; display: flex; flex-direction: column; color: #fff;}
#main-section-01 .swiper {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
#main-section-01 .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
#main-section-01 .main-intro-box {height: 100%; display: flex; flex-direction: column; justify-content: center;}
#main-section-01 .main-intro-box > .inner {min-height: 70%; display: flex; flex-direction: column; justify-content: space-between; position: relative; gap: 20px;}
#main-section-01 .main-intro-box .txt-box {}
#main-section-01 .main-intro-box .txt-box h2 {font-size: 40px; font-weight: 600;}
#main-section-01 .main-intro-box .txt-box h2 .font-large {font-size: 65px; font-weight: 800; line-height: 1; margin-top: 5px;}
#main-section-01 .main-intro-box .txt-box p {font-size: 24px; font-weight: 300; margin-top: 20px; line-height: 1.4;}
#main-section-01 .main-intro-box .com-btn-more-01 {margin-top: 40px;}
#main-section-01 .main-intro-box .ctrl-box {display: flex; align-items: center; justify-content: flex-end; gap: 15px;} 
#main-section-01 :where(.swiper-button-prev, .swiper-button-next, .swiper-pagination) {position: static; width: auto; height: auto; margin: 0;}
#main-section-01 :where(.swiper-button-prev, .swiper-button-next) {color: #fff;}
#main-section-01 :where(.swiper-button-prev, .swiper-button-next) i {font-weight: 800;}
#main-section-01 :where(.swiper-button-prev, .swiper-button-next)::after {display: none;}
#main-section-01 .swiper-pagination {margin-right: 10px; font-size: 17px;}
#main-section-01 .com-btn-01 {display: none;}
#main-section-01 .com-btn-01.active {display: flex;}

#main-section-02 {padding: 70px 0 150px;}
#main-section-02 .quick-menu {}
#main-section-02 .quick-menu > .inner {display: flex; align-items: center; gap: 20px;}
#main-section-02 .quick-menu .list {width: 72%; display: flex; gap: 20px;}
#main-section-02 .quick-menu .list > li {width: 100%;}
#main-section-02 .quick-menu .list a {width: fit-content; display: flex; flex-direction: column; gap: 17px; align-items: center; text-align: center;}
#main-section-02 .quick-menu .list a:where(:hover,:focus) {}
#main-section-02 .quick-menu .list a:where(:hover,:focus) .img-box {background-color: #004386; box-shadow: 0 5px 10px #666;}
#main-section-02 .quick-menu .list a:where(:hover,:focus) .img-white {opacity: 1;}
#main-section-02 .quick-menu .list a:where(:hover,:focus) .img-black {opacity: 0;}
#main-section-02 .quick-menu .list img {transition: 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#main-section-02 .quick-menu .list .img-white {opacity: 0;}
#main-section-02 .quick-menu .list .img-box {width: 100px; height: 100px; background-color: #f9f9f9; border-radius: 50%; position: relative; transition: 0.3s;}
#main-section-02 .quick-menu .list .txt-box {color: #222; font-size: 17px; font-weight: 500;}
#main-section-02 .quick-menu .intl-students {width: 28%; padding: 10px; padding-right: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; border-left: 1px solid #aaa;}
#main-section-02 .quick-menu .intl-students p {color: #888; font-size: 20px;}
#main-section-02 .quick-menu .intl-students h3 {color: #000;font-size: 22px;font-weight: 800;line-height: 1.4;}
#main-section-02 .quick-menu .intl-students .com-btn-box-01 {margin-top: 10px;}
#main-section-02 .notice-box {margin-top: 115px;}
#main-section-02 .notice-box .hd-box {}
#main-section-02 .notice-box .hd-box > .inner {display: flex; align-items: center; justify-content: space-between; gap: 40px;}
#main-section-02 .notice-box .com-title-01 {flex-shrink: 0;font-size: 30px;text-align: left;}
#main-section-02 .notice-box .tab-list {--gap-mgl: 12px; display: flex; font-size: 25px; color: #000; font-weight: 600; gap: 5px var(--gap-mgl); flex-wrap: wrap;}
#main-section-02 .notice-box .tab-list li {display: flex; align-items: center;}
#main-section-02 .notice-box .tab-list li:not(:last-of-type):after {content: ""; width: 5px; height: 5px; background-color: #000; border-radius: 50%; margin-left: var(--gap-mgl);}
#main-section-02 .notice-box .tab-list a.active {color: #004386;}
#main-section-02 .notice-box .tab-list a:not(.active):where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
#main-section-02 .notice-box .ctrl-box {flex-shrink: 0; display: flex; gap: 10px;}
#main-section-02 .notice-box .ctrl-box img {width: 15px;}
#main-section-02 .notice-box .ctrl-box button {background-color: #fff; font-size: 24px; color: #000;}
#main-section-02 .notice-box .ctrl-box button:where(:hover,:focus) {filter: brightness(0.9);}
#main-section-02 .notice-box .ctrl-box i {font-weight: 800;}
#main-section-02 .notice-box .btn-more {margin-left: 5px;}
#main-section-02 .notice-box :where(.btn-play,.btn-pause) {display: none;}
#main-section-02 .notice-box :where(.btn-play,.btn-pause).active {display: flex;}
#main-section-02 .notice-box .swiper {position: absolute; left: -10000px; top: 0; opacity: 0; width: 100%; max-width: 1825px; height: 370px; margin: 0 auto; padding: 20px; margin-top: 15px;}
#main-section-02 .notice-box .swiper.active {display: block; position: static; opacity: 1;}
#main-section-02 .notice-box .swiper :where(.title, .ctt) {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
#main-section-02 .notice-box .swiper :where(.ctt, .date) {font-size: 18px; color: #888;}
#main-section-02 .notice-box .swiper .title {height: 52px; font-size: 22px; color: #000; -webkit-line-clamp: 2; font-weight: 600;}
#main-section-02 .notice-box .swiper .ctt {height: 63px; -webkit-line-clamp: 3; margin-top: 20px;}
#main-section-02 .notice-box .swiper .date {margin-top: auto;}
#main-section-02 .notice-box .swiper-slide {}
#main-section-02 .notice-box .swiper-slide a {display: flex; flex-direction: column; height: 100%; padding: 70px 35px 40px; box-shadow: 0 0 10px #ddd; border-radius: 10px; background-color: #fff; transition: 0.5s;}
#main-section-02 .notice-box .swiper-slide a:where(:hover,:focus) {background-color: #f4f4f4; transform: translateY(-20px); border: 1px solid #aaa;}
#main-section-02 .notice-box .swiper-slide a:where(:hover,:focus) :where(.title, .ctt) {text-decoration: underline;}

#main-section-03 {background: url("/resources/user/eng/img/sub/bg_eng_jbnu_focus.jpg") no-repeat center/cover;}
#main-section-03 > .inner {padding: 85px 0; display: flex; justify-content: space-between; gap: 40px;}
#main-section-03 > .inner > .lb {width: 35%; color: #fff;}
#main-section-03 > .inner > .rb {width: 65%;}
#main-section-03 .com-title-01 {color: #fff;}
#main-section-03 .com-title-01 .small {color: #fff; font-weight: 500;}
#main-section-03 .txt-01 {font-size: 25px; font-weight: 500; margin-top: 25px;}
#main-section-03 .txt-02 {font-size: 20px; margin-top: 10px; font-weight: 300;}
#main-section-03 .com-btn-more-01 {margin-top: 40px;}
#main-section-03 .people-list {--mt: 130px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 57px; align-items: flex-start;}
#main-section-03 .people-list li {min-height: 510px; background-color: #fff; border-radius: 10px; padding: 55px 40px;}
#main-section-03 .people-list li:first-of-type {margin-top: var(--mt);}
#main-section-03 .people-list li:nth-of-type(even):not(:nth-of-type(2)) {margin-top: calc(-1 * var(--mt));}
#main-section-03 .people-list .img-box {width: 100%; height: 300px; margin-bottom: 30px;}
#main-section-03 .people-list .img-box img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
#main-section-03 .people-list .txt-box {padding: 0 20px; text-align: center; font-size: 20px; color: #333; font-weight: 600;}

#main-section-04 {padding: 130px 0; background: url("/resources/user/eng/img/sub/bg_eng_jbnu_award.jpg") no-repeat center/cover;}
#main-section-04 .hd-box > .inner {position: relative;}
#main-section-04 .com-title-01 {color: #fff; text-align: center;}
#main-section-04 .com-title-01 .small {color: #DD2884;}
#main-section-04 .swiper {height: 285px; color: #fff; margin-top: 60px;}
#main-section-04 .swiper-slide {width: 350px;}
#main-section-04 .swiper-slide .txt-box {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(5px); text-align: center; border: 1px solid #aaa; border-radius: 10px; padding: 10px; transition: 0.3s;}
#main-section-04 .swiper-slide .txt-box:where(:hover,:focus) {background-color: #A6165F; border-color: #A6165F;}
#main-section-04 .swiper-slide .title {font-size: 50px; font-weight: 800;}
#main-section-04 .swiper-slide .title .tit-01 {font-size: 23px;}
#main-section-04 .swiper-slide .ctt {font-size: 20px; margin-top: 23px;}
#main-section-04 .ctrl-box {display: flex; position: absolute; top: 50%; right: 0; transform: translateY(-50%); gap: 10px;}
#main-section-04 :where(.btn-play, .btn-pause) {display: none;}
#main-section-04 :where(.btn-play, .btn-pause).active {display: flex;}

#main-section-05 {}
#main-section-05 > .inner {padding: 100px 0;}
#main-section-05 .hd-box {display: flex; justify-content: space-between; align-items: center;}
#main-section-05 .icon-list {gap: 20px; display: flex; justify-content: center;}
#main-section-05 .icon-list img {width: 48px;}
#main-section-05 .icon-list a {display: block; transition: 0.5s;}
#main-section-05 .icon-list a:where(:hover,:focus) {transform: translateY(-10px);}
#main-section-05 .ctt-box {display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-top: 60px;}
#main-section-05 .slider-box {width: 54%; display: flex; flex-direction: column; justify-content: space-between;}
#main-section-05 .slider-box .insta-img {width: 100%; height: 100%; transition: 0.5s;}
#main-section-05 .slider-box .insta-icon {position: absolute; top: 10px; left: 10px;}
#main-section-05 .swiper {width: 100%;}
#main-section-05 .swiper-slide a {aspect-ratio: 1 / 1; display: block; position: relative; overflow: hidden;}
#main-section-05 .swiper-slide a:where(:hover,:focus) {}
#main-section-05 .swiper-slide a:where(:hover,:focus) .insta-img {transform: scale(1.1);}
#main-section-05 .swiper-pagination {flex-shrink: 0; width: auto; font-size: 18px; position: static; display: flex; align-items: center; gap: 8px; margin: 0 25px;}
#main-section-05 .swiper-pagination-current {font-size: 26px; font-weight: 800;}
#main-section-05 .swiper-pagination-total {font-weight: 800; color: var(--contents--third);}
#main-section-05 .ctrl-box {display: flex; align-items: center; margin-top: 43px;}
#main-section-05 .ctrl-box button {flex-shrink: 0; border: 1px solid #ddd; color: #aaa; background-color: #fff;}
#main-section-05 .ctrl-box button:where(:hover,:focus) {filter: brightness(0.9);}
#main-section-05 .btn-prev {margin-right: 5px;}
#main-section-05 .progress-bar {width: 100%; height: 1px; background-color: #ddd; position: relative}
#main-section-05 .progress-bar .current {width: 0; height: 5px; background-color: #004386; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#main-section-05 .vid-box {width: 46%; display: flex; flex-direction: column; background-color: #000;}
#main-section-05 .vid-box iframe {flex-shrink: 0; width: 100%; aspect-ratio: 630 / 315;}
#main-section-05 .vid-box .info {color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; padding: 15px 20px;}

@media screen and (max-width: 1400px) {
    #main-section-01 {height: 800px;}
    #main-section-01 .main-intro-box .txt-box h2 {font-size: 30px;}
    #main-section-01 .main-intro-box .txt-box h2 .font-large {font-size: 50px;}
    #main-section-01 .main-intro-box .txt-box p {font-size: 20px;}

    #main-section-02 {padding: 35px 0 100px; background-size: 600px;}
    #main-section-02 .quick-menu > .inner {flex-wrap: wrap-reverse; gap: 25px;}
    #main-section-02 .quick-menu .intl-students {width: 100%; align-items: flex-start; text-align: left; border-left: none; gap: 5px; padding: 0;}
    #main-section-02 .quick-menu .intl-students br {display: none;}
    #main-section-02 .quick-menu .intl-students p {font-size: 18px;}
    #main-section-02 .quick-menu .intl-students h3 {font-size: 30px;}
    #main-section-02 .quick-menu .list {width: 100%;}
    #main-section-02 .quick-menu .list a {gap: 10px; margin: 0 auto;}
    #main-section-02 .quick-menu .list img {height: 35px;}
    #main-section-02 .quick-menu .list .img-box {width: 80px; height: 80px;}
    #main-section-02 .quick-menu .list .txt-box {font-size: 15px;}
    #main-section-02 .notice-box {margin-top: 90px;}
    #main-section-02 .notice-box .hd-box > .inner {flex-wrap: wrap;}
    #main-section-02 .notice-box .tab-list {order: 3; width: 100%; justify-content: center; font-size: 22px;}
    #main-section-02 .notice-box .swiper {height: 300px; margin-top: 10px;}
    #main-section-02 .notice-box .swiper :where(.ctt, .date) {font-size: 16px;}
    #main-section-02 .notice-box .swiper .title {height: 48px; font-size: 20px;}
    #main-section-02 .notice-box .swiper .ctt {height: 57px;}
    #main-section-02 .notice-box .swiper-slide a {padding: 20px;}
    #main-section-02 .notice-box .ctrl-box {gap: 5px;}

    #main-section-03 > .inner {flex-wrap: wrap; padding: 50px 0;}
    #main-section-03 > .inner > .lb {width: 100%;}
    #main-section-03 > .inner > .lb br {display: none;}
    #main-section-03 > .inner > .rb {width: 100%;}
    #main-section-03 .txt-01 {font-size: 22px; margin-top: 15px;}
    #main-section-03 .txt-02 {font-size: 18px; margin-top: 7px;}
    #main-section-03 .com-btn-more-01 {margin-top: 30px;}
    #main-section-03 .people-list {--mt: 70px; gap: 50px 40px;}
    #main-section-03 .people-list li {min-height: 400px; padding: 25px;}
    #main-section-03 .people-list .txt-box {font-size: 18px; padding: 0 10px;}
    #main-section-03 .people-list .img-box {height: 250px;}

    #main-section-04 {padding: 85px 0;}
    #main-section-04 .swiper {height: 220px;}
    #main-section-04 .swiper-slide .title {font-size: 40px;}
    #main-section-04 .swiper-slide .ctt {font-size: 18px; margin-top: 12px;}

    #main-section-05 > .inner {padding: 60px 0;}
    #main-section-05 .icon-list {gap: 10px;}
    #main-section-05 .icon-list img {width: 40px;}
    #main-section-05 .ctrl-box button {width: 40px; height: 40px;}
    #main-section-05 .vid-box .info {font-size: 14px; padding: 12px 15px;}
    #main-section-05 .swiper-pagination {font-size: 16px; margin: 0 15px; gap: 5px;}
    #main-section-05 .swiper-pagination-current {font-size: 22px;}
    #main-section-05 .ctt-box {gap: 20px; margin-top: 35px;}
    
}

@media screen and (max-width: 840px) {
    #main-section-01 {height: 600px;}
    #main-section-01 .main-intro-box > .inner {min-height: 75%;}
    #main-section-01 .main-intro-box .txt-box h2 {font-size: 24px;}
    #main-section-01 .main-intro-box .txt-box h2 .font-large {font-size: 35px;}
    #main-section-01 .main-intro-box .txt-box p {font-size: 18px; margin-top: 15px;}
    #main-section-01 .main-intro-box .com-btn-more-01 {margin-top: 30px;}
    #main-section-01 .main-intro-box .txt-box h2 .font-large {margin-top: 3px;}
    #main-section-01 .swiper-pagination {font-size: 15px;}
    #main-section-01 :where(.swiper-button-prev, .swiper-button-next) {font-size: 14px;}
    #main-section-01 .main-intro-box .ctrl-box {gap: 10px;}

    #main-section-02 {background-size: 500px; padding: 35px 0 50px;}
    #main-section-02 .quick-menu .intl-students p {font-size: 16px;}
    #main-section-02 .quick-menu .intl-students h3 {font-size: 25px;}
    #main-section-02 .quick-menu .list {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px;}
    #main-section-02 .quick-menu .list .img-box {width: 70px; height: 70px;}
    #main-section-02 .quick-menu .list .txt-box {font-size: 14px;}
    #main-section-02 .quick-menu .list img {height: 30px;}
    #main-section-02 .notice-box {margin-top: 65px;}
    #main-section-02 .notice-box .com-title-01 {margin-bottom: 30px;}
    #main-section-02 .notice-box .hd-box > .inner {gap: 12px;}
    #main-section-02 .notice-box .tab-list {--gap-mgl: 8px; font-size: 20px;}
    #main-section-02 .notice-box .tab-list li:not(:last-of-type):after {width: 4px; height: 4px;}
    #main-section-02 .notice-box .swiper {height: 265px; padding: 10px;}
    #main-section-02 .notice-box .swiper :where(.ctt, .date) {font-size: 14px;}
    #main-section-02 .notice-box .swiper .title {font-size: 18px; height: 42px;}
    #main-section-02 .notice-box .swiper .ctt {height: 48px;}
    #main-section-02 .notice-box .ctrl-box {width: 100%; order: 5; justify-content: center;}
    #main-section-02 .notice-box .ctrl-box button {width: 35px; height: 35px;}
    #main-section-02 .notice-box .ctrl-box i {font-size: 20px;}
    #main-section-02 .notice-box .btn-more {margin-left: 0;}

    #main-section-03 > .inner {padding: 35px 0;}
    #main-section-03 .txt-01 {font-size: 20px; margin-top: 10px;}
    #main-section-03 .txt-02 {font-size: 16px; margin-top: 4px;}
    #main-section-03 .com-btn-more-01 {margin-top: 25px;}
    #main-section-03 .people-list {--mt: 50px; gap: 30px 25px;}
    #main-section-03 .people-list li {min-height: 300px; padding: 15px;}
    #main-section-03 .people-list .txt-box {font-size: 16px;}
    #main-section-03 .people-list .img-box {height: 180px; margin-bottom: 15px;}

    #main-section-04 {padding: 50px 0;}
    #main-section-04 .ctrl-box {position: static; transform: none; justify-content: center; margin-top: 20px;}
    #main-section-04 .swiper {margin-top: 45px; height: 195px;}
    #main-section-04 .swiper-slide {width: 310px;}
    #main-section-04 .swiper-slide .title {font-size: 35px;}
    #main-section-04 .swiper-slide .ctt {font-size: 16px;}
    
    #main-section-05 > .inner {padding: 35px 0;}
    #main-section-05 .hd-box {flex-wrap: wrap; justify-content: center; gap: 12px;}
    #main-section-05 .icon-list img {width: 35px;}
    #main-section-05 .com-title-01 {width: 100%; text-align: center;}
    #main-section-05 .ctt-box {flex-wrap: wrap; gap: 45px;}
    #main-section-05 .slider-box {width: 100%;}
    #main-section-05 .ctrl-box {margin-top: 20px;}
    #main-section-05 .vid-box {width: 100%;}
}

@media screen and (max-width: 480px) {
    #main-section-02 {background-size: 400px;}
    #main-section-02 .notice-box .swiper {height: 240px;}

    #main-section-03 .people-list {grid-template-columns: repeat(1, minmax(0,1fr));}
    #main-section-03 .people-list li {min-height: unset; margin-top: 0 !important;}
    #main-section-03 .people-list .txt-box {padding: 10px 0;}
}










@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}