.main_con {width:100%;  margin:0 auto;  font-size:17.5px;  font-weight:300; line-height:1.6}
 .in { max-width:1400px;   }

 @media all and (max-width:1400px) {
   .in {padding:0 4%; box-sizing:border-box }

}


hr {height:100px}
h3 {font-size:2em}
.tit {text-align:center;  font-size:3em; letter-spacing:-2px}
.h3_span {letter-spacing:0; color:rgba(255,255,255,.9); font-weight:400}


section + section {margin-top:130px}

.youtube-bg { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.youtube-bg iframe { position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); pointer-events: none; /* 클릭 방지 */ }
.youtube-bg .t_box {position:absolute; left:0; top:50%; margin-top:-50px; width:100%; text-align:center}
.youtube-bg .t_box h3 {font-size:2.5em}

.scroll_me {position:absolute; bottom:50px; width:100px; height:100px; margin-left:-50px;  left:50%}
.scroll-btn { display: block; position: absolute; left: 0; right: 0; text-align: center; }
.scroll-btn > * { display: inline-block; }
 
 
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;


}

.scroll-btn  p {width:100%; color: #ffffff;  }

@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}

@media all and (max-width:800px) {
	.main_con {font-size:15px}
	.youtube-bg .t_box h3 {font-size:1.5em}
	.scroll-btn .mouse {display:none}

}

.about {position:relative;  width:100%;  display:inline-block}
.about hr {height:160px}
.about img {position:absolute; opacity:.5;  z-index:-9; left:-10px; width:540px; top:-80px}
.about .t_box {padding:0 10%; box-sizing:border-box}
.about .t_box b.t1 {font-size:1.2em; font-weight:400; display:block; margin-bottom:15px}
.about .t_box b.t2 {font-size:1.8em}
.about .t_box p {line-height:1.6;  font-size:1em;}

 @media all and (max-width:800px) {

	.about img {display:none}
	.about .t_box b.t1 {font-size:1.1em;  }
	.about .t_box b.t2 {font-size:1.5em}

}

ul.news {width:100%; margin-left:auto;  display:flex; flex-wrap:wrap; gap:30px 0; justify-content:space-between}
ul.news li { width:32%; padding:40px; box-sizing:border-box; background-color:#111;  position:relative; cursor:pointer; background: linear-gradient(146deg, rgba(255, 255, 255, 0.16) 0%, transparent 60%, transparent 100%); border-radius:10px; transition: transform 1.7s cubic-bezier(0.5, 0, 0, 1); z-index: 12; }
ul.news li  * {color:#fff}
ul.news li::before { display: block; position: absolute; top: 0.1rem; right: 0.1rem; bottom: 0.1rem; left: 0.1rem; content: ""; border-radius:10px; background-color: #0f0f0f; z-index: -1; }
ul.news li span.label {border:1px solid var(--main_c); font-size:15px; font-weight:300;  margin-bottom:20px; color:var(--main_c); display:inline-block; padding:6px 20px; border-radius:5px; }
 
ul.news li b {font-size:1.2em; font-weight:500; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; word-wrap: break-word; width: 100%; overflow: hidden; }
ul.news li p {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; word-wrap: break-word; width: 100%; overflow: hidden; font-size:.93em; font-weight:200; line-height:1.35; margin:10px 0;  }
ul.news li span { letter-spacing:0; color:rgba(255,255,255,.8);   font-weight:200; font-size:.9em} 
 
@media all and (max-width:800px) {
  ul.news {flex-wrap:wrap; gap:20px 0; justify-content:space-between}
  ul.news li  {width:100%}

}

 
.bn * {transition: all 0.3s ease-out;}
.bn ul {display:flex; width:100%; gap:20px; margin-top:50px}
.bn ul li {width:25%; display:flex; align-items:center; gap:10px; font-size:18px;  padding:30px 30px; box-sizing:border-box;   background-color:#111}
.bn ul li i {font-size:24px}
.bn ul li {   box-sizing:border-box; background-color:#111;  cursor:pointer; position: relative; background: linear-gradient(146deg, rgba(255, 255, 255, 0.16) 0%, transparent 60%, transparent 100%); border-radius:10px; transition: transform 1.7s cubic-bezier(0.5, 0, 0, 1); z-index: 12; }
.bn ul li svg {width:22px; margin-left:auto; opacity:0}
.bn ul li:hover svg {opacity:1}
.bn ul li::before { display: block; position: absolute; top: 0.1rem; right: 0.1rem; bottom: 0.1rem; left: 0.1rem; content: ""; border-radius:10px; background-color: #0f0f0f; z-index: -1; }


 @media all and (max-width:800px) {
  .bn ul {flex-wrap:wrap; gap:20px 0; justify-content:space-between}
  .bn ul li {width:49%}

}


 
.swiper-container { width: 100%; padding-top: 50px;}
.swiper-slide { background-position: center; background-size: cover; width: 400px; position:relative; overflow:hidden; height:700px; background-color:#333 }
.swiper-slide:after { position: absolute; width: 100%; height: 230px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); bottom: 0; left: 0; display: inline-block; content: ''; }

.picture { width: 100%; height: 550px; overflow: hidden; position:relative; -webkit-box-reflect: below 1px linear-gradient(transparent 60%, rgba(0,0,0,.8));}
.swiper-slide div.t { position: absolute; box-sizing:border-box; width: 100%; top: 450px; left: 0; padding: 15px 10px; color: #fff; font-weight: 600; text-align: center; z-index: 5; opacity:0 }
.swiper-slide:hover div.t {opacity:1}
.picture img { display: block; width: 100%;}