/* CSS Document */
@import url(reset.css);
@import url(font-awesome.min.css);
@import url(rwdgrid.css);
@import url(textEditor.css);
@import url(contentbuilder.css);
@import url("css2.css");

.tab a:after,
.pageBox .pageList.number a.firstBtn::before,
.pageBox .pageList.number a.firstBtn::after,
.pageBox .pageList.number a.lastBtn::before,
.pageBox .pageList.number a.lastBtn::after,
.pageBox .pageList a.prevBtn::before,
.pageBox .pageList a.nextBtn::before,
.mListArea .catalogMList .item,
.fixedQuickLink a .icon,
.privacyArea,
.fixedArea .chatBox,
.fixedArea .compareBox .icon,
.fixedArea .inquireBox .icon,
.fixedArea .compareBox,
.fixedArea .inquireBox,
.fixedArea,
footer .footerMenu .submenu a:after,
footer .footerMenu .mainLink::before,
footer .footerMenu .mainLink::after,
footer .goTop,
footer .socialBox a,
.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown::before,
.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown::after,
.slideMenuArea .menuBox .nav>li.dropDown>span>a::before,
.slideMenuArea .menuBox .nav>li.dropDown>span>a::after,
.slideMenuArea .funcBox .languageBox .languageSubmenu,
.slideMenuArea .funcBox .icon .Img,
.slideMenuArea .funcBox .icon,
.slideMenuArea .topBox .contactBtn,
.slideMenuArea .topBox .slideMenuLogo,
.slideMenuArea .topBox,
.slideMenuTrigger .close,
.slideMenuTrigger .open,
.slideMenuTrigger .line,
.slideMenuTrigger,
header .submenuBox .pdMenuText li a,
header .submenuBox .pdMenuText li:after,
header .menu>li a,
header .menu>li:after,
header .languageBox .languageList,
header .menuBtnGroup .icon img,
header .menuBtnGroup .icon,
header,
.loadingArea,
.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,
.moduleBox .moduleClose,
.arrowBox .prev::before,
.arrowBox .next::before,
.arrowBox .prev,
.arrowBox .next,
.btnBox .btn.animation::after,
a,
.formBox .columnCheckBox .columnCheckLabel .columnCheck::after,
.formBox .columnCheckBox .columnCheckLabel .columnCheck::before {
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.formBox.changePassword {
   max-width: 640px;
   margin: 0 auto;
}

.formBox .formList {
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   color: #2f2f2f;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   font-size: 16px;
   margin-left: -10px;
   margin-right: -10px;
   position: relative;
}

.formBox .formRow {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.formBox .formColumn {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 15px 10px;
   position: relative;
}

.formBox .formColumn.select {
   position: relative;
}

.formBox .formColumn.select::before {
   content: "";
}

.formBox .formColumn.pt0 {
   padding-top: 0;
}

.formBox .formColumn.pb0 {
   padding-bottom: 0;
}

@media (max-width: 1180px) {
   .formBox .formColumn {
      padding: 10px;
   }
}

.formBox .select2-container {
   width: 100% !important;
}

.formBox .select2-container--default .select2-selection--single {
   border-radius: 22px;
   border-color: #d4d4d4;
   height: 44px;
}

.formBox .select2-dropdown {
   border-radius: 22px;
}

.formBox .select2-container--open .select2-dropdown--below {
   padding: 14px 28px;
}

.formBox .select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 46px;
   padding-left: 28px;
}

.formBox .select2-selection__arrow {
   z-index: 1;
   top: 50% !important;
   right: 20px !important;
   width: 8.5px !important;
   height: 8.5px !important;
   border-left: 2px solid #333;
   border-top: 2px solid #333;
   margin-top: -5px;
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
}

.formBox .select2-selection__arrow b {
   display: none;
}

.formBox .columnTitle {
   width: 100%;
   font-weight: 500;
   letter-spacing: 0.02rem;
   line-height: 1.25;
   margin-bottom: 12px;
   position: relative;
   padding-left: 28px;
}

.formBox .columnTitle.withCheckBox {
   width: auto;
}

.formBox .columnTitle.withCheckBox+.columnCheckBox {
   margin-left: 10px;
   margin-bottom: 12px;
}

.formBox .columnTitle.requireStyle {
   padding-left: 28px;
}

.formBox .columnTitle.requireStyle::before {
   content: "*";
   color: rgb(250, 150, 150);
   font-size: 18px;
   font-weight: 700;
   position: absolute;
   top: 3px;
   left: 10px;
   z-index: 1;
}

.formBox .columnCheckBox {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 -5px;
}

.formBox .columnCheckBox .columnCheckLabel {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 2px 5px;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck {
   width: 16px;
   height: 16px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 0;
   background: transparent;
   border: none;
   cursor: pointer;
   display: inline-block;
   margin: 0;
   outline: 0;
   position: relative;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck::before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: transparent;
   border-radius: 50%;
   border: 1px solid #cecece;
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 1;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck::after {
   content: "";
   width: 50%;
   height: 50%;
   background-color: #333;
   border-radius: 50%;
   display: inline-block;
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 2;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck:checked::after {
   opacity: 1;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck:disabled::before {
   background-color: #e5e5e5 !important;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck:disabled::after {
   background-color: #b5b5b5 !important;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck:disabled+span {
   color: #737373 !important;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck.square::before,
.formBox .columnCheckBox .columnCheckLabel .columnCheck.square::after {
   border-radius: 0;
}

.formBox .columnCheckBox .columnCheckLabel .columnCheck.error::before {
   border-color: #000;
}

.formBox .columnCheckBox .columnCheckBoxTitle {
   display: inline-block;
   font-size: 15px;
   line-height: 1;
   letter-spacing: 0.02rem;
   margin-left: 4px;
}

.formBox .columnSelect:disabled {
   background-color: #e5e5e5 !important;
   color: #737373 !important;
}

.formBox .columnInput {
   padding: 5px 10px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .columnInput:focus {
   border-color: #000;
}

.formBox .columnInput::-webkit-input-placeholder {
   color: #a6a6a6;
}

.formBox .columnInput::-moz-placeholder {
   color: #a6a6a6;
}

.formBox .columnInput:-ms-input-placeholder {
   color: #a6a6a6;
}

.formBox .columnInput::-ms-input-placeholder {
   color: #a6a6a6;
}

.formBox .columnInput::placeholder {
   color: #a6a6a6;
}

.formBox .columnInput:disabled {
   background-color: #e5e5e5 !important;
   color: #737373 !important;
}

.formBox .columnInput,
.formBox .columnArea {
   width: 100%;
   border: 1px solid #d4d4d4;
   border-radius: 3px;
   color: #737373;
   font-weight: 500;
   border-radius: 22px;
   padding: 0 28px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .columnInput:focus,
.formBox .columnArea:focus {
   border-color: #000;
}

.formBox .columnInput,
.formBox .columnSelect {
   height: 44px;
}

.formBox .columnArea {
   height: 200px;
   padding: 28px;
}

@media (max-width: 1180px) {
   .formBox .columnArea {
      height: 120px;
      padding: 5px 10px;
   }
}

.formBox .columnSelect {
   width: 100% !important;
   color: #737373;
   font-weight: 500;
}

.formBox .ms-parent {
   width: 100% !important;
}

.formBox .multiSelect .ms-drop label {
   padding: 0;
}

.formBox .multiSelect .ms-drop label span {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 10px;
   -moz-column-gap: 10px;
   column-gap: 10px;
   font-size: 16px;
   line-height: 1.2;
   letter-spacing: 0;
}

.formBox .multiSelect .ms-drop label span:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 1px solid #000;
   display: inline-block;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .multiSelect .ms-drop label span:after {
   content: "";
   left: 5px;
   top: 3.5px;
   position: absolute;
   width: 5px;
   height: 9px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   -webkit-transform: rotate(40deg);
   transform: rotate(40deg);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .multiSelect .ms-drop input {
   display: none;
}

.formBox .multiSelect .ms-drop input:checked+span:before {
   background-color: #000;
}

.formBox .checkTitle {
   padding-left: 28px;
}

.formBox .customFields.mt {
   margin-top: 50px;
}

.formBox .checkTitle,
.formBox .customFields {
   margin-bottom: 12px;
}

.formBox .checkTitle span,
.formBox .customFields span {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 10px;
   -moz-column-gap: 10px;
   column-gap: 10px;
   font-size: 16px;
   line-height: 1.2;
   letter-spacing: 0;
}

.formBox .checkTitle span:before,
.formBox .customFields span:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 1px solid #000;
   display: inline-block;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .checkTitle span:after,
.formBox .customFields span:after {
   content: "";
   left: 5px;
   top: 3px;
   position: absolute;
   width: 5px;
   height: 9px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   -webkit-transform: rotate(40deg);
   transform: rotate(40deg);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .checkTitle input,
.formBox .customFields input {
   display: none;
}

.formBox .checkTitle input:checked+span:before,
.formBox .customFields input:checked+span:before {
   background-color: #000;
}

.formBox .checkBoxGroup {
   padding-left: 28px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 20px;
   -moz-column-gap: 20px;
   column-gap: 20px;
   row-gap: 8px;
}

.formBox .checkBoxGroup label {
   padding: 0;
}

.formBox .checkBoxGroup label span {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 10px;
   -moz-column-gap: 10px;
   column-gap: 10px;
   font-size: 16px;
   line-height: 1.2;
   letter-spacing: 0;
}

.formBox .checkBoxGroup label span:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 1px solid #000;
   display: inline-block;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .checkBoxGroup label span:after {
   content: "";
   left: 5px;
   top: 3.5px;
   position: absolute;
   width: 5px;
   height: 9px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   -webkit-transform: rotate(40deg);
   transform: rotate(40deg);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.formBox .checkBoxGroup input {
   display: none;
}

.formBox .checkBoxGroup input:checked+span:before {
   background-color: #000;
}

.formBox .btnBox {
   width: 100%;
}

.formBox .noteTxt {
   width: 100%;
   color: #999;
   font-size: 15px;
   line-height: 1.5;
   letter-spacing: 0.02rem;
   margin-top: 10px;
}

.formBox .noteTxt.red {
   color: #f00;
}

.page {
  width: 100%;
  padding: 50px 0 15px 0;
  text-align: center;
  overflow: hidden;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page a,
.page span {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 3px 10px;
  margin: 0 3px;
}

.page span,
.page a:hover {
  background: #000;
  border: 1px solid #000;
  color: #fff !important;
  border-radius: 5px;
}

.page .prev,
.page .next {
  margin: 0 10px;
}


@media (max-width: 1180px) {
   .formBox .noteTxt {
      font-size: 14px;
   }
}

.formBox .error {
   border-color: #f00 !important;
}

@-webkit-keyframes textSlideRightAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@keyframes textSlideRightAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@-webkit-keyframes textSlideRightAnimation1 {
   0% {
      opacity: 0;
      margin-left: 10px;
   }

   100% {
      opacity: 1;
      margin-left: 0;
   }
}

@keyframes textSlideRightAnimation1 {
   0% {
      opacity: 0;
      margin-left: 10px;
   }

   100% {
      opacity: 1;
      margin-left: 0;
   }
}

@-webkit-keyframes textSlideDownAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@keyframes textSlideDownAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@-webkit-keyframes textSlideUpAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@keyframes textSlideUpAnimation {
   0% {
      opacity: 0;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
   }

   100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }
}

@-webkit-keyframes opacity0to0 {
   0% {
      opacity: 0;
   }

   50% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes opacity0to0 {
   0% {
      opacity: 0;
   }

   50% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@-webkit-keyframes opacity0to1 {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes opacity0to1 {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@-webkit-keyframes opacity1to0 {
   0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }

   100% {
      opacity: 0;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
   }
}

@keyframes opacity1to0 {
   0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
   }

   100% {
      opacity: 0;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
   }
}

@-webkit-keyframes rotate {
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes rotate {
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-webkit-keyframes scale {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }
}

@keyframes scale {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }
}

body {
   background-color: #fff;
   font-size: 14px;
   font-family: "Roboto", "Noto Sans Tc", Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", 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 {
   text-align: center;
   max-width: 450px;
   color: #999;
   font-size: 28px;
   font-weight: 500;
   line-height: 1.5;
   margin: 0 auto;
}

body.errorPage .mainArea .top a {
   color: #000;
}

@media (max-width: 768px) {
   body.errorPage .mainArea {
      height: 50vh;
      min-height: 350px;
   }

   body.errorPage .mainArea .top {
      font-size: 24px;
   }
}

body:not(.WebSiteHome) .mainArea {
   margin-top: 75px;
}

@media (max-width: 1180px) {
   body:not(.WebSiteHome) .mainArea {
      margin-top: 45px;
   }
}

@media (max-width: 650px) {
   body:not(.WebSiteHome) .mainArea {
      margin-top: 20px;
   }
}

@media (max-width: 640px) {
   body:not(.WebSiteHome) .bannerArea .bannerItem .Img {
      padding-bottom: 56.25%;
   }
}

address {
   font-style: normal;
}

a {
   color: #000;
   cursor: pointer;
}

a:hover {
   color: #000;
}

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: 16px;
   font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
   outline: none;
   padding: 0;
   margin: 0;
}

select {
   cursor: pointer;
}

textarea {
   resize: vertical;
}

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%;
   }
}

.btnBox {
   border-radius: 30px;
}

.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: 0 -6px;
}

@media (max-width: 400px) {
   .btnBox.flex {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      row-gap: 16px;
      margin: 0;
   }
}

.btnBox.flex .btn {
   -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: 200px;
}

@media (max-width: 480px) {
   .btnBox.single .btn {
      max-width: 100%;
   }
}

.btnBox.full .btn {
   width: 100%;
}

.btnBox .btn {
   overflow: hidden;
   display: block;
   position: relative;
   text-align: center;
   z-index: 1;
   border-radius: 30px;
   padding: 21px;
   color: #fff;
   font-weight: 700;
   min-width: 200px;
   -webkit-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

@media (max-width: 470px) {
   .btnBox .btn {
      padding: 16px;
      min-width: 180px;
      font-size: 15px;
   }
}

.btnBox .btn span {
   display: inline-block;
   margin-left: 5px;
}

.btnBox .btn_color_main {
   border: 1px solid #000;
   background-color: #000;
   color: #fff;
}

.btnBox .btn_color_main.animation:after {
   background-color: #f6f6f6;
}

@media (min-width: 1201px) {
   .btnBox .btn_color_main:hover {
      border-color: #f6f6f6;
      background-color: #f6f6f6;
   }
}

.btnBox .btn_color_sec {
   border: 1px solid #f6f6f6;
   background-color: #f6f6f6;
   color: #000;
}

@media (min-width: 1201px) {
   .btnBox .btn_color_sec:hover {
      border-color: #000;
      background-color: #000;
   }
}

.btnBox .btn_color_white {
   border: 1px solid #000;
   background-color: #fff;
   color: #000;
}

@media (min-width: 1201px) {
   .btnBox .btn_color_white:hover {
      border-color: black;
      background-color: #000;
      color: #fff;
   }
}

.btnBox .btn_color_gray {
   border: 1px solid #bebebe;
   background-color: #cbcbcb;
   color: #fff;
}

@media (min-width: 1201px) {
   .btnBox .btn_color_gray:hover {
      border-color: #9e9e9e;
      background-color: #ababab;
   }
}

.btnBox .btn_color_darkgray {
   border: 1px solid #8d8d8d;
   background-color: #9a9a9a;
   color: #fff;
}

@media (min-width: 1201px) {
   .btnBox .btn_color_darkgray:hover {
      border-color: #6d6d6d;
      background-color: #7a7a7a;
   }
}

.btnBox .btn.animation.btn_color_main:after {
   background-color: #f6f6f6;
}

.btnBox .btn.animation.btn_color_sec:after {
   background-color: #000;
}

.btnBox .btn.animation::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   z-index: -1;
   width: 0;
   height: 100%;
   background-color: #535353;
}

@media (min-width: 1201px) {
   .btnBox .btn.animation:hover.btn_color_main {
      border-color: #f6f6f6;
      color: #000;
   }

   .btnBox .btn.animation:hover.btn_color_sec {
      border-color: #000;
      color: #f6f6f6;
   }

   .btnBox .btn.animation:hover::after {
      width: 100%;
      left: 0;
      right: auto;
   }
}

.arrowBox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 12px;
   -moz-column-gap: 12px;
   column-gap: 12px;
}

.arrowBox .prev,
.arrowBox .next {
   cursor: pointer;
   position: relative;
   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;
   width: 60px;
   height: 60px;
   background-color: #000;
   border: 2px solid #000;
   border-radius: 50%;
}

.arrowBox .prev::before,
.arrowBox .next::before {
   content: "";
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url("../images/go_top.png");
   width: 18px;
   height: 18px;
}

.arrowBox .prev:hover,
.arrowBox .next:hover {
   background-color: #fff;
}

.arrowBox .prev:hover:before,
.arrowBox .next:hover:before {
   -webkit-filter: contrast(0);
   filter: contrast(0);
}

@media (max-width: 450px) {

   .arrowBox .prev,
   .arrowBox .next {
      width: 44px;
      height: 44px;
   }
}

.arrowBox .next:before {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}

.arrowBox .prev:before {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

.outerWrap {
   padding-top: 80px;
   position: relative;
}

@media (max-width: 1180px) {
   .outerWrap {
      padding-top: 70px;
      padding-bottom: env(safe-area-inset-bottom);
   }
}

.wrap {
   width: 100%;
   max-width: 1560px;
   margin: 0 auto;
   padding-left: 30px;
   padding-right: 30px;
}

/*module*/
.moduleBox {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1005;
   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: 100%;
   height: 100%;
   padding-left: 20px;
   padding-right: 20px;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   -webkit-transition-property: top, opacity, visibility;
   transition-property: top, opacity, visibility;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
   /*洽詢車&購物車*/
   /*訂單查詢*/
   /*搜尋*/
   /*提醒使用cookie彈窗*/
}

.moduleBox.show {
   opacity: 1;
   visibility: visible;
}

.moduleBox.show .moduleWrap {
   opacity: 1;
   -webkit-transform: translateY(0);
   transform: translateY(0);
}

.moduleBox .moduleWrap {
   position: relative;
   width: 100%;
   max-width: 960px;
   background-color: #fff;
   pointer-events: auto;
   padding-top: 60px;
   opacity: 0;
   -webkit-transform: translateY(30px);
   transform: translateY(30px);
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.moduleBox .moduleTitle {
   color: #000;
   font-weight: 400;
   font-size: 24px;
   letter-spacing: 0.05em;
   padding-bottom: 10px;
   text-align: center;
}

.moduleBox .moduleContent {
   width: 100%;
   max-height: calc(90vh - 50px);
   overflow-y: auto;
   padding-left: 30px;
   padding-right: 30px;
   padding-bottom: 30px;
}

.moduleBox .moduleContent::-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: #f1f1f1;
}

.moduleBox .moduleContent::-webkit-scrollbar {
   width: 5px;
   height: 5px;
   background-color: #f1f1f1;
}

.moduleBox .moduleContent::-webkit-scrollbar-thumb {
   background: #000;
}

.moduleBox .moduleClose {
   width: 50px;
   height: 50px;
   background: none;
   background-color: #000;
   border: none;
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
}

.moduleBox .moduleClose::before,
.moduleBox .moduleClose::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -15px;
   margin-top: -0.5px;
   width: 30px;
   height: 1px;
   background-color: #fff;
}

.moduleBox .moduleClose::before {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.moduleBox .moduleClose::after {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.moduleBox .moduleClose:hover {
   background-color: #000;
}

.moduleBox.privacy .moduleWrap {
   max-width: 700px;
   padding-top: 50px;
   position: relative;
   z-index: 1004;
}

.moduleBox.privacy .moduleTitle {
   font-size: 20px;
   font-weight: 700;
   padding-bottom: 15px;
   text-align: left;
}

@media (max-width: 640px) {
   .moduleBox.privacy .moduleTitle {
      font-size: 18px;
      padding-bottom: 10px;
   }
}

.moduleBox.privacy .settingBox+.settingBox {
   margin-top: 25px;
}

.moduleBox.privacy .text {
   font-size: 15px;
   line-height: 1.35;
}

@media (max-width: 640px) {
   .moduleBox.privacy .text {
      font-size: 14px;
   }
}

.moduleBox.privacy .btnBox {
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 20px;
}

.moduleBox.privacy .btnBox .btn:not(.textLink) {
   padding: 15px;
}

.moduleBox.privacy .btnBox .btn.textLink {
   display: inline-block;
   font-size: 15px;
   font-weight: 500;
   position: relative;
}

.moduleBox.privacy .btnBox .btn.textLink::before {
   content: "";
   width: 0;
   height: 1px;
   background-color: #000;
   position: absolute;
   bottom: -3px;
   left: 50%;
}

@media (min-width: 1201px) {
   .moduleBox.privacy .btnBox .btn.textLink:hover::before {
      width: 100%;
      left: 0;
   }
}

.moduleBox.privacy .customList .customItem:not(:last-child) {
   padding-bottom: 10px;
}

.moduleBox.privacy .customList .topBox {
   -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;
   margin-bottom: 15px;
   position: relative;
}

.moduleBox.privacy .customList .topBox::before {
   content: "";
   width: 9px;
   height: 9px;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   pointer-events: none;
   position: absolute;
   top: 50%;
   right: 0;
   z-index: 1;
   -webkit-transform: translateY(-80%) rotate(-45deg);
   transform: translateY(-80%) rotate(-45deg);
}

.moduleBox.privacy .customList .topBox.open::before {
   -webkit-transform: translateY(-100%) rotate(45deg);
   transform: translateY(-100%) rotate(45deg);
}

.moduleBox.privacy .customList .topBox .subtitle {
   width: 100%;
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
   padding: 10px 20px 10px 0;
}

.moduleBox.privacy .customList .topBox .trigger {
   font-size: 15px;
   line-height: 1;
   position: absolute;
   top: 50%;
   right: 20px;
   z-index: 2;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.moduleBox.privacy .customList .topBox .trigger .alwaysOn {
   color: #000;
   font-size: 15px;
   font-weight: 500;
   display: inline-block;
   line-height: 1.35;
   padding-bottom: 3px;
}

.moduleBox.privacy .customList .topBox .trigger label {
   cursor: pointer;
   display: inline-block;
}

.moduleBox.privacy .customList .topBox .trigger label[for=cookie_necessary] {
   cursor: not-allowed;
}

.moduleBox.privacy .customList .topBox .trigger label input[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   outline: none;
   opacity: 0;
   width: 100%;
   height: 100%;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.moduleBox.privacy .customList .topBox .trigger label input[type=checkbox]:checked+span {
   background-color: #2e2e2e;
}

.moduleBox.privacy .customList .topBox .trigger label input[type=checkbox]:checked+span::before {
   background-color: #0d0d0d;
   -webkit-transform: translate(75%, -50%);
   transform: translate(75%, -50%);
}

.moduleBox.privacy .customList .topBox .trigger label span {
   width: 38px;
   height: 14px;
   border-radius: 30px;
   background-color: #d9d9d9;
   display: block;
   margin-left: auto;
   position: relative;
}

.moduleBox.privacy .customList .topBox .trigger label span::before {
   content: "";
   width: 21px;
   height: 21px;
   border-radius: 50%;
   background-color: #b5b5b5;
   position: absolute;
   top: 50%;
   left: 0;
   z-index: 1;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

@media (min-width: 1201px) {
   .moduleBox.privacy .customList .topBox:hover .subtitle {
      color: #000;
   }
}

@media (max-width: 640px) {
   .moduleBox.privacy .customList .topBox {
      margin-bottom: 5px;
   }
}

.moduleBox.privacy .customList .text {
   background-color: #e1e1e1;
   padding: 18px 15px;
}

@media (max-width: 640px) {
   .moduleBox.privacy .customList .text {
      padding: 15px 12px;
   }
}

.moduleBox.cart .moduleWrap {
   max-width: 480px;
}

.moduleBox.cart .text {
   color: #373737;
   font-size: 14px;
   letter-spacing: 0.05em;
   text-align: center;
}

.moduleBox.cart .text b {
   padding-left: 4px;
   padding-right: 4px;
   font-weight: 400;
   font-size: 18px;
   color: #000;
}

.moduleBox.cart .cartBox {
   border-top: 2px solid #000;
   border-bottom: 2px solid #ccc;
   margin-top: 20px;
   margin-bottom: 20px;
   padding-top: 15px;
   padding-bottom: 15px;
}

.moduleBox.cart .cartList .cartItem {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.moduleBox.cart .cartList .cartItem:not(:first-child) {
   border-top: 1px solid #ccc;
   margin-top: 12px;
   padding-top: 12px;
}

.moduleBox.cart .cartList .Img {
   width: 100px;
   padding-right: 10px;
}

.moduleBox.cart .cartList .Img img {
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.moduleBox.cart .cartList .Txt {
   min-width: 0;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding-right: 10px;
   position: relative;
}

.moduleBox.cart .cartList .title {
   min-width: 0;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding-right: 5px;
}

.moduleBox.cart .cartList .title a {
   color: #000;
   display: block;
   font-size: 15px;
   font-weight: 400;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

@media (min-width: 1201px) {
   .moduleBox.cart .cartList .title a:hover {
      color: #000;
   }
}

.moduleBox.cart .cartList .spec {
   color: #6a6a6a;
   font-size: 14px;
   margin-bottom: 3px;
}

.moduleBox.cart .cartList .num {
   color: #6a6a6a;
   font-size: 14px;
   line-height: 1;
}

.moduleBox.cart .cartList .del {
   width: 35px;
   height: 35px;
   border: none;
   background-color: #eee;
   border-radius: 50%;
   color: #5f5f5f;
   cursor: pointer;
   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;
}

@media (min-width: 1201px) {
   .moduleBox.cart .cartList .del:hover {
      background-color: #000;
      color: #fff;
   }
}

.moduleBox.cart .cartList .del svg {
   width: 15px;
   height: 18px;
   display: inline-block;
   vertical-align: middle;
}

@media (max-width: 400px) {
   .moduleBox.cart .cartList .Img {
      width: 85px;
   }
}

.moduleBox.orderCheck .moduleWrap {
   max-width: 480px;
}

.moduleBox.search .moduleWrap {
   max-width: 480px;
}

.moduleBox.search .searchBox {
   margin: 30px 0;
   position: relative;
}

.moduleBox.search .searchBox input {
   width: 100%;
   display: block;
   border: 1px solid #e1e1e1;
   padding: 15px 55px 15px 15px;
}

.moduleBox.search .searchBox button {
   width: 50px;
   height: 50px;
   background-color: #000;
   color: #fff;
   display: block;
   font-size: 16px;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   line-height: 50px;
   position: absolute;
   top: 50%;
   right: 0;
   z-index: 1;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   text-align: center;
}

.moduleBox.cookie .moduleWrap {
   max-width: 480px;
}

.moduleBox.cookie .text {
   font-size: 14px;
   letter-spacing: 0.5px;
   line-height: 1.6;
}

.moduleMask {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 1003;
   background-color: rgba(0, 0, 0, 0.7);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.moduleMask.show {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

/*loading*/
.loadingArea {
   width: 100%;
   height: 100vh;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   background-color: #fff;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   pointer-events: none;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9999;
}

.loadingArea .loadLogo img {
   opacity: 0;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
   -webkit-transition: all 1s ease;
   transition: all 1s ease;
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.loadingArea.show {
   opacity: 1;
   pointer-events: auto;
}

.loadingArea.show .loadLogo img {
   opacity: 1;
   -webkit-transform: translateY(0);
   transform: translateY(0);
}

.loadingArea.hide {
   opacity: 0;
}

/*header*/
header {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 1001;
   background-color: #000;
   /*menu*/
}

@media (max-width: 1180px) {
   header {
      display: none;
   }
}

header .wrap {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   padding: 0;
   max-width: 1840px;
}

@media (max-width: 1800px) {
   header .wrap {
      padding: 0 30px;
   }
}

@media (max-width: 1180px) {
   header .wrap {
      padding: 0 30px;
   }
}

header .logo a {
   display: block;
}

header .logo img {
   width: 100%;
   height: 70px;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-filter: contrast(0) brightness(2);
   filter: contrast(0) brightness(2);
}

@media (max-width: 1180px) {
   header .logo {
      width: 160px;
   }
}

header .rightBox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

@media (max-width: 1180px) {
   header .rightBox {
      display: none;
   }
}

header .contactBtn {
   margin-left: 50px;
}

header .contactBtn .btn {
   min-width: 160px;
   padding: 13px 21px;
   background-color: #222;
   border-radius: 22px;
}

@media (min-width: 1180px) {
   header .contactBtn.mobile {
      display: none;
   }
}

@media (max-width: 1400px) {
   header .contactBtn {
      margin-left: 30px;
   }

   header .contactBtn .btn {
      padding: 13px 18px;
   }
}

@media (max-width: 1180px) {
   header .contactBtn {
      margin-left: auto;
   }
}

header .menuBtnGroup {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin-left: 32px;
   -webkit-column-gap: 10px;
   -moz-column-gap: 10px;
   column-gap: 10px;
}

@media (max-width: 1400px) {
   header .menuBtnGroup {
      margin-left: 16px;
   }
}

header .menuBtnGroup .icon {
   background-color: #fff;
   border: 2px solid #fff;
   border-radius: 50%;
   width: 44px;
   height: 44px;
   margin-left: 10px;
   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;
}

header .menuBtnGroup .icon img {
   pointer-events: none;
   display: inline-block;
   margin: 0 auto;
   width: 100%;
}

header .menuBtnGroup .icon.search img {
   max-width: 19px;
}

header .menuBtnGroup .icon.language img {
   max-width: 20px;
}

header .menuBtnGroup .icon.tool img {
   max-width: 23px;
}

header .menuBtnGroup .icon:hover {
   background-color: #000;
}

header .menuBtnGroup .icon:hover img {
   -webkit-filter: contrast(0) brightness(2);
   filter: contrast(0) brightness(2);
}


header #gt_float_wrapper {
   position: absolute !important;
   right: inherit !important;
   left: 2px;
   top: -22px !important;
}

header .gt-selected .gt-lang-code,
header .gt-selected .gt_arrow_rotate,
header .gt-selected .gt_float_switcher-arrow {
   display: none !important;
}

header .gt_float_switcher {
   width: 44px;
   height: 44px;
   border-radius: 50% !important;
   box-shadow: inherit !important;
   transition: all 0.5s !important;
}

header.home .gt_float_switcher {
   width: 60px;
   height: 60px;
}

header.home #gt_float_wrapper {
   top: -28px !important;
}

header.home .menuBtnGroup .icon {
   margin-left: 20px;
}

header .gt_float_switcher .gt-selected .gt-current-lang {
   padding: 10px 0 !important;
   text-align: center;
}


header.home #gt_float_wrapper {
   left: 4px;
}

header.home .gt_float_switcher .gt-selected .gt-current-lang {
   padding: 16px 0 !important;
}

header.home .gt_float_switcher img {
   width: 30px !important;
}

header .gt_float_switcher img {
   width: 26px !important;
   margin: 0 !important;
}

header .gt_float_switcher .gt_options {
   position: absolute !important;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   background: #fff;
   left: -20px;
}

header .gt_float_switcher .gt_options a {
   font-size: 14px;
   padding: 5px 10px !important;
}

header .gt_float_switcher .gt_options img {
   width: 20px !important;
}


header .searchBox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

header .searchBox input {
   width: 100%;
   height: 45px;
   padding: 0 15px;
   border: none;
   font-family: "微軟正黑體";
   background-color: #fafafa;
}

header .searchBox a {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   display: block;
   width: 45px;
   height: 45px;
   line-height: 45px;
   font-size: 16px;
   color: #fff;
   text-align: center;
   background-color: #000;
}

header .languageBox {
   position: relative;
}

header .languageBox .languageCurrent {
   cursor: pointer;
   position: relative;
}

header .languageBox .languageList {
   width: 90px;
   background-color: #fff;
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 100%;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: 1;
}

header .languageBox .languageList.show {
   opacity: 1;
   pointer-events: auto;
   -webkit-transform: translateX(-50%) translateY(10px);
   transform: translateX(-50%) translateY(10px);
}

header .languageBox .languageList li:not(:first-child) {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
}

header .languageBox .languageList li a {
   display: block;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0.5px;
   padding: 10px 10px;
   text-align: center;
}

header .languageBox .languageList li a:hover,
header .languageBox .languageList li a.current {
   background-color: #000;
   color: #fff;
}

header .menu {
   margin: 0 -21.5px;
}

.about-video{width:100%; height:613px;}

@media (max-width: 1500px) {
   header .menu {
      margin: 0 -16px;
   }
}

@media (max-width: 1300px) {
   header .menu {
      margin: 0;
   }
}

header .menu>li {
   margin: 0 11.5px;
   position: relative;
   display: inline-block;
}

@media (max-width: 1500px) {
   header .menu>li {
      margin: 0 6px;
   }
}

@media (max-width: 1300px) {
   header .menu>li {
      margin: 0;
   }
}

header .menu>li:after {
   content: "";
   width: 0;
   height: 4px;
   background-color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
}

header .menu>li:hover:after,
header .menu>li.open:after {
   width: 100%;
}

header .menu>li a {
   color: #fff;
   display: block;
   padding: 24px 10px;
   font-weight: 700;
   font-size: 16px;
   line-height: 2;
   letter-spacing: 0;
}

@media (max-width: 1400px) {
   header .menu>li a {
      font-size: 14px;
      padding: 26px 10px;
   }
}

header .menu .submenu {
   width: 150px;
   display: none;
   position: absolute;
   top: 100%;
   left: 50%;
   z-index: 99;
   text-align: center;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   -webkit-box-shadow: 0 1px 2px -2px rgba(167, 167, 167, 0.16), 0 3px 6px 0 rgba(167, 167, 167, 0.12), 0 5px 12px 4px rgba(167, 167, 167, 0.09);
   box-shadow: 0 1px 2px -2px rgba(167, 167, 167, 0.16), 0 3px 6px 0 rgba(167, 167, 167, 0.12), 0 5px 12px 4px rgba(167, 167, 167, 0.09);
}

@media (max-width: 1400px) {
   header .menu .submenu {
      width: 120px;
   }
}

header .menu .submenu a {
   background-color: #fff;
   color: #666;
   padding: 10px;
   font-size: 16px;
   font-weight: 400;
}

header .menu .submenu a.current,
header .menu .submenu a:hover {
   color: #fff;
   background-color: #000;
}

header .submenuBox {
   display: none;
   position: fixed;
   top: 80px;
   left: 0;
   width: 100%;
   background-color: #fff;
   -webkit-box-shadow: 0 1px 2px -2px rgba(167, 167, 167, 0.16), 0 3px 6px 0 rgba(167, 167, 167, 0.12), 0 5px 12px 4px rgba(167, 167, 167, 0.09);
   box-shadow: 0 1px 2px -2px rgba(167, 167, 167, 0.16), 0 3px 6px 0 rgba(167, 167, 167, 0.12), 0 5px 12px 4px rgba(167, 167, 167, 0.09);
}

header .submenuBox .wrap {
   max-width: 1540px;
}

header .submenuBox .pdMenuList {
   padding: 62px 0;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
}

header .submenuBox .pdMenuItem {
   width: 31.8%;
   border-left: 1px solid #e9e9e9;
}

header .submenuBox .pdMenuItem.line .pdMenuText .pdMenuTitle:after {
   content: "";
   z-index: 1;
   left: 0;
   position: absolute;
   bottom: 0;
   width: 40px;
   height: 2px;
   background-color: #000;
}

header .submenuBox .pdMenuItem:first-child {
   border-left: none;
}

header .submenuBox .pdMenuItem:first-child .pdMenuText {
   padding-left: 0;
}

header .submenuBox .pdMenuItem:nth-child(2) {
   width: 36.4%;
}

header .submenuBox .pdMenuImg {
   width: 100%;
   height: 210px;
   position: relative;
}

header .submenuBox .pdMenuImg img {
   max-width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

header .submenuBox .pdMenuText {
   padding-left: 13%;
   padding-right: 13%;
}

header .submenuBox .pdMenuText .pdMenuTitle {
   font-weight: bold;
   color: #000;
   padding: 20px 0 30px 0;
   position: relative;
   display: inline-block;
   font-size: 18px;
   line-height: 1.6;
   letter-spacing: 0;
}

header .submenuBox .pdMenuText .pdMenuTitle a {
   padding: 0;
   color: #000;
   font-size: 18px;
   line-height: 1.6;
   letter-spacing: 0;
   position: relative;
}

header .submenuBox .pdMenuText .pdMenuTitle a:after {
   content: "";
   width: 0;
   height: 1px;
   background-color: #000;
   position: absolute;
   left: 0;
   bottom: 0;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

@media (min-width: 1201px) {
   header .submenuBox .pdMenuText .pdMenuTitle a:hover:after {
      width: 100%;
   }
}

header .submenuBox .pdMenuText ul {
   margin-top: 30px;
   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: start;
   -ms-flex-align: start;
   align-items: flex-start;
}

header .submenuBox .pdMenuText li {
   position: relative;
}

header .submenuBox .pdMenuText li:after {
   content: "";
   width: 0;
   height: 1px;
   background-color: #bbbbbb;
   position: absolute;
   left: 0;
   bottom: 0;
}

header .submenuBox .pdMenuText li:hover a {
   color: #bbbbbb;
}

header .submenuBox .pdMenuText li:hover:after {
   width: 100%;
}

header .submenuBox .pdMenuText li a {
   padding: 0;
   margin: 0;
   color: #333333;
   font-weight: 400;
   font-size: 16px;
   line-height: 2.125;
   letter-spacing: 0;
}

@media (max-width: 1600px) {
   header .submenuBox .pdMenuText li a {
      font-size: 15px;
   }
}

@media (max-width: 1400px) {
   header .submenuBox .pdMenuText li a {
      font-size: 14px;
   }
}

/*slideMenu*/
.slideMenuTrigger {
   width: 30px;
   height: 30px;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   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;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
   margin-left: 20px;
   position: relative;
   color: #fff;
}

@media (max-width: 400px) {
   .slideMenuTrigger {
      margin-left: 10px;
   }
}

@media (max-width: 360px) {
   .slideMenuTrigger {
      margin-left: 4px;
   }
}

.slideMenuTrigger .line {
   width: 100%;
   height: 2px;
   background-color: #fff;
   display: inline-block;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
}

.slideMenuTrigger .line::before,
.slideMenuTrigger .line:after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: #fff;
   position: absolute;
   z-index: 1;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.3s 0s transform, 0.2s 0.3s top, 0.2s 0.3s bottom, 0.5s background-color;
   transition: 0.3s 0s transform, 0.2s 0.3s top, 0.2s 0.3s bottom, 0.5s background-color;
}

.slideMenuTrigger .line::before {
   top: -10px;
}

.slideMenuTrigger .line::after {
   bottom: -10px;
}

.slideMenuTrigger .close,
.slideMenuTrigger .open {
   position: absolute;
   bottom: 0;
}

.slideMenuTrigger .close {
   opacity: 0;
}

.slideMenuTrigger.show .close {
   opacity: 1;
}

.slideMenuTrigger.show .open {
   opacity: 0;
}

.slideMenuTrigger.show .line {
   background-color: transparent;
}

.slideMenuTrigger.show .line:before {
   top: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transition: 0.4s 0.3s transform, 0.2s 0s top;
   transition: 0.4s 0.3s transform, 0.2s 0s top;
}

.slideMenuTrigger.show .line:after {
   bottom: 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transition: 0.4s 0.3s transform, 0.2s 0s bottom;
   transition: 0.4s 0.3s transform, 0.2s 0s bottom;
}

@media (min-width: 1201px) {
   .slideMenuTrigger:hover {
      background-color: #fff;
   }

   .slideMenuTrigger:hover span {
      background-color: #000;
   }

   .slideMenuTrigger:hover span::before,
   .slideMenuTrigger:hover span::after {
      background-color: #000;
   }
}

@media (min-width: 1181px) {
   .slideMenuTrigger {
      display: none;
   }
}

.slideMenuArea {
   width: 100%;
   height: 100%;
   max-height: 70px;
   background-color: #f3f3f3;
   opacity: 0;
   overflow: hidden;
   padding-bottom: env(safe-area-inset-bottom);
   pointer-events: none;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 99;
   -webkit-transition: all 0.6s ease-in-out;
   transition: all 0.6s ease-in-out;
   -webkit-overflow-scrolling: touch;
}

@media (min-width: 1181px) {
   .slideMenuArea {
      display: none;
   }
}

@media (max-width: 1180px) {
   .slideMenuArea {
      opacity: 1;
      pointer-events: auto;
   }
}

.slideMenuArea.show {
   max-height: 100%;
   opacity: 1;
   pointer-events: auto;
}

@media (max-width: 479px) {
   .slideMenuArea.show {
      height: 100%;
   }
}

.slideMenuArea.show .menuBox {
   -webkit-animation: textSlideRightAnimation 0.5s 0.3s ease-in-out both;
   animation: textSlideRightAnimation 0.5s 0.3s ease-in-out both;
}

.slideMenuArea.show .menuBox .nav li.dropDown.open .submenu,
.slideMenuArea.show .menuBox .nav li.dropDown.open .pdMenuList {
   -webkit-animation: textSlideDownAnimation 0.3s 0.15s ease-in-out both;
   animation: textSlideDownAnimation 0.3s 0.15s ease-in-out both;
}

.slideMenuArea.show .menuBox .nav .pdMenuItem.open .pdMenuText ul {
   -webkit-animation: textSlideDownAnimation 0.3s 0.15s ease-in-out both;
   animation: textSlideDownAnimation 0.3s 0.15s ease-in-out both;
}

.slideMenuArea.show .funcBox {
   -webkit-animation: textSlideRightAnimation1 0.5s 0.8s ease-in-out both;
   animation: textSlideRightAnimation1 0.5s 0.8s ease-in-out both;
}

.slideMenuArea .wrap {
   padding-left: 0;
   padding-right: 0;
   position: relative;
}

.slideMenuArea .test {
   position: absolute;
   top: 80px;
}

.slideMenuArea .topBox {
   background-color: #000;
   -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;
   padding: 13px 30px;
}

@media (max-width: 400px) {
   .slideMenuArea .topBox {
      padding: 13px 20px;
   }
}

.slideMenuArea .topBox .slideMenuLogo {
   width: 161px;
}

.slideMenuArea .topBox .slideMenuLogo img {
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-filter: contrast(0) brightness(2);
   filter: contrast(0) brightness(2);
}

@media (max-width: 450px) {
   .slideMenuArea .topBox .slideMenuLogo {
      width: 140px;
   }
}

@media (max-width: 400px) {
   .slideMenuArea .topBox .slideMenuLogo {
      width: 130px;
   }
}

.slideMenuArea .topBox .contactBtn {
   margin-left: 50px;
   pointer-events: auto;
}

.slideMenuArea .topBox .contactBtn .btn {
   min-width: 160px;
   padding: 13px 21px;
   background-color: #222;
   border-radius: 22px;
}

@media (min-width: 1181px) {
   .slideMenuArea .topBox .contactBtn.mobile {
      display: none;
   }
}

@media (max-width: 540px) {
   .slideMenuArea .topBox .contactBtn.mobile a {
      padding: 14px;
      min-width: 120px;
      font-size: 14px;
   }
}

@media (max-width: 400px) {
   .slideMenuArea .topBox .contactBtn.mobile a {
      min-width: 110px;
   }
}

@media (max-width: 360px) {
   .slideMenuArea .topBox .contactBtn.mobile a {
      font-size: 13px;
      min-width: 90px;
   }
}

@media (max-width: 1400px) {
   .slideMenuArea .topBox .contactBtn {
      margin-left: 30px;
   }

   .slideMenuArea .topBox .contactBtn .btn {
      padding: 13px 18px;
   }
}

@media (max-width: 1180px) {
   .slideMenuArea .topBox .contactBtn {
      margin-left: auto;
   }
}

.slideMenuArea .funcBox {
   border-top: 1px solid #ccc;
   padding: 15px 30px;
   position: relative;
}


.slideMenuArea .funcBox #gt_float_wrapper {
   position: static !important;
}


.slideMenuArea .funcBox .gt_float_switcher,
.slideMenuArea .funcBox .gt_float_switcher .gt-selected,
.slideMenuArea .funcBox .gt_float_switcher {
   background: none !important;
   box-shadow: inherit !important;
}

.slideMenuArea .funcBox .gt_float_switcher .gt_options {
   position: absolute !important;
}

.slideMenuArea .funcBox .gt_float_switcher .gt-selected .gt-current-lang {
   padding: 0 !important;
   margin-top: 10px;
}

.slideMenuArea .funcBox .gt_float_switcher .gt_options a {
   padding: 10px 0 !important;
}

.slideMenuArea .funcBox .icon {
   border-radius: 50%;
   height: 44px;
   display: block;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-column-gap: 20px;
   -moz-column-gap: 20px;
   column-gap: 20px;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.slideMenuArea .funcBox .icon .text {
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

.slideMenuArea .funcBox .icon .Img {
   position: relative;
   display: inline-block;
   width: 25px;
   height: 25px;
   display: inline-block;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.slideMenuArea .funcBox .icon.search .Img {
   background-image: url("../images/search.png");
}

.slideMenuArea .funcBox .icon.language .Img {
   background-image: url("../images/language.png");
}

.slideMenuArea .funcBox .icon.tool .Img {
   width: 30px;
   height: 30px;
   margin-left: -5px;
   background-image: url("../images/tool.png");
}

.slideMenuArea .funcBox .languageBox .languageCurrent {
   color: #232323;
   cursor: pointer;
   position: relative;
}

.slideMenuArea .funcBox .languageBox .languageCurrent:after {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   border-right: 1px solid #000;
   border-top: 1px solid #000;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   margin-right: 14px;
   margin-left: auto;
}

.slideMenuArea .funcBox .languageBox .languageSubmenu {
   padding: 20px 30px;
   pointer-events: none;
   position: absolute;
   top: 80px;
   left: 100%;
   z-index: 5;
   width: 100vw;
   height: calc(100vh - 70px);
   background-color: #f3f3f3;
}

.slideMenuArea .funcBox .languageBox .languageSubmenu.open {
   left: 0;
   pointer-events: auto;
}

.slideMenuArea .funcBox .languageBox .backArea {
   font-weight: 500;
   font-size: 24px;
   line-height: 1;
   letter-spacing: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.slideMenuArea .funcBox .languageBox .backArea:after {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   border-right: 1px solid #000;
   border-top: 1px solid #000;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   margin-right: 10px;
}

.slideMenuArea .funcBox .languageBox .languageList {
   margin-top: 30px;
}

.slideMenuArea .funcBox .languageBox .languageList li:not(:last-child) {
   margin-bottom: 12px;
}

.slideMenuArea .funcBox .languageBox .languageList li a {
   display: block;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0.5px;
   padding: 10px 10px;
   position: relative;
}

.slideMenuArea .funcBox .languageBox .languageList li a:after {
   content: "";
   width: 0%;
   height: 1px;
   background-color: #000;
   position: absolute;
   bottom: -1px;
   left: 0;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.slideMenuArea .funcBox .languageBox .languageList li a.current {
   color: #000;
}

.slideMenuArea .funcBox .languageBox .languageList li a.current:after {
   width: 100%;
}

.slideMenuArea .funcBox .searchBox {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 0 10px;
}

.slideMenuArea .funcBox .searchBox input {
   height: 40px;
   border-bottom: 1px solid #ccc;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   line-height: 40px;
}

.slideMenuArea .funcBox .searchBox a {
   width: 40px;
   height: 40px;
   border: 1px solid #000;
   background-color: #000;
   color: #fff;
   display: block;
   line-height: 38px;
   text-align: center;
}

@media (min-width: 1201px) {
   .slideMenuArea .funcBox .searchBox a:hover {
      background-color: #fff;
      color: #000;
   }
}

.slideMenuArea .menuBox {
   width: 100%;
   padding: 15px 30px;
   text-align: center;
}

.slideMenuArea .menuBox .nav>li {
   position: relative;
}

.slideMenuArea .menuBox .nav>li.dropDown {
   margin-bottom: 22px;
}

.slideMenuArea .menuBox .nav>li.dropDown:last-child {
   margin-bottom: 0;
}

.slideMenuArea .menuBox .nav>li.dropDown>span {
   cursor: pointer;
}

.slideMenuArea .menuBox .nav>li.dropDown>span>a {
   display: block;
   text-align: left;
   font-weight: 700;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

.slideMenuArea .menuBox .nav>li.dropDown>span>a::before,
.slideMenuArea .menuBox .nav>li.dropDown>span>a::after {
   content: "";
   width: 12px;
   height: 1px;
   background-color: #000;
   position: absolute;
   top: 50%;
   right: 5px;
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
   z-index: 1;
}

.slideMenuArea .menuBox .nav>li.dropDown>span>a::after {
   -webkit-transform: translate(-50%, 0) rotate(90deg);
   transform: translate(-50%, 0) rotate(90deg);
}

.slideMenuArea .menuBox .nav>li.dropDown>span>a.current::before,
.slideMenuArea .menuBox .nav>li.dropDown>span>a.current::after {
   background-color: #000;
}

.slideMenuArea .menuBox .nav>li.dropDown.open>span>a::after {
   -webkit-transform: translate(-50%, 0) rotate(0deg);
   transform: translate(-50%, 0) rotate(0deg);
}

.slideMenuArea .menuBox .nav>li.dropDown.open .submenu {
   display: block;
}

.slideMenuArea .menuBox .nav>li.dropDown.open .pdMenuList {
   display: block;
}

.slideMenuArea .menuBox .nav>li a {
   color: #000;
   display: block;
   font-weight: 700;
   padding: 10px 0;
   position: relative;
   text-align: left;
   margin-bottom: 22px;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

.slideMenuArea .menuBox .nav>li a.current {
   color: #000;
}

@media (min-width: 1201px) {
   .slideMenuArea .menuBox .nav>li a:hover {
      color: #000;
   }
}

.slideMenuArea .menuBox .nav .submenu {
   width: 100%;
   display: none;
   padding: 0 10px 10px;
}

.slideMenuArea .menuBox .nav .submenu li {
   padding: 5px 0;
}

.slideMenuArea .menuBox .nav .submenu li a {
   color: #3a3a3a;
   font-size: 15px;
   font-weight: 500;
   padding: 5px 0;
   margin-bottom: 0;
}

.slideMenuArea .menuBox .nav .submenu li a.current {
   color: #000;
}

@media (min-width: 1201px) {
   .slideMenuArea .menuBox .nav .submenu li a:hover {
      color: #000;
   }
}

.slideMenuArea .menuBox .pdMenuList {
   display: none;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuImg {
   display: none;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuItem.open .pdMenuTitle::after {
   -webkit-transform: translate(-50%, 0) rotate(0);
   transform: translate(-50%, 0) rotate(0);
}

@media (max-width: 1180px) {
   .slideMenuArea .menuBox .pdMenuList .pdMenuText {
      padding-left: 0 !important;
   }
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle {
   font-size: 15px;
   line-height: 1;
   letter-spacing: 0;
   display: block;
   padding: 10px 0;
   padding-left: 15px;
   text-align: left;
   font-weight: 700;
   color: #3a3a3a;
   position: relative;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown::before,
.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown::after {
   content: "";
   width: 12px;
   height: 1px;
   background-color: #000;
   position: absolute;
   top: 50%;
   right: 5px;
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
   z-index: 1;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown::after {
   -webkit-transform: translate(-50%, 0) rotate(90deg);
   transform: translate(-50%, 0) rotate(90deg);
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown.current::before,
.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle.dropDown.current::after {
   background-color: #000;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText .pdMenuTitle a {
   padding: 0;
   margin: 0;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText ul {
   display: none;
}

.slideMenuArea .menuBox .pdMenuList .pdMenuText ul a {
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0;
   padding: 10px 0;
   padding-left: 15px;
   font-weight: 500;
   color: #797979;
   margin-bottom: 0;
}

.slideMenuArea .socialBox {
   padding: 15px 0;
}

.slideMenuArea .socialBox .socialList {
   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;
}

.slideMenuArea .socialBox .socialList li:not(:last-child) {
   margin-right: 7px;
}

.slideMenuArea .socialBox .socialList li a {
   width: 40px;
   height: 40px;
   background-color: #fff;
   border-radius: 50%;
   background-color: #000;
   color: #fff;
   display: block;
   font-size: 16px;
   line-height: 40px;
   text-align: center;
}

.slideMenuArea .socialBox .socialList li a svg {
   width: 16px;
   height: 16px;
   display: inline-block;
   fill: #000;
   vertical-align: baseline;
}

@media (min-width: 1201px) {
   .slideMenuArea .socialBox .socialList li a:hover {
      background-color: #fff;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      color: #000;
   }

   .slideMenuArea .socialBox .socialList li a:hover svg {
      fill: #fff;
   }
}

.slideMenuMask {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 98;
   background-color: rgba(0, 0, 0, 0.7);
   opacity: 0;
   pointer-events: none;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.slideMenuMask.show {
   opacity: 1;
   pointer-events: auto;
}

/*手機menu*/
.m_menu {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 50;
   display: block;
   width: 100%;
   -webkit-box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
   box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
   /*手機menu內容*/
}

@media (min-width: 1181px) {
   .m_menu {
      display: none;
   }
}

.m_menu .mask {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   display: none;
   background-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   height: 100%;
   padding-bottom: 60px;
}

.m_menu .m_logo {
   float: left;
   margin-left: 70px;
}

.m_menu .m_logo img {
   display: block;
   width: 150px;
   padding-top: 8px;
}

.m_menu .controlBox {
   position: relative;
   z-index: 99;
   height: 60px;
   background-color: #fff;
}

.m_menu .controlBox a.main {
   position: absolute;
   left: 0;
   top: 0;
   width: 60px;
   height: 60px;
}

.m_menu .controlBox a.main span {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   margin-top: -0.5px;
   width: 26px;
   height: 1px;
   background-color: #111;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.m_menu .controlBox a.main span:before,
.m_menu .controlBox a.main span:after {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #111;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.m_menu .controlBox a.main span:before {
   top: -7px;
}

.m_menu .controlBox a.main span:after {
   bottom: -7px;
}

.m_menu .controlBox a.main.show span {
   background-color: transparent;
}

.m_menu .controlBox a.main.show span:before {
   top: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.m_menu .controlBox a.main.show span:after {
   bottom: 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.m_menu .controlBox .btn_cart {
   display: inline-block;
   vertical-align: middle;
}

.m_menu .controlBox .right {
   float: right;
   line-height: 60px;
   margin-right: 10px;
}

.m_menu .controlBox .right a {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   margin-left: 8px;
   font-size: 13px;
   color: #fff;
}

.m_menu .controlBox .right a em {
   display: none;
}

.m_menu .controlBox .right i {
   display: inline-block;
   vertical-align: middle;
   width: 30px;
   height: 30px;
   line-height: 30px;
   font-size: 20px;
   color: #fff;
   text-align: center;
   border-radius: 100%;
   background: #799a1b;
}

.m_menu .controlBox .right b {
   position: absolute;
   top: 6px;
   right: -5px;
   display: block;
   border-radius: 5px;
   line-height: normal;
   padding: 3px 5px;
   font-size: 13px;
   color: #fff;
   background-color: #c40000;
}

.m_menu .controlBox .language:hover .submenu {
   display: block;
}

.m_menu .hideBox {
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: 11;
   display: none;
   width: 100%;
   padding: 60px 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#650e13+0,b2181b+100 */
   background: rgb(101, 14, 19);
   /* Old browsers */
   /* FF3.6+ */
   /* Chrome,Safari4+ */
   /* Chrome10+,Safari5.1+ */
   /* Opera 11.10+ */
   /* IE10+ */
   background: -webkit-gradient(linear, left top, left bottom, from(rgb(101, 14, 19)), to(rgb(178, 24, 27)));
   background: linear-gradient(to bottom, rgb(101, 14, 19) 0%, rgb(178, 24, 27) 100%);
   /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#650e13", endColorstr="#b2181b", GradientType=0);
   /* IE6-9 */
}

.m_menu .hideBox .sp {
   display: none;
   padding: 10px;
   font-size: 13px;
   color: #fff;
   background-color: #c80303;
}

.m_menu .searchBox_m {
   padding: 20px 0;
   text-align: center;
}

.m_menu .searchBox_m input[type=text] {
   display: inline-block;
   vertical-align: middle;
   width: 200px;
   height: 30px;
   border: 1px solid #ccc;
}

.m_menu .searchBox_m a {
   display: inline-block;
   vertical-align: middle;
   width: 30px;
   height: 30px;
   line-height: 30px;
   font-size: 15px;
   text-align: center;
   color: #fff;
   background-color: #9cc720;
}

.m_menu .m_trans {
   text-align: center;
   padding-top: 30px;
}

.m_menu .m_trans>a {
   display: inline-block;
   padding: 8px 15px;
   border: 1px solid #fff;
   color: #fff;
}

.m_menu .m_trans>a i {
   margin-left: 5px;
}

.m_menu .loginBox {
   padding: 30px 0;
   text-align: center;
}

.m_menu .loginBox a {
   display: inline-block;
   margin: 0 3px;
   font-size: 15px;
   color: #fff;
}

.m_menu .loginBox a i {
   margin-right: 3px;
}

.m_menu .loginBox .submenu {
   margin-top: 10px;
   color: #ccc;
}

.m_menu .loginBox .submenu span {
   margin: 0 5px;
}

.m_menu .mfun {
   padding: 30px 0;
   text-align: center;
}

.m_menu .mfun a {
   display: inline-block;
   margin: 0 1px;
   width: 35px;
   height: 35px;
   line-height: 35px;
   border-radius: 50%;
   font-size: 20px;
   color: #fff;
   text-align: center;
   background-color: #b21d26;
}

.m_menu .nav li {
   border-top: 1px solid #af6568;
}

.m_menu .nav a {
   position: relative;
   display: block;
   padding: 20px 10px;
   font-size: 15px;
   color: #fff;
   text-align: center;
}

.m_menu .nav a:hover {
   background-color: #d12127;
}

.m_menu .nav a i {
   position: absolute;
   right: 10px;
   top: 50%;
   display: block;
   margin-top: -7px;
}

.m_menu .nav .dropDown>a::after {
   content: "\f107";
   position: absolute;
   right: 10px;
   top: 20px;
   font-family: FontAwesome;
}

.m_menu .nav .submenu {
   display: none;
}

.m_menu .nav .submenu a {
   padding: 10px 20px;
}

.m_menu .nav .submenu a:hover {
   background-color: #999;
}

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


.bannerArea .bannerItem {
   position: relative;
}

.bannerArea .bannerItem .Txt {
   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-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   padding: 0 20px;
   z-index: 2;
   width: 100%;
   height: 100%;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.bannerArea .bannerItem .titleBox {
   text-align: left;
   margin-left: 100px;
   color: #fff;
   font-weight: 700;
}

.bannerArea .bannerItem .titleBox .title {
   position: relative;
   padding-bottom: 20px;
   font-size: 60px;
   line-height: 1.2;
   letter-spacing: 1px;
}

.bannerArea .bannerItem .titleBox .title:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #fff;
   width: 100px;
   height: 4px;
}

.bannerArea .bannerItem .titleBox .info {
   padding-top: 20px;
   font-size: 16px;
   line-height: 1.5;
   letter-spacing: 0;
}


.service-list{position:fixed; top:45%; right:0; z-index:55}
.service-list a{display:block; padding:15px; background:#000; width:60px; border-radius:10px;}
.service-list a img{width:100%}

@media (max-width: 1400px) {
   .bannerArea .bannerItem .titleBox {
      margin-left: 70px;
   }

   .bannerArea .bannerItem .titleBox .title {
      font-size: 50px;
   }
}

@media (max-width: 991px) {
   .bannerArea .bannerItem .titleBox {
      margin-left: 40px;
   }

   .bannerArea .bannerItem .titleBox .title {
      font-size: 40px;
   }

   .bannerArea .bannerItem .titleBox .info {
      font-size: 14px;
   }
}

@media (max-width: 650px) {
   .bannerArea .bannerItem .titleBox {
      margin-left: 30px;
   }

   .bannerArea .bannerItem .titleBox .title {
      font-size: 34px;
   }
}

@media (max-width: 480px) {
   .bannerArea .bannerItem .titleBox {
      margin-left: 0;
   }

   .bannerArea .bannerItem .titleBox .title {
      font-size: 28px;
      padding-bottom: 12px;
   }

   .bannerArea .bannerItem .titleBox .title:after {
      height: 2px;
      width: 80px;
   }

   .bannerArea .bannerItem .titleBox .info {
      padding-top: 12px;
   }
}

.bannerArea .bannerItem .Img {
   position: relative;
   z-index: 1;
   overflow: hidden;
}

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

@media (max-width: 640px) {
   .bannerArea .bannerItem .Img img {
      -o-object-fit: cover;
      object-fit: cover;
      width: 100%;
      height: 100%;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }
}

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

/*文字跑馬燈*/
.marqueeArea {
   padding: 15px 0;
   background-color: rgb(6, 21, 64);
}

.marqueeArea h2 {
   float: left;
   margin-right: 20px;
   font-weight: 400;
   font-size: 15px;
   color: #fff;
}

@media (max-width: 640px) {
   .marqueeArea h2 {
      display: none;
   }
}

.marqueeArea h2 em {
   margin-left: 5px;
}

.marqueeArea .marqueeBox {
   max-height: 30px;
   overflow: hidden;
}

.marqueeArea ul {
   overflow: hidden;
}

.marqueeArea li {
   line-height: 20px;
}

.marqueeArea .date {
   display: inline-block;
   vertical-align: top;
   margin-right: 10px;
   font-size: 13px;
   color: #dbdbdb;
}

@media (max-width: 640px) {
   .marqueeArea .date {
      display: none;
   }
}

.marqueeArea h3 {
   display: inline-block;
   vertical-align: top;
}

.marqueeArea h3 a {
   display: block;
   width: 100%;
   font-size: 15px;
   color: #fff;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.mailArea {
   background-color: #f6f6f6;
}

.mailArea .mailSubscribeBox {
   padding: 110px 0;
}

@media (max-width: 1180px) {
   .mailArea .mailSubscribeBox {
      padding: 55px 0;
   }
}

.mailArea .mailSubscribeBox form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

@media (max-width: 1180px) {
   .mailArea .mailSubscribeBox form {
      row-gap: 30px;
   }
}

.mailArea .mailTitle {
   font-size: 60px;
   line-height: 1;
   letter-spacing: 0;
   font-weight: bold;
   color: #333;
}

@media (max-width: 1180px) {
   .mailArea .mailTitle {
      width: 100%;
      font-size: 50px;
   }
}

@media (max-width: 650px) {
   .mailArea .mailTitle {
      font-size: 40px;
   }
}

@media (max-width: 400px) {
   .mailArea .mailTitle {
      text-align: center;
   }
}

.mailArea .mailText {
   padding-bottom: 18px;
   margin-left: 10%;
   margin-top: auto;
   width: 41.892%;
   color: #888;
   border-bottom: 1px solid #000;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

@media (max-width: 1600px) {
   .mailArea .mailText {
      margin-left: 0;
   }
}

@media (max-width: 1180px) {
   .mailArea .mailText {
      width: 60%;
   }
}

@media (max-width: 650px) {
   .mailArea .mailText {
      width: 100%;
   }
}

@media (max-width: 400px) {
   .mailArea .btnBox {
      margin: 0 auto;
   }
}

.mailArea .submit_btn {
   min-width: 280px;
   color: #fff;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

@media (max-width: 1400px) {
   .mailArea .submit_btn {
      min-width: 240px;
   }
}

@media (max-width: 768px) {
   .mailArea .submit_btn {
      min-width: 200px;
   }
}

/*footer*/
footer {
   background-color: #000;
   padding: 80px 0;
}

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

footer .wrap {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

footer .top {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   padding-bottom: 60px;
   margin-bottom: 50px;
   border-bottom: 1px solid #414141;
}

@media (max-width: 1180px) {
   footer .top {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      margin-bottom: 0;
      padding-bottom: 30px;
      border: none;
   }
}

footer .footerMenuBox {
   width: 100%;
}

footer .contactBtn {
   margin-top: 30px;
}

footer .contactBtn .btn {
   background-color: #fff;
   color: #000;
   min-width: 280px;
}

@media (max-width: 1600px) {
   footer .contactBtn .btn {
      min-width: 240px;
   }
}

@media (max-width: 1400px) {
   footer .contactBtn .btn {
      min-width: 200px;
   }
}

footer .bottom {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

@media (max-width: 1180px) {
   footer .bottom {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      row-gap: 22px;
   }
}

footer .footerLogoBox {
   margin-right: 100px;
}

@media (max-width: 1600px) {
   footer .footerLogoBox {
      margin-right: 50px;
   }
}

@media (max-width: 1180px) {
   footer .footerLogoBox {
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3;
   }
}

footer .footerLogo {
   width: 100%;
   width: 150px;
}

footer .footerLogo a {
   display: block;
}

footer .footerLogo img {
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-filter: contrast(0) brightness(2);
   filter: contrast(0) brightness(2);
}

@media (max-width: 1180px) {
   footer .side_contactInfo {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
   }
}

footer .infoList {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin: 0 -5px;
   padding-right: 58px;
}

footer .infoList li {
   margin-bottom: 0;
   padding: 5px 10px;
}

footer .infoList li i {
   display: none;
}

footer .infoList li a,
footer .infoList li span {
   line-height: 1;
   position: relative;
   font-size: 14px;
}

@media (min-width: 1201px) {
   footer .infoList li a:hover {
      color: #fff;
   }
}

footer .infoList li .infoTitle {
   color: #fff;
   padding-right: 8px;
}

footer .infoList .address {
   width: 100%;
}

footer .infoList .address a {
   letter-spacing: 0.3px;
}

@media (max-width: 1600px) {
   footer .infoList {
      padding-right: 0;
   }
}

@media (max-width: 1180px) {
   footer .infoList {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }
}

footer .footerSocialBox {
   padding-left: 30px;
   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%;
   max-width: 525px;
   position: relative;
}

footer .footerSocialBox:after {
   content: "";
   width: 1px;
   height: 30px;
   background-color: #414141;
   position: absolute;
   top: 50%;
   right: 32%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

@media (max-width: 1300px) {
   footer .footerSocialBox:after {
      right: 30%;
   }
}

@media (max-width: 1180px) {
   footer .footerSocialBox {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      padding-left: 0;
      max-width: 100%;
   }

   footer .footerSocialBox:after {
      right: 40%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
   }
}

@media (max-width: 650px) {
   footer .footerSocialBox:after {
      right: 35%;
   }
   .about-video{width:100%; height:230px;}
}

@media (max-width: 540px) {
   footer .footerSocialBox:after {
      right: 30%;
   }
}

@media (max-width: 470px) {
   footer .footerSocialBox {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      row-gap: 20px;
   }

   footer .footerSocialBox:after {
      display: none;
   }
}

footer .socialBox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   vertical-align: middle;
   margin-right: -4px;
}

@media (max-width: 480px) {
   footer .socialBox {
      width: 100%;
   }
}

footer .socialBox .socialList {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin: 0 -3.5px;
}

footer .socialBox svg {
   max-width: 22px;
   fill: #fff;
}

footer .socialBox a {
   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;
   width: 44px;
   height: 44px;
   line-height: 30px;
   margin: 0 3.5px;
   font-size: 19px;
   background-color: #000;
   border: 1px solid #444;
   text-align: center;
   border-radius: 50%;
}

footer .socialBox a img {
   -webkit-filter: brightness(2);
   filter: brightness(2);
}

footer .socialBox a:hover {
   opacity: 0.8;
   border-color: #bbb;
}

footer .socialBox a.social_yt img {
   max-width: 20px;
}

footer .socialBox a.social_linkedin img {
   max-width: 20px;
}

footer .socialBox a.social_fb img {
   max-width: 8px;
}

footer .socialBox a.social_ig img {
   max-width: 18px;
}

footer .socialBox a.social_twitter img {
   max-width: 19px;
}

footer .goTop {
   cursor: pointer;
   color: #fff;
   white-space: nowrap;
   font-weight: 700;
   position: relative;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-column-gap: 16px;
   -moz-column-gap: 16px;
   column-gap: 16px;
}

footer .goTop:after {
   content: "";
   background-image: url("../images/go_top.png");
   background-size: contain;
   width: 18px;
   height: 18px;
   display: inline-block;
}

footer .goTop:hover {
   opacity: 0.8;
}

footer .footerMenu {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-column-gap: 55px;
   -moz-column-gap: 55px;
   column-gap: 55px;
}

@media (max-width: 1600px) {
   footer .footerMenu {
      -webkit-column-gap: 35px;
      -moz-column-gap: 35px;
      column-gap: 35px;
   }
}

@media (max-width: 1180px) {
   footer .footerMenu {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }
}

footer .footerMenu li.open .mainLink::after {
   -webkit-transform: translate(-50%, 0) rotate(0);
   transform: translate(-50%, 0) rotate(0);
}

footer .footerMenu li a {
   color: #fff;
}

footer .footerMenu .mainLink {
   font-size: 18px;
   line-height: 1;
   letter-spacing: 0;
   position: relative;
}

footer .footerMenu .mainLink::before,
footer .footerMenu .mainLink::after {
   content: "";
   width: 12px;
   height: 1px;
   background-color: #fff;
   position: absolute;
   top: 50%;
   right: 12px;
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
   z-index: 1;
   display: none;
}

footer .footerMenu .mainLink::after {
   -webkit-transform: translate(-50%, 0) rotate(90deg);
   transform: translate(-50%, 0) rotate(90deg);
}

footer .footerMenu .mainLink.current::before,
footer .footerMenu .mainLink.current::after {
   background-color: #000;
}

@media (max-width: 1180px) {
   footer .footerMenu .mainLink {
      padding: 15px 0;
      display: block;
      border-bottom: 1px solid #383838;
   }

   footer .footerMenu .mainLink:after,
   footer .footerMenu .mainLink:before {
      display: block;
   }
}

@media (max-width: 400px) {
   footer .footerMenu .mainLink {
      font-size: 16px;
   }
}

footer .footerMenu .submenu {
   padding-top: 25px;
}

footer .footerMenu .submenu li {
   padding: 7px 0;
}

footer .footerMenu .submenu a {
   position: relative;
   color: #999;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0;
}

footer .footerMenu .submenu a:after {
   content: "";
   width: 0;
   height: 1px;
   position: absolute;
   bottom: -2px;
   left: 0;
   background-color: #bbb;
}

footer .footerMenu .submenu a:hover {
   color: #bbb;
}

footer .footerMenu .submenu a:hover:after {
   width: 100%;
}

@media (max-width: 1180px) {
   footer .footerMenu .submenu {
      display: none;
      padding-top: 10px;
   }

   footer .footerMenu .submenu a:after {
      display: none;
   }

   footer .footerMenu .submenu a:hover {
      color: #999;
   }
}

footer .copyrightBox {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   color: #999;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 -5px;
   margin-top: 12px;
   position: relative;
}

footer .copyrightBox .copyright {
   font-size: 14px;
}

footer .copyrightBox .ibestLink {
   padding: 5px;
}

footer .copyrightBox .ibestLink a {
   color: #999;
   font-size: 14px;
}

@media (min-width: 1201px) {
   footer .copyrightBox .ibestLink a:hover {
      color: #fff;
   }
}

@media (max-width: 1024px) {
   footer .copyrightBox {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      margin-bottom: 10px;
   }
}

/*fixedArea*/
.fixedArea {
   z-index: 10;
   position: fixed;
   right: 20px;
   bottom: 10%;
   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: end;
   -ms-flex-align: end;
   align-items: flex-end;
   row-gap: 15px;
   opacity: 0;
   pointer-events: none;
}

.fixedArea.open {
   opacity: 1;
   pointer-events: auto;
}

.fixedArea.open .compareBox {
   -webkit-animation: textSlideUpAnimation 0.5s ease-in-out forwards;
   animation: textSlideUpAnimation 0.5s ease-in-out forwards;
}

.fixedArea.open .chatBox {
   -webkit-animation: textSlideUpAnimation 0.5s 0.2s ease-in-out forwards;
   animation: textSlideUpAnimation 0.5s 0.2s ease-in-out forwards;
}

.fixedArea.close .compareBox {
   -webkit-animation: opacity1to0 0.5s ease-in-out;
   animation: opacity1to0 0.5s ease-in-out;
}

.fixedArea.close .inquireBox {
   -webkit-animation: opacity1to0 0.5s ease-in-out;
   animation: opacity1to0 0.5s ease-in-out;
}

.fixedArea.close .chatBox {
   -webkit-animation: opacity1to0 0.5s ease-in-out;
   animation: opacity1to0 0.5s ease-in-out;
}

.fixedArea .compareBox,
.fixedArea .inquireBox {
   opacity: 0;
   height: 60px;
   padding: 0 24px;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 30px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   color: #fff;
   font-weight: 700;
}

.fixedArea .compareBox .num,
.fixedArea .inquireBox .num {
   background-color: #fff;
   color: #d10000;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   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;
   font-size: 12px;
   line-height: 1;
   letter-spacing: 0;
   margin-left: auto;
   margin-right: 8px;
}

.fixedArea .compareBox .icon,
.fixedArea .inquireBox .icon {
   width: 44px;
   height: 44px;
   background-color: #666;
   border-radius: 50%;
   position: relative;
   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;
}

.fixedArea .compareBox:hover,
.fixedArea .inquireBox:hover {
   background-color: #666;
}

.fixedArea .compareBox:hover .icon,
.fixedArea .inquireBox:hover .icon {
   background-color: #000;
}

.fixedArea .compareBox .icon:after {
   content: "A/B";
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0;
}

.fixedArea .inquireBox .icon:after {
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url("../images/inquire.png");
   width: 18px;
   height: 13px;
   position: absolute;
}

.fixedArea .chatBox {
   opacity: 0;
   width: 48px;
   height: 48px;
   background-color: #000;
   border-radius: 50%;
   position: relative;
   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;
}

.fixedArea .chatBox:hover {
   background-color: #666;
}

.fixedArea .chatBox .icon {
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url("../images/chat.png");
   width: 22px;
   height: 25.3px;
   position: absolute;
}

@media (max-width: 1180px) {
   .fixedArea {
      display: none;
   }
}

.privacyArea {
   width: 100%;
   max-width: 760px;
   background-color: rgba(0, 0, 0, 0.8);
   -webkit-box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
   box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
   padding: 30px 0;
   position: fixed;
   bottom: 0;
   right: 0;
   z-index: 50;
}

.privacyArea.check {
   opacity: 0;
   -webkit-transform: translateY(100%);
   transform: translateY(100%);
}

.privacyArea .wrap {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}

.privacyArea .text {
   width: 100%;
   color: #fff;
   font-size: 14px;
   line-height: 1.5;
   letter-spacing: 0.5px;
   text-align: center;
}

.privacyArea .text a {
   color: #000;
   display: inline-block;
   margin-top: 8px;
   text-decoration: underline;
}

.privacyArea .text a:hover {
   color: #000;
}

.privacyArea .btnBox {
   width: 100%;
   max-width: 360px;
   -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-top: 25px;
}

@media (max-width: 480px) {
   .privacyArea .btnBox {
      max-width: 100%;
   }
}

.translateIbest {
   display: inline-block;
   vertical-align: middle;
}

.translateIbest .design {
   /*網頁設計‧愛貝斯*/
   display: block;
   line-height: 22px;
   font-size: 9pt;
   color: #000;
}

.translateIbest .design a {
   /*網頁設計‧愛貝斯*/
   color: #000;
   text-decoration: none;
}

.translateIbest .design a:hover {
   text-decoration: underline;
}

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

@media (min-width: 1181px) {
   .fixedQuickLink {
      display: none;
   }
}

.fixedQuickLink ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.fixedQuickLink li {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   position: relative;
}

.fixedQuickLink li:not(:last-child):after {
   content: "";
   height: 60%;
   width: 1px;
   background-color: rgba(255, 255, 255, 0.3);
   position: absolute;
   right: 0;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.fixedQuickLink a {
   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;
   -webkit-column-gap: 8px;
   -moz-column-gap: 8px;
   column-gap: 8px;
   height: 55px;
   font-size: 13px;
   color: #fff;
   font-weight: 700;
}

.fixedQuickLink a span:first-child {
   -webkit-box-ordinal-group: 3;
   -ms-flex-order: 2;
   order: 2;
}

.fixedQuickLink a .num {
   background-color: #fff;
   color: #d10000;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   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;
   font-size: 12px;
   line-height: 1;
   letter-spacing: 0;
   -webkit-box-ordinal-group: 4;
   -ms-flex-order: 3;
   order: 3;
}

.fixedQuickLink a .icon {
   -webkit-box-ordinal-group: 2;
   -ms-flex-order: 1;
   order: 1;
   border-radius: 50%;
   position: relative;
   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;
}

@media (max-width: 380px) {
   .fixedQuickLink a .icon {
      display: none;
   }
}

.fixedQuickLink .products {
   position: relative;
}

.fixedQuickLink .products:before {
   content: "";
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url("../images/product.png");
   width: 24px;
   height: 23px;
   display: inline-block;
}

@media (max-width: 380px) {
   .fixedQuickLink .products:before {
      display: none;
   }
}

.fixedQuickLink .compareBox .icon:after {
   content: "A/B";
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0;
}

.fixedQuickLink .inquireBox .icon:after {
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url("../images/inquire.png");
   width: 18px;
   height: 13px;
}

.fixedQuickLink i {
   margin-bottom: 5px;
}

/*後台預覽模式*/
.adminPreviewArea {
   max-width: 320px;
   border: 4px solid #ffe2e2;
   border-radius: 5px;
   background: #fdc9c9;
   color: #000;
   padding: 20px;
   position: fixed;
   top: 15px;
   right: 0;
   z-index: 99999;
}

.adminPreviewArea a {
   text-decoration: underline;
}

/*後台登入模式*/
.adminLoginArea {
   width: 100%;
   background-color: rgba(180, 0, 0, 0.85);
   color: #fff;
   font-size: 15px;
   line-height: 1;
   letter-spacing: 0.5px;
   padding-bottom: env(safe-area-inset-bottom);
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 99999;
   text-align: center;
}

.adminLoginArea p {
   padding: 20px 15px;
}

/*booking*/
.bookingArea {
   margin-top: -85px;
   position: relative;
   z-index: 2;
}

@media (max-width: 960px) {
   .bookingArea {
      margin-top: 0;
   }
}

.bookingArea .wrap {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0;
   background-color: #fff;
}

@media (max-width: 960px) {
   .bookingArea .wrap {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 15px 20px;
   }
}

.bookingArea .title {
   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;
   -webkit-box-flex: 3;
   -ms-flex: 3;
   flex: 3;
   font-size: 15px;
   border-right: 1px solid #e6e6e6;
}

@media (max-width: 960px) {
   .bookingArea .title {
      display: none;
   }
}

.bookingArea .title i {
   margin-right: 15px;
   font-size: 20px;
}

.bookingArea .bookingList {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 6;
   -ms-flex: 6;
   flex: 6;
   padding: 20px;
}

@media (max-width: 960px) {
   .bookingArea .bookingList {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 0;
   }
}

@media (max-width: 960px) {
   .bookingArea .bookingList li {
      margin-bottom: 15px;
   }
}

.bookingArea .bookingList li:not(:first-child) {
   margin-left: 10px;
}

@media (max-width: 960px) {
   .bookingArea .bookingList li:not(:first-child) {
      margin-left: 0;
   }
}

.bookingArea .btn {
   -webkit-box-flex: 3;
   -ms-flex: 3;
   flex: 3;
}

@media (max-width: 960px) {
   .bookingArea .btn {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
   }
}

.bookingArea .btn a {
   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;
   height: 100%;
   font-size: 16px;
   color: #fff;
   letter-spacing: 0.2em;
   background-color: #000;
}

@media (max-width: 960px) {
   .bookingArea .btn a {
      padding: 12px;
   }
}

.bookingArea input,
.bookingArea select {
   height: 45px;
   padding: 5px 10px;
   border: 1px solid #e6e6e6;
   font-size: 16px;
   font-family: "微軟正黑體";
}

@media (max-width: 960px) {

   .bookingArea input,
   .bookingArea select {
      width: 100%;
   }
}

/*********內頁**********/
.mainArea {
   padding-bottom: 30px;
}

.mainArea .contentBox {
   clear: both;
}

.mainArea.successPage {
   min-height: 300px;
}

.mainArea.successPage .btnBox.back {
   margin-top: 40px;
}

.mainArea.successPage .btnBox.back .btn {
   max-width: 200px;
}

.titleBox {
   text-align: left;
   position: relative;
   text-align: center;
}

.titleBox .titleTw {
   color: #333;
   font-size: 60px;
   line-height: 1;
   letter-spacing: 0;
   font-weight: bold;
}

@media (max-width: 1400px) {
   .titleBox .titleTw {
      font-size: 60px;
   }
}

@media (max-width: 991px) {
   .titleBox .titleTw {
      font-size: 40px;
   }
}

.titleBox .titleEn {
   margin-left: 5px;
   display: block;
   text-align: left;
   font-weight: bold;
   font-size: 20px;
   line-height: 1;
   letter-spacing: 0;
}

@media (max-width: 991px) {
   .titleBox .titleEn {
      font-size: 15px;
   }
}

.listTitle {
   text-align: center;
   color: #333;
   font-size: 60px;
   line-height: 1.5;
   letter-spacing: 0;
}

@media (max-width: 768px) {
   .listTitle {
      font-size: 50px;
      padding-bottom: 16px;
   }
}

@media (max-width: 650px) {
   .listTitle {
      font-size: 40px;
   }
}

@media (max-width: 768px) {
   .mListArea .catalogMList {
      max-width: 600px;
      margin: 0 auto;
   }
}

.mListArea .catalogMList .catalogItem:not(:last-child) {
   margin-bottom: 72px;
}

@media (max-width: 768px) {
   .mListArea .catalogMList .catalogItem:not(:last-child) {
      margin-bottom: 40px;
   }
}

@media (min-width: 1401px) {
   .mListArea .catalogMList .catalogItem:nth-child(2n+1) .Txt {
      padding-left: 50px;
      padding-right: 96px;
   }
}

@media (min-width: 769px) {
   .mListArea .catalogMList .catalogItem:nth-child(2n+1) .item {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
   }
}

.mListArea .catalogMList .item {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

@media (max-width: 768px) {
   .mListArea .catalogMList .item {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }
}

@media (min-width: 1201px) {
   .mListArea .catalogMList .item:hover {
      -webkit-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
   }

   .mListArea .catalogMList .item:hover img {
      opacity: 0.8;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
   }
}

.mListArea .catalogMList .item .link {
   width: 100%;
   height: 100%;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: block;
   z-index: 2;
}

.mListArea .catalogMList .item .Img {
   width: 55%;
}

.mListArea .catalogMList .item .Img img {
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

@media (max-width: 1200px) {
   .mListArea .catalogMList .item .Img {
      width: 50%;
   }
}

@media (max-width: 768px) {
   .mListArea .catalogMList .item .Img {
      width: 100%;
   }
}

.mListArea .catalogMList .item .Txt {
   position: relative;
   z-index: 2;
   width: 45%;
   padding-left: 96px;
   padding-right: 50px;
   pointer-events: none;
}

.mListArea .catalogMList .item .Txt .title {
   font-size: 24px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: bold;
   color: #000;
}

.mListArea .catalogMList .item .Txt .text {
   padding-top: 10px;
   font-size: 16px;
   line-height: 1.625;
   letter-spacing: 0;
   color: #333;
}

.mListArea .catalogMList .item .Txt .btnBox {
   pointer-events: auto;
   position: relative;
   z-index: 3;
   margin-top: 38px;
}

.mListArea .catalogMList .item .Txt .btnBox .btn {
   max-width: 180px;
   min-width: auto;
}

@media (min-width: 1201px) {
   .mListArea .catalogMList .item .Txt .btnBox .btn:hover span:after {
      border-color: #f6f6f6;
   }
}

.mListArea .catalogMList .item .Txt .btnBox span {
   position: relative;
   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;
   -webkit-column-gap: 13px;
   -moz-column-gap: 13px;
   column-gap: 13px;
}

.mListArea .catalogMList .item .Txt .btnBox span:after {
   content: "";
   width: 10px;
   height: 10px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   -webkit-transform: translateY(-50%) rotate(-45deg);
   transform: translateY(-50%) rotate(-45deg);
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   margin-top: 10px;
}

@media (max-width: 1400px) {
   .mListArea .catalogMList .item .Txt {
      padding-left: 60px;
   }
}

@media (max-width: 1200px) {
   .mListArea .catalogMList .item .Txt {
      padding: 0 30px;
      width: 50%;
   }

   .mListArea .catalogMList .item .Txt .title {
      font-size: 22px;
   }

   .mListArea .catalogMList .item .Txt .text {
      font-size: 14px;
   }

   .mListArea .catalogMList .item .Txt .btnBox {
      margin-top: 20px;
   }
}

@media (max-width: 768px) {
   .mListArea .catalogMList .item .Txt {
      padding: 20px 0;
      width: 100%;
   }
}

@media (max-width: 470px) {
   .mListArea .catalogMList .item .Txt .title {
      font-size: 20px;
   }

   .mListArea .catalogMList .item .Txt .text {
      font-size: 13px;
   }
}

/*bread*/
.bread {
   background-color: #fff;
   margin-bottom: 50px;
   padding: 20px 0;
}

@media (max-width: 1180px) {
   .bread {
      margin-bottom: 30px;
   }
}

.bread .wrap {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   row-gap: 4px;
}

.bread .wrap a,
.bread .wrap span {
   color: #999;
   font-weight: 400;
   display: inline-block;
   font-size: 12px;
   line-height: 1;
   letter-spacing: 0;
   margin: 0 8px;
}

.bread .wrap a:hover {
   color: #000;
}

.bread .wrap span {
   color: #666;
}

.bread .wrap a+a,
.bread .wrap span+span,
.bread .wrap span+a,
.bread .wrap a+span {
   position: relative;
}

/* .bread.arrow .wrap a+a,
.bread.arrow .wrap span+span,
.bread.arrow .wrap span+a,
.bread.arrow .wrap a+span {
   padding-left: 25px;
} */

/* .bread.arrow .wrap a+a::before,
.bread.arrow .wrap span+span::before,
.bread.arrow .wrap span+a::before,
.bread.arrow .wrap a+span::before {
   content: "";
   width: 7px;
   height: 7px;
   border-right: 1px solid #a9a9a9;
   border-bottom: 1px solid #a9a9a9;
   position: absolute;
   top: 50%;
   left: 7px;
   z-index: 1;
   -webkit-transform: translateY(-50%) rotate(-45deg);
   transform: translateY(-50%) rotate(-45deg);
} */

.bread.arrow .wrap :last-child {
   color: #000;
}

.bread.verticalLine .wrap a+a,
.bread.verticalLine .wrap span+span,
.bread.verticalLine .wrap span+a,
.bread.verticalLine .wrap a+span {
   padding-left: 20px;
}

.bread.verticalLine .wrap a+a::before,
.bread.verticalLine .wrap span+span::before,
.bread.verticalLine .wrap span+a::before,
.bread.verticalLine .wrap a+span::before {
   content: "";
   width: 1px;
   height: 80%;
   background-color: #a9a9a9;
   position: absolute;
   top: 10%;
   left: 10px;
   z-index: 1;
}

.bread.horizontalLine .wrap a+a,
.bread.horizontalLine .wrap span+span,
.bread.horizontalLine .wrap span+a,
.bread.horizontalLine .wrap a+span {
   padding-left: 25px;
}

.bread.horizontalLine .wrap a+a::before,
.bread.horizontalLine .wrap span+span::before,
.bread.horizontalLine .wrap span+a::before,
.bread.horizontalLine .wrap a+span::before {
   content: "";
   width: 8px;
   height: 1px;
   background-color: #a9a9a9;
   position: absolute;
   top: 50%;
   left: 8px;
   z-index: 1;
}

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

/*文章標題*/
.articleTitle {
   border-bottom: 1px dashed #666;
   color: #232323;
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 20px;
   padding: 12px 0;
}

/*側邊標題字*/
.sectionTitle {
   color: #000;
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 12px;
   padding-top: 12px;
   padding-bottom: 26px;
   border-bottom: 2px solid #000;
}

@media (max-width: 768px) {
   .sectionTitle {
      padding-bottom: 12px;
   }
}

.sectionTitle strong {
   display: block;
   position: relative;
}

.sectionTitle a {
   display: block;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

table.breakpoint>tbody>tr>td.expand {
   background: url("../images/plus.png") no-repeat 5px center;
   cursor: pointer;
   padding-left: 40px;
}

@-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;
   }
}

/*類別*/
.classBox {
   position: relative;
   z-index: 4;
}

.classBox .classCurrent {
   background-color: #000;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 10px 0;
   position: relative;
   text-align: center;
}

.classBox .classCurrent::before {
   content: "\f107";
   color: #fff;
   font-size: 15px;
   font-family: FontAwesome;
   line-height: 1;
   margin-top: -6px;
   position: absolute;
   right: 15px;
   top: 50%;
   z-index: 1;
}

@media (min-width: 1024px) {
   .classBox .classCurrent {
      display: none;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
   }
}

.classBoxRow {
   margin-top: 20px;
   margin-bottom: 50px;
}

@media (min-width: 1024px) {
   .classBoxRow .classLink {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
   }

   .classBoxRow .classLink a {
      display: block;
      padding: 10px 15px;
      font-size: 13px;
      color: #000;
      background-color: #f0f0f0;
      letter-spacing: 2px;
      text-align: center;
   }

   .classBoxRow .classLink a.current,
   .classBoxRow .classLink a:hover {
      color: #fff;
      background-color: #000;
   }
}

.classBoxColumn {
   margin-bottom: 30px;
}

@media (min-width: 1024px) {
   .classBoxColumn {
      max-width: 240px;
   }
}

.classBoxColumn .classLink .linkHasItems::before,
.classBoxColumn .classLink .linkHasItems::after {
   content: "";
   width: 13px;
   height: 1px;
   background-color: #2f2f2f;
   display: block;
   position: absolute;
   top: 50%;
   right: 15px;
   z-index: 1;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}

.classBoxColumn .classLink .linkHasItems::before {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.classBoxColumn .classLink .linkHasItems::after {
   -webkit-transform: translateY(-50%) rotate(90deg);
   transform: translateY(-50%) rotate(90deg);
}

.classBoxColumn .classLink .linkHasItems.open {
   background-color: #000;
   color: #fff;
}

.classBoxColumn .classLink .linkHasItems.open::before,
.classBoxColumn .classLink .linkHasItems.open::after {
   background-color: #2f2f2f;
}

.classBoxColumn .classLink .linkHasItems.open::after {
   -webkit-transform: translateY(-50%) rotate(0);
   transform: translateY(-50%) rotate(0);
}

.classBoxColumn .classLink .linkHasItems.open+ul {
   display: block;
}

.classBoxColumn .classLink .linkHasItems.open+ul>li {
   -webkit-animation: aniSlideLeft 0.5s 0.3s ease-out both;
   animation: aniSlideLeft 0.5s 0.3s ease-out both;
}

.classBoxColumn .classLink .linkHasItems.open+ul>li a {
   background-color: #f1f1f1;
   color: #2f2f2f;
}

.classBoxColumn .classLink .linkHasItems.open+ul>li a.current,
.classBoxColumn .classLink .linkHasItems.open+ul>li a:hover {
   background-color: #e8e8e8;
   color: #000;
}

.classBoxColumn .classLink .linkHasItems.open+ul>li a.current::before,
.classBoxColumn .classLink .linkHasItems.open+ul>li a.current::after,
.classBoxColumn .classLink .linkHasItems.open+ul>li a:hover::before,
.classBoxColumn .classLink .linkHasItems.open+ul>li a:hover::after {
   background-color: #000;
}

@media (min-width: 1024px) {
   .classBoxColumn .classLink ul {
      display: none;
   }

   .classBoxColumn .classLink ul li:not(:first-child) {
      border-top: 1px solid #ccc;
   }

   .classBoxColumn .classLink a {
      color: #888;
      display: block;
      line-height: 1.2;
      letter-spacing: 0.5px;
      padding: 18px 15px;
      position: relative;
      padding: 18px 15px 18px 0;
   }

   .classBoxColumn .classLink a:after {
      content: "";
      width: 0;
      height: 1px;
      background-color: #000;
      position: absolute;
      bottom: 18px;
      left: 0;
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
   }

   .classBoxColumn .classLink a.current,
   .classBoxColumn .classLink a:hover {
      color: #000;
   }

   .classBoxColumn .classLink a.current::before,
   .classBoxColumn .classLink a.current::after,
   .classBoxColumn .classLink a:hover::before,
   .classBoxColumn .classLink a:hover::after {
      width: 100%;
   }
}

@media (max-width: 1023px) {

   .classBoxRow .classLink,
   .classBoxColumn .classLink {
      width: 100%;
      background-color: #fff;
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
   }

   .classBoxRow .classLink.open,
   .classBoxColumn .classLink.open {
      display: block;
   }

   .classBoxRow .classLink>li:not(:first-child),
   .classBoxColumn .classLink>li:not(:first-child) {
      border-top: 1px solid #ccc;
   }

   .classBoxRow .classLink>li>a.current,
   .classBoxColumn .classLink>li>a.current {
      color: #000;
   }

   .classBoxRow .classLink>li ul,
   .classBoxColumn .classLink>li ul {
      display: none;
   }

   .classBoxRow .classLink a,
   .classBoxColumn .classLink a {
      color: #2f2f2f;
      background-color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px 15px;
      position: relative;
      text-align: center;
   }
}

.pageBox {
   margin-top: 40px;
}

.pageBox .pageList {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   border-top: 1px solid #cecece;
   padding: 40px 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.pageBox .pageList a {
   border: 1px solid #c2c2c2;
   color: #666;
   display: block;
   font-size: 16px;
   border-radius: 30px;
}

.pageBox .pageList a.prevBtn::before,
.pageBox .pageList a.nextBtn::before {
   content: "";
   width: 10px;
   height: 10px;
   border-left: 1px solid #9e9e9e;
   border-bottom: 1px solid #9e9e9e;
   display: block;
   position: absolute;
}

.pageBox .pageList a.prevBtn::before {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.pageBox .pageList a.nextBtn::before {
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
}

.pageBox .pageList a:hover {
   border: 1px solid #000;
   background-color: #000;
   color: #fff;
}

.pageBox .pageList a:hover.prevBtn::before,
.pageBox .pageList a:hover.nextBtn::before {
   border-left: 1px solid #fff;
   border-bottom: 1px solid #fff;
}

.pageBox .pageList.number {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.pageBox .pageList.number.oval a {
   width: 50px;
}

.pageBox .pageList.number li {
   margin: 5px;
}

.pageBox .pageList.number a {
   width: 40px;
   height: 40px;
   font-weight: 400;
   line-height: 38px;
   position: relative;
   text-align: center;
}

.pageBox .pageList.number a.prevBtn::before,
.pageBox .pageList.number a.nextBtn::before {
   margin: auto;
   top: 0;
   bottom: 0;
}

.pageBox .pageList.number a.prevBtn::before {
   left: 5px;
   right: 0;
}

.pageBox .pageList.number a.nextBtn::before {
   left: 0;
   right: 5px;
}

.pageBox .pageList.number a.firstBtn::before,
.pageBox .pageList.number a.firstBtn::after,
.pageBox .pageList.number a.lastBtn::before,
.pageBox .pageList.number a.lastBtn::after {
   content: "";
   width: 10px;
   height: 10px;
   border-left: 1px solid #9e9e9e;
   border-bottom: 1px solid #9e9e9e;
   display: block;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
}

.pageBox .pageList.number a.firstBtn::before,
.pageBox .pageList.number a.firstBtn::after {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.pageBox .pageList.number a.firstBtn::before {
   left: -2px;
   right: 0;
}

.pageBox .pageList.number a.firstBtn::after {
   left: 12px;
   right: 0;
}

.pageBox .pageList.number a.lastBtn::before,
.pageBox .pageList.number a.lastBtn::after {
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
}

.pageBox .pageList.number a.lastBtn::before {
   left: 0;
   right: -2px;
}

.pageBox .pageList.number a.lastBtn::after {
   left: 0;
   right: 12px;
}

.pageBox .pageList.number a.current {
   border: 1px solid #000;
   background-color: #000;
   color: #fff;
}

.pageBox .pageList.number a:hover.firstBtn::before,
.pageBox .pageList.number a:hover.firstBtn::after,
.pageBox .pageList.number a:hover.lastBtn::before,
.pageBox .pageList.number a:hover.lastBtn::after {
   border-left: 1px solid #fff;
   border-bottom: 1px solid #fff;
}

.pageBox .pageList.prevnext li.prev {
   margin-right: auto;
}

.pageBox .pageList.prevnext li.next {
   margin-left: auto;
}

.pageBox .pageList.prevnext a {
   width: 180px;
   height: 45px;
   font-weight: 300;
   line-height: 43px;
   padding: 0 20px;
   position: relative;
   text-align: center;
}

.pageBox .pageList.prevnext a.prevBtn::before,
.pageBox .pageList.prevnext a.nextBtn::before {
   top: calc(50% - 5px);
}

.pageBox .pageList.prevnext a.prevBtn::before {
   left: 15px;
}

.pageBox .pageList.prevnext a.nextBtn {
   margin-left: auto;
}

.pageBox .pageList.prevnext a.nextBtn::before {
   right: 15px;
}

@media (max-width: 768px) {
   .pageBox .pageList.prevnext a {
      width: 125px;
      padding: 0 15px;
   }
}

@media (max-width: 640px) {
   .pageBox .pageList.prevnext li {
      width: calc(50% - 15px);
   }

   .pageBox .pageList.prevnext a {
      width: 100%;
   }
}

@media (max-width: 480px) {
   .pageBox .pageList.prevnext li {
      width: calc(50% - 10px);
   }
}

.pageBox .pageList.prevnext.circle a {
   width: 45px;
   padding: 0;
}

.pageBox .pageList.prevnext.circle a span {
   display: none;
}

.pageBox .pageList.prevnext.circle a.prevBtn::before {
   left: calc(50% - 3px);
}

.pageBox .pageList.prevnext.circle a.nextBtn::before {
   right: calc(50% - 3px);
}

.pageBox .pageList.circle a {
   border-radius: 50%;
   overflow: hidden;
}

.pageBox .pageList.oval a {
   border-radius: 30px;
   overflow: hidden;
}

/*標籤*/
.tagBox {
   padding: 20px 0;
}

.tagBox b.title {
   display: block;
   color: #000;
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 30px;
   padding-top: 12px;
   padding-bottom: 26px;
   border-bottom: 2px solid #000;
}

@media (max-width: 1023px) {
   .tagBox b.title {
      display: none;
   }
}

.tagBox b.s_title {
   margin-right: 10px;
   display: inline-block;
}

@media (min-width: 1024px) {
   .tagBox b.s_title {
      display: none;
   }
}

.tagBox ul {
   display: inline-block;
}

@media (min-width: 1024px) {
   .tagBox ul {
      margin-left: -5px;
   }
}

.tagBox li {
   display: inline-block;
   margin-bottom: 5px;
}

.tagBox a {
   position: relative;
   display: block;
   margin: 0 3px;
   padding: 5px 10px;
   border-radius: 4px;
   background-color: #f6f6f6;
   font-size: 13px;
   color: #000;
}

.tagBox a:hover {
   color: #fff;
   background-color: #000;
}

.tagBox a.current {
   color: #fff;
   background-color: #000;
}

.tagBox a.current:before {
   content: "\f00d";
   margin-right: 5px;
   font-family: FontAwesome;
   font-size: 12px;
}

/*頁籤*/
.tab {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin-top: 40px;
   border-bottom: 4px solid #ccc;
}

.tab li {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
}

.tab a {
   color: #000;
   display: block;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   padding: 21.5px 10px;
   position: relative;
   z-index: 2;
   text-align: center;
   font-weight: 700;
   font-size: 16px;
   line-height: 1;
   letter-spacing: 0;
}

.tab a:after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0;
   height: 4px;
   background-color: #000;
}

.tab a.current,
.tab a:hover {
   color: #000;
}

.tab a.current:after,
.tab a:hover:after {
   width: 100%;
}

@media (max-width: 650px) {
   .tab a {
      font-size: 14px;
   }
}

@media (max-width: 400px) {
   .tab a {
      font-size: 12px;
      padding: 16px 6px;
   }
}

/*頁籤內容*/
.tabContent {
   margin-top: -1px;
   padding: 80px 5px;
}

@media (max-width: 991px) {
   .tabContent {
      padding-top: 40px;
   }
}

@media (max-width: 650px) {
   .tabContent {
      padding-top: 20px;
   }
}

.tabContent .tabContentItem {
   display: none;
}

.albumBox {
   width: 50%;
   margin-right: 30px;
}

@media (max-width: 767px) {
   .albumBox {
      width: 100%;
      margin-right: 0;
      margin-bottom: 30px;
   }
}

.albumBox .albumList .albumItem {
   cursor: pointer;
}

.albumBox .albumList .albumItem img {
   width: 100%;
   display: block;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.albumBox .albumListMain .albumItem {
   height: 320px;
}

.albumBox .albumListMain .albumItem img {
   width: 100%;
   height: 100%;
   display: block;
   -o-object-fit: contain;
   object-fit: contain;
}

.albumBox .albumListNav {
   margin: 22px -5px 0;
}

.albumBox .albumListNav .albumItem {
   padding: 0 5px;
}

/*側邊_menu*/
.side_menu {
   margin-bottom: 50px;
}

.side_menu li {
   border-bottom: 1px solid #e1e1e1;
   position: relative;
}

.side_menu li>a {
   display: block;
   font-size: 14px;
   padding: 10px 15px;
}

.side_menu li>a.current {
   background-color: #8c8c8c;
   color: #fff;
}

.side_menu li>a b {
   color: #808080;
   font-size: 13px;
   font-weight: 400;
   margin-left: 10px;
}

.side_menu dl {
   padding-left: 25px;
}

.side_menu dl a {
   display: block;
   padding: 10px 15px;
   font-size: 14px;
}

.side_menu dl a.current {
   color: #000;
   text-decoration: underline;
}

/*側邊_相簿*/
.side_album {
   margin-top: 30px;
   margin-bottom: 30px;
   margin-right: -10px;
}

.side_album li {
   float: left;
   width: 33.33%;
   padding: 0 10px 10px 0;
}

.side_album a {
   display: block;
   -webkit-box-shadow: 2px 2px 5px #c3c3c3;
   box-shadow: 2px 2px 5px #c3c3c3;
}

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

/*側邊_線上訂房*/
.side_booking {
   margin-bottom: 30px;
}

.side_booking a {
   display: block;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 1px #8d2121;
   box-shadow: 0 1px 1px #8d2121;
   font-weight: bold;
   font-size: 25px;
   color: #fff;
   background-color: #f05b8f;
}

.side_booking a i {
   display: inline-block;
   font-size: 28px;
   padding: 10px 15px;
   margin-right: 15px;
   border-right: 1px solid #d33434;
   -webkit-box-shadow: 1px 0 #f38a8a;
   box-shadow: 1px 0 #f38a8a;
}

.side_booking a:hover {
   -webkit-box-shadow: inset 0 3px 3px #8d2121;
   box-shadow: inset 0 3px 3px #8d2121;
}

/*側邊_聯絡資訊*/
.side_contactInfo li {
   margin-bottom: 20px;
}

.side_contactInfo li.mail i {
   line-height: 30px;
   padding-left: 1px;
}

.side_contactInfo li.address i {
   padding-left: 2px;
}

.side_contactInfo a,
.side_contactInfo 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: #999;
}

.side_contactInfo a:hover {
   color: #fff;
}

.side_contactInfo 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 #616161;
   border-radius: 50%;
   font-size: 20px;
   color: #616161;
   text-align: center;
}

.side_contactInfo b {
   display: inline-block;
   vertical-align: middle;
   font-weight: 400;
}

/*側邊_房型*/
.side_room {
   margin-bottom: 50px;
}

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

.side_room .Txt {
   margin-top: 5px;
}

.side_room .Txt .title a {
   font-size: 16px;
   font-weight: 400;
}

.side_room .Txt .text {
   max-height: 100px;
   font-size: 13px;
   color: #858383;
   line-height: 1.8;
   overflow: hidden;
}

/*側邊_其他相關訊息*/
.side_news {
   margin: 30px 0;
}

.side_news .sideNewsList {
   margin-top: 20px;
}

.side_news .sideNewsItem {
   margin-bottom: 25px;
}

.side_news .Img {
   float: left;
   width: 60px;
   margin-right: 12px;
   overflow: hidden;
}

.side_news .Img img {
   display: block;
   height: 60px;
}

.side_news .Txt {
   overflow: hidden;
}

.side_news .Txt a {
   display: block;
   font-size: 14px;
   line-height: 1.5;
   font-weight: bold;
}

.side_news .Txt a:hover {
   text-decoration: underline;
}

.side_news .Txt b {
   display: block;
   margin-top: 5px;
   font-weight: 400;
   font-size: 12px;
   color: #999;
}

/*社群分享*/
.sideShare {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 30px 0;
}

@media (max-width: 991px) {
   .sideShare {
      padding: 20px 0;
   }
}

.sideShare .shareList {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.sideShare .shareList .shareTitle {
   position: relative;
   display: inline-block;
   font-weight: 400;
   font-size: 12px;
   line-height: 1;
   letter-spacing: 0;
   color: #bbb;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.sideShare .shareList .shareTitle:after {
   content: "";
   display: inline-block;
   height: 1px;
   width: 30px;
   margin: 0 15px;
   background-color: #e9e9e9;
}

.sideShare .shareList .shareItem a {
   color: #d1d1d1;
   display: inline-block;
   font-size: 16px;
   line-height: 1;
   padding: 5px 6px;
   text-align: center;
}

.sideShare .shareList .shareItem a:hover {
   color: #333;
}

.sideShare .shareList .shareItem a svg {
   width: 16px;
   height: 16px;
   display: inline-block;
   margin-top: -3px;
   vertical-align: middle;
}

/*Hover效果1: 放大淡出*/
.imh_opacity {
   background-color: transparent;
   overflow: hidden;
}

.imh_opacity img {
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.imh_opacity:hover img {
   opacity: 0.8;
   -webkit-transform: scale(1.05);
   transform: scale(1.05);
}

/*Hover效果1: 放大淡出Detail*/
.imh_detail {
   background-color: #000;
   overflow: hidden;
   position: relative;
}

.imh_detail img {
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.imh_detail a:before {
   content: "Details+";
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 99;
   margin-left: -45px;
   margin-top: -80px;
   display: block;
   padding: 10px 20px;
   font-size: 13px;
   color: #fff;
   border: 2px solid #fff;
   opacity: 0;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.imh_detail:hover a:before {
   opacity: 1;
   margin-top: -20px;
}

.imh_detail:hover img {
   opacity: 0.3;
   -webkit-transform: scale(1.05);
   transform: scale(1.05);
}

/*Hover效果1: 放大淡出zoom*/
.imh_zoom {
   background-color: #000;
   overflow: hidden;
   position: relative;
}

.imh_zoom img {
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.imh_zoom a:before {
   content: "\f002";
   display: block;
   position: absolute;
   left: 50%;
   top: -30px;
   margin-top: -20px;
   margin-left: -20px;
   z-index: 99;
   width: 40px;
   height: 40px;
   line-height: 40px;
   border-radius: 50%;
   font-size: 18px;
   color: #fff;
   font-family: FontAwesome;
   text-align: center;
   background-color: #000;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.imh_zoom:hover a:before {
   top: 50%;
}

.imh_zoom:hover img {
   opacity: 0.3;
   -webkit-transform: scale(1.05);
   transform: scale(1.05);
}

/*# sourceMappingURL=master.css.map */