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

          _   _   _           
  ___ ___| |_| |_(_)_ _  __ _ 
 (_-</ -_)  _|  _| | ' \/ _` |
 /__/\___|\__|\__|_|_||_\__, |
                        |___/ 

*/


@font-face {
    font-family:en;
    src:url(../fonts/acumin/Acumin-BdPro.otf) format('opentype');
}
:root {
    --bggray:#bef1c4;
    --black:#000; /*#0a0a0a;*/
    --black2:#0a0a0a;
    --black22:#222;
    --black3:#333;
    --bg:#f5f6fa;
    --gray:#333;
    --darkgray:#414248;
    --lightgray:#f1f2f8;
    --border:#c1c2c5;
    --lightgray:#c1c2c8;

    --white2: rgba(255,255,255,.5);
    --white3: rgba(255,255,255,.35);
    --white4: rgba(255,255,255,.15);

    --borderwhite: rgba(255,255,255,.4);

    --bezier:cubic-bezier(.14,.1,.26,1);
    --bezier:cubic-bezier(.57,0,.38,1);
    --bezier2:cubic-bezier(0,.54,.99,.58);


    --lineg:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    --lineg2:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    --lineg2xxx:linear-gradient(0deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.85) 100%);


}






/*

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


html { display:block; margin:0; padding:0; height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
body { margin:0; padding:0; overflow-x:hidden; position:relative; background:var(--black); font-size:.88em; padding-top:10em; }
.noscroll { overflow:hidden; }
li { padding-bottom:8px; }
* { box-sizing:border-box; margin:0; padding:0; font-family:"Noto Sans TC",'微軟正黑體',Arial,"Hiragino Sans GB","Source Han Sans",'PingFangTC-Regular',sans-serif; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; color:white;color:rgb(205,205,205); letter-spacing:.03em; text-align:left; line-height:1.4; position:relative; text-align:center; }
a { text-decoration:none; }
hr { border:0; border-top:1px solid #ccc; }
h2 { font-size:1.5em; text-transform:capitalize; }
h2 img { height:1.2em; }
p img { height:.9em; }
img { max-width:100%; }
.en { font-family:"Roboto", sans-serif; }

/* SPINNER */
.loader { display:block; margin:0; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1222; overflow:hidden; }
.loader .bg { display:block; margin:0; position:absolute; top:50%; left:50%; width:150%; height:150%; z-index:22; transform:translate(-50%,-50%); background:var(--black); }
.loader strong { display:block; position:fixed; top:50%; left:50%; color:white; font-family:'acumin'; word-break:keep-all; transform:translate(-50%,-50%); z-index:23; font-size:.7rem; letter-spacing:.8em; text-transform:uppercase; }

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





/*

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

*/

/* Header */
.header { display:block; width:100%; z-index:266; position:absolute; top:0; left:0; height:10em; }
.header:hover,
.header.hover { position:fixed; top:0; left:0; }
.header:hoverxxxx { background:var(--black2); }
.header.hover { animation:_headerin 1s forwards; }
@keyframes _headerin { 0%{position:fixed; top:-10em;}100%{position:fixed; top:0em;} }
.header:before { content:''; display:block; width:100%; height:15em; position:absolute; top:0; left:0; background:linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); z-index:1; top:-15em; transition:all .8s; }
.header .row { position:relative; display:block; padding:2em 0; width:100%; margin:0 auto; text-align:center; z-index:3; }
.header .logo { position:relative; display:block; padding:0; width:3em; margin:0 auto; cursor:pointer; }
.header .logo img { position:relative; display:block; padding:0; width:100%; margin:0 auto; }
.header .floatset { display:flex; position:absolute; top:0; right:0; padding:2em 4em; }
.header .floatset a { display:block; width:2.4em; padding:.3em; opacity:.5; transition:all .2s; }
.header .floatset a:hover { opacity:1; }
.header .nav { display:flex; text-align:center; justify-content:center; padding:1em 0; }
.header .nav>.a { display:block; cursor:pointer; padding:1em 3em; text-align:left; font-size:.95em; line-height:1; xxxtransition:all .3s; position:relative; }
.header .nav>.a:before { display:none!important; }
.header .nav>.a p { display:block; font-size:inherit; line-height:inherit; position:relative; }
.header .nav>.a.fade { opacity:.5; }
.header .nav>.a.hover { opacity:1; }
.header .nav>.a.home { display:none; }
.header .btnmenu { display:block; position:absolute; top:0; left:0; padding:2.3em; opacity:.5; display:none; }
.header .btnmenu img { position:relative; display:block; padding:0; width:2em; margin:0 auto; }
.header .btnmenu:hover { opacity:1; }
.header.shorten:before { top:0; }
.header.onmega { background:var(--black2); top:0!important; }

.mega { display:flex; position:fixed; top:100%;top:-600px; left:0; width:100%; margin:0; margin-top:0; background:var(--black2); padding:3em 3em; z-index:122; justify-content:center; }
.mega .col { display:block; padding:1em; text-align:left; width:20vw; xxxxxfont-size:1.1em; }
.mega .col.empty { xxxxdisplay:none; }
.mega .col strong,
.mega .col>a.strong { display:block; padding:1em 0; text-align:left; font-weight:bold; margin-bottom:.2em; opacity:1!important; color:white!important; }
.mega .col>a { display:block; padding:.5em 0; padding-left:.8em; xxxxopacity:.6!important; text-align:left; color:var(--white2); transition:all .2s; }
.mega .col>a:hover { color:var(--white2); padding-left:.2em; opacity:.7!important; }
.mega .col>a.selected { color:white; opacity:.6; opacity:.7!important; }
.mega .col>a.selected:beforexxx { content:'•'; color:white; position:absolute; top:50%; left:-1em; transform:translateY(-50%); font-size:.8em; }
.mega .col .adblock { display:block; text-align:left; }
.mega .col .adblock p,
.mega .col .ablock p { display:block; text-align:left; margin:1em 0; }
.mega .col .ablock small { font-size:1em; display:block; text-align:left; opacity:.5; transition:all .2s; }
.mega .col .ablock img { display:block; width:32.4vw; height:11vw; object-fit:cover; xxxborder:2px solid orange; }
.mega .col .ablock:hover { padding:.5em 0!important; opacity:1!important; }
.mega .col .ablock:hover small { opacity:1; }
.mega .col.expandxxxx { width:60em; }
.mega .col.expandxxxx .ablock img { display:block; width:100%; height:11vw; object-fit:cover; }
.mega1xxxx { display:flex!important; }

