html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.container,.fade{margin-left:auto;margin-right:auto}.navi__ls,.work__ls,.fade__ls,.web__ls,.spec__ls{list-style-type:none}.navi__ls,.site__name,.dl__tit,.dl__desc,.dl__ls,.base-banr .banr__tit,.base-banr .banr__desc,.work__ls,.fade__ls,.web__ls,.spec__ls{margin:0;padding:0}.base__pic,.base__text,.work__item,.web__item,.spec__item,.footer__head{float:left}.footer__foot{float:right}.row::after,.web__ls::after{content:'';display:block;clear:both}.base-bg{position:relative}.base-bg::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%}.base-bg .container{position:relative;z-index:1}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:Arial,Helvetica,"LiHei Pro","Microsoft JhengHei",MingLiU,sans-serif}a{text-decoration:none}p{line-height:1.6}.container{width:1200px}@media screen and (max-width: 1024px){.container{width:auto}}.row{margin-left:-15px;margin-right:-15px}@media screen and (max-width: 1024px){.row{margin-left:0;margin-right:0}}.lyt-gutter{padding:15px}.navi{position:fixed;z-index:99;left:0;top:0;width:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.navi__cntr{letter-spacing:-15px}.navi__head,.navi__menu{display:inline-block;letter-spacing:normal;vertical-align:middle;padding:15px}.navi__head{width:30%}@media screen and (max-width: 768px){.navi__head{width:25%}}@media screen and (max-width: 414px){.navi__head{width:auto;padding:10px}}.navi__menu{width:70%}@media screen and (max-width: 768px){.navi__menu{width:75%}}@media screen and (max-width: 414px){.navi__menu{display:none;position:absolute;top:100%;left:0;width:100%;background-color:rgba(0,0,0,0.5);padding:0}}.navi__ls{text-align:right}@media screen and (max-width: 414px){.navi__ls{text-align:left}}.navi__item{display:inline-block;margin-left:15px}@media screen and (max-width: 768px){.navi__item{margin-left:10px}}@media screen and (max-width: 414px){.navi__item{display:block;margin-left:0}}.navi__item a{color:#fff;-webkit-transition:all .3s ease;transition:all .3s ease}@media screen and (max-width: 768px){.navi__item a{font-size:15px}}@media screen and (max-width: 414px){.navi__item a{display:block;padding:10px 15px}}.navi__item a:hover{color:#dc3545}.navi .btn__inner{display:none;margin-right:10px}@media screen and (max-width: 414px){.navi .btn__inner{display:inline-block;vertical-align:middle}}@media screen and (max-width: 414px){.site__name{display:inline-block;vertical-align:middle}}.site__name a{background-image:url("../images/logo.png");background-repeat:no-repeat;background-size:contain;display:block;width:165px;height:30px;text-indent:-9999px;-webkit-transition:all .3s ease;transition:all .3s ease}@media screen and (max-width: 1024px){.site__name a{height:25px}}.link-danger{color:#dc3545}.link-danger:hover{text-decoration:underline}.fixed{position:fixed;z-index:10}.fixed-right{margin-left:1230px;top:50%}@media screen and (max-width: 1024px){.fixed-right{margin-left:0;right:15px}}.fixed-right .btn-icon{width:60px;line-height:60px;text-align:center;background-color:rgba(0,0,0,0.5);font-size:20px;outline:none}.fixed-right .btn-icon:hover{background-color:#000}.btn{color:#fff;border:none;-webkit-transition:all .3s ease;transition:all .3s ease;cursor:pointer;display:inline-block;background-color:transparent}.btn-danger{background-color:#dc3545;padding:15px 30px;font-size:20px;border-radius:5px}.btn-danger:hover{background-color:#bd2130}.arrow{text-align:center;margin-top:40px;margin-bottom:40px}.arrow .fas{color:#ccc}.base{padding-top:150px;padding-bottom:150px}@media screen and (max-width: 1024px){.base{padding-top:100px;padding-bottom:100px}}@media screen and (max-width: 768px){.base{padding-top:50px;padding-bottom:50px}}.base__head{margin-bottom:60px}.base__foot .btn__inner{text-align:center;margin-top:30px}.base__tit,.base__desc{text-align:center}@media screen and (max-width: 414px){.base__tit,.base__desc{margin-left:15px;margin-right:15px}}.base__tit{font-size:35px;position:relative;margin-top:0}@media screen and (max-width: 414px){.base__tit{font-size:30px}}@media screen and (max-width: 320px){.base__tit{font-size:28px}}.base__tit::after{content:'';position:absolute;top:100%;left:50%;margin-top:22.5px;margin-left:-30px;height:2px;width:60px}.base__sm{display:block;font-size:14px;margin-bottom:20px;color:#ccc;font-weight:100}.base__desc{font-size:20px;margin-bottom:50px}@media screen and (max-width: 414px){.base__desc br{display:none}}.base__pic,.base__text{padding:15px}@media screen and (max-width: 414px){.base__pic,.base__text{float:none}}.base__pic{width:40%}@media screen and (max-width: 414px){.base__pic{width:auto}}.base__text{width:60%}@media screen and (max-width: 414px){.base__text{width:auto}}.dl__dl{margin-top:0}.dl__tit,.dl__desc,.dl__ls{margin-top:15px;margin-bottom:15px}.dl__tit,.dl__desc{color:#b3b3b3;line-height:1.6}.dl__tit{font-size:20px}.dl__tit--active{font-size:30px;margin-top:0}.dl__desc{font-size:20px;margin-left:1em;margin-bottom:40px}.dl__ls{list-style-type:square;padding-left:27px}.base-bg{background-attachment:fixed;background-position-x:center;background-repeat:no-repeat}.base-banr{background-image:url("../images/banr_bg.jpg");background-size:auto;background-position-y:top;padding-top:120px;padding-bottom:150px}@media screen and (max-width: 414px){.base-banr{padding-top:90px;padding-bottom:90px;background-image:url("../images/banr_bg_mobi.jpg");background-size:contain}}@media screen and (max-width: 320px){.base-banr{padding-top:75px;padding-bottom:75px}}.base-banr::after{background-color:#000;opacity:.3}@media screen and (max-width: 414px){.base-banr::after{opacity:.4}}.base-rwd{padding-bottom:0;background-image:url("../images/rwd_bg.jpg");background-size:cover}@media screen and (max-width: 320px){.base-rwd{padding-bottom:50px}}.base-rwd::after{background-color:#000;opacity:.8}.base-web{background-color:#f6f5f5}.base-evolution{background-image:url("../images/evolution_bg.jpg");background-size:cover}.base-evolution::after{background-color:#000;opacity:.8}.base-author{background-color:#333}.base-banr .banr__cntr{padding-left:30px}@media screen and (max-width: 414px){.base-banr .banr__cntr{padding-left:15px;padding-right:15px;text-align:center}}.base-banr .banr__tit,.base-banr .banr__desc{color:#fff}.base-banr .banr__tit{font-size:55px;padding-left:120px;display:inline-block}@media screen and (max-width: 1024px){.base-banr .banr__tit{font-size:45px}}@media screen and (max-width: 768px){.base-banr .banr__tit{padding-left:60px}}@media screen and (max-width: 414px){.base-banr .banr__tit{padding-left:0;font-size:35px}}.base-banr .banr__desc{font-size:40px;margin-bottom:10px;color:#ccc}@media screen and (max-width: 1024px){.base-banr .banr__desc{font-size:30px}}@media screen and (max-width: 414px){.base-banr .banr__desc{font-size:25px;margin-bottom:5px;color:#fff}}.base-banr .banr__sm{color:#ccc}@media screen and (max-width: 414px){.base-banr .banr__sm{color:#fff}}.base-rwd .base__tit,.base-author .base__tit{color:#fff}.base-rwd .base__tit::after,.base-author .base__tit::after{background-color:#dc3545}.base-rwd .base__desc,.base-rwd .base__ls,.base-author .base__desc,.base-author .base__ls{color:#b3b3b3}@media screen and (max-width: 320px){.base-rwd .base__cntr{overflow:hidden}}.base-rwd .fade{height:385px}@media screen and (max-width: 768px){.base-rwd .fade{height:290px}}@media screen and (max-width: 414px){.base-rwd .fade{height:175px}}@media screen and (max-width: 320px){.base-rwd .fade{height:190px}}.base-work .base__tit,.base-work .base__desc{color:#364d59}.base-work .base__tit::after{background-color:#364d59}.base-work .ani-scale-center-x::before{background-color:#fff}.base-web .base__tit{color:#dc3545}.base-web .base__tit::after{background-color:#dc3545}.base-web .base__desc{color:#364d59}.base-web .img__inner{text-align:center}.base-web .img-nl{position:relative}.base-web .img-html{z-index:2}@media screen and (max-width: 414px){.base-web .img-html{width:160px}}@media screen and (max-width: 320px){.base-web .img-html{width:130px}}.base-web .img-css,.base-web .img-js{width:170px;z-index:1;top:-30px}@media screen and (max-width: 414px){.base-web .img-css,.base-web .img-js{width:100px}}@media screen and (max-width: 320px){.base-web .img-css,.base-web .img-js{width:80px}}.base-web .img-css{margin-right:-15px}.base-web .img-js{margin-left:-15px}.base-web .ani-scale-center-x::before{background-color:#f6f5f5}@media screen and (max-width: 1024px){.base-evolution .base__cntr{overflow:hidden}}.base-evolution .base__tit{color:#dc3545}.base-evolution .base__tit::after{background-color:#dc3545}.base-evolution .base__desc{color:#fff}.base-author .base__cntr{overflow:hidden}.base-author .base__desc{text-align:left}.base-author .base__sub{color:#b3b3b3}@media screen and (max-width: 414px){.base-author .base__pic{height:240px;overflow:hidden}}.work__item{width:33.33333%;padding:15px}@media screen and (max-width: 414px){.work__item{width:auto;text-align:center}}.work__tit{color:#364d59;font-size:20px}.work__desc{color:#9aa3a6;margin-bottom:0;text-align:justify}@media screen and (max-width: 414px){.work__desc{text-align:center}}.work .lyt-gutter{background-color:#edf7ff;padding:30px}@media screen and (max-width: 1024px){.work .lyt-gutter{min-height:238px}}@media screen and (max-width: 768px){.work .lyt-gutter{min-height:263px}}@media screen and (max-width: 414px){.work .lyt-gutter{min-height:auto}}.work .fas{font-size:40px;color:#364d59}.fade{width:663px;height:419px}@media screen and (max-width: 768px){.fade{width:500px;height:316px}}@media screen and (max-width: 414px){.fade{width:300px;height:190px}}.fade__ls{position:relative}.fade__item{position:absolute;width:663px;height:419px;display:none}@media screen and (max-width: 768px){.fade__item{width:500px;height:316px}}@media screen and (max-width: 414px){.fade__item{width:300px;height:190px}}.fade__item:first-child{display:block}.web__item{padding:15px;width:33.33333%}@media screen and (max-width: 414px){.web__item{width:50%}}.web__mask{text-decoration:none;position:relative;display:block;overflow:hidden}.web__mask::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:-webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0.1)), to(rgba(0,0,0,0.8)));background:linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);-webkit-transition:all .5s ease;transition:all .5s ease}@media screen and (max-width: 414px){.web__mask::after{background:#000;opacity:.4}}.web__mask:hover::after{background-color:#000;opacity:.7}.web__mask:hover .img-nl{-webkit-transform:scale(1.2);transform:scale(1.2)}.web__mask:hover .web__intro{bottom:0}@media screen and (max-width: 1024px){.web__mask:hover .web__intro{bottom:-10px}}.web__intro{position:absolute;bottom:-60px;left:0;z-index:1;width:100%;-webkit-transition:all .5s ease;transition:all .5s ease}@media screen and (max-width: 1024px){.web__intro{bottom:-10px}}.web__brand{color:#ddd;margin:0 10px;font-style:italic;font-size:14px}@media screen and (max-width: 414px){.web__brand{font-size:12px}}.web__name{margin:0 10px 15px;font-size:16px;font-weight:600}@media screen and (max-width: 1024px){.web__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (max-width: 414px){.web__name{font-size:14px}}.web__desc{height:45px;margin:10px;font-size:14px}@media screen and (max-width: 1024px){.web__desc{display:none}}.web__name,.web__desc{color:#fff}.web .img-nl{width:100%;height:auto;display:block;-webkit-transition:all .5s ease;transition:all .5s ease}.spec__body{opacity:0;-webkit-transition:all 1s ease 3s;transition:all 1s ease 3s}.spec__item{width:25%;padding:15px;text-align:center;-webkit-transition:all 3s ease;transition:all 3s ease}.spec__item:nth-child(1){-webkit-transform:scale(0) rotateX(248deg) rotate(152deg) translate(867px, -473px);transform:scale(0) rotateX(248deg) rotate(152deg) translate(867px, -473px);opacity:.39661}.spec__item:nth-child(2){-webkit-transform:scale(0) rotateX(241deg) rotate(276deg) translate(-916px, -338px);transform:scale(0) rotateX(241deg) rotate(276deg) translate(-916px, -338px);opacity:.83318}.spec__item:nth-child(3){-webkit-transform:scale(0) rotateX(204deg) rotate(212deg) translate(10px, 81px);transform:scale(0) rotateX(204deg) rotate(212deg) translate(10px, 81px);opacity:.44973}.spec__item:nth-child(4){-webkit-transform:scale(0) rotateX(155deg) rotate(90deg) translate(-514px, -525px);transform:scale(0) rotateX(155deg) rotate(90deg) translate(-514px, -525px);opacity:.09116}.spec__item:nth-child(5){-webkit-transform:scale(0) rotateX(39deg) rotate(97deg) translate(-758px, 307px);transform:scale(0) rotateX(39deg) rotate(97deg) translate(-758px, 307px);opacity:.90844}.spec__item:nth-child(6){-webkit-transform:scale(0) rotateX(151deg) rotate(245deg) translate(-34px, 323px);transform:scale(0) rotateX(151deg) rotate(245deg) translate(-34px, 323px);opacity:.90465}.spec__item:nth-child(7){-webkit-transform:scale(0) rotateX(125deg) rotate(101deg) translate(334px, -899px);transform:scale(0) rotateX(125deg) rotate(101deg) translate(334px, -899px);opacity:.31455}.spec__item:nth-child(8){-webkit-transform:scale(0) rotateX(192deg) rotate(154deg) translate(850px, -92px);transform:scale(0) rotateX(192deg) rotate(154deg) translate(850px, -92px);opacity:.30363}@media screen and (max-width: 414px){.spec__item{width:50%;min-height:274px}}@media screen and (max-width: 320px){.spec__item{min-height:299px}}.spec__tit,.spec__desc{color:#fff}.spec__tit{font-size:20px}.spec__desc{opacity:.5}.spec .fab,.spec .fas{color:#fff;font-size:35px;width:90px;height:90px;line-height:82px;border:solid 4px #dc3545;border-radius:45px}.footer{background-color:#232323;color:#666;font-size:13px}@media screen and (max-width: 360px){.footer{font-size:12px}}.footer__head,.footer__foot{padding:15px}@media screen and (max-width: 320px){.footer__head,.footer__foot{float:none}}@media screen and (max-width: 320px){.footer__foot{padding-top:0}}.img-nl{max-width:100%}.img-resp{width:100%}.img-role1,.img-role2,.img-role3{position:absolute}.img-role1{top:0;left:19px}@media screen and (max-width: 768px){.img-role1{left:14px;width:486px}}@media screen and (max-width: 414px){.img-role1{left:9px;width:291px}}.img-role2{bottom:15px;left:0;-webkit-transform:translateX(-100px);transform:translateX(-100px);-webkit-transition:all 1s ease .5s;transition:all 1s ease .5s;opacity:0}@media screen and (max-width: 768px){.img-role2{width:159px;bottom:10px}}@media screen and (max-width: 414px){.img-role2{bottom:6px;width:96px}}.img-role3{bottom:0;left:173px;-webkit-transform:translateX(-100px);transform:translateX(-100px);-webkit-transition:all 1s ease 1s;transition:all 1s ease 1s;opacity:0}@media screen and (max-width: 768px){.img-role3{width:64px;left:129px}}@media screen and (max-width: 414px){.img-role3{left:78px;width:38px}}.ani-fadeIn-top,.ani-fadeIn-bottom,.ani-fadeIn-left,.ani-fadeIn-right,.ani-fadeIn-normal{opacity:0;-webkit-transition:all 1s ease;transition:all 1s ease}.ani-fadeIn-top{-webkit-transform:translateY(-50px);transform:translateY(-50px)}.ani-fadeIn-bottom{-webkit-transform:translateY(50px);transform:translateY(50px)}.ani-fadeIn-bottom .img-html,.ani-fadeIn-bottom .img-css,.ani-fadeIn-bottom .img-js{-webkit-transition:all 1s ease;transition:all 1s ease}.ani-fadeIn-bottom .img-css,.ani-fadeIn-bottom .img-js{opacity:0;-webkit-transition-delay:1s;transition-delay:1s}.ani-fadeIn-bottom .img-css{-webkit-transform:translateX(100px);transform:translateX(100px)}.ani-fadeIn-bottom .img-js{-webkit-transform:translateX(-100px);transform:translateX(-100px)}.ani-fadeIn-bottom .img-html{-webkit-transform:scale(0);transform:scale(0)}.ani-fadeIn-left{-webkit-transform:translateX(-20px);transform:translateX(-20px)}.ani-fadeIn-right{-webkit-transform:translateX(20px);transform:translateX(20px)}.ani-scale-normal{-webkit-transition:all 1s ease;transition:all 1s ease;-webkit-transform:scale(0);transform:scale(0)}.ani-scale-center-x{position:relative}.ani-scale-center-x::before{content:'';z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all 1s ease;transition:all 1s ease;-webkit-transform-origin:center center;transform-origin:center center}.ani-rotate-y{-webkit-transition:all 2s ease;transition:all 2s ease;opacity:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.ani-delay-nl{-webkit-transition-delay:0;transition-delay:0}.ani-delay-nl::before{-webkit-transition-delay:0;transition-delay:0}.ani-delay-sm{-webkit-transition-delay:.5s;transition-delay:.5s}.ani-delay-sm::before{-webkit-transition-delay:.5s;transition-delay:.5s}.ani-delay-md{-webkit-transition-delay:1s;transition-delay:1s}.ani-delay-md::before{-webkit-transition-delay:1s;transition-delay:1s}.ani-delay-lg{-webkit-transition-delay:1.5s;transition-delay:1.5s}.ani-delay-lg::before{-webkit-transition-delay:1.5s;transition-delay:1.5s}.ani-delay-xl{-webkit-transition-delay:2s;transition-delay:2s}.ani-delay-xl::before{-webkit-transition-delay:2s;transition-delay:2s}.js-hidden{display:none}.js-navi--active{background-color:rgba(255,255,255,0.9);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.05);box-shadow:0 2px 4px rgba(0,0,0,0.05)}.js-navi--active .site__name a{width:220px;height:40px}@media screen and (max-width: 1024px){.js-navi--active .site__name a{height:30px}}@media screen and (max-width: 414px){.js-navi--active .navi__menu{background-color:rgba(255,255,255,0.9)}}.js-navi--active .navi__item a{color:#333;font-size:20px}@media screen and (max-width: 1024px){.js-navi--active .navi__item a{font-size:18px}}@media screen and (max-width: 768px){.js-navi--active .navi__item a{font-size:16px}}.js-navi--active .navi__item a:hover{color:#dc3545}.js-navi--active .js-navi__item--active a{color:#dc3545}.js-navi--active .btn-icon{color:#666}.js-ani-fadeIn-left--active,.js-ani-fadeIn-right--active,.js-ani-fadeIn-top--active,.js-ani-fadeIn-bottom--active,.js-ani-fadeIn-normal--active{opacity:1}.js-ani-fadeIn-left--active,.js-ani-fadeIn-right--active{-webkit-transform:translateX(0);transform:translateX(0)}.js-ani-fadeIn-top--active,.js-ani-fadeIn-bottom--active{-webkit-transform:translateY(0);transform:translateY(0)}.js-ani-fadeIn-top--active .img-css,.js-ani-fadeIn-top--active .img-js,.js-ani-fadeIn-bottom--active .img-css,.js-ani-fadeIn-bottom--active .img-js{opacity:1;-webkit-transition-delay:.5s;transition-delay:.5s;-webkit-transform:translateX(0);transform:translateX(0)}.js-ani-fadeIn-top--active .img-html,.js-ani-fadeIn-bottom--active .img-html{-webkit-transform:scale(1);transform:scale(1)}.js-ani-fadeIn-right--active .img-role2,.js-ani-fadeIn-right--active .img-role3{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.js-ani-scale-normal--active{-webkit-transform:scale(1);transform:scale(1)}.js-ani-scale-center-x--active::before{-webkit-transform:scaleX(0);transform:scaleX(0)}.js-ani-pos-random--active .spec__item{-webkit-transform:scale(1) rotate(0) rotateZ(0) translateX(0) translateY(0);transform:scale(1) rotate(0) rotateZ(0) translateX(0) translateY(0);opacity:1}.js-ani-pos-random--active .spec__body{opacity:1}.js-ani-rotate-y--active{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);opacity:1}