.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

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

@font-face { font-family:'et1'; src:url(asset/fonts/nasalization-rg.otf); }

:root {
    --bggray:#bef1c4;/*#d8eae3;/*#888f95*/
    --black:#353148;
    --white:white;
    --bg:#31383f;
    --darkbg:#2e2e2e;
    --gray:#333;
    


    --green1:#687460;
    --green2:#4d4e48;
    --blue1:#2575fc;
    --blue2:#6a11cb;

    --red:#f93d3d;


    --mlightbgray:#b2babd;
    --mlightbgray:#d6dbdd;
    --transwhite:rgba(200,202,205,.2);

    --border:rgba(200,200,200,.25);
    --border2:rgba(200,200,200,.5);
    ---border:1px solid rgba(0,0,0,.1);

    --imgthumbh_home:18vw;
    xxx--imgthumbh_home:28vw;
    --imgthumbh:15vw;
    --imgthumbh_in4:25vw;


    --workitemh:12vw;
    --workitemh2:20vw;
    --itemborder:1px solid rgba(200,200,200,.26);

    --bezier:cubic-bezier(.14,.1,.26,1);
    --bezier:cubic-bezier(.4,0,.2,1); /*. https://curveeditor.com/#0.40,0.00,0.20,1.00   */



}


input[type="radio"] {
  accent-color: red;
}

input[type="checkbox"] {
  accent-color: #BD2d69; /* A custom pink color */
}

.lenis.lenis-smooth { scroll-behavior:auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
.lenis.lenis-smooth iframe { pointer-events:none; }
.scroll-progress { position:fixed; top:0; left:0; width:0%; height:3px; background:linear-gradient(to right, var(--blue2), var(--blue1)); z-index:1000; transition:width .1s; }
.scroll-indicator { position:fixed; bottom:2rem; right:2rem; background:var(--blue1); color:white; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,0.15); transition:all 0.3s ease; z-index:999; }
.scroll-indicator.btn-talk { width:auto; height:auto; border-radius:5em; word-break:keep-all; font-size:1em; padding:1.2em 2.2em; }
.scroll-indicator.hide { bottom:-7rem; }
.scroll-indicator:hover { background:#1a5fd8; transform:translateY(-3px); }

.scroll-indicator.btn-back { position:fixed; bottome:2rem; right:11em; width:auto; height:auto; border-radius:5em; word-break:keep-all; font-size:1em; padding:1.2em 2.2em; text-decoration:none; font-weight:bold; }
.scroll-indicator.hide { bottom:-7rem; }
.scroll-indicator:hover { background:#1a5fd8; transform:translateY(-3px); }

.green1 { color:var(--green1)!important; }
.green2 { color:var(--green2)!important; }
.darkgray { color:darkgray; }
.darkred { color:darkred; }

.filterblur { filter:blur(50px); -o-filter:blur(15px); }



/* 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; xxxxbackground:var(--bg);xxxbackground:white; }
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; }
body.notalk .btn-talk,
body.notalk .footer { display: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:'Arial',sans-serif; font-size:1em; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; color:var(--black); letter-spacing:-.02em; text-align:left; line-height:1.4; position:relative; color:var(--black); }
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); }
}

.noscroll { overflow:hidden; }
.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%; }

/* 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 _flashout { 0%{height:100vh;}100%{height:0;} }
.loadingpage { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:19888; display:none; pointer-events:none; }
/*
.loadingpage span { display:block; position:absolute; top:0; left:0; width:25vw; height:25vh; background:white; }
.loadingpage span:nth-child(1) { animation:1.1s _flashout forwards var(--bezier) 1.8s; left:0; }
.loadingpage span:nth-child(2) { animation:1.1s _flashout forwards var(--bezier) 1.9s; left:25vw; }
.loadingpage span:nth-child(3) { animation:1.2s _flashout forwards var(--bezier) 2.0s; left:50vw; }
.loadingpage span:nth-child(4) { animation:1.3s _flashout forwards var(--bezier) 2.1s; left:75vw; }
.loadingpage span:nth-child(1),
.loadingpage span:nth-child(5),
.loadingpage span:nth-child(9),
.loadingpage span:nth-child(13) { left:0; }
.loadingpage span:nth-child(2),
.loadingpage span:nth-child(6),
.loadingpage span:nth-child(10),
.loadingpage span:nth-child(14) { left:25vw; }
.loadingpage span:nth-child(3),
.loadingpage span:nth-child(7),
.loadingpage span:nth-child(11),
.loadingpage span:nth-child(15) { left:50vw; }
.loadingpage span:nth-child(4),
.loadingpage span:nth-child(8),
.loadingpage span:nth-child(12),
.loadingpage span:nth-child(16) { left:75vw; }
.loadingpage span:nth-child(1),
.loadingpage span:nth-child(2),
.loadingpage span:nth-child(3),
.loadingpage span:nth-child(4) { top:0; }
.loadingpage span:nth-child(5),
.loadingpage span:nth-child(6),
.loadingpage span:nth-child(7),
.loadingpage span:nth-child(8) { top:25vh; }
.loadingpage span:nth-child(9),
.loadingpage span:nth-child(10),
.loadingpage span:nth-child(11),
.loadingpage span:nth-child(12) { top:50vh; }
.loadingpage span:nth-child(13),
.loadingpage span:nth-child(14),
.loadingpage span:nth-child(15),
.loadingpage span:nth-child(16) { top:75vh; }
*/

.loadingpage .box { display:block; position:relative; width:100%; height:100%; top:0; left:0; overflow:hidden; }
.loadingpage .box span { display:block; xxxxborder:1px solid var(--border); position:absolute; background:white; width:251px; height:251px; }
.loadingpage .logo { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:2em; width:auto; opacity:0; }
.loadingpage .logo rect, 
.loadingpage .logo path { fill:white; }
.loadingpage .centerline { content:''; display:block; position:absolute; top:50%; left:calc(50% - 8px); transform:translate(-50%,-50%); height:100vh; height:0; width:0; border-right:.3px solid white; opacity:.4; }
.loadingpage .logo1 { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:2em; width:auto; opacity:0; }
.loadingpage .greenblock { display:block; position:absolute; width:0; height:2em; top:50%; left:40vw; transform:translateY(-50%); background:var(--green1); border-radius:.3em; margin:0!important; padding:0; }
.loadingpage .dot { display:block; position:absolute; width:5em; height:5em; top:50%; left:calc(50% - .5em); transform:translate(-50%,-50%); background:transparent; border:.5em solid white; border-radius:50%; margin:0!important; padding:0; opacity:0; }
.loadingpage .dot:before { content:''; display:block; position:absolute; width:6em; height:2em; top:.5em; left:-1.55em; transform:rotate(-35deg); border:.5em solid white; border-radius:50%; margin:0!important; padding:0; transform-origin:center; animation:.5s _reset .7s forwards; }





@keyframes _reset {
    0%{opacity:1;}
    99%{opacity:1; width:4em; height:4em; top:-.5em; left:-.5em; } 
    100%{opacity:0; width:4em; height:4em; top:-.5em; left:-.5em; } }
@keyframes _loadout { 0%{opacity:.2;} 100%{opacity:1;} }
.lazyload { position:relative; opacity:0; xxxtransform:translateY(5vw); margin-top:2.5em; transition:all var(--bezier) 1.5s; }
.lazyload.open { opacity:1!important; xxxxtransform:translateY(0); margin-top:0; }
.header .nav a.lazyload { margin-top:1em; }
.header .nav a.lazyload.open { margin-top: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; }
    .loadingpage .dot { left:50%; }
}























.noscroll { overflow:hidden; }

/* Header */
.headerxxxx { display:block; width:100%; z-index:166; position:fixed; top:0; left:0; background:black; padding:1.2em 2.5em;padding:.8em 2.5em; xxxxpadding-bottom:2.3em; transition:all ease-in-out .3s; transform:translateY(-100%); transform:none; }
.header { display:block; width:100%; z-index:166; position:fixed; top:0; left:0; background:black; padding:0; xxxxxtransition:all ease-in-out .3s; xxxoverflow:hidden; transform:none; }
.header .controlset { display:flex; margin:0; cursor:pointer; z-index:99; justify-content:space-between; align-items:center; xxxborder:1px solid red; }
.header .controlset .svgobj { display:block; height:1.8vw; width:auto; position:relative; pointer-events:none; transition:all .3s; }
.header .controlset .svgobj path,
.header .controlset .svgobj rect { fill:var(--earthgreen);fill:var(--white); stroke:var(--black); stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; stroke-width:0; transition:all .4s; }
.header .controlset .btn-back { display:block; height:.85em; z-index:99; opacity:.5; transition:all .3s; transform:translateX(1em); display:none; }
.header .controlset:hover .btn-back { opacity:1; transform:translateX(0); }
.header .btn-menu { display:block; position:fixed; top:50%; right:.5em; z-index:199; margin:0; transform:translate(-50%,-50%) scale(1); padding:2em; cursor:pointer; transition:all ease-in-out .3s; display:none; }
.header .btn-menu span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all ease-in-out .5s; transform-origin:center; background:white; width:2em; height:1px; }
.header .btn-menu span:nth-child(1) { top:40%; }
.header .btn-menu span:nth-child(2) { top:50%; }
.header .btn-menu span:nth-child(3) { top:60%; }
.header .btn-menu.open { transform:translate(-50%,-50%) scale(.85); opacity:.7; }
.header .btn-menu.open span:nth-child(1) { top:50%; transform:translate(-50%,-50%) rotate(45deg); }
.header .btn-menu.open span:nth-child(2) { top:50%; transform:translate(-50%,-50%) rotate(-45deg); }
.header .btn-menu.open span:nth-child(3) { top:50%; width:0; }