.footer { display:block; margin:0; position:relative; padding:10vw; padding-top:0; margin-top:0!important; height:25vw!important;height:30em!important; overflow:hidden; }
.footer .topline { display:block; width:70%; position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--lineg); height:.5px; opacity:.5; }
.footer .row { xxxposition:absolute; }
.footer .row.flex { align-items:start; margin:0; justify-content:center; gap:5em; width:100%; }
.footer .row.flex .col { padding:7.3em 0; display:block; position:relative; width:calc(25% - 5em); }
.footer .row.flex .col * { text-align:left; }
.footer .row.flex .col strong { display:block; text-align:left; margin-bottom:2em; }
.footer .row.flex .col strong:first-child { display:block; text-align:left; margin-bottom:2em; }
.footer .row.flex .col p { display:block; xxxxcolor:var(--white2); xxxxfont-size:.85em; }
.footer .row small { color:var(--white3); font-size:.75em; position:absolute; top:25em; width:100%; text-align:center; padding:6em 0; }
.footer .row.flex .col p span { display:inline-block; color:var(--white2); width:5em; }
.footer .row.flex .col .sub p,
.footer .row.flex .col .sub a { margin:.3em 0; color:var(--white2); }
.footer .row.flex .col .sub { display:block; }
.footer .row.flex .col .sub p a { display:inline-block; margin:0; }
.footer .row.flex .col .sub.row { display:flex; gap:1.5em; }

.socialicon { width:1em; }


.copyright { display:block; text-align:center; letter-spacing:.01em; font-size:.8em; }


.overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:189; }
.debugger { display:block; position:fixed; top:0; left:0; background:lightgreen; color:red; padding:.2em; z-index:9999; opacity:0; pointer-events:hidden; }

@media -ms-viewport, screen and (max-width:640px) {
    .header:before { display:none; }
    .header .row { padding:2em 0; }
    .header .nav { display:flex; flex-direction:column; width:100vw; height:100vh; display:none; background:var(--black); padding-top:14vh; position:fixed; top:0; overflow-y:scroll; }
    .header .nav>.a { padding:0; margin:0; font-size:1em; opacity:1; border-bottom:1px solid var(--white4); }
    .header .nav>.a p { padding:2em; text-align:left; }
    .header .nav>.a p:after { content:url(../images/icon-dotarrow.svg); opacity:1; display:block; width:1.5em; height:1.5em; margin:0; margin-left:.8em; position:absolute; top:50%; transform:translateY(-50%) rotate(180deg); right:2em; transition:all .2s; }
    .header .nav>.a.home { display:block; }
    .header .nav>.a.home p:after { display:none; }
    .header .nav>.a.selected { xxxxborder:1px solid var(--borderwhite); border:0; opacity:1; }
    .header .nav>.a.selected span { display:none; }
    .header .nav>.a.selected p:after { transform:translateY(-50%) rotate(0deg); }
    /*.header .nav>.a.hover { background:white; color:black; }
    .header .nav>.a.hover p { color:black; }*/
    .header .btnmenu { display:block; opacity:.5; z-index:111; xxxbackground:red; }

    .header .floatset { padding:2em; }
    .header .floatset a.icon-location,
    .header .floatset a.icon-service { display:none; }

    .mega { display:block; padding:0; margin:0; position:relative; top:0!important; left:-600; padding-bottom:2em; margin-bottom:2em; }
    .mega.show { left:0; }
    .mega .col { padding:1em 3.6em; width:100%; font-size:1em; margin:0; text-align:left; }
    .mega .col strong,
    .mega .col a { font-size:1em; text-align:left; margin:.5em 0; }
    .mega .col.empty,
    .mega .col.adblock,
    .mega .col.adblock img { display:none; }
    .mega .col.adblock p { padding:0; }
    .mega .col.adblock p:after { content:''; display:none; }


    .footer { padding:4em 2em; height:auto!important; }
    .footer .row.flex { display:block; height:auto; }
    .footer .row.flex .col { padding:1em 0; width:100%; border-bottom:1px solid var(--white4); }
    .footer .row { position:relative; width:100%; top:auto; left:auto; transform:none; }
    .footer .row.flex .col .sub { display:none; }
    .footer .row.flex .col strong { padding:.5em 0; }
    .footer .row.flex .col strong:after { content:url(../images/icon-dotarrow.svg); opacity:1; display:block; width:1.5em; height:1.5em; margin:0; margin-left:.8em; position:absolute; top:50%; transform:translateY(-50%) rotate(180deg); right:0; transition:all .2s; }
    .footer .row.flex .col strong:first-child { margin:0; }
    .footer .row.flex .col.open strong:after { transform:translateY(-50%) rotate(0deg); }
    .footer .row.flex .col .sub p span { width:auto; padding-right:1em; }
    .footer .row.flex .col .sub p a { display:inline-block; margin:0; }
    .footer .row.flex .col .sub p,
    .footer .row.flex .col .sub a { margin:1.5em 0; }
    /*
    .footer .row.copyright { position:absolute; width:calc(100% - 4em); top:calc(100% - 5em); height:3em; }
    .footer .row.copyright small { top:0!important; }
    */


    .copyright { padding:4em 0; }
}


















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


