@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; scroll-behavior: smooth; }
body {
line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1; font-size: 1em; }
ul, ol { list-style:none; margin:0; padding: 0; }
a { outline:0; text-decoration:none; color: #000; }
a:focus { outline:none; color: var(--main-color); }
figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button, input, submit { border: none; background: none; }
dt { font-weight: normal; }

:root {
/* 컨텐츠 너비 */
--containerV1-width : 1600px;

--main-color : #000; /* mainColor */

}

/* 애니메이션 */
@keyframes opc {
	from { opacity: 0; }
	to {opacity: 1;}	
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: var(--containerV1-width); }
@media (max-width:1630px) {
.containerV1 { padding: 0 15px; }
}



/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
#header { 
--header-height: 6.38em;
--header-transition:0.4s;
position: fixed; left: 0; top: 0; width: 100%; z-index:2000; transition:0.4s; font-size: min(4.29vw,18px);
display:flex; justify-content:space-between; align-items:center; padding:0 2.777em; height: var(--header-height);
}

.logo { transition:var(--header-transition); }
.logo a { display: block; width: 14.6em; }
.logo img { display: none; }

#h_menu { display:flex; align-items:center; display: none; }
#h_menu .outer { display:flex; gap:1.22em; }
#h_menu .outer > li > a {
display:block; font-size:inherit; font-weight:500; text-align:center; transition:var(--header-transition); color: #fff; padding: 0.5em; 
}


@media (min-width:991px) {/* 991이상 */
	#h_menu .outer > li > a { border-radius:0.3em; }

	/* 스크롤 클래스 */
	#header.scroll .logo { visibility:hidden; opacity: 0; }
	#header.scroll #h_menu .outer > li > a { background: rgba(0,0,0,0.3); }

	:is(#header, #header.scroll) #h_menu .outer > li > a.on { background: rgba(0,0,0,0.8); }
}

@media (max-width:991px) {/* 991이하 */
	#header { padding: 0 1em; }
	#header .open_btn { cursor:pointer; color: #fff; padding: 0.1em 0.3em;}
	#header .open_btn i { font-size: 1.6em }

	.menu_box_bg { position: fixed; right: 0; top: 0; z-index:8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); }

	.logo a { width: 12em; }

	.menu_box { 
	position: fixed; right: 0; top: 0; background: #fff; width: 80%; height: 100%; z-index: 9999;
	transform:translateX(100%); transition:0.4s;
	}
	#h_menu { display:grid; align-items:start; height: 100%; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; }
	#h_menu .logo_mob { padding: 1em; }
	#h_menu .logo_mob a img {min-width: 140px;}
	#h_menu .close_btn { padding: 1em; justify-self:end; align-self:center; cursor:pointer }
	#h_menu .close_btn i { font-size: 1.1em; }
	#h_menu .outer { flex-direction:column; grid-column:1/3; border-top: 1px solid #eee; gap:2em; padding: 4em 2em; }
	#h_menu .outer > li > a { color: #000; font-size: 1.5em; text-align: left; display: inline-block; padding: 0.5em 0; border-bottom: 2px solid transparent; }

	/* 모바일메뉴박스 보이게 하는 클래스 */
	.menu_box.inactive { transform:translateX(0); } 

	/* 스크롤 클래스 */
	#header.scroll .logo { visibility:hidden; opacity: 0; }
	#header.scroll .open_btn { background: rgba(0,0,0,0.3); }
	:is(#header, #header.scroll) #h_menu .outer > li > a.on { border-color: #000; }
}



/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/






/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/



#index { 
	--index-padding:15px
}

#index .section { height: 100vh; padding: 0 var(--index-padding); overflow: hidden; }

/* section1 */
#index .section1 {
position: relative; 
font-size: min(5.71vw,40px);
}
#index .section1 .movieBox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; }
#index .section1 .movieBox:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }


