/* 애니메이션 */
@keyframes mymove{
	from{filter: blur(5px); transform:scale(1.2)}
	to{filter: blur(0); transform:scale(1)}
}

.circle_tx {animation:circle_tx 60s both infinite linear;}
@keyframes circle_tx {
	0{transform:rotate(0);}
	50%{transform:rotate(360deg);}
	100% {transform:rotate(0);}
}

.up_down {animation: up_down 10s infinite linear;}
@keyframes up_down {	
	0{transform: translateY(0)}
	50%{transform: translateY(30px)}
	100%{transform: translateY(0)}
}

@keyframes scroll-animation{
  0%{
    left: 0;
  }
  100%{
    left: -550px; /* 텍스트 width와 동일 */
  }
}

@keyframes scroll-animation-m{
  0%{
    left: 0;
  }
  100%{
    left: -400px; /* 텍스트 width와 동일 */
  }
}

.focus-in-expand {
	-webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


.wrap{overflow: hidden; width: 100%; background: #faf7fa;}

/* SNS 버튼 */
.sns_wr{position: fixed; bottom: 50px; right: 50px; z-index: 777;}
.sns_wr a{display: block; width: 45px;}
.sns_wr a + a{margin-top: 10px;}
.sns_wr a img{width: 100%;}

@media (max-width: 740px){
	.sns_wr{bottom: 20px; right: 20px;}
	.sns_wr a{width: 35px;}
}

/* 그라데이션 배경 */
.grad_bg_faculty {position: relative; background: url("/res/version2025/images/faculty/beauty_grad_BG.jpg") no-repeat 50% 50%; background-size: cover; border-radius: 0 0 0 382px; overflow: hidden; z-index: 2;}

@media (max-width: 1820px){
	.grad_bg_faculty {border-radius: 0 0 0 270px;}
}

@media (max-width: 1600px){
	.grad_bg_faculty {border-radius: 0 0 0 200px;}
}

@media (max-width: 1200px){
	.grad_bg_faculty {border-radius: 0 0 0 160px;}
}

@media (max-width: 740px){
	.grad_bg_faculty {border-radius: 0 0 0 120px;}
}

@media (max-width: 500px){
	.grad_bg_faculty {border-radius: 0 0 0 80px;}
}

/* 비주얼 */
#mViusal{position: relative; padding: 50px 8% 0 0; transition:all 0.4s ease;}
#mViusal .txt_box{position: relative; width: 100%; height: 680px; padding: 55px 0 0 8%; border-radius: 0 696px 696px 0; overflow: hidden; transition:all 0.4s ease;}
#mViusal .txt_box::before{content:''; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; background: url("/res/version2025/images/faculty/beauty_mVisual.jpg?V=2025081301") no-repeat 100% 50%; background-size: cover; animation: mymove 3s;}
#mViusal .txt_box img.deco_img{margin-bottom: 60px; animation:circle_tx 60s both infinite linear; transition:all 0.4s ease;}
#mViusal .txt_box h2.tit{margin-bottom: 160px; font-family: 'Paperlogy-8ExtraBold.ttf'; font-size: 100px; letter-spacing: -0.4px; color: #fff; word-break: keep-all; transition:all 0.4s ease;}
#mViusal .txt_box p{position: relative; display: block; padding: 30px 30% 0 0; font-family: 'Paperlogy-3Light.ttf'; font-size: 18px; letter-spacing: -0.4px; line-height: 1.4; color: #fff; word-break: keep-all; transition:all 0.4s ease;}
#mViusal .txt_box p::before{content:''; position: absolute; top: 0; left: 0; display: block; width: 44px; height: 1px; background: #fff; transition:all 0.4s ease;}
#mViusal .txt_box p b{font-family: 'Paperlogy-7Bold.ttf';}
#mViusal .scroll_wr{position: absolute; bottom: 2px; right: 10%; transition:all 0.4s ease;}
#mViusal .scroll_wr .scroll_down{position: relative; text-align: center; width: 158px; line-height: 158px; transition:all 0.4s ease;}
#mViusal .scroll_wr .scroll_down::before{content:''; position: absolute; top: 0; left: 0; display: block; width: 158px; height: 158px; background: url("/res/version2025/images/faculty/circle_txt.png") no-repeat 50% 50%; background-size: contain; animation:circle_tx 60s both infinite linear; transition:all 0.4s ease;}
#mViusal .scroll_wr .scroll_down img{display: inline-block; transition:all 0.4s ease;}

@media (max-width: 1600px){
	#mViusal{padding: 50px 4% 0 0;}
	#mViusal .txt_box img.deco_img{width: 100px; margin-bottom: 30px;}
	#mViusal .txt_box{height: 580px; padding: 70px 0 0 4%;}
	#mViusal .txt_box h2.tit{margin-bottom: 70px; font-size: 76px;}
	#mViusal .scroll_wr{right: 4%;}
	#mViusal .scroll_wr .scroll_down{width: 130px; line-height: 130px;}
	#mViusal .scroll_wr .scroll_down::before{width: 130px; height: 130px;}
	#mViusal .scroll_wr .scroll_down img{width: 40px;}
}

@media (max-width: 1200px){
	#mViusal .txt_box{height: 450px;}
	#mViusal .txt_box img.deco_img{width: 70px;}
	#mViusal .txt_box h2.tit{margin-bottom: 30px; font-size: 60px;}
	#mViusal .scroll_wr .scroll_down{width: 100px; line-height: 100px;}
	#mViusal .scroll_wr .scroll_down::before{width: 100px; height: 100px;}
	#mViusal .scroll_wr .scroll_down img{width: 30px;}
}

@media (max-width: 1024px){
	#mViusal .txt_box{height: 378px;}
	#mViusal .txt_box img.deco_img{width: 50px; margin-bottom: 15px;}
	#mViusal .txt_box h2.tit{margin-bottom: 20px; font-size: 50px;}
	#mViusal .txt_box p{padding: 20px 15% 0 0; font-size: 17px;}
	#mViusal .txt_box p br{display: none;}
	#mViusal .scroll_wr .scroll_down{width: 90px; line-height: 90px;}
	#mViusal .scroll_wr .scroll_down::before{width: 90px; height: 90px;}
	#mViusal .scroll_wr .scroll_down img{width: 25px;}
}

@media (max-width: 700px){
	#mViusal .txt_box{padding: 70px 0 0 40px;}
	#mViusal .txt_box img.deco_img{width: 35px;}
	#mViusal .txt_box h2.tit{font-size: 40px;}
	#mViusal .txt_box p{font-size: 16px;}
	#mViusal .scroll_wr{right: 6%; bottom: 15px;}
	#mViusal .scroll_wr .scroll_down{width: 70px; line-height: 70px;}
	#mViusal .scroll_wr .scroll_down::before{width: 70px; height: 70px;}
	#mViusal .scroll_wr .scroll_down img{width: 22px;}

}

@media (max-width: 500px){
	#mViusal{padding: 40px 25px 0;}
	#mViusal .txt_box{height: 697px; padding: 40px 0 0; border-radius: 697px;}
	#mViusal .txt_box::before{background: url("/res/version2025/images/faculty/beauty_mVisual_m.jpg") no-repeat 50% 50%;}
	#mViusal .txt_box img.deco_img{display: block; width: 60px; height: 60px; margin: 0 auto;}
	#mViusal .txt_box h2.tit{margin-top: 38px; font-size: 40px; text-align: center;}
	#mViusal .txt_box p{margin-top: 270px; padding: 20px 40px 0; text-align: center;}
	#mViusal .txt_box p::before{left: 50%; transform: translateX(-50%);}
	#mViusal .scroll_wr{right: 50%; bottom:-34px; transform: translateX(50%);}
}

@media (max-width: 450px){
	#mViusal{padding: 30px 20px 0;}
	#mViusal .txt_box img.deco_img{width: 40px; height: 40px;}
	#mViusal .txt_box{height: 540px;}
	#mViusal .txt_box h2.tit{font-size: 32px;}
	#mViusal .txt_box p{margin-top: 140px;}
}

/* 슬로건 */
#slogan{width: 100%; padding: 210px 40px 245px; transition:all 0.4s ease;}
#slogan .text{font-family: 'Paperlogy-8ExtraBold.ttf'; font-size: 68px; letter-spacing: -.5px; line-height: 1.3; margin: 0; width: 100%; color: rgb(182, 182, 182, 0); -webkit-text-stroke: 1px #fff; text-align: center; background: linear-gradient(to right, #fff, #fff) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s; display: flex; align-items: flex-start; justify-content: center; position: relative; word-break: keep-all; transition:all 0.4s ease;}

@media (max-width: 1600px){
	#slogan{padding: 160px 40px 180px;}
	#slogan .text{font-size: 50px;}
}

@media (max-width: 1024px){
	#slogan{padding: 120px 40px 140px;}
	#slogan .text{font-size: 38px; -webkit-text-stroke: 0; color: rgb(255, 255, 255, .5);}
}

@media (max-width: 1024px){
	#slogan{padding: 120px 40px 140px;}
	#slogan .text{font-size: 36px;}
}

@media (max-width: 740px){
	#slogan{padding: 100px 20px 120px;}
	#slogan .text{font-size: 28px;}
}

@media (max-width: 500px){
	#slogan{padding: 100px 20px 120px;}
	#slogan .text{font-size: 22px;}
}

/* 교육목표 */
#edu{display: flex; width: 100%; max-width: 1600px; margin: 0 auto; padding-bottom: 200px; transition:all 0.4s ease;}
#edu h2.tit{width: 25%; font-family: 'Paperlogy-7Bold.ttf'; font-size: 50px; letter-spacing: -0.4px; color: #fff; word-break: keep-all; transition:all 0.4s ease;}
#edu .txt_box{width: 75%; padding-right: 18%; transition:all 0.4s ease;}
#edu .txt_box p{font-family: 'Paperlogy-4Regular.ttf'; font-size: 22px; line-height: 1.5; letter-spacing: -0.4px; color: #fff; word-break: keep-all; transition:all 0.4s ease;}
#edu .txt_box p + p{margin-top: 30px;}

@media (max-width: 1820px){
	#edu{padding: 0 6% 200px;}	
}

@media (max-width: 1600px){
	#edu{padding: 0 6% 160px;}
	#edu h2.tit{width: auto; padding-right: 7%; font-size: 42px;}
	#edu .txt_box{width: auto; padding-right: 0;}
	#edu .txt_box p{font-size: 20px;}
}

@media (max-width: 1024px){
	#edu{padding: 0 6% 120px;}
	#edu h2.tit{font-size: 36px;}
	#edu .txt_box p{font-size: 18px;}
}

@media (max-width: 740px){
	#edu h2.tit{font-size: 30px;}
	#edu .txt_box p{font-size: 17px;}
}

@media (max-width: 500px){
	#edu{display: block; padding: 0 40px 80px;}
	#edu h2.tit{font-size: 26px; padding-right: 0; text-align: center;}
	#edu .txt_box p{margin-top: 20px; font-size: 15px; text-align: center;}
}

@media (max-width: 450px){
	#edu{padding: 0 20px 80px;}
	#edu h2.tit{font-size: 24px;}
	#edu .txt_box p{font-size: 14px;}
}

/* 흐르는 텍스트 */
#flow_txt{width: 100%; padding-bottom: 40px; overflow: hidden; transition:all 0.4s ease;}
#flow_txt .track{display: flex; position: relative; width: 11000px; animation: scroll-animation 50s linear infinite;}
#flow_txt .track p{width: 550px; font-family: 'Paperlogy-8ExtraBold.ttf'; font-size: 22px; text-align: center; letter-spacing: 2.7px; text-transform: uppercase; color: #fff;}
#flow_txt .track p:nth-child(even){font-family: 'Paperlogy-9Black.ttf'; color: rgb(255, 255, 255, 0); -webkit-text-stroke: 1px #fff;}

@media (max-width: 1024px){
	#flow_txt{padding-bottom: 20px;}
	#flow_txt .track{width: 8000px; animation: scroll-animation-m 50s linear infinite;}
	#flow_txt .track p{width: 400px; font-size: 16px;}
	#flow_txt .track p:nth-child(even){color: rgba(255,255,255,.4); -webkit-text-stroke: 0;}
}

#major_wr{position: relative; width: 100%; padding: 160px 0 120px; z-index: 1; transition:all 0.4s ease;}
#major_wr::before{content:''; position: absolute; bottom: 0; left: -80px; display: block; width: 664px; height: 618px; background: url("/res/version2025/images/faculty/beauty_grad_circle01.png") no-repeat 50% 50%; background-size: contain; animation: up_down 15s infinite ease; z-index: -1;}
#major_wr::after{content:''; position: absolute; top: -150px; right: 0; display: block; width: 812px; height: 812px; background: url("/res/version2025/images/faculty/beauty_grad_circle02.png") no-repeat 50% 50%; background-size: contain; animation: up_down 12s infinite ease; z-index: -1;}
#major_wr .cursor{display: none;}
#major_wr ul.major_list{display: flex; flex-wrap: wrap; gap: 42px; width: 100%; max-width: 1600px; margin: 0 auto; transition:all 0.4s ease;}
#major_wr ul.major_list li{overflow: hidden; width: calc(33.3333% - 28px); height: 280px; border-radius: 30px;  transition:all 0.4s ease;}
#major_wr ul.major_list li a{position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 45px 35px 30px; z-index: 1; transition:all 0.4s ease;}
#major_wr ul.major_list li a::after{content:''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(255,255,255,.5); backdrop-filter : blur(5px); z-index: -1; transition:all 0.4s ease;}
#major_wr ul.major_list li a::before{content:''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url("/res/version2025/images/faculty/beauty_hover_BG.jpg") no-repeat 50% 50%; background-size: cover; z-index: -1; opacity: 0; transition:all 0.4s ease;}
#major_wr ul.major_list li a h3.tit{font-family: 'Paperlogy-7Bold.ttf'; font-size: 36px; letter-spacing: -0.4px; color: #555; transition:all 0.2s ease;}
#major_wr ul.major_list li a h3.tit br{display: none;}
#major_wr ul.major_list li a p.eng{padding-right: 74px; font-family: 'Paperlogy-7Bold.ttf'; text-transform: uppercase; font-size: 15px; letter-spacing: 2.4px; line-height: 1.7; color: #fff; opacity: 0; word-break: keep-all; transition:all 0.4s ease;}
#major_wr ul.major_list li a img{position: absolute; bottom: 35px; right: 35px; transition:all 0.4s ease;}

@media (min-width: 1024px){
	
	#major_wr ul.major_list li a{cursor: none;}

	/* 마우스커서 */
	#major_wr .cursor{position:fixed; transform:translate(-50%, -50%); transition-property:background, transform;pointer-events:none; display: block; width: 130px; height: 130px; z-index: 2;}
	#major_wr .cursor::before{opacity: 0; content:''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; background: url("/res/version2025/images/faculty/circle_txt_b.png") no-repeat 50% 50%; background-size: contain; animation:circle_tx 40s infinite linear; z-index: 0;}
	#major_wr .cursor img{opacity:0; display: block; width:53px; height:53px; margin: 38px auto; line-height: 130px; transition:all 0.4s ease}
	#major_wr .cursor.on::before{opacity: 1;}
	#major_wr .cursor.on img{opacity:1;}

	/* 호버 */
	#major_wr ul.major_list li:hover a{background: none;}
	#major_wr ul.major_list li:hover a::after{opacity: 0;}
	#major_wr ul.major_list li:hover a::before{opacity: 1;}
	#major_wr ul.major_list li:hover a h3.tit{color: #fff;}
	#major_wr ul.major_list li:hover a p.eng{opacity: .6;}
	#major_wr ul.major_list li:hover a img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
}

@media (max-width: 1820px){
	#major_wr{padding: 100px 4%;}
}

@media (max-width: 1600px){
	#major_wr{padding: 100px 4%;}
	#major_wr ul.major_list li{height: 240px; border-radius: 25px;}
	#major_wr ul.major_list li a{padding: 35px 30px 30px;}
	#major_wr ul.major_list li a h3.tit{font-size: 30px;}
	#major_wr ul.major_list li a p.eng{padding-right: 60px; font-size: 12px; line-height: 1.5; letter-spacing: 2px;}
	#major_wr ul.major_list li a img{bottom: 30px; right: 30px; width: 60px;}
}

@media (max-width: 1400px){
	#major_wr{padding: 70px 4%;}
	#major_wr ul.major_list{gap: 20px;}
	#major_wr ul.major_list li{width: calc(33.3333% - 14px); height: 180px; border-radius: 15px;}
	#major_wr ul.major_list li a{padding: 30px 25px 25px;}
	#major_wr ul.major_list li a h3.tit{font-size: 24px;}
	#major_wr ul.major_list li a p.eng{padding-right: 50px;}
	#major_wr ul.major_list li a img{bottom: 25px; right: 25px; width: 50px;}
}

@media (max-width: 1024px){
	#major_wr{padding: 60px 40px;}
	#major_wr ul.major_list{gap: 15px;}
	#major_wr ul.major_list li{width: calc(50% - 8px); height: 140px; border-radius: 15px;}
	#major_wr ul.major_list li a{padding: 25px 20px 20px;}
	#major_wr ul.major_list li a h3.tit{font-size: 20px;}
	#major_wr ul.major_list li a p.eng{padding-right: 40px; font-size: 10px; letter-spacing: 1px; }
	#major_wr ul.major_list li a img{bottom: 20px; right: 20px; width: 40px;}
}

@media (max-width: 740px){
	#major_wr{padding: 50px 20px;}
	#major_wr ul.major_list li{height: 120px; border-radius: 10px;}
	#major_wr ul.major_list li a{padding: 20px;}
	#major_wr ul.major_list li a h3.tit{font-size: 17px;}
	#major_wr ul.major_list li a h3.tit br{display: block;}
	#major_wr ul.major_list li a p.eng{padding-right: 35px;}
	#major_wr ul.major_list li a img{bottom: 15px; right: 15px; width: 35px;}
}

@media (max-width: 500px){
	#major_wr{padding: 40px 20px;}
	#major_wr ul.major_list{gap: 10px;}
	#major_wr ul.major_list li{width: calc(50% - 5px);}
	#major_wr ul.major_list li a h3.tit{font-size: 16px;}
	#major_wr ul.major_list li a p.eng{padding-right: 30px;}
	#major_wr ul.major_list li a img{width: 30px;}
}

/* 융합예술학부 */
#art .grad_bg_faculty {background: url("/res/version2025/images/faculty/art/art_grad_BG.jpg") no-repeat 50% 50%;}
#art #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/art/art_mVisual.jpg?V=20250813") no-repeat 100% 50%;}

#art #flow_txt .track p{font-size: 16px;}

#art #major_wr::before{background: url("/res/version2025/images/faculty/art/art_grad_circle01.png") no-repeat 50% 50%;}
#art #major_wr::after{background: url("/res/version2025/images/faculty/art/art_grad_circle02.png") no-repeat 50% 50%;}

#art #major_wr ul.major_list li a::before{background: url("/res/version2025/images/faculty/art/art_hover_BG.jpg") no-repeat 50% 50%;}

@media (max-width: 1024px){
	#art #flow_txt .track p{font-size: 11px;}
}

@media (max-width: 500px){
	#art #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/art/art_mVisual_m.jpg") no-repeat 50% 50%;}
}

/* 실용음악학부 */
#music .grad_bg_faculty {background: url("/res/version2025/images/faculty/music/music_grad_BG.jpg") no-repeat 50% 50%;}
#music #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/music/music_mVisual.jpg?V=20250813") no-repeat 100% 50%;}
#music #mViusal .txt_box h2.tit{margin-bottom: 80px;}

#music #flow_txt .track p{font-size: 22px;}

#music #major_wr::before{background: url("/res/version2025/images/faculty/music/music_grad_circle01.png") no-repeat 50% 50%;}
#music #major_wr::after{background: url("/res/version2025/images/faculty/music/music_grad_circle02.png") no-repeat 50% 50%;}

#music #major_wr ul.major_list li a::before{background: url("/res/version2025/images/faculty/music/music_hover_BG.jpg") no-repeat 50% 50%;}

@media (max-width: 1200px){
	#music #mViusal .txt_box h2.tit{margin-bottom: 46px;}
}

@media (max-width: 1024px){
	#music #flow_txt .track p{font-size: 14px;}
}

@media (max-width: 500px){
	#music #mViusal .txt_box{background: #000;}
	#music #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/music/music_mVisual_m.jpg") no-repeat 50% 50%; opacity: .8;}
}

@media (max-width: 450px){
	#mViusal .txt_box p{margin-top: 110px;}
}


/* 디저트베이커리학부 */
#dessert .grad_bg_faculty {background: url("/res/version2025/images/faculty/dessert/dessert_grad_BG.jpg") no-repeat 50% 50%;}
#dessert #mViusal .txt_box{background: #000;}
#dessert #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/dessert/dessert_mVisual.jpg?V=20250813") no-repeat 100% 50%; opacity: .7;}

#dessert #flow_txt .track p{font-size: 16px;}

#dessert #major_wr::before{background: url("/res/version2025/images/faculty/dessert/dessert_grad_circle01.png") no-repeat 50% 50%;}
#dessert #major_wr::after{background: url("/res/version2025/images/faculty/dessert/dessert_grad_circle02.png") no-repeat 50% 50%;}

#dessert #major_wr ul.major_list li a::before{background: url("/res/version2025/images/faculty/dessert/dessert_hover_BG.jpg") no-repeat 50% 50%;}

@media (max-width: 1024px){
	#dessert #flow_txt .track p{font-size: 11px;}
}

@media (max-width: 500px){
	#dessert #mViusal .txt_box::before{background: url("/res/version2025/images/faculty/dessert/dessert_mVisual_m.jpg") no-repeat 50% 50%;}
	#dessert #major_wr ul.major_list li{width: 100%;}
}

@media (max-width: 450px){
	#mViusal .txt_box h2.tit{font-size: 28px;}
}