﻿html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body{min-height:100%}html{height:100%}body{position:relative;color:#373737;font-family:Lato, "Noto Sans TC", "微軟正黑體", "繁黑體", 'Microsoft JhengHei', 'Microsoft YaHei', 'Heiti TC', 'LiHei Pro', sans-serif, "新細明體", PMingLiU;font-weight:300;line-height:1.5;letter-spacing:0.1em}a,a:hover{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;text-decoration:none}.clearfix{clear:both}@font-face{font-family:'icomoon';src:url("../fonts/icomoon.eot?6qlbhy");src:url("../fonts/icomoon.eot?6qlbhy#iefix") format("embedded-opentype"),url("../fonts/icomoon.ttf?6qlbhy") format("truetype"),url("../fonts/icomoon.woff?6qlbhy") format("woff"),url("../fonts/icomoon.svg?6qlbhy#icomoon") format("svg");font-weight:normal;font-style:normal}.icon{font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-pin-camp:before{content:"\e915";color:#39fad7}.icon-pin-excavator:before{content:"\e916";color:#58b2dc}.icon-pin-fine:before{content:"\e917";color:#fa0}.icon-line:before{content:""}.icon-line-chat:before{content:""}.icon-angle-up:before{content:""}.icon-home:before{content:""}.icon-info:before{content:""}.icon-map:before{content:""}.icon-refresh:before{content:""}.icon-set:before{content:""}.icon-next:before{content:""}.icon-prev:before{content:""}.icon-tw-walker:before{content:""}.icon-cw-logo:before{content:""}.icon-github:before{content:""}.icon-develop:before{content:""}.icon-men:before{content:""}.icon-quote-1:before{content:""}.icon-quote-2:before{content:""}.icon-headphones:before{content:""}.icon-facebook:before{content:""}.icon-facebook-square:before{content:""}.icon-pause-circle:before{content:""}.icon-play-circle:before{content:""}.icon-rotate-cw:before{content:""}nav .container .nav-menu .inner ul.sns:after,.provide ul:after,footer .container .team .team-list:after,section.video .main-content .h1:before,section.video .main-content a.btn:before,.videoTime::before,body.opening-page.iPhone section.video:before,body.opening-page.Android section.video:before{content:'';display:block}body{position:relative;background-color:#002235}nav{position:fixed;width:100%;padding-top:15px;padding-bottom:15px;z-index:1001;transition:all 0.3s}nav.top-nav-collapse{padding-top:8px;padding-bottom:8px;background-color:rgba(0,34,53,0.95)}nav .container{line-height:1}@media (max-width: 374px){nav .container{padding:0 8px}}nav .container>*{float:left;display:block}nav .container>i{color:#fff;font-size:36px}nav .container>span{margin-left:3px;color:rgba(255,255,255,0.85);font-size:13px;line-height:36px}nav .container>a{margin:6px 6px 0 0;font-size:0}nav .container>a i{color:rgba(255,255,255,0.85);font-size:24px;line-height:24px}nav .container .nav-menu{display:none;position:absolute;top:calc(100% + 15px);padding:3px;background:#81c7d4;background:-moz-linear-gradient(left, #81c7d4 0%, #39fad7 100%);background:-webkit-linear-gradient(left, #81c7d4 0%, #39fad7 100%);background:linear-gradient(to right, #81c7d4 0%,#39fad7 100%);z-index:10}nav .container .nav-menu .inner{padding:10px 10px 5px;background-color:#fff}@media (min-width: 375px){nav .container .nav-menu .inner{padding:15px}}nav .container .nav-menu .inner ul li a{display:block;padding:10px;color:#002235;text-align:center}nav .container .nav-menu .inner ul li a img{display:block;width:95px;height:auto;margin-top:0.5em;border:1px solid #eee}@media (min-width: 375px){nav .container .nav-menu .inner ul li a img{width:100px}}nav .container .nav-menu .inner ul li a:hover{color:#81c7d4}nav .container .nav-menu .inner ul+ul{position:relative;padding-top:10px;margin-top:10px;border-top:1px solid #ccc}nav .container .nav-menu .inner ul.sns{position:relative;font-size:27px}nav .container .nav-menu .inner ul.sns li{float:left;width:50%}nav .container .nav-menu .inner ul.sns li a{display:table;margin:auto;color:#002235}nav .container .nav-menu .inner ul.sns li a.facebook:hover{color:#4267b2}nav .container .nav-menu .inner ul.sns li a.line:hover{color:#00C200}nav .container .nav-menu .inner ul.sns:after{clear:both}@media (max-width: 767px){nav .container{margin-left:0;margin-right:0}}.menu{position:relative;float:left;width:25px;height:36px;cursor:pointer;overflow:hidden;margin-right:10px}.menu__icon{position:absolute;width:25px;height:20px;top:50%;left:50%;border:0;background:no-repeat;transform:translate(-50%, -50%);-webkit-appearance:none}.menu__line{position:absolute;left:0;background-color:rgba(255,255,255,0.75);height:3px;width:100%;border-radius:3px;pointer-events:none}.menu__line--1{top:0}.menu__line--2{top:0;bottom:0;margin:auto}.menu__line--3{bottom:0}.menu--close5 .menu__line--4,.menu--close5 .menu__line--5{opacity:0;top:8.5px;transition:opacity .2s ease-in-out, transform .2s ease-in-out}.menu--close5 .menu__line--1{transition:width .2s ease-in-out .4s}.menu--close5 .menu__line--2{transition:width .2s ease-in-out .3s}.menu--close5 .menu__line--3{transition:width .2s ease-in-out .2s}.menu--close5 .menu__line--4{transform:rotate(45deg) translate3d(-25px, 0, 0);transition:opacity .2s ease-in-out .2s,  transform .2s ease-in-out .2s}.menu--close5 .menu__line--5{transform:rotate(-45deg) translate3d(25px, 0, 0);transition:opacity .2s ease-in-out, transform .2s ease-in-out}.menu--close5.open .menu__line--1{width:0;transition:width .2s ease-in-out}.menu--close5.open .menu__line--2{width:0;transition:width .2s ease-in-out .1s}.menu--close5.open .menu__line--3{width:0;transition:width .2s ease-in-out .2s}.menu--close5.open .menu__line--4{opacity:1;transform:rotate(45deg) translate3d(0, 0, 0);transition:opacity .2s ease-in-out .2s, transform .2s ease-in-out .2s}.menu--close5.open .menu__line--5{opacity:1;transform:rotate(-45deg) translate3d(0, 0, 0);transition:opacity .2s ease-in-out .4s, transform .2s ease-in-out .4s}.provide ul li{float:left;color:#CACACA;line-height:34px}.provide ul li img{display:block;width:auto;height:24px;margin:5px 0}.provide ul li+li{margin-left:1em}.provide ul:after{clear:both}footer{position:absolute;left:0;bottom:0;width:100%;font-size:12px;line-height:1.333333333333333;z-index:10}@media (min-width: 768px){footer{font-size:13px}}footer .container{padding:8px;border-top:1px solid rgba(255,255,255,0.75)}@media (min-width: 768px){footer .container{padding:15px}}@media (min-width: 768px){footer .container .copyright{float:left;margin-right:15px}}footer .container .copyright p{color:#CACACA}footer .container .copyright p span{display:block}footer .container .copyright p span a{color:#fff}footer .container .copyright p span a:hover{color:#1dd6ac}@media (max-width: 767px){footer .container .copyright p span{display:none}}@media (max-width: 767px){footer .container .copyright p{letter-spacing:-0.01em}}footer .container .team{float:left;position:relative}footer .container .team .team-btn{padding:0 5px 0 8px;margin:10px 0 4px;color:#CACACA;border:1px solid #CACACA}footer .container .team:hover .team-btn{color:#002235;background-color:#fff;border:1px solid #002235}footer .container .team:hover .team-btn i{transform:rotate(180deg)}footer .container .team .team-list{display:none;position:absolute;bottom:100%;left:0;width:calc(100vw - 16px);padding:8px 10px;color:#373737;letter-spacing:normal;background-color:#fff;border:1px solid #002235}@media (max-width: 413px){footer .container .team .team-list{letter-spacing:-0.064em}}@media (min-width: 768px){footer .container .team .team-list{left:50%;width:410px;padding:10px 12px;letter-spacing:-0.016em;transform:translateX(-50%)}}footer .container .team .team-list:after{position:absolute;top:100%;left:0;width:28px;height:8px;background-image:url(../images/arrow.down@1.5x.png);background-position:top center;background-size:cover;background-repeat:no-repeat}@media (min-width: 768px){footer .container .team .team-list:after{left:50%;transform:translateX(-50%)}}footer .container .team:hover .team-list{display:block}footer .container .provide{float:right}section.video{position:fixed;width:100%;height:100%;overflow:hidden;z-index:0}section.video .container{position:relative;height:100%}section.video #video{position:fixed;left:50%;bottom:0;min-width:100%;min-height:100%;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}section.video .main-content{display:none;position:absolute;top:50%;left:50%;padding:0 15px;width:100%;max-width:870px;transform:translate(-50%, -50%);opacity:0;z-index:1001;animation:showIn 0.5s linear forwards}section.video .main-content.showIn{display:block}@media (max-width: 767px){section.video .main-content{width:100%;padding:15px}}section.video .main-content .h3{display:table;margin:0 auto 15px;padding-left:1.5em;color:#fff;font-size:14px;line-height:24px;letter-spacing:1.5em;background-color:rgba(255,255,255,0.25);border:1px solid #fff}@media (min-width: 375px){section.video .main-content .h3{font-size:17px;line-height:38px}}@media (min-width: 768px){section.video .main-content .h3{padding-left:2em;font-size:20px;letter-spacing:2em}}section.video .main-content .h1{position:relative;margin:35px 0 60px;color:#1dd6ac;font-size:45px;text-align:center}section.video .main-content .h1 img{display:block;margin:auto;max-width:100%;max-height:calc(100vh - 360px);width:auto;height:auto}@media (min-width: 375px){section.video .main-content .h1{font-size:48px}}@media (min-width: 414px){section.video .main-content .h1{font-size:60px}}@media (min-width: 768px){section.video .main-content .h1{margin:35px 0 120px;font-size:84px}}@media (max-height: 768px){section.video .main-content .h1{margin:35px 0 60px}}section.video .main-content .h1:before{position:absolute;top:50%;left:50%;width:200%;padding-top:100%;background:-moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.85) 0%, transparent 50%);background:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.85) 0%, transparent 50%);background:radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 50%);transform:translate(-50%, -50%);z-index:-1}section.video .main-content p{margin:35px 0 60px;color:#fff;font-size:14px;font-weight:400;text-align:center}section.video .main-content p span{display:inline-block}@media (min-width: 375px){section.video .main-content p{margin:40px 0 65px;font-size:16px}}@media (min-width: 414px){section.video .main-content p{font-size:18px}}@media (min-width: 768px){section.video .main-content p{font-size:21px}}section.video .main-content a.btn{position:relative;display:block;margin:auto;padding-left:0.6em;width:160px;color:#002235;font-size:16px;font-weight:400;line-height:48px;text-align:center;letter-spacing:0.6em;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;background:#44ea76;background:-moz-linear-gradient(left, #44ea76 0%, #1dd6ac 100%);background:-webkit-linear-gradient(left, #44ea76 0%, #1dd6ac 100%);background:linear-gradient(to right, #44ea76 0%,#1dd6ac 100%)}@media (min-width: 375px){section.video .main-content a.btn{width:220px;font-size:16px;line-height:48px}}@media (min-width: 768px){section.video .main-content a.btn{font-size:20px;line-height:60px}}section.video .main-content a.btn:before{height:40px;position:absolute;bottom:-5px;left:30px;right:30px;z-index:-1;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;opacity:0.75;filter:blur(20px);transform-style:preserve-3d;transition:all 0.3s ease-out;background:#44ea76;background:-moz-linear-gradient(left, #44ea76 0%, #1dd6ac 100%);background:-webkit-linear-gradient(left, #44ea76 0%, #1dd6ac 100%);background:linear-gradient(to right, #44ea76 0%,#1dd6ac 100%)}section.video .main-content a.btn span{display:block;-moz-border-radius:50em;-webkit-border-radius:50em;border-radius:50em;position:relative;z-index:2;transform-style:preserve-3d;transition:all 0.3s ease-out}section.video .main-content a.btn:hover span{filter:brightness(1.05) contrast(1.05);transform:scale(0.95)}section.video .main-content a.btn:hover:before{bottom:0;filter:blur(10px) brightness(.95)}.videoTime{position:absolute;right:40px;bottom:40px;width:131px;height:131px;z-index:2}.videoTime::before{position:relative;top:50%;left:50%;width:122px;height:122px;border:2px solid rgba(255,255,255,0.65);-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;transform:translate(-50%, -50%)}.videoTime figcaption{position:absolute;display:block;top:50%;left:50%;font-size:24px;font-weight:500;text-transform:uppercase;transform:translate(-50%, -50%);opacity:1;animation:skip 60s linear;z-index:10}.videoTime figcaption a{color:#39fad7}.videoTime svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(-90deg)}.videoTime .line{fill:transparent;stroke:url(#gradient1);stroke-width:6px;stroke-dasharray:534;stroke-dashoffset:0;transition:stroke-dashoffset 1s;animation:videoTime 81.5s linear}@media (max-width: 1023px){.videoTime{right:50%;bottom:50%;transform:scale(0.85) translate(50%, 150%);transform-origin:100% 15%}}span.reload{display:table;padding:10px;margin:auto;font-size:14px;text-align:center;cursor:pointer}span.reload:hover{text-decoration:underline}@media (max-width: 414px){body.opening-page{max-height:100vh;overflow:hidden}}body.opening-page nav.top-nav-collapse{background-color:none}body.opening-page.iPhone section.video,body.opening-page.Android section.video{position:fixed;display:block;bottom:0;width:100%;padding:0;overflow:hidden}body.opening-page.iPhone section.video:before,body.opening-page.Android section.video:before{padding-top:177.7777777777778%}body.opening-page.iPhone section.video #videoIosMobile,body.opening-page.iPhone section.video #videoIosPad,body.opening-page.Android section.video #videoIosMobile,body.opening-page.Android section.video #videoIosPad{position:absolute;top:0;bottom:0;left:0;width:100%;border:0}body.opening-page section.main{padding-bottom:83px}body.opening-page section.main #watershed circle{opacity:0}body.opening-page section.main #watershed.played .watershed-line{animation:draw_watershed 3s linear forwards}body.opening-page section.main #watershed.played .river{animation:draw_watershed 8s 3s linear forwards}body.opening-page section.main #watershed.played circle{animation:fadeIn 0.75s 6s linear forwards}body.opening-page span.reload{color:#fff;text-shadow:0 0 10px #000}body.opening-page footer{display:none;animation:showIn 0.5s linear forwards}body.opening-page footer.showIn{display:block}@keyframes videoTime{from{stroke-dashoffset:537}to{stroke-dashoffset:0}}@keyframes skip{0%{display:none;opacity:0}10%{display:block;opacity:0}10.5%{opacity:1}100%{display:block}}@keyframes draw_watershed{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes showIn{0%{opacity:0}90%{opacity:0}100%{opacity:1}}@keyframes colorAnimate{0%{color:#fff}100%{color:#44ea76}}@keyframes lineColorAnimate{0%{stroke:#39fad7}100%{stroke:#81c7d4}}@keyframes topBottom{0%{top:0px}100%{top:15px}}@keyframes cloud1{0%{left:-92.5%;opacity:0.3}20%{left:-50%;opacity:0.5}40%{left:0%;opacity:0.4}60%{left:50%}79.9%{left:100%;opacity:0.5}80%{left:100%;opacity:0}80.1%{left:-92.5%;opacity:0}100%{left:-92.5%;opacity:0.3}}@keyframes cloud2{0%{left:50%;opacity:0.5}25%{left:100%;opacity:0.3}25.1%{left:100%;opacity:0}25.2%{left:-100%;opacity:0}50%{left:-50%;opacity:0.4}75%{left:0%}100%{left:50%;opacity:0.5}}@keyframes animateLineChart{from{stroke-dashoffset:1800}to{stroke-dashoffset:0}}