.section { background-position:center; background-repeat:no-repeat; background-size:cover; position:relative; display:block; xxoverflow:hidden; }
.section.detail {}
.section.detail .row.aligntop,
.popblock.detailpage .row.aligntop { margin:0; }
.section.detail.thefullpagedetail { height:calc(100vh - 10em); border:1px solid green; overflow-y:scroll; }
.section.w60 { height:52.67vw; }
.section.w60 img { height:100%; object-fit:cover; }
.section .img.bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.section .img.bg img { object-fit:cover; display:block; width:100%; height:100%; }
.section .img.bg.contain img { object-fit:contain; }
.section .img.bg.bgtop img { height:auto; }
.section.flex { display:flex; justify-content:center; }
.section.flex .rowcon { display:flex; align-items:center; width:34%; height:34.3vw; text-align:center; justify-content:center; flex-direction:column; padding:0 5vw; }
.section.flex .rowcon * { text-align:center; }
.section.flex .bigcover { display:block; width:66%; }
.container { padding:0; margin:0 auto; position:relative; box-sizing:border-box; }
.row { display:block; width:100%; padding:0; position:relative; z-index:10; }
.row.flex { display:flex; justify-content:left; align-items:center; margin:14vw 0; xxxxborder:1px dashed rgba(255,255,255,.3); }
.row.flex .col { display:block; width:50%; overflow:hidden; xxxxborder:1px dashed rgba(255,255,255,.2); z-index:10; }
.row.flex .col .img { height:52.67vw; }
.row.flex .col .img img { height:100%; object-fit:cover; width:100%; }
.row.flex .col .img.leftin { margin-left:7vw; }
.row.flex .col .img.rightin { margin-right:7vw; }
.row.flex .col.mapbox .img { height:auto; }
.row.flex.flex55 .col { display:block; width:50%; }
.row.flex.aligntop { align-items:flex-start; }
.row.flex.hcenter { top:50%; transform:translateY(-50%); margin:0; height:100%; }
.row.flex.hcenter .col:nth-child(2) { left:50%; }
.row.center { text-align:center; }
.row.center * { margin:2em auto; }
.padding-xxl { padding:16em; }
.padding-xl { padding:12em; }
.padding-l { padding:8em; }
.padding-m { padding:4em; }
.padding-s { padding:2em; }
.padding-xs { padding:1em; }
.padding-bottomtext { padding:2em 8em 12em 8em; }
.padding-end { padding:12em; }
.left *,
.left { text-align:left; }
.skillcenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; width:auto; margin:0 auto; padding:0!important; align-items:center; }
.skillcenter .skilltitle { margin:.5em auto!important; }
.pointernone { pointer-events:none; }
.smallbtn { display:inline-block; margin:0 auto; width:auto; cursor:pointer; position:relative; }
.smallbtn:before { content:''; display:block; width:0; height:1px; border-bottom:1px solid #cdcdcd; position:absolute; bottom:0; left:0; transition:all .2s; }
.smallbtn:hover:before { width:100%; }

.fullscreen { height:100vh; xxxxheight:52.67vw; background-size:cover; align-items:center; background-repeat:no-repeat; xxxxpointer-events:none; xxxxxmargin-top:-10em!important; }
.fullscreen .col { margin:0; top:50%; transform:translateY(-50%); z-index:10; }
.fullscreen .col.left { width:50%; }
.fullscreen .img { height:100%; width:100%; z-index:2; }
.fullscreen .img img { height:100%; width:100%; object-fit:cover; }
.fullscreen .img.fixed { position:fixed; top:0; left:0; }
.fullscreen .video { position:absolute; top:0; left:0; width:100%; height:100%; z-index:12; object-fit:cover; mix-blend-mode:screen; }
.fullscreen .aligncenter { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.fullscreen .aligntop { position:absolute; top:30%; left:50%; transform:translateX(-50%); }
.fullscreen .alignbottom { position:absolute; bottom:0; left:50%; transform:translateX(-50%); xxxborder:1px solid red; }
.fullscreen4 { height:84.28vw; }
.fullscreen4 .img { height:73.28vw; }
.fullcover.col { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%!important; height:100%!important; z-index:1!important; }
.centerblock { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.centerblock.bottom { top:auto; bottom:4em; }
.centerblock.bottom:before { content:''; display:block; width:100%; height:300%; position:absolute; top:-5em; left:0; z-index:-1; background:linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); min-height:40vh; }
.centerblock .downline { display:block; position:absolute; top:7em; left:50%; transform:translateX(-50%); height:10vh; border-right:1px solid white; }

.asbtn { cursor:pointer; opacity:.8; display:inline-block!important; width:auto; transition:all .2s; }
.asbtn:after { content:''; display:block; width:0; height:0; border-bottom:1px solid white; transition:all .2s; position:absolute; bottom:0; left:0; }
.asbtn:hover { opacity:1; }
.asbtn:hover:after { width:100%; }
.btn { display:inline-block; color:white; padding:.6em!important; margin:0 .1em; text-align:center!important; cursor:pointer; width:12em; xxxxfont-size:.9em; border:1px solid var(--white4); position:relative; }
.btn:before,
.btn:after { content:''; display:block; position:absolute; top:100%; left:100%; width:.2em; height:.2em; border-radius:1em; background:white; transform:translate(-50%,-50%); transition:all .6s; }
.btn:before { top:0; left:0; }
.btn:after { top:100%; left:100%; transition:all 1s; }
.btn:hover { border:1px solid var(--white3); }
.btn:hover:before { top:100%; left:0%; }
.btn:hover:after { top:0%; left:100%; animation:1s _flashdot 1s ease-in-out forwards; }
@keyframes _flashdot { 0%{transform:translate(-50%,-50%) scale(1.5);}100%{transform:translate(-50%,-50%) scale(1);} }

.btn-text { color:var(--lightgray); transition:all .2s; opacity:.5; padding:0; word-break:keep-all; margin:0; cursor:pointer; display:inline-block!important; width:auto; }
.btn-text:hover { opacity:1; }


span.icon { display:inline-block; height:1.2em; width:1.2em; background:var(--earthgreen); border-radius:2em; padding:.2em; position:absolute; top:50%; right:0; transform:translateY(-50%); }
span.icon img { display:block; height:100%; width:100%; }

@media -ms-viewport, screen and (min-width:641px) and (max-width:1199px) {
    .padding-xxl { padding:6em 3em; }
    .padding-xl { padding:6em 3em; }
    .padding-l { padding:4em 2em; }
    .padding-m { padding:4em 2em; }
    .padding-s { padding:2em; }
    .padding-xs { padding:1em; }

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


    .fullscreen { max-height:100vh; xxxxheight:150vw; xxxvertical-align:bottom; height:auto; }

    .section { xxxxborder-bottom:1px solid var(--black3); }
    .section:first-child { xxxmargin-top:5em; }
    .section:last-child { border-bottom:0; }
    .section.w60 { height:auto; }
    .section.detail { padding-top:0; }
    .section.detail .flex {}
    .section .row { margin:.5em 0; }
    .section.flex { flex-direction:column; margin-top:-10em; }
    .section.flex .bigcover { width:100%; height:100vw; }
    .section.flex .bigcover img { width:100%; height:100%; object-fit:cover; }
    .section.flex .rowcon { width:100%; height:auto; padding:3em; flex-direction:column; }

    .m-bgtop { height:180vw; padding-top:90vw; padding-top:20vw; background-size:180vw; background-position:top; }
    .m-bgtop.m-bgleft { background-position:top left 25%; }
    .m-bgtop.m-bgright { background-position:top right 25%; }
    .m-bgbottom { height:180vw; padding-bottom:90vw; background-size:180vw; background-position:bottom; }
    .m-bgbottom.m-bgleft { background-position:bottom left 25%; }
    .m-bgbottom.m-bgright { background-position:bottom right 25%; }
    

    .row.flex { flex-wrap:wrap; }
    .row.flex .col { width:100%; }
    .row.flex.flex55 .col { width:100%; text-align:center; }
    .row.flex .col .img.leftin,
    .row.flex .col .img.rightin { margin:0; }
    .row.flex .col .img { height:75vw; }
    .row.flex .col .img img { height:100%; width:100%; object-fit:cover; }
    .row.flex.hcenter { top:auto; transform:none; }
    .row.flex.hcenter .col:nth-child(2) { left:0; }
    .row.flex.mflexreverse { flex-direction:column-reverse; }
    .padding-xxl { padding:6em 3em; }
    .padding-xl { padding:6em 3em; }
    .padding-l { padding:4em 2em; }
    .padding-m { padding:4em 2em; }
    .padding-s { padding:2em; }
    .padding-xs { padding:1em; }
    .padding-bottomtext { padding:2em 2em 12em 2em; }
    .padding-end { padding:8em 5em; }

    .mcenter { text-align:center; }
    .mcenter * { text-align:center; }
    .mcenter .btn { text-align:center; margin:1em auto; }
    .left .btn { text-align:center; margin:1em auto; }

    .fullscreen .img { height:70vh; }
    .fullscreen .alignbottom { bottom:5em; }
    .fullscreen.covercenter .img { display:block; height:70vh; position:relative; }
    .fullscreen.covercenter .centerblock { display:block; position:relative; top:0; left:0; transform:none; }
    .fullcover.col { position:relative; top:auto; left:0!important; transform:none; }
    .fullcover.mimgright { width:100%; overflow:hidden; }
    .fullcover.mimgright .img { width:200vw; left:-93vw; }
    .fullcover.mimgright .img img {}
    .fullscreen .coverpage.col { /*top:100%; transform:translateY(-100%);*/ top:auto; transform:none; }
    .fullscreen .fullcover.col { /*position:absolute; top:0; left:0!important; transform:none;*/ }
    .fullscreen .col.left { width:100%; }
    .mfullscreen .img { height:70vh; }
    .mfullscreen .img img { height:100%; object-fit:cover; }

    .centerblock.bottom { padding:3em; bottom:0; margin:0; margin-bottom:-8em; }

}









/*

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

*/

.container h2 { margin-bottom:1em; letter-spacing:.1em; xxxopacity:0; }
.container h2 .en { letter-spacing:0; }
.container small, .container a { display:block; margin:1em 0; }
.container b { color:var(--white2); margin:1em 0; font-size:1em; font-weight:normal; display:block; }
.container p { color:var(--white2); margin:0; xxxopacity:0; }

.noproduct { text-align:center; display:block; width:auto; border:1px solid var(--lightgray); margin:3em auto!important; padding:2em 4em; }



.starobj { fill:#ffffff; }
.scrollset { z-index:150; position:relative; margin-top:-15em; }
.scrollset .row { padding:2em 4em 4em 4em; }
.scrollhint { display:block; left:50%; transform:translateX(-50%); width:5em; height:140px; }
.scrollhint .star { display:block; position:absolute; left:50%; top:0; transform:translate(-50%,-50%); transform-origin:center center; xxborder:1px solid red; height:0; width:0; }
.scrollhint .star svg { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:.8em; width:.8em; }
.linedown { display:block; position:absolute; left:50%; top:2em; transform:translateX(-50%); border:0; width:1px; height:80px; 
    background:var(--lineg2); background:white; background-repeat:repeat-y; background-position-y:0;
    xxxxanimation:_linedown 2s linear forwards; } 
.line { display:block; /*position:absolute; left:50%; top:2em; transform:translateX(-50%);*/ border:0; width:1px; height:80px; margin:1em auto;
    background:var(--lineg2); background-repeat:repeat-y; background-position-y:0;
    animation:_linedown 2s linear forwards; } 
    @keyframes _linedown { 0%{background-position-y:0;} 100%{background-position-y:80px;} }

.linev { display:block; position:absolute; left:0; top:0; background:var(--white4); width:1px; height:40vw; }
.lineh { display:block; position:absolute; left:0; top:0; background:var(--white4); width:40vw; height:1px; }
.linev:after,
.lineh:after
{ content:''; display:block; position:absolute; top:100%; left:100%; width:.2em; height:.2em; border-radius:1em; background:white; transform:translate(-50%,-50%); transition:all var(--bezier) .6s; }

.lineset { display:block; height:27vw; margin-top:-7em; xxxborder:3px solid red; }
.lineset .line { display:block; width:27.2vw; height:1px; position:absolute; top:0; left:50%; transform-origin:left; transform:rotate(90deg); background:var(--white3); }
.lineset .line:after { content:''; display:block; position:absolute; top:50%; left:100%; width:.2em; height:.2em; border-radius:1em; background:white; transform:translate(-50%,-50%); transition:all .6s; }
.lineset .line1 { transform:rotate(135deg); width:33vw; }
.lineset .line2 { transform:rotate(90deg); width:23.5vw; }
.lineset .line3 { transform:rotate(45deg); width:33vw; }

.lineblock { display:block; position:absolute; top:-6.5em; left:50%; transform:translateX(-50%); border:1px solid var(--borderwhite); width:52vw; height:11.5em; border-top:0; }


.bigcover { display:block; position:relative; padding:0; height:45vw;height:34.3vw; xxxmargin-bottom:-5vw; }
.bigcover img { display:none; z-index:1; position:relative; margin:0; object-fit:cover; width:100%; height:100%; }
.bigcover h2 { display:block; z-index:3; position:absolute; top:30vw; }
.bigcover p { display:block; z-index:3; position:absolute; top:calc(30vw + 3em); width:40vw; text-align:left; }
.bigcover h2,
.bigcover p { left:5vw; }


.blogblock { display:flex; justify-content:center; gap:.5em; }
.blogblock .item { display:block; width:22vw; padding:0; margin:0; text-align:left; }
.blogblock .item p,
.blogblock .item strong { text-align:left; margin:1em 1.5em .5em 0; display:block; }
.blogblock .item img { xxxmargin:1.5em 0; height:40vw; }

.filterset { margin-top:1em; padding:1.5em; display:flex; justify-content:left; align-items:flex-end; text-align:left; opacity:1!important; }
.filterset p.btn-sort { display:block; padding:0; margin-right:1em; cursor:pointer; opacity:.7; }
.filterset p.btn-sort:before { content:url(../images/icon-filter.svg); display:inline-block; margin-right:.3em; width:1.5em; opacity:.7; transform:translateY(.34em); }
.filterset p.btn-sort:after { content:url(../images/icon-filterarrow.svg); display:inline-block; margin-left:.2em; width:1.3em; transform:translateY(.22em); }
.filterset p.btn-sort:hover { opacity:1; }
.filterset a { display:block; padding:0; margin:0 .6em; cursor:pointer; display:none; }
.filterset a:before { content:url(../images/icon-star-outline.svg); display:inline-block; margin-right:.3em; width:1em; transform:translateY(.1em); }
.filterset a.selected:before { content:url(../images/icon-star.svg); }


.mainblock h3 { display:block; padding:3em 0 0 1.5em; text-align:left; }
.allblock { border-top:1px solid rgba(255,255,255,.5); padding-top:3em; margin-top:3em; }
.allblock h3 { display:block; padding:3em 0 0 1.5em; text-align:left; }


.precomblock { display:flex; justify-content:center; flex-wrap:wrap; gap:1em; padding:0; position:relative; overflow:visible; margin-top:3em; }
.precomblock.home { height:32vw; }
.precomblock.left { justify-content:left; }
.precomblock .item { display:block; width:calc(25% - .75em); padding:0; border:0 solid var(--white4); margin:0; transition:all .2s; text-align:center; cursor:pointer; }
.precomblock .item:before,
.precomblock .item:after { content:''; display:block; position:absolute; top:100%; left:100%; width:.2em; height:.2em; border-radius:1em; background:white; transform:translate(-50%,-50%); transition:all .6s; opacity:0; }
.precomblock .item:before { top:0; left:0; }
.precomblock .item:after { top:100%; left:100%; }
.precomblock .item img { margin:1.5em 0; }
.precomblock .item p { margin-top:.8em; font-size:1.1em; color:white; text-align:center; margin-bottom:.5em; opacity:1; }
.precomblock .item small { margin-top:.4em; font-size:.9em; color:white; text-align:center; }
.precomblock .item .img { margin:0; width:100%; height:calc(25vw - 2.5em); overflow:hidden; }
.precomblock .item .img img { margin:0; width:100%; height:100%; object-fit:cover; }
.precomblock .item:hover { border:1px solid var(--white3); }
.precomblock .item:hover:before { top:100%; left:0%; opacity:1; }
.precomblock .item:hover:after { top:0%; left:100%; opacity:1; }
.precomblock.gradient:before { content:''; display:block; height:40vw; width:7vw; position:absolute; top:0; left:0; z-index:5; background:linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); }
.precomblock.gradient:after { content:''; display:block; height:40vw; width:7vw; position:absolute; top:0; right:0; z-index:6; background:linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); }
.precomblock .mask { display:flex; justify-content:left; gap:10px; padding:0; position:absolute; top:0; left:7vw; z-index:3; }
.precomblock .mask .item p { position:absolute; bottom:0; left:0; width:100%; padding:2em; text-align:center; }
.precomblock .btn-next { display:block; position:absolute; top:50%; left:calc(100% - 7vw); transform:translate(-50%,-50%); margin:0; background:rgba(50,50,50,1); padding:2em .7em!important; z-index:10; cursor:pointer; transition:all .2s; }
.precomblock .btn-next:before { content:url(../images/icon-dotarrow.svg); display:block; transition:all .2s; padding:0!important; opacity:.9; width:1.5em; transform:rotate(90deg); margin-left:-2px; }
.precomblock .btn-next:hover { background:rgba(50,50,50,1); padding:2.33em .9em!important; }
.precomblock .btn-next:hover:before { opacity:1; }
.precomblock .framemap { position:absolute; top:0; left:7vw; width:0; height:5em; border-right:1px solid white; opacity:.5; z-index:20; opacity:0; }


.precomblock.white .item { background:var(--white); }
.precomblock.home .item .img,
.blogblock .item img { height:31.605vw; object-fit:cover; }


.disclaimblock { display:flex; align-items:top; margin:10em auto; gap:4em; margin-top:10em; max-width:800px; }
.disclaimblock .col:first-child { width:25em; text-align:left; }
.disclaimblock .col *,
.disclaimblock .col { display:block; text-align:left; line-height:2; }
.disclaimblock .col ol { display:list-item; margin-left:2em; }
.disclaimblock .col ol li { list-style-position:outside; }
.disclaimblock .col strong { margin:2.8em 0 1em 0; }
.disclaimblock .col.con { padding-top:5em; }
.disclaimblock .menu a { display:block!important; opacity:.5!important; margin:.5em 0; width:auto; }
.disclaimblock .menu a.selected { opacity:1!important; }




.fullscreen,
.row.flex,
.row.flex .col { border:1px dashed rgba(255,255,255,.02);border:0; }




/*
.ph08 { height:16.85vw!important; position:relative; }
.ph1 { height:21.07vw!important; position:relative; }
.ph15 { height:31.605vw!important; position:relative; }
.ph2 { height:42.14vw!important; align-items:center; display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }
.ph25 { height:52.675vw!important; position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }
.ph3 { height:63.21vw!important; align-items:center; display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }
.ph4 { height:84.28vw!important; position:relative; }
.ph7 { height:147.49vw!important; align-items:center; display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }


.ph08:before,
.ph1:before,
.ph15:before,
.ph2:before,
.ph25:before,
.ph3:before,
.ph4:before,
.ph7:before { content:''; display:block; position:absolute; right:.6em; top:0; font-weight:bold; z-index:9995; }
    .ph08:before { content:'0.8'; color:yellow; }
    .ph1:before { content:'1'; color:#f012ff; }
    .ph15:before { content:'1.5'; color:#f012ff; }
    .ph2:before { content:'2'; color:orange; }
    .ph25:before { content:'2.5'; color:orange; }
    .ph3:before { content:'3'; color:#00c0ff; }
    .ph4:before { content:'4'; color:lightgreen; }
    .ph7:before { content:'7'; color:red; }
.ph08:after,
.ph1:after,
.ph15:after,
.ph2:after,
.ph25:after,
.ph3:after,
.ph4:after,
.ph7:after { content:''; display:block; position:absolute; right:0; height:100%; width:1em; top:0; z-index:9994; opacity:.5; }
    .ph08:after { background:yellow; }
    .ph1:after { background:#f012ff; }
    .ph15:after { background:#f012ff; }
    .ph2:after { background:orange; }
    .ph25:after { background:orange; }
    .ph3:after { background:#00c0ff; }
    .ph4:after { background:lightgreen; }
    .ph7:after { background:red; }

*/





.imgcover { height:40vw; }
.imgcover .img,
.imgcover .img img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover; }
.imgset { margin:0; width:100%; }
.imgset.flex { display:flex; justify-content:center; }
.imgset .img { border:0; transition:all .2s; padding:0; margin:0; }
.imgset .img.selected { border:0 solid rgba(0,0,0,.2); }

