@charset "utf-8";

/* set */
body {font-size:16px !important;margin:0;padding:0;font-family:'Pretendard', Dotum, "돋움", sans-serif;color:#222;font-weight:400;}
input, select, button{font-family:'Pretendard', Dotum, "돋움", sans-serif;}
body *{ box-sizing:border-box; margin: 0; padding: 0;}
a {color: #222;}
::selection {background:#073190; color:#fff; text-shadow:none;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}

.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}

:root{
   --point1: #073190;  
   --point2: #3a6ceb; 
   --line1: #e6e6e6;
   --line2: #000;
   --font-color1: #222;
   --font-color2: #666;

 }  
.wrap{margin: 0 15px;}
#container_main{background: none !important;}

 /* 메인비주얼 */
.m_visual{height: 500px;position: relative;margin-bottom: 40px;padding: 20% 0 40%;z-index: 0;overflow: hidden;}
.m_visual .img_area{position: absolute;top: 0;left: 0;right: 0;overflow: hidden;z-index: -1;}
.m_visual .img_area .img{height: 500px;text-align: center;overflow: hidden;}
.m_visual .img_area img{min-height: 500px;height: 100%;object-fit: cover;filter: blur(1px) brightness(0.8);}
.m_visual .img_area .control_btn{position: absolute;bottom: 30px;right: 15px;display: flex;gap: 0 20px;align-items: center;z-index: 2;}
.m_visual .img_area .control_btn button{display: block; width: 30px; height: 50px; background: url('/images/new_dept_2025/visual_btn.png') no-repeat; background-size: 25px; font-size: 0;}
.m_visual .img_area .control_btn button.prev{background-position: 50% 0;}
.m_visual .img_area .control_btn button.next{background-position: 50% -70px;}
.m_visual .img_area .control_btn span{font-size: 1.2em; color: #fff;}
.m_visual .img_area .control_btn span em{font-style: normal; font-weight: 600;}
.m_visual .img_area .control_btn span em::after{content: ''; display: inline-block; width: 1px; height: 20px; margin: 0 30px; background: #fff; vertical-align: middle;}
.m_visual .txt_area{display: flex; flex-direction: column; gap: 100px 0; justify-content: space-between; color: #fff;}
.m_visual .txt_area .tit::after{content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0; right: 0; margin-top: 50px; background: rgba(255,255,255,0.4);}
.m_visual .txt_area .tit h2{margin-bottom: 10px; font-size:2.2em; font-weight: 600;}
.m_visual .txt_area .tit p.coment1{margin-bottom: 10px;font-family: 'HakgyoansimDunggeunmisoTTF-B';}
.m_visual .txt_area .tit p.coment2{font-weight: 600;}
.m_visual .txt_area .info p{line-height: 1.5em;}

.m_visual .img_area img.slick-active{animation: bg 10s infinite;}

.m_visual .sns{display: flex;gap: 0 6px;margin-bottom: 20px;}
.m_visual .sns a{display: block;width: 60px;height: 60px;font-size: 0;background: url(/images/new_dept/m_sns.png);border-radius: 50%;border: 1px #fff solid;}
.m_visual .sns .insta{background-position: 50% -60px;}
.m_visual .sns .facebook{background-position: 51% 0px;}
.m_visual .sns .kakao{background-position: 50% -177px;}
.m_visual .sns .blog{background-position: 50% -118px;}
.m_visual .sns .youtube{background-position: 50% -250px;}
.m_visual .sns .x{background-position: 50% -288px;}
.m_visual .sns .youtube{background:url('/upload_data/board_data/CNT_ATCHDOWN/172836239921021.png')no-repeat center;}



/* 링크바로가기 */
.m_link{margin-bottom: 50px; overflow: hidden;}
.m_link ul{display: flex; gap: 0 2%; margin: 0 15px;}
.m_link ul li a{display: block; width:90px; height: 90px; border-radius: 50%; text-align: center; font-size: 0.95em;}
.m_link ul li a span{display: inline-block; transition: 0.5s;}
.m_link ul li a span::after{content: ''; display: block; width: 12px; height: 12px; margin: 6px auto 0; opacity: 0; }
.m_link ul li a:hover span,.m_link ul li a:focus span{transform: translateY(-10px);}
.m_link ul li a:hover span::after,.m_link ul li a:focus span::after{opacity: 1;}
.m_link .link_con1 ul{justify-content: flex-end;}
.m_link .link_con1 ul li a{border: 5px var(--point1) solid; background: #fff; padding-top: 32px;}
.m_link .link_con1 ul li a span::after{background: url('/images/new_dept_2025/link_btn1.png') no-repeat;}
.m_link .link_con2{margin-top: 30px;}
.m_link .link_con2 ul li a{background: var(--point1); color: #fff; padding-top: 36px;}
.m_link .link_con2 ul li a span::after{background: url('/images/new_dept_2025/link_btn2.png') no-repeat;}
.m_link .txt{position: relative; left: 0; bottom: 15px; width: 100%; height: 1px; background: var(--line1); z-index: -1;}
.m_link .txt span{display: none;}

/* 학과소식 */
.m_bbs{position: relative; margin-bottom:40px; z-index:0; overflow: hidden;}
.m_bbs:has(.bbs_con.on ul){height: 520px;}
.m_bbs::after{content: ''; display: block; position: absolute; top: 20px; left: 0; width: 100%; height: 100%; background: #f6f6f6; z-index: -1; }
.m_bbs h2{margin-bottom: 40px; font-size: 2em;}
.m_bbs .bbs{position: relative; display: flex; gap: 0 20px;}
.m_bbs .bbs h3{align-self: flex-start;} 
.m_bbs .bbs h3 a{font-size: 0.8em; color: var(--font-color2);}
.m_bbs .bbs h3 a::after{content: ''; display: block; width: 0; height: 4px; margin-top: 6px; background: var(--font-color2); transition: 0.3s;}
.m_bbs .bbs h3 a:hover::after,.m_bbs .bbs h3 a:focus::after{width: 100%;}
.m_bbs .bbs h3.on a{color: var(--point1);}
.m_bbs .bbs h3.on a::after{width: 100%; background: var(--point1);}
.m_bbs .bbs .bbs_con{display:none; position: absolute; top: 80px; left: 0; right: 0; width: 100%;}
.m_bbs .bbs .bbs_con.on{display:block;}
.m_bbs .bbs_con a strong{display: block; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1em;}
.m_bbs .bbs_con a span{display: block; overflow: hidden;word-wrap: break-word;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: 10px; color: var(--font-color2); line-height: 1.5em;}
.m_bbs .bbs_con a em{display: block; font-style: normal; font-size: 15px; color: var(--font-color2);}
.m_bbs .bbs_con .fr{margin-bottom: 40px;float: none;}
.m_bbs .bbs_con ul{display: flex; flex-direction: column; gap: 20px 0;}
.m_bbs .bbs_con ul li a strong{margin-bottom: 0;}
.m_bbs .bbs_con ul li a em{display: none;}
.m_bbs .bbs_con .more_btn{position: absolute; top: -82px; right: 0;}
.m_bbs .bbs_con .more_btn a{position: relative; display: block; width: 40px; height: 40px; background: #222; font-size: 0; z-index: 0;}
.m_bbs .bbs_con .more_btn a::after{content: ''; display: block; position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; background: url('/images/new_dept_2025/link_btn2.png') no-repeat center;}
.m_bbs .bbs_con .more_btn a::before{content: ''; position: absolute; display: block; width: 0; height: 40px; background: linear-gradient(to right, var(--point1), #222); transition: 0.3s; z-index: -1;}
.m_bbs .bbs_con .more_btn a:hover::before,.m_bbs .bbs_con .more_btn a:focus::before{width: 100%;}
.m_bbs .list_none{padding: 30px 0; border-top: 1px var(--line2) solid; border-bottom: 1px var(--line2) solid; text-align: center; font-weight: 500;}
.m_bbs:has(.list_none){height: 300px;}

/* 텍스트 루프 */
.txt_loop{display: flex; width: 100%; overflow: hidden;}
.txt_loop p{animation: text_loop 40s linear infinite backwards; font-size: 5em; font-weight: bold; white-space: nowrap; color: var(--point2); margin-bottom: -24px;}

.main_point{position: relative; background: var(--point2);overflow: hidden;}

/* 학과활동 */
.m_photo{position: relative; padding: 40px 0; margin: 20px 20px 40px; background: #fff; overflow: hidden;}
.m_photo:has(.bbs_con.on ul){height: 500px;}
.m_photo h2{margin-bottom: 40px; font-size: 2em; word-break: keep-all;}
.m_photo .bbs{display: flex; gap: 0 20px; flex-wrap: wrap;}
.m_photo .bbs h3 a{font-size: 0.8em; color: var(--font-color2);}
.m_photo .bbs h3 a::after{content: ''; display: block; width: 0; height: 4px; margin-top: 6px; background: var(--font-color2); transition: 0.3s;}
.m_photo .bbs h3 a:hover::after,.m_photo .bbs h3 a:focus::after{width: 100%;}
.m_photo .bbs h3.on a{color: var(--point1);}
.m_photo .bbs h3.on a::after{width: 100%; background: var(--point1);}
.m_photo .bbs_con{display: none; position: absolute; bottom: 40px; left: 0; width: 100%;}
.m_photo .bbs_con.on{display: block;}
.m_photo .bbs_con li{margin-right: 40px;}
.m_photo .bbs_con li a{display: block; position: relative;}
.m_photo .bbs_con li a img{width: auto; max-width: 260px; height: 220px;}
.m_photo .bbs_con li a div{display: flex !important; position: relative; flex-direction: column; justify-content: space-between; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; padding: 40px; background: rgba(5,36,107,0.9); opacity: 0; transition: 0.3s;}
.m_photo .bbs_con li a:hover div,
.m_photo .bbs_con li a:focus div{opacity: 1;}
.m_photo .bbs_con li a div strong{display: block; overflow: hidden;word-wrap: break-word;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; color: #fff; font-weight: 500;}
.m_photo .bbs_con li a div span{color: #fff; font-size: 0.8em;}
.m_photo .bbs_con li a div::after{content: '';display: block;position: absolute;right: -15px;bottom: -14px;width: 70px;height: 70px;transition:all 0.5s ease;animation:view_btn 6s infinite linear;background: url('/images/new_dept_2025/view_btn.png') no-repeat;background-position: 24px 0;} 
.m_photo .bbs_con li a div::before{content: ''; display: block; position: absolute; right: 50px; bottom: 50px; width: 11px; height: 11px; background: url('/images/new_dept_2025/link_btn2.png') no-repeat;}
.m_photo .bbs_con li a:hover div,.m_photo .bbs_con li a:focus div{display: block;}
.m_photo .bbs_con .more_btn{position: absolute; top: -84px; right: 15px;}
.m_photo .bbs_con .more_btn a{position: relative; display: block; width: 40px; height: 40px; border: 1px #222 solid; font-size: 0; z-index: 0;}
.m_photo .bbs_con .more_btn a::after{content: ''; display: block; position: absolute; top: 13px; right: 13px; width: 12px; height: 12px; background: url('/images/new_dept_2025/link_btn3.png') no-repeat center right;}
.m_photo .bbs_con .more_btn a::before{content: ''; position: absolute; display: block; width: 0; height: 38px; background: linear-gradient(to right, var(--point1), #222); transition: 0.3s; z-index: -1;}
.m_photo .bbs_con .more_btn a:hover::before,.m_photo .bbs_con .more_btn a:focus::before{width: 100%;}
.m_photo .bbs_con .more_btn a:hover::after,.m_photo .bbs_con .more_btn a:focus::after{background: url('/images/new_dept_2025/link_btn2.png') no-repeat center;}
.m_photo .control_btn{position: absolute; bottom: 15px; right: 15px;}
.m_photo .control_btn button{display: block; width: 60px; height: 60px; color: #fff; font-weight: 500;}
.m_photo .control_btn .prev{margin-bottom: 4px; background: #2e2e2e;}
.m_photo .control_btn .next{background: var(--point1);}
.m_photo .list_none{margin: 0 20px; padding: 30px 0; border-top: 1px var(--line2) solid; border-bottom: 1px var(--line2) solid; text-align: center;}
.m_photo:has(.list_none){height: 360px;}
.m_photo:has(.list_none) .control_btn{display:none;}
.m_photo:has(.bbs_con.on ul) .control_btn{display:block;}


/* 학과 홍보영상 */
.m_video{margin: 0 20px 40px;}
.m_video h2{margin-bottom: 20px; font-size: 2em; color: #fff;}
.m_video video{width: 100%; height: 100%;}

@media all and (min-width:768px) {
.wrap{margin: 0 5%;}

.m_visual{height: 100vh;margin-bottom: 120px;}
.m_visual .img_area .img{height:100vh;}
.m_visual .img_area img{height:100vh;}
.m_visual .img_area .control_btn{bottom: 10%;}
.m_visual .txt_area .tit h2{font-size: 5em;}
.m_visual .txt_area .tit p{font-size: 1.5em;}
.m_visual .txt_area .info p{font-size: 1.13em;}

.m_link{margin-bottom: 120px;}
.m_link ul{gap: 0 30px;}
.m_link ul li a{width: 200px; height: 200px; font-size: 1.2em;}
.m_link .link_con2{margin-top: 60px;}
.m_link .link_con1 ul li a{border: 12px var(--point1) solid; padding-top: 78px;}
.m_link .link_con2 ul li a{padding-top: 88px;}
.m_link .txt{bottom: 60px;}

.m_bbs{margin-bottom: 80px;}
.m_bbs:has(.bbs_con.on ul){height: 840px;}
.m_bbs::after{top: 35px;}
.m_bbs h2{font-size: 3.5em;}
.m_bbs .bbs{gap: 60px 40px;}
.m_bbs .bbs h3 a{font-size: 0.95em;}
.m_bbs .bbs h3.on a::after{margin-top: 20px;}
.m_bbs .bbs h3 a::after{margin-top: 20px;}
.m_bbs .bbs .bbs_con{top: 120px;}
.m_bbs .bbs_con a strong{margin-bottom: 30px; font-size: 1.25em;}
.m_bbs .bbs_con a span{margin-bottom: 20px;}
.m_bbs .bbs_con .fr{padding-bottom: 60px; margin-bottom: 60px; border-bottom: 1px var(--line2) solid;}
.m_bbs .bbs_con ul{gap: 40px 0;}
.m_bbs .bbs_con ul li a{display: flex; gap: 0 60px; justify-content: space-between; align-items: center;}
.m_bbs .bbs_con ul li a em{display: block;}
.m_bbs .bbs_con .more_btn{top: -120px;}
.m_bbs .bbs_con .more_btn a{width: 200px; height: 60px; padding: 20px 30px; font-size: 18px; color: #fff; }
.m_bbs .bbs_con .more_btn a::before{left: 0; top: 0; height: 60px;}
.m_bbs .bbs_con .more_btn a::after{top: 25px; right: 30px;}
.m_bbs:has(.list_none){height: 380px;}

.txt_loop p{font-size: 150px; margin-bottom: -40px;}


.main_point{position: relative; z-index: 0;}
.main_point::after{content: ''; display: block; position: absolute; bottom: 0; right: 25%; width: 1px; height: 70%; background: #fff; z-index: -1;}
.main_point::before{content: ''; display: block; position: absolute; bottom: -20%; right: -5%; width: 700px; height: 700px; border-radius: 50%; border: 1px #fff solid; z-index: -1;}

.m_photo{margin: 5% 5% 150px;}
.m_photo:has(.bbs_con.on ul){height: 670px;}
.m_photo h2{margin-bottom: 60px; font-size: 3.5em;}
.m_photo h2 br{display: none;}
.m_photo .bbs{gap: 0 40px;}
.m_photo .bbs h3 a{font-size: 0.95em;}
.m_photo .bbs h3.on a::after{margin-top: 20px;}
.m_photo .bbs h3 a::after{margin-top: 20px;}
.m_photo .bbs .bbs_con{bottom: 60px;}
.m_photo .bbs_con li a img{max-width: 450px; height: 300px;}
.m_photo .bbs_con li a div{padding: 60px;width: 100%;}
.m_photo .bbs_con li a div strong{font-size: 1.2em;}
.m_photo .bbs_con li a div span{font-size: 1em;}
.m_photo .bbs_con li a div::before{right: 80px; bottom: 80px;}
.m_photo .bbs_con li a div::after{right: 16px;bottom: 17px;}
.m_photo .bbs_con .more_btn{top: -143px; right: 5%;}
.m_photo .bbs_con .more_btn a{width: 200px; height: 60px; padding: 20px 30px; font-size: 18px; }
.m_photo .bbs_con .more_btn a::before{left: 0; top: 0; height: 58px;}
.m_photo .bbs_con .more_btn a::after{top: 25px; right: 30px;}
.m_photo .bbs_con .more_btn a:hover,.m_photo .bbs_con .more_btn a:focus{color: #fff;}
.m_photo .control_btn{bottom: 5%; right: 6%;}
.m_photo .control_btn button{width: 70px; height: 70px;}
.m_photo .list_none{margin: 0 5%;}
.m_photo:has(.list_none){height: 450px;}

.m_video{margin: 5% 5% 150px;}
.m_video h2{margin-bottom: 40px; font-size: 3.5em;}

}

@media all and (min-width:1023px) {
.m_visual{height: 900px; margin-bottom: 150px; padding: 100px 0;}
.m_visual .img_area .control_btn{bottom: 15%; right: 10%; gap: 0 30px;}
.m_visual .img_area .control_btn button{height: 60px; background-size: auto;}
.m_visual .img_area .control_btn button.next{background-position: 50% -80px;}
.m_visual .img_area .control_btn span{font-size: 1.5em;}
.m_visual .txt_area{gap: 200px 0;}
.m_visual .txt_area::after{content: ''; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 5%; background: rgba(255,255,255,0.4);}
.m_visual .txt_area .tit::after{margin-top: 130px;}
.m_visual .txt_area .tit h2{margin-bottom: 40px; font-size: 8em;}
.m_visual .txt_area .tit p.coment1{margin-bottom: 20px; font-size: 2.8em;}
.m_visual .txt_area .tit p.coment2{font-size: 2.8em;}
.m_visual .txt_area .info p{font-size: 1.5em; line-height: 2em;}

.m_link{margin-bottom: 150px;}
.m_link .txt span{display: inline-block; margin-top: -24px; background: #fff; font-size: 2.5em; font-weight: 700;}
.m_link .link_con1 .txt.on span{animation: txt-loop1 5s; transform: translateX(10vw);}
.m_link .link_con2 ul{justify-content: flex-end; padding-right: 320px;}
.m_link .link_con2 .txt.on span{animation: txt-loop2 5s; transform: translateX(72vw);}

.m_photo{margin: 60px 60px 150px;}
.m_photo .bbs_con li{margin-right: 60px;}


}

@media all and (min-width:1280px) {

}

@media all and (min-width:1440px) {
.wrap{width: 1400px; margin: 0 auto;}
.m_link ul{width: 1400px; margin: 0 auto;}

.m_bbs:has(.bbs_con.on ul){height: 660px;}
.m_bbs h2{margin-bottom: 150px;}
.m_bbs .bbs h3{z-index: 1;}
.m_bbs .bbs .bbs_con{top: 0;}
.m_bbs .bbs .bbs_con.on{display: flex; gap: 0 60px;}
.m_bbs .bbs_con .fr{min-width: 640px;padding-top: 120px;border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.m_bbs .bbs_con ul{flex-shrink: 0; gap: 50px 0; width: 50%; padding: 30px 0 30px 50px;  border-left: 1px var(--line2) solid;}
.m_bbs .bbs_con .more_btn{top: -216px;}
.m_bbs .bbs_con .list_none{width: 100%; margin-top: 120px;}
.m_bbs:has(.list_none){height: 600px;}


.m_photo{padding: 150px 0;}
.m_photo:has(.bbs_con.on ul){height: 740px;}
.m_photo .wrap{display: flex; justify-content: space-between; width: auto; margin: 0 5%; padding-right: 260px;}
.m_photo h2{margin-bottom: 0;}
.m_photo .bbs{align-self: center;}
.m_photo .bbs .bbs_con{bottom: 150px;}
.m_photo .bbs_con .more_btn{top: -137px;}
.m_photo .control_btn{bottom: 18%;}
.m_photo:has(.list_none){height: 520px;}

.m_video{position: relative; width: 1400px; margin: 0 auto 150px;}
.m_video h2{position: absolute;bottom: 210px;left: -220px;transform: rotate(270deg);margin-bottom: 0;}
.m_video .video{padding-left: 110px;}

}

@media all and (min-width:1600px) {
.m_photo .wrap{width: 1400px; margin: 0 auto;}
.m_photo .bbs_con .more_btn{right: calc((100% - 1400px) / 2);}
.m_photo .list_none{width: 1400px; margin: 0 auto;}

.m_video h2{left: -300px;}
.m_video .video{padding-left: 0;}

}

@keyframes bg {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes txt-loop1 {
  0% {
    transform: translateX(100vw)
  }
  100% {
    transform: translateX(10vw)
  }
}
@keyframes txt-loop2 {
  0% {
    transform: translateX(0%)
  }
  100% {
    transform: translateX(72vw)
  }
}

@keyframes text_loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes view_btn {
  0% {
    transform: translateY(-50%) translateX(-50%) rotate(0deg)
  }

  100% {
    transform: translateY(-50%) translateX(-50%) rotate(360deg)
  }
}