html {line-height:1.15; /* 1 */-webkit-text-size-adjust:100%; /* 2 */}
body {margin:0;}
main {display:block;}
h1 {font-size:2em; margin:0.67em 0;}
hr {box-sizing:content-box; /* 1 */height:0; /* 1 */overflow:visible; /* 2 */}
pre {font-family:monospace, monospace; /* 1 */font-size:1em; /* 2 */}
a {background-color:transparent; text-decoration:none;}
abbr[title] {border-bottom:none; /* 1 */text-decoration:underline; /* 2 */text-decoration:underline dotted; /* 2 */}
b,
strong {font-weight:bolder;}
code,
kbd,
samp {font-family:monospace, monospace; /* 1 */font-size:1em; /* 2 */}
small {font-size:80%;}
sub,
sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}
img {border-style:none;}
button,
input,
optgroup,
select,
textarea {font-family:inherit; /* 1 */font-size:100%; /* 1 */line-height:1.15; /* 1 */margin:0; /* 2 */}
button,
input { /* 1 */overflow:visible;}
button,
select { /* 1 */text-transform:none;}
button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance:button;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style:none; padding:0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
fieldset {padding:0.35em 0.75em 0.625em;}
legend {box-sizing:border-box; /* 1 */color:inherit; /* 2 */display:table; /* 1 */max-width:100%; /* 1 */padding:0; /* 3 */white-space:normal; /* 1 */}
progress {vertical-align:baseline;}
textarea {overflow:auto;}
[type="checkbox"],
[type="radio"] {box-sizing:border-box; /* 1 */padding:0; /* 2 */}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height:auto;
}