.detailcon { position:sticky; top:15em; }
.detailcon * { color:white; }
.detailcon ul { display:block; padding-left:1em; }
.detailcon ul li { color:var(--white2); margin:0; padding:.2em; }


.skillwhite { background:#f1efed; }

.skillset { display:block; width:100%; height:100vh; position:absolute; top:0; left:0; overflow:hidden; opacity:0; transition:none; }
.skillset .mask { display:block; width:100vw; height:125vw; position:absolute; xxtop:0; xxleft:0; xxxxborder:1px solid red; xxxzoom:.3; xxxtransform:scale(.9) translateX(50%); }
.skillset .mask.mask1 { xxxxbackground:green; top:0; }
.skillset .mask.mask2 { xxxborder:3px solid orange; top:125vw; }
.skillset .mask .item { display:block; cursor:pointer; width:10em; overflow:hidden; height:10em; opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .2s; cursor:pointer; }
.skillset .mask .item img { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); transition:all ease-out .35s; object-fit:cover; }
.skillset .mask .item p { display:block; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); z-index:122; font-weight:bold; background:red; color:white; font-size:2em; display:none; }
.skillset .mask .item:hover img { transform:translate(-50%,-50%) scale(1.15); }
/*
.skillset .mask .item:nth-child(1) { width:10.53vw;height:10.53vw; top:03vw; left:65vw; }
.skillset .mask .item:nth-child(2) { width:21.07vw;height:21.07vw; top:53vw; left:35vw; }
.skillset .mask .item:nth-child(3) { width:10.53vw;height:10.53vw; top:29vw; left:34vw; }
.skillset .mask .item:nth-child(4) { width:21.07vw;height:21.07vw; top:-4vw; left:96vw; }
.skillset .mask .item:nth-child(5) { width:42.14vw;height:42.14vw; top:37vw; left:77vw; }
.skillset .mask .item:nth-child(6) { width:21.07vw;height:21.07vw; top:15vw; left:12vw; }
.skillset .mask .item:nth-child(7) { width:21.07vw;height:21.07vw; top:114vw; left:2vw; }
.skillset .mask .item:nth-child(8) { width:21.07vw;height:21.07vw; top:50vw; left:-8vw; }
.skillset .mask .item:nth-child(9) { width:10.53vw;height:10.53vw; top:37vw; left:13vw; }
.skillset .mask .item:nth-child(10) { width:10.53vw;height:10.53vw; top:80vw; left:60vw; }
.skillset .mask .item:nth-child(11) { width:10.53vw;height:10.53vw; top:74vw; left:82vw; }
.skillset .mask .item:nth-child(12) { width:10.53vw;height:10.53vw; top:74vw; left:34vw; }
.skillset .mask .item:nth-child(13) { width:21.07vw;height:21.07vw; top:95vw; left:96vw; }
.skillset .mask .item:nth-child(14) { width:21.07vw;height:21.07vw; top:108vw; left:54vw; }
.skillset .mask .item:nth-child(15) { width:21.07vw;height:21.07vw; top:87vw; left:12vw; }
.skillset .mask .item:nth-child(16) { width:10.53vw;height:10.53vw; top:120vw; left:85vw; }
.skillset .mask .item:nth-child(17) { width:21.07vw;height:21.07vw; top:146vw; left:41vw; }
.skillset .mask .item:nth-child(18) { width:10.53vw;height:10.53vw; top:122vw; left:29vw; }
*/
/*
.skillset .mask .item:nth-child(1) { width:14vw;height:14vw; top:09vh; left:65vw; }
.skillset .mask .item:nth-child(2) { width:20vw;height:20vw; top:85vh; left:40vw; }
.skillset .mask .item:nth-child(3) { width:12vw;height:12vw; top:45vh; left:34vw; }
.skillset .mask .item:nth-child(4) { width:16vw;height:16vw; top:24vh; left:96vw; }
.skillset .mask .item:nth-child(5) { width:26vw;height:26vw; top:50vh; left:74vw; }
.skillset .mask .item:nth-child(6) { width:21vw;height:21vw; top:22vh; left:16vw; }
.skillset .mask .item:nth-child(7) { width:21vw;height:21vw; top:72vh; left:102vw; }
.skillset .mask .item:nth-child(8) { width:18vw;height:18vw; top:67vh; left:3.1vw; }
.skillset .mask .item:nth-child(9) { width:10vw;height:10vw; top:80vh; left:19vw; }
.skillset .mask .item:nth-child(10) { width:14vw;height:14vw; top:101vh; left:65vw; }
.skillset .mask .item:nth-child(11) { width:20vw;height:20vw; top:185vh; left:40vw; }
.skillset .mask .item:nth-child(12) { width:12vw;height:12vw; top:145vh; left:34vw; }
.skillset .mask .item:nth-child(13) { width:16vw;height:16vw; top:124vh; left:96vw; }
.skillset .mask .item:nth-child(14) { width:26vw;height:26vw; top:150vh; left:74vw; }
.skillset .mask .item:nth-child(15) { width:21vw;height:21vw; top:122vh; left:16vw; }
.skillset .mask .item:nth-child(16) { width:21vw;height:21vw; top:172vh; left:102vw; }
.skillset .mask .item:nth-child(17) { width:18vw;height:18vw; top:167vh; left:3.1vw; }
.skillset .mask .item:nth-child(18) { width:10vw;height:10vw; top:169vh; left:20vw; }
*/
.skillset .mask .item:nth-child(1) { width:14vw;height:14vw; top:15vw; left:57vw; }
.skillset .mask .item:nth-child(2) { width:10vw;height:10vw; top:85vw; left:40vw; }
.skillset .mask .item:nth-child(3) { width:12vw;height:12vw; top:35vw; left:40vw; }
.skillset .mask .item:nth-child(4) { width:16vw;height:16vw; top:24vw; left:96vw; }
.skillset .mask .item:nth-child(5) { width:26vw;height:26vw; top:50vw; left:74vw; }
.skillset .mask .item:nth-child(6) { width:21vw;height:21vw; top:11vw; left:30vw; }
.skillset .mask .item:nth-child(7) { width:21vw;height:21vw; top:72vw; left:95vw; }
.skillset .mask .item:nth-child(8) { width:13vw;height:13vw; top:67vw; left:25vw; xxxborder:8px solid darkblue; }
.skillset .mask .item:nth-child(9) { width:10vw;height:10vw; top:90vw; left:19vw; }
.skillset .mask .item:nth-child(10) { width:14vw;height:14vw; top:78vw; left:65vw; }
.skillset .mask .item:nth-child(11) { width:16vw;height:16vw; top:45vw; left:16vw; }
.skillset .mask .item:nth-child(12) { width:12vw;height:12vw; top:105vw; left:48vw; }
.skillset .mask .item:nth-child(13) { width:16vw;height:16vw; top:94vw; left:87vw; }
.skillset .mask .item:nth-child(14) { width:18vw;height:18vw; top:117vw; left:74vw; }
.skillset .mask .item:nth-child(15) { width:21vw;height:21vw; top:112vw; left:16vw; }
.skillset .mask .item:nth-child(16) { width:12vw;height:12vw; top:115vw; left:94vw; }
.skillset .mask .item:nth-child(17) { width:18vw;height:18vw; top:67vw; left:6.1vw; }
.skillset .mask .item:nth-child(18) { width:10vw;height:10vw; top:54vw; left:50vw; }


