@charset "utf-8";

.wrap-main-con, #multipleDiv_factory1_37 {display:inline-block; width:100%; background:#f5f5f5; margin-top:-50px; padding:0 0 60px 0;}

.wrap-banner {position:relative; z-index:90;}
.wrap-banner ul{display:inline-block; width:102%;}
.wrap-banner ul li {float:left; width:16.666%;}
.wrap-banner ul li > div {width:89%; height:180px; background:#fff; box-shadow: 10px 15px 22px 0px rgba(0,0,0,0.21); transition:all 0.7s;}
.wrap-banner ul li > div:hover {box-shadow: 10px 15px 22px 0px rgba(0,0,0,0.4);}
.wrap-banner ul li > div a {font-family: 'Roboto'; font-weight: 300; display:block; width:100%; height:100%; padding:18px 20px 19px 20px; position:relative; font-size:1.1vw; color:#000;}
.wrap-banner ul li > div a:hover {color:#fff;}
.wrap-banner ul li > div a:after {content:''; position:absolute; left:29px; top:60px; width:30px; height:9px; background:url('../../images/main/banner-arrow-off.png') no-repeat center center;}
.wrap-banner ul li > div a:before {content:''; position:absolute; left:0px; top:0px; opacity:0; width:100%; height:100%; background: linear-gradient(-45deg,#d6580e,#f6ab1d,#d6580e); background-size: 650% 650%; animation: gradient 3s ease infinite; transition: all 0.8s;}
.wrap-banner ul li > div a:hover:after {background:url('../../images/main/banner-arrow-on.png') no-repeat;}
.wrap-banner ul li > div a:hover:before {opacity:1;}
.wrap-banner ul li > div a span {position:relative; z-index:1; width:100%; height:100%; display:block;}
.wrap-banner ul li > div a span:after {content:''; position:absolute; left:0px; top:0px; width:100%; height:100%;}
.wrap-banner ul li:nth-child(1) > div a span:after {background:url('../../images/main/banner-ico1-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(1) > div a:hover span:after {background:url('../../images/main/banner-ico1-on.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(2) > div a span:after {background:url('../../images/main/banner-ico2-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(2) > div a:hover span:after {background:url('../../images/main/banner-ico2-on.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(3) > div a span:after {background:url('../../images/main/banner-ico3-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(3) > div a:hover span:after {background:url('../../images/main/banner-ico3-on.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(4) > div a span:after {background:url('../../images/main/banner-ico4-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(4) > div a:hover span:after {background:url('../../images/main/banner-ico4-on.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(5) > div a span:after {background:url('../../images/main/banner-ico5-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(5) > div a:hover span:after {background:url('../../images/main/banner-ico5-on.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(6) > div a span:after {background:url('../../images/main/banner-ico6-off.png') no-repeat 100% 100%;}
.wrap-banner ul li:nth-child(6) > div a:hover span:after {background:url('../../images/main/banner-ico6-on.png') no-repeat 100% 100%;}
@keyframes gradient {0% {background-position:0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}

@media all and (min-width:1921px) {
	.wrap-banner ul li > div a {font-size:21px;}
}

@media all and (max-width:1023px) {
	.wrap-banner ul {width:107%;}
	.wrap-banner ul li {width:50%; margin:0 0 4% 0;}
	.wrap-banner ul li > div {height:93px; width:91%;}
	.wrap-banner ul li > div a {font-size:2.442vw; padding: 14px 16px 15px 16px;}
}

@media all and (max-width:768px) {
    .wrap-banner ul li > div a span:after {background-size:34% auto !important;}
	.wrap-main-con, #multipleDiv_factory1_37 {margin-top:-30px;}
	.wrap-banner ul {width:103%;}
	.wrap-banner ul li {width:50%;}
	.wrap-banner ul li > div {width:94%; height:60px;}
	.wrap-banner ul li > div a {font-size:2.6vw}
	.wrap-banner ul li > div a span:after {display:none;}
	.wrap-banner ul li > div a:after {left:auto; right:20px; top:25px;}
}

#menu7386_obj4 {position: absolute; width: 100% !important; left: 0%; top: 45%; z-index: 100;}
.main-slogan {z-index:1; width:100%; color:#fff; line-height:1.3; max-width: 1280px; margin: 0 auto; padding: 0 20px;}
.main-slogan h1{font-size: 55px; line-height: 1.5; text-shadow: 2px 0px 6px rgba(0,0,0,0.55); font-family:'Gmarket Sans'; font-weight: 500;}

@media all and (max-width: 1024px) {
	#menu7386_obj4{top: 36%;}
	.main-slogan{padding: 0 20px;}
	.main-slogan h1{font-size: 45px; line-height: 1.2;}
}

@media all and (max-width: 768px) {
	#menu7386_obj4{top: 35%;}
	.main-slogan{padding: 0 30px;}
	.main-slogan h1{font-size: 30px;}
}

/* admissions */
.admissions-inner{background: url(../../images/main/main_admission_bg.jpg) no-repeat top center; padding-top: 80px; padding-bottom: 90px;}
.admissions-inner h1{font-size: 36px; color: #111111; text-align: center; font-family: 'Roboto'; font-weight: 900;}
.admissions-box{margin-top: 30px;}
.admissions-box::after{content:""; display: block; clear: both;}
.admission-left{float: left; width: 48.5%;}
.admission-right{float: right; width: 48.5%;}
.admission-program{position: relative; transition: all .3s;}
.admission-program a{display: block; width: 100%; height: 100%;}
.admission-program.program_1{background: url(../../images/main/main_link_bg1.jpg) center center; height: 550px;}
.admission-program.program_2{background: url(../../images/main/main_link_bg2.jpg) center center; height: 255px; margin-bottom: 40px;}
.admission-program.program_3{background: url(../../images/main/main_link_bg3.jpg) center center; height: 255px;}
.admission-program .admission-link{position: absolute; bottom: 0; width: 100%; left: 0; background: url(../../images/main/main_shadow.png) no-repeat left bottom; height: 180px;}
.admission-program .admission-link p{position: absolute; color: white; font-family: 'Roboto'; font-weight: 400; font-size: 22px; bottom: 25px; width: 100%; padding-left: 35px;}
.admission-program .admission-link p::after{content:""; display: block; position: absolute; right: 35px; width: 18px; height: 18px; background: url(../../images/main/btn_more.png); bottom: 5px; transition: all .3s;}
.admission-program .admission-link p span{font-weight: 600;}
.admission-program a .admission-link p > span{position: relative;}
.admission-program a .admission-link p > span::before{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: white; transition: all .3s;}
.admission-program a:hover .admission-link p > span::before{width: 100%;}
.admission-program a:hover .admission-link p::after{transform:rotate(180deg);}

@media all and (max-width: 1024px) {
	.admission-program .admission-link p{padding-left: 25px;}
	.admission-program .admission-link p::after{right: 25px;}
	.admission-program.program_1{height: 385px; background-size: cover;}
	.admission-program.program_2{height: 172px; margin-bottom: 41px; background-size: cover;}
	.admission-program.program_3{height: 172px; background-size: cover;}
}

@media all and (max-width: 768px){
	.admission-program .admission-link p{font-size: 20px; padding-left: 20px; padding-right: 50px;}
	.admission-program .admission-link p::after{right: 20px;}
	.admission-program.program_2{height: 178px; margin-bottom: 29px;}
	.admission-program.program_3{height: 178px;}
}

@media all and (max-width: 420px) {
	.admission-left{width: 100%; float: none;}
	.admission-right{width: 100%; float: none; margin-top:29px;}
}

#multipleDiv_eng_50{background: url(../../images/main/main_map_bg.jpg) no-repeat top center;}
#multipleContentsDiv_eng_50{max-width: 1280px; margin: 0 auto;}
#multipleContentsDiv_eng_50::after{content:""; display: table; clear: both;}
#menu7386_obj661{width: 48.5%; float: left;}
.campus-life-inner{padding-top: 80px;}
.campus-life-inner .campus-life-title{font-size: 30px; color: white; text-align: center; font-family: 'Roboto'; font-weight: 900;}
.campus-life-box{margin-top: 30px;}
.campus-life-box ul::after{Content:""; display: table; clear: both;}
.campus-life-box li{width: calc(100%/3); float: left;}
.campus-life-box li a{display: block; width: 100%; height: 100%;}
.campus-life-box li .campus-logo{width: 110px; margin: 0 auto; position: relative; transition: all .3s; top: 0;}
.campus-life-box li p{color: white; font-family: 'Roboto'; font-weight: 500; font-size:18px; text-align: center; line-height: 22px; margin-top: 10px;}
.campus-life-box li a:hover .campus-logo{top: -10px;}
.campus-life-box li a:hover p{text-decoration: underline;}

.center-link-inner{margin-top: 30px; position: relative; padding-bottom: 30px;}
.center-link-bg{position: absolute; z-index: 1; right: 0; bottom: 0;}
.center-link-image{width: calc(100% - 30px); position: relative; z-index: 2; background: url(../../images/main/main_center_img.jpg) no-repeat left top; height: 330px;}
.center-link-text{position: absolute; right: 0; bottom: 0; background: url(../../images/main/main_center_bg.jpg) no-repeat right bottom; background-color: white;  z-index: 3;}
.center-link-text a{display: block; width: 100%; height: 100%; padding: 20px 110px 70px 30px;}
.center-link-text h1{font-family: 'Roboto'; font-weight: 700; font-size: 26px; color: #111111; padding-bottom: 13px; position: relative; display: inline-block;}
.center-link-text h1::before{content:""; display: block; position: absolute; left: 0; bottom: 15px; width: 0%; height: 2px; background-color: #111; transition: all .3s;}
.center-link-text h1::after{content:""; display: block; position: absolute; width: 24px; height: 1px; left: 0; bottom: 0; background-color: #111111;}
.center-link-text p{margin-top: 20px; font-family: 'Roboto'; font-weight: 400; font-size : 18px; line-height: 24px; color: #666666;}
.center-link-text p::after{content:""; display: block; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: url(../../images/main/ic_center_more.png) no-repeat center center; background-color: #00baf2; right: 30px; bottom: 30px;}
.center-link-text a:hover h1::before{width: 100%;}
.center-link-text a:hover p{text-decoration: underline;}

@media all and (max-width: 1024px) {
	#menu7386_obj661{width: 100%; float: none; max-width: 910px; margin: 0 auto; padding: 0 20px;}
	#multipleDiv_eng_50{background: url(../../images/main/main_map_bg.jpg) no-repeat bottom center; padding-bottom: 80px; background-size: cover;}
	.campus-life-inner{max-width: 620px; padding: 0 20px; margin: 0 auto; margin-top: 15px;}
	.center-link-inner{max-width: 620px; padding: 0 20px; margin: 0 auto; margin-top: 30px;}
	.center-link-bg{right: 20px; width: calc(100% - 50px); bottom: -30px;}
	.center-link-text{right: 20px; bottom: -30px;}
}

@media all and (max-width: 768px) {
	#menu7386_obj661{max-width: 620px;}
}

@media all and (max-width: 420px) {
	.campus-life-box li{width: 100%; float: none; margin-bottom: 20px;}
	.campus-life-box li:last-child{margin-bottom: 0;}
}

.media-inner{padding-top: 90px; background: url(../../images/main/main_video_bg.jpg) no-repeat bottom left; padding-bottom: 90px;}
.media-box{max-width: 850px; margin: 0 auto; position: relative;}
.media-box p{font-size: 36px; color: #111111; font-family: 'Roboto'; font-weight: 900;transform: rotate(90deg) translateX(90px) translateY(100px); left: 0; top: 0; position: absolute}
.youtube-media {position: relative; width: calc(100% - 40px); height: auto; padding-bottom: 56.25%; margin-left: 50px;}
.youtube-media iframe { z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%;}

@media all and (max-width: 1024px) {
	.media-inner{padding: 0 20px; padding-bottom: 50px; padding-top: 60px;}
	.youtube-media{height: 450px; padding-bottom: 0;}
}

@media all and (max-width: 768px) {
	.media-inner{padding-bottom: 30px; padding-top: 15px;}
	.media-box p{position: static; transform: none; text-align: center; font-size: 30px; margin-bottom: 15px;}
	.youtube-media{width: 100%; margin-left: 0; height: 415px;}
}

.sns-popup .slider{margin:0;}
.sns-popup .slider li{margin:0 20px;}

@media all and (max-width: 768px) {
  .sns-popup .slider li{margin:0 auto;}
  .main-sns-info{height:130px;box-shadow:none;border-bottom:1px solid #ccc; bottom:0;width:101%;}
}