@charset "UTF-8";
@import url(reset.css);
@import url(fontawesome6/css/all.css);
@import url(rwdgrid.css);
@import url(textEditor.css);
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+TC:wght@100..900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap");

.scrollHint, .slick-slider .slick-dots li button::before,
.controlBox .slick-dots li button::before, .arrowBox .arrow::before, .arrowBox .arrow, .imh_opacity img,  .classBox a,
.classBox span,   footer .countryBox .Txt .title, footer .countryBox .Txt, footer .countryBox .Img img, footer .countryBox .Img, .slideMenuArea .contactBox .contactBtn, .slideMenuArea .menuBox .nav .submenu .submenuItemTitle.hasThirdMenu::before, .slideMenuArea .menuBox .nav .submenu .submenuItemTitle.hasThirdMenu::after, .slideMenuArea .menuBox .nav > .menuItem.dropDown.hasSubMenu > span > a::before, .slideMenuArea .menuBox .nav > .menuItem.dropDown.hasSubMenu > span > a::after, .slideMenuTrigger .line::before, .slideMenuTrigger .line::after, .slideMenuTrigger,  header .contactBox .contactBtn, header, .loadingArea.show, .moduleMask, .moduleBox.cart .cartList .del, .moduleBox.privacy .customList .topBox .trigger label span::before, .moduleBox.privacy .customList .topBox .trigger label span, .moduleBox.privacy .customList .topBox .subtitle, .moduleBox.privacy .customList .topBox::before, .moduleBox.privacy .btnBox .btn.textLink::before,   .btnBox .btn.bgSecond.animation::after, .btnBox .btn.animation::after, .btnBox .btn, button, a, .formBox .columnCheckBox .columnCheckLabel .columnCheck::after, .formBox .columnCheckBox .columnCheckLabel .columnCheck::before {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}






@-webkit-keyframes btnAni {
  20% {
    background-color: rgba(255, 134, 1, 0.3);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    background-color: transparent;
  }
}