.header .bg { display:block; height:3em; position:absolute; top:0; left:0; z-index:13; width:100%; background:black; opacity:0; }
.header .secblock { display:flex; height:3em; gap:0; align-items:stretch; xxxborder-bottom:1px solid rgba(255,255,255,.3); /*position:absolute; top:0; left:0;*/ width:100%; z-index:10; position:relative; overflow:hidden; z-index:188; }
.header .secblock svg { height:1.4em; margin-left:2em; }
.header .secblock svg { display:none; opacity:.6; transition:all .3s; }
.header .secblock div,
.header .secblock p { display:flex; align-items:center; cursor:pointer; padding:0; color:white; width:25%; border-right:1px solid rgba(255,255,255,.3); }
.header .secblock p:last-child { border:0; }
.header .secblock .box { display:flex; width:75%; height:100%; z-index:2; position:relative; }
.header .secblock .box p { width:33.33%; height:100%; }
.header .secblock p a { display:block; margin:0; padding:0; position:relative; color:white; text-decoration:none; transition:all .3s; height:100%; width:100%; }
.header .secblock p a span,
.header .secblock p a small { display:flex; align-items:center; margin:0; font-size:.6em; padding:2.4em 2em; height:3em; color:white; font-weight:bold; letter-spacing:.2em; text-transform:uppercase; transition:all .3s; width:100%; position:absolute; top:0; left:0; }
.header .secblock p a span { opacity:.4; }
.header .secblock p a small { top:5em; opacity:.7; background:var(--transwhite); xxxxtransition:all ease-out .5s; }
.header .secblock p a b.note { display:block; padding:.7em 2em; color:inherit; font-size:.6em; font-weight:normal; position:absolute; top:0; left:0; }
.header .secblock p a:hover span { top:-5em; }
.header .secblock p a:hover small { top:0em; xxxxletter-spacing:.1em; xxxxletter-spacing:1em; }

.header .secblock p:hover {}
.header .secblock p:hover a { xxxxfont-size:.9em; letter-spacing:.05em; opacity:1!important; }
.header .secblock p:hover svg { opacity:1!important; }
.header .secblock p.selected { background:rgba(200,202,205,.3); background:var(--green1); }
.header .secblock p.selected a { letter-spacing:.05em; opacity:1!important; xxxxpointer-events:none; }
.header .secblock p.selected a span { opacity:1!important; }
.header .secblock .logoblock { position:relative; overflow:hidden; } 
.header .secblock .logoblock .mask { position:absolute; top:0; left:0; display:flex; flex-direction:column; gap:0; width:25vw; transition:all ease-in-out .3s; }
.header .secblock .logoblock .mask span, 
.header .secblock .logoblock .mask small { display:block; width:25vw; height:3em; margin:0; }
.header .secblock .logoblock .mask span img { display:block; width:auto; height:1.2em; position:absolute; left:1.5em; top:50%; transform:translateY(-50%); }
.header .secblock .logoblock .mask span.icon img { height:1em; }
.header .secblock .logoblock .mask span.name { background:rgba(0,0,0,.3);  }
.header .secblock .logoblock .mask span.name img { opacity:.6!important;  }
.header .secblock .logoblock .mask small.home { background:var(--transwhite); }
.header .secblock .logoblock .mask small.home a { display:block; margin:0; transition:all .2s; padding:.5em 2em; color:white; text-decoration:none; zoom:.6; font-weight:bold; letter-spacing:.2em; text-transform:uppercase; transition:all .3s; opacity:.9!important; width:100%; position:absolute; top:50%!important; transform:translateY(-50%); }
.header .secblock .logoblock:hover .mask { top:-6em; }

.header .btn-en.fixright { top:0; transition:all .2s; position:absolute; right:0; color:white; zoom:.7; padding:1.4em; cursor:pointer; opacity:.6; z-index:200; margin:0!important; }
.header .btn-en.fixright:hover { opacity:1; }

.header .copyrightmark { display:block; font-size:.9em; position:absolute; bottom:-.8em; right:-3em; color:white; transform:scale(.5); opacity:.7; display:none!important; }
.header .nav { display:flex; color:white; gap:1.5em; opacity:.6; /*position:absolute; right:0; top:2.7em;top:0;*/ zoom:.8; }
.header .nav a { color:white; position:relative; text-transform:uppercase; font-size:.8em; font-weight:bold; letter-spacing:.1em; text-decoration:none; opacity:.6; transition:all var(--bezier) .2s; cursor:pointer; transform:translateY(0)!important; }
.header .nav a:hover { opacity:1; }
.header .nav a.selected { opacity:1!important; }
.header .nav a.selected:after { content:''; width:0; display:block; bottom:0; left:0; border-bottom:1px solid white; position:absolute; animation:_selectout forwards ease-in-out 1.7s .5s; }
@keyframes _selectout { 0%{ width:0 }100%{ width:100%; }}


    


    .header.home { transform:translateY(-45%);transform:none; background:transparent; }
    .header.home .controlset .svgobj { opacity:0; }
    .header.home .secblock { height:3em; background:rgba(0,0,0,.5); }
    /*.header.home .secblock p a span,
    .header.home .secblock p a small { height:5em; padding:5.5em 2em 2.5em 2em; }
    .header.home .secblock .logoblock .mask span, 
    .header.home .secblock .logoblock .mask small { height:5em; padding:4em 2em; }
    .header.home .secblock p a small { top:8.5em; }*/

    .header.shorten { transform:translateY(0); background:black; }
    .header.shorten .secblock { height:3em; }
    .header.shorten .secblock svg { display:block; }
    .header.shorten .secblock .logoblock .mask { top:-3em; }
    .header.shorten .secblock .logoblock:hover .mask { top:-6em; }
    .header.home.shorten .controlset .svgobj { opacity:1; }
    .header.home.shorten .secblock { height:3em; }
    .header.home.shorten .secblock p a span,
    .header.home.shorten .secblock p a small { height:3em; padding:2.4em 2em; }
    .header.home.shorten .secblock .logoblock .mask span, 
    .header.home.shorten .secblock .logoblock .mask small { height:3em; }
    .header.home.shorten .secblock p a small { top:5em; opacity:1!important; }
    .header.home.shorten .secblock p a:hover small { top:0em; }
    .header.home.shorten .btn-en.fixright { top:0!important; }

    .header.shorten .nav { top:0; }
    .header.fixed { transform:translateY(0)!important; background:black; }
    .header.fixed .secblock { height:3em; }
    .header.fixed .secblock svg { display:block; }
    .header.fixed .secblock p a b.note { position:absolute; right:0; opacity:.5; display:none; }
    .header.fixed .controlset .btn-back { display:block; }
    .header.fixed .secblock .logoblock .mask { top:-3em; }
    .header.fixed .secblock .logoblock:hover .mask { top:-6em; }
    .header.fixed .bg { opacity:1!important; }







.eticon { display:flex; align-items:center; justify-content:flex-start; gap:1.2em; color:white; position:fixed; top:1.4em; left:1.6em; z-index:125; }
.eticon img { display:block; width:1em; height:1em; }
.eticon p { font-size:1em; font-weight:bold; letter-spacing:.1em; zoom:.5; text-transform:uppercase; color:white; }
.lang-tw .onlyen,
.lang-en .onlytw { display:none!important; }


.footer { padding:9em 10vw 18em 10vw; background:white; xxxborder-top:1px solid var(--border); }
.footer .rowxxx { position:absolute; top:47%; transform:translateY(-50%); }
.footer .row * { text-align:left; display:block; }
.footer .row strong { font-size:1.5em; line-height:1; letter-spacing:-.03em; }
.footer .row p.endline { font-weight:bold; margin:2em 0; font-size:1.3em; line-height:1.6em; letter-spacing:-.01em; }
.footer .row small { line-height:1.4; opacity:.4; font-size:.9em; }
.footer .row .logo { height:4em; margin:.2em 0 1.2em 0; }
.footer .thumb { border-radius:50em; width:4em; height:4em; object-fit:cover; xxborder:1px solid white; margin-right:3em; }
.footer .glower { display:block; position:absolute; height:40vw; width:auto; top:100%; left:50%; opacity:.2; transform:translate(-50%,-50%) rotate(-10deg); mix-blend-mode:screen; }


.footer .imgcorner { xxxborder:1px solid red; display:block; width:80vw; height:40vw; position:absolute; top:2em; left:50vw; transform:rotate(-30deg); z-index:667; display:none; }
.footer .imgcorner imgxxx { display:block; width:140vw; position:absolute; top:50%; left:50%; transform-origin:50% 50%; transform:translate(-50%,-50%) rotate(25deg); z-index:667; }


.copyright { display:block; position:fixed; letter-spacing:.01em; font-weight:900; font-size:.6em; z-index:2064; color:white; transform-origin:top left; opacity:.7; transition:all 1s; }
.copyright { transform:rotate(-90deg); bottom:3em; left:2em; letter-spacing:.05em; z-index:77; }
    .copyright:after { content:''; display:inline-block; width:30vh; height:0; border-bottom:1px solid white; margin-left:1em; vertical-align:middle; }
.copyright.shorten { opacity:.1; }
.copyright.fixed { opacity:.1!important; }

.overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:89; }
.datetime { position:fixed; bottom:28em; right:2em; font-size:.6em; padding:1em 2em; opacity:.7; color:white; transform-origin:right; transform:translateY(-50%) rotate(-90deg); z-index:788; display:none; }

.floatcontactbox { font-size:.9em; /*position:fixed; bottom:0;*/ position:absolute; bottom:-2em; left:0; background:white; z-index:1999; color:black; padding:2em 5em; margin:0 20px; transition:all var(--bezier) .7s; display:flex; width:calc(40% - 40px); justify-content:space-between; border-radius:.5em; }
.floatcontactbox * { margin-top:0!important; }
.floatcontactbox.shorten { transform:translateY(100%); }
.floatcontactbox .thumb { border-radius:50em; width:4em; height:4em; object-fit:cover; xxborder:1px solid white; margin-right:3em; }



@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {
    .footer { padding:4em 5em 10em 5em; }
}
@media -ms-viewport, screen and (max-width:640px) {
    .header {}
    .header .row { border:0; }
    .header .controlset {}
    .header .controlset .svgobj { height:1.39em; }
    .header .controlset .notetext { display:none; }
    .header .btn-menu { display:block; }
    .header .nav { background:black; padding:4em; padding-top:9em; width:100%; font-size:.9em; opacity:.5; transition:all var(--bezier) .7s; flex-direction:column; color:white; gap:8.5em; position:fixed; right:0; top:0; zoom:1; transform:translateY(-100%); }
    .header .nav.open { opacity:.9; gap:2.5em; transform:translateY(0%); }
    
    .header.home { transform:translateY(0); }
    .header .secblock {}
    .header .secblock .logoblock { width:100%; z-index:99; background:black; }
    .header .secblock .logoblock .mask { width:100%; }
    .header .secblock .logoblock .mask span.name {  }
    .header .secblock .logoblock .mask span, .header .secblock .logoblock .mask small { width:100%; height:3em; }
    .header .secblock .box { display:flex; background:black; padding-top:3em; width:100%; height:auto; position:fixed; top:0; left:0; transform:translateY(-100%); transition:all .5s; }
    .header .secblock .box.open { transform:translateY(0); }
    .header .secblock .box p { text-align:center; padding:0; }
    .header .secblock .box p a { text-align:center; height:3em; overflow:hidden; }
    .header .secblock .box p a span,
    .header .secblock .box p a small { justify-content:center; padding:2.4em 2em; height:3em; }
    
    .header.open .btn-en { transform:translateX(100%); }
    .header.open .btn-menu { right:-2em; }


    .copyright { left:1.2em; }

    .footer { padding:3em 2em 20em 2em; }
    .footer .row { position:relative; top:auto; transform:none; }
    .footer .flex { display:block; gap:1em; flex-direction:column; }
}

















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


