@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);body{background-image:linear-gradient(to right, #121212, #2a2a2a)}body.bg-white{background-image:inherit;color:#212529}.clear{clear:both}.clearfix{display:inline-block}.clearfix:after{display:block;visibility:hidden;clear:both;height:0;font-size:0;content:"."}* html .clearfix{height:1%}*:focus,.form-control:focus,button:focus,.btn:focus{outline:none;box-shadow:none}.clearfix{display:block}a{color:inherit;text-decoration:none}a:hover{color:inherit;text-decoration:none}.border-bg{position:fixed;z-index:1;width:100%;height:100vh;padding:0;margin:0}.border-bg .border-content{border-right:1px solid #4a4a4a;opacity:0.5}.border-bg .border-content:last-child{border-right:0}@media screen and (max-width: 1279px){.border-bg .border-content:last-child{display:none !important}}.menu-open{overflow:hidden}.modal-open header#header .header-wrap{z-index:0}header#header{position:relative;width:100%;font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, "Noto Sans TC","微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif !important}header#header a{font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, "Noto Sans TC","微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif !important}header#header label{font-stretch:condensed}header#header .logo-wrap{position:absolute;top:40px;left:calc(50% - 720px);width:100%;max-width:1440px;height:43px;padding-left:0;margin:0 auto}header#header .logo-wrap .logo{position:relative;z-index:9999;display:block;width:197px;height:44px;background:url(../img/logo-header.svg) center center no-repeat;background-size:197px}header#header .logo-wrap .logo.black-logo{background-image:url(../img/logo-header-b.svg);background-size:197px;transition:.5s}@media screen and (max-width: 1440px){header#header .logo-wrap{left:0;padding-left:70px}}@media screen and (max-width: 1280px){header#header .logo-wrap .logo{width:161px;height:36px;background-size:161px}header#header .logo-wrap .logo.black-logo{width:161px;height:36px;background-size:161px}}@media screen and (max-width: 1279px){header#header .logo-wrap{padding-left:40px}}@media screen and (max-width: 767px){header#header .logo-wrap{top:25px;padding-left:24px}header#header .logo-wrap .logo{width:107px;height:24px;background-size:107px}header#header .logo-wrap .logo.black-logo{width:107px;height:24px;background-size:107px}}header#header .header-wrap{position:fixed;top:0;left:calc(50% - 720px);z-index:9998;width:100%;max-width:1440px;padding:40px 0;margin:0 auto}@media screen and (max-width: 1440px){header#header .header-wrap{left:0;padding:40px 70px 0 70px}}@media screen and (max-width: 1279px){header#header .header-wrap{padding:40px 50px 0 50px}}@media screen and (max-width: 767px){header#header .header-wrap{padding:25px 25px 0 25px}}header#header .header-wrap .nav{justify-content:flex-end;height:30px;padding-top:0;padding-bottom:0;padding-right:56px}header#header .header-wrap .nav .nav-toggler{display:block;position:absolute;top:5px;right:0;z-index:10001;padding:0;border:0;cursor:pointer}header#header .header-wrap .nav .nav-toggler .hamburger-box{width:32px;height:22px}header#header .header-wrap .nav .nav-toggler .hamburger-inner,header#header .header-wrap .nav .nav-toggler .hamburger-inner:after,header#header .header-wrap .nav .nav-toggler .hamburger-inner:before{width:32px;height:2px;background-color:#fff}header#header .header-wrap .nav .nav-toggler .hamburger-inner:before{top:-10px}header#header .header-wrap .nav .nav-toggler .hamburger-inner:after{bottom:-10px}header#header .header-wrap .nav .nav-toggler .hamburger.is-active .hamburger-inner,header#header .header-wrap .nav .nav-toggler .hamburger.is-active .hamburger-inner:after,header#header .header-wrap .nav .nav-toggler .hamburger.is-active .hamburger-inner:before{background-color:#fff}header#header .header-wrap .nav .nav-toggler.is-active .hamburger-inner:before{top:0}header#header .header-wrap .nav .nav-toggler.is-active .hamburger-inner:after{bottom:0}header#header .header-wrap .nav .nav-content{display:block;position:fixed;top:0;right:-100%;z-index:10000;width:100%;height:100vh;background-image:linear-gradient(to right, #121212, #2a2a2a);transition:.5s right}header#header .header-wrap .nav .nav-content .nav-menu{float:right;width:60%;height:100%;padding-top:240px}@media screen and (max-width: 1279px){header#header .header-wrap .nav .nav-content .nav-menu{width:100%;height:calc(100% - 296px);padding-top:160px}}@media screen and (max-width: 1024px){header#header .header-wrap .nav .nav-content .nav-menu{padding-top:100px}}@media screen and (max-width: 767px){header#header .header-wrap .nav .nav-content .nav-menu{padding-top:115px;height:calc(100% - 76px)}}header#header .header-wrap .nav .nav-content .nav-menu .menu-content{float:left;width:100%;max-width:760px;padding-left:70px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul{float:left;padding-right:180px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li{padding-bottom:40px;color:#fff;font-weight:bold;font-size:32px;line-height:normal}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li:last-child{padding-bottom:0}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button{position:relative;z-index:1;padding:0 3px 0 13px;border:0;background-color:transparent;color:#fff;font-weight:600;transition:.4s color ease-in;cursor:pointer}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button:after{content:'';display:block;position:absolute;bottom:9px;left:0;z-index:-1;width:0;height:24px;background-color:#1a75ff;transition:.4s width ease-in}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button:hover{color:#fff;transition:.25s color ease-out}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button:hover:after{width:100%;transition:.25s width ease-out}@media screen and (max-width: 1024px){header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button:hover{transition:none}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>button:hover:after{content:none}}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu{padding-right:0}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu .title{color:#fff;font-weight:bold;font-size:32px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu .title .project-count{display:inline-block;color:#ff455c;font-size:24px;transform:translateY(-9px)}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu li{padding-bottom:24px;color:rgba(255,255,255,0.8);font-weight:normal;font-size:20px;transition:.25s ease-in}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu li:hover{color:#fff;transition:.25s ease-out}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu .lang{display:none}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ol{list-style:none;padding:0;margin:0}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ol li button{color:rgba(255,255,255,0.8);font-weight:normal}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ol li button:hover:after{content:none}@media screen and (max-width: 1279px){header#header .header-wrap .nav .nav-content .nav-menu .menu-content{float:left;padding-left:38px}}@media screen and (max-width: 767px){header#header .header-wrap .nav .nav-content .nav-menu .menu-content{float:left;padding-left:12px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul{width:100%;padding-right:0}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li{font-size:20px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li:last-child{padding-bottom:40px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>a{padding:0 3px 0 13px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ul li>a:after{bottom:2px;height:20px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu .title{font-size:20px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu li{padding-bottom:40px}header#header .header-wrap .nav .nav-content .nav-menu .menu-content .works-menu .lang{display:block}header#header .header-wrap .nav .nav-content .nav-menu .menu-content ol{display:none}}header#header .header-wrap .nav .nav-content .contact-info{position:relative;float:left;width:40%;height:100%;padding-top:240px;padding-left:110px;background-color:#121212}header#header .header-wrap .nav .nav-content .contact-info .content{float:right;padding-right:183px}header#header .header-wrap .nav .nav-content .contact-info .content ul li{padding-bottom:24px;color:#fff;font-weight:normal;font-size:14px;line-height:1.43}header#header .header-wrap .nav .nav-content .contact-info .content ul li label{margin-bottom:.5rem;color:rgba(255,255,255,0.5)}header#header .header-wrap .nav .nav-content .contact-info .content ul li p{margin-bottom:0;opacity:1;color:#fff;font-size:14px;line-height:1.43}header#header .header-wrap .nav .nav-content .contact-info .content ul li p a{transition:.25s}header#header .header-wrap .nav .nav-content .contact-info .content ul li p a:hover{color:rgba(255,255,255,0.8)}header#header .header-wrap .nav .nav-content .contact-info .content .social{overflow:hidden;margin-bottom:50px}header#header .header-wrap .nav .nav-content .contact-info .content .social a{float:left;width:44px;height:44px;margin-right:8px;opacity:.5;transition:.25s ease-in}header#header .header-wrap .nav .nav-content .contact-info .content .social a.icon-fb{background:url(../img/facebook.svg) center center no-repeat}header#header .header-wrap .nav .nav-content .contact-info .content .social a.icon-md{margin-right:0;background:url(../img/medium.svg) center center no-repeat}header#header .header-wrap .nav .nav-content .contact-info .content .social a:hover{opacity:1;transition:.25s ease-out}@media screen and (max-width: 1279px){header#header .header-wrap .nav .nav-content .contact-info{width:100%;height:296px;padding:54px}header#header .header-wrap .nav .nav-content .contact-info .content{float:unset;padding-right:0}header#header .header-wrap .nav .nav-content .contact-info ul{float:left}header#header .header-wrap .nav .nav-content .contact-info .social{position:absolute;right:36px;bottom:138px;margin-bottom:0}}@media screen and (max-width: 767px){header#header .header-wrap .nav .nav-content .contact-info{height:76px;padding:16px 25px}header#header .header-wrap .nav .nav-content .contact-info ul{display:none}header#header .header-wrap .nav .nav-content .contact-info .social{float:right;position:unset}}header#header .header-wrap .nav .nav-content.active{right:0;transition:.5s right}header#header .header-wrap .nav .nav-content.active .nav-menu{transform:translateX(0)}header#header .header-wrap .nav .nav-content.active .contact-info{transform:translateX(0)}header#header .header-wrap .nav .btn-works{width:85px;height:36px;background-color:rgba(255,255,255,0.2);color:#fff;font-weight:bold;font-size:20px;line-height:36px;letter-spacing:0.4px;text-align:center;transition:.3s}header#header .header-wrap .nav .btn-works:hover{background-color:#ff455c}@media screen and (max-width: 767px){header#header .header-wrap .nav .btn-works{display:none}}header#header .header-wrap.black-menu .logo{background:url(../img/logo-header-b.svg) center center no-repeat;background-size:197px;transition:.5s}header#header .header-wrap.black-menu .nav .nav-toggler{transition:all .25s}header#header .header-wrap.black-menu .nav .nav-toggler .hamburger-inner,header#header .header-wrap.black-menu .nav .nav-toggler .hamburger-inner:after,header#header .header-wrap.black-menu .nav .nav-toggler .hamburger-inner:before{background-color:#212121;transition:all .25s}header#header .header-wrap.black-menu .nav .nav-toggler .hamburger.is-active .hamburger-inner,header#header .header-wrap.black-menu .nav .nav-toggler .hamburger.is-active .hamburger-inner:after,header#header .header-wrap.black-menu .nav .nav-toggler .hamburger.is-active .hamburger-inner:before{background-color:#212121;transition:all .25s}header#header .header-wrap.black-menu .nav .btn-works{color:#212121}header#header .header-wrap.black-menu .nav .btn-works:hover{color:#fff}header#header .header-wrap.black-menu.active .logo{background:url(../img/logo-header.svg) center center no-repeat;background-size:124px;transition:all .25s}header#header .header-wrap.black-menu.active .nav .nav-toggler{transition:all .25s}header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger-inner,header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger-inner:after,header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger-inner:before{background-color:#fff;transition:all .25s}header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger.is-active .hamburger-inner,header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger.is-active .hamburger-inner:after,header#header .header-wrap.black-menu.active .nav .nav-toggler .hamburger.is-active .hamburger-inner:before{background-color:#fff}#content-main .overflow-hidden{overflow:hidden}#content-main .title-slash{padding:0 0.5rem}#content-main .section.headline br.title{display:initial}#content-main .section.more .tag-box span.tag:hover{color:#1a75ff;filter:none;opacity:1}footer#works{position:relative;z-index:1;background:#141414;font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, "Noto Sans TC","微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif !important;font-size:16px}footer#works a{font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, "Noto Sans TC","微軟正黑體", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif !important}footer#works .footer-wrap{position:relative;overflow:hidden;max-width:1440px;padding:88px 70px 0;margin:0 auto}footer#works .footer-wrap .footer-map{display:block;position:absolute;top:0;right:0;overflow:hidden;width:660px;height:214px;margin:0 auto;background:#141414 url(../img/map.png) right top no-repeat;background-size:100%}footer#works .footer-wrap .footer-logo{position:relative;z-index:9;max-width:197px;margin-bottom:36px}footer#works .footer-wrap .footer-logo img{width:auto;margin:0}footer#works .footer-wrap .footer-menu{position:relative;z-index:9;float:left;overflow:hidden}footer#works .footer-wrap .footer-menu ul li{float:left;padding:14px 20px 0;font-size:16px;line-height:1.5}footer#works .footer-wrap .footer-menu ul li.works{position:relative;padding-right:36px}footer#works .footer-wrap .footer-menu ul li:first-child{padding-left:0}footer#works .footer-wrap .footer-menu ul li button{padding:0;border:0;background-color:transparent;color:#fff;font-weight:500;font-size:14px;cursor:pointer;transition:.25s}footer#works .footer-wrap .footer-menu ul li button:hover{color:rgba(255,255,255,0.8)}footer#works .footer-wrap .footer-menu ul li button .project-count{position:absolute;top:0;right:0;color:#ff455c;font-weight:600;font-size:20px;line-height:1.6;letter-spacing:0.4px;font-stretch:condensed}footer#works .footer-wrap .contact-info{position:relative;z-index:9;float:right;overflow:hidden;margin-top:-10px;margin-bottom:40px;font-stretch:condensed}footer#works .footer-wrap .contact-info ul li{float:left;padding-right:47px;color:#ffffff;font-weight:bold;font-size:14px;line-height:1.43}footer#works .footer-wrap .contact-info ul li label{margin-bottom:0.5rem;color:rgba(255,255,255,0.5);font-weight:bold}footer#works .footer-wrap .contact-info ul li p{margin:0;opacity:1;color:#ffffff;font-weight:bold;font-size:14px;font-stretch:condensed;line-height:1.43}footer#works .footer-wrap .contact-info ul li p a{transition:.25s}footer#works .footer-wrap .contact-info ul li p a:hover{color:rgba(255,255,255,0.8)}footer#works .copy-right{overflow:hidden;width:100%;padding:40px 0;margin:0 auto;border-top:1px solid rgba(217,217,217,0.3)}footer#works .copy-right .text-wrap{max-width:1440px;padding:0 70px;margin:0 auto}footer#works .copy-right .text-wrap p{float:left;margin-bottom:0;opacity:1;color:#838383;font-size:14px;line-height:1.5}footer#works .copy-right .text-wrap .social{float:right;margin-top:-20px}footer#works .copy-right .text-wrap .social a{float:left;width:44px;height:44px;margin-right:8px;opacity:.5;transition:.25s ease-in}footer#works .copy-right .text-wrap .social a.icon-fb{background:url(../img/facebook.svg) center center no-repeat}footer#works .copy-right .text-wrap .social a.icon-md{margin-right:0;background:url(../img/medium.svg) center center no-repeat}footer#works .copy-right .text-wrap .social a:hover{opacity:1;transition:.25s ease-out}@media screen and (max-width: 1279px){footer#works .footer-wrap .footer-menu{display:none}footer#works .footer-wrap .contact-info{float:left}}@media screen and (max-width: 767px){footer#works .footer-wrap{padding:160px 24px 0;background-position-x:center}footer#works .footer-wrap .footer-map{width:375px;height:214px;background-position:-100px top;background-size:660px}footer#works .footer-wrap .footer-logo{margin-bottom:40px}footer#works .footer-wrap .contact-info{margin-top:0;margin-bottom:16px}footer#works .footer-wrap .contact-info ul li{width:100%;margin-bottom:24px}footer#works .copy-right{padding:20px 0}footer#works .copy-right .text-wrap{padding:0 24px}footer#works .copy-right .text-wrap .social{display:none}}.section.headline{padding:215px 0 40px !important;margin-top:0 !important}.section.headline .col-sm-10{padding:0 !important}.section.headline .container{max-width:1440px !important}@media screen and (max-width: 1440px){.section.headline .container{max-width:inherit !important;padding:0 70px !important}}@media screen and (max-width: 1279px){.section.headline .container{padding:0 50px !important}}@media screen and (max-width: 767px){.section.headline .container{padding:0 25px !important}}.section.headline .container .row{margin:0}.shadow{box-shadow:0 10px 20px 0 rgba(0,0,0,0.2) !important}#works-list{padding-bottom:100px}#works-list .column{position:relative;padding:0 35px}#works-list .column.move-down{top:100px}#works-list .column.article-hover .more-href{display:block;position:relative;overflow:hidden}#works-list .column.article-hover .more-href:before{content:'';display:block;position:absolute;top:0;left:0;z-index:1;width:100%;height:calc(100% - 15px);background-image:linear-gradient(to top, #1a75ff, rgba(26,117,255,0.5));opacity:0;transition:.5s;pointer-events:none}#works-list .column.article-hover .more-href article{position:absolute;bottom:-100%;left:0;z-index:2;width:100%;padding:0 25px 25px;text-align:left;transition:.5s;pointer-events:none}#works-list .column.article-hover .more-href article h5{margin-bottom:16px;color:#fff;font-weight:bold;font-size:32px;line-height:1;letter-spacing:0.4px}#works-list .column.article-hover .more-href article p{color:#fff;font-weight:400;font-size:16px;line-height:1.5}#works-list .column.article-hover .more-href article p b{font-weight:700}#works-list .column.article-hover .more-href:hover:before{opacity:1}#works-list .column.article-hover .more-href:hover img{transform:scale(1)}#works-list .column.article-hover .more-href:hover article{bottom:15px}#works-list .column.article-hover h4{opacity:1;color:#4a4a4a}@media screen and (max-width: 480px){#works-list .column{padding:0}#works-list .column.move-down{top:24px;padding:0 0 0 7.5px}#works-list .column .more-href:hover:before{content:none}#works-list .column .more-href article{display:none}}.modal-open .modal{overflow:hidden}.modal{padding-right:0 !important}.modal .modal-dialog{display:flex;align-items:flex-end;width:100%;height:100vh;margin:0 auto}.modal .modal-dialog .modal-content{border:0;border-radius:0;background-color:transparent;background-image:linear-gradient(to top, #1a75ff, rgba(26,117,255,0.5))}.modal .modal-dialog .modal-content .modal-header{position:relative;padding:72px 28px 16px;border:0}.modal .modal-dialog .modal-content .modal-header h5{color:#fff;font-weight:bold;font-size:32px;line-height:1;letter-spacing:0.4px}.modal .modal-dialog .modal-content .modal-header .close{position:absolute;top:10px;right:10px;z-index:5;width:40px;height:40px;padding:0;margin:0;background:url(../img/icon-close.svg) center center no-repeat;opacity:1}.modal .modal-dialog .modal-content .modal-body{padding:0 28px 76px}.modal .modal-dialog .modal-content .modal-body p{margin:0;color:#fff;font-size:16px;line-height:1.5}.modal.fade .modal-dialog{transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translate(0, 25%);transform:translate(0, 25%)}.modal.show .modal-dialog{-webkit-transform:translate(0, 0);transform:translate(0, 0)}