@charset "UTF-8";
.inner{max-width: 1400px; margin: 0 auto;}

/* header */
header{position: absolute; left: 0; top: 0; width: 100%; z-index: 150; padding: 30px 0;}
.logo img{ width: 266px; height: 47px; }

/* main */
.item > a{display: block; height: 100%;}
.item > a:hover .title{top: 45%;}

.title{background: rgba(16, 23, 34, .7); padding: 3% 0; position: relative; top: 50%; transform: translateY(-50%); transition: all .3s;}

.title > *{ color: #fff; font-size: 1.250rem}
.title h2{font-size: 1.875rem}
.title .inner{position: relative;}
.title .inner::before, .title .inner::after{content: ''; position: absolute; display: block; bottom: 0; left: 0; height: 3px; background-color: #fff;}
.title .inner::before{max-width: 102px; width: 100%; }
.title .inner::after{width: 16px; transform: rotate(45deg); left: 87px; bottom: 6px;}
.title .inner > p{letter-spacing: 5px; padding-bottom: 45px;}


/* seoul_campus */
.seoul_campus{position: absolute; top: 0; left: 0; width: 100%; height: 100vh;transform: skewX(-10deg) translateX(-50%); overflow: hidden; z-index: 1;}
.seoul_campus::before{background: linear-gradient(to top, #060606a8 0%,transparent 50%, #060606a8 100%), url(/resources/user/khu_itype3/image/bg01.jpg) no-repeat center / cover; position: absolute; content: ''; top: 0; left: 0; z-index: -1; transform: skewX(10deg) translateX(70%);width: 70%; height: 100%;}
.seoul_campus .title{transform: skewX(10deg) translate(45%, -50%);}

/* global_campus */
.global_campus{width: 100%; height: 100vh; background: linear-gradient(to top, #060606a8 0%,transparent 50%, #060606a8 100%), url(/resources/user/khu_itype3/image/bg02.jpg) no-repeat center right -200px; }
.global_campus .title{padding-left: 55%;}


/* footer */
#footer{position: absolute; bottom:0; width: 100%; z-index: 150; color: #fff; border-top: 1px solid rgba(255, 255, 255, .7);}
#footer > p{padding: 40px 0;}


@media (max-width: 1660px){
    .seoul_campus .title{transform: skewX(10deg) translate(50.5%, -50%);}

}

@media (max-width: 1400px){
    .inner{padding-left: 20px !important; padding-right: 20px !important;}

    .title .inner::before{left: 1rem;}
    .title .inner::after{left: calc(1rem + 88px);}

    .global_campus{background-position: right -400px center; transition: all .3s;}
}

@media (max-width: 1024px){
	header{padding-left: 1rem; padding-right: 1rem;}
	
    .global_campus{background-position: right -600px center;}
}

@media (max-width: 720px){
    .item{height: 50vh;}

	.title{padding-bottom: 20px;}
	
    .seoul_campus{position: relative; transform: skewX(0) translateX(0);}
    .seoul_campus::before{ transform: skewX(0) translateX(0);}
    .seoul_campus::before{width: 100%;}
	.seoul_campus .title{transform: skewX(0) translate(0, -50%);}


    .global_campus{background-position: center;}
    .global_campus .title{padding-left: 0;}
    
    #footer > p{padding: 20px;}

}