html,body{
    position:relative;
    overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar, .case::-webkit-scrollbar, .caseinside::-webkit-scrollbar{
    display: none;
  }
  
/* Hide scrollbar for IE, Edge and Firefox */
html, .case{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

/*
 * Font style
 */

@import url("https://p.typekit.net/p.css?s=1&k=fpz0zbb&ht=tk&f=10875.32265&a=10270601&app=typekit&e=css");

@font-face {
font-family:"din-condensed";
src:url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cfbead/0000000000000000000146b3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

@font-face {
font-family:"din-condensed";
src:url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/f50d41/00000000000000003b9b2c84/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;
}

body {
    margin: 0;
    font-family:"din-condensed";
    font-size: 13px;
    line-height: 1.7em;
    font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
    -webkit-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

i{
    -webkit-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

/*
 * Logo
 */

#header{
    position: fixed;
    width: 100%;
    padding: 0;
    background-color: rgba(40,91,114,1);
    z-index: 999;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

#header a{
    color: #fff;
}

#headbar{
    width: 75%;
    max-width: 1140px;
    margin: 0 auto;
    white-space: nowrap;
}

#logobar{
    display: inline-block;
    width: 50%;
}

#label{
    width: 80px;
    vertical-align: middle;
}

#rcltd{
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.3em;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.close-window{
    display: inline-block;
    margin: 0 auto;
    width: 50%;
    text-align: right;
    font-size: 3em;
    font-weight: 300;
    color: #fff;
    vertical-align: middle;
    transform: translateY(-0.1em);
}

.close-window span{cursor: pointer;}

@media only screen and (max-width: 728px) {
    #headbar{
        width: 90%;
    }
}

/*
 * credential
 */

#credential_body{
    padding-top: 38px;
    margin: 68px auto 0;
    width: 75%;
    max-width: 1140px;
}

#credential_body .client{
    padding-top: 1.5em;
    padding-bottom: 0.3em;
    font-size: 2.6em;
    line-height: 1.5em;
    color: #404040;
}

#credential_body .project{
    padding-bottom: 1.5em;
    font-size: 2em;
    line-height: 1.5em;
    color: #a0a0a0;
}

#credential_body .project sup{
    font-size: 0.75em;
    top: -0.5em;
}

#credential_body .piece{
    padding: 6em 0 3em 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#credential_body .piece img{
    width: 100%;
}

#credential_body .piece video{
    width: 100%;
    margin: 0;
}

@media only screen and (max-width: 728px) {
    #credential_body{
        width: 90%;
    }
}

/*
 * gototop
 */

 .gototop a{
    display: none;
    position: fixed;
    right: 3%;
    bottom: 3%;
    padding: 9px 11.5px;
    font-size: 1.5em;
    line-height: 0;
    color: #404040;
    z-index: 999;
    border: 1px solid rgba(64,64,64,.7);
}

/*
 * footer
 */

#footer{
    width: 75%;
    max-width: 1140px;
    padding-top: 6em;
    padding-bottom: 3em;
    margin: 0 auto;
    color: #404040;
    text-align: left;
}

.copyright{
    font-size: 1.8em;
    font-weight: 300;
}

@media only screen and (max-width: 650px) {
    #credential_body{
        font-size: 0.9em;
    }

    .copyright{
        font-size: 1em;
        font-weight: 300;
    }
}

@media only screen and (max-width: 728px) {
    #footer{
        width: 90%;
    }
}


/*
 * showcase
 */

#showcase{
    display: block;
    position: relative;
    margin: 68px auto 0;
    height: 585vw;
}

.sc2021{
    position: absolute;
    font-size: 10vw;
    line-height: 1em;
    top: 35vw;
    left: 50vw;
    text-align: left;
    z-index: 9;
}

.thumbnail{
    position: absolute;
    height: auto;
    line-height: 0;
    background-color: #fff;
    -webkit-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
}

.thumbnail img{
    width: 100%;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
}

.thumbnail:hover{
    animation: ho 1s;
    -webkit-animation: ho 1s;
}

.thumbnail.on img{
    animation: hl 4s;
    -webkit-animation: hl 4s;
}

@keyframes ho{
    0%{transform: scale(1);z-index: 9;}
    100%{transform: scale(1.05);z-index: 9;}
}

@keyframes hl{
    0%{opacity: 0.5;}
    20%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 0.5;}
}

.move1{
    animation: mv1 8s;
    -webkit-animation: mv1 8s;
    animation-iteration-count: infinite;
}

@keyframes mv1{
    0%{transform: translate(0, 0);}
    30%{transform: translate(5px, 7px);}
    60%{transform: translate(0, 0);}
    100%{transform: translate(0, 0);}
}

.move2{
    animation: mv2 9s;
    -webkit-animation: mv2 9s;
    animation-iteration-count: infinite;
}

@keyframes mv2{
    0%{transform: translate(0, 0);}
    25%{transform: translate(9px, -3px);}
    50%{transform: translate(0, 0);}
    100%{transform: translate(0, 0);}
}