.popblock { display:block; width:100%; height:100vh; position:fixed; top:0; left:0; background:var(--black); padding:4em; z-index:125; }
.popblock .flex { display:flex; width:100%; justify-content:center; }
.popblock .flex .item { display:block; margin:.5em; height:59vw; }
.popblock .row { display:block; text-align:center; padding:2em; margin-bottom:2em; }
.popblock .row .btn { margin:1em auto; }
.popblock img { display:block; width:100%; height:calc(100vh - 15em);height:54vw;height:100%; position:relative; object-fit:cover; }

.popblock.detailpage { padding:0!important; top:9vw; position:relative; top:auto; }
.popblock.detailpage .row { padding:0!important; }



.listcat { display:flex; flex-wrap:wrap; gap:0; justify-content:left; width:100%; }
.listcat .item { display:block; width:calc(50% - 1px); height:80vw; position:relative; margin:0; }
.listcat .item:before { content:''; display:block; width:100%; height:20vw; position:absolute; bottom:0; left:0; background:linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); z-index:8; opacity:.7; }
.listcat .item img { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; object-fit:cover; }
.listcat .item .infobox { display:block; width:100%; position:absolute; top:85%; left:50%; z-index:10; transform:translate(-50%,-50%); padding:2em; }
.listcat .item .infobox strong { font-size:1.2em; }


