@font-face {
    font-family: 'The_Castle_Elizah';
    src: url(../font/The_Castle_Elizah.woff);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-4Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-5Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-6Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
    #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: 'S-CoreDream-4Regular';
    -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
   ========================================================================== */
/* 
    font-family: 'The_Castle_Elizah';
    font-family: 'S-CoreDream-3Light';
    font-family: 'S-CoreDream-4Regular';
    font-family: 'S-CoreDream-5Medium';
    font-family: 'S-CoreDream-6Bold';
    
*/
.koL{
    font-family: 'S-CoreDream-3Light';
    font-style: normal;
}
.koR{
    font-family: 'S-CoreDream-4Regular';
    font-style: normal;
}
.koM{
    font-family: 'S-CoreDream-5Medium';
    font-style: normal;
}
.koB{
    font-family: 'S-CoreDream-6Bold';
    font-style: normal;
}
.en{
    font-family: 'The_Castle_Elizah';
}

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

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


/* ==========================================================================
    #COLOR
========================================================================== */
.cf{color: #fff; }
.color_1{color: #133e6e;}
.color_2{color:#042951}
.c2{color: #222; }
.c4{color: #444; }
.c7{ color: #777;}
.cd{color: #ddd; }
.ca{color: #aaa; }
.cb{color: #bbb; }


::selection{ background-color: #042951; color: #fff;}


/* ==========================================================================
    #COL
    ========================================================================== */
.col-1{ width: 100%;}
.col-2{ width: 50%;}
.col-3{ width: 33.33%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}
.col-7{ width: calc(100%/7);}


/* ==========================================================================
    #BTN
    ========================================================================== */
#btn_01{ display: inline-block; width: 180px; height: 50px; line-height: 48px; text-align: center; font-size: 14px;}
#btn_02{ display: inline-block; width: 360px; height: 90px; line-height: 88px; text-align: center; font-size: 20px; color: #fff;}
#btn_01 p{ position: relative; z-index: 10; line-height: 48px!important; font-size: 14px!important; padding-bottom: 0!important;}
#btn_02 p{ position: relative; z-index: 10; line-height: 88px!important; font-size: 20px!important; padding-bottom: 0!important;}


.btn-hover{ position: relative;}
.btn-hover:after{ content: ''; position: absolute; width: 0; height: 100%; top: 0; left: 0; transition: .5s; background-color: #133e6e; z-index: 1; }
.btn-hover:hover:after{ width: 100%;}

.btn-hover-2{ position: relative;}
.btn-hover-2:after{ content: ''; position: absolute; width: 0; height: 100%; top: 0; left: 0; transition: .5s; background-color: #042951; z-index: 1; }
.btn-hover-2:hover:after{ width: 100%;}

.btn-hover-3{ position: relative;}
.btn-hover-3:after{ content: ''; position: absolute; width: 0; height: 100%; top: 0; left: 0; transition: .5s; background-color: #fff; z-index: 1; }
.btn-hover-3:hover:after{ width: 100%;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
    #btn_02{ display: inline-block; width: 21.69vw; height: 5.42vw; line-height: 5.30vw; text-align: center; }
    #btn_02 p{ line-height: 5.30vw!important; font-size: 16px!important;}
}

/* ==========================================================================
    #SCROLLBAR
    ========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #133e6e; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }


/* ==========================================================================
    #FLOAT
    ========================================================================== */
.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}




body{  font-family: 'S-CoreDream-4Regular'; font-weight: 400; font-size: 16px; overflow-x: hidden; }
.wrap1620{ width: 100%; max-width: 1660px; padding: 0 20px; 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;}


/* swiper */
.swiper-button-prev, .swiper-button-next {outline: none !important; background-image: unset!important; width: 71px; height: 71px; border-radius: 50%; line-height: 71px; transition: .3s;}
.swiper-button-prev{ left: 30px;}
.swiper-button-next{ right: 30px;}
.swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover,
.swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{  transition: .3s; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-progressbar{ background-color: #dfdfdf; position: relative; height: 4px; border-radius: 2px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #777;}

.swiper-pagination-bullet{ position: relative; width: 12px; height: 12px; background: transparent; border: 1px solid #fff; opacity: 1; margin: 6px!important; transition: .3s; box-shadow: 2px 0 4px rgba(0,0,0,.2); }
.swiper-pagination-bullet-active{ background: rgba(255,255,255,1); opacity: 1; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 30px;}

/* ==========================================================================
    #FULL-SWIPER
========================================================================== */
.full-swiper{ height: 100%; position: relative; overflow: hidden;}
.full-swiper .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center;}
.full-btn{position: absolute; top: calc(50% - 25px); text-align: center;  }
.full-text{ opacity: 1; transition: .3s; pointer-events: none;}
.full-text.hide{ opacity: 0;}

/* ==========================================================================
    #ALL-SWIPER
========================================================================== */
.all-swiper{ width: 100%; overflow: hidden; position: relative;}
.all-btn{position: relative; text-align: center; width: 71px; height: 8px; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: unset!important; }
.all-btn-wrap{ position: absolute; bottom: 100px; width: 180px; height: 30px; display: flex; justify-content: space-between; align-items: center; left: 0; right: 0; margin: 0 auto;}
.all-next, .all-prev{ left: unset; right: unset;}

.all-next{ background-image: url(../img/common/next.png)!important;}
.all-prev{ background-image: url(../img/common/prev.png)!important;}
.all-next:hover{ background-image: url(../img/common/next-h.png)!important;}
.all-prev:hover{ background-image: url(../img/common/prev-h.png)!important;}

/* ==========================================================================
    #ALL-FULL-SWIPER
========================================================================== */
.all-full-swiper{ height: 100%; position: relative; overflow: hidden;}
.all-full-swiper .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%;}
.all-full-btn{position: absolute; top: calc(50% - 25px); text-align: center;  }
.all-full-text{ opacity: 1; transition: .3s; pointer-events: none;}
.all-full-text.hide{ opacity: 0;}

/* ==========================================================================
    #SUB-TOP
    ========================================================================== */
#sub-top{ position: relative; width: 100%; height: 500px; background-size: cover; background-repeat: no-repeat; background-position: center; }
#sub-top .text-wrap{ position: absolute; width: 100%; text-align: center; top: calc(50% - 70px); z-index: 10;}
#sub-top h3{ font-size: 70px; padding-bottom: 40px;}
#sub-top p{ font-size: 12px; line-height: 28px; letter-spacing: 0.04em;}


/* ==========================================================================
    #COMM-TAB
    ========================================================================== */
#comm-tab{ position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: 70px; }
#comm-tab a{ width: 50%; height: 75px; text-align: center; line-height: 75px; display: inline-block; font-size: 16px; transition: .3s; border-bottom: 1px solid #ddd; color: #999; }
#comm-tab a:hover{ border-bottom: 1px solid #133e6e; color: #133e6e;} 
#comm-tab a.active{ border-bottom: 1px solid #133e6e; color: #133e6e;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    
    /* ==========================================================================
    **MOBILE**#COL
   ========================================================================== */
    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}



    /* ==========================================================================
    **MOBILE**#BTN
    ========================================================================== */
    #btn_01{ height: 45px; line-height: 43px; font-size: 12px;}
    #btn_02{ height: 60px; line-height: 60px; font-size: 16px;}
    #btn_01 p{ line-height: 43px!important; font-size: 12px!important;}
    #btn_02 p{ line-height: 60px!important; font-size: 16px!important;}

    body{ font-family: 'S-CoreDream-4Regular'; overflow-x: hidden; position: relative;  }
    body > section{ width: 100%; min-width: unset; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}
    .none-mo{ display: none!important;}
    .none-pc{ display: inline-block!important;}
    .wrap1620{ width: 100%; padding: 0 15px; position: relative; margin: 0 auto; box-sizing: border-box; }



    /* swiper */
    .swiper-button-prev, .swiper-button-next { width: 23px; height: 23px; line-height: 23px; font-size: 12px; }
    .swiper-button-prev{ left: 15px;}
    .swiper-button-next{ right: 15px;}

    .swiper-pagination-bullet{width: 8px; height: 8px; margin: 0 3px!important; }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 15px;}

   /* ==========================================================================
    #FULL-SWIPER
    ========================================================================== */
    .full-swiper{ height: 100%; position: relative; overflow: hidden;}
    .full-swiper .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center;}
    .full-btn{ display: none; }
    .full-text{ display: none;}


    /* ==========================================================================
    #ALL-SWIPER
    ========================================================================== */
    .all-btn{width: 65px; height: 7px; background-size: contain;  }
    .all-btn-wrap{ position: absolute; bottom: 60px; width: 150px; height: 10px;}
    .all-swiper .swiper-button-prev, .all-swiper .swiper-button-next{ left: unset; right: unset;}

    /* ==========================================================================
    #ALL-FULL-SWIPER
    ========================================================================== */
    .all-full-swiper{ height: 100%; position: relative; overflow: hidden;}
    .all-full-swiper .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center;}
    .all-full-btn{ display: none; }
    .all-full-text{ display: none;}


    /* ==========================================================================
    #SUB-TOP
    ========================================================================== */
    #sub-top{ margin-top: 50px; height: 40.00vw; min-height: 150px; }
    #sub-top .text-wrap{ top: calc(50% - 4.53vw); }
    #sub-top h3{ font-size: 35px; padding-bottom: 0;}

    /* ==========================================================================
    #COMM-TAB
    ========================================================================== */
    #comm-tab{ position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: 35px; }
    #comm-tab a{ height: 40px; line-height: 40px; font-size: 14px; }

}