.move3{
    animation: mv3 10s;
    -webkit-animation: mv3 10s;
    animation-iteration-count: infinite;
}

@keyframes mv3{
    0%{transform: translate(0, 0);}
    40%{transform: translate(-5px, -3px);}
    80%{transform: translate(0, 0);}
    100%{transform: translate(0, 0);}
}

.thumbnail img:hover{
    opacity: 1;
}

.showcase1{
    left: 3vw;
    top: 3vw;
    width: 30vw;
    z-index: 1;
}

.showcase2{
    left: 24vw;
    top: 13vw;
    width: 35vw;
    z-index: 2;
}

.showcase3{
    right: 2vw;
    top: 0vw;
    width: 44vw;
    z-index: 3;
}

.showcase4{
    left: 38vw;
    top: 66vw;
    width: 15vw;
    z-index: 4;
}

.showcase5{
    right: 0vw;
    top: 65vw;
    width: 45vw;
    z-index: 3;
}

.showcase6{
    left: 8vw;
    top: 72vw;
    width: 35vw;
    z-index: 2;
}

.showcase7{
    left: 0vw;
    top: 94vw;
    width: 50vw;
    z-index: 3;
}

.showcase8{
    right: 0vw;
    top: 106vw;
    width: 33vw;
    z-index: 1;
}

.showcase9{
    left: 5vw;
    top: 132vw;
    width: 40vw;
    z-index: 3;
}

.showcase10{
    left: 0vw;
    top: 56vw;
    width: 20vw;
    z-index: 3;
}

.showcase11{
    left: 33vw;
    top: 114vw;
    width: 35vw;
    z-index: 2;
}

.showcase12{
    right: 21vw;
    top: 153vw;
    width: 35vw;
    z-index: 2;
}

.showcase13{
    left: 0vw;
    top: 168vw;
    width: 45vw;
    z-index: 3;
}

.showcase14{
    right: 0vw;
    top: 438vw;
    width: 30vw;
    z-index: 3;
}

.showcase15{
    right: 0vw;
    top: 166vw;
    width: 35vw;
    z-index: 3;
}

.showcase16{
    left: 30vw;
    top: 195vw;
    width: 30vw;
    z-index: 3;
}

.showcase17{
    right: 0vw;
    top: 210vw;
    width: 42vw;
    z-index: 3;
}

.showcase18{
    right: 2vw;
    top: 257vw;
    width: 27vw;
    z-index: 1;
}

.showcase19{
    left: 10vw;
    top: 370vw;
    width: 35vw;
    z-index: 3;
}

.showcase20{
    right: 0vw;
    top: 240vw;
    width: 20vw;
    z-index: 3;
}

.showcase21{
    left: 36vw;
    top: 234vw;
    width: 35vw;
    z-index: 4;
}

.showcase22{
    left: 46vw;
    top: 269vw;
    width: 28vw;
    z-index: 2;
}

.showcase23{
    left: 0vw;
    top: 245vw;
    width: 40vw;
    z-index: 3;
}

.showcase24{
    left: 0vw;
    top: 280vw;
    width: 25vw;
    z-index: 4;
}

.showcase25{
    right: 0vw;
    top: 295vw;
    width: 45vw;
    z-index: 1;
}

.showcase26{
    right: 25vw;
    top: 502vw;
    width: 35vw;
    z-index: 2;
}

.showcase27{
    left: 0vw;
    top: 340vw;
    width: 30vw;
    z-index: 3;
}

.showcase28{
    right: 10vw;
    top: 404vw;
    width: 33vw;
    z-index: 1;
}

.showcase29{
    left: 0vw;
    top: 566vw;
    width: 35vw;
    z-index: 3;
}

.showcase30{
    right: 0vw;
    top: 328vw;
    width: 25vw;
    z-index: 3;
}

.showcase31{
    left: 10vw;
    top: 32vw;
    width: 35vw;
    z-index: 4;
}

.showcase32{
    right: 5vw;
    top: 347vw;
    width: 35vw;
    z-index: 1;
}

.showcase33{
    left: 10vw;
    top: 455vw;
    width: 24vw;
    z-index: 1;
}

.showcase34{
    left: 42vw;
    top: 360vw;
    width: 25vw;
    z-index: 4;
}

.showcase35{
    right: 0vw;
    top: 550vw;
    width: 35vw;
    z-index: 3;
}

.showcase36{
    left: 30vw;
    top: 385vw;
    width: 30vw;
    z-index: 2;
}

.showcase37{
    left: 18vw;
    top: 292vw;
    width: 30vw;
    z-index: 3;
}

.showcase38{
    right: 38vw;
    top: 556vw;
    width: 23vw;
    z-index: 1;
}

.showcase39{
    left: 2vw;
    top: 511vw;
    width: 27vw;
    z-index: 3;
}

.showcase40{
    right: 5vw;
    top: 132vw;
    width: 22vw;
    z-index: 3;
}

.showcase41{
    left: 33vw;
    top: 423vw;
    width: 35vw;
    z-index: 2;
}

