
/* ************ 메인페이지 스타일 ************ */
/*** 공통 ***/
.main {background:#000;}
.main .c-inner {margin:0 auto; max-width:1400px;}
.main .m-content {position:relative; top:0; z-index:2; width:100%; }
.main .visual-contents {padding-top:0; height:100%; box-sizing:border-box; position:absolute;
z-index:2; top:0; width:100%;}
.main .visual .video-wrap {z-index: 1; position:relative; bottom:0; width:100%; max-width:1920px; margin: 0 auto; aspect-ratio:1920/1080;}
.main .visual .video-wrap video {transform: scale(1); /*transform-origin:left bottom;*/ opacity:.7; width:100%; height:100%; object-fit:contain; /*aspect-ratio:1920/1080;*/}
.main .visual .video-wrap video.contain {object-fit:contain; object-position:center;}
.main .visual .video-wrap video.fill {object-fit:fill;}

.main .visual-text {color:#fff; text-align:right;}
.main .visual-text h2 span {display:block; line-height:1;}
.main .visual-text h2 .small_txt {font-size:40px;}
.main .visual-text h2 .big_txt {font-size:70px; margin-top:10px; }
.main .visual-text p {font-size:18px; margin-top:20px; line-height:1.4; max-width:700px; display:inline-block;}
.main .visual-btnwrap {text-align:right; margin-top:50px;}
.main .visual-btnwrap a {display:inline-flex; gap:10px; align-items:center; padding:20px 30px; background:#fff; line-height:1; color:#000; font-size:17px; font-weight:500; border-radius:3rem; transition:all 0.3s;}
.main .visual-btnwrap a:hover {background:var(--base1); color:#fff; }
.main .visual-btnwrap a .arrow {position:relative; width:36px; height:9px; border-bottom:2px solid #000;}
.main .visual-btnwrap a .arrow:before {content:""; display:block; height:12px; width:2px; background:#000; position:absolute; top:0; right:4px; transform:rotate(-45deg); }
.main .visual-btnwrap a:hover .arrow:before {background:#fff;}
.main .visual-btnwrap a:hover .arrow {border-bottom:2px solid #fff;}
.main .visual-btnwrap a+a {margin-left:10px;}
.main .news-wrap {background:#fff;}
.main .visual-contents .c-inner {position:relative; height:100%; max-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:8vh; box-sizing:border-box;}
.main .visual-scroll {display:inline-flex; align-items:center; gap:30px; position:absolute; color:#fff; transform:rotate(90deg) translate(-55%, 465%); text-transform:uppercase; font-size:12px; letter-spacing:3.6px; font-weight:700;}
.main .visual-scroll .arrow:before {content:""; display:block; height:12px; width:2px; position:absolute; right:4px; bottom:-9px; background:#fff; transform:rotate(45deg);}
.main .visual-scroll .arrow {position:relative; width:50px; border-top:2px solid #fff; animation: mouse-wheel 2s ease infinite;}

.main h3 {font-size:32px; color:#000;}

/* 대학원 소식 */ 
.main .news-wrap {padding:100px 0;}
.main .news-tit {display:flex; justify-content:space-between; align-items:center;}
.main .news-tit a {display:inline-flex; gap:10px; align-items:flex-end; color:#999; text-transform:uppercase; transition:all 0.3s;}
.main .news-tit a:hover {color:var(--base2);}
.main .news-tit a .arrow {position:relative; border-bottom:1px solid #999; width:28px; height:1px; margin-bottom:4px;}
.main .news-tit a .arrow:before {content:""; display:block; height:10px; width:1px;  background:#999; transform:rotate(-45deg); position:absolute; top:-7px; right:2px;}
.main .news-tit a:hover .arrow {border-bottom:1px solid var(--base2);}
.main .news-tit a:hover .arrow:before {background:var(--base2);}
.main .news-list {display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:30px;}
.main .news-list a {display:block; border-top:2px solid #000; padding-top:30px; position:relative;}
.main .news-list a:before {content:""; display:block; width:0; height:2px; background:var(--base2); position:absolute; top:-2px; left:0; transition:all 0.5s;}
.main .news-list a:hover:before {width:100%;}
.main .news-list a:hover dt {color:var(--base2);}
.main .news-list a:hover dd {color:var(--base2);}
.main .news-list .list-tit {font-size:24px; letter-spacing:-0.72px; line-height:1.2; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#000;}
.main .news-list dt {transition:all 0.3s;}
.main .news-list dd {color:#333;  transition:all 0.3s;}
.main .news-list .list-cont { white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:20px; line-height:1.6; font-weight:300;}
.main .news-list .date {margin-top:20px; color:#666;}

/* 교과소개 & 학사안내 */
.main .bachelor-wrap {position:relative; background:#000;}
.main .bachelor-wrap h3 {color:#fff;}
.main .bachelor-wrap:before {content:""; position:absolute; left:0; top:0; display:block; height:100%; width:50%; background:url(/images/main/bachelor-wrap_bg1.jpg) no-repeat center / cover; opacity:0.7;}
.main .bachelor-wrap:after {content:""; position:absolute; right:0; top:0; display:block; height:100%; width:50%; background:url(/images/main/bachelor-wrap_bg2.jpg) no-repeat center / cover; opacity:0.7;}
.main .bachelor-wrap .c-inner {display:flex; position:relative; z-index:9;}
.main .bachelor-wrap .c-inner>div {width:50%; padding:150px 0; box-sizing:border-box;}
.main .bachelor-wrap .bachelor-tit p {color:#fff; opacity:0.7; line-height:1.4; margin-top:10px;}
.main .bachelor-wrap .c-inner .part-subject {padding-right:100px;}
.main .bachelor-wrap .c-inner .part-guide { padding-left:100px;}
.main .bachelor-wrap .bach-btn-wrap {display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255, 255, 255, 0.20); margin-top:50px;}
.main .bachelor-wrap .bach-btn-wrap a {display:flex; align-items:center; justify-content: center; background:rgba(0, 0, 0, 0.50);backdrop-filter:blur(5px); line-height:1; color:#fff; font-weight:600; font-size:17px; padding:30px 10px; text-align:center; transition:all 0.3s;}
.main .bachelor-wrap .bach-btn-wrap a:hover {background:rgba(255,255,255,0.50); color:var(--base3);}
.main .bachelor-wrap .bach-btn-wrap a+a {border-left:1px solid rgba(255, 255, 255, 0.20);}
/* HCI학과 연구실 */
.main .labintro-wrap {background:#fff; padding:100px 0;}
.main .labintro-wrap .c-inner {max-width:1520px; position:relative;}
.main .labintro-tit {text-align:center;}
.main .labintro-tit h3+p {margin-top:10px; color:#666;}
.main .labintro {max-width:1420px; margin:50px auto 0;}
.main .labintro .swiper-wrapper {position:relative;}

.main .labintro_list-img img {width:100%; height:100%; aspect-ratio:446/270; object-fit:cover;}
.main .labintro_list-txt {margin-top:30px;}
.main .labintro_list-txt dt {font-size:18px; font-weight:700; color:#000; transition:all 0.3s;}
.main .labintro_list-txt dd {white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; margin-top:10px; color:#666; transition:all 0.3s;}
.main .swiper-slide:hover .labintro_list-txt dt {color:var(--base2);}
.main .swiper-slide:hover .labintro_list-txt dd {color:var(--base2);}
.main .labintro_list-txt .prof-name {color:#666; background:#f0f0f0; padding:10px 20px; border-radius:2rem; display:inline-block; margin-top:10px;}
.main .labintro-wrap .btnWrap .banner1_prev {background:url(/images/main/banner1_prev.svg) no-repeat center / contain; height:53px; width:26.5px; transition:all 0.3s;}
.main .labintro-wrap .btnWrap .banner1_prev:hover, .main .labintro-wrap .btnWrap .banner1_next:hover {filter:brightness(0);}
.main .labintro-wrap .btnWrap .banner1_next {background:url(/images/main/banner1_next.svg) no-repeat center / contain; height:53px; width:26.5px; transition:all 0.3s;}
.main .labintro-wrap .btnWrap .banner1_prev, .main .labintro-wrap .btnWrap .banner1_next {top:42%;}
.main .labintro-wrap .c-inner {padding:0 50px;}


@keyframes mouse-scroll {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0.5;}
}
@keyframes mouse-wheel {
  0% {opacity: 1; transform: translateX(0);}
  100% {opacity: 1; transform: translateX(15px);}
}

/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
.main .c-inner {padding:0 30px;}
/*.main .visual .video-wrap {width:100%; height:80vh; top:70px;}*/
.main .visual-contents {}
.main .visual-contents .c-inner {padding-bottom:8vh; height:100%;}
.main .visual-text h2 .small_txt {font-size:32px;}
.main .visual-text h2 .big_txt {font-size:55px;}
.main .visual-btnwrap a {font-size:16px;}
.main .visual .video-wrap {left:0;}
.main .news-wrap {padding:80px 0;}

.main h3 {font-size:28px;}
.main .news-list {gap:30px;}
.main .news-list .list-tit {font-size:20px;}
.main .news-list a {padding-top:25px;}
.main .news-list .list-cont {margin-top:15px;}
.main .news-list .date {margin-top:15px;}

.main .bachelor-wrap .c-inner>div {padding:100px 0;}
.main .bachelor-wrap .c-inner .part-subject {padding-right:40px;}
.main .bachelor-wrap .c-inner .part-guide {padding-left:40px;}
.main .bachelor-wrap .bach-btn-wrap a {padding:25px 10px; font-size:16px;}
.main .bachelor-wrap .bach-btn-wrap {margin-top:40px;}

.main .labintro-wrap {padding:80px 0;}
.main .labintro {margin:40px auto 0;}
.main .labintro_list-txt {margin-top:20px;}

}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
.main .visual-text h2 .big_txt {font-size:36px;}
.main .visual-text h2 .small_txt {font-size:20px;}
.main .visual-text p {font-size:16px; display:none;}
.main .visual-btnwrap {margin-top:40px;}
.main .visual-btnwrap a {font-size:16px; padding:15px 20px;}

.main h3 {font-size:24px;}
.main .news-wrap {padding:60px 0;}
.main .news-list {grid-template-columns:1fr 1fr; row-gap:40px;}
.main .news-list a {padding-top:20px;}
.main .news-tit a {font-size:14px;}

.main .bachelor-wrap .c-inner {display:block; padding:0;}
.main .bachelor-wrap .c-inner>div {position:relative; padding:0; width:100%;}
.main .bachelor-wrap .c-inner .part-subject { padding:60px 40px 30px; background:url(/images/main/bachelor-wrap_bg1.jpg) no-repeat center / cover; }
.main .bachelor-wrap .c-inner .part-subject:before {content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0;}
.main .bachelor-tit {position:relative; z-index:9;}
.main .bachelor-wrap .c-inner .part-guide {padding:30px 40px 60px; background:url(/images/main/bachelor-wrap_bg2.jpg) no-repeat center / cover;}
.main .bachelor-wrap .c-inner .part-guide:before {content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0;}
.main .bachelor-wrap:before, .main .bachelor-wrap:after {display:none;}

.main .labintro-wrap {padding:60px 0;}
}


@media screen and (max-width:767px) { 
.main .c-inner {padding:0 20px;}
.main .visual-contents .c-inner {padding-bottom:7vh; display:none;}
.main .visual .video-wrap {}
.main .visual .video-wrap video {object-position:top;}
.main .visual-btnwrap {margin-top:30px;}
.main .visual-text {display:none;}
.main .visual-text h2 .big_txt {font-size:30px;}
.main .visual-text h2 .small_txt {font-size:20px;}
.main .visual-text p {font-size:15px;}
.main .visual-btnwrap a {font-size:14px;}
.main .news-list {grid-template-columns:1fr;}


.main h3 {font-size:22px;}
.main .bachelor-wrap .c-inner .part-subject {padding:50px 20px 30px}
.main .bachelor-wrap .c-inner .part-guide {padding:30px 20px 50px; }
.main .bachelor-wrap .bach-btn-wrap {margin-top:20px;}
.main .bachelor-wrap .bach-btn-wrap a {font-size:15px; padding:20px 5px;}

.main .labintro {margin:30px auto 0;}
}

@media screen and (max-width:500px) {
.main .visual-btnwrap {display:flex; justify-content:flex-end;}
.main .visual-btnwrap a {font-size:15px; padding:15px 20px;}
.main .visual-contents .c-inner {padding-bottom:5vh;}
.main .visual-text h2 .big_txt {font-size:24px;}
.main .visual-text h2 .small_txt {font-size:17px;}
.main .news-wrap {padding:50px 0;}
.main .news-list .list-tit {font-size:18px;}
.main .labintro-wrap .c-inner {padding:0 30px;}
.main .labintro-wrap .btnWrap .banner1_next {width:15px; height:30px; right:5px;}
.main .labintro-wrap .btnWrap .banner1_prev {width:15px; height:30px; left:5px;}

.main .labintro_list-txt dt {font-size:17px;}
.main .labintro-wrap {padding:50px 0;}
}
