/*layout*/ #main{position:relative; color:#222; z-index:0; padding-right: 100px;} .container{width: 100%; max-width: 1400px; margin:0 auto; position: relative; height: 100%;} .link_banner{display: none;} .tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;} /*메인 영상*/ .mv_arrow {display: flex;justify-content: center;} #mVisual .video{height: calc(100vh - 90px); overflow: hidden;} #mVisual .video video{object-fit: cover;width: 100%;height:100%;} #mVisual .video.alone video {width:auto !important;position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;width: 100% !important;} #mVisual .video.alone .slide_visual img {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;height: 100vh;width: auto;} #mVisual .bullet {position: absolute;bottom: 17%;right: 130px;z-index: 2;padding-right: 1%;} #mVisual button.left, #mVisual button.right {position: absolute; transform: translate(-50%, -50%); top: 50%; z-index: 99;} #mVisual button.left {left: 50px;} #mVisual button.right {right: 15px;} .jp-gui {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;} .jp-gui .jp-video-play button {position: relative;z-index: 2;vertical-align: middle;border-radius: 100%;background: #ffffff63;padding: 2rem 1.5rem;} .jp-gui .jp-video-play button img {margin: 0 auto; max-width: 50%;} #mVisual .bullet ul {display: inline-block;} #mVisual .bullet ul li {display: inline-block; margin-left: 10px; vertical-align: top; z-index: 99;} #mVisual .bullet ul li:first-child {margin-left: 0;} #mVisual .bullet ul li a {display: block; width: 15px; height: 15px; border-radius: 100%; border:1px solid #fff; vertical-align: middle;} #mVisual .bullet ul li.slick-active a {background: #fff;} #mVisual .play {border: none;} #mVisual .bullet ul li.pause a, #mVisual .bullet ul li.play a {border: 0; width: auto; height: auto;} /* 메인슬라이드 */ .main_slide.slick-slider, .main_slide .slick-list, .main_slide .slick-track{height: calc(100vh - 90px); margin-bottom: 0;} .main_slide .slide{background: url(../images/layout/main/main_visual_03.jpg); background-size: cover; background-position: center center;} .main_slide .slide_txt { position: absolute; top: 45%; transform: translateY(-80%); color: #fff;} .main_slide .slide_txt span{font-size: 1.4rem; opacity: .6; display: block;} .main_slide .slide_txt strong{font-size: 3rem;} .main_slide .slick-dots{bottom: 40%; position: relative;text-align: left; max-width: 1400px; margin: 0 auto;} .main_slide .slick-dots li{width: 15px; height: 15px;} .main_slide .slick-dots li button{width: 15px; height: 15px; border-radius: 50px; background: rgba(255,255,255,.35);} .main_slide .slick-dots li button:before{content: '' !important;} #mVisual{position: relative; overflow: hidden;} #mVisual .slide{position: relative; width: 100%; height: inherit;} #mVisual ul.slick-dots li+li {margin-left: 15px;} #mVisual ul.slick-dots li.slick-active button {width: 15px; height: 15px; background: none; border:3px solid #f7f7f7; opacity: 1; transition: all .3s;} .r_quick {position:fixed; width: 100px; background-color: #424242; height: 100%; top:0; right: 0; z-index: 1;} /* .r_quick .sideBg{width: 100%; height: 0; background: #34353a; transition: all .3s;}*/ /* .r_quick .sideBg.active{margin-top:0;}*/ .r_quick .sideLogo{width: 100%;background: #e85426;color: #fff;text-align: center;padding: 10px 0; height: 90px;} .r_quick .sideLogo img{display: inline-block; padding-bottom: 4px;} .r_quick .sideLogo span{display: block;font-weight: 600; line-height: 1.2;} .r_quick li{text-align: center;border-bottom: 1px solid rgba(170,170,170,0.15); border-top: 1px solid rgba(23,23,23,0.18);} .r_quick li:last-child{border-bottom: 0;} .r_quick a {display: block;color: #aaa;padding: 20px 0;font-size: .85rem;} .r_quick a.active {color: white;} .r_quick a:hover{color: #fff;} .quick_tit{font-size: 3rem; color: #EFEFEF; margin-bottom: 30px; position: relative;} .quick_tit:before {content: ''; width: 75%; position: absolute; height: 1px; background: #EFEFEF; bottom: 20px; right: 0;} #mQuick{position: relative; display: block; padding: 50px 0; } #mQuick ul{display: flex; justify-content: space-between; text-align: center; background: #F8F8F8; padding: 55px 30px 50px;} #mQuick ul li{display: inline-block; width: calc(25% - 30px); margin-right:35px; transition: all .3s;} #mQuick ul li:last-child{margin-right: 0;} #mQuick ul li:hover{transform: translateY(-10px); } #mQuick .ico_box{position: relative; display: inline-block; width:55px; height:55px;} /*#mQuick .ico_box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}*/ #mQuick ul li a{display: block;} #mQuick ul li a i{display: block; padding: 10px; background: #fff; border-radius: 50px; width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;} #mQuick ul li p{font-size: 1.5rem; color: #333; font-weight: 600; padding-top:10px;} #mNoti{margin-top: 100px; background: #fff url(../images/layout/main/m_bg_01.jpg) no-repeat; background-size: cover;} #mNoti .mNoti_wrap{position: relative;display: flex;width: 100%;height: 100%;} /* 공지사항 */ .notice{position: relative;overflow: hidden;width: 50%;height: 390px;/* min-height: 407px; *//* height: 100%; */} .notice .more{width: 33px; height: 33px; vertical-align: middle; transition: all .3s; display: inline-block; background: url(../images/layout/common/more_btn.png) no-repeat; margin:0 25px 0 0;} .notice .more:hover{transform: rotate(90deg);} /* .notice .noti_list{display: flex; flex-wrap: wrap;} */ .notice .noti_list{ position: absolute; left: 0; width: 100%; /* position: relative; */ /* overflow: hidden; */ height: 330px; /* display: block; */ /* position: absolute; */ /* left: 0; */ /* width: 100%; */ /* overflow: hidden; */ } .notice .noti_list > ul{display: flex; flex-wrap: wrap; justify-content: space-between;} .notice .noti_list > ul > li{width: 100%; padding-right: 10px;} .notice .noti_list > ul > li:first-child{margin-top: 0;} .notice .noti_list > ul > li:after{content: ''; display: block; border-top:1px solid #efefef; width: 97%;} .notice .noti_list > ul > li:last-child:after{border-top:0;} .notice .noti_list > ul > li a{padding:18px 0; transition: all .3s;} .notice .noti_list > ul > li:first-child a{padding-top:0;} .notice .noti_list > ul > li:last-child a{padding-bottom:0;} .notice .noti_list .date{position: relative; display: inline-block; width: 85px; height: 85px; padding: 18px 0; background: #efefef; color: #555; text-align: center; border-radius: 10px; transition: all .3s;} .notice .noti_list .date:hover{background: #F1592A; color: #fff;} .notice .noti_list .date h3{font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: 3px;} .notice .noti_list .date span{font-size: .9rem; line-height: 1; font-weight: 500; opacity: .8; letter-spacing: -0.02rem;} .notice .noti_list .txt{width: calc(100% - 85px);padding: 8px 15px 0;float: right;} .notice .noti_list .txt h5{font-size: 1.35rem; color: #444; line-height: 22px; margin-bottom: 10px; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; letter-spacing: -0.5px;} .notice .noti_list .txt p{color: #999; line-height: 20px; font-size: 1rem; word-break: keep-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .notice .noti_list li a{display: block;} /* 학과소식 */ .news{position: relative;width: 50%;float: right;} .news .all_btn a{display: block;} /*.news .news_list{display: flex; justify-content: space-between; *height: 220px;*}*/ .news .news_list{width: 100%;} .news .news_list li{width: calc(50% - 4px); display: inline-block; height: 330px; background:#fff; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;} .news .news_list li a{display: inline-block; width: 100%; height: 100%;} .news .news_list li:hover .img_box img{transform: scale(1.1);} .news .news_list li .img_box img{width:100% !important;} .news .news_list .img_box{height: 180px;} .news .news_list .txt{width: 100%; padding: 18px 22px;} .news .news_list .txt span{font-size: .9rem; color: #F1592A; font-weight: 500;} .news .news_list .txt p{font-size: 1.1rem; height:50px; font-weight: 700; letter-spacing: -0.8px; word-break:keep-all; overflow: hidden; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;} .news .news_list .txt h4{font-weight: 500; color: #999; font-size: .9rem; padding-top:12px;} .news_list .slick-slide{margin-right:30px;} .news_list .slick-list{margin-right:-30px;} .news_list .slick-track{margin-left:0;} /* 학과갤러리 */ #mGallery{position:relative; background: #fff url(../images/layout/main/m_bg_02.jpg) no-repeat; background-size: cover; padding: 130px 0;} /*.gallery_list{display: flex; flex-wrap: wrap; justify-content: space-between;}*/ .gallery_list{width: 100%;} .gallery_list li{width: calc(34% - 25px); display: inline-block; background: #fff; height: 100%; overflow: hidden; border-radius: 12px 12px 0 0; cursor: pointer;} .gallery_list li:hover .img_box img{transform: scale(1.1);} .gallery_list li:hover .txt p{color: #F1592A;} .gallery_list li:hover .more p{color: #F1592A;} .gallery_list li:hover .more{background: #F1592A;} .gallery_list li .img_box img{width:100% !important;} .gallery_list .img_box{height: 255px;} .gallery_list .txt{width: 100%; height: 55px;} .gallery_list .txt p{display: -webkit-box; width: 100%; min-height: 20px; overflow: hidden; white-space: normal; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin: 25px 0 15px; font-size: 1.25rem; line-height: 20px; letter-spacing: -0.035rem; color: #444; font-weight: 600; transition: all .3s;} .gallery_list .txt span{display: -webkit-box; position: relative; width: 100%; max-height: 40px; padding-right:20px; overflow: hidden; white-space: normal; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 20px; letter-spacing: -0.035rem; color: #8B92A0;} .gallery_list .more{position: relative; display:inline-block; background: #8B92A0; width: 20px; height: 20px; border-radius: 50%; transition: all .3s; vertical-align: middle; margin-top:35px;} .gallery_list .more:before, .gallery_list .more:after{content: ''; position: absolute; top: 9px; left: 5px; display: block; width: 10px; background: #fff; height: 0.1rem;} .gallery_list .more:after{-webkit-transform: rotate(-90deg);} .gallery_list .more p{display:inline-block; color: #8B92A0; font-weight: 600; padding-left:25px;} .gallery_list .slick-slide:last-child{margin: 0;} .gallery_list .slick-slide{margin-right: 30px;} .gallery_list .slick-list{margin-right:-30px;} .gallery_list .slick-track{margin-left:0;} @media all and (max-width: 1500px){ /* #mVisual button.right{right:0;} */ #main{padding-right: 0;} } @media all and (max-width: 1200px){ #main{width: 100%; left:0; overflow: hidden;} .main_slide.slick-slider, .main_slide .slick-list, .main_slide .slick-track{height: 65vh;} #mVisual .video{height:65vh;} /*visual*/ .jp-gui .jp-video-play button {background:none;} .jp-jplayer {position:absolute; top:0; left:0; width:100% !important; height:100% !important;} #mVisual {position: relative;} #mVisual .video video{position:absolute; /*width:auto;*/ object-fit:cover;} #mVisual .video.alone {padding-bottom:56%;} #mVisual .video.alone video {width:100% !important; height:auto !important;} #mVisual .video.alone .slide_visual img {width:100%; height:auto; padding-right:0;} .video.slick-slide{position:relative; height:0; /*padding-bottom:12%;*/ padding-top:0;} #mVisual .bullet {top: -5px;bottom:auto;left:50%;transform: translate(-50%, -50%);/* margin-left:-50px; */padding-right: 0;right: 0;text-align: center;} /* #mVisual button.left {left:5%;}*/ /* #mVisual button.right {right: 5%;} */ .news .news_list .txt{padding:18px 13px;} .news .news_list .txt p{font-size: 1.1rem;} #mGallery .gallery_list .img_box{background-size: auto;} } @media all and (max-width: 991px){ #mVisual button.left img, #mVisual button.right img {max-width: 50%;} #mQuick ul{width: 100%; justify-content: center; } #mQuick ul li{padding:0; background: 0; box-shadow: none;} #mQuick .ico_box{width: auto; height: auto;} #mQuick .ico_box img{height:35px;} #mQuick ul li p{font-size: 17px;} .notice .more{margin:12px 0 0 0;} .news .news_list{margin-top:15px;} .news .news_list .txt{padding: 12px 12px;} #mNoti{height: 100%; margin-top:60px;} #mNoti .mNoti_wrap{flex-wrap: wrap;} #mNoti .notice, #mNoti .news{width: 100%;} #mNoti .news{margin-top: 80px;} #mGallery{padding: 80px 20px;} } @media all and (max-width: 767px){ /* #mVisual .bullet {bottom: 21%;top:auto;} */ .main_slide .slide_txt strong{font-size: 2.5rem;} .quick_tit{font-size: 2rem; margin-bottom: 15px; padding-top: 30px;} .quick_tit:before{display: none;} #mQuick{ padding:0} #mQuick ul{padding: 30px 10px;} #mQuick ul li{width: 20%; margin-right: 0;} #mQuick ul li a{padding: 0;} #mQuick ul li a i{background: transparent; padding: 0; width: auto; height: 50px;} #mQuick ul li a i img{width: 60%;} } @media screen and (max-width:670px) { /*visual*/ .main .more{width: 35px;height: 35px;} #mVisual button.left img, #mVisual button.right img {max-width:40%;} /*메인비주얼*/ #mVisual .bullet ul li {vertical-align: top;} #mVisual .bullet ul li.pause a {border-radius: 0; background:none;} /*.jp-gui .jp-video-play button {padding:1.2rem .2rem;}*/ } @media all and (max-width: 640px){ #mQuick ul li:last-child{margin-right:0;} /*#mQuick .ico_box{width: 45px; height: 45px; background: none; box-shadow: none;}*/ /* #mQuick .ico_box img{width: 45px;} */ #mQuick ul li p{font-size: 14px;} } /* @media all and (max-width: 480px){ .main_slide.slick-slider, .main_slide .slick-list, .main_slide .slick-track{height: 70vh;} } */ @media all and (max-width: 440px){ .notice{height:345px;} .notice .noti_list .date{width: 70px; height: 70px; padding:15px 0;} .notice .noti_list .date h3{font-size: 22px; margin-bottom: 0;} .notice .noti_list .txt{width: calc(100% - 76px);padding: 0px 10px;} .news_list .slick-prev.slick-arrow:before, .news_list .slick-prev.slick-arrow:after, .news_list .slick-next.slick-arrow::before{display: none;} .gallery_list .slick-prev.slick-arrow:before, .gallery_list .slick-prev.slick-arrow:after, .gallery_list .slick-next.slick-arrow::before{display: none;} } @media all and (max-width: 393px){ .main_slide .slide_txt strong{font-size: 2rem;} .main_slide .slide_txt span{font-size: 1.2rem;} .notice .noti_list .txt h5{font-size: 1.2rem;} } /* @media screen and (max-width: 375px) { #mVisual .bullet {bottom: 24%;top:auto;} } */ @media screen and (max-width: 340px) { /*메인비주얼*/ /* #mVisual .bullet {bottom:10px;} */ #mVisual .bullet ul li {margin-left:6px;} #mVisual .bullet ul li a {width:10px; height:10px; border:1px solid #fff;} #mVisual .bullet ul li a img {max-width: 10px; max-height:10px;} }