@import url("https://fonts.googleapis.com/css2?family=Cantata+One&family=Lemon&display=swap");
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;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*************************************************************/
body {
  padding: 0;
  margin: 0 auto;
  max-width: 1920px;
  font-family: "Helvetica Neue", "Microsoft JhengHei", Helvetica, Arial, "Heiti TC", "Apple LiGothic Medium", sans-serif;
  color: #555;
  height: auto;
  font-size: 1em;
  position: relative;
}

h1, h2, h3, h4, h5, h6, ul, ol, li {
  line-height: 150%;
  font-weight: normal;
}

small {
  font-size: 0.875rem;
  color: #555;
  line-height: 135%;
  display: inline-block;
}

hr {
  border: none;
  border-bottom: dotted 3px #ccc;
  margin: 5% 0;
  width: 100%;
  display: block;
}

p {
  margin: 3% 0;
  line-height: 150%;
}

br {
  margin: 0;
}

img {
  vertical-align: middle;
}

a, a:link, a:visited {
  color: #555;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a:hover {
  color: #111;
}

iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

form {
  margin: 10px 0;
}
form li {
  position: relative;
}
form .routeeffect {
  position: relative;
}
form .routeeffect input {
  position: relative;
  background: none;
  z-index: 1;
}
form .copyin, form .select .gridbox {
  font-size: 0.875em;
  color: #555;
  padding: 0 10px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
form .select {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  z-index: 3;
}
form .select .gridbox {
  display: inline-block;
  margin: 0 2px;
}
form .select span {
  font-size: 0.875em;
  padding-left: 5px;
}
form .blockback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

label {
  display: table;
  width: 100%;
}
label span, label input {
  display: table-cell;
  width: 100%;
}

input, select, textarea, input[type=file] + label {
  font-family: "Helvetica Neue", "Microsoft JhengHei", Helvetica, Arial, "Heiti TC", "Apple LiGothic Medium", sans-serif;
  font-size: 0.938rem;
  background: none;
  width: 97%;
  border: solid 1px #888;
  padding: 8px 1.5%;
  margin: 3px 0 1px 0;
  border-radius: 5px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
}

select {
  width: 100%;
  padding: 6px 1%;
}

textarea {
  height: 70px;
}

input[type=submit], input[type=button] {
  font-size: 1em;
  margin: 20px 0;
  width: 100%;
  padding: 2% 1.5%;
}

input[type=radio], input[type=checkbox] {
  margin: 0 5px;
  width: 22px;
  border: hidden;
}

input[type=file] {
  position: absolute;
  display: none;
}

input[type=file] + label {
  color: #999;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

button {
  font-family: "Helvetica Neue", "Microsoft JhengHei", Helvetica, Arial, "Heiti TC", "Apple LiGothic Medium", sans-serif;
  font-size: 1em;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  cursor: pointer;
}

address {
  font-style: normal;
}

.btn-inbox {
  position: relative;
  margin: 30px auto;
  font-size: 0.875rem;
  color: #888;
  text-align: center;
  width: 100%;
  height: 50px;
}

.btn-Pokayoke, .btn-main, .btn-main2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #e69271;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
}

.btn-Pokayoke {
  display: none;
  z-index: 2;
  cursor: no-drop;
  background: #ffffff;
}

.btn-main, .btn-main2 {
  z-index: 1;
  cursor: pointer;
}

.btn-main:hover {
  -webkit-box-shadow: 0 0 10px #ccc;
          box-shadow: 0 0 10px #ccc;
  background: #fff;
}

.dotlist {
  display: block;
}
.dotlist li {
  display: table;
}
.dotlist li small, .dotlist li span, .dotlist li img {
  display: table-cell;
}
.dotlist li small {
  padding: 0 5px;
  color: #f7b465;
  font-weight: bold;
}
.dotlist li img {
  width: 22px;
  margin: 0 7px;
}
.dotlist li span {
  width: 100%;
}

.header, .article, .footer {
  position: relative;
  display: table;
  width: 100%;
  margin: 0 auto;
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
}

.header {
  height: 135px;
  z-index: 8;
}

.article {
  z-index: 6;
}

.footer {
  z-index: 7;
}

.footer-info {
  position: relative;
  color: #fff;
}
.footer-info h4 {
  font-size: 20px;
  font-family: "Noto Sans TC";
}
.footer-info .grid1, .footer-info .grid2 {
  position: relative;
  margin: auto;
  max-width: 1000px;
}
.footer-info .grid1 {
  margin: 100px auto;
  font-size: 14px;
  padding: 0 50px;
}
.footer-info .grid1 .column .child a {
  color: #fff;
}
.footer-info .grid1 .column1, .footer-info .grid1 .column2, .footer-info .grid1 .column3 {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}
.footer-info .grid1 .column1 a, .footer-info .grid1 .column2 a, .footer-info .grid1 .column3 a {
  color: #fff;
}
.footer-info .grid1 .column1 img {
  width: 80px;
  text-align: right;
  padding-top: 20px;
}
.footer-info .grid1 .column2 {
  width: 50%;
  text-shadow: 0px 3px 8px #052531;
}
.footer-info .grid1 .column2 address, .footer-info .grid1 .column2 span {
  display: inline-block;
}
.footer-info .grid1 .column2 span {
  cursor: pointer;
  border: 1px solid #fff;
  padding: 0 3px;
  margin-right: 5px;
  border-radius: 6px;
}
.footer-info .grid1 .column2 span:hover {
  background: #12c5ee;
}
.footer-info .grid1 .column2 .qrcode {
  margin: auto;
}
.footer-info .grid1 .column2 .qrcode a {
  position: relative;
  width: 120px;
  margin: 15px 25px 15px 0;
  display: inline-block;
}
.footer-info .grid1 .column2 .qrcode a img {
  width: 100%;
}
.footer-info .grid1 .column3 {
  text-align: center;
  width: 30%;
}
.footer-info .grid1 .column3 img {
  padding: 20px 10px;
  opacity: 0;
  width: 50px;
}
.footer-info .grid1 .infoshow2 {
  display: none;
}
.footer-info .grid1 .infoshow2 li {
  display: block;
  margin: 30px auto;
}
.footer-info .grid1 .infoshow2 li img {
  display: block;
  margin: 5px auto;
  width: 40px;
  -webkit-filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.55));
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.55));
}
.footer-info .grid2 {
  text-align: center;
  font-size: 0.813em;
  padding: 10px;
  color: #fff;
}
.footer-info .grid3 {
  position: relative;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #fff;
  display: none;
  height: 400px;
  z-index: 10;
  -webkit-box-shadow: 0 2px 10px #555;
          box-shadow: 0 2px 10px #555;
}

