@charset "utf-8";
/*reset*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}

body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'Roboto','Droid Sans','mplus',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans','mplus',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}

a{cursor:pointer; text-decoration: none;}
a:link{color:#fff;}
a:visited{color:#fff;}
a:hover{color:#fff;}
a:active{color:#fff;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
section {clear:both; zoom:1;}
article:after,section:after,.clrFx:after{content:''; clear:both; display:block;}
img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{outline:none;}
area{border:none;outline:none;}


/*
	BASE SET
__________________________________________________*/
/*html{overflow:visible;}*/
html,body {margin:0; padding:0;}
html {font-size: calc(100vw / 64);}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#fff; font-size:1rem; line-height:1.5; z-index:0; background: #000;}
.over-section{margin:0; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main{width:100%;}
section{width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
.wrap{margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
article{margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after{box-sizing:border-box; outline:none;}
i{font-style:normal;}

#contents{position:relative; overflow:hidden; opacity:0; transition:opacity 0.6s ease; z-index: 0;}
.imgloaded #contents{opacity:1;}
.menuopen #contents{z-index:0;}

main{position:relative; font-size:0; line-height:1; opacity:0; transition:opacity 0.6s ease;}
.windowloaded main{opacity:1;}

body#error{font-size: 0;}
body#error #siteheader .dmm {font-size: 0 !important;}

/* 

    SP
    
***********************************************************************************/

.sp-item{display:inline-block;}
.pc-item{display:none;}
.wrap{min-width:inherit; max-width:inherit;}

#wrapper{width:100vw; overflow:hidden;}

/*個別背景*/
#wrapper::after{content:''; position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-10; backface-visibility:hidden;}

#contents{overflow:hidden; position:relative; width:100vw; padding-bottom:0;}
main{position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
main img{width:100%; height:auto;}

#siteheader{position:relative; right:0; top:0; width:100vw; z-index:1000; font-size:0; line-height:1;}
#menutoggle{position:fixed; right:0; top:0; opacity:0;}

#spmenu label{position:fixed; z-index:100000; width:calc(103/640*100vw); height:calc(107/640*100vw); top:0; right:0; cursor:pointer;}
#spmenu label::before{content:''; background:url(/img/cmn/sp/menu.png) center / cover ; width:100%; height:100%; right:0; top:0; position:absolute; opacity:1; transition:0.3s;}
#spmenu label::after{content:''; background:url(/img/cmn/sp/btn_nav-close.png) center / cover; width:calc(64/640*100vw); height:calc(64/640*100vw); right:calc(28/640*100vw); top:calc(28/640*100vw); cursor:pointer; position:absolute; opacity:0; transition:0.3s;}

#siteheader .scroll{height: 100%; overflow: hidden; overflow-y: auto; padding: calc(116/640*100vw) 0 ;}
#siteheader nav {position: absolute; left: 0; top: 0; width: 100vw; height:auto; z-index: 0; text-align: center;}
#siteheader nav .gnav {background: rgba(0,0,0,0.9); width: 100vw; height: 100vh; position: fixed; left: 101vh; top: 0; opacity: 0;
transition:opacity 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);}
#siteheader nav .gnav .link li{padding-bottom:calc(69/640*100vw); position: relative;}
#siteheader nav .gnav .link a{height: calc(77/640*100vw); width: 100vw; display: block; background: url(/img/cmn/sp/nav.png) left top no-repeat; background-size: 200vw auto;}
#siteheader nav .gnav .link li i{width: calc(78/640*100vw); height: calc(27/640*100vw); background: url(/img/cmn/sp/icon_new.png) center /cover; position: absolute; left: 50%; top: calc(-43/640*100vw); margin-left: calc(-39/640*100vw);}

/*coming soon*/
#siteheader nav .gnav .link li.comingsoon a{pointer-events:none; opacity:0.5; filter:grayscale(100%);}

/*#siteheader nav .sns{position:absolute; top:calc(18/640*100vw); left:3.125vw; z-index:0; display:none;}*/
#siteheader nav .sns{position:absolute; top:calc(18/640*100vw); left:0; z-index:0; display:none;}
#siteheader nav .sns a{display:inline-block; margin-right:calc(18/640*100vw);}
#siteheader nav .sns a img{width:calc(51/640*100vw); height:auto;}
#siteheader nav .sns a{transition:0.5s;}
#siteheader nav .sns a:hover{filter:brightness(1.3);}
#siteheader nav .sns a img{backface-visibility:hidden;}

#siteheader .dmm{position:absolute; top:5.156vw; left:1.563vw; width:23.125vw; height:3.125vw; transform:scale(0.8);}
#siteheader .dmm a{display:block; width:100%; height:100%; background:url(/img/cmn/sp/logo_dmm.png) left top / 100% auto;}

#siteheader .entry{position:relative; left:0; bottom:0; width:100vw; height:calc(181/640*100vw); margin-top:3.438vw; padding:calc(50/640*100vw) 0 0;}
#siteheader .entry img{width:calc(266/640*100vw); height:calc(88/640*100vw);}
#endwrap .entry .googleplay img{width:calc(297/640*100vw); height:calc(88/640*100vw);}
#siteheader .entry a{display:inline-block; margin-top:calc(-3/640*100vw); margin-right:calc(10/640*100vw);}

/* open */
#menutoggle:checked ~ nav .gnav{transition:opacity 0.6s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity:1; z-index:10; left:0;}
#menutoggle:checked ~ #spmenu label::after{opacity:1;}
#menutoggle:checked ~ #spmenu label::before{opacity:0;}

#endwrap{position:relative; z-index:100;}

#endwrap .entry {height:calc(226/640*100vw); width: 100vw; padding: calc(50/640*100vw) 0 0; font-size:0; text-align:center; margin-bottom:calc(47/640*100vw);}
#endwrap .entry img {width:calc(266/640*100vw); height:calc(88/640*100vw);}
#endwrap .entry .googleplay img{width:calc(297/640*100vw); height:calc(88/640*100vw);}
#endwrap .entry a{display:inline-block; margin-top:calc(10/640*100vw); margin-right:calc(5/640*100vw); margin-left:calc(5/640*100vw);}

/* sitefooter */

#sitefooter {padding:0 0 7.031vw; position:relative; z-index:10; background:#000;}
#sitefooter ul.link{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:62.5vw; margin:0 auto;}
#sitefooter ul.link li{width:50%; line-height:1; text-align: center;}
#sitefooter ul.link li:nth-child(n + 3){margin-top:3.125vw;}
#sitefooter ul.link li a,
#sitefooter ul.link li span{font-size:calc(15/640*100vw); color:#fff; text-shadow:#000 0 0 5px; display:inline-block;}
#sitefooter ul.link li + li{position:relative;}

#sitefooter ul.sns{display:flex; justify-content:center; padding:calc(25/640*100vw) 0 calc(22/640*100vw);}
#sitefooter ul.sns a {display:inline-block; margin:0 calc(3/640*100vw);}
#sitefooter ul.sns a img {width:calc(51/640*100vw); height:auto;}
#sitefooter ul.sns a{transition:0.5s;}
#sitefooter ul.sns a:hover{filter:brightness(1.3);}
#sitefooter ul.sns a img{backface-visibility:hidden;}

ul.spec{display:none;}
ul.spec{margin:calc(59/640*100vw) auto 7.813vw; position:relative; z-index:10; padding:0 calc(25/640*100vw) 0;}
ul.spec li{font-size:calc(20/640*100vw); color:#fff; line-height:calc(45/640*100vw);}
ul.spec b{font-size:calc(20/640*100vw); width:calc(210/640*100vw); line-height:calc(32/640*100vw); display:inline-block; background:url(/img/top/spec.png) left top no-repeat; text-align:center; margin:0 calc(18/640*100vw) 0 0; background-size:cover;}


@media screen and (max-width:640px){

#siteheader nav .gnav .link li:nth-child(1) a{background-position:left top;}
#siteheader nav .gnav .link li:nth-child(2) a{background-position:left calc(-292/640*100vw);}
#siteheader nav .gnav .link li:nth-child(3) a{background-position:left calc(-438/640*100vw);}
#siteheader nav .gnav .link li:nth-child(4) a{background-position:left calc(-584/640*100vw);}
#siteheader nav .gnav .link li:nth-child(5) a{background-position:left calc(-729/640*100vw);}

#top #siteheader nav .gnav .link li:nth-child(1) a{background-position:-100vw calc(0/640*100vw);}
#campaign #siteheader nav .gnav .link li:nth-child(2) a{background-position:-100vw calc(-146/640*100vw);}
#story #siteheader nav .gnav .link li:nth-child(2) a{background-position:-100vw calc(-292/640*100vw);}
#character #siteheader nav .gnav .link li:nth-child(3) a{background-position:-100vw calc(-438/640*100vw);}
#system #siteheader nav .gnav .link li:nth-child(4) a{background-position:-100vw calc(-584/640*100vw);}
#cartoon #siteheader nav .gnav .link li:nth-child(5) a{background-position:-100vw calc(-730/640*100vw);}

}


@media screen and (min-width:641px){

/* 

    PC
    
***********************************************************************************/
html.noscroll,body.noscroll{overflow:hidden;}
#contents{min-width:1400px; padding-bottom:0; font-size:0; line-height:1;}
#contents main{margin:0 auto 0; position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
.sp-item{display:none;}
.pc-item{display:inline-block;}

#wrapper {width:100%; min-width:1400px;}
#contents {width:100%;}
#contents main img{width:inherit; height:inherit;}

#contents .pad{position:relative;}
#contents .pad::after{content:''; position:absolute; top:100%; left:0;  width:100%; height:100%; background:rgba(0,0,0,1); z-index:100;}

#siteheader{width:100%; min-width:1400px;}

/*個別背景*/
#wrapper::after{display:none;}

main img {width:inherit; height:auto;}
#menutoggle,
#spmenu{display:none;}

#siteheader{position:fixed; top:0; left:0; width:100%; min-width:1400px; height:100px; background:url(/img/cmn/nav_bg.png) left top repeat-x;}

#siteheader .dmm{position:static; float:left; width:110px; height:15px; margin:34px 0 0 30px; transform:none;}
#siteheader .dmm a{display:block; width:100%; height:100%; background:url(/img/cmn/logo_dmm.png) no-repeat left top; transition:0.3s;}
#siteheader .dmm a:hover{opacity:0.7;}

#siteheader .scroll{height:auto; padding:0;}
#siteheader nav {position:absolute; top:0; right:0; left:0; width:1400px; margin:0 auto;}
#siteheader nav .gnav{background:none; width:1400px; height:100px; position:absolute; left:0; top:0; opacity:1; transition:none;}
#siteheader nav .gnav .link{margin-left:50px; padding:0; text-align:left;}
#siteheader nav .gnav .link li{padding-bottom: 0; display: inline-block; vertical-align: top;}
#siteheader nav .gnav .link a{position:relative; width:182px; height:82px; background:url(/img/cmn/nav.png) 1px top no-repeat;}

/*coming soon*/
#siteheader nav .gnav .link li.comingsoon a{opacity:0.8; filter:contrast(50%);}

#siteheader nav .gnav .link li:nth-child(1) a{background-position:-181px 0; width:103px;}

#siteheader nav .gnav .link li:nth-child(2) a{background-position:-489px 0; width:151px;}
#siteheader nav .gnav .link li:nth-child(3) a{background-position:-640px 0; width:240px;}
#siteheader nav .gnav .link li:nth-child(4) a{background-position:-880px 0; width:178px;}
#siteheader nav .gnav .link li:nth-child(5) a{background-position:-1058px 0; width:193px;}
/*アクティブ*/
#top #siteheader nav .gnav .link li:nth-child(1) a{background-position:-181px -100px;}
#story #siteheader nav .gnav .link li:nth-child(2) a{background-position:-489px -100px;}
#character #siteheader nav .gnav .link li:nth-child(3) a{background-position:-640px -100px;}
#system #siteheader nav .gnav .link li:nth-child(4) a{background-position:-880px -100px;}
#cartoon #siteheader nav .gnav .link li:nth-child(5) a{background-position:-1058px -100px;}

#siteheader nav .gnav .link li i {width: 41px; height: 14px; background: url(/img/cmn/icon_new.png) center /cover; position: absolute; left: 50%; top: 4px; margin-left: -20px;}
#siteheader nav .gnav .link a::after{content: ''; background:rgba(255,255,255,0.15); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: 0.3s;}
#siteheader nav .gnav .link a:hover::after{opacity: 1;}

#siteheader nav .sns {position: absolute; left: inherit; top: 25px; z-index: 0; display: flex; right:45px; transition:0.5s;}
#siteheader nav .sns a {display: inline-block; margin-right:10px;}
#siteheader nav .sns a img {width: 30px;}

#siteheader .entry {display: none;}

/* open */
#menutoggle:checked ~ nav .gnav{transition:0.6s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity:1; z-index:10; left:0;}
#menutoggle:checked ~ #spmenu label::after{opacity:1;}
#menutoggle:checked ~ #spmenu label::before{opacity:0;}

#endwrap{position: relative; z-index: 100;}
#endwrap .entry{display: none;}

ul.spec{display:none;}
ul.spec{margin:0 auto 0; position:relative; z-index:10; justify-content:space-between; max-width:1600px; padding:45px 25px 30px; background:#000; transition:max-width 0.5s;}
ul.spec::after{content:''; background:#000; width:500vw; position:absolute; left:-200vw; top:0; z-index:-1; height:100%;}
ul.spec li{font-size:15px; color:#fff; line-height:25px; transition:0.5s;}
ul.spec b{display:inline-block; width:173px; margin:0 15px 0 0; font-size:14px; line-height:25px; text-align:center; background:url(/img/top/spec.png) no-repeat left top / 100% auto; transition:0.5s;}

/* sitefooter */
#sitefooter{padding:25px 0 50px;}
#sitefooter ul.link{display:flex; justify-content:center; width:auto;}
#sitefooter ul.link li{display:inherit!important; width:auto!important; margin-top:auto!important;}
#sitefooter ul.link li a,
#sitefooter ul.link li span{font-size:12px; padding:0 20px; text-shadow: #000 0 0 5px; letter-spacing: 0.2em;}
#sitefooter ul.link li a:hover{text-decoration:underline;}
#sitefooter ul.link li + li{position:relative;}

#sitefooter ul.sns {display:none;}

}


@media screen and (min-width:1921px){}


@media screen and (max-width:1700px) and (min-width:641px){
#siteheader nav{margin-left:142px;}
}
@media screen and (max-width:1600px) and (min-width:641px){
ul.spec{max-width:100%;}
ul.spec li{font-size:13px; line-height:24px;}
ul.spec b{margin-right:10px; font-size:13px; width:168px; line-height:24px;}
}
@media screen and (max-width:1530px) and (min-width:641px){
#siteheader nav .sns{right:145px;}
}


@media screen and (max-width:1270px) and (min-width:641px){}


/* 

    loader
    
***********************************************************************************/
#loader {background: rgba(0,0,0,0); width: 100%; height: 100%; z-index: 101000; position: fixed; left: 0; top: 0; display: block ;}
#loader .loader{width: 64px; height: 64px; position: fixed; right: 50vw; top: 50%; margin: -32px -32px 0 0; opacity: 0.8}
/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-clip-rotate,
.la-ball-clip-rotate > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-ball-clip-rotate {
    display: block;
    font-size: 0;
    color: #fff;
}
.la-ball-clip-rotate.la-dark {
    color: #333;
}
.la-ball-clip-rotate > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-ball-clip-rotate {
    width: 32px;
    height: 32px;
}
.la-ball-clip-rotate > div {
    width: 32px;
    height: 32px;
    background: transparent;
    border-width: 2px;
    border-bottom-color: transparent;
    border-radius: 100%;
    -webkit-animation: ball-clip-rotate .75s linear infinite;
       -moz-animation: ball-clip-rotate .75s linear infinite;
         -o-animation: ball-clip-rotate .75s linear infinite;
            animation: ball-clip-rotate .75s linear infinite;
}
.la-ball-clip-rotate.la-sm {
    width: 16px;
    height: 16px;
}
.la-ball-clip-rotate.la-sm > div {
    width: 16px;
    height: 16px;
    border-width: 1px;
}
.la-ball-clip-rotate.la-2x {
    width: 64px;
    height: 64px;
}
.la-ball-clip-rotate.la-2x > div {
    width: 64px;
    height: 64px;
    border-width: 4px;
}
.la-ball-clip-rotate.la-3x {
    width: 96px;
    height: 96px;
}
.la-ball-clip-rotate.la-3x > div {
    width: 96px;
    height: 96px;
    border-width: 6px;
}
/*
 * Animation
 */
@-webkit-keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes ball-clip-rotate {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
             transform: rotate(180deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes ball-clip-rotate {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    50% {
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes ball-clip-rotate {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
/*

    js styles
    
************************************************************************************************************************/
#baseVW{ width:100vw; position: fixed; left: -9999px; opacity: 0;}
.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}
#imageloaded {position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}

.animation-up ,
.animation ,
.animation.itemshow ,
.animation-trigger,
.uatablet .animation {}

@keyframes _hover{0%{transform:translate3d(0, 0, 0)}20%{transform:translate3d(0, -2px, 0)}40%{transform:translate3d(-2px, 2px, 0)}60%{transform:translate3d(2px, -2px, 0)}80%{transform:translate3d(0, 2px, 0)}100%{transform:translate3d(0, 0, 0)}}
@keyframes _arrow{0%{transform:translate3d(0, 0, 0)}10%{transform:translate3d(0, 0, 0)}20%{transform:translate3d(0, 14px, 0)}100%{transform:translate3d(0, 0, 0)}}
@keyframes _blast{0%{transform:translate3d(0, 0, 0) scale(0.96)}15%{transform:translate3d(0, -3px, 0)}30%{transform:translate3d(-3px, 3px, 0)}45%{transform:translate3d(4px, -3px, 0)}60%{transform:translate3d(0, 3px, 0)}75%{transform:translate3d(0, -3px, 0)}90%{transform:translate3d(-3px, 3px, 0)}100%{transform:translate3d(0, 0, 0) scale(1)}}
@keyframes _blast2{0%{transform:translate3d(0, 0, 0) scale(0.96)}15%{transform:translate3d(0, -4px, 0)}30%{transform:translate3d(-4px, 4px, 0)}45%{transform:translate3d(6px, -4px, 0)}60%{transform:translate3d(0, 4px, 0)}75%{transform:translate3d(0, -4px, 0)}90%{transform:translate3d(-4px, 4px, 0)}100%{transform:translate3d(0, 0, 0) scale(1)}}
@keyframes _flash{
10%{background-color: rgba(255,255,255,0.3);}
100%{background-color: rgba(255,255,255,0.0);filter: drop-shadow(0 0 5px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
}
@keyframes _shat{0%{transform: translateY(-101%)}100%{transform: translateY(0)}}

/*
Colorbox Core Style:

*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:101000; overflow:hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}

#cboxOverlay{background:rgba(0,0,0,0.9);}
#colorbox{outline:0;}
#cboxContent{margin-top:80px; margin-bottom: 38px; overflow:visible; background:rgba(0,0,0,0.7);}
.cboxIframe{background:#fff;}
#cboxError{padding:80px 0; border:1px solid #ccc;}
#cboxLoadedContent{background:none; padding:0; border: none;}
#cboxLoadingGraphic{}
#cboxTitle{position:absolute; top:-0; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-0; right:205px; text-indent:-9999px;}

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px;}

#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxClose {position: absolute; right: 0; top: 0; z-index: 100;}
#cboxClose {display:block; width:95px; height:95px; overflow:hidden; white-space:nowrap; background:url(/img/cmn/btn_close.png) center center no-repeat; position:absolute; top: -100px; right: 5px; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 64px auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover{opacity:0.7;}

@media screen and (max-width:640px){
#cboxContent{margin-top:12vw; margin-bottom: 12vw;}
#cboxLoadingOverlay img {max-width: 100vw;}
#cboxNext{right:5rem; top: -4rem; width: 2.4rem; height: 3rem;}
#cboxPrevious{right:9rem; top: -4rem; width: 2.4rem; height: 3rem;}
#cboxClose {display:block; width:14.844vw; height:14.844vw; overflow:hidden; white-space:nowrap; background:url(/img/cmn/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 0; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 10vw auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}

}


/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1010000; display:none;}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1010001; display:none; cursor:pointer;}
#modalContent div.mc {position:fixed; left:0; top:0; margin-left:0px; margin-top:0; z-index:10; padding:0; transition:0.8s ease;
-webkit-transform:scale(0,0); -moz-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0); text-align: center; width: 100%; height: 100%;}
#modalContent.view div.mc {-webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#modalContent div.mc iframe {position:relative; margin: 0 auto;}
#moviemodalapi {position: relative; margin: 0 auto;}

#modalContent .close {position: absolute; right: 0; top: 0; z-index: 100;}
#modalContent .close a {display:block; width:95px; height:95px; overflow:hidden; white-space:nowrap; background:url(/img/cmn/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 5px; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 64px auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}
@media screen and (min-width:641px){
#modalContent .close a:hover{filter: brightness(1.2); transform: scale(0.9); }
}
.ie11 #modalContent .close:hover {opacity:0.5;}

@media screen and (max-width:640px){
#modalContent div.mc{padding: 14.125vw 0 0; height: 61.25vw !important; position:absolute; top: 50%; margin-top: -40.75vw;}

#modalContent .close {position: absolute; right: 1vw; top: 0px; z-index: 100;}
#modalContent .close a {display:block; width:14.844vw; height:14.844vw; overflow:hidden; white-space:nowrap; background:url(/img/cmn/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 0; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 10vw auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}

#modalContent div.mc iframe {margin:0 auto!important;}
}

#baseVW{ width:100vw; position: fixed; left: -9999px; opacity: 0;}



/*

    animation
    
************************************************************************************************************************/
.animation.slideL{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(10vw,10vw)}
.animation.slideR{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(-10vw,10vw)}
.animation.slideT{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(0,5vw)}
img.animation.slideT {transform: translate(0,10vw);}
.animation.scale{transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: scale(1.3);}
.animation.scale.fadein,
.animation.slideL.fadein,
.animation.slideR.fadein,
.animation.slideT.fadein{opacity: 1; transform: translate(0,0);}

.neon a {transition: 0.6s; backface-visibility: hidden; }
.neon a img {backface-visibility: hidden; transition: 0.3s;}
@media screen and (min-width:641px){
.neon a:hover{/*transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);*/ animation:_neon 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.neon a:hover img{filter: drop-shadow(0 0 4px rgba(0,0,0,0.2)); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.neon a:hover{filter: drop-shadow(0 0 5px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
}
@keyframes _neon{
10%{background-color: rgba(255,255,255,0.3);}
100%{background-color: rgba(255,255,255,0.0);}
}

/* scroll in */
.item{
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform: translate3d(0,25vh,20vh) perspective(80vh);
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) , opacity 1s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.item.animated{
  opacity: 1;
  transform: translate3d(0,0,0);
}
/*
[data-scroll]{
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform: translate3d(0,30vh,20vh) perspective(80vh);
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) , opacity 1s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll="in"]{
  opacity: 1;
  transform: translate3d(0,0,0);
}
*/
/*
[data-scroll] img{
backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateY(0) scale(1);
  transition: 1.0s 0s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll="in"] img{
  transform: translateY(0) scale(1);
}
*/