.orb-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
/* Not too many browser support this yet but it's good to add! */
@media (prefers-contrast: high) {.orb-canvas { display:none; } }





/*
http://patorjk.com/software/taag/#p=display&f=Small&t=width

   __                    
  / _|_ _ __ _ _ __  ___ 
 |  _| '_/ _` | '  \/ -_)
 |_| |_| \__,_|_|_|_\___|
                         
*/


:root {
    --bggray:#bef1c4;/*#d8eae3;/*#888f95*/
    --black:#31383f;
    --bg:#f1f2f5;
    --gray:#333; /*#1d4e5b;*/
    --earthgreen:#1fe193; /*#629456;*/;
    --earthfall:#8c8b26;
    --earthred:#f93d3d;

    /*--white:#fff;
    --blue:#1e90ff;
    --green:#39d24a;
    --yellow:#ffe244;
    --pink:#ff36a3;
    */

    --white:#fff;
    --blue:#626781;
    --green:#c0c2aa;
    --yellow:#665b4a;
    --pink:#845279;



    --font-family: "Poppins", system-ui;
    /*--dark-color: hsl(var(--hue), 100%, 9%);
    --light-color: hsl(var(--hue), 95%, 98%);
    --base: hsl(var(--hue), 95%, 50%);
    --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
    --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);
    --bg-gradient: linear-gradient(
        to bottom,
        hsl(var(--hue), 95%, 99%),
        hsl(var(--hue), 95%, 84%)
    );*/
}









/* esm CSStore custom CSS */

html { display:block; margin:0; overflow:hidden; overflow-y:scroll; padding:0; height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin:0; padding:0; overflow:hidden; position:relative; background:var(--bg); }
body:beforexxx { content:''; display:block; width:100%; height:100%; position:fixed; top:0; left:0; background-image:url(../img/noise7.gif); background-repeat:repeat; opacity:.5; mix-blend-mode:luminosity; }
body:beforexxx { content:url(../img/linebg.svg); display:block; width:120%; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); opacity:.3; }
body.nocursor { xxxxcursor:none!important; }
.noscroll { overflow:hidden; }
li { padding-bottom:8px; }
* { box-sizing:border-box; margin:0; padding:0; font-family:'微軟正黑體',Arial,"Hiragino Sans GB","Source Han Sans",'PingFangTC-Regular',sans-serif; font-family:'Roboto',sans-serif; font-size:1em; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; color:var(--black); letter-spacing:-.02em; text-align:left; line-height:1.4em; position:relative; }








bodyxxx {
    background: 
        radial-gradient(circle at bottom, var(--white), transparent 80%),    
        linear-gradient(to top, dodgerblue 0%, transparent 70%),    
        linear-gradient(to bottom, transparent, rgba(var(--white), 0.4) 70%),
        var(--blue);  
        animation:_bg 10s infinite;
}
body:after { content:''; display:block;display:none; width:100%; height:100%; position:fixed; top:0; left:0; background-image:url(../img/cover-b.png); background-size:cover; opacity:1; mix-blend-mode:normal; z-index:1; }
@keyframes _bg {
    0%, 100% { background-color: var(--blue); }
    25% { background-color: var(--green); }
    50% { background-color: var(--yellow); }
    75% { background-color: var(--pink); }
}
bodyxxxx { display:grid; place-items:center; font-family:var(--font-family); color:var(--dark-color); background:var(--bg-gradient); }

.textanimate { display:block; width:100%; height:100%; position:fixed; top:0; left:0; opacity:1; mix-blend-mode:normal; z-index:1; }
.textanimate span { display:block; word-break:keep-all; width:600vw; text-align:left; position:absolute; top:50%; left:100%; transform:translateY(-50%); font-size:15vw; font-weight:bold; color:var(--gray); opacity:.05; animation:_loop 30s linear infinite; }
    @keyframes _loop { 100%{ left:-320vw; } 0%{ left:100vw; } }










@font-face {
    font-family:'neuehaas';
    src:url('../fonts/neue-haas-grotesk/NeueHaasDisplayMediu.ttf') format('truetype');
}

.en { font-family:'neuehaas'; /*'Raleway';*/ }
.en { font-family:'Roboto'; font-weight:100; /*'Raleway';*/ position:relative; }
.bold { font-weight:900; }


