@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
*{font-family: 'Noto Sans TC', sans-serif,Arial, Helvetica;}
.fb-like.fb_iframe_widget{position:absolute;left:50%; top:53px; margin:10px 0px 0px 520px}
a{ text-decoration:none}
a img{ display:block}
body{ background-image:url(images/all_bg01.jpg); background-position:center top; background-attachment: fixed; background-color:#01e6b4}
#pc{ display:block; width:1200px; margin:0px auto; position:relative}
#mo{ display: none}
.keyview{ width:1200px; margin:50px auto 10px auto}
h1{text-indent:-999999px; background-image:url(images/hitag01.png); width:386px; height:201px; position:absolute; left:20px; top:35px}
.people{ margin:0px 0px 0px 377px}
.keyview span{ display:block; position:absolute;}
.keyview span.dateactivity{ top:290px; left:90px}
.keyview span.discountactivity{ top:440px; left:100px}
#zone01{ position:relative; width:1100px; margin:0px auto}
#zone01 h2{text-indent:-999999px; background-image: url(images/zone01_tiltle01.png); width:310px; height:66px; position:absolute; top:-60px;}
.seall{ width:600px; margin:0px; padding:30px 0px}
.seall a{ display: inline-block; margin:10px 10px 0px 0px }
.workerad{ position:absolute; right:10px; top:30px}
#zone02{ width:1200px; margin:30px auto; position:relative}
#zone02 h2{text-indent:-999999px; background-image: url(images/zone02_tiltle01.png); width:1100px; height:93px; margin:0px auto }
#zone02 .more{ position: absolute; top:-20px; right:360px; display:block}
#zone02 ul{ list-style:none; width:1200px; margin:30px auto; text-align:center}
#zone02 ul li{ margin:10px -2px 40px -2px; display:inline-block; vertical-align:text-top}
#zone02 ul li a{ display:block}
#zone02 ul li:nth-child(odd) a{ margin-top:30px }
#zone03{ width:1200px; margin:30px auto; position:relative}
#zone03 h2{text-indent:-999999px; background-image: url(images/zone03_tiltle01.png); width:599px; height:68px; margin:0px 0px 0px 100px }
#zone03 div{ background-image: url(images/zone03_bg01.png); width:822px; height:370px; margin:30px 0px 0px 100px }
#zone03 div a{ display:block; float:left; }
#zone03 div a.pic01{margin:5px 5px 5px 20px}
#zone03 div a.pic02{margin:5px 5px 5px 90px}
#zone03 .more{position: absolute; top:380px; right:100px; display:block}
#zone04{ width:1200px; margin:100px auto 30px auto; position:relative; text-align:center; vertical-align:top}
#zone04 h2{text-indent:-999999px; background-image: url(images/zone04_tiltle01.png); width:692px; height:59px; margin:0px 0px 0px 100px }
#zone04 div{ margin:0px 0px 0px 100px}
#zone04 div a{ display: block; margin:30px 25px 0px 0px; float:left}
#zone04 div a:nth-child(even){ display:block; margin:100px 0px -30px 25px }
#zone05{ width:1200px; margin:100px auto 30px auto; position:relative; }
#zone05 h2{text-indent:-999999px; background-image: url(images/zone05_tiltle01.png); width:263px; height:151px; margin:20px auto 20px 50px}
#zone05 div{ width:1200px; height:700px; position:relative; background-image: url(images/zone_bg01.png); background-repeat:no-repeat; background-position:center -80px}
#zone05 div a{ position:absolute; width:25%;height:0;padding-bottom:21.75%;clip-path: polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);-webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); display:block;}
#zone05 div a img{ display:block; width:100%}
#zone05 div a.col01{background:#fff; top:40px ; left:100px}
#zone05 div a.col02{background:#00ffae; top:-100px ; left:340px}
#zone05 div a.col03{background:#00fff6; top:40px ; left:580px}
#zone05 div a.col04{background:#79ffee; top:-100px ; left:820px}
#zone05 div a.col05{background:#00fff6;top:320px ; left:100px}
#zone05 div a.col06{background:#79ffee; top:180px ; left:340px}
#zone05 div a.col07{background:#fff; top:320px ; left:580px}
#zone05 div a.col08{background:#00ffae; top:180px ; left:820px}
#zone06{ text-align:center}
#zone06 h2{text-indent:-999999px; background-image: url(images/zone06_tiltle01.png); width:765px; height:316px; margin:20px auto}
#zone06 a{ display:inline-block; margin:10px}
#zone07{ text-align:center; margin:80px 0px 30px 0px }
#zone07 h2{text-indent:-999999px; background-image: url(images/zone07_tiltle01.png); width:229px; height:55px; margin:20px auto}
#zone07 a{ display:inline-block; margin:10px}
.hrall{ background-image:url(images/hr.png); width:1116px; height:17px; margin:60px auto; border:0px}
#zone08{ text-align:center; margin:80px 0px 30px 0px }
#zone08 h2{text-indent:-999999px; background-image: url(images/zone08_tiltle01.png); width:525px; height:253px; margin:20px auto}
#zone08 iframe{ margin:30px auto; display:block}
#zone08 a{ display:inline-block; width:210px; padding:5px; margin:10px; border:2px solid #000000; background-color:#FFFFFF}
#zone08 a img{ display:block; width:100%}
#footer{ text-align:center; background-color:#39c4e1; padding:15px 0px 20px 0px; color:#FFFFFF; border-top:#FFFFFF 2px solid}
@media screen and ( max-width: 736px ){
#pc{ display:none}
#mo{ display:block; width:100%; overflow:hidden}
.fb-like.fb_iframe_widget{ position:absolute; left:auto; right:1% ; top:53px; margin:0px; z-index:99999999}
body{ background-image: none; background-position:center top; background-attachment: fixed; background-color:#3ac4e2}
#mo img{ display:block; width:100%}
#mo .he50{ width:50%; float:left; display:block}
#mo .he100{ width:100%; clear:both; display:block}
#mozone01{}
#mozone01 ul{ width:100%; text-align:center; margin:0.8em auto}
#mozone01 ul li{ display:inline-block; margin:0.2em 0.2em}
#mozone01 ul li.tap01{ width:28.809523809%}
#mozone01 ul li.tap02{ width:51.428571428%}
#mozone01 ul li.tap03{ width:44.761904761%}
#mozone01 ul li.tap04{ width:44.761904761%}
#mozone01 ul li.tap05{ width:58.095238095%}
#mozone01 ul li.tap06{ width:50.476190476%}
#mozone01 ul li a{ display:block}

.mozone02more{ margin:1em auto}
#mozone05{ width:100%; margin:1em auto; position:relative}
#mozone05 a{ position: relative; width:50%;height:0;padding-bottom:43.5%;clip-path: polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);-webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); display:block;}
#mozone05 a img{ position:absolute;}
#mozone05 a.col01{background:#fff; float:left;  margin:2% 0px 0px 5%}
#mozone05 a.col02{background:#00ffae; margin:25% 5% 0px 45%}
#mozone05 a.col03{background:#00fff6;float:left;  margin:-20% 0px 0px 5%}
#mozone05 a.col04{background:#79ffee; margin:3.5% 5% 0px 45%}
#mozone05 a.col05{background:#00ffae;float:left;  margin:-20% 0px 0px 5%}
#mozone05 a.col06{background:#FFF; margin:3.5% 5% 0px 45%}
#mozone05 a.col07{background:#79ffee;float:left;  margin:-20% 0px 0px 5%}
#mozone05 a.col08{background:#00fff6; margin:3.5% 5% 0px 45%}

.video-container {position: relative; margin:0px 3%;padding-bottom: 56.25%;padding-top: 1em;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#mozone08{ text-align:center}
#mozone08 a{ display: inline-block; margin:2% 1%; width:42%; padding:1%; background-color:#FFFFFF; border:1px #000000 solid}

#footer{ font-size:0.85em; text-align:center; background-color:#39c4e1; padding:1em 0px 1.5em 0px; color:#FFFFFF; border-top:#FFFFFF 2px solid}
}