@charset "utf-8";
body,html{margin:0;height:100%}
body{height:100%;width:100%;margin:0;padding:0}
body{font-size:100%;line-height:1.5;font-family:Century Gothic,"微軟正黑體","LiHei Pro",Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#3a3c3c;position:relative;background:#58c9cc}
a:focus{outline:0}
a{text-decoration:none;color:#000}
a:hover{text-decoration:none;color:#fff}
img{border:0 none;line-height:0;display:block}
form{margin:0;padding:0}
ol,ol li,ul,ul li{margin:0;padding:0;list-style-type:none}
dd,dl,dt{margin:0;padding:0}
dl{height:1%}
button{border:0 none;cursor:pointer;padding:0;margin:0;background:0 0}
.clearfix:after,.clearfix:before{content:"";display:table;height:0;overflow:hidden}
.clearfix:after{clear:both}
.clearfix{zoom:1}
h1,h2,h3,h6,p{margin:0;padding:0}
.Wrapper{width:960px;margin:auto;position:relative}
.Header{position:relative;background:#f5f5f5;padding:1% 0 2%}
.People1{background:url(../images/People01.png) no-repeat;width:135px;height:185px;position:absolute;bottom:4px;right:50%;margin:0 -630px 0 0}
.People2{background:url(../images/People02.png) no-repeat;width:216px;height:175px;position:absolute;bottom:4px;left:50%;margin:0 0 0 -760px;animation-delay:1s}
.bg_02{background:url(../images/BgDot.png);position:absolute;left:0;right:0;bottom:0;top:0;animation-delay:1.5s;z-index:1}
.Ball{background:url(../images/ball.png) no-repeat;width:117px;height:117px;position:absolute;bottom:4px;right:50%;margin:0 -771px 0 0;animation-delay:2s;z-index:2}
.MiddleBg.On{background:url(../images/MainBg.png) repeat-y center top}
h1{background:url(../images/h1.png) no-repeat;width:560px;height:433px;text-indent:-9999px;margin:auto;position:relative;z-index:20}
.SliderBlockBg{width:386px;margin-left:-40px;position:relative;background:url(../images/SliderBg.png) no-repeat;background-size:100%;z-index:20}
.SliderBlock{width:370px;margin:auto}
.flexblock{display:flex}
.NavActive ul{display:flex;text-align:center;padding:5% 0 2%}
.NavActive ul li{width:48%;margin:0 1%}
.NavActive ul li a{display:block;width:450px;height:240px;text-indent:-9999px}
.NavActive ul li:nth-child(1) a{background:url(../images/Act01.png) no-repeat;background-size:100%}
.NavActive ul li:nth-child(2) a{background:url(../images/Act02.png) no-repeat;background-size:100%}
.LinkApp ul{display:flex;text-align:center;padding:0 0 3%}
.LinkApp ul li a{display:block;width:270px;height:210px;text-indent:-9999px}
.LinkApp ul li:nth-child(3),.LinkApp ul li:nth-child(4){margin-left:-8px}
.LinkApp ul li:nth-child(1){background:url(../images/AppTitle.png) no-repeat;background-size:100%;width:214px;position:relative;height:210px;z-index:5}
.LinkApp ul li:nth-child(2){margin-left:-50px}
.LinkApp ul li:nth-child(2) a{background:url(../images/App01.png) no-repeat;background-size:100%}
.LinkApp ul li:nth-child(3) a{background:url(../images/App02.png) no-repeat;background-size:100%}
.LinkApp ul li:nth-child(4) a{background:url(../images/App03.png) no-repeat;background-size:100%}
.Nav ul{display:flex}
.Nav ul li{margin:0 1%}
.Nav ul li a{display:block;text-indent:-9999px;width:294px;height:274px}

/*週五版
.Nav ul li:nth-child(1) a{background:url(../images/Link01.png) no-repeat top center;background-size:100%}
.Nav ul li:nth-child(2) a{background:url(../images/Link04.png) no-repeat top center;background-size:100%;width: 609px; margin-top: 4%;}
*/

/*週六日版
 .Nav ul li:nth-child(1) a{background:url(../images/Link01.png) no-repeat top center;background-size:100%}
.Nav ul li:nth-child(2) a{background:url(../images/Link05.png) no-repeat top center;background-size:100%;margin-top: 9%;}
.Nav ul li:nth-child(3) a{background:url(../images/Link03.png) no-repeat top center;background-size:100%}
*/

/*週一到週四版*/
.Nav ul li:nth-child(1) a{background:url(../images/Link01.png) no-repeat top center;background-size:100%}
.Nav ul li:nth-child(2) a{background:url(../images/Link02.png) no-repeat top center;background-size:100%}
.Nav ul li:nth-child(3) a{background:url(../images/Link03.png) no-repeat top center;background-size:100%}




#Block06{margin-bottom:2%}
.SubNav{position:relative}
.SubNav ul{display:flex;background:url(../images/LinkGroup.png) no-repeat top center;background-size:100%;width:960px;height:215px}
.SubNav ul li{width:20%}
.SubNav ul li a{text-indent:-9999px;display:block;width:100%;height:215px}
.HotPorduct{background:#ffd500;padding:3% 0;border-radius:30px 30px 0 0;margin-bottom:5em;position:relative}
.HotPorduct:after{content:"";background:url(../images/PdBottom.png) no-repeat bottom center;position:absolute;bottom:-29px;left:0;right:0;width:100%;height:30px;background-size:100%}
.HotPorduct h3 span{color:#0068b7;font-weight:700;font-size:2.5625rem;position:relative}
.HotPorduct h3 span:before{content:"";background:url(../images/BannerLeft.png) no-repeat top center;background-size:100%;width:85px;height:63px;position:absolute;left:-100px;top:-5px}
.HotPorduct h3 span:after{content:"";background:url(../images/BannerRight.png) no-repeat top center;background-size:100%;width:85px;height:63px;position:absolute;right:-100px;top:-5px}
.HotPorduct h3{text-align:center;margin-bottom:1%}
.MiddleBg .Section:nth-child(odd) .HotPorduct{background:#0886c2}
.MiddleBg .Section:nth-child(odd) .HotPorduct:after{background:url(../images/PdBottom2.png) no-repeat bottom center;background-size:100%}
.MiddleBg .Section:nth-child(odd) .HotPorduct h3 span:before{background:url(../images/BannerLeft01.png) no-repeat top center}
.MiddleBg .Section:nth-child(odd) .HotPorduct h3 span:after{background:url(../images/BannerRight01.png) no-repeat top center}
.MiddleBg .Section:nth-child(odd) .HotPorduct h3 span{color:#fff}
.HotPorduct:after{content:"";background:url(../images/PdBottom.png) no-repeat bottom center;position:absolute;bottom:-29px;left:0;right:0;width:100%;height:30px;background-size:100%}
.HotPorduct h3 span{color:#0068b7;font-weight:700;font-size:2.5625rem;position:relative}
.HotPorduct h3 span:before{content:"";background:url(../images/BannerLeft.png) no-repeat top center;background-size:100%;width:85px;height:63px;position:absolute;left:-100px;top:-5px}
.HotPorduct h3 span:after{content:"";background:url(../images/BannerRight.png) no-repeat top center;background-size:100%;width:85px;height:63px;position:absolute;right:-100px;top:-5px}
.HotPorduct h3{text-align:center;margin-bottom:1%}
#Block07 .HotPorduct,#Block08 .HotPorduct{margin-bottom:0}
.wow:first-child{visibility:hidden}
.wow+.wow{visibility:hidden}
.FlyNav{position:fixed;top:200px;right:50%;z-index:20;margin:0;font-size:1rem;width:122px;margin:0 -48% 0 0}
.FlyNav ul{position:relative;background-color:rgba(255,178,51,.8)}
.FlyNav ul:before{content:"";height:100px;position:absolute;top:-87px;left:9px;background:url(../images/Rbtn_top.png) no-repeat top;width:102px;background-size:100%;text-indent:-9999px}
.FlyNav ul li a{display:block;padding:8%;text-align:center;color:#303e63;text-decoration:none;background-color:rgba(255,178,51,.8)}
.FlyNav ul li a:hover{background-color:rgba(255,178,51,1)}
.FlyNav ul li{position:relative;margin-bottom:1px}
#Block04{margin-bottom:3%}
#Block01 .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}
#Block01 .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;-o-transition-property:-o-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform,left,top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform,left,top;-moz-transition-duration:0s;-moz-transform:translate3d(0,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform,left,top;-o-transition-duration:0s;-o-transform:translate3d(0,0,0);-o-transition-timing-function:ease;-o-transform:translate(0,0);-ms-transition-property:-ms-transform,left,top;-ms-transition-duration:0s;-ms-transform:translate3d(0,0,0);-ms-transition-timing-function:ease;-webkit-transition-property:left,top,-webkit-transform;transition-property:left,top,-webkit-transform;-o-transition-property:transform,left,top;transition-property:transform,left,top;transition-property:transform,left,top,-webkit-transform;transition-duration:0s;transform:translate3d(0,0,0);transition-timing-function:ease;-webkit-box-sizing:content-box;box-sizing:content-box}
#Block01 .swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
#Block01 .swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;flex-wrap:wrap}
#Block01 .swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}
#Block01 .swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;-ms-flex-negative:0;flex-shrink:0;height:100%;position:relative;width:100%}
#Block01 .swiper-slide img{width:100%;height:auto}
#Block01 .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}
#Block01 .swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-o-transition-property:-o-transform;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}
#Block01 .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
#Block01 .swiper-container_d .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
#Block01 .swiper-container_e .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
#Block01 .swiper-pagination{text-align:center;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10;bottom:inherit;width:100%;margin-top:4px}
#Block01 .swiper-pagination.swiper-pagination-hidden{opacity:0}
#Block01 .swiper-pagination-bullet{width:15px;height:15px;display:inline-block;border-radius:100%;background:#fffbfd}
#Block01 .swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
#Block01 .swiper-slide-active{z-index:6}
button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}
#Block01 .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}
#Block01 .swiper-pagination-white .swiper-pagination-bullet{background:#fff}
#Block01 .swiper-pagination-bullet-active{opacity:1;background:#ccc}
#Block01 .swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}
#Block01 .swiper-pagination-black .swiper-pagination-bullet-active{background:#000}
#Block01 .swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
#Block01 .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}
#Block01 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}
#Block01 .swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}
#Block01 .swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}
#Block01 .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}
#Block01 .swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}
.card,.go_bt{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.card:hover,.go_bt:hover{-webkit-transform:scale(.95);-moz-transform:scale(.95);-ms-transform:scale(.95);-o-transform:scale(.95);transform:scale(.95)}
.card-c1{border-radius:10px}
.BankList{background-color:#fff;padding:2% 3.5%}
.BankList li{float:left;margin:0 1%}
@keyframes move_wave{
0%{transform:translateX(0) translateZ(0) scaleY(1)}
50%{transform:translateX(-25%) translateZ(0) scaleY(.55)}
100%{transform:translateX(-50%) translateZ(0) scaleY(1)}
}
.waveWrapper{overflow:hidden;position:absolute;left:0;right:0;bottom:0;top:0;margin:auto}
.waveWrapperInner{position:absolute;width:100%;overflow:hidden;height:100px;bottom:-1px}
.bgTop{z-index:15;opacity:.5}
.bgMiddle{z-index:10;opacity:.75}
.bgBottom{z-index:5}
.waveAnimation .waveTop{animation:move_wave 8s linear infinite;background:url(../images/WaveTop.png);background-size:50% 100px;animation-delay:1s}
.waveAnimation .waveMiddle{animation:move_wave 10s linear infinite;background:url(../images/WaveMid.png);background-size:50% 120px}
.waveAnimation .waveBottom{animation:move_wave 15s linear infinite;background:url(../images/WaveBot.png);background-size:50% 100px}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.WorkPlace3{width:600px;bottom:-110px;margin:0;z-index:6;position:absolute;left:0;z-index:20}
.Men3{background:url(../images/Step01.png) no-repeat;width:200px;height:148px;position:absolute;right:0;bottom:94px;animation:animatedBackground3 1s steps(2) infinite;-webkit-animation:animatedBackground3 1s steps(2) infinite}
@-webkit-keyframes animatedBackground3{
0%{background-position:0 0}
100%{background-position:-400px 0}
}
@keyframes animatedBackground3{
0%{background-position:0 0}
100%{background-position:-400px 0}
}
.Work3{-webkit-animation:work3 18s linear infinite;animation:work3 18s linear infinite;filter:FlipH;position:relative;width:53px;height:100px;transform-origin:0 0}
@-webkit-keyframes work3{
0%{left:0;-webkit-transform:scaleX(1)}
49.5%{left:520px;-webkit-transform:scaleX(1)}
50%{left:520px;-webkit-transform:scaleX(-1)}
99.5%{left:0;-webkit-transform:scaleX(-1)}
100%{left:0;-webkit-transform:scaleX(1)}
}
@keyframes work3{
0%{left:0;-moz-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1) translate(0,)}
49.5%{left:520px;-moz-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}
50%{left:520px;-moz-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}
99.5%{left:0;-moz-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}
100%{left:0;-moz-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}
}
.vibration-play{-webkit-animation-name:vibration-play;animation-name:vibration-play;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-transform:translate(0,-5px);transform:translate(0,-5px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
@-webkit-keyframes vibration-play{
0%{-webkit-transform:translate(0,-5px)}
100%{-webkit-transform:translate(0,0)}
}
@keyframes vibration-play{
0%{transform:translate(0,-5px)}
100%{transform:translate(0,0)}
}
.uptodown-play{-webkit-animation-name:uptodown-play;animation-name:uptodown-play;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-transform:translate(0,-10px);transform:translate(0,-10px)}
@-webkit-keyframes uptodown-play{
0%{-webkit-transform:translate(0,-10px)}
100%{-webkit-transform:translate(0,0)}
}
@keyframes uptodown-play{
0%{transform:translate(0,-10px)}
100%{transform:translate(0,0)}
}
@media screen and (max-width:768px){
img{width:100%;height:auto}
.Wrapper{width:100%;margin:auto}
#Block01 .Wrapper{overflow:hidden}
.Ball,.People1,.People2{display:none}
.SliderBlockBg{margin:0 auto 0;width:90%}
.SliderBlock{width:100%;margin:0 auto 20vmin}
.flexblock{flex-direction:column}
h1{width:90%;background-size:100%;height:0;padding-bottom:65%}
.waveWrapper{display:none}
#Block01{background:#f5f5f5 url(../images/Wave.png) repeat-x bottom center;background-size:171%}
.bg_02{background-size:500%}
.NavActive ul{flex-direction:column;position:relative}
.NavActive ul li a{width:100%;height:0;padding-bottom:51%}
.NavActive ul li{width:90%;margin:auto;height:0;padding-bottom:51%}
.LinkApp ul{flex-direction:column;padding:5%}
.LinkApp ul li a{width:100%;height:0;padding-bottom:81%;margin:0}
.LinkApp ul li:nth-child(2){margin-left:0}
.LinkApp ul li:nth-child(2) a{margin:0}
.LinkApp ul li:nth-child(1){width:30%;height:0;padding:0 0 39% 0;background-size:100%;margin:auto;position:absolute;right:0;top:-10vmin}
.Nav ul li{width:90%;margin:auto}
.Nav ul li a{width:100%;height:0;padding-bottom:94%}

/*週五活動 .Nav ul li:nth-child(2) a{background:url(../images/Link04_m.png) no-repeat top center;background-size:100%;width: 100%; margin-top: 0;}*/

.Nav ul{flex-direction:column}
.HotPorduct h3{width:100%;overflow:hidden}
.HotPorduct h3 span{font-size:9vmin;color:#fff}
.HotPorduct h3 span:after{right:-15vmin;top:2vmin;width:40px;height:30px}
.HotPorduct h3 span:before{left:-15vmin;top:2vmin;width:40px;height:30px}
.HotPorduct:after{bottom:-3vmin}
.HotPorduct{margin-bottom:2em}
.MiddleBg .Section:nth-child(odd) .HotPorduct:after{background-size:100%}
.MiddleBg .Section:nth-child(odd) .HotPorduct h3 span:before{background-size:100%}
.MiddleBg .Section:nth-child(odd) .HotPorduct h3 span:after{background-size:100%}
.SubNav ul{flex-flow:wrap;width:90%;height:0;padding-bottom:64%;background:url(../images/LinkGroup_m.png) no-repeat top center;background-size:100%;margin:auto}
.SubNav ul li a{padding-bottom:140%;height:0;width:100%}
.SubNav ul li{width:25%}
.FlyNav{width:100%;top:inherit;bottom:0;right:inherit;margin:0;font-size:.9rem}
.FlyNav ul:before{display:none}
.FlyNav ul{border-top:2px solid #1f1c1d;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;padding:0;border-radius:inherit;background-color:rgba(254,213,212,.7)}
.FlyNav ul li{border-bottom:2px solid #1f1c1d;-webkit-box-flex:1;-ms-flex:1 1 25%;flex:1 1 25%}
.FlyNav ul li:last-child{border-bottom:2px solid #1f1c1d}
.FlyNav ul li a{word-break:break-word}
}