.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; }
.container .frame { display:block; position:fixed; top:0; left:0; z-index:999; pointer-events:none; background:var(--earthgreen); display:none!important; }
.container .frame.top { left:calc(100% - 20vw); width:20vw; xxopacity:.3; height:2vw; mix-blend-mode:screen; display:none; }
.container .frame.left { width:50px; height:50vh; mix-blend-mode:overlay; }


.row { display:block; padding:0; width:100%; margin:0 auto; z-index:12; position:relative; text-align:center; }
.row * { line-height:1.5; color:inherit; }
.row h1 { font-size:5.5vw; 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 { letter-spacing:.05em; line-height:2; padding:.8em 0; display:block; }
.row b { font-size:1.4vw; font-weight:normal; }
.flex { display:flex!important; justify-content:flex-start; }
.flex .col { display:block; width:auto; }


.btnrow { display:flex; gap:.7em; justify-content:flex-start; }
.btnrow .btn { word-break:keep-all; }
.btn-basic { display:inline-block; padding:.7em 1.5em; border:1px solid var(--green1); border-radius:4em; text-decoration:none; color:var(--green2); font-weight:bold; background:transparent; transition:all .3s; }
.btn-basic:hover { background:var(--green1); color:white; }


.decoimgbg { display:block; background:black; height:50vw; xxxxmargin-bottom:5em; xxposition:absolute; top:0; left:0; width:100%; z-index:1; object-fit:cover; overflow:hidden; }
.decoimgbg img { display:block; height:100%; width:100%; opacity:.4; object-fit:cover; position:relative; z-index:1; mix-blend-mode:luminosity; }
.decoimgbg h2 { display:block; position:absolute; top:calc(50% - 2.5em); left:50%; transform:translate(-50%,-50%); z-index:12; xdisplay:none; }
.decoimgbg h2 imgxxx { display:block; width:70vw; opacity:.2!important; }
.decoimgbg h1 { display:block; position:absolute; top:calc(50% + .05em); left:50%; transform:translate(-50%,-50%); z-index:12; color:white; font-size:4em; }
.decoimgbg .con { display:block; position:absolute; top:calc(50% - 2.5em); left:50%; transform:translate(-50%,-50%); z-index:12; display:flex; width:60%; justify-content:flex-start; align-items:flex-start; gap:3em; }
.decoimgbg .con h2,
.decoimgbg .con h1 { position:relative; top:auto; left:auto; transform:none; }
.decoimgbg .con h2 img { width:7em; opacity:1!important; }
.decoimgbg .con h1 { color:white; font-size:4em; }
.decoimgleft { display:block; background:black; width:50vw; margin-left:-15em; object-fit:cover; overflow:hidden; }


.decot { display:block; transform:translate(-50%,-50%); line-height:.7; font-size:70vw; font-weight:700; position:absolute; top:0; left:0; }
.decot.t1 { top:0; left:0; }



hr { display:block; width:100%; height:0; border:0; border-top:1px solid var(--border); margin:3em 0; }

@media -ms-viewport, screen and (max-width:640px) {
    .row h1 { font-size:3em; }
    .row h3 { font-size:1em; }
    .row strong { font-size:1.2em; }
    .btnrow { flex-wrap:wrap; }

    .decoimgbg { height:90vw; }
}






.sloganpage { width:100vw; height:100vh; background:linear-gradient(180deg,rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); color:white; }
.sloganpage .bg { width:100vw; height:100vh; position:absolute; top:0; left:0; z-index:1; background:#f1f2f5; opacity:1; background:linear-gradient(180deg,rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); xxxxbackground:linear-gradient(to right, var(--blue2), var(--blue1)); }
.sloganpage h1 { position:absolute; top:50%; left:50%; z-index:10; transform:translate(-50%,-50%); font-size:3em;font-size:6vw; text-align:center; width:90vw; font-size:8em; line-height:1; letter-spacing:-.06em; margin-top:0!important; }
.sloganpage h1 span { display:block; margin:0; padding:0; line-height:inherit; font-family:inherit; font-size:inherit; text-align:inherit; letter-spacing:inherit; }
.sloganpage.auto { padding:10em 5em; height:auto; }
.sloganpage.auto h1 { position:relative; top:auto; left:auto; transform:none; }
.sloganpage.auto .row { padding:4em; }
.sloganpage.fixed { position:fixed; top:0; left:0; z-index:1; margin-top:0!important; }
.sloganpage.fixed.home h1 span { opacity:0; }


.sloganpage .sloganset { display:block; z-index:10; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38em; }
.sloganpage .sloganset * { letter-spacing:0; line-height:1.4; }
.sloganpage .sloganset strong { font-size:5.6vw; letter-spacing:-.03em; line-height:.9; font-weight:bold; display:block; margin:0; padding:0; overflow:hidden; height:.9em; width:7em; position:relative; xxxopacity:0; }
.sloganpage .sloganset strong * { padding:0; margin:0; font-family:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit; }
.sloganpage .sloganset strong .mline { display:inline-block; }
.sloganpage .sloganset strong u { position:relative; display:inline-block; text-decoration:none; color:var(--green1); }
.sloganpage .sloganset strong u:after { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:0; border-bottom:1px solid rgba(0,0,0,.5); }
.sloganpage .sloganset strong .set { display:flex; padding:0!important; position:absolute; top:0; left:0; width:100%; }
.sloganpage .sloganset strong .set span { display:block; position:relative; top:auto; left:auto; margin-right:-.06em; }
.sloganpage .sloganset strong .set span.space { width:.3em; }
.sloganpage .sloganset strong .set.set2 span { top:1em; }

.sloganpage .sloganset.smallleft { left:3.8vw; top:15%; transform:scale(.7); }
.sloganpage .sloganset.smallleft strong { width:48em; overflow:visible; }


/*
@keyframes _runopen1bg { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes _runopen1slogan { 0%{opacity:0;marginTop:30px;} 100%{opacity:1;marginTop:0;} }
.sloganpage.open1 .bg { animation:5s _runopen1bg var(--bezier) forwards; }
.sloganpage.open1 .sloganset .slogan:nth-child(1) { animation:1s _runopen1slogan var(--bezier) forwards; animation-delay:0; }
.sloganpage.open1 .sloganset .slogan:nth-child(2) { animation:1s _runopen1slogan var(--bezier) forwards; animation-delay:.2s; }
.sloganpage.open1 .sloganset .slogan:nth-child(3) { animation:1s _runopen1slogan var(--bezier) forwards; animation-delay:.4s; }
.sloganpage.open1 .sloganset .slogan:nth-child(4) { animation:1s _runopen1slogan var(--bezier) forwards; animation-delay:.6s; }

.sloganpage.open2 .bg { xxxxbackground:green; }
*/

.square1 .sloganset { zoom:1.2; }
.square2 .sloganset { zoom:1.4; }
.square3 .sloganset { zoom:1.6; }


.gappage { height:1vh; }





.bgvideoblock { display:block; width:100%; height:100%; position:relative; padding:0; background:black; overflow:hidden; z-index:15; }
.bgvideoblock * { color:white; }
.bgvideoblock video { display:block; width:100%; height:100%; object-fit:cover; opacity:.8; position:absolute; top:0; left:0; }

.coverblockxxxx { display:block; width:100%; height:92vh; position:relative; padding:0; border:0 solid white; overflow:hidden; position:fixed; top:0; left:0;background:black; }
.coverblock { display:block; width:100%; height:92vh; position:relative; padding:0; background:black; border:0 solid white; overflow:hidden; z-index:15; xxxopacity:.3!important; }
.coverblock.hide { visibility:hidden; }
.coverblock .imgobj { display:block; width:100%; height:100%; margin:0; overflow:hidden; padding:0; background:black; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.02); transition:all var(--bezier) .3s; z-index:12; }
.coverblock .imgobj img { display:block; width:100%; height:100%; object-fit:cover; xxxmix-blend-mode:luminosity; transition:all .5s; filter:blur(0); }
.coverblock .coverimg,
.coverblock video { display:block; width:100%; height:100%; object-fit:cover; opacity:.8; position:absolute; top:0; left:0; }
.coverblock svg.logo { display:block; margin:5em auto 1.5em auto; height:6vw; width:auto; mix-blend-mode:screen; }
.coverblock svg.logo path,
.coverblock svg.logo rect { fill:var(--earthgreen);fill:white; }
.coverblock .cover { display:block; width:100%; height:100%; background:black;background:white; opacity:.6; margin:0; cursor:pointer; position:absolute; top:0; left:0; z-index:2; mix-blend-mode:multiply; }
.coverblock .info { display:block; position:absolute; top:20%; left:5em; transform:translateY(-50%); color:white; z-index:10; }
.coverblock .info * { letter-spacing:0; color:white; line-height:1.4; }
.coverblock .info h1 span { font-family:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit; display:block; }
.coverblock .info.grid42 { display:flex; justify-content:flex-start; align-items:center;align-items:flex-start; gap:17em;gap:7em; position:absolute; top:50%; left:16vw; transform:translateY(-50%); }
.coverblock .info.grid42 .row { display:block; width:auto; }
.coverblock .info.grid42 * { letter-spacing:0; color:white; line-height:1.4; }
.coverblock .info.grid42 .p1 { margin-bottom:.5em; font-size:1.2vw; font-weight:bold; display:block; }
.coverblock .info.grid42 .p2 { height:2.8vw; display:block; margin-bottom:.3em; }
.coverblock .info.grid42 .p3 { height:3vw; display:block; }
.coverblock .info.grid42 svg.logo { margin:1em 0; height:3.2vw; }
.coverblock .info.grid42 .glower { display:block; position:absolute; height:7vw; width:auto; top:50%; left:80%; opacity:.2; transform:translate(-50%,-50%) rotate(-10deg); mix-blend-mode:screen; }
.coverblock .box { display:block; padding:.5em; text-align:center; width:40vw; }
.coverblock .box p { font-size:1.1vw; margin:.2em; text-align:center; letter-spacing:.2em; }
.coverblock .info { position:absolute; left:50%; top:20vw; transform:translate(-50%,-50%); }
.coverblock .btn-scrolldown { position:absolute; left:80%; bottom:-1em; color:white; padding:3em; font-weight:bold; font-size:.8em; transform:scale(.6); letter-spacing:.3em; border-left:1px solid rgba(255,255,255,.5); opacity:.5; }

.coverblock .info.grid42 .p1,
.coverblock .info.grid42 .p2,
.coverblock .info.grid42 .p3 { opacity:0; display:block; }


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

    .sloganpage { width:100vw; height:130vh; }
    .sloganpage h1 { position:absolute; top:50%; left:50%; z-index:10; transform:translate(-50%,-50%); font-size:3em;font-size:6vw; text-align:center; width:90vw; font-size:8em; line-height:1; letter-spacing:-.06em; margin-top:0!important; }
    .sloganpage h1 span { display:block; margin:0; padding:0; line-height:inherit; font-family:inherit; font-size:inherit; text-align:inherit; letter-spacing:inherit; }
    .sloganpage.auto { padding:10em 5em; height:auto; }
    .sloganpage.auto h1 { position:relative; top:auto; left:auto; transform:none; }
    .sloganpage.auto .row { padding:4em; }
    .sloganpage.fixed { position:fixed; top:0; left:0; z-index:1; margin-top:0!important; }
    .sloganpage.fixed.home h1 span { opacity:0; }


    .sloganpage .sloganset {}
    .sloganpage .sloganset strong { font-size:2.6em; }
    .sloganpage .sloganset.smallleft { left:3.6em; top:40vh; transform:none; }
    .sloganpage .sloganset.smallleft strong { width:80vw; height:auto; }


    .square3 .sloganset { zoom:1.3; }



    .coverblock { height:180vw; }
    .coverblock .info { position:absolute; top:20%; left:5em; transform:translateY(-50%); }
    .coverblock .info.grid42 { flex-direction:column; gap:1.5em; }
    .coverblock .info.grid42 * { text-align:left; margin:0; }
    .coverblock .info.grid42 .p1 { font-size:1.2em; }
    .coverblock .info.grid42 .p2 { height:1.5em; }
    .coverblock .info.grid42 .p3 { height:2em; }
    .coverblock .info.grid42 svg.logo { height:2.2em; }
    .coverblock .btn-scrolldown { left:66%; }

}





