@charset "utf-8";

@import url("price-table.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'SF_HambakSnow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/**
  * Reset
  * Repeatable Patterns    
 
*/

/* Reset
-------------------------------------------------------------- */
html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
    background-color: #000;
}

body {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
    background-color: #000;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video  { 
    font-family: inherit; 
    font-size: 100%; 
    font-weight: inherit; 
    font-style: inherit; 
    vertical-align: baseline; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0;
    background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q { 
    -webkit-hyphens: none;
      -moz-hyphens: none;
       -ms-hyphens: none;
           hyphens: none;
            quotes: none;
}

figure {
    margin: 0;
}

:focus {
    outline: 0;
}

table { 
    border-collapse: collapse; 
    border-spacing: 0;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

legend {
    white-space: normal;
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

button,
input {
    line-height: normal;
}

input,
textarea {
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    line-height: 1;
    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    border: none;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border: 0;
    padding: 0;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Repeatable Patterns
-------------------------------------------------------------- */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

body {
	font: 14px/50px "Montserrat", sans-serif;
	font-weight: 400;
	background-color: #fff;		
	color: #666666;
}

a {		
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
	color: #feb800;
	text-decoration: none;
	outline: 0;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		 -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

ul, ol {
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;		
}

.img-left {
	margin: -10px 50px 0 0 !important;
	float: left;
}

.img-right {
	margin: 0 0 0 50px !important;
	float: right;
}

b, strong {
	font-weight: 900;
}

.entry-page p {
	margin-bottom: 25px;
}

h1 { font: 60px/72px "Montserrat", sans-serif;}
h4 { font: 15px/25px "Montserrat", sans-serif;; }

.pd-right40 { padding-right: 40px; }
.text-white { color: #fff; }
.nopad { padding: 0 0; }
.pad-top60px { padding-top: 60px; }
.pad-top65px { padding-top: 65px; }
.pad-top80px { padding-top: 80px; }
.pad-top90px { padding-top: 90px; }
.pad-top95px { padding-top: 95px; }
.pad-top155px { padding-top: 155px; }
.pad-top200px { padding-top: 200px; }


.pad-bottom0px { padding-bottom: 0; }
.pad-bottom30px { padding-bottom: 30px; }
.pad-bottom40px { padding-bottom: 40px; }
.pad-bottom50px { padding-bottom: 50px; }
.pad-bottom70px { padding-bottom: 70px; }
.pad-bottom80px { padding-bottom: 80px; }
.pad-bottom90px { padding-bottom: 90px; }
.pad-bottom110px { padding-bottom: 110px; }
.pad-bottom120px { padding-bottom: 120px; }
.pad-bottom135px { padding-bottom: 135px; }
.pad-bottom209px { padding-bottom: 209px; }

.pad-top80px.main-content {
	padding: 80px 0 85px;
}

.pad-top90px.main-content {
	padding: 90px 0 46px;
}


button {
	border: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {		
    font-size: 14px;
    font-family: "Condensed-Black", sans-serif;
    font-weight: 700;   
    color: #feb800;
    background-color: transparent;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #feb800;
    padding: 21px 102px;
    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {	
	width: 100%;
	border: 1px solid #eeeeee;
	background-color: transparent;		
	height: 60px;
	margin-bottom: 30px;
	padding: 12px 24px;
	border-radius: 0;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
	border: 1px solid #feb800;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
}

textarea {
	width: 100%;
	height: 150px;
	padding: 15px 24px;
}

input[type="checkbox"] {
	display: inline;
}

textarea:-moz-placeholder,
textarea::-moz-placeholder,
input:-moz-placeholder,
input::-moz-placeholder {		
	color: #666666;
	opacity: 1;
}

input:-ms-input-placeholder {
	color: #666666;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
	color: #666666;
	opacity: 1;
}

@-webkit-keyframes pop-scale { 0% { -webkit-transform: scale(0.7) } 100% { -webkit-transform: scale(1) } }
@-moz-keyframes pop-scale { 0% { -moz-transform: scale(0.7) } 100% { -moz-transform: scale(1) } }
@keyframes pop-scale { 0% { transform: scale(0.7) } 100% { transform: scale(1) } }

/* bootstrap resetting elements */
.btn {
	background-image: none;
}

textarea, 
input[type="text"],
input[type="submit"],
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input,
.dropdown-menu,
.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus {
	-webkit-appearance: none;
	text-shadow: none;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	     -o-box-shadow: none;
	        box-shadow: none;
	color: #000;
}

.blog-single .entry p {
	margin-bottom: 30px;
}




.uppercase {text-transform: uppercase;}
.back {position: absolute; width: 170px; height: 30px; top: 0; left: 0; padding: 10px; font-weight: 700; }

@media (min-width: 320px) and (max-width: 480px) {
    .back {position: absolute; width: 120px; height: 20px; top: 0; left: 0; padding: 10px; font-weight: 700; }
    .back.btn {font-size: 14px;}
    
}
/* intro */
.body100 {height: 100%;}

.gate {background: url('/20yearslater/images/gate.jpg') repeat; background-size: cover; background-position: center 100%; height: 100%; width: 100%; display: grid;}


.intro {margin: 0 auto; text-align: center; }

.intro.title{width: 100%;}
.intro.title li {color: #fff; font-family: 'SF_HambakSnow';}
.intro.title li:nth-child(1) {font-size: 60px; font-weight: 800; text-shadow: 3px 3px 3px #000; line-height: 72px;}
.intro.title li:nth-child(2) {font-size: 150px; font-weight: 800; text-shadow: 4px 4px 4px #000; line-height: 160px;}
.intro.title li:nth-child(3) {font-size: 32px; font-weight: 700; text-shadow: 3px 3px 3px #000;}
.intro.title li:nth-child(4) {font-size: 32px; font-weight: 700; text-shadow: 3px 3px 3px #000;}

.intro.text{
    background: url('/20yearslater/images/black70.png'); 
    padding: 20px; width: 100%; max-width: 1200px; margin: 0 auto; border-radius: 12px;
    margin-top: 50px;
}
.intro.text li {color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 130%;}
.intro.text li h2 {padding-bottom: 20px;}
.intro.text li:nth-child(1) {font-weight: 700; text-shadow: 3px 3px 3px #000;}
.intro.text li:nth-child(2) {font-weight: 500; text-shadow: 3px 3px 3px #000; padding-top: 20px;}
.intro.text li:nth-child(3) {font-weight: 500; padding-top: 20px;}

.button a {font-size: 18px; font-weight: 700; margin: 0 10px; width: 200px;}

@media (min-width: 320px) and (max-width: 480px) {
    .flat-row {padding-top: 50px;}
    .intro.title li:nth-child(1) {font-size: 40px; line-height: 46px;}
    .intro.title li:nth-child(2) {font-size: 80px; line-height: 90px;}
    .intro.title li:nth-child(3) {font-size: 24px; line-height: 28px;}
    .intro.title li:nth-child(4) {font-size: 24px; line-height: 28px;}
    .intro.title li {color: #fff; font-family: 'SF_HambakSnow';}
    
    .intro.text li:nth-child(1) {font-size: 16px; font-weight: 400; line-height: 140%;}
    .intro.text li:nth-child(2) {font-size: 16px; font-weight: 400; line-height: 140%;}
    
    .button a {width: 150px; margin-top: 30px;}
}

/* entrance */
.entrance {background: url('/20yearslater/images/back_entrance.jpg') no-repeat; background-size: cover; background-position: center 100%; height: 100%; width: 100%; display: grid;}

.code {font-size: 18px; font-weight: 400; margin-top: 30px; color: #fff; text-align: center; line-height: 160%; }
.code h2{font-size: 24px; font-weight: 700; margin-top: 30px; color: #fff; padding-bottom: 20px;}

.code-enter {text-align: center; padding-top: 20px;}
.code-enter input[type="text"] {color: #fff; font-size: 18px;}
.code-enter input[type="submit"] {border: none; color: #fff; font-size: 18px;}

@media (min-width: 320px) and (max-width: 480px) {
    .title-section .title {font-size: 24px; width: 80%; margin: 0 auto; line-height: 32px; padding-bottom: 20px;}
    .title-section .title:before {margin-top: 20px;}
    .code {width: 80%; margin: 0 auto;}
    .code-enter input[type="text"]  {width: 80%; margin: 0 auto; margin-bottom: 30px;}
}

/* welcome */
.welcome {background: url('/20yearslater/images/back_welcome.jpg') no-repeat; background-size: cover; background-position: center 100%; height: 100%; width: 100%; display: grid;}
.welcome .title-section .title:before {top: 60px;}

.msg {font-size: 18px; font-weight: 400; margin-top: 30px; color: #fff; text-align: center; line-height: 160%;}
.msg a{font-size:18px; margin: 0 10px; font-weight: 700; }
.msg-center {text-align: center !important;}
@media (min-width: 320px) and (max-width: 480px) {
    .msg {font-size: 16px; text-align: left; }
    .msg a{font-size:16px; margin: 0 10px; font-weight: 700; padding: 10px 6px;}
    .welcome .title-section .title {top: 40px; margin-bottom: 30px;}
    .welcome .title-section .title:before {top: 30px; }
    .msg a{width: 150px; margin-top: 30px;}
}

/* overview */
.overview {background: url('/20yearslater/images/back_overview.jpg') no-repeat; background-size: cover; background-position: center 100%; background-attachment: fixed; height: 100%; width: 100%; display: block; background-color: #000;}
.overview .flat-row  {padding-top: 100px;}
.overview .title-section .title:before {top: 60px;}

.ovw {font-size: 18px; font-weight: 400; margin-top: 20px; color: #fff; text-align: center; line-height: 160%;}
.ovw2 {font-size: 18px; font-weight: 400; margin-top: 20px; color: #fff; text-align: center; line-height: 160%;}
.ovw2 a{width: 180px ; font-size:18px; margin: 0 10px; font-weight: 700;}
.ovw3 {font-size: 18px; font-weight: 400; margin-top: 20px; color: #fff; text-align: center; line-height: 160%;}
.ovw3 a{width: 180px ; font-size:18px; margin: 0 10px; font-weight: 700; line-height: 50px; }


@media (min-width: 320px) and (max-width: 480px) {
    .ovw {font-size: 16px; text-align: left; }
    .ovw2 {font-size: 16px; text-align: center; margin-top: 20px;}
    .ovw2 a{width: 150px; font-size:16px; margin: 0 10px; font-weight: 700; padding: 10px 6px; }
    
    .overview .title-section .title {top: 40px; margin-bottom: 30px;}
    .overview .title-section .title:before {top: 30px; }
    .ovw2 a{line-height: 30px;}

}