.showcase42{
    right: 2vw;
    top: 380vw;
    width: 35vw;
    z-index: 1;
}

.showcase43{
    left: 23vw;
    top: 320vw;
    width: 40vw;
    z-index: 2;
}

.showcase44{
    left: 13vw;
    top: 537vw;
    width: 23vw;
    z-index: 4;
}

.showcase45{
    right: 0vw;
    top: 456vw;
    width: 45vw;
    z-index: 3;
}

.showcase46{
    left: 25vw;
    top: 472vw;
    width: 30vw;
    z-index: 2;
}

.showcase47{
    left: 0vw;
    top: 400vw;
    width: 42vw;
    z-index: 1;
}

.showcase48{
    right: 0vw;
    top: 517vw;
    width: 28vw;
    z-index: 1;
}

.showcase49{
    right: 20vw;
    top: 533vw;
    width: 35vw;
    z-index: 3;
}

.showcase50{
    right: 2vw;
    top: 130vw;
    width: 25vw;
    z-index: 1;
}

.showcase51{
    left: 40vw;
    top: 570vw;
    width: 30vw;
    z-index: 2;
}

.showcase52{
    left: 35vw;
    top: 270vw;
    width: 32vw;
    z-index: 2;
}

.showcase53{
    left: 3vw;
    top: 213vw;
    width: 35vw;
    z-index: 2;
}

#bgclose{
    display: none;
    position: fixed;
    top: 0;
    width:100vw;
    height:100vh;
    z-index: 200;
}

.case{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 105px auto 35px;
    width: 90vw;
    max-width: 800px;
    background-color: rgba(100, 100, 100, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 300;
    overflow: hidden;
}

.case table{margin-bottom: 35px;}
.case td{width: 100%;}

.case .glossy-ff{display: none;}
.case .glossy-ff::before {content: unset;}

@supports (background: -moz-element(#showcase)) {
    .case .glossy-ff{
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 105px auto 35px;
    width: 90vw;
    max-width: 800px;
    height: auto;
    background: -moz-element(#showcase) no-repeat;
    filter: blur(8px);
    z-index: -1;
    }
    .case .glossy-ff:before{
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        width: 100vw;
        height: auto;
        background: rgba(100, 100, 100, 0.5);
        filter: blur(8px);
        }
}

.case div{
    margin: 25px 30px;
}

.caseinside{
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.case div .sc-name{
    margin: 35px 0 0.3em 0;
    font-size: 3.5em;
    font-weight: 400;
    line-height: 1.2em;
    color: #fff;
}

.case div img{
    display: block;
    width: 100%;
}

.case .close{
    position: absolute;
    right: 0;
    width: 1em;
    margin: 0 auto;
    padding-right: 30px;
    font-size: 4em;
    font-weight: 300;
    color: #fff;
    text-align: right;
    opacity: 0.8;
    cursor: pointer;
}

@media only screen and (max-width: 650px) {
    .case{
        margin: 90px auto 20px;
    }

    .case div .sc-name{
        font-size: 2.5em;
    }
    .case div .close{
        top: 4%;
        right: 6%;
    }
}

/*
 * Showcase Logo
 */

#sc-headbar{
    position: fixed;
    width: 100%;
    padding: 0;
    white-space: nowrap;
    z-index: 999;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

#sc-headbar a{
    color: #000;
}

#sc-logobar{
    display: inline-block;
    width: 50%;
}

#sc-logobar a{
    margin-left: 1.5vw;
}

#sc-label{
    width: 80px;
    vertical-align: middle;
}

#sc-rcltd{
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.3em;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/*
 * Showcase locat
 */

 #sc-locatto{
    display: inline-block;
    width: 50%;
    text-align: right;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.1865em;
    vertical-align: middle;
    }

#sc-locatto a{
    margin-left: 2%;
}

#sc-locatto span{
    margin-right: 2.8vw;
}

#sc-locatto_mobile{display: none;}

.sc-desktopto, .sc-mobileto{
    width: 100%;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}
.sc-mobileto{
    display: none;
    background-color: #fff;
}

@media only screen and (max-width: 728px) {
    .sc-desktopto{display: none;}
    .sc-mobileto{display: block;}
    #sc-locatto{display: none;}
    #mobile_close{display: none;}
    #sc-locatto_mobile{
        display: inline-block;
        width: 50%;
        text-align: right;
        font-weight: 300;
        vertical-align: middle;
    }
    #sc-locatto_mobile i{
        margin-right: 4vw;
        font-size: 2em;
        line-height: 1em;
    }
    #sc-mobile_list{
        display: none;
        position: absolute;
        right: 0;
        width: 30vw;
        text-align: right;
        background-color: rgba(255,255,255,1);
    }
    #sc-mobile_list a{
        margin-right: 3vw;
        line-height: 4em;
        letter-spacing: 0.25em;
    }
    #sc-mobile_list .line{
        margin: 0 1em;
        height: 1px;
        border-bottom: 1px solid #000;
    }
}