@charset "utf-8";
body {
  padding: 0;
  margin: 0;
  font-family: "Microsoft JhengHei", Arial;
  font-size: 120%;/*0916修改*/
  overflow-x: hidden;
  width: 100%;
  word-wrap: break-word;
  word-break: normal;
	--mainclr: #1a2a56;
}
/* width */ ::-webkit-scrollbar {；
  width: 8px;
}
/* Track */ ::-webkit-scrollbar-track {
  background: #5d5d5d;
}
/* Handle */ ::-webkit-scrollbar-thumb {
  background: var(--mainclr);
}
/* Handle on hover */ ::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}
.mmenu_pos > div::-webkit-scrollbar-thumb {
  background: #d06a49;
}
* {
  font-family: "Microsoft JhengHei", Arial;
}
img {
  border: none
}
/* a[href]:focus, select:focus, input:focus, button:focus, textarea:focus {
  outline-width: 3px;
  outline-style: dotted;
  outline-color: #ffee19;
} */

/* 更 cindy */
a:focus-visible, select:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px #03f dotted;
  background-color: #FCC211 !important;
}

a:hover {
    color: var(--mainclr);
    text-decoration: none;
}
a.sr-only {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  top: 0;
  left: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  /*position: static;*/
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  z-index: 10;
}
.me100 {
  width: 0 !important;
}
@keyframes symble_scroll {
  0% {
    left: -10%;
    margin-top: -30px;
    filter: brightness(1);
    transform: scale(1) rotateZ(0deg);
    position: absolute;
  }
  25% {
    margin-top: -90px;
    filter: brightness(1.2);
    left: 25%;
    transform: scale(0.5) rotateZ(180deg);
    position: absolute;
  }
  50% {
    margin-top: -40px;
    left: 50%;
    filter: brightness(0.7);
    transform: scale(1) rotateZ(360deg);
    position: absolute;
  }
  75% {
    margin-top: -25px;
    left: 75%;
    filter: contrast(1.1);
    transform: scale(0.5) rotateZ(180deg);
    position: absolute;
  }
  100% {
    margin-top: 0px;
    left: 100%;
    filter: brightness(1.3);
    transform: scale(1) rotateZ(0deg);
    position: absolute;
  }
}
.symble_scroll {
  animation: symble_scroll 40s infinite;
  z-index: -1;
  position: relative;
}
@keyframes symble_scroll2 {
  0% {
    margin-top: 0px;
    opacity: 0;
    filter: brightness(1);
    transform: scale(1) rotateZ(0);
    left: -5%;
    ;
    position: absolute;
  }
  15% {
    margin-top: 90px;
    opacity: 1;
    filter: brightness(1.3);
    transform: scale(2) rotateZ(180deg);
    left: 15%;
    position: absolute;
  }
  30% {
    margin-top: -40px;
    filter: brightness(0.7);
    opacity: 0.7;
    transform: scale(1) rotateZ(360deg);
    left: 30%;
    position: absolute;
  }
  60% {
    margin-top: 25px;
    filter: contrast(1);
    opacity: 1;
    transform: scale(1.5) rotateZ(180deg);
    left: 65%;
    position: absolute;
  }
  100% {
    margin-top: 0px;
    filter: brightness(1.1);
    transform: scale(1) rotateZ(0);
    left: 110%;
    position: absolute;
  }
}
.symble_scroll2 {
  animation: symble_scroll2 40s infinite ease-in-out both;
  z-index: -1;
  position: relative;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.bgHeader section > button {
  display: none !important;
}
button {
  cursor: pointer;
}
header {
    position: sticky;
    padding: 10px 40px 10px;
    display: flex;
    justify-content: space-between;
    left: 0;
    right: 0;
    top: 0;
    align-items: flex-start;
    transition: all 0.2s;
    z-index: 5;
    background: #fff;
}
header nav ul li {
  display: inline-block;
  margin: 0;
}
ul.sub-menu {
  margin: 0px;
  padding: 0px;
}
ul.sub-menu > li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
a.menu-plus:hover {
  cursor: pointer;
}
ul.menu > li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: wrap;
    border-bottom: 1px solid #C1C1C1;
}
ul.sub-menu > li {
    padding: 5px 0px;
}
ul.sub-menu > li > ul > li {
    padding-left: 10px;
    background: #EFEFEF;
}
ul.sub-menu > li > ul > li > a.menu-plus {
  padding-left: 0px;
  margin-right: 0px; /*10px*/
}
ul#main-menu > li {
    text-align: center;
    vertical-align: middle;
    padding: 0px 20px;
}
ul#main-menu a:hover {
    color: #2d2d2d;
}
header nav ul a {
    color: #000;
    display: inline-block;
    font-size: 140%;/*0916修改*/
    /* padding: 20px 0; */
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-weight: bold;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
li.ico-search > a > img {
  width: 35px;
}
.ico-search >input {/*20231128*/
    display: inline;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}
li.ico-search.mhide {/*20231128*/
    min-width: 250px!important;
    display: inline-flex;
}
header nav ul a.active, header nav ul a:hover {
  opacity: 0.9;
}
li.mLink {
  width: 100%;
}
li.toplink {
  width: 100%;
  border: 0px!important;
}
ul.menu > li {
  padding: 10px 0px;
}
ul.sub-menu li a:first-child {
    padding-left: 42px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: -1px;
    font-size:112%;
    padding-right: 50px;
}
ul.sub-menu li:last-child a {
    border: none;
}
.mainptitle{
	color: #731d1a;
	font-size: 200%;
	font-weight: bold;
}
.mainspttl{
	line-height: 1.5;
}
.pchide {
  display: none !important;
}
.search input {
    width: 100%;
    line-height: 40px;
    /* border-radius: 25px; */
    border: none;
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
    border-radius: 30px;
    height: 41px;
    padding: 0px 10px;
    box-sizing: border-box;
}
.searchBox {
    position: relative;
    display: flex;
    align-items: flex-start;
}
.searchBox button {
    background: rgba(0, 0, 0, 70%);
    position: relative;
    border: none;
    color: #fff;
    font-size: 90%;
    padding: 9px 28px;
    border-radius: 0px 5px 5px 0px;
}
.searchBox button img {
  width: 25px;
  opacity: 0.6;
}
.search > button {
  line-height: 40px;
  /*    border-radius: 25px;*/
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  width: 100px;
  border: none;
  font-size: 100%;
  background: #222222;
  opacity: 0.8;
  color: #fff;
}
.search > button:hover {
  opacity: 1;
  transition: 0.5s;
}
.rchot {
    color: var(--mainclr);
    font-size: 90%;
    font-weight: bold;
	margin-top: 20px;
}
.rclist ul {
    display: flex;
    justify-content: flex-start;
    margin-left: -20px;
    font-size: 90%;
    padding: 0px 40px;
    margin-top: 10px;
}
.rclist ul li {
    margin-right: 35px;
    color: #fff;
    list-style: none;
}
.rclist ul li a {
    color: #fff;
}
.rclist ul li a:hover {
    color: #fff;
}
.conditionft {
    border: none;
    display: flex;
    align-items: center;
    font-size: 80%;
    border-radius: 5px 0px 0px 5px;
    flex-wrap: wrap;
}
.conditionft input {
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 5px 0px 0px 5px;
}
.images-pic {
    position: relative;
    width: 100%;
    /* z-index: -1; */
    background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.imagesBg {
    position: relative;
}

.imagesFont {
    position: relative;
    z-index: 1;
    bottom: 30%;
    color: #000;
    width: 100%;
    font-size: 110%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.rclist {
    width: 100%;
}
/*top_search*/
/*search*/
.modal-open .search_box .modal{
    overflow-y: hidden;
}
.search_box .modal-dialog {max-width: 800px;}

.search_box .modal-header {
    position: fixed;
    right: 30px;
    top: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    z-index: 999;
}

.search_box .modal-header button {opacity: 1;color: #fff;text-shadow: none;}

.search_box .modal-header button span {
    font-size: 300%;
    display: block;
}
.search_box .search input[type=search] {
  width: 100%;
  border-radius: 30px;
  background-color: #ececec;
  border: none;
  padding: 10px;
  font-size: 110%;
  letter-spacing: 1px;
}
form.gsc-search-box {
  width: 300px;
  right: 0;
  margin: 0;
  position: relative;
}
td.gsc-search-button {
  position: absolute;
  margin: 0;
  width: auto;
  right: 0;
}
.gsc-input-box {
  border: none;
  padding: 0;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
  background-color: #ebebeb !important;
  border: none !important;
  height: 41px;
  width: 100%;
}
table.gsc-search-box {
  margin: 0;
  position: relative;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
  border: none;
  background-color: transparent;
  padding: 8px;
}
.gsc-search-button-v2 svg {
  fill: #000;
  height: 25px;
  width: 25px;
}
.gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
  background-color: #b9b9b98c;
  background-image: none;
  filter: none;
}
.advanced a {
  background-color: #3153ba;
  color: #fff !important;
  padding: 10px 10px;
  position: relative;
  top: 9px;
  white-space: nowrap;
}
.advanced a:hover {
  background-color: #126fd9;
  color: #fff;
  text-decoration: none;
}
.search_box .hotsearch {
    width: 100%;
    padding: 5px;
    letter-spacing: 1px;
    margin-top: 10px;
}
.search_box .search_bt {
    margin: 10px -5px;
    display: -webkit-flex;
    display:flex;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    -webkit-align-items:center;
    align-items:center;
}

.search_box .modal-footer button {
    border-radius: 30px;
}

.search_box .search_bt input {
    width: 100%;
    background-color: #000000;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 110%;
    padding: 10px;
    margin: 5px;
}

.search_box .search_bt input:hover {
    background-color: #15598c;
}

.hotsearch a {
    color: var(--mainclr);
}
/*end top_search*/
/*menu*/
.ico-menu img, .ico-search img {
  width: 45px;
  padding: 5px;
}
#menu {
  margin-left: 5%;
  width: 100%;
}
#menu2 {
  position: relative;
  width: 100%;
}
.nav {
  list-style: none;
  *zoom: 1;
}
.nav:before, .nav:after {
  content: " ";
  display: table;
}
.nav:after {
  clear: both;
}
/*.nav ul {
	list-style: none;
}*/
.nav a {
    color: #000 !important;
    text-decoration: none;
    padding: 5px 20px;
}
.nav li {
  position: relative;
}
.nav > li {
  float: left;
}
.nav > li > .parent {}
.nav > li > a {
  display: block;
}
.nav li ul {
  display: none;
  width: 100%;
}
ul.menu {
  margin-left: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.nav > li.hover > ul {
  left: 0;
}
.nav li li.hover ul {
  left: 100%;
  top: 0;
}
.nav li li a {
    display: block;
    /* position: relative; */
    z-index: 100;
    padding: 10px 20px 10px 0px;
    float: left;
    font-weight: normal;
}
.nav li li li a {
  /* background: #0f4e76; */
  z-index: 200;
  /* border-bottom: 1px solid #fff; */
  padding-left: 10px; /*30px*/
}
.nav li ul ul {
  margin-top: 0;
}
li.mLink{
    border-bottom: 1px solid #C1C1C1;
}
ul.sub-menu {
    border-top: 1px solid #C1C1C1;
}
ul.sub-menu >li >a >ul.sub-menu >li >a {
    border-bottom: 1px solid #C1C1C1!important;
}
ul.sub-menu >li >a >ul.sub-menu {
    border-top: 0px!important;
}
ul.sub-menu li ul li a {
    border-bottom: none!important;
}
a.menu-plus {
    display: block;
    width: 100%;
    position: absolute;
    text-align: right;
    right: 5px;
}
.menu-plus {
    transform: scaleX(1.2) translateX(-20px);
	color: #707070;
}
.toggleMenu {
  display: none;
}
.sm-blue a img {
  padding-right: 5px;
  vertical-align: text-bottom;
}
.img_size {
  max-width: 980px;
  max-height: 435px;
}
.sm-blue > li > a {
  position: relative
}
/*menu*/
@keyframes bounce-bug {
  0% {
    transform: translateY(0)
  }
  15% {
    transform: translateY(-50%)
  }
  20% {
    transform: translateY(10%)
  }
  25% {
    transform: translateY(-5%)
  }
  30% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(0)
  }
}
.down-button {
  animation-name: bounce-bug;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  color: white;
  font-weight: normal;
  font-size: 8vh;
  font-style: normal;
  position: absolute;
  bottom: 1vh;
  left: 50%;
  z-index: 1;
}
.down-button img {
  transform: translateX(-50%);
}
.logo {
  width: 20%;
  margin: 0;
}
.logo img {
  width: 250px;
}
.logo h1 {
  padding: 0;
  margin: 0;
}
.sticky .logo img {
  width: 190px;
  margin-top: 5px;
}
.sticky .search {
  display: none;
}
header.sticky {
    background: rgb(255 255 255 / 80%);
    padding-right: 25px;
    z-index: 5;
}
.invert {
    filter: brightness(0.5);
}
.mainpic{
	width: 100%;
	position: relative;
}
.mainpic img{
	width: 100%;
	margin: 0 auto;
}

/*0726*/
.maintxt {
    position: absolute;
    bottom: 20%;
    z-index: 1;
    width: 30%;
    max-width: 320px;
    right: 60px;
}
.fivebox {
    display: flex;
    margin-bottom: 30px;
}
.fivebox img {
    width: 100%;
}
.ttbimg {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 100%;
    max-width: 800px;
    z-index: 1;
	animation: ttb ease 5s infinite;
}
.ttbimg img {
    width: 100%;
}
@keyframes ttb {/*0726*/
   0% {
   opacity: 1;
    top: 0px;
  }
  50% {
   opacity: 1;
    top: 40px;
  }
  100% {
   opacity: 1;
    top: 0px;
  }
}

/*0726 end*/
.weather {
    position: absolute;
    top: 20px;
    left: 40px;
    color: #000;
    z-index: 1;
    border-radius: 30px;
    border: 1px solid #D0D0D0;
    /* font-size: 13px; */
    font-size: 0.8125em;
    padding: 5px 20px;
}
header.sticky nav > a {
  padding: 8px 0;
}
header.sticky nav > ul > li > a {
  font-size: 110%;
}
.imagesFont > a[href^="https:"] > span:after {
  content: url(/static/css08/images/icon-link.png);
  padding-left: 5px;
}
.imagesFont > a[href^="http:"] > span:after {
  content: url(/static/css08/images/icon-link.png);
  padding-left: 5px;
}
.bgHeader {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;
}
.marqueebg {
    background: #fbf6e3;
    width: 100%;
    padding: 10px;
}
.content {
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
}
.content2 {
    width: 95%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-size: cover;
    /*max-width: 1400px;
     border: 1px solid #c7c7c7; */
    border-top: 0px;
}
.content2:before {
    /* border-top: 1px solid #c7c7c7; */
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    width: 100%;
    content: "";
    height: 5px;
}
.signUp >.titlebox h2:before {
    color: #00B2CD;
}
/*servicebox*/
.servicebox {
    width: 92%;
    margin-top: 80px;
	position: relative;
}
.servicebox .more {
    margin-right: 50px;
}
.servicebox:before {
    content: "";
    background: url(/static/css08/images/Rectangle.svg);
    position: absolute;
    left: -40px;
    top: -47px;
    width: 195px;
    height: 195px;
    z-index: -1;
}
.servicebox:after {
    content: "";
    background: url(/static/css08/images/circle.svg);
    position: absolute;
    right: -40px;
    bottom: 13px;
    width: 195px;
    height: 195px;
    z-index: -1;
}
.indexobx {
    width: 95%;
    /* max-width: 1400px; */
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    /* border: 1px solid #C1C1C1; */
}
.titlebox {
    /* border-right: 1px solid #C1C1C1; */
    padding: 20px;
}
.titlebox >h2{
	width: 20px;
	font-size: 140%;
}
.titlebox >h2:before {
    content: "●";
    COLOR: #FDE541;
}
.boxarr {
    position: absolute;
    top: 0px;
    right: 10px;
    display: none;
}

/*servicebox end*/
.more {
    background: #000000;
    color: #fff;
    border-radius: 30px;
    padding: 10px 20px;
    width: 290px;
    float: right;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* margin-right: 50px; */
    font-size: 80%;
}
.more a {
    color: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.more span {
    filter: invert(1);
	display: block;
}

/*hots*/
.hots {
    padding:40px 120px 40px 20px; /*Salina_0221修改*/
}

.product-box {
    flex-wrap: wrap;
    width: calc( 100% - 70px );
    margin: 0 auto 20px auto;
    position: relative;
    display: flex;
    justify-content: center;
    border: 1px solid #C1C1C1;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 50px;
}
.hots > h2 {
    text-align: left;
    position: relative;
    margin-left: 10px;
}
.hots > h2:after {
    width: 2em;
    content: "";
    position: absolute;
    background-color: var(--mainclr);
    height: 5px;
    left: 0px;
    bottom: 0px;
}
.hsub {
    font-size: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.product-box .box.challenge {
    background: none;
    transition: none;
    width: calc( 100% / 3 );
    line-height: 2em;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    box-sizing: border-box;
    padding: 0px 20px;
}
h3 {
    font-size: 110%;
    margin: 0px;
    text-align: left;
}
div#fs {
    margin-top: 60px;
}
.challenge {
    padding: 20px 20px 20px 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    border-right: 1px solid #C1C1C1;
    border-bottom: 1px solid #C1C1C1;
}
.ch_img {
    width: 40%;
	margin:auto;
}
.chtxt {
    width: 100%;
    padding: 20px 0px;
}
.chsub {
    font-size: 100%;
    color: #000;
    text-align: center;
    font-weight: bold;
    line-height: 2;
}
.subtxt {
    color: #000;
    font-size: 90%;
    text-align: left;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.texnboxouter {
    display: flex!important;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.tenboxl {
    width: 35%;
    padding: 10px;
	box-sizing: border-box;
}
.tenboxr{
	width: 65%;
	}
.product-box .box.product {
  /*    border: 1px solid rgba(255,255,255,0.5);*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*	padding: 30px;*/
  box-sizing: border-box;
}
.product-box .box.challenge:first-of-type .product {
  border-right: none;
}
.product-box .box.challenge:last-child .product {
  border-left: none;
}
.product-box .box a {
  display: block;
  width: 100%;
  text-decoration: none;
}
.product-box .box img {
  width: 90%;
  padding: 20px 0px 0px 0px;
  box-sizing: border-box;
}
.product-box .box.challenge:hover h3 b {
  color: #32b5a8;
  font-size: 1.6em;
}
.product-box .box.challenge:hover img {
  filter: brightness(120%);
  transform: scale(1.15);
  transition: 0.5s;
}
.product.box {
  overflow: hidden
}
/*end hots*/
/*
.logo img{
	transition: 1s
}
*/
.imagesFont > a {
  display: block;
  color: #fff;
  text-decoration: none;
}
/*動態*/
.animationRight {
  animation: right 2s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.animationLeft {
  animation: left 2s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.animationOpacity {
  animation: opacity 2s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.opacityBig {
  animation: opacityBig 2s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.box.challenge {
  text-align: center;
}
.showmore {
  border: 1px solid #000;
  color: #000;
  padding: 10px 20px;
  margin-top: 30px;
}
.showmore:hover {
  cursor: pointer;
  background: #32b5a8;
  color: #fff;
  border: 1px solid #32b5a8;
  transition: 0.5s;
}
.showmorebox {
  width: 100%;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.mortact {
  display: flex !important;
}
.top1 {
  animation: dataTop 2s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.top2 {
  animation: dataTop 2s;
  animation-delay: 0.25s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.top3 {
  animation: dataTop 2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.big {
  animation: big 1s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
@keyframes right {
  from {
    opacity: 0;
    right: 200px;
  }
  to {
    opacity: 1;
    right: 50px;
  }
}
@keyframes left {
  from {
    opacity: 0;
    left: 200px;
  }
  to {
    opacity: 1;
    left: 0px;
  }
}
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dataTop {
  from {
    opacity: 0;
    top: -100px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes big {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes opacityBig {
  from {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
/*end 動態*/
/*最新消息*/
.title li {
  display: inline-block;
}

.signUp ul {
    list-style: none;
    margin: 0;
    color: #fff;
    padding: 0px;
}
ul.list {
    padding-top: 40px;
    border-radius: 0px 0px 30px 30px;
    box-shadow: 4px 4px 9px #ccc;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff
}
.signUp li, .signUp li a {
    color: #5c5356;
    text-decoration: none;
    font-size: 100%;
    line-height: 1;
    margin: 5px 0;
    display: block;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.column {
    position: relative;
    height: 100%;
    flex: 1 1 auto;
    transition: all 1s;
    display: flex;
    width: calc( 100% - 120px );
    justify-content: flex-end;
    margin-right: 50px;
    flex-wrap: wrap;
}
.column:after {
    content: "";
    position: absolute;
    background: url(/static/css08/images/half_circle.svg);
    left: 0px;
    bottom: 0px;
    width: 155px;
    height: 125px;
    z-index: -1;
}
.mainactimg {
    width: 100%;
}
.signUp li .date {
    color: #000;
    display: block;
}
.signUp .more {
    text-decoration: none;
    text-align: center;
    display: table;
    font-size: 80%;
    border: none;
    margin: 0 auto;
    text-align: center;
    padding: 5px 0px;
    padding: 10px 20px;
}
.signUp {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* max-width: 1400px; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 100%;/*0916修改*/
}
div#signUpBox{
	position: relative;
}
div#signUpBox:before {
    content: "";
    background: url(/static/css08/images/Rectangle_blue.svg);
    width: 185px;
    height: 30px;
    position: absolute;
    left: -40px;
    top: 50%;
    z-index: -2;
    opacity: 0.85;
}
.deco{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
#signUpBox > #tabs2 > ul > li, #tabs > ul > li {
    float: left;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
    width: 33%;
    padding-bottom: 20px;
    position: relative;
    font-size: 120%;
    font-weight: bold;
}
#tabs > ul {
    margin-left: 0px;
    padding-left: 0px;
}
#signUpBox > #tabs2 > ul, #tabs > ul {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    background: #EFEFEF;
    border-radius: 50px;
}
li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
    background: #000000;
    color: #fff;
    border-radius: 50px;
}
li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active >a {
    color: #fff;
}
div#tabs{
    width: 100%;
	background: transparent;
	padding-bottom: 20px;
}
div#tabs2 {
    width: 95%;
    background: transparent;
    padding-bottom: 20px;
    margin-top: 50px;
}
ul.list >li {
    border-bottom: 1px solid #896b60;
    margin: 10px;
    box-sizing: border-box;
}
ul.list >li:hover {
    background: #dfdcdb;
}
ul.list >li a {
    display: flex;
    flex-direction: row-reverse;
    padding: 10px;
    justify-content: space-between;
}
ul.list >li:last-child {
    border: none;
}
span.item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 40px;
    color: #000;
}
.product-box li, .product-box li a{
	color: #5c5356;
}
.rotate {
    transform: rotate(180deg);
}
/*end 市政公告*/
/*市政公告下輪播*/
.morect {
    width: 80%;
    margin: 0 auto;
}
.clearcircle {
    background: transparent!important;
    border: none!important;
    width: 100%;
	padding: 0px;
}
.clearcircle .chtxt a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.box.challenge.clearcircle {
    width: 60%;
    margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
    color: black!important;
}
.slick-prev, .slick-next {
    width: 44px!important;
    height: 73px!important;
}
.slick-prev:before {
    content: ''!important;
    background-image: url(/static/css08/images/white_arr.svg)!important;
    position: absolute!important;
    z-index: 3; /* Salina_0221修改*/
    top: 37%;
    left: 30%;
    width: 54px!important;
    height: 54px!important;
    background-repeat: no-repeat!important;
    opacity: 1 !important;

}
.slick-prev {
    top: 30%!important;
}
.slick-prev {
    background-image: url(/static/css08/images/white_arr.svg)!important;
    width: 54px!important;
    height: 54px!important;
    position: absolute!important;
    z-index: 3; /* Salina_0221修改*/
    left: -80px!important;;
    transform: rotate(180deg) !important;
    background-repeat: no-repeat!important;
    background: #000!important;
    left: 0px;
    border-radius: 50px;
}
.slick-next:before {
    content: ''!important;
    background-image: url(/static/css08/images/white_arr.svg)!important;
    position: absolute!important;
    z-index: 3; /* Salina_0221修改*/
    top: 40%;
    right: -30%;
    width: 54px!important;
    height: 54px!important;
    background-repeat: no-repeat!important;
    opacity: 1 !important;
}
.slick-next {
    background-image: url(/static/css08/images/white_arr.svg)!important;
    width: 54px!important;
    height: 54px!important;
    position: absolute!important;
    z-index: 3; /* Salina_0221修改*/
    text-align: center;
    background-repeat: no-repeat!important;
    background: #000!important;
    left: -80px;
    border-radius: 50px;
}
/*市政公告下輪播 end*/

/*video*/
.videobox {
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;
    background: url(/static/css08/images/build_bg.png);
    background-size: cover;
    /* border: 1px solid #c7c7c7; */
    border-top: 0px;
    position: relative;
    overflow: hidden;
}
.videobox:before {
   /*  border-top: 1px solid #c7c7c7; */
    position: absolute;
    width: 100%;
    height: 1px;
    top: 5px;
    left: 0px;
    content: "";
}
.videoinbox {
    width: 90%;
    position: relative;
    padding-left: 40px;
    box-sizing: border-box;
}
.videoinbox:before {
    content: "";
    width: 210px;
    height: 205px;
    background: url(/static/css08/images/blur_halt.svg);
    position: absolute;
    right: -30px;
    top: -30px;
    background-size: contain;
    z-index: -1;
}
.videottl {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 160%;
    margin-top: 40px;
    margin-bottom: 30px;
    font-weight: bold;
}
.content >.titlebox {
    padding-top: 70px;
}
.content >.titlebox >h2:before{
	color: #7554FF;
}
.videoinbox iframe {
    width: 96%;
    height: 620px;
    border-radius: 20px;
    margin-bottom: 120px;
    position: relative;
    z-index: 1;
}
.videoinbox:after {
    position: absolute;
    left: -140px;
    bottom: -100px;
    background: url(/static/css08/images/videoafter.png);
    background-size: cover;
    width: 897px;
    height: 550px;
    content: "";
    z-index: 0;
}
/*video end*/
/*每一個100天*/
span.pencil {
    /* background-image: url(/static/css08/images/pencil.svg); */
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    /* padding: 0px 10px 10px 10px; */
}
.hunbg h2:before {
    content: "●";
    color: #7554ff;
	margin-right: 20px
}
.titlebox >.hreplace {
    width: 20px;
    font-size: 125%;
    display: none;
}
.hunbg {
    width: 100%;
    background: url(/static/css08/images/hunbg.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 180px;
    padding-bottom: 20px;
}
.hunbg h2 {
    font-size: 150%;
}
.gridtxt h4 {
    margin: 0px;
    font-size: 150%;
    line-height: 1.4;
}
.hunday{
	width: 100%;
}
.hunbox {
    width: 95%;
    /* max-width: 1400px;
    border: 1px solid #c7c7c7; */
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    border-top: 0px;
    justify-content: space-between;
    position: relative;
}
.hunbox .titlebox {
    display: none;
}
.hunbox:before {
    content: "";
    width: 100%;
    /* border-top: 1px solid #c7c7c7; */
    height: 1px;
    position: absolute;
    top: 5px;
    left: 0px;
}
.hungird {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0px;
    justify-content: flex-end;
    position: relative;
}
.hungird:after {
    background-image: url(/static/css08/images/blur_grap.svg);
    background-repeat: no-repeat;
    content: "";
    width: 220px;
    height: 220px;
    z-index: -1;
    position: absolute;
    bottom: -140px;
    right: -70px;
    background-size: cover;
}
.gridinbox {
    display: flex;
    gap: 15px;
    width: 100%;
	margin-bottom: 15px;
}
.hungridbox {
    width: calc( 100% / 3 );
    border: 1px solid #c7c7c7;
    border-radius: 20px;
}
.gridimg{
	width: 100%;
}
.gridimg img{
	width: 100%;
	height: 300px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}
.gridtxt {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}
.griddate {
	display: none;
    /* font-size: 14px; */
    font-size: 0.875em;
    font-weight: bold;
    color: #000;
    margin-top: 15px;
}
.hungird .more {
    margin-right: 0px;
}
/*每一個100天end*/
/*主題宣導*/
.event{
	width: 100%;
}
.eventbox {
    width: 86%;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.clearcircle {
    width: calc( 100% / 4 );
    margin: 25px auto;
    text-align: center;
}
.chsub a {
    color: #000;
}
.content3 {
    width: 95%;
   /*  max-width: 1400px; */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	/* border: 1px solid #c7c7c7; */
	border-top: none;
}
.clearcircle .subtxt {
    text-align: center;
}
.clearcircle .subtxt >img {
    width: 80%;
    max-width: 270px;
}
.clearcircle .chsub {
    font-size: 120%;
    color: #000;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    margin-top: 20px;
}
.clearcircle .chsub>span {
    font-size: 60%;
    line-height: 1;
    display: block;
    padding: 0px 20px;
}
.eventbox:before {
    content: "";
    background: url(/static/css08/images/half_blue.svg);
    width: 180px;
    height: 180px;
    position: absolute;
    z-index: 1;
    left: -220px;
    bottom: -50px;
    background-size: contain;
}
.smallmore {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50px;
    margin-top: 20px;
    zoom: 90%;
    display: none;
}
/*主題宣導end*/
/*影音專區*/
.video_list{
	width: 100%;
}
.content4 >.titlebox >h2:before {
    content: "●";
    COLOR: #00B2CD;
}
.video_listin {
    width: 80%;
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    gap: 20px;
   /*  margin-right: 50px; */
    flex-wrap: wrap;
    justify-content: flex-end;
}
.video_listin:after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 150px;
    height: 150px;
    background-image: url(/static/css08/images/gbl_half.svg);
    background-repeat: no-repeat;
    background-size: cover;
    left: 45%;
    bottom: -51px;
    opacity: 0.8;
}
.twkbox {
    width: 50%;
    margin: 0 auto;
    text-align: left;
}
.content4 {
    width: 95%;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 0px;
}
.twkbox >.gridimg {
    border-radius: 20px;
    overflow: hidden;
}
.gridimg iframe{
  width: 100%;
  height: 400px;
}
/*影音專區 END*/
footer {
    background: #000;
}
.ft_btn {
    width: 120px;
    color: #fff;
    font-weight: bold;
    margin: 0px auto 30px auto;
    display: flex;
    padding-top: 30px;
    cursor: pointer; /*salina20250331新增*/
    justify-content: center; /*salina20250331新增*/
}
.focusbtn {
  outline: 4px #03f dotted;
  background-color: #FCC211;
  color: #000;
}

.fatfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    color: #3e3a39;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
}
.fatinbox {
  width: 20%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 5px 0px;
  padding: 0px 20px;
  box-sizing: border-box;
}
.fattl a {
    width: 100%;
    font-weight: bold;
    font-size: 120%;
    position: relative;
    padding: 5px;
    color: #ffffff;
}
.fatitem {
  width: 100%;
}
.fatitem > ul {
  margin-left: 0px;
  padding: 0px;
}
.fatitem > ul li {
    list-style: none;
    padding: 0px 6px;
    line-height: 1.8;
    color: #ffffff;
}
.fatitem ul li a {
    color: #ffffff;
}
.fatitem ul li a:hover {
    color: #ffffff;
}
.pil {
  background: #00B2CD;
  width: 40px;
  height: 18px;
  border-radius: 20px;
  padding: 3px;
  box-sizing: border-box;
  margin-right: 10px;
  transform: translateY(3px);
}
.ckl, .ckr {
  background: #fff;
  border-radius: 20px;
  width: 13px;
  height: 13px;
}
.ckl {
  display: none;
  float: left;
}
.ckr {
  float: right;
  display: block;
}
.ft_btn.clickbtn > .pil > .ckl {
  display: block;
}
.ft_btn.clickbtn > .pil > .ckr {
  display: none;
}
.clft {
  display: block;
}
.opft {
  display: none;
}
.ft_btn.clickbtn > .clft {
  display: none;
}
.ft_btn.clickbtn > .opft {
  display: block;
}
.footinfo {
    width: 100%;
    padding: 40px 20px 20px 20px;
    color: #ffffff;
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #383838;
    box-sizing: border-box;
}
.logo_foot {
  margin-right: 30px;
  display: flex;
}
.qrbox{
	display: flex;
}
.foot_qr {
  text-align: center;
  padding: 15px 10px;
  margin: 0px 10px;
}
.footinfo a {
    text-decoration: none;
    color: #fff;
}
.foot_qr > a {
  color: #fff;
  text-decoration: none;
}
.accessblock {
  padding: 0px 20px;
}
.accessblock > a {
    padding-bottom: 20px;
    display: inline-block;
    font-weight: bold;
}
.productBox .slick-prev, .productBox .slick-prev:hover, .productBox .slick-prev:focus {
  background: url(/static/css08/images/arrow-left.png)no-repeat;
  background-size: 30px 45px;
  width: 30px;
  height: 45px;
  left: -40px;
}
.productBox .slick-prev::before {
  content: " ";
}
.productBox .slick-next, .productBox .slick-next:hover, .productBox .slick-next:focus {
  background: url(/static/css08/images/arrow-right.png)no-repeat;
  background-size: 30px 45px;
  width: 30px;
  height: 45px;
  right: -40px;
}
.productBox .slick-next::before {
  content: " ";
}
.product-box .more {
    color: var(--mainclr);
    text-decoration: none;
    text-align: center;
    display: table;
    font-size: 100%;
    border: none;
    margin: 0 auto;
    padding: 5px 0px;
}
.product-box .more:hover {
  color: #222;
  border: 0px solid var(--mainclr);
  transition: 0.5s;
}
.imagesFont h2 {
  font-size: 150%;
  display: block;
  font-weight: inherit;
  margin: 0;
  margin-bottom: 10px;
}
.images-pic .slick-slide {
  position: relative !important;
}

.mainact_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mainact .slick-list {
    overflow: inherit !important;
}



/*.signUp:after {
    content: "";
    position: absolute;
    background: url(/static/css08/images/paper_air.svg);
    right: -50%;
    bottom: -90px;
    width: 1140px;
    height: 295px;
    z-index: -1
}*/
.signUp:after {/*0726*/
    content: "";
    position: absolute;
    background: url(../images/paper_air.svg);
    right: -73%;
    bottom: -90px;
    width: 1140px;
    height: 295px;
    z-index: -1;
}
.activity_banner a {
  display: block;
  position: relative;
}
.mainactimg img {
    /*height: 600px;*/
    /*object-fit: cover; Salina_0221修改
    object-position: center;*/
}
.activity_banner .activityFont {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: left;
  padding: 10px 15px;
  position: absolute;
  bottom: 0;
	width: 30%;
  left: 0;
  box-sizing: border-box;
}
.activity_banner .slick-dots li button:before {
  color: #666666;
  font-size: 110%;
}
.activity_banner .slick-dots li.slick-active button:before {
  color: #33b5a8 !important;
}
.activity_banner .slick-dots {
  bottom: -30px;
}
.inbox {
  line-height: 1.6;
  padding: 10px;
  text-align: justify;
}
.actimg > a > img {
  width: 100%;
}
.actimg {
  padding: 10px;
  box-sizing: border-box;
}
.activity {
  padding: 10vh 0px 5vh 0px;
}

.hNone {
  display: none;
}
.fontContent { /*0426新增*/
  font-weight: 500;
  font-size: 160%;
}

.activityFont {
    width: 100%;
    display: block;
    text-align: left;
    box-sizing: border-box;
    font-size: 100%;
   line-height: 1.25;/* Salina_0221新增*/
}
.activityFont span {
    padding: 2px 0px;
    font-size: 100%;
    vertical-align: middle;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    line-height: 2;
}
.activityFont div {
    color: #000;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 92px;
}
section.imagesPic {
  padding-top: 120px;
  background-image: url(/static/css08/images/evbg.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgb(255 255 255);
}

/*內容*/
.boxtop, .boxbtm {
  width: 100%;
  display: flex;
  justify-content: center;
}
.boxtop > .inbox {
  width: 50%;
  background: #fff;
  margin: 10px;
}
.boxbtm > .inbox {
  width: 25%;
  background: #fff;
  margin: 10px;
}
.promottl {
    font-size: 105%;
    font-weight: bold;
    text-align: left;
    position: relative;
    padding-right: 40px;
}
.promottl:after {
  position: absolute;
  content: "";
  right: 10px;
  width: 20px;
  height: 20px;
  background: url(/static/css08/images/chevron-right.png);
  background-size: 100%;
  top: calc(100% / 2 - 12px);
}
.inbox {
  line-height: 1.6;
  padding: 10px;
  text-align: justify;
}
.actimg > a > img {
  width: 100%;
}
.actimg {
  padding: 10px;
  box-sizing: border-box;
}
.activity {
  padding: 10vh 0px 5vh 0px;
}
.links .more {
  position: absolute;
  color: #222;
  border: 1px solid #222;
  right: 20px;
  bottom: 35px;
  padding: 10px 25px;
  text-decoration: none;
}
.links .more:hover {
  background: #32b5a8;
  color: #fff;
  border: 1px solid #32b5a8;
  transition: 0.5s;
}
.home_Search {
  right: 0;
  left: auto;
  top: 90px;
  font-size: 1rem;
}
.home_Search.search input {
  line-height: 30px;
}
.home_Search.search > button {
  line-height: 30px;
}
.home_Search .searchBox button {
  right: 3px;
  top: 4px;
}
.home_Search .searchBox button img {
  width: 23px;
}
.home_Search.search a {
  color: #000;
  text-shadow: none;
}
.homeHeader {
  background: #4f9690;
  padding: 10px 40px 2px;
}
.main-container {
  padding: 150px 10% 50px;
}
.home_bg {
  background: #fff;
  margin: 10px 0;
  padding: 10px 15px;
  overflow: hidden
}
.root {
  padding: 10px 0 0 0
}
.list_a {
  background-color: #fff;
  color: #000;
}
.list_b {
  background-color: #fff;
  color: #000;
}
.list_a:hover, .list_b:hover {
  background-color: #e6e6e6;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border-top: none;
  line-height: 25px;
}
th {
  color: #fff;
  text-align: center;
  background-color: #5cbf9b;
}
.table td, .table th, .table {
  padding: 8px;
}
.table {
  padding: 0;
  margin: 0;
}
.table a {
  color: #d1875f;
  text-decoration: none;
}
.table a:hover, #content a:hover {
  text-decoration: none;
}
.home_bg a {
  color: #000;
  text-decoration: none;
}
#container_home {
  width: 1000px;
  margin: auto;
  overflow: hidden;
  padding-bottom: 35px;
  min-height: 560px;
}
#container_home_1 {
  position: relative;
  width: 1000px;
}
#content_title {
  color: #584703;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5px 0 5px 40px;
  clear: both;
  background: url(../img/home_title.png) no-repeat left center;
  margin-top: 30px;
}
#content_detail {
  margin: 20px 0;
}
.ll {
  position: absolute;
  margin-left: 68px;
  top: -3px;
  color: #77B7B5;
  font-size: 0.9rem;
  text-decoration: none;
}
.word a {
  display: inline-block;
  background-color: #ccc;
  padding: 6px 0;
  color: #fff;
  line-height: 12px;
  font-weight: bold;
  width: 25px;
  text-align: center;
}
.word a:hover, .word a.active {
  background-color: #222;
  text-decoration: none
}
#home_nav {
  text-align: right;
  clear: none;
  float: right;
}
#home_nav a {
  color: #fff;
  text-decoration: none;
  margin: 5px;
  padding: 5px 20px;
  border-radius: 3px;
}
#home_nav .btn_01 {
  background-color: #60afaa;
  word-break: break-word !important;
}
#home_nav .btn_01:hover {
  background-color: #4f9690;
}
#home_update {
  text-align: left;
  clear: none;
  float: right;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
}
.main-container .title {
  color: #222;
  padding: 10px;
  font-size: 1.1rem;
  position: relative;
  font-weight: bold;
  border-bottom: 2px solid #54ac8c;
}
.pagesearch {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.maincontainer {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.pagecontainer {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #efefef;
}
#content_root {
  /* font-size: 14px; */
  font-size: 0.875em;
  margin: 20px 20px 60px 20px;
}
input.form-control-plaintext {
  border: 1px solid #ced4da;
  border-radius: 5px;
}
.titleblock {
    width: 1400px;
    display: flex;
    padding: 55px 20px 75px 20px;
    flex-wrap: wrap;
    margin: 0 auto;
}
.unidc {
  font-size: 1.2rem;
  width: 100%;
}
.pageconte {
    max-width: 1400px;
    width: 100%;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0 0 50px 0px;
    /* min-height: 560px; */
    justify-content: center;
    font-size: 120%;/*0916新增*/
}
.pageconte .hots {
    width: 100%;
    font-size: 80%;
    text-align: center;
}
.pageconte .chsub {
    height: 48px;
}
.pageconte .challenge {
    padding: 20px 20px 20px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-right: 1px solid #C1C1C1;
    border-bottom: 1px solid #C1C1C1;
    align-items: flex-start;
    align-content: flex-start;
}
.unidc > .boxbtm {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.unidc > .boxbtm > .inbox {
    border: 1px solid #ccc;
    margin: 5px 5px 20px 5px;
    width: calc( 100% / 3 - 10px);
    display: flex;
    align-items: center;
    background: #fff;
    box-sizing: border-box;/*
    background-image: url(/static/css08/images/water-bead.jpg);
    background-size: 100%;
    background-position: 0px 50px;
    background-repeat: no-repeat; */
}
.pagecontainer {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    background-image: url('/static/css08/images/pagebg.png');
    background-position: bottom;
    background-size: cover;
    border-bottom: 1px solid #e5e5e5;
}
.unidc > .boxbtm > .inbox > a {
  color: #212529;
  text-decoration: none;
  display: block;
  width: 100%;
}
.spbox {
  /* background: #ccc; */
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
.spclr {
    background: #fdf0f0;
}
.spbox.spclr {
  margin-top: 20px;
}
.unidc > .boxtop > .inbox {
  width: 50%;
  border: 1px solid #ccc;
  margin: 10px 20px;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
}
.unidc > .boxtop > .inbox > a {
  color: #1c4b8e;
  text-decoration: none;
  display: block;
  width: 100%;
}
.sp_search {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.sp_search > input {
  border-radius: 5px;
  border: 1px solid #4b7daa;
  line-height: 2;
  width: 50%;
  font-size: 1.2rem;
  padding-left: 10px;
}
.sp_search > button {
  background-color: #4b7daa;
  border-radius: 5px;
  border: 1px solid #eee;
  line-height: 2;
  color: #fff;
  width: 80px;
  font-size: 1.2rem;
}
.subtxt h3 {
    font-size: 130%;
}
.hots > h3 {
  color: #000;
  margin: 20px 0;
}
.home .hots {
    padding: 40px 0;
    width: 90%;
}

.home .product-box {
    margin-right: 0;
    width: 100%;
}
.back {
  display: flex;
  margin: 10px auto 20px auto;
  justify-content: center;
}
.back > button {
  background-color: #4b7daa;
  border-radius: 5px;
  border: 1px solid #eee;
  line-height: 2;
  color: #fff;
  min-width: 130px;
  font-size: 1.2rem;
  height: 50px;
}
.pagesubdescp {
  padding: 0px 20px;
  width: 100%;
  margin-bottom: 20px;
}
.pagesubdescp > input {
  border-radius: 5px;
  border: 1px solid #4b7daa;
  line-height: 2;
  width: 200px;
  font-size: 1.2rem;
  padding-left: 10px;
}
.pagesubdescp > button {
    background-color: var(--mainclr);
    border-radius: 5px;
    border: 1px solid #eee;
    line-height: 2;
    color: #fff;
    width: 80px;
    font-size: 1.2rem;
}
.unidc > h4 {
  padding-left: 20px;
   border-left: 5px solid var(--mainclr);
}
.spbox > div > ul > li {
  float: left;
  list-style: none;
  padding: 10px;
  text-decoration: none;
}
.spbox > div > ul > li a {
  text-decoration: none;
  color: #000;
  font-size: 1.3rem;
  font-weight: bold;
}
.spbox > .ui-tabs {
  width: 100%;
}
/*end 內容*/

.mainactimg img{
  width: 100%;
}

.mainactimg a, .mainactimg div {
  width: 100%
}


/**APP專區 START*/
	.div_apps{
		width:100%;
		text-align:center;
	}
	.div_hot_app_content{
		width:220px;
		height: 245px;
        border: 2px solid rgb(221, 221, 221);
        background:transparent url('/ch/images/hot.png') no-repeat scroll 183px -8px / 50px auto;
		display: inline-block;
		text-align: center;
	    padding: 10px 5px;
		margin: 3px;
		border-radius: 15px;
	}

    .div_hot_app_content{
        width:220px;
        height: 245px;
        border: 2px solid rgb(221, 221, 221);
        background:transparent url('/ch/images/hot.png') no-repeat scroll 183px -8px / 50px auto;
        display: inline-block;
        text-align: center;
        padding: 10px 5px;
        margin: 3px;
        border-radius: 15px;
    }

	.div_app_name{
		width:100%;
        overflow: hidden;
        white-space: nowrap;
	}
	.div_app_icons{
		width:100%;
	}
	.div_app_content{
		width:245px;
		height: 245px;
        border: 2px solid rgb(221, 221, 221);
		display: inline-block;
		text-align: center;
		padding: 10px 5px;
		margin: 3px;
		border-radius: 15px;
	}
	.div_app_icon_title{
		float:left;
		height: 30px;
		margin-top: 4px;
		margin-left: 0px;
		border-radius: 6px;
	}
	.div_app_icon_title_33{
		width:33%;
	}
	.div_app_icon_title_50{
		width:50%;
	}
	.div_app_icon_title_100{
		width:100%;
	}
	.div_app_icon_title a{
		float:left;
		height: 30px;
	}
	.div_app_icon_title img{
		float:left;
		height: 30px;
	}
	.div_app_icon_title a{
		color:black;
		/* font-size:10px; */
    font-size:0.625em;
	}
	.div_android{
		background-color: rgb(151, 192, 36);
		display: flex;
	}
	.div_ios{
		background-color: #6d6e71;
		display: flex;
	}

/**APP 專區END*/

.pageconte .hots .opacityBig {
    border: none;
}

.pageconte .hots .opacityBig .box.challenge {
    border-left: 1px solid #c1c1c1;
}

.pageconte .hots .product-box {
    border-top: 1px solid #c1c1c1!important;
}

/**市府服務頁*/
.pagesearch >h2 {
    width: 100%;
}

.pagesearch >form {
    width: 100%;
}

.pagesearch >form input {
    padding: 0px!important;
}

 h2 {
  text-align: center;
/*  margin-top: 100px;*/
}

.searchfull {
  width: 100vw;
  position: absolute;
  height: 100vh;
  left: 0;
  right: 0;
  top: -20px;
  bottom: 0;
  display: flex;
  flex-direction: row;
  background: rgba(0, 0, 0, 0.85);
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1000;
}
.searchttltxt {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin: 20px 0px;
}
.searchfull > .inboxo > input {
  height: 45px;
  width: calc(100% - 80px);
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
}
.searchfull > .inboxo > button {
  border-radius: 20px;
  padding: 9px 20px;
  font-size: 1.2rem;
  background: #4b7daa;
  color: #fff;
  border: none;
}
.sechx {
  position: absolute;
  right: 60px;
  top: 10px;
  font-size: 5rem;
  color: #fff;
  transform: rotateX(45deg);
  cursor: pointer;
}

.unidc > h4 a {
    color: #000000;
}
.accesskey {
    position: absolute;
    left: 0;
    z-index: 1;
    color: #fff;
}

/* DivTable.com */
.divTableRow a {
  color: inherit;
  text-decoration: none;
}
.divTableRow > .divTableCell:nth-child(2) {
  width: 70%;
}
.divTableRow > .divTableCell:nth-child(1), .divTableRow > .divTableCell:nth-child(3) {
  text-align: center;
}
.divTable {
  display: table;
  width: 100%;
  margin-top: 20px;
}
.divTableRow {
  display: table-row;
  background-color: #f1f1f1;
}
.divTableRow:first-child {
  text-align: center;
  font-weight: bold;
}
.divTableRow:nth-child(even) {
  background-color: #fff;
}
.divTableRow:hover {
  background-color: #e8e8e8;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell, .divTableHead {
  display: table-cell;
  padding: 20px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

/*表格*/
/* DivTable.com */
.fomrlist {
  /*width: 1400px;*/
  display: flex;
  margin: 0px auto 40px auto;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}
.fomrlist .divTable {
  display: table;
  width: 100%;
}
.fomrlist .divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell, .divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
/*表格END*/


.back > button a {
    color: #fff;
}

/**上方menu 隱藏start*/
.mhide:nth-child(2){
  display: none;
}
.mhide:nth-child(5){
  display: none;
}
/**上方menu 隱藏END*/

a h3 {
    color: #000;
}

.quotea {
    font-weight: bold;
    color: #983a1b; /*0118_salina*/
}
.d_sumary.quote {
    font-size: 80%;
    padding: 20px;
    border: 2px solid #ebd1c8;
    line-height: 1.5;
    margin: 20px 0px;
    color: #000;
    background: #f7f7f7;
}

p~.unidc{
    color: #000;
    padding-left: 35px;
	letter-spacing: 0px;
	margin-bottom: 10px;
	margin-top: -10px;
}
.inbox:hover {
    border: 3px solid #00b8d6!important;
}
.box.challenge:hover {
    border: 2px solid #00b8d6!important
}
form#filterForm {
    width: 100%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    /*text-align: center;*/
}
.spbox.spclr h3 {
    text-align: center;
    margin: 20px auto 10px auto;
}
.inboxo {
    width: 60%;/*改這個*/
    margin: 0 auto 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0px;
}
form#filterForm >.spbox {
    text-align: center;
}
.bgHeader .slick-list {
    overflow: inherit;
}
/*0916新增*/
@media (min-width:1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1400px!important;
  }
}

@media screen and (max-width: 1200px){
	.mainactimg img {
		height: inherit;
	}

/*salina_0221新增*/
    .hots {
    padding: 40px 60px 40px 20px;
    }
}

 @media screen and (max-width: 1024px){
/*
.mainactimg img {
    height: 420px;
}
*/
.content2 {
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-size: cover;
    border-top: 0px;
}
.gridimg iframe {
    width: 100%;
    height: 280px;
}
}

.rightfloat {
    display: none;
}
.exchange {
    position: fixed;
    right: 0px;
    width: 85px;
    height: 75px;
    background: #00a6ed;
    color: #fff;
    border-radius: 10px 0px 0px 10px;
    padding: 7px;
    z-index: 4;
    top: 85%;
}
.exchange a {
    color: #fff;
    font-size: smaller;
}

.buttons button {
    background: #000;
    color: #fff;
    margin-top: 10px;
}
.bread .accesskey {
    position: absolute;
    left: 0;
    color: #231815;
    top: 11px;
    letter-spacing: 0;
    font-size: 70%;
}

.bread nav {
    position: relative;
}
a{
	display:block;
}
.bread a, .editor a{
  display:initial
}