@charset "utf-8";
@import url(../font/twaysky/twaysky.css);
@import url(../font/paperlogy/paperlogy.css);

body {font-family:'Paperlogy';}
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  {line-height:1.5;}



/******************************************
	Common
******************************************/

#wrap {display:flex; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; font-size:20px;}
@media all and (max-width:1024px) {#wrap {font-size:19px;}}
@media all and (max-width:640px) {#wrap {font-size:18px;}}
@media all and (max-width:480px) {#wrap {font-size:17px;}}

#wrap .inner {position:relative; max-width:1680px; margin:0 auto;}

#wrap header,
#wrap section {display:flex; position:relative; padding-left:1em; padding-right:1em;}
#wrap header .inner,
#wrap section .inner {display:flex; width:100%;}


/******************************************
	Header
******************************************/

header {height:5em; flex-shrink:1; align-items:center; border-bottom:1px solid rgba(255,255,255,.4); backdrop-filter:blur(2px);}
header #logo {display:block; position:relative; width:16.45em; height:2.35em; text-indent:-999px; background:url(../img/logo.svg) no-repeat 0 50%; background-size:contain;}


/******************************************
	Section
******************************************/

section {flex-grow:1;}
section > .inner {justify-content:end; padding-bottom:6.15em;}

.links {margin-left:auto; margin-top:auto;}
.links li + li {margin-top:1.5em;}
.links a {display:flex; position:relative; justify-content:space-between; flex-direction:column; padding:2em 1.9em 1.5em; width:20em; height:10em; max-width:90vw; border-radius:1em; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(10px); background:no-repeat right -4em bottom -4em rgba(255,255,255,.05); color:#fff; transition:.3s all;-webkit-transition:.3s all;}
.links a:before,
.links a:after {content:""; display:block;}
.links a:after {position:relative; width:1.05em; height:1.4em; background:url(../img/img_link.svg) no-repeat 50% 50%; background-size:contain;}
.links a:before {position:absolute; background:no-repeat 50% 50%; background-size:contain; left:11em; top:2em; bottom:2em;}
.links a.portal:before {width:6.6em; background-image:url(../img/img_link_portal.svg);}
.links a.tour:before {width:6.7em; background-image:url(../img/img_link_tour.svg);}
.links a span {display:block; font-size:.7em; font-weight:800; opacity:.5;}
.links a strong {font-size:1.1em; line-height:1.4em; font-family:'twaysky';}

.links a:focus,
.links a:hover {background:url(../img/bak_links.svg) no-repeat right -1.25em bottom -1.25em; background-size:12em auto; border-color:rgba(255,255,255,.2);}
.links a.portal:focus,
.links a.portal:hover {background-color:#1C6EE9;}
.links a.tour:focus,
.links a.tour:hover {background-color:#E91C49;}


@media all and (max-height:820px) {
	section > .inner {padding-bottom:1em; padding-top:1em; align-items:center;}
	.links {margin-top:0;}
}


/******************************************
	Background Movie
******************************************/

.intro-video-wrap {position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:-1;}
.intro-video-wrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; height:190px; background:linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); z-index:2;}
.intro-video-wrap #introVideo{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; width:auto; height:auto;}