[type="search"] {-webkit-appearance:textfield; /* 1 */outline-offset:-2px; /* 2 */}
[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
::-webkit-file-upload-button {-webkit-appearance:button; /* 1 */font:inherit; /* 2 */}
details {display:block;}
summary {display:list-item;}
template {display:none;}
[hidden] {display:none;}
* {outline:none; -webkit-font-smoothing:antialiased; -webkit-touch-callout:none; -webkit-user-select:none;}
.font-en {font-family:"Montserrat" !important;}

/* custom */
html,body{width:100%; height:100%; overflow:hidden; position:fixed; overscroll-behavior-y:none; touch-action:none;}
/*
::-webkit-scrollbar {display:none;}
::-webkit-scrollbar-button {display:none;}
*/
* {outline:none; -webkit-font-smoothing:antialiased;}
.wrapper {-webkit-overflow-scrolling:touch;}
body {height:100%; min-height:100%; margin:0; padding:0; font-family:"Gothic A1"; color:#fff; -ms-overflow-style:none; -webkit-overflow-scrolling:auto; -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; background:#000;}
#logo {position:absolute; top:5%; left:6%; z-index:10;}
#logo img {width:auto; height:30px; vertical-align:top;}
#nav {position:absolute; top:5%; right:6%; margin:0; padding:0; z-index:15;}
#nav .pc {display:block;}
#nav .mobile {display:none;}
#nav li {float:left; list-style:none; margin:0 0 0 55px; padding:0;}
#nav li a {display:inline-block; width:calc(100% - .3em); color:#fff; font-size:14px; font-family:"Montserrat"; letter-spacing:0.3em; vertical-align:top;}
.mobile-panel {display:none;}
#nav li a.current {position:relative; text-align:center;}
#nav li a.current:after {position:absolute; left:0; bottom:-8px; content:''; height:1px; background:#fff; width:100%; opacity:0; animation:navOn .6s ease-out 1s; animation-fill-mode:forwards;}
@keyframes navOn {
	0% {width:0%; opacity:0;}
	100% {width:100%; opacity:1;}
}

#home head, #home body {display:block; overflow:hidden !important;}
#home head::before, #home head::after,
#home body::before, #home body::after {
  position: fixed;
  z-index:-1;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: '.';
  font-size: 50px;
  color: transparent;
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

#home body::before {
  text-shadow: 2.111519723em 1.4813519278em 7px rgba(255, 0, 102, 0.9), 0.0290959364em 1.3657232502em 7px rgba(0, 68, 255, 0.9), 2.0687856677em 0.9133622797em 7px rgba(255, 0, 54, 0.9), 1.863870304em 1.9355090646em 7px rgba(0, 178, 255, 0.9), 1.6918683675em 2.441262311em 7px rgba(255, 195, 0, 0.9), -0.0392857375em 0.6793487085em 7px rgba(37, 0, 255, 0.9), 0.4774918899em -0.1009917301em 7px rgba(80, 255, 0, 0.9), -0.0386143778em 1.7281861912em 7px rgba(255, 122, 0, 0.9), 1.8188375857em 1.3832353933em 7px rgba(0, 79, 255, 0.9), 1.3661654939em 1.8277042363em 7px rgba(0, 255, 61, 0.9), 0.6949373469em 0.3769840957em 7px rgba(0, 65, 255, 0.9), -0.0956089466em 0.2617381804em 7px rgba(0, 94, 255, 0.9), -0.0784910285em 0.268216153em 7px rgba(79, 255, 0, 0.9), 2.3147064128em -0.4764960168em 7px rgba(255, 46, 0, 0.9), -0.3748462002em -0.1943306339em 7px rgba(0, 51, 255, 0.9), -0.1156653569em 1.8781222295em 7px rgba(255, 0, 157, 0.9), 1.6114786441em 1.5334150704em 7px rgba(255, 184, 0, 0.9), 1.5814002232em 2.0789633614em 7px rgba(56, 0, 255, 0.9), 0.5253785677em 2.4567471187em 7px rgba(0, 255, 208, 0.9), 1.3251171806em -0.2649830863em 7px rgba(249, 255, 0, 0.9), 0.923202615em 0.5141482799em 7px rgba(20, 0, 255, 0.9), 1.942093843em -0.1779304927em 7px rgba(255, 104, 0, 0.9), 2.3715580082em 1.8465793609em 7px rgba(218, 255, 0, 0.9), 2.0153457539em 1.1623611746em 7px rgba(254, 0, 255, 0.9), 0.1195729386em 1.8686128054em 7px rgba(0, 255, 24, 0.9), 0.8795331939em 1.4053084876em 7px rgba(0, 255, 0, 0.9), 2.2947365109em 0.3982669167em 7px rgba(69, 0, 255, 0.9), 1.7768618739em 1.6808199002em 7px rgba(0, 255, 195, 0.9), 0.4923208652em -0.0141718402em 7px rgba(234, 0, 255, 0.9), -0.4768339217em 1.9066086608em 7px rgba(255, 0, 67, 0.9), 1.8968657794em 1.6403760131em 7px rgba(0, 255, 14, 0.9), 0.9827447132em 1.8652413825em 7px rgba(255, 127, 0, 0.9), 1.6430213657em -0.2381413835em 7px rgba(88, 255, 0, 0.9), 2.4506115537em 1.0853119384em 7px rgba(183, 0, 255, 0.9), 1.2351866479em 1.0542793745em 7px rgba(0, 231, 255, 0.9), 1.6857323615em 1.7619379062em 7px rgba(29, 255, 0, 0.9), 1.1054503359em 0.6967946307em 7px rgba(0, 194, 255, 0.9), 2.0410140228em 1.7484271814em 7px rgba(0, 255, 78, 0.9), 0.8251809728em -0.1535890475em 7px rgba(255, 0, 51, 0.9), -0.3351125903em 1.368904876em 7px rgba(255, 119, 0, 0.9), -0.0724346932em 2.0132835249em 7px rgba(0, 68, 255, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}
#home body::after {
  text-shadow: -0.1948643053em 2.2079222106em 7px rgba(255, 50, 0, 0.9), 2.3379925065em 0.7114328682em 7px rgba(0, 136, 255, 0.9), 1.5794505736em 1.2341714596em 7px rgba(0, 80, 255, 0.9), -0.4780058105em 2.2833899378em 7px rgba(0, 255, 201, 0.9), 2.4100865736em 0.6632748343em 7px rgba(0, 61, 255, 0.9), 2.3185113086em -0.2533232782em 7px rgba(255, 0, 72, 0.9), 1.4461762674em 0.2277319893em 7px rgba(255, 0, 77, 0.9), 1.2968464323em -0.4759949916em 7px rgba(0, 118, 255, 0.9), 1.2210974378em -0.2650336779em 7px rgba(204, 0, 255, 0.9), 0.4232726921em 1.7045630872em 7px rgba(255, 66, 0, 0.9), 0.1829288362em 2.2887423982em 7px rgba(203, 0, 255, 0.9), 2.3857972203em -0.2453572221em 7px rgba(113, 0, 255, 0.9), 2.1598638015em -0.3919057917em 7px rgba(0, 138, 255, 0.9), 1.9475792858em 1.5696739781em 7px rgba(0, 255, 76, 0.9), 1.0571184666em -0.3165242567em 7px rgba(0, 143, 255, 0.9), 0.9509531726em 0.4591437895em 7px rgba(166, 0, 255, 0.9), 0.1431338424em 0.9598371575em 7px rgba(8, 255, 0, 0.9), 2.0120702113em 0.8258836948em 7px rgba(163, 0, 255, 0.9), 2.3235209293em 1.3535732403em 7px rgba(0, 180, 255, 0.9), 1.3447704011em 1.9511705975em 7px rgba(255, 0, 180, 0.9), 2.0066744929em 2.3067521611em 7px rgba(0, 177, 255, 0.9), 1.0588855126em 1.1986621034em 7px rgba(47, 255, 0, 0.9), 2.0053003641em 2.2419068376em 7px rgba(0, 173, 255, 0.9), 1.496416441em 2.1721361892em 7px rgba(0, 255, 146, 0.9), 0.109468052em -0.1505520195em 7px rgba(29, 0, 255, 0.9), 1.842109859em 1.1577964918em 7px rgba(174, 0, 255, 0.9), -0.2629206684em 0.9274690139em 7px rgba(0, 255, 13, 0.9), 1.6202437308em 1.7119276606em 7px rgba(255, 73, 0, 0.9), 0.0227903132em 2.4265200635em 7px rgba(0, 160, 255, 0.9), 2.224589901em 0.1019604046em 7px rgba(136, 0, 255, 0.9), 2.0126903844em 0.8864417959em 7px rgba(0, 12, 255, 0.9), -0.2741167605em 1.4683139643em 7px rgba(244, 255, 0, 0.9), -0.2255273553em 2.1360699057em 7px rgba(252, 0, 255, 0.9), 0.5388732022em 0.8313519559em 7px rgba(0, 30, 255, 0.9), 2.404906806em 2.2067894919em 7px rgba(255, 0, 30, 0.9), 2.3101062341em 0.2333946523em 7px rgba(255, 0, 196, 0.9), 1.810113428em 2.2955603238em 7px rgba(0, 255, 127, 0.9), 1.910284416em 1.3410425014em 7px rgba(0, 255, 177, 0.9), 0.3587706409em 1.6597014836em 7px rgba(177, 0, 255, 0.9), 1.6512269339em 0.7866010806em 7px rgba(0, 255, 34, 0.9), 1.5004298038em 0.5088559399em 7px rgba(0, 237, 255, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}
#home head::before {
  text-shadow: 2.0683934852em 1.9169052882em 7px rgba(43, 255, 0, 0.9), 0.1300293776em 0.3228885276em 7px rgba(0, 241, 255, 0.9), 0.3539079067em 1.6094491726em 7px rgba(216, 0, 255, 0.9), -0.1800785157em 0.4689549048em 7px rgba(30, 255, 0, 0.9), 2.3752227658em 0.4487307644em 7px rgba(0, 255, 212, 0.9), 0.6472422549em 2.1892142886em 7px rgba(255, 56, 0, 0.9), 0.3574822568em 0.4623379832em 7px rgba(0, 183, 255, 0.9), 1.4930474348em 2.4103509444em 7px rgba(0, 255, 60, 0.9), 1.2691189036em 0.9796862184em 7px rgba(218, 255, 0, 0.9), -0.1175655351em 2.389560354em 7px rgba(67, 0, 255, 0.9), 0.0264998256em 1.2294349241em 7px rgba(255, 27, 0, 0.9), 1.432065336em 2.0179911549em 7px rgba(204, 0, 255, 0.9), 0.2528798565em 1.0339136867em 7px rgba(0, 62, 255, 0.9), 0.8923060365em 1.0604564767em 7px rgba(81, 0, 255, 0.9), 0.2970874324em -0.2836628662em 7px rgba(0, 12, 255, 0.9), 2.0069870928em -0.072504248em 7px rgba(255, 76, 0, 0.9), 1.0501617706em 2.3311532878em 7px rgba(0, 255, 202, 0.9), -0.3482637394em 2.3696775614em 7px rgba(164, 255, 0, 0.9), 2.4867690676em 1.0767192534em 7px rgba(0, 224, 255, 0.9), -0.3733176006em 1.5712168667em 7px rgba(48, 0, 255, 0.9), 1.535645427em 1.8998950874em 7px rgba(172, 0, 255, 0.9), -0.3281041941em 1.1555603725em 7px rgba(255, 0, 215, 0.9), 0.3990105112em 1.9496239202em 7px rgba(0, 47, 255, 0.9), 2.1802540421em 1.8631373914em 7px rgba(182, 0, 255, 0.9), 2.1824806713em 0.104803618em 7px rgba(0, 255, 233, 0.9), 1.5021677812em -0.3011526617em 7px rgba(53, 0, 255, 0.9), 1.9772348486em -0.2717788465em 7px rgba(63, 0, 255, 0.9), 1.4050274033em 1.7086930716em 7px rgba(0, 255, 9, 0.9), 1.8759150279em 1.5608420831em 7px rgba(0, 160, 255, 0.9), 0.6786450109em -0.0646147305em 7px rgba(60, 0, 255, 0.9), -0.0909774689em -0.2923287033em 7px rgba(65, 0, 255, 0.9), -0.0871406406em 1.42486232em 7px rgba(0, 255, 190, 0.9), -0.0810765097em 2.2409012046em 7px rgba(0, 140, 255, 0.9), 1.2713840686em 0.955399045em 7px rgba(141, 0, 255, 0.9), 1.1831443035em 0.1578915351em 7px rgba(254, 255, 0, 0.9), -0.4601815408em 1.5358277887em 7px rgba(0, 91, 255, 0.9), -0.2411631485em 0.486006987em 7px rgba(255, 0, 132, 0.9), 0.0748672911em 1.2713169407em 7px rgba(255, 45, 0, 0.9), 1.6980487768em 2.1887848269em 7px rgba(255, 0, 113, 0.9), 2.2151381676em 0.575504293em 7px rgba(237, 255, 0, 0.9), 2.0966333163em 1.503613678em 7px rgba(29, 255, 0, 0.9);
  animation-duration: 42s;
  animation-delay: -23s;
}
#home head::after {
  text-shadow: 0.609575918em 2.114616788em 7px rgba(76, 255, 0, 0.9), 1.6798143275em 0.1323355822em 7px rgba(64, 255, 0, 0.9), -0.0298928181em 1.9665596526em 7px rgba(255, 0, 172, 0.9), 0.3996559821em 0.7629165654em 7px rgba(255, 0, 55, 0.9), -0.1075513685em 0.9352582631em 7px rgba(255, 0, 156, 0.9), 1.9670080449em 0.0601526256em 7px rgba(165, 0, 255, 0.9), 0.7241651415em 0.0616722802em 7px rgba(126, 0, 255, 0.9), 0.4598486322em 1.8257544523em 7px rgba(255, 211, 0, 0.9), 0.5192222539em 2.2486426339em 7px rgba(0, 255, 38, 0.9), 2.434756826em -0.2671442593em 7px rgba(255, 124, 0, 0.9), 0.8560518718em 1.6644356059em 7px rgba(255, 207, 0, 0.9), 2.4095723572em 1.1315503469em 7px rgba(31, 255, 0, 0.9), 1.5076680627em 0.244318131em 7px rgba(0, 255, 87, 0.9), -0.1358553924em -0.2792285875em 7px rgba(0, 255, 35, 0.9), 1.6535490934em 1.7577571978em 7px rgba(0, 242, 255, 0.9), 0.8144831479em 0.5471727371em 7px rgba(255, 20, 0, 0.9), 0.1058549312em -0.1068062166em 7px rgba(255, 127, 0, 0.9), 2.4493763451em 0.7530274469em 7px rgba(0, 201, 255, 0.9), 0.858322613em 0.5904963682em 7px rgba(255, 196, 0, 0.9), 1.201844037em 2.2779345023em 7px rgba(0, 255, 129, 0.9), 1.0555624512em 2.349226588em 7px rgba(255, 0, 37, 0.9), 2.0224814572em 1.5345442536em 7px rgba(0, 19, 255, 0.9), 0.126353833em 0.5710708717em 7px rgba(33, 255, 0, 0.9), 1.6937809167em 0.0641359868em 7px rgba(180, 0, 255, 0.9), 2.4796876926em 1.3429161131em 7px rgba(115, 0, 255, 0.9), 0.1448800306em 0.1563021938em 7px rgba(255, 0, 252, 0.9), 1.4439482976em 0.8584993942em 7px rgba(0, 222, 255, 0.9), 1.2713511007em 0.180252533em 7px rgba(0, 151, 255, 0.9), 2.3743131166em 1.175582225em 7px rgba(0, 255, 3, 0.9), 2.459649645em -0.207016998em 7px rgba(255, 0, 195, 0.9), 0.8081853163em 2.1936486718em 7px rgba(255, 250, 0, 0.9), 0.3391519696em 0.1733416563em 7px rgba(158, 255, 0, 0.9), 1.6805470434em 0.0073652647em 7px rgba(255, 208, 0, 0.9), 0.9293236452em 0.1353830834em 7px rgba(255, 206, 0, 0.9), 1.3964717065em -0.3664309194em 7px rgba(255, 97, 0, 0.9), 2.4752999111em 0.4003336384em 7px rgba(0, 18, 255, 0.9), 2.3027227827em 0.5637416232em 7px rgba(0, 227, 255, 0.9), 2.2994235564em -0.1361931033em 7px rgba(255, 0, 28, 0.9), 2.1158357951em -0.0197432022em 7px rgba(0, 22, 255, 0.9), 2.4243820057em 0.2598297858em 7px rgba(26, 255, 0, 0.9), 0.9685315785em 1.3449550448em 7px rgba(255, 97, 0, 0.9);
  animation-duration: 41s;
  animation-delay: -19s;
}
@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

