.sub-visual-inner {background: url(/_res/gradcau/graduate/img/content/img-sub.png)no-repeat;background-size: cover;box-sizing: border-box;overflow: hidden;height: 380px;display: flex;align-items: center;justify-content: center;position: relative;}
.sub-visual-inner > p {position: absolute;font-family: "Playfair Display SC", serif;font-weight: 700;font-size: 200px;line-height: 160px;letter-spacing: 0;color: #0053CF;right: 0;bottom: -50px;}

.sub-visual-inner .sub-txt-box{z-index: 10;width: 100%;height: 100%;}
.sub-visual-inner .sub-txt-box .sub-txt-top-box {height: 100%;}

.sub-visual-inner .sub-txt-bottom-box{position:absolute;top:65%;left: 47%;opacity:0;transition:transform .8s, opacity .8s;transition-delay:1s;width: 100%;text-align: left;}
.sub-visual-inner .sub-txt-bottom-box > p {font-weight: 500;font-size: 28px;line-height: 140%;color: #fff;max-width: clamp(49.6rem, 33.646vw, 64.6rem);}
.sub-visual-inner .sub-txt-box.active .sub-txt-bottom-box{opacity:1;transform:none;}

.sub-visual-inner .mask-wrapper{position:absolute;width:100%;height:100%;overflow:hidden;}
.sub-visual-inner .mask-left{clip-path:polygon(0 0, 70% 0, 30% 100%, 0 100%);}
.sub-visual-inner .mask-right{clip-path:polygon(70% 0, 100% 0, 100% 100%, 30% 100%);}
.sub-visual-inner .text{font-size: 56px;line-height:1;font-weight: 700;color: #fff;white-space:nowrap;transition:transform 1.2s cubic-bezier(0.7, 0, 0.2, 1);display: flex;align-items: center;justify-content: center;height: 100%;position: relative;width: fit-content;margin: 0 auto;}
.sub-visual-inner .text:before {content: "";position: absolute;left: -35px;top: 123px;width: 56px;height: 56px;border-width: 4px 0px 0px 4px;border-style: solid;border-color: #ED1C24;}
.sub-visual-inner .text-left{left:50%;padding:0 0 20px;transform:translate(-10%, -50%);color: #fff;}
.sub-visual-inner .text-right{right:50%;padding:20px 0 0;color:#DEEBFF;transform:translate(10%, -50%);}
.sub-visual-inner .sub-txt-box.active .text-left{transform:translate(-95%, -50%);}
.sub-visual-inner .sub-txt-box.active .text-right{transform:translate(95%, -50%);}
.sub-visual-inner .diagonal-line{position:absolute;top:50%;left:50%;width: 130px;height:2px;border-radius:50%;background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 35%, #FFFFFF 65%, rgba(255, 255, 255, 0.2) 100%);z-index:10;transform:translate(-50%, -50%) rotate(137deg);opacity: 0;transition: opacity 0.3s ease;}
.sub-visual-inner .diagonal-line.ready {opacity: 1;}

@media (max-width: 1024px) {
	.sub-visual-inner .sub-txt-box {position:absolute;top: 0;left: 50%;transform: translateX(-50%);z-index:1;margin: 0 auto;}
	.sub-visual-inner .text {font-weight: 700;font-size: 46px;line-height: 100%;text-align:center;}

	.sub-visual-inner > p {font-size: 130px;bottom: -55px;}
}

@media (max-width: 768px){
	.sub-visual-inner .sub-txt-bottom-box > p {font-size: 16px;}
	.sub-visual-inner .swiper-vi-control01 {bottom: 16px;padding: 8px;}

	.sub-visual-inner {height: 280px;}
	.sub-visual-inner > p {font-size: 90px;bottom: -65px;}
	.sub-visual-inner .text:before {top: 90px;width: 40px;height: 40px;left: -30px;}

	.sub-visual-inner .sub-txt-box.active .text-left{transform:translate(-95%, -50%);}
	.sub-visual-inner .sub-txt-box.active .text-right{transform:translate(90%, -50%);}
	.en .sub-visual-inner .text {white-space: wrap;}
}
@media (max-width: 480px) {
	.sub-visual-inner .sub-txt-bottom-box > p {text-align: left;}
}