/* fadeouts of placeholder in focus */
input { display:inline-block; font-size:1em; min-width:300px; padding:12px; border:1px solid #ccc; border-radius:4px; }
input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}
input.disabled { background-color:rgba(255,255,255,.3); color:#888; font-weight:bold; }
textarea { display:block; font-size:1em; width:600px; max-width:100%; min-height:300px; padding:12px; border:1px solid #ccc; border-radius:4px; }
select { display:inline-block; font-size:1em; height:45px; min-width:300px; padding:0 12px; border:1px solid #ccc; border-radius:4px; }
select option { padding:12px; }
video::-webkit-media-controls { display:none; }

@media -ms-viewport, screen and (min-width:901px) {}
@media -ms-viewport, screen and (max-width:640px) {
    input, select, textarea { width:100%; min-width:auto; font-size:1.05em; margin:4px 0; }
}

hr { border:0; border-top:1px solid #ccc; }
img { max-width:100%; }
/*.oswald { font-family:'Roboto Condensed',sans-serif; xxxfont-family:'Oswald','Roboto',sans-serif; line-height:1.2; font-weight:bold; letter-spacing:.2em; }
.oswald.medium { font-weight:medium; }
.oswald.bold { font-weight:bold; }
.oswald.light { font-weight:300; }*/

/* SPINNER */
.loader { display:block; margin:0; position:fixed; top:0; left:0; width:100%; height:100%; z-index:222; background:var(--earthgreen); }
.loader .mask { display:block; margin:0; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--bggray); background:var(--earthgreen); overflow:hidden; }
.loader p { display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-size:1.2em; font-weight:bold; letter-spacing:.8em; width:auto; text-align:center; }
.loader p span { color:white; display:block; text-align:center; padding:0; font-size:1.7em; }
.loader p.dotset { display:block; position:fixed; top:calc(50% + .5em); left:50%; transform:translate(-50%,-50%); }
.loader p.dotset span { display:inline-block; background:white; width:6px; height:6px; border-radius:10px; margin:.2em .3em; padding:0; animation-name:_loadout; animation-duration:1s; animation-fill-mode:forwards; opacity:.2; }
.loader p.dotset span:nth-child(1) { animation-delay:.2s; }
.loader p.dotset span:nth-child(2) { animation-delay:.7s; }
.loader p.dotset span:nth-child(3) { animation-delay:1.1s; }

.loader .svg { display:block; position:fixed; top:50%; right:50vw; transform:translate(50%,-50%); width:5em; opacity:.5; }
.loader .svg .bar { stroke:#fff; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; transform:none; transform-origin:center; transition:all .2s; fill:none; }


.loader .d { display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:3vw; height:1vw; border-radius:0 3vw 3vw 0; border:1px solid white; xxxbackground:white; }
.loader .d { width:3vw; height:3vw; border-radius:0 50vw 50vw 0; xxxopacity:.1; }

@keyframes _loadout {
    0%{opacity:.2;} 100%{opacity:1;}
}

.lazyload { position:relative; opacity:0; transform:translateY(5vw); transition:all .7s; }
.lazyload.open { opacity:1; transform:translateY(0); }



@media -ms-viewport, screen and (min-width:641px) and (max-width:1199px) {}
@media -ms-viewport, screen and (max-width:640px) {
    .loader .svg { width:8em; }
}












.noscroll { overflow:hidden; }

/* Header */
.header { display:block; width:100%; z-index:166; position:fixed; top:0; left:0; }
    .header:before { content:''; display:block; width:100%; position:absolute; top:50%; left:0; }
    .header .row { position:relative; display:block; padding:0; width:100%; margin:0 auto; }
    .header .row:before { content:''; display:block; height:100%; width:1px; position:absolute; top:0; left:calc(75% - 1px); }

    .header .control-menu { display:block; margin:0; width:4vw; text-align:center; cursor:pointer; position:fixed; top:4em; left:5em; z-index:99; transition:all .3s; }
        .header .control-menu .svgobj { display:block; width:80%; position:relative; pointer-events:none; margin-bottom:.2vw; transform:translate(-1vw,1vw); width:100%; }
        .header .control-menu .svgobj .base { fill:var(--earthgreen); stroke:var(--black); stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-width:0; transition:all .4s; }
        .header .control-menu .svgobj .bar { fill:none; stroke:white;stroke:var(--earthgreen); stroke-width:12; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; transform:none; transform-origin:center; transition:all .2s; }
            .header .control-menu.hover .svgobj .barm1 { transform:translateX(60px); }
            .header .control-menu.hover .svgobj .barm2 { opacity:0; }
            .header .control-menu.hover .svgobj .barm3 { opacity:0; }
            .header .control-menu.hover .svgobj .barm4 { opacity:0; transform:translateX(20px); }
            .header .control-menu.hover .svgobj .barx1 { transform:translateX(-210px); transition:all .3s; }
            .header .control-menu.hover .svgobj .barx2 { transform:translateX(-210px); transition:all .4s; }
            .header .control-menu.hover .svgobj .barx3 { transform:translateX(-230px); transition:all .5s; }
            .header .control-menu.hover .svgobj .barx4 { transform:translateX(-230px); transition:all .7s; }
            .header .control-menu.hover .svgobj .earth { transform:translateX(-220px); transition:all .5s; }
            .header .control-menu.hover .svgobj .orbit { transform:translateX(-220px); transition:all .7s; }
        .header .control-menu:hover .svgobj .base { fill:#333; }
        .header .control-menu .name { color:var(--earthgreen); }
        .header .control-menu .namexx { position:absolute; top:.55vw; left:4.2vw; line-height:1.5; }

    .header .control-menu span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:2px; margin:.5em 0; background:#888f95; }
    .header .control-menu span:nth-child(1) { top:calc(50% - .3em); }
    .header .control-menu span:nth-child(2) { top:calc(50% + .3em); }
    .header .control-menu .notetext { display:block; margin:0; font-size:.6em; letter-spacing:.3em; width:185%;width:285%; padding:.2em; font-weight:900; word-break:keep-all; }
    .header .control-menu .notetextxxxx { background:#333; padding:.2em .8em; border-radius:0 3em 3em 0; color:white; word-break:keep-all; }
    .header .control-menu .notetext.green { color:var(--earthgreen); }
    .header .control-menu .notetext.tide { letter-spacing:.17em; }
    .header .control-menu.hover .notetext { opacity:0; }
    
    .header .float-menu { display:block; margin:0; position:fixed; top:6vw; left:6.5vw; z-index:6; display:none; }
    .header .float-menu a { display:block; color:#c1c2c8; font-weight:bold; xxtext-transform:uppercase; font-size:1.2em; margin:.5em 0; cursor:pointer; position: relative; }
    .header .float-menu a:after { content:''; transition:all .3s; display:block; width:0; height:0; border-bottom:2px solid #c1c2c8; position:absolute; bottom:0; left:0; }
    .header .float-menu a:hover:after { width:160%; }

    .header .top-menu { display:block; margin:0; position:fixed; top:4vw; right:5vw; z-index:6; display:none; transform:translateX(105%) rotate(90deg); transform-origin:top left; }
    .header .top-menu a { display:inline-block; color:#c1c2c8; font-weight:bold; xxtext-transform:uppercase; text-transform:uppercase; font-size:.8em; margin:.1em; cursor:pointer; position: relative; background:#333; color:white; padding:.5em .8em; }
    .header .top-menu a:after { content:''; transition:all .3s; display:block; width:0; height:0; border-bottom:2px solid #c1c2c8; position:absolute; bottom:0; left:0;display:none; }
    .header .top-menu a:hover:after { width:160%; }
    .header .top-menu a.selected { background:var(--earthgreen); }


.simplifyframe .header .control-menu { top:-1vw; left:1vw; }
.simplifyframe .header .control-menu .notetext { opacity:0; pointer-events:none; }
.simplifyframe .header .control-menu .base { fill:var(--black); }
.simplifyframe .header .top-menu { opacity:0; pointer-events:none; }


.logotext { display:block; height:8em; }




.copyright { display:block; position:fixed; bottom:1.8em; left:2.5em; letter-spacing:.01em; font-weight:900; font-size:.6em; z-index:64; transform-origin:top left; opacity:.4; }
.copyright { transform:rotate(-90deg); bottom:2em; left:2em; letter-spacing:.05em; }
    .copyright:after { content:''; display:inline-block; width:18vw; height:0; border-bottom:1px solid rgba(50,50,50,.5); margin-left:1em; vertical-align:middle; }

.nav { display:block; height:100vh; width:100vw; background:#f1f2f5; text-align:left; padding:10vw; position:fixed; top:0; right:0; display:none; z-index:97; }
    .nav a { display:block; box-sizing:border-box; cursor:pointer; position:relative; padding:0; text-align:left; font-size:2.5em; line-height:1; color:#888f95; font-weight:bold; transition:all .3s; border-bottom:2px solid #888f95; padding-top:.3em; }
        .nav a * { line-height:1; margin:0; padding:0; }
        .nav a strong { display:inline-block; margin-right:.03em; transition:all .2s; text-transform:uppercase; font-size:18vh; font-weight:600; letter-spacing:-.02em; line-height:1; margin-bottom:0; }
        .nav a b { display:inline-block; transform:translateY(-.1em); font-size:.5em; }
        .nav a.active,
        .nav a:hover { color:#333; }
        .nav a:hover strong { xxxletter-spacing:.022em; }
        .nav a.disabled { opacity:.2; pointer-events:none; }
    .nav a, .nav p { color:var(--earthgreen); }

.tracer { display:block; width:1em; height:1em; border-radius:5em; background-position:center; background-repeat:no-repeat; background-size:30%; background-color:#333; position:fixed; top:0; left:0; transform:translate(-50%,-50%); z-index:866; pointer-events:none; opacity:.1; transition:all linear .1s; }
    .tracer.hover { width:2.5em; height:2.5em; opacity:.3; }
    .tracer.hide { display:none; }
    .tracer.onpage { width:2.5em; height:2.5em; opacity:.3; transform:translate(-50%,-50%) rotate(0deg); background-image:url(../icon/icon-arrow.svg);  pointer-events:visible; margin-left:-1em; margin-top:-1em; }
    .tracer.onpage:hover { width:3.8em; height:3.8em; opacity:.8; }
    .tracer.onpage.above { xxxtransform:translate(-50%,-50%) rotate(180deg); }

.tracedot { display:block; width:.5em; height:.5em; border-radius:5em; background-color:#333; position:fixed; top:0; left:0; transform:translate(-50%,-50%); z-index:865; pointer-events:none; opacity:1; transition:all linear .002s; }

.tracer, .tracedot { display:none!important; }

.overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:89; }


@media -ms-viewport, screen and (min-width:641px) and (max-width:1199px) {
    .nav a { letter-spacing:0; }
    .nav a span { font-size:1.4em; display:inline-block; margin-right:1em; }
}
@media -ms-viewport, screen and (max-width:640px) {
    .header .row { border:0; }
    .header .control-menu { width:3em; top:.5em!important; left:1em; }
    .header .control-menu .notetext { display:none; }
    
    .nav { padding-top:40vw; }
    .nav a { font-size:1.5em; }
    .nav a strong { font-size:2em; }

    .tracer,.tracedot { display:none!important; }

    .copyright { left:1.2em; }
}

















/*
             _           _   
  __ ___ _ _| |_ ___ _ _| |_ 
 / _/ _ \ ' \  _/ -_) ' \  _|
 \__\___/_||_\__\___|_||_\__|
                             
*/


.debugger { display:block; padding:1em; background:green; position:fixed; top:0; right:0; display:none; }
.container { display:block; width:100%; height:auto; padding:0; position:relative; z-index:100; }
.page { display:block; padding:20vw; width:100%; height:100vh; margin:0; position:relative; }
.page .con { z-index:50; position:relative; }
.page .centerblock { display:block; width:60%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.page .centerblock.alignleft { text-align:left; }
.row { display:block; padding:0; width:100%; margin:0 auto; z-index:12; position:relative; text-align:center; }
.page .row { display:block; width:60%; color:#333; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.page .row.center * { text-align:center; }
.page .row.center.full { width:100%; }
.page .row .left { text-align:justify; }
.row .rightbox { width:70%; margin-left:30%; height:50vw; padding:20vw; }
.row .centerbox { display:block; margin:10vw; xxxxborder:1px dashed red; position:relative; }
.row .smaller { padding:0em .4em; color:white; background:#333; font-size:.9em; display:inline-block; width:auto; margin:.05em 0; }
.row * { line-height:1.5; color:inherit; }
.row h1 { font-size:6vw; line-height:1; }
.row h2 { font-size:2vw; margin-bottom:.5em; }
.row h3 { font-size:1.2vw; }
.row h4 { font-size:1.5vw; }
.row strong { font-size:1.4vw; letter-spacing:1px; line-height:2; margin-bottom:1em; }
.row p { font-size:1.0vw; letter-spacing:.05em; line-height:2; }
.row b { font-size:1.4vw; font-weight:normal; }


h1.display { font-size:9vw; line-height:.9; margin:0; margin-left:-.05em; margin-top:-.5em; position:relative; }
h1.display:before { content:''; display:block; width:100%; position:absolute; bottom:.25em; left:0; xxxborder-top:1px solid #333; }
h1.display.white:before { border-color:white; }
h1.display.noborder:before { display:none; }
h1.display.aboutsec { padding:1em; padding-bottom:0; }
h1.display.smallerfont { font-size:8vw; }
h1.display span { display:block; width:100%; height:100%; overflow:hidden; position:relative; }
h1.display .fix,
h1.display .block { display:inline-block; word-break:keep-all; width:auto; height:12vw; overflow:hidden; position:relative; overflow:hidden; padding:0; margin:0; line-height:1; }



@media -ms-viewport, screen and (min-width:641px) and (max-width:1199px) {
}
@media -ms-viewport, screen and (max-width:640px) {
    .page { padding:2em; height:auto; }
    .page .row { width:100%; position:relative; top:auto; left:auto; transform:none; }
    .page .centerblock { width:100%; position:relative; top:0; left:0; transform:none; }
    .row .centerbox { padding:1em; }
    .row h1 { font-size:2em; margin-bottom:.7em; }
    .row h2 { font-size:2em; margin-bottom:.7em; }
    .row h3 { font-size:1.2em; margin-bottom:.5em; }
    .row h4 { font-size:1em; }
    .row p { font-size:1em; text-align:justify; }
    .row b { font-size:1em; }
    
    .row .rightbox { width:100%; margin-left:0; height:auto; padding:2em 4em; }
}



.bgdeco { display:block; position:absolute; background:var(--bg); top:0; left:0; width:99vw; height:auto; z-index:-2;z-index:1992; pointer-events:none; }
.bgdeco .line { display:block; position:absolute; top:0; left:0; transform:translate(.25em,.25em); opacity:0;
    xxxxbackground:linear-gradient(to right top, #fff 0%,#fff 49.9%,#000 50%,#000 51%,#fff 51.1%,#fff 100%);
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width=".2"/></svg>');
}
.bgdeco .line:last-child { display:none; }
.bgdeco .line.reverse { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="100%" y1="0" x2="0" y2="100%" stroke="black" stroke-width=".2"/></svg>');
}
.bgdeco .dot { display:block; position:absolute; background:var(--black); top:0; left:0; width:.5em; height:.5em; border-radius:1em; opacity:.2; }
.bgdeco .dot1 { top:64vh; left:calc(24% + 24vw); }
.bgdeco .dot2 { top:124vh; left:81vw; }
.bgdeco .dot3 { top:166vh; left:43vw; }
.bgdeco .dot4 { top:211vh; left:54vw; }
.bgdeco .dot5 { top:260vh; left:30vw; }
.bgdeco .dot6 { top:308vh; left:87vw; }
.bgdeco .dot7 { top:359vh; left:27vw; }
.bgdeco .dot8 { top:414vh; left:54vw; }
.bgdeco .dot9 { top:455vh; left:33vw; }







.bgcover { display:block; position:fixed; background:var(--bg); top:50%; left:50%; width:100vw; height:100vh; z-index:-2; transform:translate(-50%,-50%); overflow:hidden; }
.bgobj { display:block; position:fixed; top:50%; left:50%; width:100vw; height:100vh; z-index:-1; transform:translate(-50%,-50%); overflow:hidden; }
    .bgobj span { display:block; position:fixed; top:50%; left:50%; width:calc(110vw - 2em); height:calc(110vw - 2em); background:white; opacity:0; transform:translate(-50%,-50%); border-radius:110vw; }


.bannerblock { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:16; }

.banner { height:100vh; width:100vw; position:relative; overflow:hidden; }
    .banner >img { width:120%; height:120%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); xxxxmix-blend-mode:overlay; }
    .banner video { width:102%; height:102%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); mix-blend-mode:overlay; display:none; }
    .banner .con { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:15; width:70vw; overflow:visible; }
        .banner .con h1 { line-height:1; font-weight:bold; font-size:12vw!important; font-size:3vw!important; width:80vw; color:white; }
        .banner .con h2 { line-height:1; font-size:3vw!important; color:white; }
    .banner .grid { display:block; width:100vw; height:100vh; position:absolute; top:0; left:0; z-index:2; }
        .banner .grid .item { display:block; position:absolute; width:100%; height:100%; overflow:hidden; xxxxbackground:#333; transition:all 3s; opacity:0; }
        .banner .grid .item img { width:100%; height:100%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; xxxxmix-blend-mode:overlay; mix-blend-mode:multiply; }
        .banner .grid .item:nth-child(1) { top:0; left:0; width:50%; height:100%; transition:all 2.4s; background:#f1f2f5; } 
        .banner .grid .item:nth-child(2) { top:0; left:50%; width:50%; height:50%; transition:all 2.7s; background:#eaebee; }
        .banner .grid .item:nth-child(3) { top:50%; left:50%; width:50%; height:50%; transition:all 3.0s; background:#e1e2e5; }
        .banner .grid.set1 .item:nth-child(1) { top:0; left:0; width:60%; height:100%; } 
        .banner .grid.set1 .item:nth-child(2) { top:0; left:60%; width:40%; height:40%; } 
        .banner .grid.set1 .item:nth-child(3) { top:40%; left:60%; width:40%; height:60%; } 
        .banner .grid,
        .banner .grid .itemx { border:10px solid white; }

        .bggraph { display:block; position:absolute; transform:translate(-50%,-50%); border:1px solid var(--black); top:50%; left:50%; opacity:0; }
        .bggraph.triangleline { left:43%; transform:translate(-50%,-50%) rotate(45deg); width:0; height:45vw; border:0; border-right:1px solid var(--black); height:0; }
        .bggraph.circle { width:40vw; height:40vw; border-radius:30vw; width:0; height:0; }
        .bggraph.gridline { width:105vw; height:70vh; width:0; height:0; }
        .bggraph.gridline:before,
        .bggraph.gridline:after { content:''; display:block; width:1px; height:100vh; position:absolute; transform:translate(-50%,-50%); border-right:1px solid var(--black); top:50%; left:40%; }
        .bggraph.gridline:after { left:85%; }

    .svgcover { display:block; width:100vw; height:100vh; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; pointer-events:none; }
        .svgcover g { display:block; xxxtransition:all .4s; }
        .svgcover g path { transition:all .4s; }
        .svgcover g .area { fill:transparent; }
        .svgcover g.fine:hover path { fill:red; }
        .svgcover g.sign:hover path { fill:rgb(0,255,0); }
        .svgcover g.velop:hover path { fill:blue; }
        .svgcover rect { opacity:.02; fill:transparent!important; }
        .svgcover.fixedcolor g path { fill:#333!important; }


    .coversvgobj { display:block; width:auto; height:11vw; pointer-events:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
        .coversvgobj svg { display:block; height:100%; opacity:.9; }

    .coverdot { display:block; width:2em; height:2em; background:#333; color:white; border-radius:5em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; cursor:pointer; opacity:.5; transition:all .2s; }
        .coverdot:before { content:''; display:block; width:10em; height:10em; border-radius:5em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; cursor:pointer; }
        .coverdot span { display:block; font-size:.8em; color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
        /*.coverdot.coverdot1 { top:31%; left:58%; }
        .coverdot.coverdot2 { top:71%; left:26%; }
        .coverdot.coverdot3 { top:67%; left:72%; }*/
        .coverdot.coverdot1 { top:60%!important; left:40%!important; }
        .coverdot.coverdot2 { top:60%!important; left:50%!important; }
        .coverdot.coverdot3 { top:60%!important; left:60%!important; }
        .coverdot.slow { transition:all 1.2s; }

    .covericon { display:block; width:4em; height:4em; background:transparent; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; cursor:pointer; transition:all .2s; xxxxanimation:3s _flash ease-in-out infinite; xxxxborder:2px solid red; transform-origin:center; xxxxmix-blend-mode:luminosity; }
        .covericon:hover { transform:translate(-50%,-50%) scale(1.3); }
        .covericon:before { content:''; display:block; width:10em; height:10em; border-radius:5em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; cursor:pointer; }
        .covericon.covericon1 { top:50%; left:43%; animation-delay:0; }
        .covericon.covericon2 { top:50%; left:50%; animation-delay:.3s; }
        .covericon.covericon3 { top:50%; left:57%; animation-delay:.6s; }
            @keyframes _flash { 0%,10%,100%{transform:translate(-50%,-50%);}.5%{transform:translate(-50%,-50%) scale(0);} }
        .covericon.fixed { animation:none; mix-blend-mode:overlay; }

    .floathint { dipslay:block; position:absolute; top:67%; left:50%; transform:translate(-50%,-50%); animation:1s _flashover infinite; display:none; }
    .floathint:before, .floathint:after { content:''; dipslay:block; position:absolute; top:50%; width:8vw; height:0; border-top:1px solid var(--black); }
        @keyframes _flashover { 0%,100%{opacity:.3;}50%{opacity:.7;} }
    .floathint:before { left:-10vw; }
    .floathint:after { right:-10vw; }
    .floathint.hide { display:none; }

.hoverobj { text-align:center; position:absolute; width:31vw; xxxxtop:50%!important; xxxxleft:50%!important; xxxbackground:#333; padding:2.5em .2em; transform:translate(-50%,-50%); padding-right:7vw; opacity:0; text-align:center; xxxborder:1px solid red; }
    .hoverobj .line { display:block; position:absolute; top:0; left:0; background:#333; width:0; height:5px; display:none; }
    .hoverobj h3 { text-align:left; font-size:2em; margin-top:.3em; margin-bottom:1em; line-height:1; display:none; }
    .hoverobj p { text-align:left; font-size:1em; font-size:1.2em; letter-spacing:-.02em; padding:1em; }
    .hoverobj.open { opacity:1; }
    .hoverobj.open .line { width:100%; }


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

    .bgcover,
    .bgobj { display:none; }

    .coversvgobj { height:7em; }
    .coversvgobj.de { transform:translate(-70%,-50%); }
    .coversvgobj.sign { transform:translate(-35%,-50%); }
    .covericon { display:none; }

}














.bgclip { position:relative; overflow:hidden; background:#eee; }
    .bgclip img { width:120%; height:120%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); mix-blend-mode:screen; }

.speakobj { display:block; width:100vw; height:300vh; position:absolute; top:90vh; left:0; z-index:4; xxxposition:fixed; z-index:44; mix-blend-mode:screen; pointer-events:none; }
    .speakobj .item { display:inline-block; padding:0; background:white; position:absolute; xxtransform:translate(-50%,-100%); color:#333; } 
    .speakobj .item.circle { width:.5em!important; height:.5em!important; border-radius:50%; }
    .speakobj .item.rect { width:1em!important; height:.5em!important; border-radius:0; }
    .speakobj .item.triangle { width:0!important; height:0!important; border-style:solid; border-width:.5em .5em 0 0; border-color:#007bff transparent transparent transparent; background-color:transparent!important; } 
    .speakobj .item.yellow { background-color:#ff0200; } 
    .speakobj .item.purple { background-color:#ff0200; } 
    .speakobj .item.green { background-color:#ff0200; } 
    .speakobj .item.white { background-color:#fff; } 

.homepage { position:relative; padding-top:100vh; }
    .homepage .guideline { height:0; xxtransition:all 1s; display:block; width:0; border-right:1px solid #888f95; position:absolute; top:90vh; left:95vw; z-index:50; }
    .homepage .guideline:before { content:'ABOUT MXD'; font-weight:bold; font-size:.7em; letter-spacing:.2em; display:block; transform:rotate(90deg); position:absolute; top:-4em; left:-2.3em; z-index:50; cursor:pointer; }
    .homepage .guideline:after { content:''; display:block; width:5vw; height:5vw; border:1px solid #888f95; position:absolute; top:0; left:0; transform:translate(-50%,-50%); z-index:50; cursor:pointer; opacity:0; }
    .homepage .guideline.poscenter { top:120vh; left:55vw; }
    
    .homepage .row.page { padding:12vw; }
    .homepage .svgblock { display:block; width:30vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .homepage .svgblock rect { fill:#5422d1; }
    .homepage .svgblock polygon { fill:#fff200; }
    .homepage .svgblock circle { fill:#fff200; opacity:.5; }

.bgvideo { position:absolute; top:0; left:0; width:100vw; height:100vh; object-fit:cover; z-index:-1; mix-blend-mode:multiply; }

.abouthistorysec { border-top:3px solid transparent; }
    .abouthistorysec .centerbox { margin-bottom:-10vw!important; padding-bottom:0; xxxxborder:1px dashed gray; }
    .abouthistorysec .centerbox .display { margin:15vw 10vw 5vw 10vw; }

.aboutbg { display:block; width:89.5vw;width:100vw;width:0; padding:0; height:100vh; padding-bottom:15vw; color:white; background:#333; position:relative; z-index:64; line-height:1.8; position:fixed; top:0; left:0; xxopacity:0; transform:scale(1.2); }
.aboutbg .arrowobj { display:block; width:20vw; position:absolute; top:42%; left:25%; transform:translate(-50%,-50%); }
.aboutbg .con { display:block; width:60vw; position:absolute; top:42%; left:68%; transform:translate(-50%,-50%); }
.aboutbg * { color:#333; }
.aboutbg h2 { display:block; overflow:hidden; width:60vw; height:8.5em; position:relative; margin-top:2.8em; xxxxborder:1px solid red; }
.aboutbg h2 span { display:block; width:40vw; font-size:3.5em; margin:.8em 0; position:absolute; top:0; left:0; }
.aboutbg p { display:block; overflow:hidden; width:60vw; height:1.6em; position:relative; xxxxborder:1px solid red; }
.aboutbg p span { display:block; width:40vw; line-height:1.8; position:absolute; top:0; left:0; }
.aboutbg .story .thumb { display:inline-block; width:5vw; height:3vw; margin:.5em; overflow:hidden; }
.aboutbg .story .thumb img { display:block; width:5vw; height:3vw; }
.aboutblock { xxxborder-top:3px solid gray; position:relative; position:fixed; top:0; opacity:.01; }
.fixedtxt { position:fixed; top:0; opacity:0; }

.aboutsec { position:relative; padding:30vw 12vw 15vw 12vw; height:70vw; text-align:left; margin-top:0!important; }
    .aboutsec.white * { color:white; }
    .aboutsec .label { position:absolute; top:14vw; left:50%; font-size:.9em; }
    .aboutsec .label p { font-size:.9em; letter-spacing:.2em; margin-bottom:2em; }
    .aboutsec h3 { font-size:3vw; }
    .aboutsec h2 { font-size:2vw; margin:1em 0 .5em 0; position:relative; font-weight:900; letter-spacing:.1em; display:inline-block; padding-right:.5em; }
    .aboutsec h2 span { display:inline-block; height:8px; width:30%; background:white; position:absolute; top:50%; left:100%; }
    .aboutsec p { padding-right:20vw; }
    .aboutsec.nobottom { padding-bottom:0; }




.storybg { display:block; width:100vw; padding:0; height:100vh; position:relative; z-index:64; line-height:1.8; /*background:var(--gray);background-image:url(../img/bg3.jpg); background-size:cover;*/ xxborder:3px solid red; }
.storybg .arrowobj { display:block; width:20vw; position:absolute; top:42%; left:25%; transform:translate(-50%,-50%); }
.storybg .con { display:block; width:60vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; }
.storybg * { color:#333; }
.storybg h2 { display:block; overflow:hidden; width:60vw; height:8.5em; position:relative; margin-top:2.8em; xxxxborder:1px solid red; }
.storybg h2 span { display:block; width:40vw; font-size:3.5em; margin:.8em 0; position:absolute; top:0; left:0; }
.storybg p { display:block; overflow:hidden; width:60vw; height:1.6em; position:relative; xxxxborder:1px solid red; }
.storybg p span { display:block; width:40vw; line-height:1.8; position:absolute; top:0; left:0; padding:0 .2em; }
.storybg .story { font-size:1.7em; position:relative; display:block; width:auto; height:1.5em; overflow:hidden; }
.storybg .story { font-size:2.6vw; position:relative; display:block; width:auto; height:1.5em; overflow:hidden; }
.storybg .story.strong { font-size:3.3em; font-weight:bold; }
.storybg .story .thumb { display:inline-block; width:5vw; height:3vw; margin:.2em; overflow:hidden; vertical-align:middle; cursor:pointer; transform:translateY(-.1em); }
.storybg .story .thumb img { display:block; width:100%; object-fit:cover; height:100%; }
.storybg .story>span { display:block; width:60vw; margin:0; overflow:hidden; position:absolute; top:0; left:0; font-weight:bold; }
.storybg .story>span .green { color:var(--earthgreen); }
/*.storybg .story span { background:var(--black); color:white; }
.storybg .story span { background:white; color:var(--earthgreen); }
.storybg .story span { background:var(--earthgreen); color:var(--black);color:white; }*/



.storybg .story.strong span { color:var(--earthgreen); }
.storybg .btn-goon { cursor:pointer; display:block; float:right; transform:translate(-8em,5em); margin-bottom:-12em; }
.storybg .btn-goon span { text-align:right; }
.storybg .btn-goon svg { display:block; width:2.7em; }
.storybg .btn-goon:after { content:'CONTINUE'; display:block; letter-spacing:2px; font-size:.5em; position:absolute; top:120%; left:0; }
.storybg .btn-goon:hover span { background:var(--earthred); }
/*.storybg .btn-goon span { color:white; text-align:right; font-size:.8em; }
.storybg .btn-goon:hover span { color:var(--earthgreen); }
.storybg .btn-goon:hover span:before { width:16vw; left:-18vw; }*/
.storybg .starbg { display:block; width:100%; height:100%; overflow:hidden; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); }
    .storybg .star { display:block; width:60vw; height:1em; position:absolute; top:0; left:0; transform-origin:left; }
    .storybg .star span { display:block; width:.2em; height:.2em; position:absolute; transform:translate(-50%,-50%); top:50%; left:0; transform:translate(-50%,-50%); background:white; background:var(--earthgreen);background:white; border-radius:1em; }
    /*
    .storybg .star span:before { content:''; display:block; width:100%; height:0; border-top:2px solid white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .storybg .star span:after { content:''; display:block; width:0; height:100%; border-left:2px solid white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }*/


.coverpage { display:block; width:100vw; padding:0; height:100vh; position:relative; z-index:64; line-height:1.8; }
.coverpage video { display:block; width:100vw; padding:0; height:100vh; position:absolute; z-index:1; object-fit:cover; opacity:.1; }
.coverpage .bannerbox { display:block; width:70vw;xxwidth:100vw; height:80vh; position:absolute; z-index:6; bottom:7vw; right:0; }
.coverpage .con { display:block; width:52vw; z-index:16; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.coverpage * { color:#333; }
.coverpage h2 { display:block; overflow:hidden; width:60vw; height:8.5vw; position:relative; margin-top:2.8vw; xxxxborder:1px solid red; }
.coverpage h2 span { display:block; width:40vw; font-size:3.5vw; margin:.8vw 0; position:absolute; top:0; left:0; background:var(--black); color:white; overflow:hidden; }
.coverpage p { display:block; overflow:hidden; width:60vw; height:1.6em; position:relative; }
.coverpage p span { display:block; width:40vw; line-height:1.8; position:absolute; top:0; left:0; }
.coverpage .story { font-size:3em; position:relative; display:block; width:auto; height:1.5em; overflow:hidden; margin-right:.12em; }
.coverpage .story.strong { font-size:3.6em; font-weight:bold; }
.coverpage .story span { display:block; width:60vw; margin:0; background:var(--black); color:white; overflow:hidden; position:absolute; top:0; left:0; }

@keyframes _flashbg { 0%,100%{opacity:.8}50%{opacity:1} }
.coverpage .btn-scrolldown { display:flex;display:block; align-items:center; transition:all .2s; font-size:4.3em; font-weight:bold; width:10vw; height:1.41em; text-align:center; margin:0; cursor:pointer; overflow:hidden; background:var(--earthgreen); animation:_flashbg 1.2s ease-in-out infinite; }
.coverpage .btn-scrolldown { position:absolute; top:0; left:0; }
.coverpage .btn-scrolldown span { display:block; width:auto; margin:0; color:white; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%,-.65em); font-size:.5em; transition:all ease-in-out .3s; background:transparent!important; }
.coverpage .btn-scrolldown span>span { font-size:.5em; position:relative; top:auto; left:auto; transform:none; }
.coverpage .btn-scrolldown:hover { background:var(--earthred); }
.coverpage .btn-scrolldown:hover span { top:-.7em; }

.coverpage .con.flex { display:flex; flex-wrap:wrap; }
.coverpage .con.flex .story { display:block; }



.parallaxbox { display:block; width:100vw; padding:0; height:100vh; position:absolute; top:0; left:0; z-index:0; xxoverflow:hidden; }
.parallaxbox img { display:block; width:30vw; height:40vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; opacity:.1; }
.parallaxbox img.midright { top:30%; left:75%; }
.parallaxbox img.midleft { top:60%; left:35%; height:30vw; width:36vw; }





.projectdeco { font-size:8vw!important; font-weight:100; width:auto; line-height:.9!important; overflow:hidden; position:relative; right:12vw; height:8vw; }
.projectdeco span { font-size:8vw!important; font-weight:100; line-height:.9!important; position:absolute; top:0; right:0; transform:translateX(100%); }
.projectdeco.strong span { font-weight:500; }
.decolineright:after { content:''; display:block; height:0; width:50vw; position:absolute; top:50%; left:110%; border-top:1px solid var(--black); }




.logoset { display:block; width:100%; z-index:9; pointer-events:none; margin:1em 0; position:relative; }
    .aboutbg .logoset { width:60vw; height:18em; overflow:hidden; position:absolute; top:32vw; left:20vw; }
    .logoset .mask { /*position:absolute; top:0; left:0;*/ width:auto; height:auto; width:55vw; width:100%; padding:8em 15vw; display:block; text-align:left; text-align:center; }
    .logoset .mask .img { display:inline-block; vertical-align:middle; margin:1.5em 3em; height:3.3vw; width:auto; position:relative; top:auto; left:auto; transform:none; }
    .logoset .mask .sep { display:inline-block; margin:0 1em; height:6vw; width:0; border-right:1px solid gray; vertical-align:middle; }
    .logoset .img { display:inline-block; vertical-align:middle; margin:0 6em 0 0; height:3vw; width:auto; position:relative; top:auto; left:auto; transform:none; }

.featureproject { margin-top:50vh;margin-top:20vh; position:relative; }
.featureproject .clienttitle { display:block; position:absolute; top:-8vw; left:50%; transform:translate(-50%,0); text-align:center; background:var(--black); color:white; width:18vw; height:18vw; border-radius:18vw; }
.featureproject .clienttitle span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:.7em; font-weight:bold; letter-spacing:.5em; text-align:center; color:white; margin-left:.5em; line-height:1; }
.featureproject .titleline { display:block; border-right:1px solid #333; width:0; height:10vw; margin:0 auto 2vw auto; }


@media -ms-viewport, screen and (min-width:1800px) {
    .coverpage .story.strong { font-size:4.3em; font-weight:bold; }
}
@media -ms-viewport, screen and (max-width:1300px) and (min-width:641px) {
    .coverpage .con { width:60vw; }
    .coverpage .story.strong { font-size:2.9em; }
    .coverpage .btn-scrolldown { font-size:3.4em; }
    .projectdeco { height:5vw!important; }
    .projectdeco span { font-size:5vw!important; }

}
@media -ms-viewport, screen and (max-width:640px) {

    .abouthistorysec .centerbox .display { margin:2em 0; }
    .aboutbg { width:100vw; padding:2em; }
    
    .banner .con h1 { font-size:3em!important; width:90%; margin-bottom:0; }
    .banner .grid .item:nth-child(1) { top:0; left:0; width:100%; height:60%; } 
    .banner .grid .item:nth-child(2) { top:60%; left:0; width:50%; height:40%; } 
    .banner .grid .item:nth-child(3) { top:60%; left:50%; width:50%; height:40%; }


    .aboutbg { width:100vw; height:auto; padding:2em 4em; }
    .aboutbg h2, 
    .aboutbg p, 
    .aboutbg .logoset,
    .aboutbg h2 span, 
    .aboutbg p span, 
    .aboutbg .logoset .mask { width:100%; height:auto; position:relative; top:auto; left:auto; text-align:justify; }
    .logoset .mask .img { margin:0; height:auto; width:33.33%; padding:.4em;}

    
/*
    .coverpage .con { width:87%; }
    .coverpage .story { width:auto; }
    .coverpage .story span { width:auto; padding:.2em 0; }
    .coverpage .story.strong,
    .coverpage .btn-scrolldown { font-size:1.94em; }
    .coverpage .btn-scrolldown { padding:0 .94em; }
    */
    
    /*
    .coverpage .con { width:87%; }
    .coverpage .story { width:auto; display:inline-block; overflow:none; margin:0; height:auto; }
    .coverpage .story span { width:auto; position:relative; padding:.2em 0; }
    .coverpage .story.strong,
    .coverpage .btn-scrolldown { font-size:1.94em; display:inline-block; }
    .coverpage .btn-scrolldown { position:relative; top:auto; left:auto; height:1.78em; width:4em; }
    */
    .coverpage .con { display:flex; width:190px; height:22em; }
    .coverpage .story.strong { width:1.5em; height:130vw; font-size:2em; }
    .coverpage .story.strong span { writing-mode:vertical-lr; text-orientation:upright; padding:0; width:1.45em; }
    .coverpage .btn-scrolldown { display:none; }
    /*/
    
    /*
    
    .storybg .con { display:flex; width:240px; height:28em; }
    .storybg .story { width:2.5em; height:130vw; font-size:1.4em; }
    .storybg .story.strong { width:2.5em; height:130vw; }
    .storybg h2 span,
    .storybg .story span { writing-mode:vertical-rl; text-orientation:upright; padding:.3em 0; width:1.55em; letter-spacing:1px; }
    .storybg .btn-goon { display:none; }
    */

    .storybg .con { display:block; width:100%; height:auto; padding:2em 4em; }
    .storybg .story { width:50vw; height:auto; font-size:1.4em; margin:.2em; }
    .storybg h2 span,
    .storybg .story span { padding:.3em 0; letter-spacing:1px; position:relative; padding:.3em .5em; border-radius:.3em; width:100%; }

    .storybg .btn-goon { float:none; left:50%; transform:translate(-50%,5em); position:absolute; }

    .featureproject .clienttitle { width:8em; height:8em; border-radius:10em; }
}





























.graphboxframe { display:block; position:fixed; top:0; left:0; height:100vh; width:100vw; }
.graphbox { display:block; position:absolute; top:50%; left:30%; transform:translate(-50%,-50%); width:30vw; height:30vw; }
    .graphbox img { display:block; width:100%; }
    .graphbox svg { display:block; width:40%; mix-blend-mode:multiply; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .graphbox svg polygon, .graphbox svg rect, .graphbox svg circle { fill:transparent; stroke:#333; stroke-width:10; stroke-linecap:square; stroke-linejoin:square; stroke-dasharray:5; stroke-miterlimit:10; transition:all .3s; }
    .graphbox .triangle { mix-blend-mode:normal; }


    .graphbox .shape { display:block; border:2px solid var(--black); width:20vw; height:20vw; mix-blend-mode:multiply; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; xxxtransition:all .5s ease-in-out; opacity:.05; }
    .graphbox .shape.rect {}
    .graphbox .shape.triangle { border-right:0; border-bottom:0; }
    .graphbox .shape.triangle:after { content:''; width:80vw; height:0; border-top:2px solid var(--black); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); }
    .graphbox .shape.circle { border-radius:50vw; }


        .graphbox.history .rect,
        .graphbox.history .circle,
        .graphbox.history .triangle { width:20vw; height:20vw; top:50%; }

        .graphbox.define .rect,
        .graphbox.define .circle,
        .graphbox.define .triangle { width:16vw; height:16vw; top:50%; }
        .graphbox.define .rect {}
        .graphbox.define .triangle { top:30%; }
        .graphbox.define .circle { top:70%; }

        .graphbox.design .rect,
        .graphbox.design .circle,
        .graphbox.design .triangle { width:16vw; height:16vw; top:50%; }
        .graphbox.design .rect {}
        .graphbox.design .triangle { top:30%; }
        .graphbox.design .circle { top:70%; }

        .graphbox.develop .rect,
        .graphbox.develop .circle,
        .graphbox.develop .triangle { width:12vw; height:12vw; }
        .graphbox.develop .rect { top:25%; left:75%; }
        .graphbox.develop .triangle { top:25%; left:25%; }
        .graphbox.develop .circle { top:75%; left:75%; }



    .btn-svgnext { display:block; width:3em; height:3em; border:1px solid #333; overflow:hidden; border-radius:3em; margin-top:1em; cursor:pointer; transition:all .2s; position:relative; }
    .btn-svgnext svg { display:block; width:1.6em; height:1.6em; transition:all .2s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .btn-svgnext svg polygon { fill:#333; }
    .btn-svgnext:hover { background:#333; }
    .btn-svgnext:hover:before { width:3.3em; height:3.3em; background:#333; }
    .btn-svgnext:hover svg { animation:.4s _flyarrow ease-in-out forwards; }
    .btn-svgnext:hover svg polygon { fill:white; }
    @keyframes _flyarrow { 0%{top:50%;}50%{top:150%;}51%{top:-50%;}100%{top:50%;} }



.filterbox { display:block; padding:1em; position:fixed; left:0; display:none; }
    .filterbox a { padding:1em; border:1px solid red; cursor:pointer; }
    .filterbox a:hover { background:rgba(0,0,0,.05); }
    .filterbox a.selected { background:#333; color:white; }


.caseblock { display:flex; padding:2vw 8vw; margin:0; width:100%; }
    .caseblock .case { display:block; width:33.33%; padding:1.2em; cursor:pointer; background:transparent; text-align:left!important; }
    .caseblock .case .imgobj { display:block; transition:all .25s; width:100%!important; height:16vw!important; position:relative!important; top:auto!important; left:auto!important; transform:none!important; overflow:hidden; background:#333; }
    .caseblock .case img { display:block; transition:all .25s; width:100%!important; height:auto!important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .caseblock .case strong { transition:all .3s; display:block; font-size:1.2em; margin:1em 0 .3em 0; text-align:left!important; }
    .caseblock .case strong:before { transition:all .3s; display:block; font-size:1.2em; margin:1em 0 .3em 0; text-align:left!important; }
    .caseblock .case p { transition:all .4s; display:block; font-size:1em; opacity:.5; text-align:left!important; }
    .caseblock .case:hover .imgobj img { transform:translate(-50%,-50%) scale(1.1); opacity:.8; }
    .caseblock .case:hover strong { margin-top:2em 0 .3em 0; }
    .caseblock .case.disabled { pointer-events:none; }
    .caseblock .case.disabled img { opacity:.7; }
    .caseblock .case.disabled strong,
    .caseblock .case.disabled p { opacity:.7; }
    .caseblock .case.disabled:after { content:'COMING SOON'; display:inline-block; font-size:.7em; font-weight:bold; letter-spacing:.1em; opacity:.7; color:red; }

        .mainobj.onthumb .caseblock { padding:0; margin:.5em auto; width:80%; }
        .mainobj.onthumb .caseblock .case { height:3vw; }
        .mainobj.onthumb .caseblock .case .imgobj { height:3vw; }
        .mainobj.onthumb .caseblock .case .imgobj img { top:1.5vw; }



.contactblock { padding:10vw; color:#333; }
    .contactblock.center * { text-align:center; }
    .contactblock strong { color:var(--earthgreen); font-size:1.2em; }
    .icon-email { display:inline-block; width:3em; height:3em; background-image:url(../icon/icon-email.svg); background-position:center; }
    .btn-email { display:inline-block; width:3em; height:3em; xxbackground-image:url(../icon/icon-email.svg); background-position:center; background-repeat:no-repeat; background-size:60%; border-radius:8em; transition:all .3s; border:1px solid #333; position:absolute; bottom:0; right:3em; cursor:pointer; }
    .btn-email svg { display:inline-block; width:1.5em; height:1.5em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .btn-email svg path { fill:#333; transition:all .3s; }
    .btn-email:hover { background-color:#333; }
    .btn-email:hover svg path { fill:white; }


.decoimgright { display:block; width:70vw; height:30vw; background:gray; margin:15vw 0 -5vw 30vw; overflow:hidden; }
.decoimgright img { display:block; width:100%; positoion:absolute; top:50%; left:50%; transform:translate(-50%,-50%); mix-blend-mode:luminosity; }

.historyblock { display:block; margin:10vw 20vw; }
    .historyblock .centerbox { display:block; height:100%; position:relative; margin:10vw; }
    .historyblock .mask { display:flex; flex-wrap:wrap; /*width:300%; height:20vw; /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); xxxborder:1px solid green;*/ }
    .historyblock .mask .item { display:block; position:relative; width:100%; padding:2em 0; border-bottom:1px solid #333; }
    .historyblock .mask .item h2 { font-size:2vw; }
    .historyblock .mask .item strong { font-size:1em; }
    .historyblock .mask .item p { font-size:.9em; }










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



    .graphbox { top:50%; left:50%; transform:translate(-50%,-50%) scale(2); opacity:.3; width:60vw; height:60vw; }
    
    
    .caseblock { display:block; padding:0; }
    .caseblock .case { width:100%; }
    .caseblock .case .imgobj { height:45vw!important; min-height:auto!important; }
        .mainobj.onthumb .caseblock { display:flex; padding:1em; margin:.5em auto; width:100%; text-align:center; }
        .mainobj.onthumb .caseblock .case,
        .mainobj.onthumb .caseblock .case .imgobj { height:6vw; width:30%; }
        .mainobj.onthumb .caseblock .case .imgobj img { top:1.5vw; }


    .contactblock { padding:10em 4em; }
    .btn-email { margin:2em 0 10em 0; position:relative; bottom:auto; right:auto; }

    .decoimgright { width:80vw; height:70vw; }
    .decoimgright img { height:100%; width:100%; object-fit:cover; }
    .historyblock { margin:2em 0; }




}





/*
  _    _        
 | |__| |_ _ _  
 | '_ \  _| ' \ 
 |_.__/\__|_||_|
                
*/

.btn { display:block; text-align:center; margin:1em auto; cursor:pointer; }
.btntxt { cursor:pointer; transition:all .3s; }
.btntxt:hover { letter-spacing:.1em; color:var(--earthgreen); }

@media -ms-viewport, screen and (max-width:640px) {
}