.page-head {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.slide {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}

.head-group {
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 7;
  right: 0;
  left: 0;
}

.logo {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 240px;
  z-index: 1;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.logo a {
  display: block;
}
.logo a:hover big {
  letter-spacing: 2px;
}
.logo .img, .logo big, .logo small {
  -webkit-filter: blur(5px);
          filter: blur(5px);
  opacity: 0;
  position: absolute;
}
.logo img {
  -webkit-transition: 1.5s all;
  transition: 1.5s all;
}
.logo .img {
  left: -30px;
  top: 0px;
  width: 70px;
  -webkit-transition-timing-function: cubic-bezier(0.12, 0.36, 0.17, 1.14);
          transition-timing-function: cubic-bezier(0.12, 0.36, 0.17, 1.14);
}
.logo .title {
  left: 80px;
  opacity: 0;
  position: absolute;
  width: 90px;
  top: 40px;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.logo .book {
  left: 200px;
  opacity: 0;
  position: absolute;
  width: 62px;
  top: 5px;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.logo big, .logo small, .logo span {
  font-family: "Noto Sans TC";
  color: #fff;
  left: 80px;
  -webkit-transition-timing-function: cubic-bezier(0, 0.76, 0.31, 1.59);
          transition-timing-function: cubic-bezier(0, 0.76, 0.31, 1.59);
  -webkit-transition: 1s all;
  transition: 1s all;
}
.logo big {
  top: 40px;
  font-weight: 500;
  font-size: 1.25em;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.logo small {
  font-size: 1rem;
  top: 10px;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.logo span {
  display: none;
  position: absolute;
  font-size: 1em;
  top: 10px;
  left: 45px;
  color: #20528f;
  font-family: "Cantata One", serif;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

.SNSs, .SNSs2 {
  text-align: center;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.SNSs li, .SNSs2 li {
  padding: 1px;
  background: #1fbbd5;
  color: #fff;
  font-size: 13px;
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
  border-radius: 50%;
}
.SNSs li img, .SNSs2 li img {
  width: 100%;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  opacity: 1;
}
.SNSs li:hover, .SNSs2 li:hover {
  background: #f09467;
}
.SNSs .li:hover, .SNSs2 .li:hover {
  -webkit-transform: rotateZ(360deg);
      -ms-transform: rotate(360deg);
          transform: rotateZ(360deg);
}
.SNSs a, .SNSs2 a {
  position: relative;
  color: #fff;
  display: block;
}
.SNSs a span, .SNSs2 a span {
  display: block;
  line-height: 124%;
  margin: 2px auto;
  width: 30px;
}
.SNSs a div, .SNSs2 a div {
  position: absolute;
  height: 1px;
  width: 80%;
  left: 0;
  right: 0;
  margin: auto;
  top: 17px;
  background: #fff;
}

.SNSs {
  margin: 50px auto;
}
.SNSs li {
  display: inline-block;
  margin: 5px;
  width: 40px;
  height: 40px;
}

.SNSs2 {
  position: fixed;
  right: 17px;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
  z-index: 102;
}
.SNSs2 li {
  margin: 7px auto;
  width: 38px;
  height: 38px;
}

.music {
  position: fixed;
  left: 30px;
  bottom: 30px;
  width: 26px;
  z-index: 99;
}
.music img {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
}
.music .off {
  display: none;
}

.gotop, .godown {
  position: fixed;
  text-align: center;
  left: 10px;
  width: 60px;
  height: 60px;
  bottom: -62px;
  border: 1px solid #fff;
  z-index: 10000000;
  background: #1fbbd5;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
  border-radius: 50%;
}
.gotop img, .godown img {
  margin-top: 7px;
  width: 72%;
  opacity: 0;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
  -webkit-transform: rotateZ(-110deg);
      -ms-transform: rotate(-110deg);
          transform: rotateZ(-110deg);
}
.gotop span, .godown span {
  position: relative;
  top: -50px;
  opacity: 0;
  font-size: 13px;
  padding: 3px 5px;
  color: #fff;
  background: #e69271;
  border-radius: 12px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.gotop:hover {
  opacity: 1;
}

.msg {
  text-align: center;
  margin: 25px auto;
}
.msg img {
  width: 60px;
  margin: 15% 0;
}

.page_note, .inpagenote {
  max-width: 400px;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  width: 98%;
  padding: 5px 10px;
  margin: 0 auto;
  background: rgba(50, 50, 50, 0.7);
  border-radius: 15px;
}

.inpagenote {
  margin-top: 200px;
  display: none;
}

.popup_box {
  display: none;
  text-align: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 103;
}
.popup_box .block {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(20, 20, 20, 0.8);
}
.popup_box .img, .popup_box video {
  position: absolute;
  top: 50px;
  margin: auto;
  left: 0;
  right: 0;
  max-width: 90%;
  max-height: 85%;
  border: 1px solid #fff;
  z-index: 2;
}
.popup_box video {
  max-width: 600px;
}
.popup_box .popupclose {
  position: absolute;
  text-align: center;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  line-height: 26px;
  background: #e69271;
  z-index: 3;
  border-radius: 20%;
}
.popup_box .popupclose img {
  width: 50%;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.popup_box .popupclose:hover {
  border-radius: 50%;
}
.popup_box .popupclose:hover img {
  -webkit-transform: rotateZ(180deg);
      -ms-transform: rotate(180deg);
          transform: rotateZ(180deg);
}

.popup_btn {
  display: none;
  color: #fff;
  text-align: center;
  position: fixed;
  top: 80px;
  width: 60px;
  right: -71px;
  overflow: hidden;
  z-index: 10;
}
.popup_btn img {
  width: 100%;
  -webkit-transition: 3s all;
  transition: 3s all;
}
.popup_btn span {
  line-height: 115%;
  font-size: 0.813em;
  width: 30px;
  top: 25%;
  margin: auto;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 9;
}

.popup_btn:hover {
  color: #fff;
}
.popup_btn:hover img {
  -webkit-transform: rotateZ(360deg);
      -ms-transform: rotate(360deg);
          transform: rotateZ(360deg);
}

.partnerbar {
  position: fixed;
  opacity: 0;
  text-align: center;
  padding: 15px 40px 15px 15px;
  width: 90%;
  max-width: 280px;
  right: -336px;
  background: #fff;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
  border-radius: 15px 0 0 15px;
  -webkit-box-shadow: 0 0 7px #333;
          box-shadow: 0 0 7px #333;
  z-index: 10;
}
.partnerbar div img {
  width: 150px;
}
.partnerbar small {
  color: #E6926F;
  display: block;
  margin: 10px auto;
}

.talkbar, .warningbar {
  position: fixed;
  width: 94%;
  padding: 15% 3%;
  top: 0;
  left: 0;
  height: 100%;
  text-align: center;
  z-index: 99999999;
  background: rgba(255, 255, 255, 0.7);
}
.talkbar span, .warningbar span {
  display: block;
  max-width: 400px;
  font-size: 0.875rem;
  color: #fff;
  margin: auto;
  padding: 10px;
  background: #49bacd;
  border-radius: 20px;
  -webkit-box-shadow: 0px 2px 2px #555;
          box-shadow: 0px 2px 2px #555;
}

.warningbar {
  display: none;
}

.errbar {
  color: red;
  font-size: 0.875rem;
  display: block;
}

.none {
  text-align: center;
  font-size: 0.875em;
  width: 100%;
  padding: 200px 0;
  color: #fff;
}
.none img {
  display: block;
  width: 20px;
  margin: 5px auto;
  opacity: 0.7;
}
.none span {
  margin: 5px;
}

.btnbox {
  display: block;
  text-align: center;
  width: 90%;
  margin: 5% auto;
  max-width: 200px;
  padding: 12px 5px;
  background: #fff;
  border: 3px dotted #54c1e6;
  border-radius: 30px;
  text-shadow: none;
}
.btnbox big {
  font-size: 1rem;
  margin-right: 5px;
  color: #54c1e6;
}

.btnbox:hover {
  border: 3px solid #54c1e6;
}

.btnbox2 {
  font-family: "Noto Sans TC";
  font-weight: 500;
  background: #1fbbd5;
  color: #fff;
  max-width: initial;
  border: none;
}

.btnbox2:hover {
  background: #2de1ff;
  color: #fff;
  border: none;
}

.onradio, .peopleeditbox .onradio {
  width: initial;
  font-size: 0.875rem;
  display: inline-block;
  padding: 5px 12px;
  margin: 5px 5px 5px 0;
  position: relative;
  text-align: center;
  border: 1px solid #1fbbd5;
  color: #007497;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  cursor: pointer;
}

.checked {
  color: #fff;
  background: #1fbbd5;
}

.confirming {
  color: red;
}

.opacityblock {
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.peoplelist {
  position: relative;
  width: 100%;
  display: table;
  font-size: 0.875rem;
  margin: 3px auto;
  background: #fff;
  border-radius: 5px;
}
.peoplelist span {
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 1;
  box-orient: vertical;
  vertical-align: middle;
  padding: 3px 1%;
  opacity: 1;
  text-align: center;
  float: left;
}
.peoplelist span img {
  display: inline-block;
  cursor: pointer;
  width: 15px;
  opacity: 0.5;
  margin: 0 5px;
}
.peoplelist span img:hove {
  opacity: 1;
}
.peoplelist .listbox1 {
  width: 5%;
}
.peoplelist .listbox2 {
  width: 17%;
}
.peoplelist .listbox3, .peoplelist .listbox4 {
  width: 25%;
}
.peoplelist .listbox5 {
  width: 18%;
}

.ordereditlist .peoplelist {
  border: 1px solid #ccc;
  margin: 5px auto;
  padding: 5px 0;
}

.addpeoplebtn, .insiderbtn {
  display: inline-block;
  margin: 10px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e69271;
  background: #e69271;
  font-size: 0.875rem;
  padding: 6px 20px;
  color: #fff;
  border-radius: 6px;
}

.insiderbtn {
  background: #1fbbd5;
  border: 1px solid #1fbbd5;
  margin: 10px 5px;
}

.peopleeditbox {
  display: none;
  max-width: 300px;
  width: 90%;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  margin: auto;
  background: #fff;
  padding: 15px;
  -webkit-box-shadow: 0 3px 8px #ababab;
          box-shadow: 0 3px 8px #ababab;
  border-radius: 15px;
  z-index: 100;
}

.completeinfo {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  display: none;
  width: 90%;
  padding: 3%;
  background: #fff;
  font-size: 0.938em;
  max-width: 500px;
  margin: auto;
  z-index: 9999;
  border-radius: 20px;
  -webkit-box-shadow: 0 5px 10px #3d6776;
          box-shadow: 0 5px 10px #3d6776;
}
.completeinfo ul {
  font-size: 0.875rem;
  margin: 25px auto;
}
.completeinfo ul li {
  position: relative;
  display: block;
  margin: 8px auto;
  padding: 5px 0;
  -webkit-box-shadow: 0 1px 6px #ccc;
          box-shadow: 0 1px 6px #ccc;
  border-radius: 6px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.completeinfo ul li .table {
  display: table;
  width: 100%;
}
.completeinfo ul li .child {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}
.completeinfo ul li .child0 {
  width: 14%;
  font-family: "Noto Sans TC";
  font-weight: 500;
  font-size: 18px;
  border-right: 1px dotted #ccc;
}
.completeinfo ul li .child1 {
  cursor: pointer;
  text-align: left;
  width: 38%;
  border-right: 1px dotted #ccc;
}
.completeinfo ul li .child2 {
  width: 25%;
  border-right: 1px dotted #ccc;
}
.completeinfo ul li .child3 {
  width: 23%;
}
.completeinfo ul li .child4 {
  border-top: 1px dotted #ccc;
  display: none;
  padding: 15px;
}
.completeinfo ul li .child5 {
  color: #fff;
  display: none;
  margin: 15px;
  background: #eb9676;
  border-radius: 6px;
}
.completeinfo ul li .child5 span {
  display: block;
  padding: 10px;
}
.completeinfo ul li .child5 span small {
  color: #fff;
  font-size: 85%;
}
.completeinfo ul li .child5 hr {
  border-bottom: 1px dashed #fff;
  margin: 6px 0;
  opacity: 0.5;
}
.completeinfo ul li:hover {
  -webkit-box-shadow: 0 0 9px #999;
          box-shadow: 0 0 9px #999;
}
.completeinfo ul .li {
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: default;
}
.completeinfo ul .li .child0 {
  font-size: inherit;
  font-family: "Helvetica Neue", "Microsoft JhengHei", Helvetica, Arial, "Heiti TC", "Apple LiGothic Medium", sans-serif;
}
.completeinfo ul .li:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.completeinfo form {
  margin: 15px auto;
}
.completeinfo form input[type=radio], .completeinfo form input[type=checkbox] {
  display: none;
}
.completeinfo input, .completeinfo textarea {
  margin: 5px auto;
  border: 1px solid #1fbbd5;
  color: #1fbbd5;
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.completeinfo .account {
  display: none;
  margin: 0;
  position: absolute;
  -webkit-box-shadow: 0 2px 6px #ccc;
          box-shadow: 0 2px 6px #ccc;
  background: #fff;
  width: 150px;
  right: 5px;
  top: 5px;
  padding: 8px 10px;
  z-index: 9;
}
.completeinfo hr {
  border-bottom: 1px dashed #1fbbd5;
  margin: 15px 0;
}
.completeinfo small {
  display: block;
  font-size: 0.875rem;
}
.completeinfo h4, .completeinfo h5, .completeinfo big {
  display: block;
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.completeinfo h4 {
  margin: 15px auto;
  font-size: 1.125rem;
  color: #1fbbd5;
}
.completeinfo h4 span, .completeinfo h4 img {
  display: inline-block;
}
.completeinfo h4 span {
  line-height: 110%;
  vertical-align: middle;
}
.completeinfo h4 span span {
  font-size: 80%;
  font-weight: normal;
}
.completeinfo h4 img {
  width: 30px;
  margin-right: 15px;
  opacity: 0.7;
}
.completeinfo h5 {
  margin-top: 10px;
  font-size: 0.875rem;
}
.completeinfo big {
  font-size: 1rem;
}
.completeinfo .controlbtn {
  cursor: pointer;
  font-size: 13px;
  width: 90%;
  margin: 5px auto;
  padding: 0 2px;
  border: 1px solid #1fbbd5;
  border-radius: 5px;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.completeinfo .controlbtn:hover {
  border: 1px solid #e69271;
  -webkit-box-shadow: 0 0 5px #ccc;
          box-shadow: 0 0 5px #ccc;
}
.completeinfo .paidmark {
  background: #1fbbd5;
  color: #fff;
}
.completeinfo .paymark {
  border: 1px solid red;
}
.completeinfo .logoutbtn img {
  margin-right: 6px;
  width: 25px;
  opacity: 0.7;
}
.completeinfo .logoutbtn small {
  display: inline-block;
}
.completeinfo .infolist {
  display: table;
}
.completeinfo .tag, .completeinfo .text {
  display: table-cell;
  vertical-align: top;
}
.completeinfo .tag {
  width: 20px;
}

.client_message, .client_ticket {
  cursor: pointer;
  border: 1px solid #888;
  padding: 2px 10px;
  margin: 7px 0 7px;
  border-radius: 3px;
}

.ordermanagebtn {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 26px;
  font-size: 0.813em;
  border: 1px solid #fff;
  color: #fff;
  padding: 5px;
  cursor: pointer;
  border-radius: 6px;
  z-index: 9;
}

.ordermanagebtn:hover {
  background: #db8563;
}

.mainclosebtn {
  border: 2px solid #1fbbd5;
  display: none;
  position: fixed;
  cursor: pointer;
  text-align: center;
  bottom: 5%;
  right: 0;
  left: 0;
  width: 46px;
  height: 46px;
  line-height: 43px;
  background: #fff;
  margin: auto;
  border-radius: 50%;
  z-index: 9999;
}
.mainclosebtn img {
  width: 30%;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.mainclosebtn:hover img {
  -webkit-transform: rotateZ(180deg);
      -ms-transform: rotate(180deg);
          transform: rotateZ(180deg);
}

.markqty {
  cursor: pointer;
  text-align: center;
  display: inline-block;
  margin: 0 5px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  color: #fff;
  font-family: Century Gothic, Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  background: #5dbce1;
  vertical-align: middle;
  border-radius: 8px;
}

.calendar {
  display: table;
  width: 100%;
  margin: 15px auto;
  text-align: center;
  color: #adadad;
}
.calendar td {
  height: 36px;
  width: 14%;
  padding: 2px;
}
.calendar td big {
  padding-bottom: 0;
  border-bottom: none;
  line-height: 40px;
  height: 40px;
}
.calendar td a {
  display: block;
  background: #979797;
  border-radius: 5px;
}
.calendar td a small, .calendar td a big {
  display: block;
}
.calendar td a big {
  color: #fff;
}
.calendar td a small {
  font-size: 0.75rem;
  color: #fff;
  border-bottom: 1px solid #a9a9a9;
}

.changedatebox {
  display: none;
  opacity: 0;
  max-width: 350px;
}

.datebtnbox {
  text-align: center;
}
.datebtnbox div span, .datebtnbox div div {
  display: inline-block;
  vertical-align: middle;
}
.datebtnbox div span {
  width: 50px;
  background: #e9e9e9;
  border-radius: 5px;
  padding: 8px 0;
  font-family: "Noto Sans TC";
  font-weight: 500;
}
.datebtnbox div .datebtn {
  cursor: pointer;
  width: 20px;
}
.datebtnbox div .datebtn img {
  width: 100%;
}

.contactbox {
  display: none;
  text-align: center;
  z-index: 9998;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  font-size: 15px;
}
.contactbox div {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  width: 220px;
  padding: 20px;
  background: #fff;
  border-radius: 30px;
}
.contactbox div big {
  font-family: "Noto Sans TC";
  font-weight: 500;
  display: block;
  margin: 0 auto 15px;
  color: #1fbbd5;
}
.contactbox div img {
  width: 130px;
  display: block;
  margin: 10px auto;
}
.contactbox .contactbtn {
  cursor: pointer;
  display: none;
  color: #fff;
  padding: 5px 0;
  margin: 5px auto;
  background: #1fbbd5;
  border-radius: 6px;
}

.g_translate {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 8;
  opacity: 0.35;
}

.g_translate:hover {
  opacity: 1;
}

/***********nav&menu*************************************************/
.nav-dot {
  display: none;
  background: rgba(255, 255, 255, 0.95);
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  height: 60px;
  -webkit-box-shadow: 0 0 3px #555;
          box-shadow: 0 0 3px #555;
  z-index: 2;
}

.nav-cssbutton, .nav-close {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.nav-cssbutton {
  z-index: 11;
  background: #1fbbd5;
  border-radius: 0 0 0 50%;
}
.nav-cssbutton .grid1, .nav-cssbutton .grid2, .nav-cssbutton .grid3 {
  width: 20px;
  height: 3px;
  right: 15px;
  position: absolute;
  background: #fff;
}
.nav-cssbutton .grid1 {
  top: 15px;
}
.nav-cssbutton .grid2 {
  top: 23px;
}
.nav-cssbutton .grid3 {
  top: 31px;
}

.nav-close {
  display: none;
  z-index: 12;
}

.hovereven {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
}

.navhome, .nav, .minornav, .minornavhome {
  font-size: 0.875em;
  position: absolute;
  z-index: 3;
}
.navhome .mainnav li, .nav .mainnav li, .minornav .mainnav li, .minornavhome .mainnav li {
  position: relative;
}
.navhome .mainnav li img, .navhome .mainnav li span, .navhome .mainnav li div, .nav .mainnav li img, .nav .mainnav li span, .nav .mainnav li div, .minornav .mainnav li img, .minornav .mainnav li span, .minornav .mainnav li div, .minornavhome .mainnav li img, .minornavhome .mainnav li span, .minornavhome .mainnav li div {
  position: absolute;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.navhome .mainnav li div, .navhome .mainnav li img, .nav .mainnav li div, .nav .mainnav li img, .minornav .mainnav li div, .minornav .mainnav li img, .minornavhome .mainnav li div, .minornavhome .mainnav li img {
  right: 0;
  left: 0;
  margin: auto;
}
.navhome .mainnav li img, .nav .mainnav li img, .minornav .mainnav li img, .minornavhome .mainnav li img {
  opacity: 0;
  top: 10px;
  width: 40px;
  z-index: 2;
}
.navhome .mainnav li div, .nav .mainnav li div, .minornav .mainnav li div, .minornavhome .mainnav li div {
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
  width: 0;
  height: 0;
  background: #1fbbd5;
  border-radius: 10px;
  z-index: 1;
}
.navhome .mainnav li a, .nav .mainnav li a, .minornav .mainnav li a, .minornavhome .mainnav li a {
  position: relative;
  display: block;
  z-index: 3;
}

.navhome, .nav {
  top: 100px;
  width: 100%;
}
.navhome .mainnav, .nav .mainnav {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  top: 0;
}
.navhome .mainnav li, .nav .mainnav li {
  display: inline-block;
}
.navhome .mainnav li a, .nav .mainnav li a {
  display: block;
  min-width: 100px;
  height: 50px;
  color: #fff;
}
.navhome .mainnav li span, .nav .mainnav li span {
  padding: 15px 0;
  right: 0;
  left: 0;
  text-align: center;
}
.navhome .mainnav li:hover div, .nav .mainnav li:hover div {
  width: 100%;
  height: 50px;
}
.navhome .mainnav li:hover span, .nav .mainnav li:hover span {
  color: #fff;
}
.navhome .mainnav li:last-child a, .nav .mainnav li:last-child a {
  border-right: none;
}

.minornav, .minornavhome {
  position: fixed;
  text-align: center;
  width: 100%;
  max-width: 300px;
  top: 20px;
  bottom: 0;
  z-index: 11;
  right: 0;
  display: none;
}
.minornav a, .minornavhome a {
  min-width: 60px;
}
.minornav .menu_first, .minornavhome .menu_first {
  display: none;
  position: relative;
  z-index: 1;
  width: 90%;
  margin: auto;
}
.minornav .menu_first li, .minornavhome .menu_first li {
  display: inline-block;
  width: 45%;
  margin: 1%;
  border: 1px dashed #fff;
  border-radius: 15px;
}
.minornav .menu_first li a, .minornavhome .menu_first li a {
  display: block;
  color: #fff;
  height: 88px;
}
.minornav .menu_first li div, .minornavhome .menu_first li div {
  display: none;
}
.minornav .menu_first li img, .minornavhome .menu_first li img {
  opacity: 1;
  width: 46px;
  top: 10px;
}
.minornav .menu_first li span, .minornavhome .menu_first li span {
  position: relative;
  top: 60px;
}
.minornav .menu_first li:hover, .minornavhome .menu_first li:hover {
  background: #1fbbd5;
}

.nav-second {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.913em;
  padding: 3px 0;
  background: #efefef;
  color: #555;
}
.nav-second a:hover {
  color: #2c4f6c;
}
.nav-second ul li {
  display: inline-block;
  padding: 5px 10px;
}

/***********slides&effect********************************************/
.pagebg {
  position: absolute;
  right: 0;
  bottom: 0;
}
.pagebg img {
  width: 100%;
  min-width: 800px;
}

.pagebg2 {
  top: 0;
}

.backgroundimg, .banner .slides li, .gridbackground, .backgroundvideo {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100%;
  max-width: 1920px;
  height: 1280px;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 2;
}
.backgroundimg .block, .banner .slides li .block, .gridbackground .block, .backgroundvideo .block {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#258ac6), to(#006584));
  background-image: linear-gradient(to bottom, #258ac6, #006584);
}
.backgroundimg .bg, .backgroundimg .bgbox, .banner .slides li .bg, .banner .slides li .bgbox, .gridbackground .bg, .gridbackground .bgbox, .backgroundvideo .bg, .backgroundvideo .bgbox {
  position: absolute;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
  z-index: 1;
}
.backgroundimg .bg, .banner .slides li .bg, .gridbackground .bg, .backgroundvideo .bg {
  margin: auto;
  right: -100%;
  left: -100%;
  min-width: 1280px;
}

.backgroundimg {
  position: fixed;
}
.backgroundimg .bg {
  width: 100%;
  top: 0;
  min-width: 1920px;
}
.backgroundimg .effect1, .backgroundimg .effect2, .backgroundimg .effect3 {
  position: absolute;
  opacity: 0;
  min-width: initial;
  z-index: 2;
  -webkit-transition: 1.5s all;
  transition: 1.5s all;
}
.backgroundimg .effect1 {
  right: 1%;
  width: 350px;
  top: 130px;
}
.backgroundimg .effect1 img {
  position: absolute;
}
.backgroundimg .effect1 .effect1_1 {
  left: 0;
  width: 15%;
  top: 15px;
  z-index: 3;
  -webkit-animation: effect1 10s ease-out infinite;
          animation: effect1 10s ease-out infinite;
}
.backgroundimg .effect1 .effect1_2 {
  left: 15%;
  width: 16%;
  top: 60px;
  z-index: 1;
  -webkit-animation: effect1 13s ease-out infinite;
          animation: effect1 13s ease-out infinite;
}
.backgroundimg .effect1 .effect1_3 {
  left: 35%;
  width: 22%;
  top: 0px;
  z-index: 5;
  -webkit-animation: effect1 17s ease-out infinite;
          animation: effect1 17s ease-out infinite;
}
.backgroundimg .effect1 .effect1_4 {
  left: 55%;
  width: 16%;
  top: 20px;
  z-index: 2;
  -webkit-animation: effect1 15s ease-out infinite;
          animation: effect1 15s ease-out infinite;
}
.backgroundimg .effect1 .effect1_5 {
  left: 70%;
  width: 23%;
  top: 100px;
  z-index: 4;
  -webkit-animation: effect1 12s ease-out infinite;
          animation: effect1 12s ease-out infinite;
}
@-webkit-keyframes effect1 {
  0% {
    -webkit-transform: rotateZ(-5deg) translateX(5px) translateY(0px);
            transform: rotateZ(-5deg) translateX(5px) translateY(0px);
  }
  25% {
    -webkit-transform: rotateZ(3deg) translateY(-5px);
            transform: rotateZ(3deg) translateY(-5px);
  }
  50% {
    -webkit-transform: rotateZ(-4deg) translateX(-5px) translateY(7px);
            transform: rotateZ(-4deg) translateX(-5px) translateY(7px);
  }
  75% {
    -webkit-transform: rotateZ(5deg) translateY(-3px);
            transform: rotateZ(5deg) translateY(-3px);
  }
  100% {
    -webkit-transform: rotateZ(-5deg) translateX(5px) translateY(0px);
            transform: rotateZ(-5deg) translateX(5px) translateY(0px);
  }
}
@keyframes effect1 {
  0% {
    -webkit-transform: rotateZ(-5deg) translateX(5px) translateY(0px);
            transform: rotateZ(-5deg) translateX(5px) translateY(0px);
  }
  25% {
    -webkit-transform: rotateZ(3deg) translateY(-5px);
            transform: rotateZ(3deg) translateY(-5px);
  }
  50% {
    -webkit-transform: rotateZ(-4deg) translateX(-5px) translateY(7px);
            transform: rotateZ(-4deg) translateX(-5px) translateY(7px);
  }
  75% {
    -webkit-transform: rotateZ(5deg) translateY(-3px);
            transform: rotateZ(5deg) translateY(-3px);
  }
  100% {
    -webkit-transform: rotateZ(-5deg) translateX(5px) translateY(0px);
            transform: rotateZ(-5deg) translateX(5px) translateY(0px);
  }
}
.backgroundimg .effect2 {
  left: 1%;
  width: 100px;
  top: 160px;
  z-index: 2;
  -webkit-animation: effect 12s ease-out infinite;
          animation: effect 12s ease-out infinite;
}
.backgroundimg .effect3 {
  left: 1%;
  width: 80px;
  top: 250px;
  z-index: 1;
  -webkit-animation: effect 11s ease-out infinite;
          animation: effect 11s ease-out infinite;
}
@-webkit-keyframes effect {
  0% {
    -webkit-transform: rotateZ(-5deg) translateX(30px);
            transform: rotateZ(-5deg) translateX(30px);
  }
  25% {
    -webkit-transform: rotateZ(3deg);
            transform: rotateZ(3deg);
  }
  50% {
    -webkit-transform: rotateZ(-4deg) translateX(-10px);
            transform: rotateZ(-4deg) translateX(-10px);
  }
  75% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
  100% {
    -webkit-transform: rotateZ(-5deg) translateX(30px);
            transform: rotateZ(-5deg) translateX(30px);
  }
}
@keyframes effect {
  0% {
    -webkit-transform: rotateZ(-5deg) translateX(30px);
            transform: rotateZ(-5deg) translateX(30px);
  }
  25% {
    -webkit-transform: rotateZ(3deg);
            transform: rotateZ(3deg);
  }
  50% {
    -webkit-transform: rotateZ(-4deg) translateX(-10px);
            transform: rotateZ(-4deg) translateX(-10px);
  }
  75% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
  100% {
    -webkit-transform: rotateZ(-5deg) translateX(30px);
            transform: rotateZ(-5deg) translateX(30px);
  }
}
.backgroundimg .effect5, .backgroundimg .effect6 {
  opacity: 0;
  top: 100%;
  z-index: 3;
  -webkit-transition-timing-function: cubic-bezier(0.34, 0.82, 0.55, 1.26);
          transition-timing-function: cubic-bezier(0.34, 0.82, 0.55, 1.26);
  -webkit-transition: 1.5s all;
  transition: 1.5s all;
}
.backgroundimg .effect6 {
  margin-top: 740px;
}

.gridbackground {
  height: 100%;
}
.gridbackground .bg {
  width: 100%;
  top: -100%;
  bottom: -100%;
}

.backgroundimg_info {
  position: fixed;
  width: 100%;
  max-width: 1440px;
  bottom: 50px;
  z-index: 4;
}
.backgroundimg_info small {
  position: absolute;
  right: 20px;
  top: 0;
  padding: 2px 6px;
  color: #fff;
  background: #000;
  opacity: 0.1;
  border-radius: 10px;
}
.backgroundimg_info small a, .backgroundimg_info small i {
  display: block;
  font-style: normal;
  font-size: 0.75em;
}

.openinfo {
  position: absolute;
  text-align: center;
  top: 490px;
  width: 200px;
  margin: 0 auto;
  left: 0;
  right: 0;
  cursor: pointer;
}
.openinfo img, .openinfo span, .openinfo div {
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}
.openinfo img {
  top: 25px;
  width: 30px;
  z-index: 3;
}
.openinfo span {
  cursor: pointer;
  font-size: 0.875em;
  top: 60px;
  z-index: 2;
}
.openinfo div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 40px 50px;
  border-color: transparent transparent #ffffff transparent;
  z-index: 1;
}

.answer, .question, .m_answer, .m_question {
  text-align: center;
  height: 16px;
  width: 16px;
  line-height: 16px;
  display: none;
  cursor: pointer;
  border: 1px solid #000;
  font-size: 0.875em;
  opacity: 0.4;
  border-radius: 50%;
}

.grid_info {
  font-size: 0.875em;
  position: fixed;
  width: 280px;
  padding: 10px;
  bottom: 5px;
  right: -310px;
  background: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: 0px 2px 2px #555;
          box-shadow: 0px 2px 2px #555;
  z-index: 6;
}
.grid_info img {
  width: 20px;
  margin: 0 3px;
}
.grid_info h6 {
  font-size: 1.25em;
  padding-bottom: 10px;
  margin: 10px auto;
  text-align: center;
  border-bottom: 2px dotted #ccc;
}
.grid_info h6 img {
  margin: 0 10px;
}
.grid_info a {
  color: #2c4f6c;
}
.grid_info ul {
  margin: 10px 0;
}
.grid_info li {
  padding: 3px 0;
  border-bottom: 1px dotted #ccc;
}
.grid_info span {
  width: 60%;
  text-align: center;
  display: block;
  margin: 20px auto;
  border: 1px solid #2c4f6c;
  padding: 3px 10px;
  color: #2c4f6c;
  cursor: pointer;
  border-radius: 15px;
}

.info {
  background: #e68771;
  position: absolute;
  padding: 5px 10px;
  right: 20px;
  top: -35px;
  display: none;
  opacity: 0;
  font-size: 0.875rem;
  color: #fff;
  z-index: 4;
  text-shadow: none;
  border-radius: 8px;
}
.info .arrow {
  bottom: -10px;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #e68771 transparent transparent transparent;
  left: 20px;
}

.error_text {
  font-size: 0.875em;
  color: #fff;
  padding: 0 5px;
}

.error_input {
  font-size: 0.875em;
  color: #FF6F79;
  display: block;
  margin: 3px 0;
}

.delbox {
  position: absolute;
  text-align: center;
  right: 20px;
  top: 10px;
  width: 20px;
}
.delbox img {
  width: 0;
}

.questionbox {
  position: absolute;
  right: 60px;
  top: 0px;
  color: #111;
  text-align: center;
  font-size: 0.875em;
  cursor: default;
  opacity: 0;
}
.questionbox span, .questionbox div {
  height: 30px;
  line-height: 30px;
  background: #fff;
  border: 1px solid #555;
  padding: 0 25px;
  margin: 3px 0;
  cursor: pointer;
  display: block;
}

.filebox {
  position: relative;
  overflow: hidden;
}
.filebox .imgfile {
  position: absolute;
  left: 0;
  width: 0;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
}

.winfobox {
  color: #fff;
  opacity: 0.85;
  text-align: center;
  background: #2c4f6c;
  padding: 20px;
  border-radius: 20px;
}
.winfobox big {
  font-size: 2.063em;
}
.winfobox big span {
  font-size: 0.875rem;
  display: block;
}
.winfobox .text {
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px dotted #ccc;
  font-size: 0.875em;
}

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 99999999;
  background: #80c4e2;
  opacity: 1;
}
.loader div {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
}
.loader div img {
  position: absolute;
}
.loader div .effect1 {
  width: 90px;
  bottom: 0;
  -webkit-animation: loader1 2s ease-in-out infinite;
          animation: loader1 2s ease-in-out infinite;
  z-index: 2;
}
@-webkit-keyframes loader1 {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0;
  }
}
@keyframes loader1 {
  0% {
    left: 0;
  }
  50% {
    left: 5px;
  }
  100% {
    left: 0;
  }
}
.loader div .effect2 {
  left: 5px;
  width: 50px;
  -webkit-filter: invert(100%);
          filter: invert(100%);
  z-index: 1;
  -webkit-animation: loader2 2s linear infinite;
          animation: loader2 2s linear infinite;
}
@-webkit-keyframes loader2 {
  0% {
    bottom: -50px;
    -webkit-transform: rotateZ(-70deg);
            transform: rotateZ(-70deg);
  }
  10% {
    bottom: -10px;
    -webkit-transform: rotateZ(-55deg);
            transform: rotateZ(-55deg);
    left: 8px;
  }
  20% {
    bottom: 10px;
    -webkit-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
    left: 15px;
  }
  30% {
    bottom: 15px;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    left: 22px;
  }
  40% {
    bottom: 10px;
    -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
    left: 30px;
  }
  50% {
    bottom: -10px;
    -webkit-transform: rotateZ(70deg);
            transform: rotateZ(70deg);
    left: 35px;
  }
  60% {
    bottom: -50px;
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
    left: 35px;
  }
  100% {
    bottom: -50px;
    -webkit-transform: rotateZ(-70deg);
            transform: rotateZ(-70deg);
    left: 5px;
  }
}
@keyframes loader2 {
  0% {
    bottom: -50px;
    -webkit-transform: rotateZ(-70deg);
            transform: rotateZ(-70deg);
  }
  10% {
    bottom: -10px;
    -webkit-transform: rotateZ(-55deg);
            transform: rotateZ(-55deg);
    left: 8px;
  }
  20% {
    bottom: 10px;
    -webkit-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
    left: 15px;
  }
  30% {
    bottom: 15px;
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
    left: 22px;
  }
  40% {
    bottom: 10px;
    -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
    left: 30px;
  }
  50% {
    bottom: -10px;
    -webkit-transform: rotateZ(70deg);
            transform: rotateZ(70deg);
    left: 35px;
  }
  60% {
    bottom: -50px;
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
    left: 35px;
  }
  100% {
    bottom: -50px;
    -webkit-transform: rotateZ(-70deg);
            transform: rotateZ(-70deg);
    left: 5px;
  }
}

.loader_block {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
}
.loader_block .page_note {
  display: none;
  top: 250px;
  position: absolute;
  right: 20px;
  left: 20px;
}

/***********page*********************************************************/
.home_wrapper, .wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.home_wrapper .grid0, .wrapper .grid0 {
  max-width: 800px;
  width: 90%;
  margin: auto;
}
.home_wrapper .grid0 h3, .home_wrapper .grid0 h4, .wrapper .grid0 h3, .wrapper .grid0 h4 {
  font-family: "Noto Sans TC";
  font-weight: 500;
  -webkit-filter: blur(8px);
          filter: blur(8px);
  opacity: 0;
  top: 40px;
  color: #fff;
  position: relative;
  -webkit-transition: 1s all;
  transition: 1s all;
  -webkit-transition-timing-function: cubic-bezier(0.2, 0.33, 0.34, 1.24);
          transition-timing-function: cubic-bezier(0.2, 0.33, 0.34, 1.24);
}
.home_wrapper .grid0 h3, .wrapper .grid0 h3 {
  line-height: 130%;
  font-family: "Lemon", cursive;
  font-size: 4em;
}
.home_wrapper .grid0 h3 span, .wrapper .grid0 h3 span {
  color: #ffc8b3;
}
.home_wrapper .grid0 h4, .wrapper .grid0 h4 {
  font-size: 1em;
  -webkit-transition-delay: 0.36s;
          transition-delay: 0.36s;
}

.wrapper {
  min-height: 500px;
  z-index: 2;
}

.container {
  display: none;
  position: relative;
  font-size: 0.875em;
  padding: 15px 2%;
  top: 0;
  width: 96%;
  max-width: 1250px;
  margin: auto;
  z-index: 99999;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.container div {
  margin: auto;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.container h3 {
  position: absolute;
  padding: 0 10px;
  top: 12px;
  color: #fff;
  font-size: 1rem;
}
.container i {
  font-style: normal;
  color: #368fb3;
}
.container img {
  opacity: 0.7;
  width: 10px;
  margin: 0 5px;
}

.time_m, .time_d {
  position: absolute;
}

.time_m {
  top: 5px;
  left: 5px;
}

.time_d {
  bottom: 5px;
  right: 5px;
}

.route {
  position: absolute;
  top: 20px;
  left: 5px;
  width: 30px;
  height: 1px;
  background: #c4eaf0;
  -webkit-transform: rotateZ(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotateZ(-45deg);
}

.newslist, .main_newslist {
  width: 100%;
  position: relative;
}
.newslist .column, .main_newslist .column {
  width: 96%;
  margin: auto;
  max-width: 1200px;
  text-align: center;
}
.newslist li, .main_newslist li {
  display: inline-block;
  position: relative;
  opacity: 0;
  color: #fff;
  margin: 2%;
  top: 60px;
  max-width: 300px;
  height: 340px;
  width: 96%;
  overflow: hidden;
  border-radius: 50px;
  background: #fff;
}
.newslist li h4, .main_newslist li h4 {
  font-size: 1.125em;
  border-bottom: 1px dashed #2c7a99;
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 1;
  box-orient: vertical;
}
.newslist li a, .main_newslist li a {
  display: block;
  color: #2c7a99;
  position: absolute;
  margin: 0 5%;
  width: 90%;
  -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
          transform: translate(0px, -50%);
  top: 50%;
}
.newslist li .img, .main_newslist li .img {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 35px 35px 15px 15px;
  background: #fff;
  border: 1px solid #fff;
}
.newslist li .img img, .main_newslist li .img img {
  position: absolute;
  width: 130%;
  right: -100%;
  left: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
}
.newslist li .child1, .main_newslist li .child1 {
  font-family: Century Gothic, Arial, Helvetica, sans-serif;
  font-size: 0.813em;
  line-height: 100%;
  opacity: 0;
  text-align: center;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: -40px;
  width: 40px;
  height: 40px;
  color: #c4ebf0;
  background: #368fb3;
  z-index: 9;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  border-radius: 50%;
}
.newslist li .child2, .main_newslist li .child2 {
  padding: 10px 5px;
}
.newslist li .child3, .main_newslist li .child3 {
  padding: 5px;
  font-size: 0.875em;
  line-height: 135%;
}
.newslist li .child3 span, .main_newslist li .child3 span {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 6px;
}
.newslist li:hover, .main_newslist li:hover {
  -webkit-box-shadow: 0 0 30px #2c7a99;
          box-shadow: 0 0 30px #2c7a99;
}
.newslist li:hover .child1, .main_newslist li:hover .child1 {
  opacity: 0.7;
  top: 20px;
}
.newslist li:hover .child3 span, .main_newslist li:hover .child3 span {
  color: #c5eff3;
  background: #2c7a99;
}
.newslist .nopacity, .main_newslist .nopacity {
  opacity: 1;
  top: 0;
}

.main_newslist li .child1 {
  display: none;
}

.page404 {
  position: relative;
  z-index: 2;
  margin: 100px auto;
  padding: 0 2%;
  width: 96%;
  text-align: center;
  min-height: 300px;
  font-size: 0.913em;
}

/***********list*********************************************************/
.listpagebtn {
  margin: 20px auto;
  max-width: 1000px;
  width: 98%;
  text-align: left;
}
.listpagebtn li {
  font-size: 0.813em;
  display: inline-block;
  text-align: center;
  margin: 5px 3px;
  border: 1px solid #777;
  color: #01b7f2;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #f5f5f5;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.listpagebtn li a {
  display: block;
  color: #ccc;
}
.listpagebtn li:hover a {
  color: #01b7f2;
}
.listpagebtn .pagebtn {
  border: 1px solid #ccc;
}
.listpagebtn .pagebtn :hover {
  -webkit-box-shadow: 0 0 8px #ccc;
          box-shadow: 0 0 8px #ccc;
}

/*******************lightbox*******************************************/
.inpage_box, .admin_box {
  position: absolute;
  display: none;
  top: -150px;
  width: 94%;
  max-width: 900px;
  padding: 3%;
  margin: 0 auto;
  right: 0;
  left: 0;
  background: #fff;
  -webkit-box-shadow: 0 3px 7px #333;
          box-shadow: 0 3px 7px #333;
  z-index: 9999;
}
.inpage_box p, .inpage_box big, .inpage_box small, .admin_box p, .admin_box big, .admin_box small {
  display: block;
}

.inpage_box {
  padding: 30px 2%;
  margin: 0 auto;
}

.box_block, .inpage_block, .admin_block {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9998;
}

.admin_block {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7b465), to(#2c4f6c));
  background-image: linear-gradient(#f7b465, #2c4f6c);
  opacity: 0.7;
}

.inpage_block {
  background-image: -webkit-gradient(linear, right top, left bottom, from(#006584), to(#eafdff));
  background-image: linear-gradient(to left bottom, #006584, #eafdff);
  opacity: 0.75;
}

.box_block {
  height: 0;
  width: 0;
  left: initial;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#62dddd), to(#0096c4));
  background-image: linear-gradient(to top, #62dddd, #0096c4);
  opacity: 1;
  z-index: 1;
  max-width: 300px;
  -webkit-box-shadow: 0 0 8px #022e44;
          box-shadow: 0 0 8px #022e44;
}

.errbox {
  display: block;
  position: fixed;
  width: 80%;
  z-index: 999999;
  padding: 1% 10%;
  font-size: 0.813em;
  color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background: #333;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.errbox .close {
  margin-left: 10px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.errbox2 {
  display: block;
  position: fixed;
  color: #fff;
  width: 100%;
  z-index: 1000002;
  top: 0;
  left: 0;
  right: 0;
  padding: 50px 0;
  text-align: center;
  background: #000;
  filter: alpha(opacity=70);
}