@keyframes btnAni {
  20% {
    background-color: rgba(255, 134, 1, 0.3);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    background-color: transparent;
  }
}
@-webkit-keyframes slideLeftAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideLeftAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes slideDownAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideDownAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideUpAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideUpAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes aniSlideLeft {
  0% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes aniSlideLeft {
  0% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes aniSlideRight {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes aniSlideRight {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes aniSlideDown {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes aniSlideDown {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes bannerScrollAnimation {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes bannerScrollAnimation {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes scrollHorizontal {
  100% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
}
@keyframes scrollHorizontal {
  100% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
}
@-webkit-keyframes scrollVertical {
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
  }
}
@keyframes scrollVertical {
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    opacity: 0;
  }
}
@-webkit-keyframes loadingAni {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-15%);
            transform: translateY(-15%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes txtMoveAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2530px 0;
  }
}
@keyframes txtMoveAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -2530px 0;
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate2 {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rotate2 {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes upDown {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}
@keyframes upDown {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}
@-webkit-keyframes arrRight {
  0%, 100% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
  50% {
    -webkit-transform: translate(5px, 0%);
            transform: translate(5px, 0%);
  }
}
@keyframes arrRight {
  0%, 100% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
  50% {
    -webkit-transform: translate(5px, 0%);
            transform: translate(5px, 0%);
  }
}
@-webkit-keyframes dotAni {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    opacity: 0.1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}
@keyframes dotAni {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    opacity: 0.1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}
@-webkit-keyframes cardShowAni {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  99% {
    opacity: 1;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}
@keyframes cardShowAni {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  99% {
    opacity: 1;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}
@-webkit-keyframes cardAni {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes cardAni {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes rotate3 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes rotate3 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes upDown {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@-webkit-keyframes upDown2 {
  0%, 100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes upDown2 {
  0%, 100% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes upDown3 {
  0%, 100% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes upDown3 {
  0%, 100% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes upDown4 {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}
@keyframes upDown4 {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
}
@keyframes arrRight {
  0%, 100% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
  50% {
    -webkit-transform: translate(5px, 0%);
            transform: translate(5px, 0%);
  }
}
@-webkit-keyframes arrRight2 {
  0%, 100% {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  50% {
    -webkit-transform: translate(5px, -50%);
            transform: translate(5px, -50%);
  }
}
@keyframes arrRight2 {
  0%, 100% {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  50% {
    -webkit-transform: translate(5px, -50%);
            transform: translate(5px, -50%);
  }
}
@-webkit-keyframes arrRight3 {
  0%, 100% {
    -webkit-transform: translate(0, -50%) rotate(180deg);
            transform: translate(0, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(5px, -50%) rotate(180deg);
            transform: translate(5px, -50%) rotate(180deg);
  }
}
@keyframes arrRight3 {
  0%, 100% {
    -webkit-transform: translate(0, -50%) rotate(180deg);
            transform: translate(0, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(5px, -50%) rotate(180deg);
            transform: translate(5px, -50%) rotate(180deg);
  }
}
@keyframes dotAni {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    opacity: 0.1;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
}
@-webkit-keyframes initialAnimateInHeader {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes initialAnimateInHeader {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body {
  background-color: #fff;
  font-size: 16px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body.overflow, body.popwinOverflow, body.loadingOverflow {
  overflow: hidden;
}
body.errorPage .mainArea {
  width: 100%;
  height: calc(100vh - 300px);
  min-height: 500px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body.errorPage .mainArea .top {
  max-width: 380px;
  color: #ff8601;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 auto;
}
@media (max-width: 768px) {
  body.errorPage .mainArea {
    height: 50vh;
    min-height: 350px;
  }
  body.errorPage .mainArea .top {
    font-size: 24px;
  }
}
body:not(.WebSiteHome) .contentBox {
  padding: 80px 0 0;
}
@media (max-width: 1180px) {
  body:not(.WebSiteHome) .contentBox {
    padding: 30px 0 0;
  }
}
body:not(.WebSiteHome) .mainArea {
  background-color: #f4f4f4;
}

address {
  font-style: normal;
}

a {
  color: #323232;
  cursor: pointer;
}
@media (min-width: 1181px) {
  a:hover {
    color: #ff8601;
  }
}

input[type=text],
input[type=password],
textarea,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  outline: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
}

select {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

input[type=file],
input[type=file]::-webkit-file-upload-button {
  /* chromes and blink button */
  cursor: pointer;
}

.Img img {
  height: auto;
}

div.titan {
  display: none;
}

[class*=col-] {
  float: left;
}

.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.33%;
}
.col-4 {
  width: 25%;
}
.col-5 {
  width: 20%;
}
@media (max-width: 480px) {
  .col-1, .col-2, .col-3, .col-4, .col-5 {
    float: none;
    width: 100%;
  }
}

/* 共用的樣式 */
.titleBox {
  position: relative;
  margin-bottom: 30px;
}



.titleBox .title {
  color: #08409B;
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline;
  position: relative;
}
@media (max-width: 600px) {
  .titleBox .title {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .titleBox .title {
    font-size: 28px;
  }
}
.titleBox .title:after {
  position: absolute;
  left: -30px;
  top: -4px;
  content: "";
  width: 56px;
  height: 56px;
  background-color: #FC0;
  border-radius: 50%;
  z-index: -1;
}
@media (max-width: 600px) {
  .titleBox .title:after {
    width: 44px;
    height: 44px;
    left: -33px;
  }
}
@media (max-width: 480px) {
  .titleBox .title:after {
    left: -20px;
  }
}



.titleBox.center {
  text-align: center;
}


.btnBox {
  margin-top: 20px;
}
.btnBox.flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -6px;
  margin-right: -6px;
}
.btnBox.flex.left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.btnBox.flex.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.btnBox.flex .btn {
  min-width: auto;
  max-width: 240px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 6px;
}
.btnBox.single.center {
  text-align: center;
}
.btnBox.single .btn {
  width: 100%;
  max-width: 240px;
}
@media (max-width: 480px) {
  .btnBox.single .btn {
    max-width: 100%;
  }
}
.btnBox.full .btn {
  width: 100%;
}
.btnBox .btn {
  min-width: 200px;
  border-radius: 50px;
  display: inline-block;
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  z-index: 1;
   box-shadow: 5px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

.btnBox .btn1 {
  min-width: 200px;
  border-radius: 50px;
  display: inline-block;
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  z-index: 1;
   color:#153F99;
   box-shadow: 5px 3px 5px 0px rgba(0, 0, 0, 0.2);
}


@media (max-width: 768px) {
  .btnBox .btn {
    padding: 13px;
  }
}
@media (min-width: 1181px) {
  .btnBox .btn:hover {
    background-color: #0084ff;
    border-color: #0084ff;
    color: #ff8601;
  }
}
.btnBox .btn.small {
  font-size: 13px;
  padding: 10px 15px;
}
.btnBox .btn.animation {
  overflow: hidden;
}
.btnBox .btn.animation::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color:#DD892E;
}
@media (min-width: 1181px) {
  .btnBox .btn.animation:hover::after {
    width: 100%;
    left: 0;
    right: auto;
  }
}
.btnBox .btn.bgMain {
  background-color: #007979;
  border: 1px solid transparent;
  color: #fff;
  font-size:25px;
}
@media (min-width: 1181px) {
  .btnBox .btn.bgMain:hover {
    color: #fff;
    border: 1px solid #1CBEAD;
  }
  .btnBox .btn.bgMain:hover:not(.animation) {
    background-color: #1CBEAD;
  }
}

@media(max-width:480px){
	
.btnBox .btn.bgMain {
  border: 1px solid transparent;
  color: #fff;
  font-size:20px;
  width:100%;
  padding:8px 15px;
   background-color: #0E6249;
}	
	
	}


.btnBox .btn.bgSecond {
  min-width: 140px;
  padding: 10px 20px;
  background-color: #0084ff;
  border: 1px solid transparent;
  color: #fff;
}
.btnBox .btn.bgSecond.animation {
  overflow: hidden;
}
.btnBox .btn.bgSecond.animation::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: #ff8601;
}
@media (min-width: 1181px) {
  .btnBox .btn.bgSecond.animation:hover::after {
    width: 100%;
    left: 0;
    right: auto;
  }
}
@media (min-width: 1181px) {
  .btnBox .btn.bgSecond:hover {
    border: 1px solid #ff8601;
  }
  .btnBox .btn.bgSecond:hover.animation::after {
    background-color: #ff8601;
  }
  .btnBox .btn.bgSecond:hover:not(.animation) {
    background-color: #fff;
  }
}
.btnBox .btn.bgthird {
  min-width: 100px;
  padding: 13px 20px;
  background-color: #ff8601;
  border: 1px solid transparent;
  color: #fff;
}
@media (min-width: 1181px) {
  .btnBox .btn.bgthird:hover {
    color: #fff;
    border: 1px solid #0084ff;
  }
  .btnBox .btn.bgthird:hover:not(.animation) {
    background-color: #fff;
  }
}
.btnBox .btn.colorSecond {
  background-color: #fff;
  border: 1px solid #0084ff;
  color: #0084ff;
}
.btnBox .btn.colorSecond.animation::after {
  background-color: #0084ff;
}
@media (min-width: 1181px) {
  .btnBox .btn.colorSecond:hover {
    color: #fff;
  }
  .btnBox .btn.colorSecond:hover:not(.animation) {
    background-color: #0084ff;
  }
}
.btnBox .btn.rounded {
  border-radius: 24.5px;
}
.btnBox .btn.roundedSlightly {
  border-radius: 4px;
}

/* 共用的樣式 END */
.outerWrap {
  max-width: 1920px;
  margin: 0 auto;
  padding-top:70px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .outerWrap {
    padding-top: 60px;
    padding-bottom: calc(0px + env(safe-area-inset-bottom));
  }
}

.wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px;
}
@media (max-width: 1180px) {
  .wrap {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 768px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}



/*header*/
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 5px 3px 5px 0px rgba(0, 0, 0, 0.2);
background: #FFFFFF 
}

@media (max-width: 1180px) {
  header {
           box-shadow: 5px 3px 5px 0px rgba(0, 0, 0, 0.2);
  }
}
header .wrap {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  max-width: 1600px;
  padding: 10px;
}
@media (max-width: 1180px) {
  header .wrap {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
header .logo {
  padding: 3px 0;
  width: 260px;
}
header .logo a {
  display: block;
}
header .logo img {
  width: 100%;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

header .rightBox {
  width: calc(100% - 115px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .menuBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-right: 20px;
}
@media (max-width: 1180px) {
  header .menuBox {
    display: none;
  }
}
header .menu > .menuItem {
  position: relative;
  display: inline-block;
  
}
header .menu > .menuItem a{
  color:#112A70;
  font-size: 20px;
  font-weight:500;
  letter-spacing: 1px;
  line-height: 20px;
  padding: 30px 20px;
}
header .menu > li:not(:last-child):after {
	content: "";
	position: absolute;
	top: 5px;
	right: 0;
	width: 1px;
	height: 14px;
	background-color: #112A70;
}
header .menu > .menuItem a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background: #0166B8;
  position: absolute;
  top: unset;
  left: 50%;
  right: unset;
  bottom: -10px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
@media (min-width: 1181px) {
  header .menu > .menuItem a:hover::before {
    width: 100%;
  }
}
header .menu > .menuItem a.current::before {
  width: 100%;
}



header .menu > .menuItem a.current {
  color:#0166B8;
}
@media (min-width: 1181px) {
  header .menu > .menuItem a:hover {
    color:#0166B8;
  }
}

header .contactBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  height:40px;
  background:#08409B;
  border-radius:100em;
  margin-right:0px;
}
@media (max-width: 1180px) {
  header .contactBox {
    display: none;
  }
}
@media (min-width: 1181px) {
  header .contactBox:hover .contactBtn {
	color:#fff;
  }
}
header .contactBox .contactBtn {
  width: 100%;
  height: 100%;
  border-radius:50px;
  font-size: 18px;
  letter-spacing: 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  font-weight:bold;
}

header .contactBox .contactBtn i{ background:#ffffff; border-radius:100%; color:#08409B; width:30px;height:30px; line-height:30px; text-align:center;margin-right:10px;}

@media (min-width: 1181px) {
  header .logo,
header .menuBox,
header .contactBox, {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
 
}


/*slideMenu*/
.slideMenuTrigger {
 width: 57px;
 height: 57px;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 background-color: #fff;
 cursor: pointer;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -ms-flex-negative: 0;
     flex-shrink: 0;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 gap: 7px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
 display: none;
}
.slideMenuTrigger .line {
 width: 30px;
 height: 4px;
 background-color: #112A70;
 border-radius: 5px;
 -webkit-transform: translateX(-5px);
         transform: translateX(-5px);
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.slideMenuTrigger::before, .slideMenuTrigger::after {
 content: "";
 width: 30px;
 height: 4px;
 background-color:#112A70;
 border-radius: 5px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.slideMenuTrigger.show {
 -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
}
.slideMenuTrigger.show .line {
 -webkit-transform: translateX(0);
         transform: translateX(0);
}
.slideMenuTrigger.show::before, .slideMenuTrigger.show::after {
 opacity: 0;
}
@media (max-width: 1180px) {
 .slideMenuTrigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }
}
@media (max-width: 540px) {
 .slideMenuTrigger {
  width: 50px;
  height: 50px;
 }
 .slideMenuTrigger .line {
  width: 25px;
  height: 3px;
 }
 .slideMenuTrigger::before, .slideMenuTrigger::after {
  width: 25px;
  height: 3px;
 }
}

.slideMenuArea {
 position: fixed;
  top: 0;
  right: 0;
  z-index: 99;

  width: 100%;
  height: 100dvh;
  padding-top: 85px;

  background: #fff;
  opacity: 0;
  pointer-events: none;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  display: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

  transform: translateY(-100%);
  transition: all 0.6s ease-in-out;
}
.slideMenuArea::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
 background-color: #007979;
 border-radius: 5px;
}
.slideMenuArea::-webkit-scrollbar {
 width: 5px;
 height: 5px;
 background-color: #fff;
 border-radius: 5px;
}
.slideMenuArea::-webkit-scrollbar-thumb {
 background: #141b4d;
 border-radius: 5px;
}
.slideMenuArea.show {
 opacity: 1;
 pointer-events: auto;
 -webkit-transform: translateY(0);
         transform: translateY(0);
}
.slideMenuArea .wrap {
 padding-top: 50px;
 padding-bottom: 50px;
}
.slideMenuArea .nav {
 display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
 
}
.slideMenuArea .nav .menuItem { border-bottom:1px dashed rgba(222,222,222,0.8);}

.slideMenuArea .nav .menuItem a, .slideMenuArea .nav .menuItem span {
 font-size: 28px;
 font-weight: 600;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color:#08409B;
 letter-spacing: 2px;
}
.slideMenuArea .contactBtn {
   max-width: 190px;
  flex-shrink: 0;
  margin-top: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 20px 30px;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;

  font: 500 16px/1 "Roboto", "Microsoft JhengHei", serif;
  color: #08409B;
  letter-spacing: 0.64px;
}

.slideMenuArea .socialBox {
 margin-top: 30px;
}
.slideMenuArea .copyrightBox {
 width: 100%;
  padding: 20px;
  background: #08409B;

  display: flex;
  align-items: center;
  justify-content: center;
}
.slideMenuArea .copyrightBox a, .slideMenuArea .copyrightBox span {
 font-size: 13px;
 font-weight: 400;
 font-family: "Roboto", "Microsoft JhengHei", serif;
 color:#fff;
 opacity: 0.8;
}
.slideMenuArea .copyrightBox .copyright {
 padding-right: 15px;
 margin-right: 15px;
}
.slideMenuArea .copyrightBox .copyright::before {
 content: "";
 width: 2px;
 height: 15px;
 background-color: #fff;
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
 right: 0;
 opacity: 0.2;
}
@media (max-width: 1180px) {
 .slideMenuArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }
}
@media (max-width: 768px) {
 .slideMenuArea {
  padding-top: 70px;
 }
 .slideMenuArea .nav {
  gap: 30px;
 }
 .slideMenuArea .nav .menuItem a, .slideMenuArea .nav .menuItem span {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.96px;
 }
 .slideMenuArea .copyrightBox {
  padding: 15px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  text-align: center;
 }

 .slideMenuArea .copyrightBox .copyright {
  padding-right: 0;
  margin-right: 0;
 }
 .slideMenuArea .copyrightBox .copyright::before {
  display: none;
 }
}
@media (max-width: 440px) {
 .slideMenuArea .nav {
  gap: 20px;
 }

 .slideMenuArea .contactBtn {
  margin-top: 50px;
 }
 .slideMenuArea .socialBox .socialList {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
 }
 .slideMenuArea .copyrightBox {
  padding: 10px 0;
 }

}


/*banner*/
.bannerArea {
  clear: both;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.bannerArea .wrap {
  max-width: 100%;
  padding:0px;
}

.bannerArea .bannerBox img {
  width: 100%;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.bannerArea .bannerItem {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bannerArea .bannerBox2 img {
  width: 100%;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.bannerArea .bannerBox2 .bannerItem {
 display:none
}

.bannerArea .bannerLink {
  display: block;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


@media (max-width: 768px){
.bannerArea .bannerBox {
 display:none;
}

.bannerArea .bannerBox2 .bannerItem {
 display:block;
 margin-top:0px
}

}



/*footer*/
footer {
  padding: 10px 0 0;
  position: relative;
  z-index: 2;
background:#DBE1F8
}
footer .wrap {
max-width:1440px;
color:#666; 
font-size:14px; 
}



@media (max-width: 1180px) {
  footer {
	  padding:20px 0 
  }
 
}

@media (max-width: 480px) {
  footer {
	  padding:10px 0 60px 0 
  }
 
}


/*手機快捷選單*/
.fixedQuickLink {
  width: 100%;
  background-color: #000;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
}


@media (min-width: 481px) {
  .fixedQuickLink {
    display: none;
  }
}
.fixedQuickLink ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.fixedQuickLink li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.fixedQuickLink li:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.fixedQuickLink a,
.fixedQuickLink button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 55px;
  font-size: 16px;
  color: #fff;
}
.fixedQuickLink i {
  margin-right: 10px;
}
/*********右側快捷**********/

.sideLink {
  position: fixed;
  right: 10px;
  top:50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 50;
}

.sideLink a {
  width: 75px;
  height: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 20px;
  background-color: #3dd004;
  position: relative;
  margin-bottom:5px;
}


.sideLink a:first-child{ background:#00B800}
.sideLink a:last-child{background:#FF6600 }

.sideLink a:before, .sideLink a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius:20px 0 0 20px;
  background-color: rgba(61, 208, 4, 0.24);
  z-index: 1;
  display: none;
}
.sideLink a:before {
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
}
.sideLink a:after {
  left: -10px;
  right: -10px;
  top: -10px;
  bottom: -10px;
}
.sideLink i {
  position: relative;
  z-index: 3;
  color:#ffffff;
  font-size:40px;
}


@media (max-width: 768px) {	
.sideLink {
  position: fixed;
  right: 0px;
  top: 60%;

}

	.sideLink a {
  width: 64px;
  height: 64px;

}
	.sideLink i {
  font-size:36px;
}
 
}
@media (max-width: 480px) {
	.sideLink a {
  display:none;
}
 
	
}


/*********內頁**********/
.mainArea {
  padding: 0px 0;
}

.mainArea .contentBox {
  clear: both;
}

.mainArea.hasBanner {
  padding: 0;
}



/*側邊_聯絡資訊*/
.sideContactInfo li {
  margin-bottom: 20px;
}
.sideContactInfo .infoText {
  color: #666;
  letter-spacing: 0.5px;
}
.sideContactInfo a,
.sideContactInfo span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  color: #666;
}
.sideContactInfo i {
  display: inline-block;
  vertical-align: middle;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-right: 8px;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 20px;
  color: #666;
  text-align: center;
}
.sideContactInfo b {
  display: inline-block;
  vertical-align: middle;
  font-weight: 400;
}





/*圖片Hover效果1: 放大淡出*/
.imh_opacity {
  background-color: #000;
  overflow: hidden;
}
.imh_opacity img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media (min-width: 1181px) {
  .imh_opacity:hover img {
    opacity: 0.8;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.arrowBox {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: auto;
  pointer-events: none;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  z-index: 2;
}
@media (max-width: 640px) {
  .arrowBox {
    width: 100%;
  }
}
.arrowBox .arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  border: 1px solid #d4d4d6;
  background:#0A83E0;
}
@media (max-width: 1180px) {
  .arrowBox .arrow {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 1181px) {
  .arrowBox .arrow:hover {
    background-color: #FC0;
    border: 1px solid #FC0;
  }
  .arrowBox .arrow:hover::before {
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
}
.arrowBox .arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.arrowBox .arrowPrev {
  left: 0;
}
.arrowBox .arrowPrev::before {
  left: 45%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}
.arrowBox .arrowNext {
  right: 0;
}
.arrowBox .arrowNext::before {
  right: 45%;
  -webkit-transform: translateY(-50%) rotate(-135deg);
          transform: translateY(-50%) rotate(-135deg);
}
.arrowBox.simple .arrow {
  border: 1px solid transparent;
  width: 30px;
  height: 30px;
}
.arrowBox.simple .arrow::before {
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
@media (min-width: 1181px) {
  .arrowBox.simple .arrow:hover {
    background-color: #fff;
    border: 1px solid #ff8601;
  }
  .arrowBox.simple .arrow:hover::before {
    border-left: 1px solid #ff8601;
    border-bottom: 1px solid #ff8601;
  }
}

.slick-slider .slick-dots,
.controlBox .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
}
.slick-slider .slick-dots.center,
.controlBox .slick-dots.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slick-slider .slick-dots.vertical,
.controlBox .slick-dots.vertical {
  width: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
}
.slick-slider .slick-dots.vertical li,
.controlBox .slick-dots.vertical li {
  margin: 8px 0;
}
.slick-slider .slick-dots:not(.vertical) li,
.controlBox .slick-dots:not(.vertical) li {
  margin: 0 8px;
}
.slick-slider .slick-dots.large li,
.controlBox .slick-dots.large li {
  width: 16px;
  height: 16px;
}
.slick-slider .slick-dots.white li button::before,
.controlBox .slick-dots.white li button::before {
  background-color: #fff;
}
.slick-slider .slick-dots li,
.controlBox .slick-dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  overflow: hidden;
}
.slick-slider .slick-dots li button,
.controlBox .slick-dots li button {
  width: 100%;
  height: 100%;
  border: none;
  color: transparent;
  display: block;
  padding: 0;
  position: relative;
}
.slick-slider .slick-dots li button::before,
.controlBox .slick-dots li button::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.slick-slider .slick-dots li.slick-active button::before,
.controlBox .slick-dots li.slick-active button::before {
  background-color: #ff8601;
  opacity: 1;
}
@media (min-width: 1181px) {
  .slick-slider .slick-dots li:hover button::before,
.controlBox .slick-dots li:hover button::before {
    background-color: #ff8601;
    opacity: 1;
  }
}

.slickClsList:not(.slick-slider) {
  overflow: hidden;
}
.slickClsList:not(.slick-slider) .slickClsItem:not(:first-child) {
  display: none;
}