.listcat4 .item { width:calc(25% - 1px); height:40vw; }



.lazy { xxxxborder:1px solid rgba(255,0,0,.18)!important; }
.coverpage { xxxpointer-events:none; }
.coverpage p {xxxxmargin-top:-30px; }
.coverpage.centerblock p {}


.carebg { display:block; position:absolute; top:0; left:0; width:100vw; height:100%; overflow:hidden; z-index:118; pointer-events:none; opacity:.4; }
.carebg img { display:block; position:absolute; top:0; left:0; width:100vw; }
.jbox { height:32vw; padding:0!important; }
.jbox .img { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:50vw; overflow:hidden; }
.jbox .img img { position:relative; width:100%; height:auto; margin-bottom:-6px; }
.imgset { padding:5em; justify-content:center; display:flex; text-align:center; width:auto; margin:0 auto!important; }
.imgset .item { margin:1.5em; height:35vw; width:25vw; }
.imgset .item img { display:block; height:100%; width:100%; object-fit:cover; }
    .detail .view { display:none; margin:0; padding:0; }
    .detail .imgset { display:block; display:flex; flex-direction:column; gap:1px; padding:0; }
    .detail .imgset .item { margin:0; height:45vw; width:100%; }
    .detail .imgset .item img { display:block; height:100%; width:100%; object-fit:cover; }