.introblock { display:block; width:100%; height:100vh; position:relative; top:0; left:0; padding:0; background:black; overflow:hidden; z-index:5; }
.introblock.hide { visibility:hidden; }
.introblock video { display:block; width:140%; height:120%; object-fit:cover; position:absolute; top:-10vh; left:-10vw; }
.introblock svg.logo { display:block; margin:7em auto 1.5em auto; height:2.6vw; width:auto; mix-blend-mode:screen; position:absolute; bottom:5vw; left:50%; transform:translateX(-50%); }
.introblock svg.logo path,
.introblock svg.logo rect { fill:var(--earthgreen);fill:white; }
.introblock .info { display:block; color:white; z-index:10; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); mix-blend-mode:screen; }
.introblock .info * { letter-spacing:0; color:white; line-height:1.4; }
.introblock .info strong { font-size:5.6vw; letter-spacing:-.03em; line-height:.9; font-weight:bold; display:block; margin:0; padding:0; xxxborder-bottom:1px solid red; overflow:hidden; height:.9em; width:7em; position:relative; }
.introblock .info strong * { padding:0; margin:0; font-family:inherit; font-size:inherit; letter-spacing:inherit; line-height:inherit; font-weight:inherit; }
.introblock .info strong .set { display:flex; padding:0!important; position:absolute; top:0; left:0; width:100%; }
.introblock .info strong .set span { display:block; position:relative; top:auto; left:auto; margin-right:-.06em; }
.introblock .info strong .set span.space { width:.3em; }
.introblock .info strong .set.set2 span { top:1em; }
/*
.introblock .info strong:nth-child(2) .set1 u { display:block; position:absolute; bottom:.07em; left:1.80em; width:2.03em; border-top:1px solid white; animation:3s _drawout1 var(--bezier) forwards 3s; width:0; }
.introblock .info strong:nth-child(3) .set1 u { display:block; position:absolute; bottom:.07em; left:2.08em; width:3.08em; border-top:1px solid white; animation:4s _drawout2 var(--bezier) forwards 3.5s; width:0; }
*/
.introblock .btn-scrolldown { position:absolute; left:80%; bottom:-3em; color:white; padding:3em; padding-bottom:6em; font-weight:bold; font-size:.8em; transform:scale(.6); letter-spacing:.3em; transition:all .3s; border-left:1px solid rgba(255,255,255,.5); opacity:.95; cursor:pointer; }
.introblock .btn-scrolldown:hover { opacity:1; bottom:-2em; padding-bottom:7em; }


.imgcontaineer { overflow:hidden; position:absolute; width:100%; height:100%; background:var(--green2); top:0; left:0; display:block; }
.imgcontaineer .item { position:absolute; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); display:block; }
.imgcontaineer .bgblock,
.imgcontaineer .imgblock,
.imgcontaineer .colorblock { position:absolute; display:block; top:50%; left:50%; transform:translate(-50%,-50%); }
.imgcontaineer .bgblock { width:100%; height:100%; top:0; left:0; }
.imgcontaineer .imgblock { width:120vw; height:125vw; }
.imgcontaineer .imgblock img { width:100%; height:100%; overflow:hidden; object-fit:cover; display:block; }
.imgcontaineer .colorblock { transform:none; top:0; left:0; width:100%; height:100%; }
.imgcontaineer .colorblock span { position:absolute; width:50%; height:50%; top:0; left:0; display:block; }
.imgcontaineer .colorblock span.span2 { xxxmix-blend-mode:multiply; }




@keyframes _drawout1 { 0%{width:0;} 100%{width:2.03em;} }
@keyframes _drawout2 { 0%{width:0;} 100%{width:3.08em;} }
@media -ms-viewport, screen and (max-width:640px) {
    .introblock {}
    .introblock svg.logo { transform:translateY(-14em) translateX(-50%); height:2.3em; }
    .introblock .info { top:calc(50% - .5em); margin-left:2em; }
    .introblock .info strong { font-size:2.6em; }
    .introblock .btn-scrolldown { left:66%; }

}