#index .section1 .text {
display:grid; align-items:center; justify-content:center;
color: #fff; font-weight: bold; padding: 0 var(--index-padding);
text-align: center; transition-duration:0.5s !important; opacity: 0 !important;
}
#index .section1 .text > * { transform:translateY(10%); transition:0.6s; }
#index .section1 .text h2 { font-size: 2em; line-height: 1.4; padding-bottom: 0.1em; font-weight: bold; }
#index .section1 .text p { font-size: 1em; line-height: 1.4; } 


#index .section1 .text.swiper-slide-active { opacity: 1 !important; }
#index .section1 .text.swiper-slide-active > * { transform:translateY(0); }

@media (max-width:1024px) {
	#index .section1 .text p br { display: none; }
}
@media (max-width:768px) {
	#index .section1 { height: 30em !important; }
}

/* section2 */
#index .section2 { 
--s2-transition:0.6s;
display:grid; justify-content:center; align-items:center; position: relative; 
}
#index .section2 .img { 
position: absolute; z-index: 1; left: 50%; top: 50%; transform:translate(-50%,-50%); width: 100%; text-align: center; opacity: 1; transition:var(--s2-transition);
}
#index .section2 .text { 
position: absolute; right: 20px; bottom: 0; transform:translate(0,0); text-transform: uppercase; font-weight: 900; color: #eee; 
font-size: min(7vw,122px); opacity: 1; transition:var(--s2-transition);
}
@media (max-width:991px) {
	#index .section2 { height: auto !important; padding: 100px 0 0; }
	#index .section2 .img { position: static; transform:translate(0,0); padding: 0 var(--index-padding); }
}

/* section3 */
#index .section3 { 
--s3-transition:1s;
font-size: min(3.43vw,20px); 
}
#index .section3 .itemBox { display:grid; justify-content:center; align-content:center; gap:3.5em; color: #000; height: 100%; }
#index .section3 .itemBox :is(.itemBox1,.itemBox2,.itemBox3) { padding: 0 var(--index-padding); }
#index .section3 .itemBox1 { 
text-align: center; font-size: 2em; font-weight: bold; line-height: 1.4; transform:translateY(0); opacity: 1; transition:var(--s3-transition);
}
#index .section3 .itemBox2 { font-size: 2em; display:flex; justify-content:center; text-align: center; gap:3.25em; }
#index .section3 .itemBox2 > li { 
width: 6.75em; height: 6.75em; line-height: 6.75em; background: #f5f5f5; border-radius:50%; font-weight: bold;
opacity: 1; transform:scale(1); transition:var(--s3-transition);
}
#index .section3 .itemBox3 { display:grid; justify-content:center; gap:1em; }
#index .section3 .itemBox3 > li { position: relative; line-height: 1.6; padding-left: 1em; transform:translateY(0); opacity: 1; transition:var(--s3-transition); }
#index .section3 .itemBox3 > li:after { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.45em; height: 0.45em; background: #e92b3a; }

@media (max-width:1200px) {
	#index .section3 .itemBox { font-size: 0.7em; }
}
@media (max-width:991px) {
	#index .section3 { height: auto !important; padding:10em 0 5em; }
}
@media (max-width:768px) {
	#index .section3 .itemBox { font-size: 0.6em; }
	#index .section3 .itemBox1 br { display: none; }
	#index .section3 .itemBox2 { gap:1em; }
}
@media (max-width:580px) {
	#index .section3 .itemBox { font-size: 0.92em; }
	#index .section3 .itemBox1 { font-size: 1.3em; }
	#index .section3 .itemBox2 { font-size: 1.3em; }
}

/* section4 */
#index .section4 { position: relative; }
#index .section4 .bg { 
position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size:cover;
}
#index .section4 .bg:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 4; }
#index .section4 .bg1 { background-image:url(./img/index_section4_bg1.jpg); z-index: 3; }
#index .section4 .bg2 { background-image:url(./img/index_section4_bg2.jpg); z-index: 2; }
#index .section4 .bg3 { background-image:url(./img/index_section4_bg3.jpg); z-index: 1; }

