@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* 
    font-family: 'SCoreDream';
    font-family: 'Montserrat', sans-serif;
 */



/* ========== reset ============== */

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'SCoreDream';
    -webkit-text-size-adjust: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: none;} 
address{font-style: normal;}
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, a, select{cursor: pointer; outline: none;} 
input{ outline: none;}

label.away{position: absolute;left: -999em;} 



/* ==========================================================================
#FONT
========================================================================== */
.ko{
    font-family: 'SCoreDream';
    font-weight: normal;
    font-style: normal; 
}
.en{
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
    font-style: normal; 
}

.lig{ font-weight: 300;}
.re{ font-weight: 400;}
.med{ font-weight: 500;}
.smbold{font-weight: 600;}
.bold{ font-weight: 700;}

.upp{text-transform: uppercase;}
.cap{text-transform: capitalize;}
.t-shadow{text-shadow: 2px 0 4px rgba(0,0,0,.3);}
.b-shadow{box-shadow: 2px 0 4px rgba(0,0,0,.3);}

/* ==========================================================================
#COLOR
========================================================================== */
.cf{color: #fff; }
.color1{ color: #7eacd7;}
.c50{color: #505050; }
.cd{color: #ddd;  }
.c2{ color: #222;}
.c8{ color: #888;}
.c7{ color: #777;}
.c9{ color: #999;}



/* ==========================================================================
#SCROLLBAR
========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #3677b3; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }
    
    
/* ==========================================================================
#FLOAT
========================================================================== */
.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}



/* ==========================================================================
#COMMON
========================================================================== */
body{ font-family: 'Pretendard'; font-weight: 400; font-size: 16px; overflow-x: hidden; }
.wrap1400{ width: 100%; max-width: 1420px; padding: 0 10px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.wrap1720{ width: 100%; max-width: 1740px; padding: 0 10px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.bg-img{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.v-middle{ width: 100%; height: 100%; display: table-cell; vertical-align: middle;}
.img{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;  position: absolute; top: 0; left: 0; transition: .5s;}
.none-mo{ display: inline-block!important;}
.none-pc{ display: none!important;}
.flex-wrap{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.bgi{ background-size: cover; background-repeat: no-repeat; background-position: center;}

.col-2{ width: 50%;}


/* ==========================================================================
#FULLPAGE-NAV
========================================================================== */
#fp-nav.left{ left: 40px; top: unset; top: 50%;}
#fp-nav ul li, .fp-slidesNav ul li{ width: 10px; height: 10px; margin: 14px 0;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 10px; height: 10px; border-radius:5px; background:transparent; border: 1px solid #fff; text-align: center; transition: .5s; left: 0; top: 0; margin: 0;}
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span{ width: 30px; height: 10px; border-radius: 5px; background: #fff; margin: 0; }
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{ width: 12px; height: 12px; margin: 0; }



/* scroll */
.scrolldown{ display: block; width: 120px; height: 60px; left: 0; right: 0; margin: 0 auto; text-align: center;}
.scrolldown p{ font-size: 12px;}


.fullimg-tit .scroll-ani div, #section1 .scroll-ani div{background-color: #222;}


#sub-top{ width: 100%; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#sub-top h3{ font-size: 40px; padding-bottom: 15px;}
#sub-top h4{ font-size: 20px; padding-bottom: 30px;}
#sub-top p.deco{ font-size: 12px; opacity: .3; line-height: 24px; letter-spacing: 0.04em; text-align: center;}

#con-btn-wrap{ display: flex; justify-content: center; align-items: center; margin-bottom: 100px;}
#con-btn-wrap a{ display: block; width: 180px; height: 50px; line-height: 48px; text-align: center; margin: 0 10px; border: 1px solid #ddd; font-size: 14px; color: #999; transition: .3s;}
#con-btn-wrap a:hover{ background-color: #3677b3; border: 1px solid #3677b3; color: #fff;}
#con-btn-wrap a.active{ background-color: #3677b3; border: 1px solid #3677b3; color: #fff;}

/* =================== 1023px =================== */
@media (max-width: 1023px) {
    body{ font-family: 'Pretendard'; font-size: 12px;  color: #555; overflow-x: hidden; position: relative; }
    body > section{ width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}
    .none-mo{ display: none!important;}
    .none-pc{ display: inline-block!important;}
    .wrap1400{ width: 100%; padding: 0 15px; position: relative; margin: 0 auto; box-sizing: border-box; }
    .mo-100vh{ height: 100vh;}

    #full-section{ width:100%; height:0; padding-top: 56.25%; position:relative; color:#fff; font-size:24px; background-size: cover; background-repeat: no-repeat; background-position: center; margin-top: 40px;}
    #full-section .text-wrap{ position: absolute; top: 43%; z-index: 10; width: 300px; left: 0; right: 0; margin: 0 auto; text-align: center;}
    #full-section .text-wrap h3{ font-size: 28px; padding-bottom: 10px; line-height: 24px;}
    #full-section .text-wrap p{ font-size: 11px;}

    
    .fullSlogan { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: unset; top: calc(50% - 50px); text-align: left; z-index: 10;  width: 300px; text-align: center; }
    .fullSlogan h2{ font-size: 28px; line-height:28px;  padding-bottom: 0; position: relative; width: auto; }
    .fullSlogan h3{ font-size: 11px; line-height: 20px;}


    #fp-nav.left{ display: none;}


    .content-wrap .tit h3{ font-size: 30px; padding-bottom: 10px;}
    .content-wrap .tit .tit-deco{ width: 94px; height: 7px; margin-bottom: 25px;}

    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}


    #sub-top{ margin-top: 50px; width: 100%; max-height: 600px; min-height: 300px; height: 80.00vw;}
    #sub-top h3{ font-size: 30px; padding-bottom: 15px;}
    #sub-top h4{ font-size: 18px; padding-bottom: 25px;}
    #sub-top p.deco{ font-size: 10px; line-height: 20px;}

    #con-btn-wrap{ margin-bottom: 60px;}
    #con-btn-wrap a{ width: 109px; height: 30px; line-height: 28px;margin: 0 5px; font-size: 14px;}

}