@charset "utf-8";
/*---
font-family: 'NanumSquareNeoLight';
font-family: 'NanumSquareNeo';
font-family: 'NanumSquareNeoBold';
font-family: 'NanumSquareNeoExtraBold';
font-family: 'NanumSquareNeoHeavy';
---*/
/*-----------------------공통-----------------------*/
html {width:100%; -webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust:none; overflow-y:scroll; overflow-x:hidden; word-break:keep-all;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline; list-style:none; font-family: 'NanumSquareNeo'; font-size:15px; line-height:1.7; -webkit-text-size-adjust:none;}

html, body { height:100% !important; overflow: hidden;}

a {text-decoration:none;color:#000;-webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;outline:none;}
a:hover, a:focus {text-decoration:none !important;}

/*-----드래그----*/
::-moz-selection {
   background: #0f6c38;
   color: #fff;
}
::selection {
   background: #0f6c38;
   color: #fff;
}
/*-----드래그----*/

/*-----스크롤----*/
::-webkit-scrollbar { width:8px; height:4px;}
::-webkit-scrollbar-track { background:#fff;}
::-webkit-scrollbar-thumb { background:#0f6c38;}
/*-----스크롤----*/

/*-----공통----*/

h1 { font-family: 'NanumSquareNeoHeavy';}
h2 { font-family: 'NanumSquareNeoBold';}
h3 { font-family: 'NanumSquareNeoLight';}


.intro_box {
    height: 100vh;
    padding: 0 40px;
    min-height: 600px;
    background: url("/intro/bg_img.jpg") center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

.intro_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-size: cover;
    background-position: center;
    will-change: transform;
    animation: shrinkBackground 10s ease-in-out forwards;
}

.intro_center {
    position: relative;
	z-index:99;
    height: 100vh;
    min-height: 600px;
    background: rgba(0, 0, 0, 0.5);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 40px;
    opacity: 0; /* 처음에 보이지 않도록 설정 */
    animation: fadeIn 3s ease-in-out 0s forwards; /* 0초 후에 천천히 나타나게 설정 */
}

.intro_t { position:absolute; top:5%; width:100%; text-align:center;}
.intro_t img { max-width:360px; width:100%; height:auto; opacity:0.5;}
.intro_t .intro_title { font-size:22px; font-family: 'NanumSquareNeoLight'; color:#fff; margin-top:40px; padding:0 40px;}
.intro_t .intro_title h1 { font-size:45px; line-height:1.3; margin-bottom:10px;}

.intro_m { position:absolute; top:45%; text-align:center; width:100%;}

.intro_lang {}
.intro_lang li { display:inline-block; vertical-align:top; margin:0 15px;}
.intro_lang li img { width:60px;}
.intro_lang li p { font-size:13px; color:#fff;}

.intro_b { opacity:0.65; margin-top:40px;}
.intro_b li { display:inline-block; vertical-align:top; margin:0 5px; width:50px; height:50px; line-height:70px; border:#fff solid 2px; border-radius:50%;}
.intro_b li img { width:30px;}

.intro_copy { position:absolute; bottom:20px; text-align:center; width:100%; font-size:12px; color:#fff; opacity:0.65;}

#fireflies { position:absolute; z-index:9; width: 100%; height: 100%; top:0; left:0}


@keyframes shrinkBackground {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



@media screen and (max-height:767px){
	.intro_t img { max-width:250px;}
	.intro_t .intro_title { font-size:16px; padding:0 20px;}
	.intro_t .intro_title h1 { font-size:25px;}
}


@media screen and (max-width:767px){
	.intro_t img { max-width:250px;}
	.intro_t .intro_title { font-size:16px; padding:0 20px;}
	.intro_t .intro_title h1 { font-size:25px;}

	@keyframes shrinkBackground {
		0% {
			transform: scale(1);
		}
	}
}