@charset "utf-8";

body main {}

body main .main-visual {position: absolute; left: 0; top: 0; width: 100%; background: #000; overflow: hidden; z-index:-1;}
body main .main-visual video {width: 100%; height: 100vh; object-fit: cover; opacity: .5;}

body main .main-txt {height: 100vh; min-height: 700px; display: flex; justify-content: flex-start; align-items: flex-end; padding-bottom: 10vh;}
body main .main-txt .txt_inner {width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}

body main .main-txt .txt_left h1 {font-weight:bold; font-size:48px; color:var(--base1); margin-bottom:30px;}
body main .main-txt .txt_left h1 span {display:block; color:var(--base2);}

body main .main-txt .txt_left ul {display:flex; color:#fff;}
body main .main-txt .txt_left ul li {position: relative;}
body main .main-txt .txt_left ul li:nth-child(2) {padding:0 41px;}
body main .main-txt .txt_left ul li:nth-child(2):before {content: ""; position: absolute; right: 16px; bottom: 10px; width: 7px; height:7px; border-radius:100px; background:#fff;}
body main .main-txt .txt_left ul li:nth-child(2):after {content: ""; position: absolute; left: 16px; bottom: 10px; width: 7px; height:7px; border-radius:100px; background:#fff;}

body main .main-txt .txt_right {color:#fff;}
body main .main-txt .txt_right ul li {position:relative; padding-left:70px;}
body main .main-txt .txt_right ul li+li {margin-top:20px;}

body main .main-txt .txt_right ul li:nth-child(1) {line-height:1;}
body main .main-txt .txt_right ul li.map-list {opacity:.3;}
body main .main-txt .txt_right ul li.map-list i {display:inline-block; width:24px; height:24px; background:url("/images/common/i_play.png") right no-repeat;}
body main .main-txt .txt_right ul li.map-list:hover {opacity:1; transition: all .6s ease !important; -webkit-transition: all .6s ease !important; -moz-transition: all .6s ease !important;}

body main .main-txt .txt_right ul li .layerOpen {width: 100%; display:flex; justify-content: space-between;}

body main .main-txt .txt_right ul li:nth-child(1) a:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 50px;
    border-top: 2px solid #fff;
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
}

body main .main-txt .txt_right ul li:nth-child(1) a:before {
	content: "";
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 15px;
    border-top: 2px solid #fff;
    transform: rotate(45deg) translateY(-9px);
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
} 

body main .main-txt .txt_right ul li:nth-child(1):hover a:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 60px;
    border-top: 2px solid #fff;
    transition: .3s;
}

body main .main-txt .txt_right ul li:nth-child(1):hover a:before {
	content: "";
    position: absolute;
	left: 40px;
    bottom: 0;
    width: 15px;
    border-top: 2px solid #fff;
    transform: rotate(45deg) translateY(-9px);
    transition: .3s;
}

/* 동영상 보기 팝업 */
.layer {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 1000;}
.layer.on {display: flex;}
.layerContent {width:100%; max-width:1400px; position: relative; padding: 20px; border-radius: 10px; }
.layer .close {position: absolute; top: 0px; right: -30px; background: transparent; border: none; font-size: 20px; cursor: pointer;}
.layerContent .wrap {height:100%;}
.layerContent .wrap .video {height:100%;}

/* 동영상 모바일 리사이즈 */
.layerContent .wrap{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.layerContent .wrap iframe,
.layerContent .wrap object,
.layerContent .wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}




body main h3 {font-size:var(--fontSize35); display:flex; font-weight:bold; padding-bottom:20px !important; align-items: center; justify-content: space-between; padding-bottom:25px; line-height:1; color:#000;}
body main h3 span {font-size:var(--fontSize16);}

body main .part1,.part2>div {display:grid; grid-template-columns:repeat(2, 1fr); gap:70px; padding:110px 0;}

body main .part1 .left .notice {padding-bottom:70px;}
body main .part1 .left .notice a {color:#333; position: relative; /*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;*/ width:100%; line-height:1.8; display:flex; justify-content: space-between;}
body main .part1 .left .notice a:hover {color:var(--base1);}
body main .part1 .left .notice ul li {display:flex; justify-content: space-between;}
body main .part1 .left .journal ul li {line-height:1.4;}
body main .part1 .left .journal ul li a:hover {color:var(--base2);}
body main .part1 .left .journal ul li:nth-child(2) {margin:15px 0; padding:15px 0; border:1px solid #E5E5E5; border-left:0; border-right:0;}


body main .part1 .right .program {display:flex; gap:60px; flex-direction: column;}
body main .part1 .right .program .apply {display:flex; justify-content: space-between; gap:20px;}
body main .part1 .right .program .apply li {position:relative; width:100%; background:url("/images/main/ico_apply_bg.png") no-repeat right -34% bottom 20% var(--base1); border-radius:15px; color:#fff; transition:all .3s ease;}
body main .part1 .right .program .apply li:hover {transform: translateY(-20px);}
body main .part1 .right .program .apply li a {width:100%; display: inline-block; padding:50px 40px;}
body main .part1 .right .program .apply li+li {background:url("/images/main/ico_apply2_bg.png") no-repeat right -20% bottom 20% var(--base2);}
body main .part1 .right .program .apply li h4 {font-size:var(--fontSize24); font-weight:800;}
body main .part1 .right .program .apply li p {padding:25px 0 50px 0; font-weight:300; line-height:1.4;}
body main .part1 .right .program .apply li span {position:absolute; bottom:50px; font-size:12px; opacity:.5;}
body main .part1 .right .program .apply li:hover span {opacity:1; transition:.3s;}
body main .part1 .right .program .apply li a div {position:absolute; right:40px; top:50px;}

body main .part1 .right .wild {display:grid; grid-template-columns:1fr 1fr 1fr; gap:35px; align-items: center;}
body main .part1 .right .wild p {font-size:var(--fontSize16); font-weight:200; color:#666;}
body main .part1 .right .wild span {display:inline-block;} 
body main .part1 .right .wild a:hover {color:var(--base1);}
body main .part1 .right .wild a:last-child:hover {color:var(--base2);}
body main .part1 .right .wild li:nth-child(2) {display:flex; justify-content: center;}
body main .part1 .right .wild li:last-child {display:flex; flex-direction: column; justify-content: center; gap: 20px;}


body main .part1 .right .wild span {position: relative; line-height:1;}

body main .part1 .right .wild a {display:flex; justify-content: space-between; font-weight:600; color:#000;}
/*body main .part1 .right .wild span:hover {padding-left:10px; transition: all .3s ease;}*/
body main .part1 .right .wild i {position:relative; display:inline-block; width:60px;}

body main .part1 .right .wild i:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    border-top: 1px solid #000;
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
}

body main .part1 .right .wild i:before {
	content: "";
    position: absolute;
    right: 4px;
    bottom: 0;
    width: 15px;
    border-top: 1px solid #000;
    transform: rotate(45deg) translateY(-9px);
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
} 

body main .part1 .right .wild a:hover i:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 115%;
    border-top: 1px solid #000;
    transition: .3s;
}

body main .part1 .right .wild a:hover i:before {
	content: "";
    position: absolute;
	right: -10%;
    bottom: 0;
    width: 15px;
    border-top: 1px solid #000;
    transform: rotate(45deg) translateY(-9px);
    transition: .3s;
}



body main .part2 {background:url(/images/main/part2_bg.webp) center; background-size: cover; color:#fff;}
body main .part2 h3 {color:#fff !important; padding-bottom:60px !important;}
body main .part2 h3 span {opacity:.5;}


body main .part2 .left ul {display:grid; grid-template-columns:repeat(2,1fr); gap:70px;}
body main .part2 .left ul li {position:relative; height:255px;}
body main .part2 .left ul li strong {font-size:var(--fontSize14); background:var(--base2); padding:10px 25px; border-radius:4px; display:inline-block; line-height:1.2;}
body main .part2 .left ul li h4 {
	font-size: var(--fontSize24);
	line-height: 1.3;
	margin: 20px 0 30px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
	height: 62px;
}

body main .part2 .left ul li p {line-height:1.4;}
body main .part2 .left ul li .plus {padding-top:30px; position:absolute; bottom:0;}

body main .part2 .right ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
body main .part2 .right ul li {position:relative; border-radius:20px; overflow:hidden;}
body main .part2 .right ul li a {overflow:hidden;}
body main .part2 .right ul li .img {height:255px;}
body main .part2 .right ul li .img img {transition: all 0.5s; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0; z-index: 0;}
body main .part2 .right ul li:hover .img img {transform: scale(1.1);}
body main .part2 .right p {border-radius:0 0 20px 20px; width:100%; display:inline-block; position:absolute; bottom:0; padding:10px; background:rgba(0,0,0,.1); backdrop-filter: blur(10px); }
body main .part2 .right span {font-weight:200; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; overflow:hidden;}



body main .part3 {display:flex; padding:50px 0; justify-content: space-between; align-items: center;}
body main .part3 h2 {font-size:var(--fontSize35); font-weight:bold; color:#000;}
body main .part3 ul {display:flex; gap:50px;}
body main .part3 ul li {display:flex; gap:10px; align-items: center;}
body main .part3 ul li i {width:60px; height:60px; background:#E5E5E5; border-radius:100px; display:flex; justify-content: center; align-items: center;}
body main .part3 ul li ol {display:flex;}
body main .part3 ul li ol li {position:relative; padding:0 10px 0 10px;}
body main .part3 ul li ol li:nth-child(1) {padding-left:0;}
body main .part3 ul li ol li:nth-child(1):before {content:none;}
body main .part3 ul li ol li:before {content:""; display:block; width:1px; height:12px; background:#ccc; position:absolute; left:0; top:25%;}


body main .part3 ul li a:hover {color:var(--base1);}
body main .part3 ul li ul ol li a:hover {color:var(--base1);}



@media (max-width: 1305px) {
	
	body main .part3 {padding:50px 30px; flex-direction: column; align-items: flex-start;}
	body main .part3 ul {width:100%; display:grid; gap:20px; grid-template-columns: repeat(2, 1fr); justify-content: space-between;}
	body main .part3 h2 {margin-bottom:25px;}	
	
}



/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 1024px) {
	
	
	
	body main .main-visual video {height:70vh;}
	body main .main-txt {height: 70vh; min-height:100%; margin-top: -60px;}
	body main .main-txt .txt_inner {padding:0 30px;}
	
	body main .part1, .part2>div {grid-template-columns: repeat(1, 1fr); padding: 10vh 30px; gap:50px;}
	
	
	body main .part2 h3 {padding-bottom:30px !important;}
	body main .part2 .left ul {gap:130px;}
	body main .part2 .left ul li h4 {margin: 20px 0;}
	body main .part2 .left ul li .plus {padding-top:20px;}
	

}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	body main .main-txt {padding-bottom:5vh;}
	body main .main-txt .txt_inner {justify-content: space-between; align-items: flex-start; flex-direction: column;}
	
	body main .main-txt .txt_left h1 {font-size:38px;}
	body main .main-txt .txt_left ul {flex-direction: column; margin-bottom:25px; padding-left:20px;}
	body main .main-txt .txt_left ul li:nth-child(2) {padding:0;}
	body main .main-txt .txt_left ul li:nth-child(2):after {content:none;}
	body main .main-txt .txt_left ul li:before, body main .main-txt .txt_left ul li:nth-child(2):before {content: ""; position: absolute; left: -18px; bottom: 10px; width:5px; height: 5px; border-radius: 100px; background: #fff;}
	
	body main .main-txt .txt_right ul li {padding-left:60px;}
	/* body main .main-txt .txt_right ul li:nth-child(2) {padding-left:0; background: url(/images/common/i_play.png) 95px no-repeat; background-size: 18px;} */
	body main .main-txt .txt_right ul li:nth-child(2) i {width: 18px; height: 18px; background: url(/images/common/i_play.png) right no-repeat; background-size: 18px;}
	body main .main-txt .txt_right ul li+li {margin-top:13px;}
	
	body main .part1, .part2>div {padding:5vh 30px;}
	
	body main .part2 .right ul {grid-template-columns: repeat(1, 1fr);}
	body main .part1 .right .wild {grid-template-columns: auto 1fr;}
	body main .part1 .right .wild li:nth-child(1) {grid-column: 1 / -1;}
	body main .part1 .right .wild li:nth-child(2) {}
	
	body main .part1 .right .program .apply {flex-direction: column;}
	
	body main .part1 .left .notice {padding-bottom:40px;}
	body main .part2 .left ul {grid-template-columns: repeat(1, 1fr); gap:30px;}
	body main .part2 .left ul li h4 {height:49px;}
	
	body main .part3 ul {grid-template-columns: repeat(1, 1fr);}
	
	body main .part2 .left ul li {height:200px;}
	
	body main .part1 .left .notice a span {display:none;}
	
	/* 동영상 보기 */
	.layerContent {padding:20px !important;}
	.layer .close {top:-5px; right:20px;}
	
	
}