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

/* 이사만루 폰트 */
/*
@font-face {
    font-family: 'GongGothicBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.clear:after { 
    content:""; 
    display:block; 
    clear:both;
}
* { margin:0; padding:0; outline:none; font-weight: normal; font-style: normal; }
body {
line-height:1; font-size:14px; color:#000; font-family: 'GongGothicLight'; word-wrap: break-word; word-break: keep-all;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'GongGothicLight'; line-height:1;  }
ul, ol { list-style:none; margin:0; }
a { outline:0; text-decoration:none; }
a:focus { outline:none; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }

/*
mainColor
#

*/


/* html 폰트 사이즈 */
/* width */
@media (max-width:1200px) {
	html { font-size: 8.5px; }
}
@media (max-width:991px) {
	html { font-size: 8px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6.5px; }
}
/* height */
@media (max-height:800px) {
	html { font-size: 7.5px; }
}
@media (max-height:600px) {
	html { font-size: 6.5px; }
}



/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
/* 해드 애니메이션 */
@keyframes outerHover {
	50%{ transform: scale(1.2); }
}

#header { position: fixed; left: 0; top: 0; width: 100%; padding-top: 4.3rem; z-index: 1000; }
#header .innerWrap { 
-ms-display:flex; -ms-justify-content:space-between;
display:flex; justify-content:space-between;
}


#header .innerWrap .siteMapBox { position: relative; margin-left: 5rem; height: 3rem; }
/*	메뉴 버튼 */
#header .innerWrap .siteMapBox .siteMapBtn { 
position: absolute; left: 0; top: 0; background: none; border: none; transition:0.3s; z-index: 20; height: 100%;
}
#header .innerWrap .siteMapBox .siteMapBtn span { display: block; width: 3.5rem; height: 3px; background: #fff; position: relative; transition:0.3s; }
#header .innerWrap .siteMapBox .siteMapBtn span:before,
#header .innerWrap .siteMapBox .siteMapBtn span:after {
content: ''; position: absolute; left: 0; width: 100%; height: inherit; background: #fff; transition:0.3s;
}
#header .innerWrap .siteMapBox .siteMapBtn span:before { top: -1.2rem; }
#header .innerWrap .siteMapBox .siteMapBtn span:after { top: 1.2rem; }

/* 메뉴버튼 후버 */
#header .innerWrap .siteMapBox .siteMapBtn:hover { transform:scale(1.2); }

/* 메뉴버튼 클릭효과 */
#header .innerWrap .siteMapBox .siteMapBtn.on { transform:scale(0.9); }
#header .innerWrap .siteMapBox .siteMapBtn.on:hover { transform:scale(0.9); }
#header .innerWrap .siteMapBox .siteMapBtn.on span { background: none; }
#header .innerWrap .siteMapBox .siteMapBtn.on span:before { top: 0; transform:rotate(45deg); }
#header .innerWrap .siteMapBox .siteMapBtn.on span:after { top: 0; transform:rotate(-45deg); }
/*	//메뉴 버튼 */


/* 메뉴 */
#header .innerWrap .siteMapBox .siteMapOuter { 
position: absolute; left: 0; top: 50%; transform:translateY(-50%); transition:0.3s; visibility:hidden; opacity: 0;
display:flex; -ms-display:flex;
}
#header .innerWrap .siteMapBox .siteMapOuter > li:nth-child(1) { transition:linear 0.3s; }
#header .innerWrap .siteMapBox .siteMapOuter > li:nth-child(2) { transition:linear 0.4s; }
#header .innerWrap .siteMapBox .siteMapOuter > li:last-child { margin-right: 0; }
#header .innerWrap .siteMapBox .siteMapOuter > li > a { 
-ms-display: flex; -ms-justify-content:center; -ms-align-items:center;
display: flex; justify-content:center; align-items:center;
color: #fff; font-size: 1.8rem; text-align: center; line-height: 1.3; transition:0.4s;
}
/* 메뉴 후버 */
#header .innerWrap .siteMapBox .siteMapOuter > li > a:hover {
animation-name:outerHover; animation-duration:0.3s; animation-timing-function:linear; animation-iteration-count:1;
transition-delay:0.2s;
}
/* 해당 페이지 이동 했을 때 */
#header .innerWrap .siteMapBox .siteMapOuter > li > a.on { transform:scale(1.1); }

/* 메뉴버튼 클릭했을 때 메뉴효과 */
#header .innerWrap .siteMapBox .siteMapBtn.on + .siteMapOuter { left: 6.5rem; visibility:visible; opacity: 1; }
#header .innerWrap .siteMapBox .siteMapBtn.on + .siteMapOuter > li { margin-right: 3.5rem; }
/* //메뉴 */

#header .innerWrap .img { margin-right: 3.5rem; max-width: 19.2rem; }

