@charset "utf-8";

/* subLayout */
/*html { overflow-x:hidden; }*/
@font-face {
    font-family: 'GyeonggiTitleM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiTitleM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#contents {position:relative; opacity:0; filter: alpha(opacity=0;); overflow:hidden; z-index:5;}
#contents:after, #contents_layer:after {content: "";display:block; clear:both;}

.topTypo {position:absolute; width:76%; left:50%; top:50%; text-align:center; color:#fff; transform: translate(-50%,-50%) scale(0.85); -ms-transform:translate(-50%,-50%) scale(0.85); -webkit-transform:translate(-50%,-50%) scale(0.85); opacity:0; z-index:5; }
.topTypo .topTypo01 {font-family: 'Roboto', sans-serif; font-size:3.8em; line-height:1.6em; letter-spacing:0.15em; padding-left:0.15em; text-transform:uppercase; font-weight:300;  -webkit-text-shadow: 0 0 5px rgba(0, 0, 0, 0.45); -moz-text-shadow: 0 0 5px rgba(0, 0, 0, 0.45); text-shadow:0 0 5px rgba(0, 0, 0, 0.45); }
.topTypo .topTypo02 { font-size:1.25em; line-height:1.6em;  -webkit-text-shadow: 0 0 3px rgba(0, 0, 0, 0.45); -moz-text-shadow: 0 0 3px rgba(0, 0, 0, 0.45); text-shadow:0 0 3px rgba(0, 0, 0, 0.45); }
.active .topTypo {transform: translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%) scale(1); -webkit-transform:translate(-50%,-50%) scale(1); -webkit-transition: opacity 2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: opacity 2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1); opacity:1;}

