@charset "UTF-8";

/* visual */
.visual{height:100vh;}
.visual .visual-inner{height:100%; position: relative;}
.visual-swiper{height:100%;}
.visual-swiper .swiper-wrapper{transition-timing-function: cubic-bezier(0.66, 0, 0.43, 1);}
.visual-swiper .visual-swiper-slide .pc-visual{width:100%; height:100vh; object-fit: cover;}
.visual-swiper .visual-swiper-slide .m-visual{display: none;}

.visual-tit{position: absolute; top:50%; left:11%; z-index: 1; transform: translateY(-50%);}
.visual-tit strong{font-size:8rem; font-family: 'SUITE Variable'; font-weight: 800; color:#fff; }
.visual-tit p{font-size:2.8rem; margin-top:2rem; line-height:4.2rem; color:#fff; font-weight:600}
.player-bg{position: absolute; width:50px; height:50px; bottom:60px; left:80px; z-index: 1;}
.player-bg svg{ width:50px; height:50px; transform: rotate(-90deg);}
.player-bg .play{width:15px; height:16px; background:url('/common/images/user/btn/btn_play.png')no-repeat center; background-size:100%; position: absolute; top:45%; left:50%; transform: translate(-50%, -50%);}
.player-bg .play.paused{width:12px; height:16px; background:url('/common/images/user/btn/btn_pause.png')no-repeat center; background-size:100%; top:47%;}

.scroll-motion{position: absolute; bottom:80px; left:50%; transform: translateX(-50%); z-index: 1;}

/* 대학원 공지 */
.notice{background:#e9f2ff; padding-top:9.5rem; position: relative;}
.notice::before{width:232px; height:201px; background:url('/common/images/user/bg/bg_left_content.png')no-repeat center; background-size:100%; content:''; position: absolute; top:30px; left:0;  pointer-events: none;}
.box-container{display: flex; align-items: flex-start;}
.box-left{width:400px;}
.box-left h2{font-size:4.8rem; color:#222; font-family: 'SUITE Variable'; font-weight: 800; position: relative;}
.box-left a{font-size:1.4rem; margin-top:3rem; color:#222; font-weight:600; display: flex; align-items: center;}
.box-left a img{margin-left:1rem;}
.box-right{width:calc(100% - 400px)}
.tab-type01{display: flex; gap:1rem; margin-left:2rem;}
.tab-type01 li a{font-size:2.4rem; padding:0.9rem 4.5rem; font-weight:600; color:#222; display: block; background:#fff; border-top:1px solid #cad9e9; border-bottom:1px solid #cad9e9; border-left:2px solid #cad9e9; border-right:2px solid #cad9e9; transform: skew(-40deg);}
.tab-type01 li a.on{background:#097cce; color:#fff; border:1px solid #097cce;}
.tab-type01 li a span{transform: skew(40deg); display: block;}
.tab-container{margin-top:4rem;}
.tab-view ul li{margin-bottom:2.5rem;}
.tab-view ul li:last-child{margin-bottom:0;}
.tab-view ul li a{display: flex; align-items: center;}
.tab-view ul li a:hover .title{text-decoration: underline;}
.tab-view ul li .date{font-size:1.7rem; width:155px; color:#444;}
.tab-view ul li .title{font-size:2rem; width: calc(100% - 155px); color:#444; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

/* 학사일정 */
.schadule{background:#e9f2ff; padding-top:11rem; position: relative;}
.schedule-container{display: flex; align-items: center; background:#c8d8f6; border-radius: 10px; box-shadow: -5.66px 5.66px 24px rgba(0, 0, 0, 0.05);}
.schedule-container .schedule-view{width:570px; min-height:417px; border:1px solid #e7e7e7; box-sizing: border-box; background:#fff; position: relative;}
.schedule-container .schedule-view:after{width:21px; height:319px; content:''; background:url('/common/images/user/ico/ico_ring.png')no-repeat center; position:absolute; top:50%; right:-11px; transform: translateY(-50%);}

.schedule-view .schedule-header{display: flex; align-items: center; justify-content: space-between; padding:2rem 5.5rem 1rem;}
.schedule-view .schedule-header > strong{font-size:2.8rem; color:#000; font-weight: 600;}
.schedule-view .schedule-header > div{display: flex; align-items: center;}
.schedule-view .schedule-header > div strong{font-size:8rem; color:#000; font-weight: 600;}
.schedule-view .schedule-header > div button:first-child{margin-right:3.5rem; background:transparent}
.schedule-view .schedule-header > div button:last-child{margin-left:3.5rem; background:transparent}
.schedule-view .schedule-header > button{font-size:1.6rem; padding:0.8rem 1.2rem; color:#000; border:1px solid #ccc; border-radius: 5px; background: transparent; letter-spacing: -1px;}

.schedule-view table{width:100%; border-spacing: 0; padding:0 3.5rem 3rem;}
.schedule-view table thead tr th{font-size:1.6rem; padding:13px 0; color:#000; font-weight:500;}
.schedule-view table thead tr th.sun{color:#f63a73;}
.schedule-view table thead tr th.sat{color:#1262ab;}
.schedule-view table tbody tr td{font-size:1.6rem; min-width:58px; padding:8px 0; text-align:center; color:#000; font-weight:500}
.schedule-view table tbody tr td .day-number{font-size:1.8rem; padding:3px 0; display: block; font-weight: 600;}
.schedule-view table tbody tr td .day-number.on{background:#dde7fa;}
.schedule-view table tbody tr td.sun{color:#f63a73;}
.schedule-view table tbody tr td.sat{color:#1262ab;}

.schedule-container .schedule-info{width:calc(100% - 570px); max-height:460px; background:#c8d8f6; padding:2.5rem 2rem 2.5rem 5rem; box-sizing: border-box;}
.schedule-container .schedule-info .schedule-info-inner{padding-right:9rem; max-height: 400px; overflow: auto;}
.schedule-container .schedule-info ul li{padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid #fff;}
.schedule-container .schedule-info ul li strong{font-size:3.6rem; color:#0e173f; font-weight: 600;}
.schedule-container .schedule-info ul li strong span{font-size:1.8rem;}
.schedule-container .schedule-info ul li p{font-size:2rem; margin-top:1rem; color:#000;}

@supports selector(::-webkit-scrollbar) {
    .schedule-info-inner::-webkit-scrollbar {
      background: #f1f4fa;
      width:10px;
      border:1px solid #c9d1e0;
      border-radius: 10px;
      overflow: hidden;
    }
    .schedule-info-inner::-webkit-scrollbar-thumb {
      background: #3246a0;
      border-radius: 10px;
      overflow: hidden;
    }
  }

/* 정보 */
.information{background:#e9f2ff; padding:15rem 0 13.5rem; position: relative;}
.information:after{width:100%; height:420px; background:#bccef9; content:''; position: absolute; bottom:0; left:0; z-index: 0;}
.information::before{width:287px; height:174px; content:''; background: url('/common/images/user/bg/bg_right_content.png')no-repeat center; background-size:100%; position: absolute; bottom:45px; right:0; z-index: 1;}
.information-inner ul{display: grid; grid-template-columns: repeat(3, 1fr); gap:5.5rem; position: relative; z-index: 1;}
.information-inner ul li a{display: block;}
.information-inner ul li a img{width: 100%; display: block;}
.information-inner ul li a div{margin-top:3.5rem;}
.information-inner ul li a div strong{font-size:3.2rem; display: flex; align-items: center; color:#222; font-family: 'SUITE Variable'; font-weight: 800;}
.information-inner ul li a div strong span{font-size:1.6rem; margin-left:1.5rem; color:#222; font-family: 'SUITE Variable'; font-weight: 400;}
.information-inner ul li a:hover div p{text-decoration: underline;}
.information-inner ul li a div p{font-size:1.9rem; margin-top:1rem; line-height:2.8rem; color:#444;}

/* fullbg */
.fullbg{width:100%; height:1916px; background:url('/common/images/user/bg/bg_bottom.png')no-repeat center; background-size:cover;}
.vision{padding-top:22rem;}
.vision .vision-inner{padding-left:calc(100% - 640px)}
.vision .vision-inner h2{font-size:6.4rem; color:#fff; font-weight: 700; font-family: 'SUITE Variable'; letter-spacing: -1px;}
.vision .vision-inner p{font-size:2.2rem; padding-right: 10rem; line-height:4rem; margin-top:7rem; color:#fff; letter-spacing: -0.5px;}

/* 국민대 공지 */
.notice2{padding-top:32rem;}
.box-left.white-left h2{color:#fff;}
.box-left.white-left a{color:#fff;}
.box-right.white-right .date{color:#fff;}
.box-right.white-right .title{color:#fff;}

/* 국민대 NEW&HOT */
.newhot{padding-top:12rem;}
.swiper.newhot-swiper .swiper-slide{width:360px;}
.swiper.newhot-swiper .swiper-slide a{display: block;}
.swiper.newhot-swiper .swiper-slide a .newhotimg img{width:100%; display: block;}
.swiper.newhot-swiper .swiper-slide a .newhottxt{margin-top:3rem;}
.swiper.newhot-swiper .swiper-slide a .newhottxt strong{font-size:2rem; line-height:2.8rem; color:#fff; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.swiper.newhot-swiper .swiper-slide a:hover .newhottxt strong{text-decoration: underline;} 
.swiper.newhot-swiper .swiper-slide a .newhottxt p{font-size:1.6rem; margin-top:1.5rem; color:#e9f2ff; font-weight: 300;}

@media all and (min-width:991px) and (max-width:1500px){

  .box-left{width:300px;}
  .box-right{width:calc(100% - 300px)}

  /* 학사일정 */
  .schedule-container .schedule-view{width:470px;}
  .schedule-container .schedule-info{width:calc(100% - 470px)}
  .schedule-container .schedule-info .schedule-info-inner{padding-right:2rem;}

}

@media all and (min-width:991px) and (max-width:1400px){

  /* fullbg */
  .vision .vision-inner{padding-left:calc(100% - 500px)}
  .vision .vision-inner h2{font-size:4.4rem;}
  .vision .vision-inner p{font-size:1.8rem; line-height:3.2rem; padding-right:0; margin-top:4rem;}

}

@media all and (min-width:991px) and (max-width:1200px){

  /* 학사일정 */
  .schedule-view .schedule-header > div strong{font-size:6rem;}
  .schedule-view .schedule-header > strong{font-size:2rem;}
  .schedule-view .schedule-header{padding:2rem 2.5rem 1rem}
  .schedule-view .schedule-header > button{font-size:1.4rem;}
  .schedule-view .schedule-header > div button:first-child{margin-right:2.5rem;}
  .schedule-view .schedule-header > div button:last-child{margin-left:2.5rem;}
  .schedule-view table{padding:0 1.5rem 3rem}

  .schedule-container .schedule-view{width:440px;}
  .schedule-container .schedule-info{padding:2.5rem; max-height:436px; width:calc(100% - 440px)}
  .schedule-container .schedule-info .schedule-info-inner{padding-right:1rem;}
  .schedule-container .schedule-info ul li{padding-bottom:1.5rem; margin-bottom:1.5rem}
  .schedule-container .schedule-info ul li strong{font-size:3rem;}
  .schedule-container .schedule-info ul li strong span{font-size:1.5rem;}
  .schedule-container .schedule-info ul li p{font-size:1.8rem; margin-top:0.5rem}

  @supports selector(::-webkit-scrollbar) {
    .schedule-info-inner::-webkit-scrollbar {
      width:5px;
      border-radius: 5px;
    }
    .schedule-info-inner::-webkit-scrollbar-thumb {
      border-radius: 5px;
    }
  }

  /* 정보 */
  .information-inner ul{gap:2rem;}
  .information-inner ul li a div{margin-top:2rem;}
  .information-inner ul li a div strong{font-size:2.8rem;}
  .information-inner ul li a div strong span{font-size:1.4rem; margin-left:1rem;}
  .information-inner ul li a div p{font-size:1.6rem; line-height:2.4rem;}

}

@media (max-width: 1160px) {

  /* 대학원 공지 */
  .box-container{flex-direction: column;}
  .box-left{width:100%; margin-bottom:5rem; display: flex; align-items: center; justify-content: space-between;}
  .box-left a{margin-top:0;}
  .box-right{width:100%;}


}


@media all and (max-width:991px){

  /* visual */
  .visual{height:100%;}
  .visual-swiper .visual-swiper-slide .pc-visual{display: none;}
  .visual-swiper .visual-swiper-slide .m-visual{display: block; width: 100%; height:991px; object-fit: cover;}
  .visual-tit{top:35%; left:20px;}
  .visual-tit strong{font-size:6.5rem;}
  .visual-tit p{font-size:2.4rem; line-height:3.2rem;}
  .player-bg{left:20px; bottom:40px;}
  .scroll-motion{bottom:40px;}

  /* 대학원 공지 */
  .tab-view ul li a{flex-direction: column;}
  .tab-view ul li .date{order:2; width:100%; margin-top:1rem;}
  .tab-view ul li .title{order:1; -webkit-line-clamp:2; width:100%;}

  /* 학사일정 */
  .schedule-container{flex-direction: column;}
  .schedule-container .schedule-view{width:100%; min-height:auto;}
  .schedule-container .schedule-info{width:100%;}
  .schedule-container .schedule-view:after{width:485px; height:33px; background:url('/common/images/user/ico/ico_ring_m.png')no-repeat center; bottom: -18px; top: auto; left: 50%; right: auto; transform: translateX(-50%);}  

  /* 정보 */
  .information:after{height:1700px}
  .information-inner ul{grid-template-columns: repeat(1, 1fr);}

  /* fullbg */
  .fullbg{width:100%; height:auto; padding-bottom:10rem; background:url('/common/images/user/bg/bg_bottom_m.png')no-repeat top center; background-size:cover;}
  .vision{padding-top:100vw;}
  .vision .vision-inner{padding-left:0;}
  .vision .vision-inner p{padding-right:0;  }

}


@media all and (max-width:767px){

  /* visual */
  .visual .visual-swiper-wrapper{transition-timing-function: cubic-bezier(0, 0, 0.21, 1);}
  .visual-swiper .visual-swiper-slide .m-visual{height:791px;}
  .visual-tit{top:27%;}
  .visual-tit strong{font-size:3.6rem;}
  .visual-tit p{font-size:1.8rem; line-height:2.4rem;}
  .player-bg{width:38px; height:38px; bottom:20px;}
  .player-bg svg{width:38px; height:38px;}
  .player-bg .play{width:11px; height:12px; top:50%;}
  .player-bg .play.paused{width:9px; height:13px; top:50%;}
  .scroll-motion{width:22px; bottom:20px;}

  /* 대학원 공지 */
  .notice{padding-top:7.5rem;}
  .notice::before{width:117px; height:101px; top:15px;}
  .box-left h2{font-size:3.2rem;}
  .box-left a img{width:24px;}
  .box-left{width:100%; margin-bottom:4rem;}
  .tab-type01{gap:0.5rem; margin-left:1.5rem;}
  .tab-type01 li a{font-size:1.8rem; padding:0.5rem 2.5rem;}
  .tab-container{margin-top:3.5rem;}
  .tab-view ul li{margin-top:1.5rem;}
  .tab-view ul li .date{font-size:1.3rem; margin-top:0.5rem;}
  .tab-view ul li .title{font-size:1.5rem; line-height:2.1rem;}

  /* 학사일정 */
  .schadule{padding-top:9.5rem;}
  .schedule-view .schedule-header{padding:3rem 2rem 1rem;}
  .schedule-container .schedule-view:after{width:243px; height:17px; background-size:100%; bottom:-10px;}
  .schedule-view .schedule-header > strong{font-size:1.8rem;}
  .schedule-view .schedule-header > div strong{font-size:4.8rem;}
  .schedule-view .schedule-header > div button:first-child{margin-right:2.3rem;}
  .schedule-view .schedule-header > div button:last-child{margin-left:2.3rem;}
  .schedule-view .schedule-header > button{font-size:1.2rem; padding:0.4rem 1.1rem;}
  .schedule-view table{padding:0 1rem 2rem;}
  .schedule-view table thead tr th{font-size:1.2rem;}
  .schedule-view table tbody tr td{min-width:auto}
  .schedule-view table tbody tr td .day-number{font-size:1.2rem;}
  .schedule-container .schedule-info{padding:5rem 1rem 2.5rem 2.5rem; max-height:320px;}
  .schedule-container .schedule-info .schedule-info-inner{padding-right:1.2rem; max-height:225px;}
  .schedule-container .schedule-info ul li{margin-bottom:1.5rem}
  .schedule-container .schedule-info ul li strong{font-size:2.1rem;}
  .schedule-container .schedule-info ul li strong span{font-size:1.4rem;}
  .schedule-container .schedule-info ul li p{font-size:1.5rem; margin-top:0.5rem;}
  @supports selector(::-webkit-scrollbar) {
    .schedule-info-inner::-webkit-scrollbar {
      width:7px;
    }
  }

  /* 정보 */
  .information{padding:6rem 0 10rem 0;}
  .information:after{height:1000px;}    
  .information-inner ul{gap:3.5rem;}
  .information-inner ul li a div{margin-top:2rem;}  
  .information-inner ul li a div strong{font-size:2.2rem;}
  .information-inner ul li a div strong span{font-size:1.3rem;}
  .information-inner ul li a div p{font-size:1.5rem; margin-top:0.5rem; line-height:2.1rem;}
  .information::before{width:130px; height:87px; bottom:25px;}

  /* fullbg */
  .vision{padding-top:115vw;}
  .vision .vision-inner h2{font-size:3.2rem;}
  .vision .vision-inner p{font-size:1.6rem; margin-top:3rem; line-height:2.4rem;}

  /* 국민대 공지 */
  .notice2{padding-top:12.5rem;}

  /* 국민대 NEW&HOT */
  .newhot{padding-top:7rem;}
  .swiper.newhot-swiper .swiper-slide a .newhottxt{margin-top:2.5rem;}
  .swiper.newhot-swiper .swiper-slide a .newhottxt strong{font-size:1.6rem; line-height:2.1rem;}
  .swiper.newhot-swiper .swiper-slide a .newhottxt p{font-size:1.3rem;}


}

@media all and (max-width:400px){

  .tab-type01{--col: 2; display: grid; display: grid; grid-template-columns: repeat(var(--col), 1fr); margin-left:0;}
  .tab-type01 li a{padding:0.5rem 0;}
  .tab-type01 li a span{text-align: center;}
}