@media (max-width:768px) {
	#header .innerWrap .img { transform:translateY(-3px); }

	#header .innerWrap .siteMapBox .siteMapOuter { top: 0; transform:translateY(0); flex-wrap:wrap; }
	#header .innerWrap .siteMapBox .siteMapOuter > li { width: 100%; }
	#header .innerWrap .siteMapBox .siteMapOuter > li > a { font-size: 12px; }

	#header .innerWrap .siteMapBox .siteMapBtn.on + .siteMapOuter { left: 0; top: 7rem; }
	#header .innerWrap .siteMapBox .siteMapBtn.on + .siteMapOuter > li { margin-right: 0; margin-bottom: 3.5rem; }
}

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

/* 애니메이션 */
@keyframes bgAniV1 {
	0% { background: rgba(0,0,0,0.4); visibility:visible; }
	100% { background: rgba(0,0,0,0); visibility:hidden; }
}
@keyframes bgAniV2 {
	0% { transform:scale(1.1); }
	100% { transform:scale(1.0);}
}
@keyframes bgAniV3 {
	0% { transform:scale(0.9); }
	100% { transform:scale(1.0);}
}
@keyframes titleimgAniV1 {
	0% { transform:scale(1.3); }
	100% { transform:scale(1.0);}
}
@keyframes imgTopAniV1 {
	0% { transform:translateX(-50%) translateY(0); }
	50% { transform:translateX(-50%) translateY(-1rem);}
	100% { transform:translateX(-50%) translateY(0);}
}
@keyframes imgV1AniV1 {
	0%{ transform:rotateY(0deg); }
	100%{ transform:rotateY(360deg); }
}
@keyframes paginationAniV1 {
	0%{ transform:scale(0.9); }
	50%{ transform:scale(1.4); }
	100%{ transform:scale(0.9); }
}
@keyframes itemListAniV1 {
	0%{ transform:scale(1.0); }
	50%{ transform:scale(1.2); }
	100%{ transform:scale(1.0); }
}
@keyframes itemListAniV2 {
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}





/* 공통 */
.frameV1 { height: 100vh; overflow: hidden; }

.frameV1 .frameInner {
background-repeat: no-repeat; background-position: center 89%; background-size:cover; height: 100vh; position: relative; 
animation:bgAniV2 0.8s ease-in-out forwards; 
}
.frameV1 .frameInner:before { 
content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000;
animation:bgAniV1 1s ease-in-out forwards; 
}
.frameV1 .innerWrap { 
-ms-display:flex; -ms-justify-content:center; -ms-flex-wrap:wrap;
display:flex; justify-content:center; flex-wrap:wrap;
padding-top: 19rem; height: 100%;
animation:bgAniV3 0.8s ease-in-out forwards;
}
.frameV1 .innerWrap > * { width: 100%; }



/* 하단 컨텐츠 */
.frameV1 .innerWrap .itemBox { 
-ms-align-self:flex-end; align-self:flex-end; 
padding-bottom: 8rem;
}

/* 링크이동 화살표 및 문구 */
.frameV1 .innerWrap .itemBox .controllerBox > li { position: absolute; }
.frameV1 .innerWrap .itemBox .controllerBox > li.prev { left: 0; top: 0; }
.frameV1 .innerWrap .itemBox .controllerBox > li.text { 
left: 50%; top: 0; transform:translateX(-50%); width: calc( 100% - 32px ); margin: 0 auto; text-align: center; color: #fff;
font-size: 17px; text-shadow:0 0 5px rgba(0,0,0,0.6);
}
.frameV1 .innerWrap .itemBox .controllerBox > li.text > span { display: block; margin-bottom: 5px; }
.frameV1 .innerWrap .itemBox .controllerBox > li.text > span:last-child { margin-bottom: 0; }
.frameV1 .innerWrap .itemBox .controllerBox > li.next { right: 0; top: 0; }