.mlightbgray { background:var(--mlightbgray); }
.workbox { display:flex; flex-wrap:wrap; justify-content:center; margin:4em 4em -1px 4em; width:calc(100% - 5em);width:calc(90vw - .005em);width:calc(100% - 8em); gap:0; padding:0; overflow:hidden; }
.workbox { margin:4em 0 -1px 0; margin:0 0 -1px 0; padding-top:4em; padding-bottom:8em; width:100%; }
.workbox .workset { display:flex; flex-wrap:wrap; justify-content:center; margin:4em 4em -1px 4em; width:calc(100% - 5em);width:calc(90vw - .005em);width:calc(100% - 8em); gap:0; padding:0; overflow:hidden; }
.workbox h3 { width:100%; font-size:1.5vw; padding:4.5vw 3vw; text-transform:uppercase; font-weight:bold; letter-spacing:-.02em; color:#31383f; }


.workbox .item { display:block; width:calc(33.33% - 6em); width:30%; margin:0; opacity:1; padding:0; position:relative; cursor:pointer; font-size:.9em; xxxxborder:1px solid orange; padding:1em; text-decoration:none; }
.workbox .item .imgobj { display:block; width:94%; height:var(--imgthumbh); background-color:white; position:relative; overflow:hidden; transition:all .6s; box-shadow:0 .2em 1em rgba(0,0,0,.1); margin:0 auto; border-radius:.5em .5em 0 0; }
.workbox .item .imgobj img { display:block; width:102%; height:auto; position:absolute; top:0; left:50%; transform:translateX(-50%); transition:all .2s; }
.workbox .item .spinner { display:block; width:1em; height:1em; border-radius:1em; border:3px solid white; border-left:none; animation:_rotatespinner 1s linear infinite; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.workbox .item .cover { display:block; background:rgba(0,0,0,.5); transition:all .5s; opacity:0.7; width:100%; min-height:0; height:100%; position:absolute; top:0; left:0; z-index:6; opacity:0; }
.workbox .item .topcover { display:block; transition:all .5s; opacity:.1; width:100%; height:100%; position:absolute; top:0; left:0; z-index:6; opacity:0; display:none; }
.workbox .item .infoxxx { display:block; padding:1em 0 5em 7em;padding-top:2.5em;padding-left:4em; text-align:center; transition:all .3s; text-align:left; }
.workbox .item .info { display:block; padding:1.5em; transition:all .3s; text-align:left; }
.workbox .item .info * { line-height:1.2!important; xxxxmargin-bottom:.5em; font-size:1em; }
.workbox .item .info h2 { line-height:1.3; font-size:1.15em; transition:all .2s; }
.workbox .item .info .number { display:block; position:absolute; top:0; left:0; color:#333; padding:1.5em; font-size:1.2em; text-align:center; font-weight:bold; width:4em; border-right:1px solid var(--border);display:none; }
.workbox .item .num { padding:1.5em; margin-top:6em; margin-bottom:1.3em; color:#a1a2a5; position:relative; display:inline-block; width:auto; position:absolute; top:0; left:1em; }
.workbox .item .num:after { content:'';  display:block; position:absolute; top:0; left:5em; width:0; height:10em; border-right:1px solid var(--border); }

.workbox .item.disabled { pointer-events:none; cursor:default; }
.workbox .item.disabled .imgobj { box-shadow:none; background:#aaa; }
.workbox .item.disabled .imgobj img { opacity:.8; }
.workbox .item.hide { display:none!important; }
.workbox .item:hover .imgobj { xxxxxbox-shadow:0 3em 6em rgba(0,0,0,.2); }
.workbox .item:hover .imgobj { xxxtransform:rotate(-2deg) scale(1.05); transform:translateY(-.2em) scale(1); }
.workbox .item:hover .imgobj img { mix-blend-mode:normal; }
.workbox .item:hover h2 { color:var(--green1); }


.workbox.in4 { padding:.5em 3em; gap:2em; }
.workbox.in4 .item { width:21vw; }
.workbox.in4 .item .imgobj { height:var(--imgthumbh_in4); }


    .catset { padding:3em 2em 1em 2em; padding:1em 2em; gap:0; display:flex; justify-content:flex-end;justify-content:center; width:100%; z-index:10; xxxxposition:sticky; }
    .catset .mask { padding:0; display:block; width:100%; display:flex; flex-wrap:wrap; justify-content:flex-end;justify-content:center; }
    .catset a { display:flex; align-items:center; padding:1em 2em; text-transform:uppercase; font-size:.8em; font-weight:bold; cursor:pointer; transition:all .2s; }
    .catset a small { font-size:.8em; font-weight:normal; margin-left:.3em; opacity:.8; color:inherit; }
    .catset a:hover { background:rgba(250,250,250,.2); opacity:1; }
    .catset a.selected { background:rgba(50,50,50,1); color:white; opacity:1; }
    .catset a.hide { display:none; }
    .catset a.sub {}
    .catset a.btn { display:flex; align-items:center; padding:0 1.5em; border:1px solid var(--border2); border-radius:.3em; cursor:pointer; transition:all .2s; margin-left:1.5em; }
    .catset a.btn img { display:block; width:1.7em; height:1.7em; }
    .catset a.btn.btn-more img { transform:rotate(-90deg); }
    .catset a.btn.btn-sort img { }
    .catset a.btn.btn-sort.time .order,
    .catset a.btn.btn-sort.order .time { display:none; }
    .catset a.btn:hover { background:var(--border); }
    .catset .subset { display:block; background:var(--border); background:white; position:absolute; top:1em; left:0; padding:0; transform:translateX(-100%); display:none; }
    .catset .subset a {}
    .catset .subset a:hover { background:rgba(200,200,200,.3); }


        .header .catset { padding:0; box-shadow:0 1px 3px rgba(0,0,0,.15); background:white; top:-3em; position:absolute; left:0; z-index:12; transition:all .7s; }
        .header .catset.show { top:3em; }
        .header .catset a.btn { margin:.5em .5em; }
        .header .catset a.btn.btn-more { margin-left:1.5em; }
        .header .catset a.btn img { width:1em; height:1em; }


    .workbox .item2,
    .workbox .item5,
    .workbox .item8,
    .workbox .item11,
    .workbox .item14,
    .workbox .item17,
    .workbox .item20,
    .workbox .item23,
    .workbox .item26,
    .workbox .item29 { border-left:0; }

    .workbox .item4,
    .workbox .item7,
    .workbox .item10,
    .workbox .item13,
    .workbox .item16,
    .workbox .item19,
    .workbox .item22,
    .workbox .item25,
    .workbox .item28,
    .workbox .item31 { border-right:0; }


.workboxhome { width:100%; margin:0; margin-top:150vh!important; opacity:1!important; background:white; xxxxmargin-left:-70vw; }
.workboxhome .workbox { padding-bottom:0; }
.workboxhome .item { display:block; width:calc(33.33% - 2em);width:30%; margin:0; opacity:1; padding:0; position:relative; cursor:pointer; font-size:.9em; xxxxborder:var(---border); margin-right:-1px; margin-bottom:-1px; padding:1em; }
.workboxhome .item.text { width:100%; padding:10em 8em; padding:5em 10vw; border-bottom:var(---border); margin-bottom:5em; }
.workboxhome .item.text b { font-size:1.5vw; font-weight:bold; margin:0; display:block; }
.workboxhome .item.text .row { text-align:left; }
.workboxhome .item .imgobj,
    .workbox .item .imgobj { height:var(--imgthumbh_home); height:35vw;height:14vw; border-radius:.5em; }
.workboxhome .item .imgobj { height:17.4vw; }

.workboxhome .row.more { width:100%; padding:6.5em 0 12em 0; text-align:center; }
.workboxhome .row.more .btn-more { font-weight:bold; cursor:pointer; transition:all .3s; }
.workboxhome .row.more .btn-more:hover { letter-spacing:.03em; }
.workboxhome .row.more .catset a { text-decoration:none; transition:all .2s; }
.workboxhome .row.more .catset a:hover { color:var(--green1); text-decoration:underline; }



.workbox.recommand { xxxxbackground-image:url(../img/noise1.gif); margin:0; justify-content:center; gap:2em; width:100%; }
.workbox.recommand .item { width:26%; }
.workbox.recommand .item .info {}
.workbox.recommand .item .info .number { display:none; }


.workbox.sample { margin:2em 0; margin-left:-.7em; justify-content:flex-start; gap:1em; width:100%; padding:0; }
.workbox.sample .item { width:16vw; width:20vw; padding:0; }
.workbox.sample .item .imgobj { height:19vw;height:12vw; }
.workbox.sample .item .info { padding:1.5em .75em; }



.abouthistory .workbox { width:130%; }




.reommandblock { xxxxborder-top:1px solid red; xxxbackground-image:url(../img/noise.jpg); background-size:10em; background:rgba(200,200,200,.1); background:linear-gradient(180deg,rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%); padding:12.3em 0 4em 0; }
.reommandblock.workblock { background:white; }
.reommandblock>h2 { font-size:4em; text-align:center; margin:0 auto; position: absolute; top:2em; left:10vw; letter-spacing:-.04em; }
.reommandblock>h2>img { height:1.8em; }


.conbox { padding:3em 0; }
.conbox>h2 { font-size:2em; text-align:center; margin:0 auto; padding:3.5em 0 2.5em 0; position:relative; z-index:12; }
.conbox>h2>img { height:1.8em; }





.backproject.row { padding:5em 5em; text-align:right; }
.backproject.row .btn-back { font-size:1.5em; font-weight:bold; }


.shareset { text-align:center; padding:2em 4em; padding-bottom:6em; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.shareset p { text-align:center; padding:1em; }
.shareset p img { height:2em; }
.shareset a { padding:.5em; cursor:pointer; }
.shareset a img { height:2.5em; width:auto; display:block; }
.shareset.dark p img,
.shareset.dark a img { mix-blend-mode:difference; }

.shareset.column { flex-direction:column; align-items:flex-end; }
.shareset.column p { text-align:right; xfont-size:1.5em; padding:.5em; }
.shareset a { font-size:1.5em; font-weight:bold; }
.shareset .btn-talk { color:var(--green1); transition:all .2s; }
.shareset .btn-talk:hover { color:var(--green2); }





.storybox .item .info { padding:1em 0 10em 0; }
.storybox .item .info b { display:block; font-size:1.2em; font-weight:bold; margin:1em 0; }





@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {

    .workbox .workset { margin:2em 0; width:100%; }

    .reommandblock { padding:4em 0; }
    .workbox.recommand { gap:0; margin:0; padding:2em 0; }
    .workbox.recommand { gap:0; margin:0; }
    .workbox.recommand .item { width:26%; }
    .workbox .item .imgobj {}
    .workbox .item { padding:.3em; }



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

    .reommandblock>h2 { font-size:2.4em; position:relative; top:auto; left:auto; }

    .workbox h3 { font-size:1.5em; padding:3.5em 0; text-align:left; }
    .workbox { margin:0; padding:.5em; width:100%; justify-content:flex-start; }
    .workbox .workset { margin:0; width:100%; padding-left:.35em; justify-content:flex-start; gap:.5em; }
    .workbox .item { width:calc(50% - .5em)!important; padding:.25em; }    
    .workbox .item .num { padding:.3em; margin-top:0; margin-bottom:1em; display:none; }
    .workbox .item .num:after { display:none; }
    .workbox .item .imgobj { height:13.5em!important; width:100%; heightxxxx:118vw!important;height:30vw!important; }
    .workbox .item .info { padding:1em 0; xxxxpadding-bottom:3em; }
    .workbox .item.third img { max-width:80%; }

    .workbox.recommand { gap:0; justify-content:flex-start; padding-left:1.75em; padding-right:0; }
    .workbox.recommand .item { width:calc(50% - 1em)!important; }
    /*.workbox.recommand .item.show:nth-of-type(3) { width:calc(100% - 2em)!important; }
    .workbox.recommand .item.show:nth-of-type(3) .imgobj { height:120vw!important; box-shadow:0 1px 3px rgba(0,0,0,.2); }*/
    .workbox.sample { margin-left:0; gap:.9em; }
    .workbox.sample .item { width:50%; }
    .workbox.sample .item .info { padding:1.5em 0; }


    .abouthistory .workbox { width:100%; }



    .catset { padding:0; position:relative; top:0; margin:4em 0; display:flex; flex-wrap:wrap; justify-content:center; }
    .catset .btn-more { display:none!important; }
    .catset .subset { xxxxxdisplay:flex; flex-wrap:wrap; background:none; position:relative; top:auto; left:auto; }
    .catset .mask { justify-content:flex-start; gap:.5em; padding:0 .5em; }
    .catset .mask a { font-size:.8em; text-align:center; padding:.8em .5em; width:calc(33.33% - .5em); border-radius:.3em; border:1px solid var(--black); }
    .catset a.btn { margin:0; }
    .catset a.btn img { margin:0 auto; }
    .catset a { padding:1em; text-align:center; }
    .catset a.hide { display:block; }
    .catset a.btn { padding:0 1.5em; margin-left:1.5em; }
    .catset a.btn img { width:1em; height:1em; }
    .catset a.btn-sort { margin:0; }
        .header .catset { top:-1em; margin:0; }
        .header .catset.show { top:3em; }
    .header .catset { padding:0; overflow-x:scroll; }
    .header .catset .mask { justify-content:flex-start; gap:0!important; padding:0!important; flex-wrap:nowrap; }
    .header .catset a { font-size:.8em; text-align:center; padding:.8em 1.5em!important; width:auto!important; border-radius:0!important; border:0!important; border-right:1px solid var(--black)!important; word-break:keep-all; }



    .workboxhome { margin-top:180vw!important; }
    .workboxhome .workbox { margin-left:.25em; gap:.5em; }
    .workboxhome .item.text { padding:3em 2em; }
    .workboxhome .item.text b { font-size:1.2em; }
    .workboxhome .row.more { padding:0 0 5em 0; text-align:center; }
    .workboxhome .row.more .catset { flex-wrap:wrap; }
    .workboxhome .row.more .catset a {}

    .conbox { padding:3em 0; }
    .conbox>h2 { padding:2em 0 1em 0; }
    .conbox>h2>img { height:2em; }


    .shareset { justify-content:center; }
    


}
@keyframes _rotatespinner { 0%{transform:translate(-50%,-50%) rotate(0);} 100%{transform:translate(-50%,-50%) rotate(360deg);} }








































.logoset { display:block; pointer-events:none; position:relative; border:0; height:5em; z-index:255; margin:2em 0; }
.logoset .mask { position:relative; top:0; left:0; margin:0; width:200vw; height:auto; display:flex; gap:6em; justify-content:flex-start; xxxxborder:1px solid var(--border); }
.logoset .img { display:inline-block; vertical-align:middle; margin:0; height:2em; object-fit:contain; position:relative; top:auto; left:auto; transform:none; }
.logoset .item { display:block; margin:0; height:auto; width:auto; position:relative; border:1px solid white; }
.logoset .item img { display:block; width:8vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

.clientlistbox { border-top:1px solid var(--border); padding:4em 0; text-align:left; }
.clientlistbox strong { letter-spacing:-.02em; }
.clientlistbox.row { padding:5em 8em; }
.clientlist { display:flex; flex-wrap:wrap; position:relative; border:0; margin:2em 0; }
.clientlist p { display:flex; gap:1em; align-items:center; width:25%; margin:0!important; padding:.5em 3em .5em 0!important; position:relative; border-bottom:1px solid var(--border); text-transform:uppercase; line-height:1; font-size:.8em!important; font-weight:bold; }
.clientlist p:last-child { xxxborder-bottom:0; }
.clientlist p img { display:block; width:4.2em; height:auto; }



.servicebox { display:block; background:#f1f2f5;background:white; border-top:var(---border); position:relative; overflow:hidden; padding:5em 10vw; }
.servicebox .imgbg { display:block; position:absolute; top:0; left:0; width:100vw; height:auto; z-index:1; opacity:.15; }
.servicebox .logoset span { display:block; }
.servicebox .logoset .mask { display:flex; gap:.1em; width:auto; }
.servicebox .logoset .mask span { display:block; font-size:3em; text-transform:uppercase; font-family:serif; word-break:keep-all; white-space:nowrap; }
.servicebox .logoset .mask span:after { content:'.'; display:inline-block; margin:0 .2em; }
.servicebox .logoset .mask spanxxxx:after { content:'.';content:''; display:inline-block; width:.5em; height:.5em; border-radius:1em; border:2px solid black; margin:0 .2em; }
.servicebox .info { display:inline-block; width:auto; padding:0; margin:4.5em 0 0 0; z-index:12; position:relative; }
.servicebox .info b { font-weight:bold; }
.servicebox .info strong { display:block; font-size:1em; margin:3.5em 0 1em 0; line-height:1.4; letter-spacing:-.01em; color:var(--green1); font-weight:bold; }
.servicebox .info .flex { gap:2em; }
.servicebox .info .flex.wrap { flex-wrap:wrap; }
.servicebox .info .flex .col { width:calc(33.33% - 2em); }
.servicebox .info .flex .col.full { width:100%; }

.contactbox { padding:2em 10vw; padding-top:7em; }
.contactbox h1 { margin-bottom:.5em; }
.contactbox .info { margin:0; }
.contactbox .info .flex { gap:2em; padding:2em 0 4em 0; }
.contactbox .info .flex.wrap { flex-wrap:wrap; }
.contactbox .info .flex .col { width:calc(33.33% - 2em); line-height:1.1; padding:1em 0; border-top:1px solid var(--border); }
.contactbox .info .flex .col.full { width:100%; }
.contactbox .info .flex .col * { line-height:1.4; margin:0; padding:0!important; }
.contactbox .info .flex .col strong { display:block; font-size:1em; margin:.5em 0 1em 0!important; line-height:1.4; letter-spacing:-.01em; color:var(--green1); font-weight:bold; }
.contactbox .info .flex .col strong .icon { display:inline-block; width:1.5em; height:1.5em; opacity:.5; margin-right:.5em; vertical-align:middle; }
.contactbox .info .flex .col small { font-size:.9em; }
.contactbox .info .flex .col small.hour { font-size:.75em; }
.contactbox .info .flex .col small.hour .tohour { color:var(--red); }
.contactbox .info .flex .col small.hour .tohour.off { color:darkred; }
.contactbox .info .flex .col small.hour .allowcall { color:white; background:var(--green2); margin:.5em 0; padding:.3em 1em!important; border-radius:.3em; display:inline-block; }
.contactbox .info .flex .col small.hour .allowcall.ok { background:var(--green1); }
.contactbox .info .flex .col small.hour .allowcall.off { background:white; border:1px solid darkred; color:darkred; }
.contactbox .info .flex .col p { display:block; vertical-align:middle; margin-bottom:.2em; }
.contactbox .info .flex .col p .icon { display:inline-block; width:1.5em; height:1.5em; margin-right:.5em; vertical-align:middle; }
.contactbox .info .flex .col p .qrcode { display:block; height:9em; margin:.5em 0; }

.nextproject { display:inline-block; width:auto; font-size:.9em; border-radius:3em; background:var(--blue1); color:white; padding:.5em 2em; }
.nextproject b { font-size:inherit; font-weight:bold; display:inline-block; margin-left:.5em; }



.centerbox { max-width:920px; max-width:900px; margin:1.5em auto; font-size:.9em; }
.centerbox .row,
.centerbox .row * { text-align:left; }
.centerbox .row { padding:5em 0; }
.centerbox p { xxxxfont-size:1.5em; line-height:1.4; }


.abouthistory { display:block!important; }
.abouthistory:nth-child(odd) { xxxxtransform:translateX(2em); }
.abouthistory .col { display:block; xxxxpadding-left:6.5em; xxxxxpadding-top:3em; }
.abouthistory .col:first-child { xxxpadding-left:0; }
.abouthistory .col h2 { font-size:4.2em; line-height:1; font-size:2.5em; xxfont-weight:normal; margin-bottom:1em; }
.abouthistory .col h3 { xxxletter-spacing:.8em; font-size:.87em; margin:1.5em 0; xxxtransform:translateX(-5em); }
.abouthistory .col h3:after { content:''; display:block; bottom:0; left:0; width:15em; border-bottom:1px solid black; display:none; }
.abouthistory .col strong { display:block; margin-bottom:0; font-size:2.5em; font-weight:normal; letter-spacing:-.06em; /*position:absolute; top:0; left:0;*/ text-transform:capitalize; font-weight:bold; line-height:1; margin-bottom:1em; }
.abouthistory .col p { display:block; margin-bottom:1.5em; xxxfont-size:1.9em; line-height:1.4; font-size:1.1em; }
.abouthistory .col p strong.include { font-size:1.1em; line-height:1.4; margin:0; display:inline; }
.abouthistory .col p span { display:inline; border-bottom:1px solid rgba(0,0,0,.2); }
.abouthistory .col ul { display:block; xxxborder:1px solid rgba(0,0,0,.2); font-size:1.15em; margin:1em 0; }
.abouthistory .col ul li { display:flex; align-items:flex-start; margin:0; padding:.7em 0; list-style:none; border-bottom:1px solid rgba(0,0,0,.2); }
.abouthistory .col ul li:last-child { border-bottom:0; }
.abouthistory .col ul li span { display:inline-block; width:5em; }
.abouthistory .col ul li p { width:calc(100% - 5em); }
.abouthistory .col img { margin-bottom:.8em; }


.titleslogan { position:relative; xxxleft:12em;  }


.teamblock { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:2em; }
.teamblock .item { width:24vw; text-align:left; }
.teamblock .item img { height:37vw; object-fit:cover; }



.aboutheader h1 { margin-bottom:.7em;  }
.aboutheader .smalltitle { padding:1.3em .3em; }


@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {
    .clientlistbox { padding:2em 0; }
    .clientlistbox.row { padding:2em; }
    .clientlist p { width:33.33%; text-align:left; justify-content:flex-start; xxxxflex-direction:column; padding:.5em!important; }
    .clientlist p img { margin:0; width:3em; }


    .servicebox { padding:5em; }
    .servicebox .info { margin:2.5em 0 0 0; }
    .servicebox .info .flex { gap:0; }
    .servicebox .info .flex .col { width:calc(33.33% - .2em); }

}
@media -ms-viewport, screen and (max-width:640px) {
    .centerbox { padding:1.5em 2em; }
    .centerbox .row,
    .centerbox .row * {}
    .centerbox .row { padding:2em 0; }

    .abouthistory:nth-child(odd) { transform:none; }
    
    .servicebox .info .flex { flex-direction:column; }
    .servicebox .info .flex .col { width:100%; }

    .contactbox { padding:2em; }
    .contactbox h1 { margin-top:1.5em!important; }
    .contactbox .info { margin:0; }
    .contactbox .info .flex .col { width:calc(50% - 1em); }
    .contactbox .info .flex .col.mfull { width:100%; }


    .clientlistbox { padding:2em 0; }
    .clientlistbox.row { padding:2em; }
    .clientlist p { width:100%; text-align:left; justify-content:flex-start; xxxxflex-direction:column; padding:.5em!important; }
    .clientlist p img { margin:0; width:3em; }
}



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


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



.bordertop { border-top:1px solid rgba(150,150,150,.3); }
.borderright { border-right:1px solid rgba(150,150,150,.3); }
.gap { display:block; height:5em; }

.flex2 { display:flex; position:relative; }
.flex2 .col:first-child { border-right:1px solid rgba(150,150,150,.3); width:calc(25vw - .28em); padding:3em; font-size:.8em; color:#31383f; }
.flex2 .col:last-child { width:calc(75vw - .79em); padding:5em 8em 2em 5em; color:#31383f; }
.flex2 .col.nopadding { padding:0; }
.flex2 .col.sticky { position:sticky; top:3em; }
.flex2.white * { color:white; }



.previewobj { display:block; width:100%; padding:0; margin:0; color:#31383f; }
.previewobj .centercon { display:block; }
.previewobj .centercon * { line-height:1.4; margin:0; padding:0; }
.previewobj .centercon .row { line-height:1; }
.previewobj .centercon .row h2 { line-height:1.4; font-size:1.5em; text-align:center; padding:5em 3em .2em 3em; }
.previewobj .centercon .row img { margin-bottom:-.3em; }
.previewobj .infoblockxxx { padding:12vw 20vw; padding-bottom:6vw; color:#31383f; }
.previewobj .infoblock b { border:0; font-size:1em; color:inherit; padding:2em 2em 2em 0; display:inline-block; width:auto; }
.previewobj .infoblock .website { display:none; }
.previewobj .infoblock .client { display:block; position:relative; padding:4em 0 .5em 0; font-size:1.2em; }
.previewobj .infoblock .client:before { content:'client'; display:block; text-transform:uppercase; font-weight:bold; font-size:.6em; letter-spacing:.2em; margin-bottom:1em; position:absolute; top:2.7em; }
.previewobj .infoblock .client:after { content:''; display:block; text-transform:uppercase; width:2em; height:0; border-bottom:3px solid black; position:absolute; top:3em; }
.previewobj .infoblock.white .client:after { border-color:rgba(255,255,255,.5)!important; }
.previewobj .infoblock .mission { font-style:italic; }
.previewobj .infoblock .title { display:inline-block; xxxborder-top:4px solid #333; width:100%; margin-bottom:.5em; margin-top:4em; }
.previewobj .infoblock .title { display:inline-block; xxxborder-top:4px solid #333; width:100%; margin-bottom:0; }
.previewobj .infoblock h3 { width:auto; display:inline-block; font-size:3em; line-height:1.4!important; margin:0; color:inherit; padding:0; }
.previewobj .infoblock h3 span { display:inline-block; line-height:1.02!important; }
.previewobj .infoblock .date { font-weight:bold; padding-left:.2em; margin-top:.2em; letter-spacing:-0.01em; }
.previewobj .infoblock p { font-size:1em; margin:1em 0; line-height:1.8; color:inherit; text-align:justify; }
.previewobj .infoblock p:first-child { margin-top:3em; }
.previewobj .infoblock p.hashtag { display:flex; flex-wrap:wrap; gap:.5em; margin:1em 0; }
.previewobj .infoblock p.hashtag span { display:block; font-size:.9em; margin:0; color:inherit; text-align:justify; padding:.5em .9em; color:var(--green1); border-radius:.2em; border:1px solid var(--green1); }
.previewobj .infoblock p.hashtag span:before { xxxcontent:url(/asset/img/icon-star.svg); display:inline-block; width:1.1em; height:1.1em; margin-right:.4em; transform:translateY(.15em); }
.previewobj .infoblock.white * { color:white; }
.previewobj .infoblock.white p.hashtag span { border:1px solid white; color:white; }
.previewobj video { display:block; width:100%; height:auto; }
.previewobj .item { display:block; width:100%; margin:0; opacity:1; padding:0; position:relative; cursor:pointer; }
.previewobj .item.video { display:block; padding:1em 5em; background:#626366; }
.previewobj .item video { display:block; margin:0 auto; width:auto; max-width:80%; height:auto; object-fit:cover; }
.previewobj .item .row { display:block; margin:0; width:auto; padding:2em; text-align:center; }
.previewobj .item .row h2 { display:block; margin:0 auto; width:auto; padding:2em; text-align:center; font-size:2em; }
.previewobj .item .row p { display:block; margin:0 auto; width:auto; padding:2em; text-align:center; }

.previewobj .item .slideshow { display:block; width:100vw; height:55vw; position:relative; overflow:hidden; background:#f1f2f5; }
.previewobj .item .slideshow .mask { display:flex; width:300vw; height:60vw; position:absolute; top:0; left:0; }
.previewobj .item .slideshow .mask .item { display:block; width:100vw; height:60vw; position:relative; }
.previewobj .item .slideshow .mask .item .info { display:block; background:#333; position:relative; height:20vw; }
.previewobj .item .slideshow .mask .item .info p { display:block; width:100vw; padding:2em; position:absolute; top:63%; left:50%; transform:translate(-50%,-50%); text-align:center; text-align:center; z-index:3; color:white; max-width:85vw; font-size:1.1em; line-height1.6; margin:0; }
.previewobj .item .slideshow .mask .item img { display:block; width:100%; height:auto; margin:0 auto; }
.previewobj .item .slideshow .navset { display:block; background:transparent; height:auto; position:absolute; top:3vw; left:50%; transform:translateX(-50%); padding:0; text-align:center; z-index:12; }
.previewobj .item .slideshow .navset a { display:inline-block; width:auto; margin:.2em; text-align:center; background:#333; color:white; border-radius:3em; padding:.5em 1em; cursor:pointer; font-size:1em; opacity:.8; }
.previewobj .item .slideshow .navset a:hover { opacity:1; }
.previewobj .item .slideshow .navset a.selected { opacity:1; background:dodgerblue; }

.previewobj .item .imgobj { display:block; width:100%; xxxbackground-color:#ccc; background-size:cover; background-repeat:no-repeat; background-position:center; position:relative; overflow:hidden; margin:0 auto!important; }
.previewobj .item .imgobj img { display:block; max-width:100%; width:auto; margin:0 auto!important; }
.previewobj .item .spinner { display:block; width:1em; height:1em; border-radius:1em; border:3px solid white; border-left:none; animation:_rotatespinner 1s linear infinite; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.previewobj .item .cover { display:block; background:rgba(0,0,0,.5); transition:all .5s; opacity:0.7; width:100%; min-height:0; height:100%; position:absolute; top:0; left:0; z-index:6; opacity:0; }

.previewobj .item .info { display:block; padding:3em 1em; font-size:1.5em; text-align:center; transition:all .3s; }
.previewobj .item .info .name { font-size:1.2em; }
.previewobj .item .info p { font-size:.9em; text-align:center; }
.previewobj .item .info .mission { font-size:.9em; background:green; }
.previewobj .item .info a { display:inline-block; padding:.5em 1em; border-radius:3px; background:#333; color:white; font-size:1em; text-decoration:none; text-align:center; }
.previewobj .item .hashtag { color:var(--earthgreen); }

.previewobj .btn-close { display:block; position:fixed; top:3em; right:3em; text-transform:uppercase; margin:0; padding:0; z-index:20; cursor:pointer; font-weight:bold; transition:all .2s; cursor:pointer; text-align:center; font-size:.8em; letter-spacing:.1em; }
.previewobj .btn-close .iconclose { display:block; position:absolute; top:0; left:0; margin:0; padding:0; z-index:20; cursor:pointer; transform:translate(-50%,-50%); transition:all .2s; cursor:pointer; width:3.5em; height:3.5em; background:var(--black); }
.previewobj .btn-close .iconclose span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); transition:all .2s; width:1.2em; height:2px; background:white; }
.previewobj .btn-close .iconclose span:last-child { transform:translate(-50%,-50%) rotate(-45deg); transition:all .35s; }
.previewobj .btn-close:after { content:""; display:inline-block; width:8vw; height:0; border-bottom:1px solid rgba(50,50,50,.5); vertical-align:middle; transition:all .5s; }
.previewobj .btn-close:hover {}
.previewobj .btn-close:hover .iconclose { background:var(--earthgreen); }
.previewobj .btn-close:hover .iconclose span { top:60%; }
.previewobj .btn-close:hover .iconclose span:last-child { top:60%; }
.previewobj .btn-close:hover:after { width:5vw; border-color:#333; }


.sticky { position:sticky; top:0; }
.portfoliobox { display:flex; flex-wrap:wrap; gap:1em; padding:1em!important; }
.portfoliobox .item { display:flex!important; flex-direction:column; justify-content:center; width:calc(50% - .5em); overflow:hidden; padding:5em; border-radius:.4em; background:rgba(241,242,245,.3); text-align:center; }
.portfoliobox .item img { margin-bottom:2em; }
.portfoliobox .item p b { font-size:inherit!important; font-weight:bold!important; }
.portfoliobox .item strong { letter-spacing:0!important; font-size:1em!important; }
.portfoliobox .item.big { width:100%; }
.portfoliobox .item.big * { text-align:left; display:block; }
.portfoliobox .item.center * { text-align:center; margin:0 auto; }
.portfoliobox .item.third { width:calc(33.33% - .7em); padding:2.9em; }
.portfoliobox .flex { display:flex; gap:1em; flex-wrap:wrap; position:relative; padding:0; margin:0; width:100%; }
.portfoliobox .item.bgimg { background-size:cover; background-position:center; color:white; }
.portfoliobox .item.fulltop { padding:0 0 4em 0; }
.portfoliobox .item.fulltop img { xxxmargin-bottom:2em; mix-blend-mode:multiply; }
.portfoliobox .item.fulltop p { padding:0 2em; }

.portfoliobox .item .asbg { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; object-fit:cover; max-width:100%; }
.portfoliobox .item .thirdlargepc { width:100%; margin-bottom:2em; max-width:200%; }
.portfoliobox .item .btitle { font-size:1.5em!important; display:block; text-align:left; color:#353638; }
.portfoliobox .item .innerflex { display:flex; border-top:1px solid var(--border2); gap:0; align-items:center; margin-top:3em; }
.portfoliobox .item .innerflex .col { width:33.33%; border-right:1px solid var(--border2); padding:2em; justify-content:center; align-items:center; }
.portfoliobox .item .innerflex .col:last-child { border-right:0; }


.phoneborder { display:inline-block; margin:0 auto; border-radius:.7em; background:#e1e2e5; overflow:hidden; border:3px solid #888; box-shadow:0 1px 4px rgba(0,0,0,.2); width:auto; }
.phoneborder video,
.phoneborder img { display:block; margin:0; max-width:100%!important; width:101%!important; height:100%!important; margin-left:-1px; }
.basicmobile { width:auto; height:30vw; margin-bottom:2em; }
.basicpc { width:30vw; height:18.5vw; margin-bottom:2em; position:relative; left:50%; transform:translateX(-50%); }
.bigclambox { padding:10em 3em; }
.multiply { mix-blend-mode:multiply; }

.item.heading { width:100%; padding:10em 3em 1.5em 3em; background:transparent; text-align:left!important; }
.item.heading * { text-align:left!important; }
.item.heading .bigclam { padding:0!important; margin:0 0 .5em 0; font-size:6vw!important; line-height:.8!important; }
.item .bigclam { padding:1em!important; margin:0; text-align:left; font-size:6vw!important; line-height:.8!important; }
.item .bigclam small { padding:0; margin:0; text-align:left; font-size:.5em; display:block; }
.item .smallclam { padding:1em!important; margin:0; text-align:left; }

.dataset { display:flex; flex-direction:column; padding:3em 0!important; }
.dataset .item { display:flex!important; padding:0 3.5em; align-items:center; gap:2em; xxxxborder-bottom:1px solid var(--border); }
.dataset .item p { width:30%; display:block; border-right:1px solid var(--border); padding:2em 0; }
.dataset .item strong { display:block; width:auto; font-size:4em; font-weight:normal!important; letter-spacing:-.03em!important; }


.projecttitle { padding:1.5em; letter-spacing:-.06em; line-height:.9; position:relative; }
.projecttitle:before { content:''; display:block; height:108.4%; position:absolute; left:24.74vw;left:49.54vw; top:0; border-right:1px solid var(--border); mix-blend-mode:multiply; }
.projecttitle:after { content:''; display:block; width:100%; position:absolute; bottom:-.5em; left:0; border-bottom:1px solid rgba(50,50,50,.2); }

.projecttitle.recommand { padding:0; margin:2em 0; margin-bottom:1em; margin-top:0; font-size:2.5em!important; text-align:left; position:relative; top:0; left:10vw; }
.projecttitle.recommand:after { display:none; }

.projecttitle,
.bigclam { font-weight:normal; font-size:6vw!important; }
.white * { color:white; }
.btn-talk { font-size:1.4em; padding:3em; }





@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {
    .gap { height:2em; }
    .previewobj .infoblock h3 { font-size:1.8em; }
    .previewobj .infoblock p { font-size:1em; }
    .previewobj .infoblock p.hashtag span { margin:.2em 0; margin-right:.2em; }

    .flex2 { display:flex; position:relative; }
    .flex2 .col:first-child {}
    .flex2 .col:last-child { padding:3em 5em 2em 3em; }

    .portfoliobox .item { padding:1em; }
    .portfoliobox .item .innerflex .col { padding:1em!important; }
    .portfoliobox .item.heading { padding:1em; padding-top:5em; }

}
@keyframes _rotatespinner { 0%{transform:translate(-50%,-50%) rotate(0);} 100%{transform:translate(-50%,-50%) rotate(360deg); } }
@media -ms-viewport, screen and (max-width:640px) {

    .gap { height:2em; }
    .previewobj .btn-close .iconclose { font-size:1.7em; top:50%; }
    .previewobj .btn-close:after { width:4em; position:absolute; top:50%; left:3em; }

    .previewobj .infoblock .mission { flex-wrap:wrap; }
    .previewobj .infoblock .mission span { display:inline-block; border-right:1px solid var(--gray); padding:.5em 1em; }
    .previewobj .centercon .row h2 { padding:3em .5em!important; }

    .flex2 { flex-direction:column; }
    .flex2 .col { width:100%!important; border-right:0!important; border-bottom:1px solid var(--border)!important; padding:2em!important; }
    .flex2 .col.portfoliobox { gap:.3em; padding:.5em!important; }
    .flex2 .col:first-child { padding:0!important; }
    .flex2 .col.sticky { padding:2.7em!important; }
    .flex2 .col:last-child { border-bottom:0!important; }
    .previewobj .infoblock { color:#333; }
    .previewobj .infoblock .title { margin-top:4em; }
    .previewobj .infoblock b { font-size:1em; }
    .previewobj .infoblock b:after { height:3em; }
    .previewobj .infoblock h3 { font-size:2em; }
    .previewobj .infoblock p { font-size:1.05em; }


    .previewobj .item video { width:100%; height:auto; }
    .previewobj .item .row h2 { padding:1em; }

    .previewobj .item .slideshow,
    .previewobj .item .slideshow .mask,
    .previewobj .item .slideshow .mask .item { height:150vw; }
    .previewobj .item .slideshow .mask .item .info { height:60vw; }
    .previewobj .item .slideshow .mask .item .info p { padding:0 1em; top:63%; max-width:85vw; line-height:1.4; font-size:.8em; }
    .previewobj .item .slideshow .navset { width:100%; }
    .previewobj .item .slideshow .navset a { font-size:.9em; }




    .sticky {}
    .portfoliobox { gap:.3em; padding:.5em!important; }
    .portfoliobox p { padding:1.5em 0!important; }
    .portfoliobox .item { padding:2em 1em; width:100%; }
    .portfoliobox .item.mmin20 { min-height:20em; }
    .portfoliobox .item.third { width:calc(50% - .25em); padding:1.5em .5em; }
    .portfoliobox .item.third:nth-of-type(3) { width:calc(100% - .7em); }
    .portfoliobox .flex { gap:.3em; padding:0; }
    .portfoliobox .flex .item.third:nth-of-type(3) { width:100%; }
    .portfoliobox .item .innerflex { flex-direction:column; }
    .portfoliobox .item .innerflex .col { width:100%; border-right:0; border-bottom:1px solid var(--border2); padding:2em!important; }
    .portfoliobox .item .innerflex .col:last-child { border:0; }
    .phoneborder { border-width:2px; min-width:60vw; }
    .basicmobile { width:60%; height:auto!important; margin:4em auto!important; }
    .item.heading { padding:5em .5em 1.5em .5em; min-height:1em; }
    .previewobj .centercon .item.heading h2,
    .item.heading h2 { padding:0!important; }

    .item.heading * { text-align:left!important; }
    .item.heading .bigclam, .bigclam { font-size:2.8em!important; }
    .bigclambox { padding:3em 1em; }
    .bigclam { font-size:2.2em!important; }
    .projecttitle { padding:1em .5em; font-size:2.8em!important; }
    .projecttitle:before, .bigclam:before { display:none; }

    .basicpc { width:100%; height:auto; margin-bottom:1em; left:auto; transform:none; }


    .dataset { padding:0!important; }
    .dataset .item { flex-direction:column; padding:1em 0; gap:0; justify-content:flex-start; }
    .dataset .item p { width:100%; border-right:0; padding:0; text-align:center; }
    .dataset .item strong { font-size:2em; text-align:left; margin-top:-.5em; font-weight:bold!important; padding:0; margin:.1em 0; }

    
    .projecttitle.recommand { margin:2em .7em;margin:0 0 2em 0; }
    

}

@keyframes _rotatespinner {
    0%{transform:translate(-50%,-50%) rotate(0);}
    100%{transform:translate(-50%,-50%) rotate(360deg);}
}



























/*

LANG

*/




.lang-tw .introblock .info strong { width:4em; }
.lang-tw .workboxhome .item.text b { padding-bottom:1em!important; }
.lang-tw .previewobj p,
.lang-tw .previewobj strong,
.lang-tw .previewobj li { font-size:1.1em!important; line-height:1.8!important; }
.lang-tw .dataset .item strong { font-size:4em!important; }
.lang-tw .contactbox { font-size:1.1em; }
.lang-tw .servicebox .info b { font-size:2em; }
.lang-tw .servicebox .info strong { font-size:1.2em; }
.lang-tw .servicebox p { font-size:1.6em; line-height:1.6; letter-spacing:0; margin-bottom:1em; padding-right:1em; }
.lang-tw .footer .row strong { font-size:2em; margin-bottom:0; line-height:1.4; }
.lang-tw .introblock .btn-scrolldown { font-size:1em; }
.lang-tw .servicebox .info b,
.lang-tw .workboxhome .item.text b { font-size:2.6em; line-height:1.2; letter-spacing:0; padding:0!important; }
.lang-tw .workboxhome .item.text p { font-size:1.6em; line-height:1.8; letter-spacing:0; }
.lang-tw .workboxhome .row strong { font-size:2em; }
.lang-tw .workbox .item .info h2 { font-size:1.25em; font-weight:bold; }
.lang-tw .workbox .item .info p { font-size:1em; }
.lang-tw .item.heading .bigclam { line-height:.9!important; }
.lang-tw .abouthistory { font-size:1.15em; }
.lang-tw .abouthistory p { line-height:1.8; }
.lang-tw .sloganpage .sloganset strong { margin-bottom:.3em; }
.lang-tw .sloganpage .sloganset strong span {}
.lang-tw .clientlist p { xxxfont-size:.9em!important; line-height:1.2!important; }
.lang-tw .catset a { font-size:1.05em; padding:.5em 1.2em; }
.lang-tw .catset a.btn img { width:1.2em; height:1.2em; }
.lang-tw .scroll-indicator.btn-back { right:11.6em; }

@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {
    .lang-tw .servicebox p { padding-right:0; }
}
@media -ms-viewport, screen and (max-width:640px) {
    .lang-tw .introblock .info { margin-left:.2em; zoom:1.4; }
    .lang-tw .sloganpage .sloganset strong { font-size:2em; }
    .lang-tw .servicebox .info b,
    .lang-tw .workboxhome .item.text b { font-size:2em; }
    .lang-tw .workboxhome .item.text p { font-size:1.2em; }
    .lang-tw .workbox .item .info h2 { font-size:1.1em; font-weight:normal; }
    .lang-tw .workbox .item .info p { font-size:.88em; }
    .lang-tw .sloganpage .sloganset strong { margin-bottom:0; }
    .lang-tw .sloganpage .sloganset strong span { display:block; padding-bottom:.3em; }
}







.lang-en * { font-family:'Inter',sans-serif; }
.lang-en .row h1 { font-size:4.5vw; }
.lang-en .coverblock .info.grid42 .p1 { font-size:1.6em; }
.lang-en .workboxhome .item.text {}
.lang-en .servicebox .info b,
.lang-en .workboxhome .item.text b { font-size:2.6em; line-height:1.02; letter-spacing:-.02em; }
.lang-en .workboxhome .item.text p { font-size:1.6em; line-height:1.2; letter-spacing:-.02em; }
.lang-en .servicebox { xxxxpadding:.3em 8em; }
.lang-en .servicebox p { font-size:1.6em; line-height:1.2; letter-spacing:-.02em; margin-bottom:1em; }
.lang-en .previewobj .infoblock p { text-align:left; }
.lang-en .previewobj .infoblock h3 { line-height:1.2!important; }
.lang-en .previewobj .item .row h2 { font-weight:normal; }
.lang-en .item.heading .bigclam, .bigclam {}
.lang-en .item.heading .bigclam { letter-spacing:-.03em; }
.lang-en .row p { letter-spacing:0; padding:.8em 0; }



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

    .lang-en .row h1 { font-size:2.5em; }
    .lang-en .servicebox .info b, 
    .lang-en .workboxhome .item.text b { font-size:2em; }
    .lang-en .item.heading .bigclam, .bigclam { line-height:1.05!important; }
}







/*

EN + TITLE

*/


/*
Acumin Pro Thin
font-family: "acumin-pro", sans-serif;
font-weight: 100;
font-style: normal;
Acumin Pro Extra Light
font-family: "acumin-pro", sans-serif;
font-weight: 200;
font-style: normal;
Acumin Pro Light
font-family: "acumin-pro", sans-serif;
font-weight: 300;
font-style: normal;
Acumin Pro Regular
font-family: "acumin-pro", sans-serif;
font-weight: 400;
font-style: normal;
Acumin Pro Medium
font-family: "acumin-pro", sans-serif;
font-weight: 500;
font-style: normal;
Acumin Pro Semibold
font-family: "acumin-pro", sans-serif;
font-weight: 600;
font-style: normal;
Acumin Pro Bold
font-family: "acumin-pro", sans-serif;
font-weight: 700;
font-style: normal;
*/


/*
.entitle,
.coverblock .info h3,
.coverblock .info h3 span {
    font-family:'et1'; 
    font-family:"Playwrite SK",cursive; 
    font-family: "Share Tech Mono", monospace;
    font-family: 'Barlow Semi Condensed', sans-serif; 
    font-size:2.2em; text-transform:capitalize; letter-spacing:-.01em;
    font-optical-sizing:auto; font-weight:700; font-style:normal; }


.title,
.sloganpage h1,
.slogan,
.endline { font-family: "DM Serif Display", serif; font-weight:400; font-style:normal; }
*/



.sloganpage strong,
.introblock .info strong { font-family:'Acumin Pro Semibold', sans-serif; }
.btn-talk { font-family:'Acumin Pro Semibold', sans-serif; letter-spacing:-.03em; font-weight:bold; }