.catblock { display:flex; justify-content:center; padding-bottom:5vw; margin:0 10em; flex-wrap:wrap; }
.catblock a { display:block; transition:all .2s; margin:1em; text-align:center; color:var(--borderwhite); }
.catblock a span { color:inherit; display:block; font-size:.6em; }
.catblock a:hover { color:white; }
.catblock a img { display:block; border:1px solid var(--borderwhite); margin:1em 0; width:9em; object-fit:cover; height:5em; }

.mapiframe { border:0; width:100%; height:16.85vw; margin:0; -webkit-filter:grayscale(100%); filter:grayscale(100%); }
.mapblock { padding:2vw 9vw; }
.mapblock .col:first-child { width:36%; text-align:left; }
.mapblock .col:first-child * { text-align:left; }
.mapblock .col:last-child { width:64%; }

.ring3s { height:120vw; xxpadding-top:25vw; }



@media -ms-viewport, screen and (min-width:641px) and (max-width:1199px) {
    
    .precomblock .mask .item p { font-size:.9em; padding:1.5em 0; }

    .listcat4 .item { width:calc(33% - 1px); height:50vw; }
}
@media -ms-viewport, screen and (max-width:640px) {


    .scrollhint .line { height:4em; top:2em; }
    .scrollhint.bottom { bottom:3em; }

    .bigcover { height:160vw; padding:2em; padding-top:120vw; margin:0; }
    .bigcover img { height:100%; height:80%; position:absolute; top:0; left:0; }
    .bigcover h2,
    .bigcover p { position:relative; top:auto; width:calc(100% - 3em); left:50%; transform:translateX(-50%); }
    
    .blogblock { flex-wrap:wrap; flex-direction:column; gap:4em; }
    .blogblock .item { width:100%; padding:0; }
    .blogblock .item img { width:100%; height:52vw; object-fit:cover; }
    .blogblock .item p,
    .blogblock .item strong { margin-top:2em; margin-left:2em; }


    .filterset { padding:1.5em; display:flex; flex-wrap:wrap; }
    .filterset p.btn-sort { margin:0; padding:1em 0 2em 0; width:100%; }
    .filterset a { margin:0; width:33.33%; text-align:left; padding:.5em 0; }

    .lineset { height:30vw; margin-top:0; }
    .lineset .line1,
    .lineset .line3 { display:none; }
    .lineblock { display:none; }

    .mainblock h3,
    .allblock h3 { padding:3em 0; text-align:center; }


    .precomblock { flex-wrap:wrap; gap:.2em; padding:0; margin:4em 0!important; }
    .precomblock.in4 .item,
    .precomblock .item { width:calc(50% - .1em); border:0; padding:0; }
    .precomblock .item .img { height:50vw; }
    .precomblock .item p { margin:0; padding:.4em; font-size:1em; }
    .precomblock .item small { margin:0; opacity:.6; margin-bottom:.8em; }

    
    .precomblock,
    .precomblock .mask { height:60vw; }
    .precomblock.mshowall,
    .precomblock.mshowall .mask { height:auto; }
    .precomblock .mask .item,
    .precomblock .mask .item .img { height:60vw; }
    .precomblock .mask .item p { font-size:.9em; padding:1.5em 0; }
    .precomblock .btn-next { top:30vw; padding:2em .5em !important; }
    .precomblock.gradient:before,
    .precomblock.gradient:after { height:40vw; }
    .precomblock .framemap {}
    .precomblock.home,
    .precomblock.home .mask { height:62vw; }



    .detailcon { position:relative; top:0; padding:2em; margin:0; }



    .skillset .mask { height:180vh; }
    .skillset .mask.mask1 { xxxbackground:red; }
    .skillset .mask.mask2 { xxxbackground:yellow; }
    .skillset .mask .item { xxzoom:1.4; }
    .skillset .mask .item:nth-child(1) { width:17vw;height:17vw; top:09vh; left:65vw; }
    .skillset .mask .item:nth-child(2) { width:30vw;height:30vw; top:95vh; left:40vw; }
    .skillset .mask .item:nth-child(3) { width:16vw;height:16vw; top:45vh; left:34vw; }
    .skillset .mask .item:nth-child(4) { width:28vw;height:28vw; top:30vh; left:66vw; }
    .skillset .mask .item:nth-child(5) { width:30vw;height:30vw; top:50vh; left:64vw; }
    .skillset .mask .item:nth-child(6) { width:25vw;height:25vw; top:18vh; left:16vw; }
    .skillset .mask .item:nth-child(7) { width:25vw;height:25vw; top:72vh; left:82vw; }
    .skillset .mask .item:nth-child(8) { width:22vw;height:22vw; top:67vh; left:3.1vw; }
    .skillset .mask .item:nth-child(9) { width:12vw;height:12vw; top:80vh; left:19vw; }
    .skillset .mask .item:nth-child(10) { width:17vw;height:17vw; top:108vh; left:85vw; }
    .skillset .mask .item:nth-child(11) { width:24vw;height:24vw; top:170vh; left:40vw; }
    .skillset .mask .item:nth-child(12) { width:20vw;height:20vw; top:145vh; left:24vw; }
    .skillset .mask .item:nth-child(13) { width:24vw;height:24vw; top:124vh; left:66vw; }
    .skillset .mask .item:nth-child(14) { width:30vw;height:30vw; top:150vh; left:64vw; }
    .skillset .mask .item:nth-child(15) { width:35vw;height:35vw; top:119vh; left:16vw; }
    .skillset .mask .item:nth-child(16) { width:25vw;height:25vw; top:180vh; left:92vw; }
    .skillset .mask .item:nth-child(17) { width:22vw;height:22vw; top:163vh; left:3.1vw; }
    .skillset .mask .item:nth-child(18) { width:12vw;height:12vw; top:135vh; left:59vw; }

    .popblock { padding:1em; }
    .popblock .flex { display:block; }
    .popblock .flex .item { margin:.5em; width:calc(100% - 1em); }
    .popblock .row { display:block; text-align:center; padding:2em; margin-bottom:2em; }
    .popblock .row .btn { margin:1em auto; }
    .popblock img { height:90vw; }



    .jbox { height:80vw; padding:20vw 0 0 0!important; }
    .jbox .img { bottom:auto; top:0; width:80vw; }
    .imgset { padding:1.5em; display:block; }
    .imgset .img.selected { border:3px solid rgba(0,0,0,.2); }
    .imgset .item { margin:1.5em; height:100vw; width:calc(100% - 3em); }
    .imgset.flex { flex-direction:column; gap:.5em; }
    .imgset.flex .item { margin:0 1.5em; }
    .detail .view { display:block; width:100vw; height:100vw; }
    .detail .view>img { display:block; width:100vw; height:100vw; object-fit:cover; }
    .detail .imgset { padding:0; margin:0; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:.46em; padding:.5em; }
    .row.flex .col .imgxxxxx,
    .detail .imgset .img { margin:0; height:calc(25vw - .6em)!important; width:calc(25vw - .6em); transition:all .2s; }
    .detail .imgset .imgxxxxxxxxx:first-child { height:100vw; width:100vw; }
    .detail .imgset .img img { height:100%!important; width:100%; object-fit:cover; }
    .catblock { padding:2em; }
    .catblock a { width:calc(50% - 1em); margin:.5em; color:white; }
    .catblock a img { width:100%; height:8em; }

    .mapiframe { width:100%; height:100vw; pointer-events:none; }
    .mapblock { flex-direction:column-reverse; display:flex; padding:0; gap:2em; }
    .mapblock .col { width:100%!important; text-align:left; }
    .mapblock .col .img { width:100%!important; height:80vw!important; }
    .mapblock .col.info { padding:2em; }
    .mapblock .col.info .center { text-align:center; display:block; padding:1em; }
    .mapblock .col.info .center .btn { text-align:center; margin:.5em auto; }

    .ring3s { height:auto; padding-top:95vw; }


    .disclaimblock { flex-direction:column; margin:2em 0; max-width:100%; width:100%; padding:2em; }
    .disclaimblock .col:first-child { width:100%; }
    .disclaimblock .menu a { display:inline-block!important; border:1px solid var(--white2); padding:.5em 1.5em!important; }

    .listcat .item .infobox { font-size:.9em; line-height:1.2; }
    .listcat .item .infobox a { opacity:.8; margin:.5em 0 0 0; }
    .listcat4 .item { width:calc(50% - 1px); height:70vw; }

}













/*

  _    _                        _   
 | |__| |_ _ _  _____ _____ _ _| |_ 
 | '_ \  _| ' \/ -_) V / -_) ' \  _|
 |_.__/\__|_||_\___|\_/\___|_||_\__|
                                    

*/


.btn-text:before,
.header .nav .a:before
{ content:''; display:block; position:absolute; bottom:0; left:0; width:0; border-bottom:1px solid white; transition:all var(--bezier) .7s; opacity:0; }

.btn-text:after,
.header .nav .a:afterxxxx,
.scrollhint .line:after
{ content:''; display:block; position:absolute; bottom:-.1em; left:0; width:.2em; height:.2em; border-radius:1em; background:white; transform:translateX(-30%); transition:all var(--bezier) .6s; opacity:0; }


.header .nav .a span { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-bottom:1px solid var(--borderwhite); xxxbackground:var(--lineg); opacity:0; mix-blend-mode:screen; }
.header .nav .a span:afterxxx { content:''; display:block; width:calc(100% - 2px); height:calc(100% - 2px); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--black); }




    /* hover */
    @keyframes _menudot { 0%{left:50%} 50%{left:0%;} 100%{left:100%;} }
    @keyframes _flashs { 0%,100%{opacity:.6;} 50%{opacity:.4;} }



.btn-text:hover:before,
.header .nav .a.hover:before,
.header .nav .a:hover:before
{ width:100%; opacity:1; animation:_flashs 1.8s infinite; }
.btn-text:hover:after,
.header .nav .a.hover:after,
.header .nav .a:hover:after
{ animation:_menudot .3s var(--bezier) forwards; opacity:1; }


.header .nav .a.selected span { opacity:1; }

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

    .btn:hover { border:1px solid var(--white3); }
    .btn:hover:before,
    .btn:hover:after { display:none!important; }
    .btn-text:hover:before,
    .btn-text:hover:after,
    .header .nav .a.hover:after,
    .header .nav .a:hover:after
    { animation:none; display:none!important; }
}



.row, div,
.section, .col { xxborder:1px dashed rgba(250,250,250,.3); }



.padding0 {padding-bottom:0 !important;}
.lineBox { height: 25vw; width: 53vw; margin: 0 auto; padding: 0;}
.textBoxCenter { background:black; width:30vw; padding:2em; position:absolute; left:50%; top:calc(50% - 2em); transform:translate3d(-50%, -50%, 0); z-index:2; }
.lineLeft { border-left: 1px solid var(--white4); border-bottom: 1px solid var(--white4); height: 43%; width: 100%;}
.lineRight { border-right: 1px solid var(--white4); height: 57%; width: 100%;}
@media -ms-viewport, screen and (max-width:1200px) {
}
@media -ms-viewport, screen and (max-width:640px) {
    .textBoxCenter { padding:4em; top:50%; }
    .lineBox,.textBoxCenter { width:100%; }
    .lineLeft,.lineRight { border:0; }
}