/* 현재 위치 표시하는 도트네비 */
.frameV1 .innerWrap .itemBox .indexPagination { 
-ms-display:flex; -ms-justify-content:center;
display:flex; justify-content:center;
margin-bottom: 4.5rem;
}
.frameV1 .innerWrap .itemBox .indexPagination > span { 
display: block; width: 10px; height: 10px; background: #b5b5b5; border: 1px solid #fff; margin-right: 8px; border-radius:50%;
}
.frameV1 .innerWrap .itemBox .indexPagination > span:last-child { margin-right: 0; }
.frameV1 .innerWrap .itemBox .indexPagination > span.active { background: #fff; animation:paginationAniV1 0.8s linear infinite; }

/* vr링크 이동 */
.frameV1 .innerWrap .itemBox .more { width: 128px; margin: 0 auto; text-align: center; }
.frameV1 .innerWrap .itemBox .more > a { 
display: block; height: 23px; line-height: 21px; border: 1px solid #fff; border-radius:2.3rem; color: #fff; font-size: 13px; background: rgba(0,0,0,0.2);
transition:0.4s;
}
.frameV1 .innerWrap .itemBox .more > a span { max-width: 3.5rem; display: inline-block; }
.frameV1 .innerWrap .itemBox .more > a:hover { background: rgba(0,0,0,0.4); }

/* 반응형 width */
@media (max-width:1200px) {
	.frameV1 .innerWrap .itemBox .controllerBox > li.text { font-size: 16px; }
}
@media (max-width:768px) {
	.frameV1 .innerWrap > * { padding: 0 15px; }

	.frameV1 .innerWrap .itemBox .controllerBox > li.text { font-size: 14px; }
}
@media (max-width:580px) {
	.frameV1 .frameInner { animation:none; }
	.frameV1 .frameInner:before { animation:none; display: none; }

	.frameV1 .innerWrap { padding-top: 80px; animation:none; }
	
	.frameV1 .innerWrap .itemBox .controllerBox > li.text { font-size: 12px !important; }	
}


/* 아래로 이동 애니메이션 */
@keyframes scrollDownAniV1 {
    0% {
        transform:translate(0, 5rem) rotate(-135deg);
    }
    40% {
        transform:translate(0, 5rem) rotate(-135deg);
    }
    60% {
        transform:translate(0, 4rem) rotate(-135deg);
    }
    100% {
        transform:translate(0, 12rem) rotate(-135deg);
    }
}

@keyframes scrollDownAniV2 {
    0% {
        transform:translate(0, -1rem) rotate(-135deg);
    }
    20% {
        transform:translate(0, 4rem) rotate(-135deg);
    }
    40% {
        transform:translate(0, 3rem) rotate(-135deg);
    }
    100% {
        transform:translate(0, 11rem) rotate(-135deg);
    }    
}



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




.index .frameInner {
background-image: url(img/indexBg.jpg);
}


/* 타이틀 이미지 및 문구 */
.index .innerWrap .titleBox .img { max-width: 32.7rem; margin: 0 auto 15px; animation:titleimgAniV1 1.5s linear forwards; }
.index .innerWrap .titleBox .textBox { text-align: center; font-size: 17px; color: #fff; line-height: 1.5; }
.index .innerWrap .titleBox .textBox .indexChar { text-shadow:0 0 5px rgba(0,0,0,0.6); }
.index .innerWrap .titleBox .textBox .indexChar:nth-child(17),
.index .innerWrap .titleBox .textBox .indexChar:nth-child(36),
.index .innerWrap .titleBox .textBox .indexChar:nth-child(51) { display: block; }

/* 하단 컨텐츠 */
.index .innerWrap .itemBox .img { max-width: 34.2rem; margin: 0 auto 20px; }
.index .innerWrap .itemBox .img img { animation:imgV1AniV1 1s forwards; animation-delay:0.5s; }

/* 링크이동 화살표 및 문구 */
.index .innerWrap .itemBox .controllerBox { width: 54.7rem; height: 3.6rem; margin: 0 auto 3.7rem; position: relative; }
@media (max-width:1200px) {
	.index .innerWrap .titleBox .textBox { font-size: 16px; }
	.index .innerWrap .itemBox .controllerBox { height: 50px; }
}
@media (max-width:768px) {
	.index .innerWrap .titleBox .textBox { font-size: 14px; }

	.index .innerWrap .itemBox .controllerBox { height: 50px; }
}
@media (max-width:580px) {
	.index .innerWrap .titleBox .titleBox .textBox { font-size: 12px; }

	/*.index .innerWrap .titleBox .textBox .indexChar:nth-child(25) { display: block; }*/

	.index .innerWrap .titleBox .img { max-width: 200px; }

	.index .innerWrap .itemBox .img { max-width: 250px; }
	.index .innerWrap .itemBox .controllerBox { max-width: 310px; }
}





/* 반응형 height */
@media (max-height:800px) {
	.index .innerWrap .titleBox .textBox { font-size: 14px; }

	.index .innerWrap .itemBox .controllerBox > li.text { font-size: 14px; }
}
@media (max-height:600px) {
	.index .innerWrap { padding-top: 80px; }

	.index .innerWrap .titleBox .img { max-width: 200px; }
	.index .innerWrap .titleBox .textBox { font-size: 12px; }
	/*.index .innerWrap .titleBox .textBox .indexChar:nth-child(25) { display: block; }*/

	.index .innerWrap .itemBox .img { max-width: 250px; }
	.index .innerWrap .itemBox .controllerBox { max-width: 310px; }
	.index .innerWrap .itemBox .controllerBox > li.text { font-size: 12px; }
}

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/

/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/






/* 모달창 */
.modal-backdrop.in { opacity: 0; }
.page-wrap .modal.fade .modal-dialog { position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); margin: 0; width: auto; }
.page-wrap button.close { position: absolute; right: 2.5rem; top: 2.5rem; float: none; width: 1.8rem; z-index: 1000; opacity: 1; }
.page-wrap .modal-content { border: none; border-radius:12px; background: none; }
.page-wrap .modal-body { padding: 0; }
@media (max-width:580px) {
	.page-wrap .modal.fade .modal-dialog { min-width: 80vw;  }
}


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