@charset "utf-8";
/****************************************/
/* Name: International College
/* PART: CONTENT STYLE 
/* Version: 1.0 / day: 2023-06-29
/* Author:  
/****************************************/

/*
=========================================================================
메인 콘텐츠 css
=========================================================================
*/
@keyframes fade-up {
	0% {opacity: 0; transform: translateY(200px);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes rotate {
	100%{transform: rotate(360deg);}
}
@keyframes text-fill{
	100%{background-size: 100% 100%;}
}
@keyframes scroll{
	0%{transform: translateY(-20px); opacity: 1;}
	100%{transform: translateY(0); opacity: 0;}
}

.fadein-title{margin-bottom: 8px; text-align: center;}
*[data-aos="fill-text"] span{background: linear-gradient(#c7c7c7, #c7c7c7) left center / 0% 100% no-repeat; background-clip: text; -webkit-background-clip: text;  color: transparent;}
*[data-aos="fill-text"] span::before{content: '| '}
*[data-aos="fill-text"].aos-animate span {animation: text-fill 2s ease forwards;}
#wrapper.bg-white *[data-aos="fill-text"] span{background: linear-gradient(#767676, #767676) left center / 0% 100% no-repeat; background-clip: text; -webkit-background-clip: text;}


.sec-title{font-size: 4rem; font-weight: 600; text-align: center; margin-bottom: 40px}

.sec{margin: 100px 0;}
.sec-inner{max-width: 1400px; width: calc(100% - 40px); margin: auto;}

.scroll{margin-top: 20px; text-align: center; font-size: 1.75rem; font-weight: 300; animation: scroll 1.6s ease infinite;}

.cont-box{margin: 50px 0}

.ellipsis{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}

#main{position: relative; z-index: 1;}

.sec-main{margin-top: 120px}
.sec-main .title{position: relative; z-index: 1; font-size: 7.5rem; font-weight: 600; text-align: center; line-height: 1.4;}
.sec-main .title span{display: inline-block; opacity: 0; animation: fade-up 1s ease forwards;}
.sec-main .title span:nth-of-type(1){animation-delay: 1s;}
.sec-main .title span:nth-of-type(2){animation-delay: 1.2s;}
.sec-main .title span:nth-of-type(3){animation-delay: 1.4s;}
.sec-main .img-box{position: relative; max-width: calc(1400px + ((100% - 1400px) / 2)); width: calc(100% - 20px); margin-top: -32px; margin-left: auto;}
.sec-main .img-box .inner{width: 100%; height: 100%; border-top-left-radius: 140px; overflow: hidden;}
.sec-main .img-box::before{position: absolute; top: -20px; left: 0; z-index: -1; content: ''; display: block; width: 100%; height: 100%; border-top-left-radius: 140px; background: linear-gradient(to right, #2c0b1e, #5c1234 50%, #a41034);}
.sec-main .img-box::after{position: absolute; bottom: -74px; right: 200px; content: ''; display: block; width: 148px; aspect-ratio: 1 / 1; background: url(/_res/tongmyong/bic/img/main-sec-rotate.png) 100% / cover; animation: rotate 10s linear infinite;}


.sec-about{position: relative;}
.sec-about .cont{margin-bottom: 20px; font-size: 2rem; text-align: center; color: var(--text-g);}


.sec-program .prog-list{display: flex; gap: 12px;}
.sec-program .prog-list .item{width: calc((100% / 7) - (62px / 7)); height: 70vh; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 20px; overflow: hidden;}
.sec-program .prog-list .item:nth-of-type(1){background-image: url(/_res/tongmyong/bic/img/bic-prog-img01.png)}
.sec-program .prog-list .item:nth-of-type(2){background-image: url(/_res/tongmyong/bic/img/bic-prog-img02.png)}
.sec-program .prog-list .item:nth-of-type(3){background-image: url(/_res/tongmyong/bic/img/bic-prog-img03.png)}
.sec-program .prog-list .item:nth-of-type(4){background-image: url(/_res/tongmyong/bic/img/bic-prog-img04.png)}
.sec-program .prog-list .item:nth-of-type(5){background-image: url(/_res/tongmyong/bic/img/bic-prog-img05.png)}
.sec-program .prog-list .item:nth-of-type(6){background-image: url(/_res/tongmyong/bic/img/bic-prog-img06.png)}
.sec-program .prog-list .item:nth-of-type(7){background-image: url(/_res/tongmyong/bic/img/bic-prog-img07.png)}
.sec-program .prog-list .item-btn{position: relative; width: 100%; height: 100%;}
.sec-program .prog-list .quick-title{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 300px; font-size: 1.75rem; font-weight: 500; writing-mode: sideways-lr; color: white; text-shadow: 0 0 4px rgba(69, 6, 18, 0.8);}
.sec-program .prog-list .detail-box{position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; color: white; background-color: rgba(0, 0, 0, 0.5); transition: 0.3s;opacity: 0; pointer-events: none;}
.sec-program .prog-list .enter-box{margin-bottom: 20px}
.sec-program .prog-list .enter-box .icon-box{display: flex; justify-content: center; align-items: center; width: 60px; aspect-ratio: 1 / 1; margin-bottom: 12px; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid white; border-radius: 8px; box-shadow: 0 0 20px rgba(69, 6, 18, 0.8); transition: 0.3s;}
.sec-program .prog-list .enter-box .icon-box img{width: 50%;}
.sec-program .prog-list .detail-title{font-size: 1.5rem; font-weight: 600; transition: 0.3s;}
.sec-program .prog-list .enter-box,
.sec-program .prog-list .detail-title{transform: translateY(20px); transition: 0.2s; opacity: 0;}

.sec-program .prog-list .enter-box:hover .icon-box{background-color: rgba(255, 255, 255, 0.6);}

.sec-program .prog-list.active .item{transition: 0.3s;}
.sec-program .prog-list.active .item:not(.active){width: 140px;}
.sec-program .prog-list.active .item.active{ width: calc(100% - ((140px * 6) + (12px * 6)))}
.sec-program .prog-list .item.active .quick-title{opacity: 0;}
.sec-program .prog-list .item .detail-box.delay-active{opacity: 1; pointer-events: auto; transform: translateY(0);}
.sec-program .prog-list .item .detail-box.delay-active .enter-box,
.sec-program .prog-list .item .detail-box.delay-active .detail-title{opacity: 1; transform: translateY(0);}

.sec-stat{position: relative;}
.sec-stat .stat-cont{display: flex; align-items: center; gap: 100px;}
.sec-stat .img-wrap{display: flex; justify-content: center; align-items: center; width: 600px}
.sec-stat .img-wrap img{width: 60%;}
.sec-stat .cont-wrap{flex: 1;}
.sec-stat .fadein-title,
.sec-stat .sec-title{text-align: left;}
.sec-stat .stat-list .item{display: flex; align-items: center; gap: 20px; margin-bottom: 12px;}
.sec-stat .stat-list .num{width: 80px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; background-color: #00391e; border-radius: 16px;}
.sec-stat .stat-list .num .str{font-size: 1.5rem; font-weight: 600;}
.sec-stat .stat-list .cont{flex: 1; font-size: 1.25rem; color: var(--text-g);}

.sec-stat.campus .stat-cont{display: flex; gap: 100px;}
.sec-stat.campus .cont-wrap{display: block}
.sec-stat.campus .stat-list{display: flex; align-items: center; gap: 20px;}
.sec-stat.campus .stat-list .item{flex: 1; display: block;}
.sec-stat.campus .stat-list .num{margin-bottom: 12px;}
.sec-stat.campus .stat-list .title{margin-bottom: 8px; font-size: 1.5rem; font-weight: 600;}
.sec-stat.campus .img-wrap{flex: unset; width: 540px;}
.sec-stat.campus .img-wrap img{width: 100%;}


.sec-make .map{position: relative;}
.sec-make .map-pins .item{content: ''; position: absolute; display: block; width: 60px; aspect-ratio: 1 / 1; border: 6px solid #21913c; border-radius: 50%;}
.sec-make .map-pins .item:nth-of-type(1){top: 35%; left: 6%;}
.sec-make .map-pins .item:nth-of-type(2){top: 35%; left: 46%;}
.sec-make .map-pins .item:nth-of-type(3){top: 31%; left: 60%;}
.sec-make .map-pins .item:nth-of-type(4){top: 5%; left: 74%;}
.sec-make .map-pins .item:nth-of-type(5){top: 56%; left: 76%;}


.sec-insight{position: relative;}
.sec-insight .insight-list{display: flex; flex-direction: column; gap: 40px;}
.sec-insight .insight-list .item{display: flex; gap: 120px;}
.sec-insight .insight-list .img-box{width: 240px; aspect-ratio: 1 / 1; background-color: #ddd; border-radius: 16px; overflow: hidden;}
.sec-insight .insight-list .right-box{display: flex; align-items: center; gap: 60px; flex: 1;}
.sec-insight .insight-list .text-box{flex: 1;}
.sec-insight .insight-list .title{font-size: 2.5rem; font-weight: 500; margin-bottom: 12px; -webkit-line-clamp: 2;}
.sec-insight .insight-list .cont{font-size: 1.25rem; color: var(--text-g); -webkit-line-clamp: 2;}
.sec-insight .insight-list .go-site{display: flex; justify-content: center; align-items: center; width: 100px; aspect-ratio: 1 / 1; border: 1px solid white; border-radius: 50%; transition: .3s;} 
.sec-insight .insight-list .item:hover .go-site{background-color: rgba(255, 255, 255, 0.1);}


.sec-intro .sec-inner{display: flex; gap: 20px;}
.sec-intro .intro-box{position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 420px; padding: 40px; background: linear-gradient(180deg,rgba(255, 255, 255, 0.25),rgba(255, 255, 255, 0)); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px; }
.sec-intro .intro-box::after{content: ''; position: absolute; top: 10px; right: -84px; z-index: 1; display: block; width: 148px; aspect-ratio: 1 / 1; background: url(/_res/tongmyong/bic/img/main-sec-rotate.png) 100% / cover; animation: rotate 10s linear infinite;}
.sec-intro .intro-box .name{font-size: 2rem; font-weight: 600;}
.sec-intro .intro-box .exp{font-size: 1.125rem; margin-bottom: 20px;}
.sec-intro .intro-box .cont{font-size: 1.5rem; line-height: 1.8;}
.sec-intro .img-box{flex: 1; border-radius: 16px; overflow: hidden;}

/*
.blur-bg::before, .blur-bg::after{content: ''; position: absolute; z-index: -1; display: block; background: rgba(255, 255, 255, .6);}
.sec-about.blur-bg::before{top: -30px; right: 0; width: 200px; height: 438px; filter: blur(200px);}
.sec-about.blur-bg::after{top: 52px; left: 330px; width: 400px; height: 800px; transform: rotate(45deg); filter: blur(300px);}
.sec-stat.blur-bg::before{top: 10%; left: 30%; width: 300px; height: 900px; transform: rotate(-45deg); filter: blur(200px);}
.sec-insight.blur-bg::before{top: 10%; left: 26%; width: 300px; height: 900px; transform: rotate(-45deg); filter: blur(200px);}
*/
#wrapper{position: relative;}
/*
#wrapper:not(.bg-white)::before{content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); z-index: -1; width: 1200px; height: 800px; display: block; background: #9d2eff9e; filter: blur(300px);}
*/
@media (max-width:1600px){}

@media (max-width:1400px){
	.sec-insight .insight-list .item{gap: 80px;}
	
}

@media (max-width:1200px){
	.sec{margin: 60px 0;}
	.sec.sec-about{margin-top: 100px}
	
	.sec-program .prog-list{flex-direction: column;}
	.sec-program .prog-list .item{width: 100%; height: 120px;}
	.sec-program .prog-list .quick-title{top: 50%; left: 40px; bottom: unset; transform: translateY(-50%); height: auto; writing-mode: unset;}
	.sec-program .prog-list.active .item:not(.active){width: 100%;}
	.sec-program .prog-list.active .item.active{width: 100%; height: 400px;}
	
	.sec-stat .stat-cont{gap: 40px}
	.sec-stat .img-wrap{width: 40%;}
	.sec-stat .img-wrap img{width: 100%;}
	
	.sec-stat.campus .img-wrap{width: 40%;}
}

@media (max-width:1024px){
	.sec-title{font-size: 2.5rem;}
	
	.sec-main .title{font-size: 5rem;}
	.sec-main .img-box{aspect-ratio: 2 / 1;}
	.sec-main .img-box::after{right: 40px;}
	
	.sec-stat .fadein-title, .sec-stat .sec-title{text-align: center;}
	.sec-stat .stat-cont{flex-direction: column-reverse; gap: 20px;}
	.sec-stat .img-wrap{max-width: 400px; width: 100%;}
	.sec-stat.campus .stat-cont{flex-direction: column; gap: 0;}
	.sec-stat.campus .img-wrap{width: 100%;}
	
	.sec-make .map-pins .item{width: 40px; border-width: 3px}
	
	.sec-insight .insight-list{gap: 20px;}
	.sec-insight .insight-list .item{gap: 20px;}
	.sec-insight .insight-list .right-box{gap: 20px;}
	.sec-insight .insight-list .title{font-size: 2rem;}
	.sec-insight .insight-list .go-site{width: 60px;}
	.sec-insight .insight-list .go-site img{width: 40%;}
}

@media (max-width:720px){
	.sec{margin: 40px 0;}
	.sec-title{margin-bottom: 28px;}
	.cont-box{margin: 28px 0;}
	
	.sec-main .title{font-size: 4rem;}
	.sec-main .img-box{aspect-ratio: 4 / 3;}
	.sec-main .img-box::after{bottom: -50px; width: 100px;}
	
	.sec-about .cont{font-size: 1.5rem;}
	
	.sec-program .prog-list .quick-title{left: 20px;}
	
	.sec-stat .stat-list .num{width: 60px;}
	.sec-stat .stat-list .num .str{font-size: 1.25rem;}
	
	.sec-make .map-pins .item{width: 32px;}
	
	.sec-insight .insight-list .item{flex-direction: column; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
	.sec-insight .insight-list .img-box{max-width: 240px; width: 100%;}
	
	.sec-intro .sec-inner{flex-direction: column;}
	.sec-intro .intro-box{width: 100%; padding: 20px;}
	.sec-intro .intro-box::after{top: auto; bottom: -80px; right: 10px; width: 100px;}
	
}

@media (max-width:480px){
	.sec-main .title{font-size: 3rem;}
	.sec-main .img-box::after{right: 20px;}
	
	.sec-stat.campus .stat-list{flex-direction: column;}
	
	.sec-insight .insight-list .right-box{flex-direction: column; align-items: flex-start}
	.sec-insight .insight-list .go-site{width: 40px;}
}