#index .section4 .textBox { 
position: absolute; left: 13.02vw; top: 50%; transform:translateY(-50%); width: 100%; color: #fff; font-weight: bold;
display:grid; gap:30px; padding: 0 var(--index-padding); z-index: 5;
}
#index .section4 .textBox > li { display:flex; align-items:center;  }
#index .section4 .textBox > li .title { font-size: min(7.14vw,80px); font-weight: bold; opacity: 0.6; transition:0.4s; }
#index .section4 .textBox > li .sub { font-size: min(3.43vw,25px); line-height: 1.3; padding-left: 1.8em; opacity: 0; flex:1; transition:0.4s; }

/* on */
#index .section4 .textBox > li.on .title { opacity: 1; }
#index .section4 .textBox > li.on .sub { opacity: 1; }

@media (max-width:991px) {
	#index .section4 { height: auto !important; padding: 0; }
	#index .section4 .bg { display: none; }
	#index .section4 .textBox { left: 0; gap:0; position: relative; transform:translateY(0); z-index: 10; padding: 0; }
	#index .section4 .textBox > li { 
	flex-wrap:wrap; text-align: center; padding: 15em var(--index-padding); position: relative;
	background-repeat: no-repeat; background-position:center center; background-size:cover;
	}
	#index .section4 .textBox > li:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
	#index .section4 .textBox > li:nth-child(1) { background-image:url(./img/index_section4_bg_mob1.jpg); }
	#index .section4 .textBox > li:nth-child(2) { background-image:url(./img/index_section4_bg_mob2.jpg); }
	#index .section4 .textBox > li:nth-child(3) { background-image:url(./img/index_section4_bg_mob3.jpg); }
	#index .section4 .textBox > li .title { opacity: 0; width: 100%; padding-bottom: 0.3em; position: relative; z-index: 1; }
	#index .section4 .textBox > li .sub { 
	opacity: 0; flex:auto; width: 100%; padding: 0.2em 0; position: relative; z-index: 1; font-size: min(4vw,25px);
	}
	#index .section4 .textBox > li .sub br { display: none; }
}
/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { 
--footer-color1: #fff; font-size: 15px;
background: #313131;
}

footer > .contents_box { padding: 3.3333em 0; }
footer .contents { display:flex; flex-wrap:wrap; gap:2em; }
footer .item1 { flex:1; }
footer .item2 { flex:3; display:grid; align-content:space-between; }
footer .item2 > div { line-height: 1.7; color: var(--footer-color1); }
footer .item2 > div a { color: inherit;}
footer .item2 .text > span { position: relative; margin-right:1em; font-weight: inherit; }
footer .item2 .text > span:after { content:'|'; position:absolute; right:-1em; top:50%; transform:translateY(-50%); font-size: 0.8em; }
footer .item2 .text > span:last-child:after { display: none; }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; align-self:end; }





@media (max-width:991px) {
	footer .item1 { flex:auto; width: 100%; }
	footer .item2 { flex:auto; width: 100%; }
	footer .item2 .text > span { display: block; margin-right: 0; margin-bottom: 0.1em; }
	footer .item2 .text > span:after { display: none; }
}
@media (max-width:768px) {
	footer { font-size: 13px; border-color: #1b1b1b; }
	footer > .contents_box { padding: 0; }
	footer > .contents_box .containerV1 { padding: 0; }
	footer .f_logo { display: none; }
	footer .contents { gap:0; }

	footer .item2 > div { padding: 1em; background: #f9f9f9; font-size: 0.85em; }
	footer .item2 .text { display:grid; grid-template-columns:1fr 2fr; }
	footer .item2 .text span:nth-child(odd) { color: #757575; }
	footer .item2 .text span:nth-child(even) { color: #1b1b1b; }

	footer .item2 > .copy { background: #eee; color: #777; text-align: center; font-size: 0.8em; font-weight: bold; padding: 1em 0; }
	footer .item2 > .copy a { color: #777; font-weight: inherit; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/









/* 서브페이지 패딩 */
.sub_frame { padding:30px 0 50px; min-height: 80vh; }

/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}

/* 모달 */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }