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

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


/*@font-face {
    font-family: 'philosopher';
    src:url('../font/andalemo.eot');
    src:url('../font/andalemo.eot?') format('☺'),
        url('../font/andalemo.woff') format('woff'),
        url('../font/andalemo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/


:root {
    --gray:#eee; 
    --gray2:#ddd; 
    --black:#111;
    --black2:#212225;
    --error:#ff5722;
}
@font-face { font-family:'mono'; font-style:normal; font-weight:bold; src:url('../font/andalemo.ttf') format('truetype'); }

html {}
html,body { display:block; box-sizing:border-box; padding:0; margin:0; background:var(--gray); }
* { box-sizing:border-box; padding:0; margin:0; font-family:'mono','Noto Sans TC','微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; line-height:160%; transition:none; position:relative; color:var(--black); font-size:.98rem; }
a, a:visited { text-decoration:none; color:inherit; cursor:pointer; }
.noscroll { overflow:hidden; }


p a, li a { display:inline-block; text-decoration:underline; padding:0 .5em; color:#d0a876; }
p a.black, li a.black { color:var(--black); }
hr { border:0; border-bottom:1px solid #ccc; margin:1em 0; }
input { border:0; border-radius:0; padding:.5em; }
input:focus { outline:none; }
input:-internal-autofill-selected { background-color:white!important; color:#899dd6!important; }
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { background-color:white!important; -webkit-box-shadow: 0 0 0 30px white inset !important; }
input:-webkit-autofill { -webkit-text-fill-color:#899dd6!important; }
select:focus { outline:0; }
textarea:-webkit-autofill:focus,
textarea:focus { outline:0; }

ul li { list-style:disc; }
ul, ol { margin:1.2em 0; padding-left:1.5em; padding-left:0; }
li { display:list-item; line-height:1.4; margin-bottom:.5em; font-size:1em; }
ol li { list-style:decimal; list-style:none; list-style-position:outside; display:list-item;display:block; line-height:150%; margin-bottom:.8em; }
p { font-size:.9em; line-height:2em; }

h2 { font-size:3em; text-transform:uppercase; line-height:1.4; }
h2 span { font-size:inherit; text-transform:inherit; line-height:inherit; font-weight:inherit; color:inherit; display:block; }

h2, .btn-text, .mono { font-family:'mono'; }



@keyframes _flash { 0%,49% {opacity:1;}50%,99%{opacity:0} }
.header { display:flex; width:100%; xxxheight:80px; overflow:hidden; transition:all .3s; background:var(--gray); position:fixed; top:0; left:0; z-index:999; transition:none; border-bottom:1px solid var(--black); }
    .header .logo { display:block; height:100%; cursor:pointer; position:relative; }
    .header .logo:before { content:''; display:block; position:absolute; top:.8em; left:1.5em; width:0; height:3rem; background:var(--black); transition:all .2s; }
    .header .logo:after { content:url(../images/logo.svg); display:block; height:3.8rem; width:4rem; margin:.4em 1.5em; position:relative; z-index:122; }
    .header .logo:hover:before { width:calc(100% - 3em); }
    .header .logo:hover:after { content:url(../images/logo-white.svg); }
    .header .menuicon { display:block; width:3em; height:2.1em; text-align:center; transition:all .3s; position:absolute; top:50%; right:1em; transform:translateY(-50%); cursor:pointer; z-index:600; display:none; }
        .header .menuicon span { display:block; height:3px; width:2em; background:var(--black); margin:0; transform-origin:center; transform:translate(-50%,-50%); transition:all .2s; transform-origin:center; position:absolute; top:50%; left:50%; }
        .header .menuicon span:nth-child(1) { top:25%; }
        .header .menuicon span:nth-child(2) { top:50%; }
        .header .menuicon span:nth-child(3) { top:75%; }
        .header .menuicon.open span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg); top:50%; }
        .header .menuicon.open span:nth-child(2) { transform:translate(-50%,-50%) rotate(45deg); opacity:0; }
        .header .menuicon.open span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg); top:50%; }
    .header .menu { display:flex; width:100%; align-items:center; justify-content:right; }
        .header .menu a { display:block; font-size:1.2em; padding:1em 2em; margin:0; font-family:'mono'; line-height:1; position:relative; text-transform:uppercase; }
        .header .menu a:before { content:''; display:block; position:absolute; top:1em; left:2em; background:var(--black); width:0; height:1em; transition:all .2s; z-index:-1; }
        .header .menu a:hover { color:white; }
        .header .menu a:hover:before { width:calc(100% - 4em); }
        .header .menu a:hover:after { content:'_'; display:block; position:absolute; top:1em; left:calc(100% - 1.5em); z-index:10; animation:.3s _flash infinite; color:var(--black); }
        .header .menu a.selected { color:white; }
        .header .menu a.selected:before { width:calc(100% - 4em); }
        .header .socialset { display:flex; padding:.5em; }
        .header .socialset a { display:block; font-size:1.2em; padding:.5em; margin:0; font-family:'mono'; }
    

.footer {}



@media device-width, screen and (max-width:1640px) and (min-width:1221px) {
}
@media device-width, screen and (max-width:1220px) and (min-width:641px) {
}
@media device-width, screen and (max-width:900px) and (min-width:641px) {
}
@media device-width, screen and (max-width:640px) {
    .header { overflow:visible; }
    .header .menuicon { display:block; }
    .header .menu { display:block; width:100%; position:absolute; top:20vw; left:0; opacity:0; visibility:hidden; padding:2em; xxxxbackground:var(--gray); height:120vw; xxxxxtransition:all .3s; }
    .header .menu.open { opacity:1; visibility:visible; }
    .header .menu a { padding:1em .3em; }
    .header .menu a.selected:before { left:0; }
    .header .menu a:before { left:0; }
    .header .socialset { padding:.5em 0; }

    h2 { font-size:2.4em; }


}







/*

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


/*
https://dribbble.com/tags/button_animation
*/


.container { padding-top:4.7em; overflow:hidden; position:relative; }
.container:afterxxx { content:''; display:block; width:100%; height:3em; background:black; position:relative; bottom:0; left:0; }
.row { padding:3vw; position:relative; }
.row.narrow { padding:.5vw 1.5vw; }
.row.nopadding { padding:0; }
.row.w21 { height:51.5vw; }
.row.h100 { height:100vh; }
.flex { display:flex; padding:0; position:relative; }
.flex.wrap { flex-wrap:wrap; }
.flex .col { display:block; padding:3vw; position:relative; border-right:1px solid var(--black); box-sizing:border-box; }
.flex .col.nopadding { padding:0; }
.flex .col.scrolly { overflow-y:scroll; }
.flex .col.col21 { width:50.00%; }
.flex .col.col31 { width:33.33%; }
.flex .col.col32 { width:66.66%; }
.flex .col.col41 { width:25.00%; }
.flex .col:last-child { border:0; }
.flex .col.flex { padding:0; }
.flex .col.noborder { border:0; }
.flex .col .group { padding-bottom:3em; padding-right:8vw; }


.flex .col.mask { position:relative; }
.flex .col.mask .masker { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--black2); xxxbackground:var(--black); }




.borderbottom { border-bottom:1px solid var(--black); }


.pc {}
.mobile { display:none; }



    .btn { text-align:center; display:block; padding:1em; text-transform:uppercase; border:1px solid var(--black); }
    .btn:before { content:''; display:block; position:absolute; top:0; left:0; z-index:10; background:var(--black); width:0; height:100%; transition:all .2s; }
    .btn:hover span { color:white; z-index:99; }
    .btn:hover:before { width:100%; }
    .btn:hover:after { content:'_'; display:block; position:absolute; top:50%; left:calc(100% - 3em); z-index:20; animation:.3s _flash infinite; color:var(--white); }


        .btn-text { display:inline-block; font-size:1em; padding:0; margin:.5rem; font-family:'mono'; text-transform:uppercase; cursor:pointer; line-height:1; position:relative; }
        .btn-text span { position:relative; z-index:14; line-height:1; }
        .btn-text:before { content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:0; height:1em; background:var(--black); transition:all .2s; }
        .btn-text:hover { color:white; }
        .btn-text:hover span { color:white; }
        .btn-text:hover:before { width:100%; }
        .btn-text:hover:after { content:'_'; display:block; position:absolute; top:0; left:100%; z-index:10; animation:.3s _flash infinite; color:var(--black); }
        .btn-text.selected { color:white; }


        .btn-backtotop { text-align:center; padding:2em; border-top:1px solid var(--black); margin:0;  display:none; }
        .btn-backtotop:before { height:100%; }
        .btn-full { padding:2em; }


.inputrow { display:flex; width:100%; align-items:top; border-bottom:1px solid var(--black); }
.inputrow label { word-break:keep-all; padding:1.8em 1.5vw; text-transform:uppercase; }
.inputrow input { display:block; width:100%; font-size:1.5em; background:transparent; padding:.7em; }
.inputrow select { display:block; width:100%; font-size:1.5em; border:0; background:transparent; padding:.7em; }
.inputrow textarea { display:block; width:100%; height:20vw; border:0; font-size:1.5em; background:transparent; padding:1em; }
.inputrow .btn { display:block; width:100%; padding:1.8em; border:0; }
.inputrow.error label { color:var(--error); }
.inputrow.error .error { color:var(--error); position:absolute; top:50%; right:1em; transform:translateY(-50%); }
.inputrow.selected label { xxxxcolor:white; }


.input2 { display:flex; width:100%; align-items:center; }
.input2 .inputrow:first-child { border-right:1px solid var(--black); }

.inputrow.noborder { border-bottom:0; }


.homeframe { overflow:hidden; }


.icon { display:block; }
.icon-fb { content:url(../images/icon-facebook.svg); width:1.5em; height:1.5em; }
.icon-ig { content:url(../images/icon-instagram.svg); width:1.5em; height:1.5em; }
.icon-be { content:url(../images/icon-behance.svg); width:1.5em; height:1.5em; }

.shareset.inblog .icon { width:2em; height:2em; }


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

    .row { padding:1em; }
    .row.borderbottom { border-bottom:1px solid var(--black); }
    .row.narrow { padding:.5vw 1.5vw; }
    .row.w21,
    .row.h100 { height:auto; }
    .flex { display:block; padding:0; }
    .flex .col { padding:1em; padding-bottom:3em; border-right:0; border-bottom:1px solid var(--black); }
    .flex .col.col21,
    .flex .col.col31,
    .flex .col.col32,
    .flex .col.col41 { width:100%; }

    .homeframe { height:calc(100vh - 5em); }

    .btn-backtotop { display:block; }

    .pc { display:none!important; }
    .mobile { display:block; max-width:100%; }
}



/*

  _             _      
 | |__  ___  __| |_  _ 
 | '_ \/ _ \/ _` | || |
 |_.__/\___/\__,_|\_, |
                  |__/ 
                         
*/



.overlay { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background:var(--gray); opacity:.97; z-index:1222; overflow:hidden; }
    /*.loader { width:3em; height:3em; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:rotate 1s linear infinite; }
    .loader::before { content:''; box-sizing:border-box; position:absolute; inset:0; border-radius:50%; border:5px solid var(--black); animation:prixClipFix 2s linear infinite; }
    @keyframes rotate { 100%{transform:translate(-50%,-50%) rotate(360deg);} }
    @keyframes prixClipFix {
            0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
            25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
            50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
            75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
            100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
        }*/

    .loader { width:50vw; height:.3em; position:fixed; bottom:50vh; left:25vw; background:var(--black); xxxxanimation:_flashload 1s ease-out forwards; }
    .loader:after { content:'LOADING >>>'; font-size:.8em; letter-spacing:.2em; xxxtransform:translateX(-50%); position:absolute; top:-2.6em; left:0; }
        @keyframes _flashload { 0%{width:0;} 100%{width:50vw;} }



    .msg { display:block; position:fixed; font-size:1.8em; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1111; background:var(--black); color:white; padding:0 .2em; }
.loading { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background:white; opacity:.1; z-index:1222; display:none!important; }
.loadingcover { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background:var(--gray);background:var(--black); z-index:1222; overflow:hidden; }
.loadingcover .con { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40em; xxxborder:1px solid red; opacity:0; }
.loadingcover p { margin:2rem; xxxxanimation:.2s _flash infinite; color:white; font-size:.8em; }
.loadingcover video { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; object-fit:cover; }
.btnscroll { position:fixed; bottom:0; right:0; }

@media -ms-viewport, screen and (min-width:1800px) {
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (max-width:640px) {
    .loadingcover .con { width:90%; }
    .loadingcover p { font-size:.8em; }
    .loadingcover video { width:100%; height:100%; }
}


.coverimg img { display:block; width:100%; height:calc(100% - 6vw); object-fit:cover; position:absolute; top:3vw; left:0; }
.gap { display:block; height:3em; }
.alignright { text-align:right; }
.float-leftbottom { position:absolute; margin:3vw; bottom:0; left:0; }
.bannersec { padding:0!important; overflow:hidden; }
.bannersec video { display:block; width:100%; height:100%; object-fit:cover; }
.bannersec img { display:block; width:100%; height:auto; }
.coverimg { height:auto; }
.flashdeco { display:block; position:absolute; top:1.8em; left:6.5em; animation:.3s _flash infinite; }

.navrow { width:100%; padding:1.2em 2em; }


.projectblock { display:flex; flex-wrap:wrap; padding:0; width:100%; margin-bottom:-1px; }
.projectblock .item { display:block; width:25%; margin:0; clear:both; border-right:1px solid var(--black); border-bottom:1px solid var(--black); overflow:hidden; position:relative; cursor:pointer; transition:all ease-out .3s; margin-right:-.1px; }
.projectblock .item:before,
.projectblock .item:after { content:''; display:block; width:0; height:.2em; background:var(--black); position:absolute; top:0; left:0; transition:all ease-in-out .2s; }
.projectblock .item:after { xxxtop:auto; xxxxbottom:0; }
.projectblock .item:nth-child(4),
.projectblock .item:nth-child(8) { border-right:0; }
.projectblock .item .img { display:block; width:100%; height:calc(20vw - 4em); padding:0; margin:2em 0; overflow:hidden; transition:all ease-out .3s; }
.projectblock .item .img img { display:block; transition:all ease-out .3s; position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; }
.projectblock .item .img img.main { z-index:1; }
.projectblock .item .img .hover { z-index:2; top:50%; left:50%; width:0; height:0; transform:translate(-50%,-50%); transition:all ease-out 0; overflow:hidden; }

    .projectblock .item .img .main { top:0; width:100%; transition:all ease-out .3s; }
    .projectblock .item .img .hover { xxleft:-50%;top:150%; width:100%; transition:all ease-out .3s; }
.projectblock .item .img .hover img { z-index:2; position:absolute; top:50%; left:50%; width:25vw; height:25vw; object-fit:cover; transform:translate(-50%,-50%); display:block; }
.projectblock .item .row { display:block; padding:1em 1.5em; border-top:1px solid var(--black); }
.projectblock .item .row p { position:relative; display:inline-block; padding:0; margin:0; }
.projectblock .item .row p span { position:relative; display:inline-block; z-index:20; padding:0; margin:0; }
.projectblock .item .row p:after { content:''; display:block; width:0; height:100%; background:var(--black); position:absolute; top:0; left:0; transition:all ease-in-out .2s; z-index:1; }
.projectblock .item .row p:last-child:after { transition:all ease-out 0; }
.projectblock .item:hover { xxxbackground:var(--gray2); }
.projectblock .item:hover:before,
.projectblock .item:hover:after { xxxxwidth:100%; xxxxheight:.5em; }
    /*.projectblock .item:hover .img .main { xxxxleft:-10%; top:-100%; xxxtransform:scale(1.2); }
    .projectblock .item:hover .img .hover { xxleft:0;xxleft:50%; top:50%; width:100%; height:100%; }*/
    .projectblock .item:hover .img { margin:0; height:20vw; }
    .projectblock .item:hover .img .main { transform:scale(1.1); }
.projectblock .item:hover .row p { color:white; }
.projectblock .item:hover .row p span { color:white; }
.projectblock .item:hover .row p:after { width:100%; }
.projectblock .item:hover .row p:last-child span:before { content:'_'; display:block; position:absolute; bottom:0; left:calc(100% + .5em); z-index:30; animation:.3s _flash infinite; color:var(--black); }

.projectblock .item:hover {}

.projectoverlay { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; padding-top:4.7em; z-index:158; background:var(--gray); display:none; }
.projectoverlay .btn-close { display:block; transition:all ease-in-out .2s; position:absolute; top:6em; right:1em; z-index:158; cursor:pointer; width:3em; height:3em; padding:.5em; }
.projectoverlay .btn-close:hover { padding:.8em; opacity:.5; transform:rotate(135deg); }
.projectshowcase { flex-direction:row-reverse; padding:0; overflow-y:scroll; position:relative; height:calc(100vh - 10em)!important; border-bottom:1px solid var(--black); }
.projectshowcase .col:first-child { border:0; padding-bottom:3em; }
.projectshowcase img { display:block; width:100%; /*width:calc(100% - 2em); margin:1em;*/ }
.projectshowcase img:last-child { margin-bottom:3em; }
.projectshowcase .infoblock { display:block; width:33vw; padding:0; overflow:hidden; position:sticky; top:0; right:0; border-left:1px solid var(--black)!important; }
.projectshowcase .infoblock .con { display:block; padding:2vw; padding-top:4.7em; white-space:normal; }
.projectshowcase .infoblock .content { text-align:justify; }
.projectshowcase .infoblock pre { white-space:normal; }
.projectshowcase .infoblock p { display:block; padding:1em 0; }
.projectshowcase .infoblock .hashtag { margin:1em 0; }
.projectshowcase .infoblock .hashtag span { display:inline-block; font-size:.8em; margin:.3em .3em .3em 0; padding:.2em .4em; background:var(--black); color:white; line-height:1; }
.projectshowcase .infoblock .tagbox { xxxdisplay:block; margin:3em 0 1em 0; padding:1em 0; border-top:1px dashed var(--black); font-size:.8em; white-space:normal; }
.projectshowcase .infoblock { overflow:hidden; }
.projectshowcase .imageblock { border-right:0!important; }
.projectshowcase .masker { display:block; background:var(--black); bottom:0; left:0; width:100%; height:100%; position:absolute; z-index:999; }
.projectshowcase .infoblock .masker { display:block; background:var(--black2); left:auto; right:0; }
.projectshowcase .masker.masker2 { display:block; background:var(--black2); left:0; width:66.66%; }

.projectnavrow { display:block; width:100%; padding:1.8em; text-align:right; }
.projectnavrow.center { text-align:center; }



.imageblock { padding:0!important; }


.dottedbordertop { margin:6em; border-top:1px solid var(--black); }

.aboutblock { display:block; margin:0 10vw; padding:3vw;  }


.blogblock { position:fixed!important; right:0; }
.blogblock .item { display:inline-block; width:25%; margin:1em; text-align:center; vertical-align:top; transition:all ease-in-out .2s; }
.blogblock .item .icon-blog { display:block; width:3em; height:3em; margin:.5em auto; text-align:center; background-image:url(../images/disk.svg); background-size:cover; background-repeat:no-repeat; background-position:center; transition:all .2s; }
.blogblock .item:hover { xxxxtransform:rotate(-5deg); }
.blogblock .item:hover .icon-blog { xxxmargin-bottom:.2em; }
.blogblock .item.selected .icon-blog { background-image:url(../images/disk_hover.svg); }

.blogcon {}
.blogcon .shareset { display:block; position:absolute; top:0; right:0; padding:3em; }
.blogcon img { display:block; width:100%; }
.blogcon a { display:inline-block; }
.blogcon h2 { display:block; margin:4rem 0; }
.blogcon p,
.blogcon strong { display:block; margin:1rem 0; }


.dottedborderbottom { padding:.5em 0; margin-bottom:.5em; border-bottom:dashed 1px var(--black); }




.processblock { display:flex; flex-wrap:wrap; padding:0; width:100%; margin-bottom:-1px; padding:.25em; }
.processblock .item { display:block; width:calc(33.33% - .5em); margin:.25em; padding:2.9em; border:1px solid var(--black); overflow:hidden; position:relative; }
.processblock .item h4 { display:block; text-transform:uppercase; font-size:2.5em; font-weight:bold; }
.processblock .item img { display:block; width:100%; margin:1em auto; }
.processblock .item p { font-size:1em; }






.introblock { align-items:center; width:100%; }
.introblock .row.center { text-align:center; padding:1em 0; width:100%; }
.introblock .row.center .btnxxxxx { padding:2em; padding:1em 5em; width:70%; margin:1em auto; }

.circleblock { display:block; border:0!important; position:relative; height:45vw; margin:6vw 0; margin:0; padding:0; xxxxborder:1px solid gray!important; width:64vw; }
.circleblock .cir { display:block; width:25vw; height:25vw; border-radius:50%; position:absolute; top:50%; left:30%; transform:translate(-50%,-50%); }
.circleblock .cir:before { content:''; display:block; width:25vw; height:25vw; border:1px solid var(--black); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.circleblock .cir img,
.circleblock .cir span { display:block; border:1px solid var(--black); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:.1em .3em; font-weight:bold; text-transform:uppercase; font-size:.8em; background:var(--gray); }
.circleblock .cir img { padding:0; border:0; }



@keyframes _breath { 0%,100% { width:25vw; height:25vw; opacity:1; } 50%{ width:25.5vw; height:25.5vw; opacity:.8; } }
.circleblock .cir1 p { position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); font-weight:bold; text-transform:uppercase; font-size:.8em; background:var(--gray); display:block; }
.circleblock .cir1.onmove:before { animation:_breath 2s ease-in-out infinite; }
/*.circleblock .cir1.onmove p:after { content:''; display:block; width:0; height:5em; border-right:.5px solid var(--black); position:absolute; top:100%; left:50%; transform:translateX(-50%); }
.circleblock .cir1.onmove p:before { content:''; display:block; width:0; height:1em; border-right:.5px solid var(--black); position:absolute; top:calc(100% + 5em); left:50%; transform:translateX(-50%) rotate(45deg); }
*/
.circleblock .cir1.onmove:after { content:''; background-image:url(../images/arrow1.gif); background-size:cover; display:block; width:5em; height:5em; position:absolute; top:70%; left:50%; transform:translateX(-50%); }


.circleblock .con { display:block; position:absolute; padding:0; margin:0; width:30vw; left:60vw; top:50%; transform:translateY(-50%); }
.circon { margin:2em 0; text-align:justify; }
.circon strong { font-weight:bold; font-size:1.2em; margin-bottom:1em; display:block; }






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

    .float-leftbottom { position:relative; margin:1em 0; bottom:auto; left:auto; }
    .coverimg { height:80vw; }


    .homeframe { padding-top:20vw!important; }
    .bannersec { position:absolute!important; bottom:0; left:0; opacity:.4; height:100%; }

    .projectblock .item { width:50%; border-right:1px solid var(--black); border-bottom:1px solid var(--black); }
    .projectblock .item:nth-child(even) { border-right:0; }
    .projectblock .item .img,
    .projectblock .item:hover .img { height:calc(44vw - 2em); margin:.5em 0; }

    .projectshowcase { height:auto; }
    .projectoverlay .btn-close { top:5em; right:0; }
    .projectshowcase .col { height:auto; padding:0; }
    .projectshowcase .col:first-child { padding-bottom:0; }
    .projectshowcase img { width:calc(100% - 1em); margin:0 .5em; xxxwidth:100%; }
    .projectshowcase .infoblock { width:100%; padding:1em; position:relative; top:auto; right:auto; border:0!important; border-top:1px solid var(--black)!important; }
    .projectshowcase .infoblock hr { display:none; }
    .projectshowcase .infoblock h2 { padding:0; }



    .processblock .item { width:calc(100% - 1.4em); margin:.7em; padding:1em; }



    .circleblock { height:auto; padding-top:100vw; width:100%; }
    .circleblock .cir,
    .circleblock .cir:before { width:50vw; height:50vw; top:50%; left:50%; }
    .circleblock .cir1 { left:50%; top:11em; }
    .circleblock .cir1 img { top:40%; }
    .circleblock .cir1 p { display:none!important; }
    .circleblock .cir2 { left:30%; top:18em; }
    .circleblock .cir2 span { top:61%; }
    .circleblock .cir3 { left:70%; top:18em; }
    .circleblock .cir3 span { top:61%; }



    .circleblock .con { position:relative; margin:1em 0; top:auto; transform:none; width:100%; left:auto; }


    .blogblock { position:relative!important; right:auto; text-align:center; }
    .blogblock .item { width:22%; }



}