.subNav { position:fixed; width:100%; right:0; bottom:-100px; background:rgba(255, 255, 255, 1); text-align:right; padding:1.5em 1em 1.2em 10%; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow:0 0 5px rgba(0, 0, 0, 0.15); z-index:99;} 
.subNav ul { padding-left:17%; right:20px; top:20px;}
.subNav ul:after { content:"";display:block;clear:both;}
.subNav li { display:inline-block; padding:0 1.1em; line-height:1em;border-left:1px solid #000; margin-bottom:0.5em;  }
.subNav li:first-child { border-left:none;}
.subNav ul li.none1024 { display:block; padding:0;}
.subNav ul li.subNav_0 { width:100%; padding:0;}
.subNav li a { position:relative; display:inline-block; font-size:1.05em; line-height:0.9em; color:#000; }
.subNav li a::after {content:"";position:absolute; width:0; height:1px; background:#000; left:0; bottom:-5px; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease;}
.subNav li.this a::after { width:100%; }
@media  (min-width: 1025px){.subNav li a:hover::after { width:100%; } }
.subNav li.this a { font-weight:700;}

.active.subNav { opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease 0.5s;}

.subCon { position:relative; z-index:3;}
.subCon:after {content:"";display:block;clear:both;}
.img00 {vertical-align: top; max-width: 100%; margin: 0 auto;}
/* subTop 중복부분 */
.subTop01 { position:relative; /*width:60%; margin-left:50%;*/ width: 50%;}
.special .subTop01 { width:50%;}
.subTop02 { position:relative; /*width:70%;*/ width: 100%;}

.subTop02 h1 {font-family: 'GyeonggiTitleM'; font-weight: lighter;}
.pageTitle {position:absolute; display:inline-block; max-height:90%; top:50%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); padding:0.7em 0 0.3em; background:#fff; font-family: 'Roboto', sans-serif; font-size:2.8em; line-height:1.9em; letter-spacing:0.4em; z-index:3; }
.special .pageTitle { font-size: 2.4em; letter-spacing: 0.3em; text-align: center;}
.pageTitle { height:90%;}
.special06 .pageTitle { height:70%;}
@media  (max-width: 1620px){ .pageTitle{font-size:2.4vw; letter-spacing:0.3em;} 
.special .pageTitle{font-size:2.2vw; letter-spacing:0.3em; line-height:2.4em;} }
.pageTitle01 { left:30px; margin-left:-2em; }
.pageTitle02 { left:100%; margin-left:2em;}
.active.pageTitle01, .active.pageTitle02 { margin-left:0em; }
/*.pageTitle01, .pageTitle02 { margin-left:-0.8em; }*/

.textBox_01 { position:absolute; /*width:40%;*/ width: 50%; height: 100%; /*left:0;*/ right:0; top: 0; padding: 10% 0 0 5%; box-sizing: border-box; background: url('/html/images/epilogue/img01_01.jpg') no-repeat center center; background-size: cover; /* top:50%; transform: translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); text-align:center;*/}
/* .sp01_01 .textBox_01 { width:50%;} */
.textBox_02 { position:relative; text-align:center; padding:20% 0;}
.textBox_03 { position:relative; width:80%; padding-left:10%;}
.land01_01 .textBox_02 { padding:15% 0;}
.con_text01 { display:inline-block; text-align:left; padding-left:10%;}
.active.con_text01  { padding-left:0;}
.con_text01 dt { font-size:2.2em; line-height:1.8em; font-weight:800; margin-bottom:1.5em; letter-spacing: 3px; font-family: 'GyeonggiTitleM';}
.con_text01 dd { /*font-size:1.2em; line-height:1.7em;*/ font-size:1.4em; line-height:2.4em;}
.con_text01 dd p { margin-bottom:1.5em;}
.con_text01 dd p:last-child { margin-bottom:0;}
.con_text01 dd .mb { position: relative; z-index: 5; margin-bottom:3em;}

.con_text02 {}
.con_text02 dt {position:absolute; display:inline-block; left:60px; bottom:0; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding:0.7em 0 0.3em; background:#fff; font-family: 'Roboto', sans-serif; font-size:2.8em; line-height:1.9em; letter-spacing:0.4em; }

.con_text03 { font-size:1.2em; line-height:1.8em; }
@media  (max-width: 1620px){ .con_text02 dt{font-size:2.4vw; letter-spacing:0.3em;} }
.con_text02 dd { position:relative; width:80%; left:15%; padding:8% 0; font-size: 1.15em; line-height: 1.58em; }



@media  (max-width: 1820px){
.subNav { padding:1.5em 1em 1em 40%;}
.subNav li { padding:0 1em;}
.subNav li a { font-size:1em;}
}

@media  (max-width: 1420px){
.topTypo .topTypo01 { font-size:4vw;}
.topTypo .topTypo02 { font-size:1.05em;}

.textBox_03 { width:100%; padding-left:5%;}

.con_text01 dt { font-size:1.15em; line-height:1.6em; margin-bottom:1.6em;}
.con_text01 dd { font-size:1em; line-height:1.8em;}

.con_text03 { font-size:1em; line-height:1.7em; }

.img05_01 {display: none !important;}
.img05_02 {display: none !important;}

}

@media  (max-width: 1280px){
.con_text01 dt { font-size:1.05em; margin-bottom:1.4em;}
.con_text01 dd { font-size:0.9em; line-height:1.6em; letter-spacing:-0.05em;}
.con_text01 dd .mb { margin-bottom:2em;}
.con_text02 dd { width:75%; left:20%;font-size: 1.05em; line-height: 1.5em;}
.con_text03 { font-size:1.05em; line-height:1.5em; }
}

@media  (max-width: 1024px){
.con_text02 dt { left:5%; font-size:2.4em; line-height:1.9em; letter-spacing:0.3em; }
.con_text02 dd {width:85%; left:15%;}
.con_text03 { font-size:1em; line-height:1.6em;}

}

@media  (max-width: 768px){
.subNav { padding:1.5em 1em 1em 1em; text-align:center;}
.subNav ul { padding-left:0;}

.topTypo .topTypo01 { font-size:5vw; text-shadow:1px 1px 2px rgba(255,255,255,0.5);}
.topTypo .topTypo02 { font-size:0.95em; letter-spacing:-0.05em; text-shadow:1px 1px rgba(255,255,255,0.3); }

.pageTitle {font-size:4.4vw;}
.special .pageTitle{font-size:4vw; letter-spacing:0.2em;}
.special01 .pageTitle, .special03 .pageTitle, .special04 .pageTitle, .special05 .pageTitle { height:88%;}
.special06 .pageTitle { height:77%;}

.con_text01 dt { font-size:1.1em; margin-bottom:1.4em;}
.con_text01 dd { font-size:1em; line-height:1.6em; letter-spacing:-0.05em;}
.con_text02 dt {font-size:4.4vw; letter-spacing:0.4em;}


.subTop01 { width:75%; margin: 0 auto;/*margin-left:25%;*/ }
.subTop02 { width:90%;}
.textBox_01 { position:unset; width:90%; left:unset; margin: 0 auto; padding:10% 0; top:auto; transform: none; -ms-transform:none; -webkit-transform:none; text-align:center; background: none;}
.textBox_01 dl {text-align: center;}
.landText.textBox_02 { padding:10% 0;}


}

@media  (max-width: 420px){
.subNav { padding:1.2em 0.3em 0.8em;}
.subNav li { padding:0 0.3em;}
.subNav li a { font-size:1.05em;}
.con_text02 dt {font-size:4.8vw; letter-spacing:0.4em;}
.topTypo .topTypo02 { font-size:0.9em; letter-spacing:-0.1em;}
}