.wrapper {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; background:transparent;}
.wrapper .pagination {position:absolute; top:50%; right:6%; width:10px; text-align:center; transform:translate3d(0,-50%,0);}
.wrapper .pagination .bullet {display:block; margin:10px 0; width:8px; height:8px; border-radius:100%; vertical-align:top; background:#fff; opacity:.5;}
.wrapper .pagination .bullet.active {opacity:1;}
.wrapper .pagination .bullet:first-child {margin-top:0;}
.wrapper .pagination .bullet:last-child {margin-bottom:0;}

.home {position:absolute; top:50%; left:6%; transform:translateY(-50%);}
.home a {color:#fff;}
.home h1 {margin:0; padding:0; font-size:5vw; font-weight:100; transition:all .4s ease-out .3s; line-height:111%; white-space:nowrap;}
.home h1 strong {font-weight:600;}
.home .home-with {display:block; width:100%; overflow:hidden;}
.home .home-with p {margin:0; padding:0 0 30px; font-weight:200; line-height:1.35em; font-size:1em;}
.home .home-with p:first-child {padding:0 0 2.5em; font-size:1.35em;}
.home .home-with p:last-child {padding-bottom:0;}
.home .home-with strong {display:inline-block; font-weight:600; margin-bottom:5px;}
.home .home-with .sns * {vertical-align:middle;}
.home .home-with .sns i {font-size:18px; margin:10px; color:#fff;}
.blurIn {animation:blurIn 1s linear;}
@keyframes blurIn {
	0% {-webkit-filter:blur(10px);}
	100% {-webkit-filter:blur(0px);}
}
.blurOut {animation:blurOut 1s ease-out 0s; animation-fill-mode:forwards;}
@keyframes blurOut {
	0% {-webkit-filter:blur(0px);}
	100% {-webkit-filter:blur(10px);}
}
.br {position:relative;}
.br:after {display:block; content:''; height:0;}

.scene {
	position:absolute; top:50%; left:50%;
	width:200px;
	height:200px;
	transform:translateX(-100px) translateY(-100px);
	transition:all .3s ease-out;
}

.panel {
	width:100%;
	height:100%;
	background:transparent;
	transform:perspective(300px) rotateY(35deg);
	transition:all .3s ease-out;
}
.ani-page-open .scene {width:100%; height:100%; top:0; left:0; transform:translateX(0) translateY(0); transition:all .5s ease-out;}
.ani-page-open .panel {background:#fff; transform:perspective(0) rotateY(0); transition:all .8s ease-out .5s;}

.swiper-container {
width:100%;
height:100%;
}
.swiper-container .swiper-slide {position:relative;}
.swiper-container-vertical>.swiper-pagination-bullets {right:6%;}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {margin:15px 0;}
.swiper-pagination-bullet {background:rgba(255,255,255,.35);}
.swiper-pagination-bullet-active {background:rgba(255,255,255,.75);}

#pageWrapper {position:fixed; top:0; left:0; width:100vw; height:100vh; background:#fff; opacity:0; transition:opacity .3s ease-out; z-index:-1; }
#pageWrapper .bg {display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:red; overflow:hidden; z-index:105; transform:rotateY(45deg);}
#pageWrapper.active {opacity:1; z-index:100;}
#pageWrapper .contentInner {position:relative; margin:0 auto; height:100%; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;}
#pageWrapper .innerIntro {position:relative; padding:0 0 50px; margin:0 auto;}
#pageWrapper .innerIntro .title {position:fixed; z-index:1; left:50%; top:50%; margin:0; padding:0; font-size:60px; transform:translateX(-50%) translateY(-55%); color:#000; font-weight:200; letter-spacing:-.035em;}
#pageWrapper .innerIntro .title strong {font-weight:700;}
#pageWrapper .innerIntro .title .category {display:block; color:#616263; font-weight:400; font-size:22px; margin:0; padding:0 0 3px 5px; line-height:100%; font-family:"Montserrat";}
#pageWrapper .innerIntro .title.scroll {width:auto; max-width:960px; position:relative; top:0; left:0; margin:0 auto; padding:1.5em 0; font-size:2.13894em; transform:translateX(0) translateY(0);}
#pageWrapper .innerIntro .title.bg-black,
#pageWrapper .innerIntro .title.bg-black .category {color:#fff;}
#pageWrapper .innerIntro .body {position:relative; z-index:2; max-width:960px; margin:0 auto; padding:5em 0 0; background:#fff; /*box-shadow:0 -3px 13px rgba(1,1,1,.05);*/}
#pageWrapper .innerIntro .body h3 {margin:0; padding:0 0 10px; font-size:1.15em; color:#101010; line-height:100%;}
#pageWrapper .innerIntro .body p {margin:0; padding:0 0 2.5em; font-size:1.15em; line-height:1.55em; color:#666; font-weight:400;}
#pageWrapper .innerIntro .body p.center {text-align:center; font-size:30px; padding:1.5em 0 3em; line-height:111%; font-weight:200;}
#pageWrapper .innerIntro .body p.center strong {font-weight:600; font-size:28px;}
#pageWrapper .innerIntro .body p.center a {font-size:14px; cursor:pointer;}
#pageWrapper .innerIntro .body strong {color:#101010; font-weight:600;}
#pageWrapper .innerIntro .body blockquote {display:block; color:#313131; font-style:italic; line-height:1.8em; margin:1.5em 0 2.8em; padding:15px;}
blockquote{
border-left:4px solid #101010;
position: relative;
background:#f1f1f1;
}
blockquote::before{
content: "\201C";
color:#101010;
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
blockquote::after{
content: '';
}
blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}
#pageWrapper .innerIntro .body .img {text-align:center; padding:0 0 3em;}
#pageWrapper .innerIntro .body .img p {margin:0; padding:0;}
#pageWrapper .innerIntro .body .img-full {padding:2em 0 5em; margin:0; text-align:center;}
#pageWrapper .innerIntro .body .img-full video,
#pageWrapper .innerIntro .body .img-full img {width:100%; height:auto; vertical-align:top;}
#pageWrapper .innerIntro .body .img-full p {margin:0; padding:0;}
#pageWrapper .innerIntro .body .img .note,
#pageWrapper .innerIntro .body .img-full .note {padding-top:8px; line-height:100%; font-size:12px; color:#616263;}
#pageWrapper .innerIntro .visual {position:relative; height:100vh; overflow:hidden;}
#pageWrapper .innerIntro .visual img {display:none; position:relative; top:0; left:0; vertical-align:top; min-height:100%; width:100%; max-height:auto;}
#pageWrapper .innerIntro .visual.bg-white {position:relative; background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat;}
#pageWrapper .innerIntro .visual.bg-white:after {display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:rgba(255,255,255,.75);}
#pageWrapper .innerIntro .visual.bg-black {position:relative; background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat;}
#pageWrapper .innerIntro .visual.bg-black:after {display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:rgba(111,111,111,.35);}
#pageWrapper .innerIntro .visual.video {position:relative; height:100vh; overflow:hidden;}
#pageWrapper .innerIntro .visual.video video {position:absolute; top:0; left:50%; height:100vh; transform:translateX(-50%) scale(1.3);}
#pageWrapper .innerIntro .visual.min-height {position:relative; min-height:100vh;}
#pageWrapper .innerIntro .visual .center-circle {display:block; position:absolute; top:50%; left:50%; margin:-75px 0 0 -75px; background:#fff; width:160px; height:160px; border-radius:100%; box-shadow:0 0 85px rgba(1,1,1,.15);}
#pageWrapper .innerIntro .visual .center-circle > .circle {
	position:absolute; top:0; left:0; width:150px; height:150px; border-radius:100%;
	box-shadow:0 8px 0 0 rgba(225, 131, 194, 0.25), 0 -8px 0 0 rgba(165, 181, 222, 0.25), 8px 0 0 0 rgba(225, 131, 194, 0.25), -8px 0 0 0 rgba(165, 181, 222, 0.25), 8px -8px 0 0 rgba(195, 156, 208, 0.5), -8px 8px 0 0 rgba(195, 156, 208, 0.5), 8px 8px 0 0 rgba(255, 105, 180, 0.75), -8px -8px 0 0 rgba(135, 206, 235, 0.75);
	animation:rotateThis 1s linear infinite;
}
@keyframes rotateThis {
	from {
		transform:rotate(0deg) scale(1);
	}
	to {
		transform:rotate(360deg) scale(1);
	}
}
#pageClose {display:block; position:fixed; top:50px; left:50vw; font-family:"Montserrat"; font-size:14px; letter-spacing:0.3em; font-weight:500; color:white; text-transform:uppercase; width:100px; margin-left:-50px; text-align:center; opacity:1; transition:all .3s ease-out; z-index:101; mix-blend-mode:difference; transform:translateY(-100px);}
#pageClose.active {transform:translateY(0);}

.progressbar {position:fixed; width:100%; height:3px; background:rgba(0,0,0,.15); vertical-align:top; overflow:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform-origin:center bottom; transform-origin:center bottom; z-index:101;}
.progressbar span {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); -webkit-transition-duration:150ms; transition-duration:150ms;}
.page-top {display:block; position:fixed; z-index:101; background:#fff url('../img/icon-page-top.png') no-repeat center center; background-size:50% auto; width:40px; height:40px; bottom:30px; right:40px; border:1px solid #f1f1f1; border-radius:100%; white-space:nowrap; cursor:pointer; text-indent:-99999px;}

.footer {position:absolute; bottom:30px; left:0; width:100%; height:auto; padding-top:10px; font-size:11px; text-align:center; color:#fff; font-family:'Montserrat';}
.bg-why {position:fixed; width:100%; height:100%; z-index:-1;}


/* progressbar */
progress[value] {width:100%; height:3px; display:block; -webkit-appearance:none; appearance:none; border:none;}
progress[value]::-webkit-progress-bar {background:#d9d9d9;}
progress[value]::-webkit-progress-value {border-radius:50px; background:#000;}

@-webkit-keyframes scroll {
  0% {-webkit-transform:translateY(0);}
  50% {-webkit-transform:translateY(10px);}
  100% {-webkit-transform:translateY(0);}
}
@-moz-keyframes scroll {
  0% {-moz-transform:translateY(0);}
  50% {-moz-transform:translateY(10px);}
  100% {-moz-transform:translateY(0);}
}
@keyframes scroll {
  0% {
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
  }
  50% {
	-webkit-transform:translateY(10px);
	-moz-transform:translateY(10px);
	-ms-transform:translateY(10px);
	-o-transform:translateY(10px);
	transform:translateY(10px);
  }
  100% {
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
  }
}

.mouse-wheel {
position:absolute; top:75%; left:50%; display:inline-block; height:44px; width:28px; border-radius:20px; border:2px solid #fff; margin-left:-14px; text-align:center;}
.mouse-wheel:after {display:inline-block; height:6px; width:6px; background-color:#fff; border-radius:50%; content:""; -webkit-animation:scroll 1.3s ease-out infinite forwards; -moz-animation:scroll 1.3s ease-out infinite forwards; animation:scroll 1.3s ease-out infinite forwards;}




/* Responsive */
@media screen and (max-width:1366px) {
	.home h1 {font-size:5vw;}
}

@media screen and (max-width:1280px) {
	.home h1 {font-size:6vw;}
}

@media screen and (max-width:1170px) {
	.home h1 {font-size:6vw;}
}

@media screen and (max-width:1080px) {
	.home h1 {font-size:8vw;}
}

@media screen and (max-width:1000px) {
	.home .home-with p:first-child {width:320px; word-break:keep-all;}
}

@media screen and (max-width:900px) {
	.home h1 {font-size:8vw;}
}

@media screen and (max-width:820px) {
	.home h1 {font-size:9vw;}
}

@media screen and (max-width:820px) and (orientation:landscape) {
	.home h1 {font-size:6vw;}
}

@media screen and (max-width:640px) {
	#home head::before, #home head::after,
	#home body::before, #home body::after {
	  width: 3em;
	  height: 3em;
	  font-size: 50px;
	}

	.home h1 {font-size:10vw;}
	.home .home-with p {margin:0; padding:0 0 30px; font-weight:200; line-height:1.35em; font-size:12px;}
	.home .home-with p:first-child {padding:0 0 2.5em; font-size:15px;}
	.home .home-with .sns i {font-size:24px; margin:10px; color:#fff;}

	#pageWrapper .innerIntro {padding:0 0 150px;}
	#pageWrapper .innerIntro .visual {min-height:250px; height:auto; background:none !important;}
	#pageWrapper .innerIntro .visual.bg-white:after {display:none;}
	#pageWrapper .innerIntro .visual.bg-black:after {display:none;}
	#pageWrapper .innerIntro .visual img {display:block; left:0; transform:translateY(0); min-width:100%; width:100%; min-height:auto; height:auto; vertical-align:top;}
	#pageWrapper .innerIntro .visual.min-height {min-height:300px;}
	#pageWrapper .innerIntro .visual.video {height:auto;}
	#pageWrapper .innerIntro .visual.video video {position:relative; top:0; left:0; width:100%; height:auto; transform:translateX(0) translateY(0) scale(1);}
	#pageWrapper .innerIntro .visual .center-circle {display:block; position:absolute; top:50%; left:50%; margin:-20px 0 0 -40px; background:#fff; width:80px; height:80px; border-radius:100%; box-shadow:0 0 35px rgba(1,1,1,.15);}
	#pageWrapper .innerIntro .visual .center-circle > .circle {
		position:absolute; top:0; left:0; width:80px; height:80px; border-radius:100%;
		box-shadow:0 4px 0 0 rgba(225, 131, 194, 0.25), 0 -4px 0 0 rgba(165, 181, 222, 0.25), 4px 0 0 0 rgba(225, 131, 194, 0.25), -4px 0 0 0 rgba(165, 181, 222, 0.25), 4px -4px 0 0 rgba(195, 156, 208, 0.5), -4px 4px 0 0 rgba(195, 156, 208, 0.5), 4px 4px 0 0 rgba(255, 105, 180, 0.75), -4px -4px 0 0 rgba(135, 206, 235, 0.75);
		animation:rotateThis 1s linear infinite;
	}
	#pageWrapper .innerIntro .title {position:relative; left:0; top:0; transform:translate(0,0); max-width:auto; font-size:25px; padding:30px 25px 25px; line-height:130%; opacity:1 !important; filter:blur(0px) !important;}
	#pageWrapper .innerIntro .title .category {font-size:12px; margin:0; padding:0; color:#999;}
	#pageWrapper .innerIntro .title.bg-black {color:#101010;}
	#pageWrapper .innerIntro .title.bg-black .category {color:#999;}

	#pageWrapper .innerIntro .body {max-width:auto; padding:0 25px;}
	#pageWrapper .innerIntro .body h3 {font-size:17px;}
	#pageWrapper .innerIntro .body p {margin:0; padding:0 0 30px; font-size:17px; line-height:165%;}
	#pageWrapper .innerIntro .body p.center {text-align:center; font-size:24px; padding:1.5em 0 2.5em; line-height:111%; font-weight:100;}
	#pageWrapper .innerIntro .body p.center strong {font-weight:800; font-size:22px;}
	#pageWrapper .innerIntro .body .img-full {padding:0; margin:10px 0 35px;}
	#pageWrapper .innerIntro .body .img .note,
	#pageWrapper .innerIntro .body .img-full .note {font-size:11px;}
	#pageWrapper .innerIntro .body .img img {width:300px; height:auto;}
	#pageWrapper .innerIntro .body .img-100px img {width:100px; height:auto;}

	#pageClose {top:25px;}

	#logo {top:20px; left:15px;}
	#logo img {height:20px;}
	#nav {top:0; right:0;}
	#nav .pc {display:none;}
	#nav .mobile {display:block;}

	/* Mobile Toggle */
	.mobile-panel {display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:#000; opacity:0; transition:opacity .3s ease-out;}
	.mobile-panel ul {position:absolute; top:50%; width:100%; margin:0; padding:0; transform:translateY(-200px); opacity:0; transition:all .3s ease-out;}
	.mobile-panel ul li {margin:0; padding:0; list-style:none; text-align:center;}
	.mobile-panel ul li a {display:inline-block; padding:25px 0; color:#fff; font-size:17px; font-family:"Montserrat"; letter-spacing:0.3em;}
	.mobile-panel ul li:nth-child(1) a {letter-spacing:0.58em; text-indent:0.15em;}
	.mobile-panel ul li:nth-child(2) a {letter-spacing:0.58em; text-indent:0.15em;}
	.mobile-panel ul li:nth-child(3) a {letter-spacing:0.28em;}
	.mobile-panel ul li:nth-child(4) a {letter-spacing:0.4em;}
	.mobile-panel.active {opacity:.95; z-index:5;}
	.mobile-panel.active ul {transform:translateY(-125px); opacity:1;}

	#nav-icon {
		width:54px;
		height:54px;
		position:relative;
		z-index:10;
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		-webkit-transition:.5s ease-in-out;
		-moz-transition:.5s ease-in-out;
		-o-transition:.5s ease-in-out;
		transition:.5s ease-in-out;
		cursor:pointer;
		transform:scale(.3);
	}
	#nav-icon span {
		display:block;
		position:absolute;
		height:9px;
		width:100%;
		background:#fff;
		opacity:1;
		left:0;
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		-webkit-transition:.25s ease-in-out;
		-moz-transition:.25s ease-in-out;
		-o-transition:.25s ease-in-out;
		transition:.25s ease-in-out;
	}
	#nav-icon span:nth-child(1) {top:0px;}
	#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {top:20px;}
	#nav-icon span:nth-child(4) {top:40px;}
	#nav-icon.open span:nth-child(1) {top:20px;width:0%;left:50%;}
	#nav-icon.open span:nth-child(2) {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
	#nav-icon.open span:nth-child(3) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
	#nav-icon.open span:nth-child(4) {top:20px; width:0%; left:50%;}

	.mouse-wheel {display:none;}
}

@media screen and (max-width:580px) {
	.home {position:absolute; top:50%; left:15px;}
	.home h1 {font-size:10vw;}
}

@media screen and (max-width:419px) {
	.home {position:absolute; top:50%; left:15px;}
	.home h1 {font-size:10vw;}
}



/* Fade effect */
.js body {
	opacity:0;
	transition:opacity 0.3s;
}

.js body.render {
	opacity:1;
}

/* Page Loader */
.js .loading::before {
	content:'';
	position:fixed;
	z-index:100000;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:var(--color-bg);
}

.js .loading::after {
	content:'';
	position:fixed;
	z-index:100000;
	top:50%;
	left:50%;
	width:60px;
	height:60px;
	margin:-30px 0 0 -30px;
	pointer-events:none;
	border-radius:50%;
	opacity:0.4;
	background:var(--color-link);
	animation:loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity:1;
		transform:scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration:none;
	color:var(--color-link);
	outline:none;
}

a:hover,
a:focus {
	color:var(--color-link-hover);
	outline:none;
}

.frame {
	padding:3rem 5vw;
	text-align:center;
	position:relative;
	z-index:1000;
}

.frame__title {
	font-size:1rem;
	margin:0 0 1rem;
	font-weight:normal;
}

.frame__links {
	display:inline;
}

.frame__github,
.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
	margin-right:1rem;
}

.frame__demos {
	margin:1rem 0;
}

.frame__demo--current,
.frame__demo--current:hover {
	text-decoration:underline;
	color:var(--color-link);
}

.content {
	display:flex;
	flex-direction:column;
	width:100vw;
	height:calc(100vh - 13rem);
	position:relative;
	justify-content:flex-start;
	align-items:center;
	position:fixed; z-index:-1;
}

.content__title {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	text-align:center;
	margin:-5.5vw 0 0 0;
	z-index:100;
	font-size:10vw;
	color:var(--color-title);
	line-height:1;
}

@media screen and (min-width:53em) {
	.message {
		display:none;
	}
	.frame {
		position:fixed;
		text-align:left;
		z-index:10000;
		top:0;
		left:0;
		display:grid;
		align-content:space-between;
		width:100%;
		max-width:none;
		height:100vh;
		padding:2rem 2.25rem;
		pointer-events:none;
		grid-template-columns:25% 50% 25%;
		grid-template-rows:auto auto auto;
		grid-template-areas:'title title ... '
							'... ... ...'
							'github demos links';
	}
	.frame__title-wrap {
		grid-area:title;
		display:flex;
	}
	.frame__title {
		margin:0;
	}
	.frame__github {
		grid-area:github;
		justify-self:start;
		margin:0;
	}
	.frame__demos {
		margin:0;
		grid-area:demos;
		justify-self:center;
	}
	.frame__links {
		grid-area:links;
		padding:0;
		justify-self:end;
	}
	.frame a {
		pointer-events:auto;
	}
	.content {
		height:100vh;
		justify-content:center;
	}
}