@charset "UTF-8";
/*slick*/
@import url(../js/vendor/slick/slick.css);
@import url(../js/vendor/slick/slick-theme.css);
@import url(../js/vendor/perfect-scrollbar/perfect-scrollbar.min.css);
@import url(../js/vendor/jquery.mCustomScrollbar.min.js/jquery.mCustomScrollbar.min.css);

@font-face {
  font-family: 'icomoon';
  src: url('../../assets/font/fontawesome/webfonts/fa-brands-400.woff2') format('woff2');
}

@font-face {
  font-family: 'icon-solid';
  src: url('../../assets/font/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'icon-regular';
  src: url('../../assets/font/fontawesome/webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Alata';
    font-style: normal;
    font-weight: 400;
    src: local('Alata'), url('../../assets/font/Alata/Alata-Regular.woff') format('woff');
}

@font-face {
    font-family: 'SarabunThinItalic';
    src: url('../../assets/font/Sarabun/Sarabun-ThinItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ThinItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ThinItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ThinItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraLightItalic';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLightItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLightItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLightItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunLightItalic';
    src: url('../../assets/font/Sarabun/Sarabun-LightItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-LightItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-LightItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunItalic';
    src: url('../../assets/font/Sarabun/Sarabun-Italic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Italic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Italic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Italic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunMediumItalic';
    src: url('../../assets/font/Sarabun/Sarabun-MediumItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-MediumItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-MediumItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-MediumItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunSemiBoldItalic';
    src: url('../../assets/font/Sarabun/Sarabun-SemiBoldItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-SemiBoldItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-SemiBoldItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBoldItalic';
    src: url('../../assets/font/Sarabun/Sarabun-BoldItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-BoldItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-BoldItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraBoldItalic';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBoldItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBoldItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBoldItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBlackItalic';
    src: url('../../assets/font/Sarabun/Sarabun-BlackItalic.eot');
    src: url('../../assets/font/Sarabun/Sarabun-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-BlackItalic.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-BlackItalic.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunThin';
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraLight';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunLight';
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunRegular';
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunMedium';
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunSemiBold';
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBold';
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraBold';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBlack';
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunThin';
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraLight';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunLight';
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunRegular';
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunMedium';
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunSemiBold';
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBold';
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraBold';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBlack';
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunThin';
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Thin.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Thin.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraLight';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraLight.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunLight';
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Light.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Light.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunRegular';
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Regular.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Regular.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunMedium';
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Medium.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Medium.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunSemiBold';
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-SemiBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBold';
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Bold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Bold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunExtraBold';
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot');
    src: url('../../assets/font/Sarabun/Sarabun-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'SarabunBlack';
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot');
    src: url('../../assets/font/Sarabun/Sarabun-Black.eot?#iefix') format('embedded-opentype'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff2') format('woff2'),
         url('../../assets/font/Sarabun/Sarabun-Black.woff') format('woff'),
         url('../../assets/font/Sarabun/Sarabun-Black.ttf') format('truetype');
}

/* eric */
@font-face {
  font-family: 'QUESTION';
  src: local("Microsoft JhengHei"); }

/* eric */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-magnifier"], [class*="icon-magnifier"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-mail"], [class*="icon-mail"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-uniE906"], [class*="icon-uniE906"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  font-size: 35px;
  font-size: 35px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-3"], [class*="icon-3"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-2"], [class*="icon-2"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-1"], [class*="icon-1"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-solid' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-uniE909:before {
  content: "\e909"; }

.icon-triangle_right:before {
  content: "\e908"; }

.icon-magnifier:before {
  content: "\f002"; }

.icon-uniE906:before {
  content: "\f077"; }

.icon-3:before {
  content: "\f060"; }

.icon-2:before {
  content: "\f061"; }

.icon-1:before {
  content: "\f176"; }

.icon-youtube:before {
  content: "\f167"; }

.icon-wechat:before {
  content: "\e901"; }

.icon-mail:before {
  content: "\f0e0"; }

.icon-facebook:before {
  content: "\f39e"; }

.icon-instagram:before {
  content: "\f16d"; }

.icon-sina-weibo:before {
  content: "\ea9a"; }

.container {
  padding-top: constant(safe-area-inset-top);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left); }

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

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden] {
  display: none; }

html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  position: relative;
  font-size: 100%;
  line-height: 1;
  letter-spacing: 1px;
  font-weight: normal;
  font-family: 'QUESTION', 'SarabunRegular',  '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

iframe {
  display: block; }

a {
  color: inherit;
  text-decoration: none; }

a:active,
a:hover {
  outline: 0; }

img {
  border: 0;
  display: block;
  max-width: 100%;
  height: auto; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

dl,
menu,
ol,
ul {
  margin: 0; }

ul {
  list-style: none;
  list-style-image: none; }

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

form {
  margin: 0; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0;
  white-space: normal;
  *margin-left: -7px; }

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button,
input {
  line-height: normal; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  *overflow: visible; }

button[disabled],
input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: none; }
  textarea::-webkit-scrollbar {
    width: 2px; }
  textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #c2c2c2; }
  textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #878787; }

/*去除input藍色框框*/
input,
button,
select,
textarea {
  outline: none; }

*:focus {
  outline: none; }

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

picture {
  overflow: hidden;
  font-size: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

mark {
  background: #ff0;
  color: #000; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before,
q:after {
  content: '';
  content: none; }

small {
  font-size: 75%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

hr {
  height: 1px;
  border: none; }

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: inherit;
  line-height: 1.5;
  max-width: 100%; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated-slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.hide,
.wp1,
.wp2,
.wp3,
.wp4,
.wp5,
.wp6 {
  visibility: hidden; }

.fadeInDown,
.fadeInDown2,
.fadeInUp,
.pulse,
.fadeIn,
.bounceIn {
  visibility: visible !important; }

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s; }

.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s; }

.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s; }

.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s; }

.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s; }

.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s; }

.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s; }

.delay-10s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s; }

.delay-15s {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s; }

.delay-20s {
  animation-delay: 2s;
  -webkit-animation-delay: 2s; }

.delay-25s {
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s; }

.delay-30s {
  animation-delay: 3s;
  -webkit-animation-delay: 3s; }

.delay-35s {
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(25%);
    transform: translateY(5%); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(25%);
    transform: translateY(25%); }
  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-duration: .8s;
  -webkit-animation-duration: .8s;
  animation-delay: .2s;
  -webkit-animation-delay: .2s; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-duration: .8s;
  -webkit-animation-duration: .8s;
  animation-delay: .2s;
  -webkit-animation-delay: .2s; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); } }

@keyframes fadeOutUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); } }

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); } }

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%); } }

@keyframes fadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

.fadeOutLeft {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%); } }

@keyframes fadeOutRight {
  from {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  to {
    opacity: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%); } }

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-101%);
    transform: translateY(-101%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-101%);
    transform: translateY(-101%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate(0, 101%);
    transform: translate(0, 101%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes slideInUp {
  0% {
    -webkit-transform: translate(0, 101%);
    transform: translate(0, 101%); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp; }

@-webkit-keyframes allin {
  0% { }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1; } }

@keyframes allin {
  0% { }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@keyframes allin {
  0% { }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1; } }

@-webkit-keyframes w100 {
  0% { }
  100% {
    width: 100%; } }

@keyframes w100 {
  0% { }
  100% {
    width: 100%; } }

@-webkit-keyframes h100 {
  0% { }
  100% {
    height: 100%; } }

@keyframes h100 {
  0% { }
  100% {
    height: 100%; } }

@-webkit-keyframes w0 {
  0% {
    width: 100%; }
  100% {
    width: 0%; } }

@keyframes w0 {
  0% {
    width: 100%; }
  100% {
    width: 0%; } }

@-webkit-keyframes h0 {
  0% {
    height: 100%; }
  100% {
    height: 0%; } }

@keyframes h0 {
  0% {
    height: 100%; }
  100% {
    height: 0%; } }

@-webkit-keyframes fakearrow {
  0% {
    -webkit-transform: translateY(-5px) rotate(45deg);
    transform: translateY(-5px) rotate(45deg);
    opacity: 1; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
    opacity: 0; } }

@keyframes fakearrow {
  0% {
    -webkit-transform: translateY(-5px) rotate(45deg);
    transform: translateY(-5px) rotate(45deg);
    opacity: 1; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
    opacity: 0; } }

/* 水平線方式出現 ps:ie不支援*/
@-webkit-keyframes horizontalShow {
  0% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes horizontalShow {
  0% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

/* 垂直線方式出現 ps:ie不支援*/
@-webkit-keyframes verticalShow {
  0% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes verticalShow {
  0% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

@-webkit-keyframes out {
  0% { }
  100% {
    display: none; } }

@keyframes out {
  0% { }
  100% {
    display: none; } }

@-webkit-keyframes imgSpan {
  0% {
    width: 0%; }
  40% {
    width: 101%;
    -webkit-transform: skewX(0deg) translateX(0%);
    transform: skewX(0deg) translateX(0%); }
  41% {
    width: 200%;
    -webkit-transform: skewX(30deg) translateX(-20%);
    transform: skewX(30deg) translateX(-20%); }
  100% {
    width: 200%;
    -webkit-transform: skewX(30deg) translateX(80%);
    transform: skewX(30deg) translateX(80%); } }

@keyframes imgSpan {
  0% {
    width: 0%; }
  40% {
    width: 101%;
    -webkit-transform: skewX(0deg) translateX(0%);
    transform: skewX(0deg) translateX(0%); }
  41% {
    width: 200%;
    -webkit-transform: skewX(30deg) translateX(-20%);
    transform: skewX(30deg) translateX(-20%); }
  100% {
    width: 200%;
    -webkit-transform: skewX(30deg) translateX(80%);
    transform: skewX(30deg) translateX(80%); } }

/*font-size*/
/*RWD*/
/*RWD*/
/*transiton*/
/*transiton*/
/*hide word*/
/*hide word*/
/* display: flex 置中*/
/* display: flex 置中*/
/* display: flex 左右至頂*/
/* display: flex 左右至頂*/
/* display: flex 向左靠*/
/* display: flex 向左靠*/
/* display: flex 向右靠*/
/* display: flex 向右靠*/
/* 偽元素線條*/
/* 偽元素線條*/
/*基礎燈箱設定*/
/*基礎燈箱設定*/
/*十字*/
/*十字*/
body {
  -webkit-animation: fadeIn 1s both;
  animation: fadeIn 1s both; }

/*↓下拉式選單基礎設定↓*/
.dropDown {
  position: relative; }
  .dropDown .selectMenu {
    width: 100%;
    height: 100%;
    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;
    cursor: pointer;
    position: relative; }
    .dropDown .selectMenu.open:after {
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg); }
    .dropDown .selectMenu:after {
      font-family: 'icon-solid';
      content: "\f0d7";
      font-size: 1.5rem;
      position: absolute;
      right: 5px;
      top: calc(50% -12px);
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
  .dropDown ul {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    border: 2px solid #000;
    display: none;
    max-height: 300px;
    background-color: #fff;
    overflow: hidden; }
    .dropDown ul .mCSB_container {
      margin: 0;
      font-size: 0; }
    .dropDown ul .mCSB_scrollTools {
      width: 4px; }
      .dropDown ul .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: #000; }
    .dropDown ul .mCSB_scrollTools .mCSB_draggerRail {
      background-color: transparent; }
    .dropDown ul li {
      padding: 15px 20px;
      font-size: 0.9375rem;
      font-family: SarabunRegular, 微軟正黑體;
      cursor: pointer;
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      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 all and (max-width: 700px) {
        .dropDown ul li {
          padding: 10px 5vw; } }
      .dropDown ul li:not(:last-child) {
        border-bottom: 2px solid #000; }
      .dropDown ul li:hover {
        background-color: #e83434;
        color: #fff; }

/*↑下拉式選單基礎設定↑*/
/*↓按鈕樣式1↓*/
.buttonType1 {
  font-weight: bold;
  font-size: 0.9375rem;
  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;
  position: relative;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease; }
  @media all and (max-width: 700px) {
    .buttonType1 {
      font-size: 0.8125rem; } }
  .buttonType1:hover {
    background-color: #000;
    color: #fff; }
  .buttonType1.show .top {
    width: 100%; }
  .buttonType1.show:before, .buttonType1.show:after {
    height: 100%; }
  .buttonType1.show .bottom:after {
    width: 0; }
  .buttonType1.show p {
    -webkit-animation: fadeInUp 0.8s both 0.4s;
    animation: fadeInUp 0.8s both 0.4s; }
  .buttonType1 span {
    display: block;
    height: 3px;
    background-color: #000;
    position: absolute; }
    .buttonType1 span.top {
      top: 0;
      left: 50%;
      width: 0%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
    .buttonType1 span.bottom {
      width: 100%;
      bottom: 0;
      left: 0; }
      .buttonType1 span.bottom:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        margin: auto;
        -webkit-transition: all .5s ease 0.5s;
        -o-transition: all .5s ease 0.5s;
        transition: all .5s ease 0.5s; }
  .buttonType1:before, .buttonType1:after {
    position: absolute;
    top: 0;
    content: "";
    display: block;
    width: 3px;
    height: 0%;
    background-color: #000;
    -webkit-transition: all .2s ease 0.4s;
    -o-transition: all .2s ease 0.4s;
    transition: all .2s ease 0.4s; }
  .buttonType1:before {
    left: 0; }
  .buttonType1:after {
    right: 0; }
  .buttonType1 p {
    padding: 15px 4.6875vw;
    opacity: 0; }
    @media all and (max-width: 1440px) {
      .buttonType1 p {
        padding: 10px 4.6875vw; } }
    @media all and (max-width: 700px) {
      .buttonType1 p {
        padding: 10px 35px; } }

/*↑按鈕樣式1↑*/
.mocaPageHead .titleSec {
  text-align: center;
  font-family: 'Alata', '微軟正黑體'; }
  .mocaPageHead .titleSec .title {
    font-size: 1.875rem;
    line-height: 1;
    margin: 0 0 15px 0; }
  .mocaPageHead .titleSec .subTitle {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1; }

.mocaPageHead .navBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 30px; }
  .mocaPageHead .navBar .link {
    border: solid 1px #000;
    border-right: none;
    width: 145px;
    height: 45px;
    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;
    cursor: pointer; }
    .mocaPageHead .navBar .link:last-child {
      border-right: solid 1px #000; }
    .mocaPageHead .navBar .link.now {
      color: #fff;
      background-color: #000; }
    .mocaPageHead .navBar .link p {
      font-size: 0.9375rem;
      font-weight: bold;
      font-family: SarabunRegular, 微軟正黑體; }

.dateAndType {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }
  .dateAndType .date {
    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; }
    .dateAndType .date .month, .dateAndType .date .day {
      font-family: 'Alata'; }
    .dateAndType .date .month:after {
      content: "."; }
    .dateAndType .date .year {
      font-family: 'SarabunRegular';
      margin-left: 5px; }
  .dateAndType .type {
    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; }
    .dateAndType .type:before {
      content: "/";
      margin: 0 10px;
      font-size: 0.75rem; }

header {
  height: 120px; }
  header .fakeAroow {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    color: #fff;
    background-color: #ff6060;
    border-radius: 50%;
    z-index: 10; }
    @media all and (max-width: 767px) {
      header .fakeAroow {
        display: none; } }
    header .fakeAroow div {
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-animation: 1s fakearrow infinite;
      animation: 1s fakearrow infinite; }
      header .fakeAroow div span {
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-right: 1px #fff solid;
        border-bottom: 1px #fff solid; }
  header .hdContent {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s; }
    header .hdContent.up .fakeAroow {
      display: none;
      z-index: -1; }
    header .hdContent.fixed {
      position: fixed;
      top: -70px;
      z-index: 10; }
      header .hdContent.fixed .logo {
        width: 170px;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        padding: 25px 0 0;
        overflow: hidden; }
        @media all and (max-width: 1400px) {
          header .hdContent.fixed .logo {
            padding: 15px 0 0; } }
        @media all and (max-width: 500px) {
          header .hdContent.fixed .logo {
            width: 50%; } }
        header .hdContent.fixed .logo .ch {
          display: none;
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease;
          opacity: 0; }
      header .hdContent.fixed .linkList ul li {
        padding: 20px 0 0;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease; }
        @media all and (max-width: 1400px) {
          header .hdContent.fixed .linkList ul li {
            padding: 10px 0 0; } }
      header .hdContent.fixed .linkList ul li .ch {
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        opacity: 0;
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%); }
    header .hdContent.fixed.up {
      top: 0; }
    header .hdContent .logo {
      position: absolute;
      top: 0;
      left: 70px;
      width: 240px;
      padding: 60px 0 0;
      -webkit-transition: all .8s ease;
      -o-transition: all .8s ease;
      transition: all .8s ease; }
      @media all and (max-width: 1580px) {
        header .hdContent .logo {
          width: 15vw;
          min-width: 170px;
          padding: 3.8vw 0 0;
          right: auto;
          left: 50px;
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0); } }
      @media all and (max-width: 1400px) {
        header .hdContent .logo {
          padding: 3vw 0 0; } }
      @media all and (max-width: 1160px) {
        header .hdContent .logo {
          padding: 15px 0 0; } }
      @media all and (max-width: 1024px) {
        header .hdContent .logo {
          width: 200px;
          left: 5vw; } }
      @media all and (max-width: 700px) {
        header .hdContent .logo {
          min-width: unset;
          left: 0; } }
      @media all and (max-width: 500px) {
        header .hdContent .logo {
          width: 50%; } }
      @media all and (max-width: 700px) {
        header .hdContent .logo a {
          display: block;
          margin: auto 20px auto 30px; } }
    header .hdContent .linkList {
      position: absolute;
      top: 0;
      left: 50vw;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      max-width: calc(100% - 290px - calc(190px + 6.25vw) - 40px);
      width: 100%; }
      @media all and (min-width: 1921px) {
        header .hdContent .linkList {
          max-width: calc(100% - 290px - 315px - 40px); } }
      @media all and (max-width: 1580px) {
        header .hdContent .linkList {
          max-width: calc(100% - calc(15vw + 50px) - calc(190px + 6.25vw) - 40px); } }
      @media all and (max-width: 1400px) {
        header .hdContent .linkList {
          max-width: calc(100% - calc(15vw + 50px) - calc(160px + 5vw) - 40px); } }
      @media all and (max-width: 1160px) {
        header .hdContent .linkList {
          display: none; } }
      header .hdContent .linkList ul {
        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 .hdContent .linkList ul li {
          text-align: center;
          margin: 0 20px;
          padding: 60px 0 0;
          overflow: hidden;
          -webkit-transition: all .8s ease;
          -o-transition: all .8s ease;
          transition: all .8s ease;
          letter-spacing: 0; }
          @media all and (max-width: 1580px) {
            header .hdContent .linkList ul li {
              padding: 3.8vw 0 0; } }
          @media all and (max-width: 1400px) {
            header .hdContent .linkList ul li {
              padding: 3vw 0 0; } }
          header .hdContent .linkList ul li .en {
            font-size: 1.375rem;
            font-family: 'Alata Light'; }
            @media all and (max-width: 1580px) {
              header .hdContent .linkList ul li .en {
                font-size: 1.25rem; } }
            @media all and (max-width: 1400px) {
              header .hdContent .linkList ul li .en {
                font-size: 1.0625rem; } }
          header .hdContent .linkList ul li .ch {
            font-size: 1rem;
            font-weight: bold;
            -webkit-transition: all .8s ease .2s;
            -o-transition: all .8s ease .2s;
            transition: all .8s ease .2s; }
    header .hdContent .buttons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      z-index: 3; }
      @media all and (max-width: 1160px) {
        header .hdContent .buttons {
          width: 50%;
          max-width: 230px; } }
      header .hdContent .buttons.open .openExhibit {
        background-color: transparent; }
        header .hdContent .buttons.open .openExhibit p {
          -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
          transform: translateY(-100%); }
        header .hdContent .buttons.open .openExhibit .closeBTn {
          display: block; }
          header .hdContent .buttons.open .openExhibit .closeBTn span:before {
            -webkit-animation: w100 .5s both .6s;
            animation: w100 .5s both .6s; }
          header .hdContent .buttons.open .openExhibit .closeBTn span:after {
            -webkit-animation: h100 .5s both 1.1s;
            animation: h100 .5s both 1.1s; }
      header .hdContent .buttons.open ul li {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%); }
      header .hdContent .buttons.close .openExhibit .closeBTn span:before {
        -webkit-animation: w0 .3s both;
        animation: w0 .3s both; }
      header .hdContent .buttons.close .openExhibit .closeBTn span:after {
        -webkit-animation: h0 .3s both .5s;
        animation: h0 .3s both .5s; }
      header .hdContent .buttons .openExhibit {
        background-color: #e83434;
        color: #fff;
        font-size: 1.25rem;
        font-family: 'SarabunRegular';
        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;
        cursor: pointer;
        position: relative;
        -webkit-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        transition: all 0.6s ease; }
        @media all and (max-width: 1400px) {
          header .hdContent .buttons .openExhibit {
            width: calc(100% - 50px);
            font-size: 1.125rem; } }
        @media all and (max-width: 500px) {
          header .hdContent .buttons .openExhibit {
            font-size: 0.8125rem; } }
        header .hdContent .buttons .openExhibit p {
          padding: 0 3.125vw;
          height: 70px;
          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;
          -webkit-transition: all .8s ease;
          -o-transition: all .8s ease;
          transition: all .8s ease; }
          @media all and (min-width: 1921px) {
            header .hdContent .buttons .openExhibit p {
              padding: 0 60px; } }
          @media all and (max-width: 1400px) {
            header .hdContent .buttons .openExhibit p {
              height: 50px;
              padding: 0 2.5vw; } }
        header .hdContent .buttons .openExhibit p:nth-child(2) {
          display: none;
          letter-spacing: 0; }
        header .hdContent .buttons .openExhibit.close {
          background-color: #434343; }
          header .hdContent .buttons .openExhibit.close p:nth-child(1) {
            display: none; }
          header .hdContent .buttons .openExhibit.close p:nth-child(2) {
            display: block; }
        header .hdContent .buttons .openExhibit .closeBTn {
          cursor: pointer;
          display: none;
          position: absolute;
          top: 35px;
          right: 60px;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
          @media all and (max-width: 1400px) {
            header .hdContent .buttons .openExhibit .closeBTn {
              top: 25px;
              right: 40px; } }
          @media all and (max-width: 550px) {
            header .hdContent .buttons .openExhibit .closeBTn {
              right: 20px; } }
          header .hdContent .buttons .openExhibit .closeBTn span {
            display: block;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            position: relative;
            width: 45px;
            height: 45px; }
            @media all and (max-width: 1400px) {
              header .hdContent .buttons .openExhibit .closeBTn span {
                width: 30px;
                height: 30px; } }
            header .hdContent .buttons .openExhibit .closeBTn span:before, header .hdContent .buttons .openExhibit .closeBTn span:after {
              content: "";
              display: block;
              background-color: #fff;
              position: absolute; }
            header .hdContent .buttons .openExhibit .closeBTn span:before {
              top: calc(50% - 1px);
              left: 0;
              width: 0%;
              height: 2px; }
            header .hdContent .buttons .openExhibit .closeBTn span:after {
              top: 0;
              left: calc(50% - 1px);
              width: 2px;
              height: 0%; }
      header .hdContent .buttons .menuBt {
        width: 70px;
        height: 70px;
        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;
        background-color: #000;
        cursor: pointer; }
        @media all and (max-width: 1400px) {
          header .hdContent .buttons .menuBt {
            width: 50px;
            height: 50px; } }
        header .hdContent .buttons .menuBt div {
          height: 17px;
          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: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; }
          @media all and (max-width: 1400px) {
            header .hdContent .buttons .menuBt div {
              height: 11px; } }
          header .hdContent .buttons .menuBt div span {
            display: block;
            background-color: #fff;
            width: 30px;
            height: 1px; }
            @media all and (max-width: 1400px) {
              header .hdContent .buttons .menuBt div span {
                width: 21px; } }
            header .hdContent .buttons .menuBt div span:nth-child(1) {
              -webkit-transform: translateX(5px);
              -ms-transform: translateX(5px);
              transform: translateX(5px); }
            header .hdContent .buttons .menuBt div span:nth-child(2) {
              -webkit-transform: translateX(-2px);
              -ms-transform: translateX(-2px);
              transform: translateX(-2px); }
            header .hdContent .buttons .menuBt div span:nth-child(3) {
              -webkit-transform: translateX(3px);
              -ms-transform: translateX(3px);
              transform: translateX(3px); }
      header .hdContent .buttons ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 30px 0 0;
        overflow: hidden; }
        @media all and (max-width: 1400px) {
          header .hdContent .buttons ul {
            padding: 20px 0 0; } }
        header .hdContent .buttons ul li {
          font-weight: bold;
          font-size: 0.9375rem;
          font-weight: bold;
          font-family: Alata, 微軟正黑體;
          -webkit-transition: all .8s ease;
          -o-transition: all .8s ease;
          transition: all .8s ease; }
          @media all and (max-width: 1400px) {
            header .hdContent .buttons ul li {
              margin-right: 15px;
              font-size: 0.875rem; } }
          header .hdContent .buttons ul li .icon-magnifier {
            line-height: 1.5;
            font-weight: bold; }

header .hdContent .exhibitLibox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 2;
  background-color: #fff;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  overflow-x: hidden;
  display: none; }
  header .hdContent .exhibitLibox.open {
    display: block;
    -webkit-animation: fadeIn .4s both;
    animation: fadeIn .4s both; }
    header .hdContent .exhibitLibox.open .date .box, header .hdContent .exhibitLibox.open .tableContent, header .hdContent .exhibitLibox.open .open:before, header .hdContent .exhibitLibox.open .close:before {
      -webkit-animation: slideInRight 1s both;
      animation: slideInRight 1s both; }
  header .hdContent .exhibitLibox.close {
    display: block;
    -webkit-animation: fadeOut .4s both .6s;
    animation: fadeOut .4s both .6s; }
    header .hdContent .exhibitLibox.close .date .box, header .hdContent .exhibitLibox.close .tableContent, header .hdContent .exhibitLibox.close .open:before, header .hdContent .exhibitLibox.close .close:before {
      -webkit-animation: slideOutRight 1s both;
      animation: slideOutRight 1s both; }
  header .hdContent .exhibitLibox .open, header .hdContent .exhibitLibox .close {
    max-width: 1040px;
    width: 100%;
    min-height: 100vh;
    float: right;
    position: relative; }
    header .hdContent .exhibitLibox .open:before, header .hdContent .exhibitLibox .close:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #000; }
  header .hdContent .exhibitLibox .open {
    padding: 120px 0 50px; }
    @media all and (max-width: 1024px) {
      header .hdContent .exhibitLibox .open {
        padding: 50px 0; } }
    header .hdContent .exhibitLibox .open:before {
      background-color: #e83434; }
    header .hdContent .exhibitLibox .open .date {
      height: 155px;
      position: relative; }
      @media all and (max-width: 1024px) {
        header .hdContent .exhibitLibox .open .date {
          height: 125px; } }
      @media all and (max-width: 550px) {
        header .hdContent .exhibitLibox .open .date {
          height: 155px; } }
      header .hdContent .exhibitLibox .open .date.fixed .box {
        position: fixed;
        right: 17px;
        width: calc(100% - 17px); }
        @media all and (max-width: 1024px) {
          header .hdContent .exhibitLibox .open .date.fixed .box {
            width: 100%;
            right: 0; } }
      header .hdContent .exhibitLibox .open .date .box {
        position: relative;
        z-index: 1;
        top: 0;
        right: 0;
        padding: 50px 130px 30px 110px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        width: 100%;
        max-width: 1040px;
        background-color: #e83434; }
        @media all and (max-width: 1024px) {
          header .hdContent .exhibitLibox .open .date .box {
            padding: 30px calc(6vw + 10px) 20px calc(5vw + 10px); } }
        @media all and (max-width: 550px) {
          header .hdContent .exhibitLibox .open .date .box {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 50px calc(6vw + 10px) 0 calc(5vw + 10px); } }
        header .hdContent .exhibitLibox .open .date .box:after {
          content: "";
          display: block;
          width: calc(100% - 220px);
          height: 2px;
          background-color: #ef7171;
          position: absolute;
          bottom: 0;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
          @media all and (max-width: 1024px) {
            header .hdContent .exhibitLibox .open .date .box:after {
              width: calc(100% - 11vw); } }
      header .hdContent .exhibitLibox .open .date .dotay {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        header .hdContent .exhibitLibox .open .date .dotay .month, header .hdContent .exhibitLibox .open .date .dotay .day {
          font-size: 3.125rem;
          font-family: 'Alata'; }
          @media all and (max-width: 700px) {
            header .hdContent .exhibitLibox .open .date .dotay .month, header .hdContent .exhibitLibox .open .date .dotay .day {
              font-size: 2.625rem; } }
          @media all and (max-width: 550px) {
            header .hdContent .exhibitLibox .open .date .dotay .month, header .hdContent .exhibitLibox .open .date .dotay .day {
              font-size: 2rem; } }
        header .hdContent .exhibitLibox .open .date .dotay .month:after {
          content: ".";
          margin-right: 10px; }
        header .hdContent .exhibitLibox .open .date .dotay .year {
          font-family: 'SarabunRegular';
          font-size: 3rem;
          margin-left: 25px; }
          @media all and (max-width: 700px) {
            header .hdContent .exhibitLibox .open .date .dotay .year {
              font-size: 2.5rem; } }
          @media all and (max-width: 550px) {
            header .hdContent .exhibitLibox .open .date .dotay .year {
              font-size: 1.875rem; } }
      header .hdContent .exhibitLibox .open .date .openingHours {
        padding-bottom: 10px;
        font-size: 1.0625rem;
        font-family: 微軟正黑體; }
        header .hdContent .exhibitLibox .open .date .openingHours p:before {
          content: attr(data-name);
          font-size: 0.9375rem; }
    header .hdContent .exhibitLibox .open .tableContent {
      padding: 0 120px 0 100px;
      position: relative; }
      @media all and (max-width: 1024px) {
        header .hdContent .exhibitLibox .open .tableContent {
          padding: 0 6vw 0 5vw; } }
      header .hdContent .exhibitLibox .open .tableContent .type {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 30px 0 25px 0; }
        @media all and (max-width: 700px) {
          header .hdContent .exhibitLibox .open .tableContent .type {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: 20px 0 0; } }
        header .hdContent .exhibitLibox .open .tableContent .type:not(:first-child) {
          border-top: 2px solid #ef7171; }
        header .hdContent .exhibitLibox .open .tableContent .type .typeName {
          width: 210px;
          padding: 25px 25px; }
          @media all and (max-width: 700px) {
            header .hdContent .exhibitLibox .open .tableContent .type .typeName {
              width: 100%;
              text-align: center;
              padding: 20px 25px 10px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: end;
              -ms-flex-align: end;
              align-items: flex-end;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center; } }
          header .hdContent .exhibitLibox .open .tableContent .type .typeName .en {
            font-family: 'Alata';
            font-size: 1.5rem; }
          header .hdContent .exhibitLibox .open .tableContent .type .typeName .ch {
            font-size: 1.5rem; }
            @media all and (max-width: 700px) {
              header .hdContent .exhibitLibox .open .tableContent .type .typeName .ch {
                font-size: 1.25rem;
                margin: 0 0 3px 10px; } }
        header .hdContent .exhibitLibox .open .tableContent .type ul {
          width: calc(100% - 210px); }
          @media all and (max-width: 700px) {
            header .hdContent .exhibitLibox .open .tableContent .type ul {
              width: 100%; } }
          header .hdContent .exhibitLibox .open .tableContent .type ul li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 30px 0 40px; }
            @media all and (max-width: 700px) {
              header .hdContent .exhibitLibox .open .tableContent .type ul li {
                padding: 30px 5vw; } }
            @media all and (max-width: 600px) {
              header .hdContent .exhibitLibox .open .tableContent .type ul li {
                padding: 30px 0; } }
            header .hdContent .exhibitLibox .open .tableContent .type ul li:not(:last-child) {
              border-bottom: 1px solid #ef7171; }
            header .hdContent .exhibitLibox .open .tableContent .type ul li .time {
              width: 180px;
              padding: 0 10px; }
              @media all and (max-width: 460px) {
                header .hdContent .exhibitLibox .open .tableContent .type ul li .time {
                  width: 110px;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                  -ms-flex-direction: column;
                  flex-direction: column;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center; } }
              header .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 {
                font-size: 1.125rem;
                line-height: 1.5;
                font-family: 'Alata'; }
                @media all and (max-width: 460px) {
                  header .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 {
                    font-size: 1rem;
                    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 .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 span:last-child {
                  padding: 0 0 0 30px;
                  position: relative; }
                  @media all and (max-width: 460px) {
                    header .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 span:last-child {
                      padding: 20px 0 0 0; } }
                  header .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 span:last-child:before {
                    content: "";
                    display: block;
                    width: 5px;
                    height: 1px;
                    background-color: #fff;
                    position: absolute;
                    top: 50%;
                    left: 12px; }
                    @media all and (max-width: 460px) {
                      header .hdContent .exhibitLibox .open .tableContent .type ul li .time h6 span:last-child:before {
                        top: 5px;
                        left: 50%;
                        width: 1px;
                        height: 10px; } }
              header .hdContent .exhibitLibox .open .tableContent .type ul li .time p {
                line-height: 1.8;
                color: #ff9090;
                font-size: 0.875rem;
                font-family: SarabunRegular, 微軟正黑體; }
            header .hdContent .exhibitLibox .open .tableContent .type ul li ._text {
              padding: 0 10px 0 0;
              width: calc(100% - 180px);
              font-family: SarabunRegular, 微軟正黑體; }
              @media all and (max-width: 460px) {
                header .hdContent .exhibitLibox .open .tableContent .type ul li ._text {
                  width: calc(100% - 110px);
                  padding: 0 10px; } }
              header .hdContent .exhibitLibox .open .tableContent .type ul li ._text .ch {
                font-size: 1rem;
                font-weight: bold; }
              header .hdContent .exhibitLibox .open .tableContent .type ul li ._text .en {
                font-size: 0.9375rem;
                color: #ff9090;
                line-height: 1.8; }
  header .hdContent .exhibitLibox.notOpen .close {
    display: block; }
  header .hdContent .exhibitLibox .close {
    background-color: #434343;
    display: none; }

@-webkit-keyframes timeBoxIn {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0; }
  40% {
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes timeBoxIn {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0; }
  40% {
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes timeBoxOut {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@keyframes timeBoxOut {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  60% {
    opacity: 0; }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

footer {
  background-color: #1b1b1b;
  color: rgba(255, 255, 255, 0.6);
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 160px 50px 0;
  margin-top: 100px; }
  @media all and (max-width: 1024px) {
    footer {
      padding: 160px 5vw 0; } }
  @media all and (max-width: 700px) {
    footer {
      padding: 90px 7vw 0; } }
  footer .goTop {
    position: absolute;
    top: 140px;
    left: 150px;
    cursor: pointer; }
    @media all and (max-width: 1420px) {
      footer .goTop {
        left: auto;
        right: calc(50% + 530px); } }
    @media all and (max-width: 1220px) {
      footer .goTop {
        left: 50px;
        right: auto; } }
    @media all and (max-width: 700px) {
      footer .goTop {
        top: 30px;
        left: calc(50% - 15px); } }
  footer .linkList, footer .middle, footer .informatioin {
    max-width: 1120px;
    width: 100%; }
  footer .logo {
    max-width: 66vw; }
  footer .linkList {
    margin-top: 80px; }
    @media all and (max-width: 700px) {
      footer .linkList {
        display: none; } }
    footer .linkList ul {
      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; }
      footer .linkList ul li {
        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;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        footer .linkList ul li a {
          font-family: Alata, 微軟正黑體;
          font-size: 0.9375rem;
          line-height: 2; }
          footer .linkList ul li a:first-child {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.375rem; }
  footer .middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 110px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media all and (max-width: 700px) {
      footer .middle {
        margin-top: 60px; } }
    footer .middle > * {
      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: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-bottom: 50px; }
      @media all and (max-width: 700px) {
        footer .middle > * {
          width: 50%; } }
      @media all and (max-width: 550px) {
        footer .middle > * {
          width: 100%; } }
    footer .middle h6 {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1.375rem;
      font-family: 'Alata';
      margin-bottom: 20px; }
      @media all and (max-width: 700px) {
        footer .middle h6 {
          font-size: 1.25rem; } }
    footer .middle .openTime {
      padding: 0 50px 0 0; }
      @media all and (max-width: 1024px) {
        footer .middle .openTime {
          padding: 0 5vw 0 0; } }
      footer .middle .openTime p {
        font-size: 0.9375rem; }
    footer .middle .Newsletter form {
      padding: 0 5px 10px;
      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 all and (max-width: 550px) {
        footer .middle .Newsletter form {
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; } }
      footer .middle .Newsletter form input, footer .middle .Newsletter form button {
        background-color: transparent;
        border: none;
        color: #e6e6e6; }
      footer .middle .Newsletter form input {
        font-size: 0.8125rem;
        letter-spacing: 1px;
        font-family: SarabunRegular,  微軟正黑體;
        width: 280px; }
        @media all and (max-width: 550px) {
          footer .middle .Newsletter form input {
            width: calc(100% - 50px); } }
        footer .middle .Newsletter form input::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.3);
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
        footer .middle .Newsletter form input:-ms-input-placeholder {
          color: rgba(255, 255, 255, 0.3);
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
        footer .middle .Newsletter form input::-ms-input-placeholder {
          color: rgba(255, 255, 255, 0.3);
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
        footer .middle .Newsletter form input::placeholder {
          color: rgba(255, 255, 255, 0.3);
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
        footer .middle .Newsletter form input:focus::-webkit-input-placeholder {
          opacity: 0; }
        footer .middle .Newsletter form input:focus:-ms-input-placeholder {
          opacity: 0; }
        footer .middle .Newsletter form input:focus::-ms-input-placeholder {
          opacity: 0; }
        footer .middle .Newsletter form input:focus::placeholder {
          opacity: 0; }
      footer .middle .Newsletter form button {
        font-size: 1.5625rem; }
      footer .middle .Newsletter form:after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-color: #e83434; }
    footer .middle .socialMedia ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start; }
      footer .middle .socialMedia ul li {
        margin: 0 10px;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        font-size: 1.25rem;
        color: #606060; }
        footer .middle .socialMedia ul li:first-child {
          margin: 0 10px 0 0; }
        footer .middle .socialMedia ul li:last-child {
          margin: 0 0 0 10px; }
        footer .middle .socialMedia ul li:hover {
          color: #fff; }
  footer .informatioin {
    margin-top: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    footer .informatioin .left, footer .informatioin .right {
      width: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media all and (max-width: 700px) {
        footer .informatioin .left, footer .informatioin .right {
          width: 100%;
          -webkit-box-pack: start !important;
          -ms-flex-pack: start !important;
          justify-content: flex-start !important;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; } }
    footer .informatioin .left {
      font-family: '微軟正黑體';
      font-size: 0.75rem;
      line-height: 1.25rem;
      letter-spacing: 0.5px;
      padding-right: 50px; }
      @media all and (max-width: 700px) {
        footer .informatioin .left {
          padding-right: 0; } }
      footer .informatioin .left p {
        line-height: 2;
        white-space: nowrap;
        position: relative; }
        footer .informatioin .left p:before {
          content: attr(data-name);
          color: #636363;
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0; }
      footer .informatioin .left .address {
        width: 100%; }
      footer .informatioin .left .mail {
        padding-left: 40px; }
      footer .informatioin .left .tel, footer .informatioin .left .fax {
        padding-left: 25px;
        margin-right: 20px; }
        footer .informatioin .left .tel:after, footer .informatioin .left .fax:after {
          content: "/";
          color: rgba(147, 147, 147, 0.6);
          display: inline-block;
          position: absolute;
          top: 0;
          right: -12px; }
    footer .informatioin .right {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      @media all and (max-width: 700px) {
        footer .informatioin .right {
          margin-top: 20px;
          display: inline-block; } }
      footer .informatioin .right .liboxs, footer .informatioin .right .sponsor {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
        @media all and (max-width: 700px) {
          footer .informatioin .right .liboxs, footer .informatioin .right .sponsor {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start; } }
      footer .informatioin .right .liboxs {
        font-size: 0.6875rem;
        font-family: '微軟正黑體'; }
      footer .informatioin .right .sponsor a {
        margin-left: 30px; }
        @media all and (max-width: 700px) {
          footer .informatioin .right .sponsor a {
            margin: 20px 20px 0 0; } }
    footer .informatioin .copyright {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      position: relative;
      margin-top: 70px;
      padding: 30px 0 20px;
      font-size: 0.6875rem;
      color: rgba(255, 255, 255, 0.2); }
      @media all and (max-width: 700px) {
        footer .informatioin .copyright {
          margin-top: 50px; } }
      footer .informatioin .copyright:before {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        max-width: 1630px;
        content: "";
        display: block;
        width: 90vw;
        height: 1px;
        background-color: #323232; }

#home header {
  height: 290px;
  display: block; }
  @media all and (max-width: 1160px) {
    #home header {
      height: 100px; } }
  #home header .hdContent {
    z-index: 10; }
    #home header .hdContent.show:before {
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
    #home header .hdContent.show .logo {
      -webkit-transform: translate(100%, -100%) !important;
      -ms-transform: translate(100%, -100%) !important;
      transform: translate(100%, -100%) !important;
      -webkit-transition: width .4s ease ,-webkit-transform .4s ease;
      transition: width .4s ease ,-webkit-transform .4s ease;
      -o-transition: width .4s ease ,transform .4s ease;
      transition: width .4s ease ,transform .4s ease;
      transition: width .4s ease ,transform .4s ease ,-webkit-transform .4s ease; }
      @media all and (max-width: 1580px) {
        #home header .hdContent.show .logo {
          -webkit-transform: translate(0, -100%) !important;
          -ms-transform: translate(0, -100%) !important;
          transform: translate(0, -100%) !important; } }
    #home header .hdContent.show .linkList {
      -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%); }
    #home header .hdContent.show .buttons {
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
    #home header .hdContent.show.up:before {
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%); }
    #home header .hdContent.show.up .logo {
      -webkit-transform: translate(100%, 0%) !important;
      -ms-transform: translate(100%, 0%) !important;
      transform: translate(100%, 0%) !important;
      -webkit-transition: width .4s ease ,-webkit-transform .4s ease;
      transition: width .4s ease ,-webkit-transform .4s ease;
      -o-transition: width .4s ease ,transform .4s ease;
      transition: width .4s ease ,transform .4s ease;
      transition: width .4s ease ,transform .4s ease ,-webkit-transform .4s ease; }
      @media all and (max-width: 1580px) {
        #home header .hdContent.show.up .logo {
          -webkit-transform: translate(0, 0) !important;
          -ms-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important; } }
    #home header .hdContent.show.up .linkList {
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }
    #home header .hdContent.show.up .buttons {
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%); }
    #home header .hdContent:before {
      position: fixed;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 100%;
      height: 70px;
      background-color: #fff;
      -webkit-transition: all .4s ease;
      -o-transition: all .4s ease;
      transition: all .4s ease; }
      @media all and (max-width: 1400px) {
        #home header .hdContent:before {
          height: 50px; } }
    #home header .hdContent .logo {
      position: absolute;
      top: 65px;
      right: calc(50% + 740px);
      left: auto;
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      padding: 25px 0 0;
      width: 280px;
      overflow: hidden;
      -webkit-transition: width .8s ease,-webkit-transform .8s ease;
      transition: width .8s ease,-webkit-transform .8s ease;
      -o-transition: width .8s ease,transform .8s ease;
      transition: width .8s ease,transform .8s ease;
      transition: width .8s ease,transform .8s ease,-webkit-transform .8s ease;
      z-index: 1; }
      @media all and (max-width: 1580px) {
        #home header .hdContent .logo {
          width: 17vw;
          min-width: 170px;
          right: auto;
          left: 50px;
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0); } }
      @media all and (max-width: 1400px) {
        #home header .hdContent .logo {
          padding: 15px 0 0; } }
      @media all and (max-width: 1160px) {
        #home header .hdContent .logo {
          top: 0;
          width: 33vw;
          min-width: unset; } }
      @media all and (max-width: 1024px) {
        #home header .hdContent .logo {
          left: 5vw; } }
      @media all and (max-width: 700px) {
        #home header .hdContent .logo {
          position: fixed;
          left: 0; } }
      @media all and (max-width: 500px) {
        #home header .hdContent .logo {
          width: 50%; } }
      #home header .hdContent .logo.fixed {
        width: 170px;
        -webkit-transform: translate(100%, 0%);
        -ms-transform: translate(100%, 0%);
        transform: translate(100%, 0%);
        position: fixed;
        top: 0; }
        @media all and (max-width: 1580px) {
          #home header .hdContent .logo.fixed {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0); } }
        #home header .hdContent .logo.fixed a .ch {
          -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
          transform: translateY(100%);
          opacity: 0;
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
      #home header .hdContent .logo a .ch {
        display: block;
        -webkit-transition: all .8s ease .4s;
        -o-transition: all .8s ease .4s;
        transition: all .8s ease .4s;
        margin-top: 5px; }
    #home header .hdContent .linkList {
      top: 210px;
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      -o-transition: transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease; }
      #home header .hdContent .linkList.fixed {
        position: fixed;
        top: 0; }
        #home header .hdContent .linkList.fixed ul li .ch {
          -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
          transform: translateY(100%);
          opacity: 0;
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
      #home header .hdContent .linkList ul li {
        padding: 20px 0 0; }
        @media all and (max-width: 1400px) {
          #home header .hdContent .linkList ul li {
            padding: 10px 0 0; } }
    #home header .hdContent .buttons {
      position: fixed;
      top: 0;
      right: 0;
      -webkit-transition: -webkit-transform .4s ease;
      transition: -webkit-transform .4s ease;
      -o-transition: transform .4s ease;
      transition: transform .4s ease;
      transition: transform .4s ease, -webkit-transform .4s ease; }
      #home header .hdContent .buttons.fixed ul li {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0; }
      #home header .hdContent .buttons ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        width: 100%; }
        @media all and (max-width: 440px) {
          #home header .hdContent .buttons ul {
            display: none; } }

#home section._title .en, #home section._title .ch, #home section._title ul li {
  opacity: 0; }

#home section._title .show .en {
  -webkit-animation: fadeInDown 1.2s both;
  animation: fadeInDown 1.2s both; }

#home section._title .show .ch {
  -webkit-animation: fadeInDown 1.2s both .2s;
  animation: fadeInDown 1.2s both .2s; }

#home section._title.show .en {
  -webkit-animation: fadeInDown 1.2s both;
  animation: fadeInDown 1.2s both; }

#home section._title.show .ch {
  -webkit-animation: fadeInDown 1.2s both .2s;
  animation: fadeInDown 1.2s both .2s; }

#home section._title.show ul li {
  -webkit-animation: fadeInDown 1.2s both .2s;
  animation: fadeInDown 1.2s both .2s; }
  @media all and (max-width: 700px) {
    #home section._title.show ul li {
      -webkit-animation: fadeInDown 1.2s both .4s;
      animation: fadeInDown 1.2s both .4s; } }

#home .exhibition {
  max-width: 1580px;
  margin: auto;
  padding: 130px 50px 0; }
  @media all and (max-width: 1024px) {
    #home .exhibition {
      padding: 100px 5vw 0; } }
  @media all and (max-width: 700px) {
    #home .exhibition {
      padding: 50px 5vw 0; } }
  #home .exhibition ._title {
    padding: 0 0 20px; }
    #home .exhibition ._title .en {
      font-family: Alata;
      font-size: 2.25rem; }
      @media all and (max-width: 700px) {
        #home .exhibition ._title .en {
          font-size: 1.625rem; } }
    #home .exhibition ._title .ch {
      font-size: 1.125rem; }
      @media all and (max-width: 700px) {
        #home .exhibition ._title .ch {
          font-size: 1rem; } }
  #home .exhibition .masonry ul .grid-sizer {
    width: calc(50% - 10px); }
    @media all and (max-width: 1024px) {
      #home .exhibition .masonry ul .grid-sizer {
        width: 100%; } }
  #home .exhibition .masonry ul li {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      #home .exhibition .masonry ul li {
        margin-bottom: 50px; } }
    #home .exhibition .masonry ul li.show.in:before {
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
    @media all and (max-width: 1024px) {
      #home .exhibition .masonry ul li.show.in .hoverBox ._text .words p {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        -webkit-transition: all 1s ease .4s;
        -o-transition: all 1s ease .4s;
        transition: all 1s ease .4s; }
      #home .exhibition .masonry ul li.show.in .hoverBox ._text .time h6 {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        -webkit-transition: all 1s ease 1s;
        -o-transition: all 1s ease 1s;
        transition: all 1s ease 1s; }
      #home .exhibition .masonry ul li.show.in .hoverBox ._text .time .date, #home .exhibition .masonry ul li.show.in .hoverBox ._text .time .week {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        -webkit-transition: all 1s ease 1s;
        -o-transition: all 1s ease 1s;
        transition: all 1s ease 1s; }
      #home .exhibition .masonry ul li.show.in .hoverBox ._text .time .end:before {
        width: 100%;
        max-width: 65px;
        -webkit-transition: 1s ease .6s;
        -o-transition: 1s ease .6s;
        transition: 1s ease .6s; }
      #home .exhibition .masonry ul li.show.in .hoverBox ._text .title .ch, #home .exhibition .masonry ul li.show.in .hoverBox ._text .title .en {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        -webkit-transition: all 1s ease .4s;
        -o-transition: all 1s ease .4s;
        transition: all 1s ease .4s; } }
    #home .exhibition .masonry ul li:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: all 1.5s ease;
      -o-transition: all 1.5s ease;
      transition: all 1.5s ease; }
    #home .exhibition .masonry ul li:first-child:before {
      -webkit-transition: all 1.5s ease .4s;
      -o-transition: all 1.5s ease .4s;
      transition: all 1.5s ease .4s; }
    #home .exhibition .masonry ul li.middle picture, #home .exhibition .masonry ul li.big picture {
      height: 690px; }
      @media all and (max-width: 1580px) and (min-width: 1025px) {
        #home .exhibition .masonry ul li.middle picture, #home .exhibition .masonry ul li.big picture {
          height: calc(46.6vw - 53px); } }
    #home .exhibition .masonry ul li.big {
      width: 100%; }
    #home .exhibition .masonry ul li.middle, #home .exhibition .masonry ul li.small {
      width: calc(50% - 10px); }
      @media all and (max-width: 1024px) {
        #home .exhibition .masonry ul li.middle, #home .exhibition .masonry ul li.small {
          width: 100%; } }
    #home .exhibition .masonry ul li.small picture {
      height: 335px; }
      @media all and (max-width: 1580px) and (min-width: 1025px) {
        #home .exhibition .masonry ul li.small picture {
          height: calc(23.3vw - 36.5px); } }
    #home .exhibition .masonry ul li.small .hoverBox ._text {
      -ms-flex-pack: distribute;
      justify-content: space-around; }
      #home .exhibition .masonry ul li.small .hoverBox ._text .words {
        padding: 0 0 20px 0; }
        @media all and (max-width: 1580px) {
          #home .exhibition .masonry ul li.small .hoverBox ._text .words {
            padding: 0 0 1vw 0; } }
        @media all and (max-width: 1024px) {
          #home .exhibition .masonry ul li.small .hoverBox ._text .words {
            padding: 0; } }
      #home .exhibition .masonry ul li.small .hoverBox ._text .time {
        margin: 0; }
        @media all and (max-width: 1024px) {
          #home .exhibition .masonry ul li.small .hoverBox ._text .time {
            margin: 40px 0 0; }
            #home .exhibition .masonry ul li.small .hoverBox ._text .time:first-child {
              margin: 50px 0 0; } }
        @media all and (max-width: 700px) {
          #home .exhibition .masonry ul li.small .hoverBox ._text .time:first-child {
            margin: 40px 0 0; } }
      #home .exhibition .masonry ul li.small .hoverBox ._text .title {
        margin-top: 0; }
        @media all and (max-width: 1024px) {
          #home .exhibition .masonry ul li.small .hoverBox ._text .title {
            margin-top: 20px; } }
    #home .exhibition .masonry ul li picture {
      display: block;
      font-size: 0; }
      @media all and (max-width: 1024px) {
        #home .exhibition .masonry ul li picture {
          height: auto !important; } }
    #home .exhibition .masonry ul li .hoverBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: all .4s ease;
      -o-transition: all .4s ease;
      transition: all .4s ease;
      opacity: 0;
      color: #fff; }
      @media all and (max-width: 1024px) {
        #home .exhibition .masonry ul li .hoverBox {
          position: relative;
          top: auto;
          left: auto;
          opacity: 1;
          color: #000; } }
      #home .exhibition .masonry ul li .hoverBox .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8); }
        @media all and (max-width: 1024px) {
          #home .exhibition .masonry ul li .hoverBox .bg {
            display: none; } }
      #home .exhibition .masonry ul li .hoverBox ._text {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 3vw 4vw;
        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; }
        @media all and (max-width: 1440px) {
          #home .exhibition .masonry ul li .hoverBox ._text {
            padding: 2vw 3vw; } }
        @media all and (min-width: 1025px) {
          #home .exhibition .masonry ul li .hoverBox ._text.center {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: center; }
            #home .exhibition .masonry ul li .hoverBox ._text.center .time {
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center; }
          #home .exhibition .masonry ul li .hoverBox ._text.right {
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            text-align: right; }
            #home .exhibition .masonry ul li .hoverBox ._text.right .time {
              -webkit-box-pack: end;
              -ms-flex-pack: end;
              justify-content: flex-end; } }
        @media all and (max-width: 1024px) {
          #home .exhibition .masonry ul li .hoverBox ._text {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: center;
            padding: 0; } }
        #home .exhibition .masonry ul li .hoverBox ._text .words {
          font-size: 1rem;
          overflow: hidden; }
          @media all and (max-width: 1100px) and (min-width: 1025px) {
            #home .exhibition .masonry ul li .hoverBox ._text .words {
              display: none; } }
          @media all and (max-width: 1024px) {
            #home .exhibition .masonry ul li .hoverBox ._text .words {
              margin: 10px 0 0;
              max-width: 600px; } }
          #home .exhibition .masonry ul li .hoverBox ._text .words p {
            -webkit-transform: translateY(-101%);
            -ms-transform: translateY(-101%);
            transform: translateY(-101%);
            -webkit-transition: all .4s ease;
            -o-transition: all .4s ease;
            transition: all .4s ease; }
        #home .exhibition .masonry ul li .hoverBox ._text .time {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          position: relative;
          margin: 50px  0 0 0;
          overflow: hidden;
          padding: 25px 0 0; }
          @media all and (max-width: 1580px) {
            #home .exhibition .masonry ul li .hoverBox ._text .time {
              margin: 2.5vw 0 0; } }
          @media all and (max-width: 1024px) {
            #home .exhibition .masonry ul li .hoverBox ._text .time {
              margin: 40px 0 0; }
              #home .exhibition .masonry ul li .hoverBox ._text .time:first-child {
                margin: 50px 0 0; } }
          @media all and (max-width: 700px) {
            #home .exhibition .masonry ul li .hoverBox ._text .time:first-child {
              margin: 40px 0 0; } }
          #home .exhibition .masonry ul li .hoverBox ._text .time h6 {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 1rem;
            width: 100%;
            text-align: left;
            font-family: 'SarabunRegular';
            -webkit-transform: translateY(-101%);
            -ms-transform: translateY(-101%);
            transform: translateY(-101%); }
          #home .exhibition .masonry ul li .hoverBox ._text .time .date {
            font-size: 2.5rem;
            line-height: 1;
            font-family: '微軟正黑體';
            -webkit-transition: .4s ease;
            -o-transition: .4s ease;
            transition: .4s ease;
            -webkit-transform: translateY(102%);
            -ms-transform: translateY(102%);
            transform: translateY(102%); }
            @media all and (max-width: 1440px) {
              #home .exhibition .masonry ul li .hoverBox ._text .time .date {
                font-size: 2rem; } }
            @media all and (max-width: 700px) {
              #home .exhibition .masonry ul li .hoverBox ._text .time .date {
                font-size: 1.5rem; } }
          #home .exhibition .masonry ul li .hoverBox ._text .time .week {
            margin: 0 0 5px 5px;
            font-size: 1rem;
            font-family: 'SarabunRegular';
            -webkit-transition: .4s ease;
            -o-transition: .4s ease;
            transition: .4s ease;
            -webkit-transform: translateY(101%);
            -ms-transform: translateY(101%);
            transform: translateY(101%); }
            @media all and (max-width: 1440px) {
              #home .exhibition .masonry ul li .hoverBox ._text .time .week {
                margin: 0 0 2px 5px; } }
            @media all and (max-width: 700px) {
              #home .exhibition .masonry ul li .hoverBox ._text .time .week {
                margin: 0 0 0 5px; } }
          #home .exhibition .masonry ul li .hoverBox ._text .time .start, #home .exhibition .masonry ul li .hoverBox ._text .time .end {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            padding-top: 2px; }
          #home .exhibition .masonry ul li .hoverBox ._text .time .end {
            position: relative;
            padding-left: 130px; }
            @media all and (max-width: 1024px) {
              #home .exhibition .masonry ul li .hoverBox ._text .time .end {
                padding-left: 85px; } }
            #home .exhibition .masonry ul li .hoverBox ._text .time .end:before {
              position: absolute;
              bottom: 11px;
              left: 65px;
              display: block;
              -webkit-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
              transform: translateX(-50%);
              content: "";
              display: block;
              width: 0px;
              height: 1px;
              background-color: #fff;
              -webkit-transition: .4s ease;
              -o-transition: .4s ease;
              transition: .4s ease; }
              @media all and (max-width: 1024px) {
                #home .exhibition .masonry ul li .hoverBox ._text .time .end:before {
                  background-color: #999999;
                  left: 42.5px;
                  bottom: 7px; } }
        #home .exhibition .masonry ul li .hoverBox ._text .title {
          margin-top: 30px;
          overflow: hidden; }
          @media all and (max-width: 1400px) {
            #home .exhibition .masonry ul li .hoverBox ._text .title {
              margin-top: 20px; } }
          #home .exhibition .masonry ul li .hoverBox ._text .title .ch {
            font-weight: bold;
            font-size: 1.5rem;
            -webkit-transition: all .4s ease;
            -o-transition: all .4s ease;
            transition: all .4s ease;
            -webkit-transform: translateY(-101%);
            -ms-transform: translateY(-101%);
            transform: translateY(-101%); }
            @media all and (max-width: 1400px) {
              #home .exhibition .masonry ul li .hoverBox ._text .title .ch {
                font-size: 1.25rem; } }
            @media all and (max-width: 700px) {
              #home .exhibition .masonry ul li .hoverBox ._text .title .ch {
                font-size: 1.125rem; } }
          #home .exhibition .masonry ul li .hoverBox ._text .title .en {
            font-family: 'SarabunRegular';
            font-size: 0.875rem;
            -webkit-transition: all .4s ease;
            -o-transition: all .4s ease;
            transition: all .4s ease;
            -webkit-transform: translateY(101%);
            -ms-transform: translateY(101%);
            transform: translateY(101%); }
            @media all and (max-width: 700px) {
              #home .exhibition .masonry ul li .hoverBox ._text .title .en {
                font-size: 0.75rem; } }
    @media all and (min-width: 1025px) {
      #home .exhibition .masonry ul li a:hover .hoverBox {
        opacity: 1; }
        #home .exhibition .masonry ul li a:hover .hoverBox ._text .words p {
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
          -webkit-transition: all .5s ease .2s;
          -o-transition: all .5s ease .2s;
          transition: all .5s ease .2s; }
        #home .exhibition .masonry ul li a:hover .hoverBox ._text .time h6 {
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
          -webkit-transition: all .8s ease .4s;
          -o-transition: all .8s ease .4s;
          transition: all .8s ease .4s; }
        #home .exhibition .masonry ul li a:hover .hoverBox ._text .time .date, #home .exhibition .masonry ul li a:hover .hoverBox ._text .time .week {
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
          -webkit-transition: all .8s ease .4s;
          -o-transition: all .8s ease .4s;
          transition: all .8s ease .4s; }
        #home .exhibition .masonry ul li a:hover .hoverBox ._text .time .end:before {
          width: 65px;
          -webkit-transition: .5s ease .2s;
          -o-transition: .5s ease .2s;
          transition: .5s ease .2s; }
        #home .exhibition .masonry ul li a:hover .hoverBox ._text .title .ch, #home .exhibition .masonry ul li a:hover .hoverBox ._text .title .en {
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
          -webkit-transition: all .5s ease .2s;
          -o-transition: all .5s ease .2s;
          transition: all .5s ease .2s; } }
  #home .exhibition .buttons {
    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;
    margin-top: 70px; }
    @media all and (max-width: 700px) {
      #home .exhibition .buttons {
        margin-top: 20px; } }

#home .news {
  max-width: 1580px;
  margin: auto;
  padding: 130px 50px 0; }
  @media all and (max-width: 1024px) {
    #home .news {
      padding: 130px 5vw 0; } }
  #home .news ._title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
    @media all and (max-width: 700px) {
      #home .news ._title {
        -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;
        padding: 0 15px; } }
    #home .news ._title .en {
      font-family: Alata;
      font-size: 2.25rem; }
      @media all and (max-width: 700px) {
        #home .news ._title .en {
          font-size: 1.625rem; } }
    #home .news ._title .ch {
      font-size: 1.125rem; }
      @media all and (max-width: 700px) {
        #home .news ._title .ch {
          font-size: 1rem; } }
    #home .news ._title ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 1rem;
      font-weight: bold; }
      @media all and (max-width: 700px) {
        #home .news ._title ul {
          font-size: 0.875rem;
          margin-top: 10px; } }
      #home .news ._title ul li {
        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;
        letter-spacing: 0.5px;
        cursor: pointer; }
        @media all and (max-width: 700px) {
          #home .news ._title ul li {
            padding-top: 10px;
            padding-bottom: 10px; } }
        #home .news ._title ul li:not(:first-child):before {
          content: "";
          display: block;
          width: 1px;
          height: 17px;
          background-color: #b2b2b2;
          margin-right: 15px; }
          @media all and (max-width: 700px) {
            #home .news ._title ul li:not(:first-child):before {
              margin-right: 10px; } }
        #home .news ._title ul li:not(:last-child) {
          padding-right: 15px; }
          @media all and (max-width: 700px) {
            #home .news ._title ul li:not(:last-child) {
              padding-right: 10px; } }
  #home .news .masonry {
    margin-top: 40px;
    width: 100%; }
    #home .news .masonry .grid-sizer {
      width: calc(50% - 10px); }
      @media all and (max-width: 1024px) {
        #home .news .masonry .grid-sizer {
          width: 100%; } }
    #home .news .masonry ul li {
      width: calc(50% - 10px);
      margin: 0 0 20px;
      opacity: 0;
      -webkit-transition: none;
      -o-transition: none;
      transition: none; }
      @media all and (max-width: 1024px) {
        #home .news .masonry ul li {
          width: 100%; } }
      #home .news .masonry ul li.show.in {
        -webkit-animation: fadeIn 1s both .2s;
        animation: fadeIn 1s both .2s; }
        #home .news .masonry ul li.show.in ._text > * > * {
          -webkit-animation: fadeInUp 1s both .6s;
          animation: fadeInUp 1s both .6s; }
      #home .news .masonry ul li:hover figure img {
        -webkit-transform: scale(1.09);
        -ms-transform: scale(1.09);
        transform: scale(1.09); }
      #home .news .masonry ul li figure {
        overflow: hidden; }
        #home .news .masonry ul li figure img {
          -webkit-transition: all 1.5s ease;
          -o-transition: all 1.5s ease;
          transition: all 1.5s ease; }
      #home .news .masonry ul li ._text {
        padding: 50px; }
        @media all and (max-width: 1580px) {
          #home .news .masonry ul li ._text {
            padding: 3vw; } }
        @media all and (max-width: 500px) {
          #home .news .masonry ul li ._text {
            background-color: transparent !important;
            color: #000 !important;
            display: inline-block !important; } }
        @media all and (max-width: 500px) {
          #home .news .masonry ul li ._text .timeAndType {
            width: 100%;
            display: inline-block !important;
            margin-bottom: 10px; } }
        #home .news .masonry ul li ._text .timeAndType .type {
          font-size: 0.875rem; }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li ._text .timeAndType .type {
              display: inline-block; } }
        #home .news .masonry ul li ._text .timeAndType .time {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: end;
          -ms-flex-align: end;
          align-items: flex-end; }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li ._text .timeAndType .time {
              display: -webkit-inline-box;
              display: -ms-inline-flexbox;
              display: inline-flex; } }
          #home .news .masonry ul li ._text .timeAndType .time .date {
            font-family: '微軟正黑體';
            font-size: 1.25rem; }
          #home .news .masonry ul li ._text .timeAndType .time .week {
            font-family: '微軟正黑體';
            font-size: 0.875rem;
            padding-bottom: 5px;
            margin-left: 5px; }
        @media all and (max-width: 500px) {
          #home .news .masonry ul li ._text .title {
            width: 100% !important;
            padding: 0; } }
        #home .news .masonry ul li ._text .title .ch {
          font-size: 1.5rem;
          font-weight: bold;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          max-height: 200px; }
          @media all and (max-width: 1580px) {
            #home .news .masonry ul li ._text .title .ch {
              font-size: 1.375rem; } }
          @media all and (max-width: 1200px) {
            #home .news .masonry ul li ._text .title .ch {
              font-size: 1.1875rem; } }
          @media all and (max-width: 1024px) and (min-width: 801px) {
            #home .news .masonry ul li ._text .title .ch {
              font-size: 1.375rem; } }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li ._text .title .ch {
              font-size: 1.125rem;
              -webkit-line-clamp: 100;
              max-height: none; } }
        #home .news .masonry ul li ._text .title .en {
          font-family: 'SarabunRegular';
          font-size: 0.875rem; }
          @media all and (max-width: 1200px) and (min-width: 801px) {
            #home .news .masonry ul li ._text .title .en {
              font-size: 0.75rem; } }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li ._text .title .en {
              font-size: 0.75rem; } }
        #home .news .masonry ul li ._text .title .words {
          font-size: 1rem; }
          @media all and (max-width: 1200px) {
            #home .news .masonry ul li ._text .title .words {
              font-size: 0.875rem; } }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li ._text .title .words {
              display: none; } }
      #home .news .masonry ul li.big, #home .news .masonry ul li.small {
        position: relative; }
        #home .news .masonry ul li.big ._text, #home .news .masonry ul li.small ._text {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li.big ._text, #home .news .masonry ul li.small ._text {
              position: relative;
              top: auto;
              left: auto;
              -webkit-box-orient: horizontal;
              -webkit-box-direction: normal;
              -ms-flex-direction: row;
              flex-direction: row; }
              #home .news .masonry ul li.big ._text .timeAndType, #home .news .masonry ul li.small ._text .timeAndType {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: end;
                -ms-flex-align: end;
                align-items: flex-end;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column; } }
        #home .news .masonry ul li.big.right ._text, #home .news .masonry ul li.small.right ._text {
          -webkit-box-align: end;
          -ms-flex-align: end;
          align-items: flex-end; }
      #home .news .masonry ul li.big figure > div {
        height: 0;
        padding-bottom: calc(100% + 20px);
        position: relative;
        width: 100%; }
        #home .news .masonry ul li.big figure > div img {
          max-width: none;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          min-height: 100%;
          min-width: 100%; }
      #home .news .masonry ul li.small figure > div {
        height: 0;
        padding-bottom: 50%;
        position: relative;
        width: 100%; }
        #home .news .masonry ul li.small figure > div img {
          max-width: none;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          min-height: 100%;
          min-width: 100%; }
      #home .news .masonry ul li.imgLeft a, #home .news .masonry ul li.imgRight a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        #home .news .masonry ul li.imgLeft a figure, #home .news .masonry ul li.imgRight a figure {
          width: 50%; }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li.imgLeft a figure, #home .news .masonry ul li.imgRight a figure {
              width: 100%; } }
        #home .news .masonry ul li.imgLeft a ._text, #home .news .masonry ul li.imgRight a ._text {
          width: 50%;
          position: relative; }
          @media all and (max-width: 1024px) {
            #home .news .masonry ul li.imgLeft a ._text, #home .news .masonry ul li.imgRight a ._text {
              padding: 1vw 2vw; } }
          @media all and (max-width: 500px) {
            #home .news .masonry ul li.imgLeft a ._text, #home .news .masonry ul li.imgRight a ._text {
              width: 100%;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex; } }
          #home .news .masonry ul li.imgLeft a ._text .title, #home .news .masonry ul li.imgRight a ._text .title {
            width: calc(100% - 100px);
            text-align: center;
            position: absolute;
            top: 60%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
            @media all and (max-width: 1580px) {
              #home .news .masonry ul li.imgLeft a ._text .title, #home .news .masonry ul li.imgRight a ._text .title {
                width: calc(100% - 6vw); } }
            @media all and (max-width: 500px) {
              #home .news .masonry ul li.imgLeft a ._text .title, #home .news .masonry ul li.imgRight a ._text .title {
                position: relative;
                top: auto;
                left: auto;
                -webkit-transform: translate(0);
                -ms-transform: translate(0);
                transform: translate(0);
                width: calc(100% - 120px);
                text-align: left; } }
      #home .news .masonry ul li.imgLeft figure > div {
        height: 0;
        padding-bottom: 100%;
        position: relative;
        width: 100%; }
        #home .news .masonry ul li.imgLeft figure > div img {
          max-width: none;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          min-height: 100%;
          min-width: 100%; }
      #home .news .masonry ul li.imgLeft .timeAndType {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
      #home .news .masonry ul li.imgRight a {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse; }
      #home .news .masonry ul li.imgRight figure > div {
        height: 0;
        padding-bottom: 100%;
        position: relative;
        width: 100%; }
        #home .news .masonry ul li.imgRight figure > div img {
          max-width: none;
          min-height: 100%;
          height: 100%;
          min-width: 100%;
          position: absolute;
          top: 0;
          left: 0; }
      #home .news .masonry ul li.imgRight .timeAndType {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        @media all and (max-width: 500px) {
          #home .news .masonry ul li.imgRight .timeAndType {
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end; } }
  #home .news .buttons {
    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;
    margin-top: 60px; }

#home .about {
  margin-top: 140px; }
  #home .about ._title, #home .about .line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px; }
    @media all and (max-width: 470px) {
      #home .about ._title, #home .about .line {
        padding: 0 20px; } }
    #home .about ._title .bigImg, #home .about ._title .smallImg, #home .about .line .bigImg, #home .about .line .smallImg {
      overflow: hidden; }
      @media all and (max-width: 1024px) {
        #home .about ._title .bigImg.show.in.hasVideo:after, #home .about ._title .smallImg.show.in.hasVideo:after, #home .about .line .bigImg.show.in.hasVideo:after, #home .about .line .smallImg.show.in.hasVideo:after {
          opacity: 1 !important;
          -webkit-transform: translate(-50%, -50%) scale(1) !important;
          -ms-transform: translate(-50%, -50%) scale(1) !important;
          transform: translate(-50%, -50%) scale(1) !important;
          -webkit-transition: all 0.8s ease 1s;
          -o-transition: all 0.8s ease 1s;
          transition: all 0.8s ease 1s; } }
      #home .about ._title .bigImg > *, #home .about ._title .bigImg.hasVideo:before, #home .about ._title .smallImg > *, #home .about ._title .smallImg.hasVideo:before, #home .about .line .bigImg > *, #home .about .line .bigImg.hasVideo:before, #home .about .line .smallImg > *, #home .about .line .smallImg.hasVideo:before {
        -webkit-transform: translateX(101%);
        -ms-transform: translateX(101%);
        transform: translateX(101%);
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease; }
      #home .about ._title .bigImg.show.in.Down > *, #home .about ._title .bigImg.show.in.Down.hasVideo:before, #home .about ._title .smallImg.show.in.Down > *, #home .about ._title .smallImg.show.in.Down.hasVideo:before, #home .about .line .bigImg.show.in.Down > *, #home .about .line .bigImg.show.in.Down.hasVideo:before, #home .about .line .smallImg.show.in.Down > *, #home .about .line .smallImg.show.in.Down.hasVideo:before {
        -webkit-animation-name: slideInDown;
        animation-name: slideInDown; }
      #home .about ._title .bigImg.show.in.Up > *, #home .about ._title .bigImg.show.in.Up.hasVideo:before, #home .about ._title .smallImg.show.in.Up > *, #home .about ._title .smallImg.show.in.Up.hasVideo:before, #home .about .line .bigImg.show.in.Up > *, #home .about .line .bigImg.show.in.Up.hasVideo:before, #home .about .line .smallImg.show.in.Up > *, #home .about .line .smallImg.show.in.Up.hasVideo:before {
        -webkit-animation-name: slideInUp;
        animation-name: slideInUp; }
      #home .about ._title .bigImg.show.in.Left > *, #home .about ._title .bigImg.show.in.Left.hasVideo:before, #home .about ._title .smallImg.show.in.Left > *, #home .about ._title .smallImg.show.in.Left.hasVideo:before, #home .about .line .bigImg.show.in.Left > *, #home .about .line .bigImg.show.in.Left.hasVideo:before, #home .about .line .smallImg.show.in.Left > *, #home .about .line .smallImg.show.in.Left.hasVideo:before {
        -webkit-animation-name: slideInLeft;
        animation-name: slideInLeft; }
      #home .about ._title .bigImg.show.in.Right > *, #home .about ._title .bigImg.show.in.Right.hasVideo:before, #home .about ._title .smallImg.show.in.Right > *, #home .about ._title .smallImg.show.in.Right.hasVideo:before, #home .about .line .bigImg.show.in.Right > *, #home .about .line .bigImg.show.in.Right.hasVideo:before, #home .about .line .smallImg.show.in.Right > *, #home .about .line .smallImg.show.in.Right.hasVideo:before {
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight; }
    #home .about ._title .bigImg, #home .about .line .bigImg {
      width: 49.5%; }
      @media all and (max-width: 950px) {
        #home .about ._title .bigImg, #home .about .line .bigImg {
          width: 100%; } }
      @media all and (max-width: 950px) and (min-width: 471px) {
        #home .about ._title .bigImg, #home .about .line .bigImg {
          margin-bottom: 20px; } }
      #home .about ._title .bigImg.hasVideo, #home .about .line .bigImg.hasVideo {
        position: relative;
        cursor: pointer; }
        @media all and (max-width: 1024px) {
          #home .about ._title .bigImg.hasVideo img, #home .about .line .bigImg.hasVideo img {
            opacity: 0.3 !important; } }
        #home .about ._title .bigImg.hasVideo:before, #home .about .line .bigImg.hasVideo:before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #000;
          position: absolute;
          top: 0;
          left: 0; }
        #home .about ._title .bigImg.hasVideo img, #home .about .line .bigImg.hasVideo img {
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease;
          position: relative; }
        #home .about ._title .bigImg.hasVideo:after, #home .about .line .bigImg.hasVideo:after {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) scale(0);
          -ms-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
          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: calc(6vw - 7px);
          min-width: 43px;
          height: calc(6vw - 2px);
          min-height: 48px;
          border: 1px solid #ccd1d0;
          border-radius: 50%;
          content: "\f04b";
          color: #ccd1d0;
          font-family: 'icon-solid';
          font-size: 0.75rem;
          padding: 0 0 0 5px;
          opacity: 0;
          -webkit-transition: all .5s ease;
          -o-transition: all .5s ease;
          transition: all .5s ease; }
        #home .about ._title .bigImg.hasVideo:hover img, #home .about .line .bigImg.hasVideo:hover img {
          opacity: 0.3; }
        #home .about ._title .bigImg.hasVideo:hover:after, #home .about .line .bigImg.hasVideo:hover:after {
          opacity: 1;
          -webkit-transition: all .5s ease .1s;
          -o-transition: all .5s ease .1s;
          transition: all .5s ease .1s;
          -webkit-transform: translate(-50%, -50%) scale(1);
          -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1); }
    #home .about ._title ._text, #home .about .line ._text {
      width: 26%;
      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;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 0 3.9vw; }
      @media all and (max-width: 950px) {
        #home .about ._title ._text, #home .about .line ._text {
          width: 51.5%; } }
      @media all and (max-width: 470px) {
        #home .about ._title ._text, #home .about .line ._text {
          width: 100%;
          padding: 0 5vw; } }
      #home .about ._title ._text.show img, #home .about .line ._text.show img {
        -webkit-animation: fadeInUp 1s both .6s;
        animation: fadeInUp 1s both .6s; }
      #home .about ._title ._text.show h6, #home .about .line ._text.show h6 {
        -webkit-animation: fadeInDown 1.2s both;
        animation: fadeInDown 1.2s both; }
      #home .about ._title ._text.show > p, #home .about .line ._text.show > p {
        -webkit-animation: fadeInDown 1.2s both .2s;
        animation: fadeInDown 1.2s both .2s; }
      #home .about ._title ._text.show .buttonType1 .top, #home .about .line ._text.show .buttonType1 .top {
        width: 100%;
        -webkit-transition: all .5s ease .6s;
        -o-transition: all .5s ease .6s;
        transition: all .5s ease .6s; }
      #home .about ._title ._text.show .buttonType1:before, #home .about ._title ._text.show .buttonType1:after, #home .about .line ._text.show .buttonType1:before, #home .about .line ._text.show .buttonType1:after {
        height: 100%;
        -webkit-transition: all .2s ease 1s;
        -o-transition: all .2s ease 1s;
        transition: all .2s ease 1s; }
      #home .about ._title ._text.show .buttonType1 .bottom:after, #home .about .line ._text.show .buttonType1 .bottom:after {
        width: 0;
        -webkit-transition: all .5s ease 1.1s;
        -o-transition: all .5s ease 1.1s;
        transition: all .5s ease 1.1s; }
      #home .about ._title ._text.show .buttonType1 p, #home .about .line ._text.show .buttonType1 p {
        -webkit-animation: fadeInUp 0.8s both 1s;
        animation: fadeInUp 0.8s both 1s; }
      #home .about ._title ._text > p, #home .about .line ._text > p {
        font-size: 0.9375rem;
        letter-spacing: 0px;
        line-height: 2;
        opacity: 0; }
        @media all and (max-width: 1279px) and (min-width: 951px) {
          #home .about ._title ._text > p, #home .about .line ._text > p {
            display: none; } }
        @media all and (max-width: 600px) and (min-width: 471px) {
          #home .about ._title ._text > p, #home .about .line ._text > p {
            display: none; } }
      #home .about ._title ._text img, #home .about .line ._text img {
        opacity: 0;
        margin-top: 35px; }
        @media all and (max-width: 470px) {
          #home .about ._title ._text img, #home .about .line ._text img {
            display: none; } }
    #home .about ._title .smallImg, #home .about .line .smallImg {
      width: 24.5%; }
      @media all and (max-width: 950px) {
        #home .about ._title .smallImg, #home .about .line .smallImg {
          width: 48.5%; } }
      @media all and (max-width: 470px) {
        #home .about ._title .smallImg, #home .about .line .smallImg {
          width: 100%; } }
  @media all and (max-width: 470px) {
    #home .about ._title ._text {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      margin-bottom: 20px; } }
  #home .about ._title ._text .en {
    font-family: Alata;
    font-size: 2.25rem;
    line-height: 1.2; }
    @media all and (max-width: 700px) {
      #home .about ._title ._text .en {
        font-size: 1.625rem; } }
    @media all and (max-width: 1279px) and (min-width: 951px) {
      #home .about ._title ._text .en {
        font-size: 2rem; } }
    @media all and (max-width: 700px) {
      #home .about ._title ._text .en {
        font-size: 2rem; } }
    @media all and (max-width: 470px) {
      #home .about ._title ._text .en {
        font-size: 1.625rem; }
        #home .about ._title ._text .en br {
          display: none; } }
  #home .about ._title ._text .ch {
    font-size: 1.125rem;
    line-height: 2;
    min-width: 180px; }
    @media all and (max-width: 700px) {
      #home .about ._title ._text .ch {
        font-size: 1rem; } }
    @media all and (max-width: 700px) {
      #home .about ._title ._text .ch {
        min-width: 160px; } }
  @media all and (max-width: 470px) {
    #home .about ._title .bigImg {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; } }
  @media all and (max-width: 470px) {
    #home .about ._title .smallImg {
      display: none; } }
  @media all and (max-width: 470px) {
    #home .about .lines .line:not(:first-child) {
      margin-top: 60px; } }
  @media all and (max-width: 470px) {
    #home .about .lines .line ._text {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      margin-top: 20px; } }
  #home .about .lines .line ._text h6 {
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0;
    background-color: #fff; }
    @media all and (max-width: 1440px) {
      #home .about .lines .line ._text h6 {
        font-size: 1.375rem; } }
    @media all and (max-width: 1279px) {
      #home .about .lines .line ._text h6 {
        font-size: 1.25rem; } }
  #home .about .lines .line ._text > p {
    margin-top: 30px; }
    @media all and (max-width: 470px) {
      #home .about .lines .line ._text > p {
        text-align: center;
        margin-top: 10px; } }
  #home .about .lines .line ._text a {
    margin-top: 4.6875vw; }
    #home .about .lines .line ._text a:before, #home .about .lines .line ._text a:after {
      width: 1px; }
    #home .about .lines .line ._text a p {
      padding: 5px 35px;
      font-family: SarabunRegular, 微軟正黑體;
      font-size: 0.9375rem; }
    #home .about .lines .line ._text a span {
      height: 1px; }
  @media all and (min-width: 471px) {
    #home .about .lines .line:nth-child(odd) {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse; } }
  @media all and (max-width: 470px) {
    #home .about .lines .line .smallImg {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; } }
  @media all and (max-width: 470px) {
    #home .about .lines .line .bigImg {
      display: none; } }

#home .advertisement {
  max-width: 1580px;
  margin: 100px auto 0;
  position: relative;
  background-size: cover;
  background-position: center;
  height: 680px;
  opacity: 0; }
  @media all and (max-width: 1580px) {
    #home .advertisement {
      height: 43vw; } }
  @media all and (max-width: 700px) {
    #home .advertisement {
      padding: 50px 10vw 60px;
      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;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      height: auto;
      margin: 100px auto -100px; } }
  #home .advertisement.show.in {
    -webkit-animation: fadeIn 1s both;
    animation: fadeIn 1s both; }
    #home .advertisement.show.in ._img img {
      -webkit-animation: slideInUp 1.2s both .2s;
      animation: slideInUp 1.2s both .2s; }
    #home .advertisement.show.in ._text h6 {
      -webkit-animation: fadeInDown 1s both .2s;
      animation: fadeInDown 1s both .2s; }
    #home .advertisement.show.in ._text p {
      -webkit-animation: fadeInDown 1s both .4s;
      animation: fadeInDown 1s both .4s; }
    #home .advertisement.show.in ._text a {
      -webkit-animation: slideInUp 1s both .6s;
      animation: slideInUp 1s both .6s; }
  #home .advertisement ._img {
    position: absolute;
    top: 50%;
    left: calc(50% + 10px);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 40%;
    overflow: hidden; }
    @media all and (max-width: 700px) {
      #home .advertisement ._img {
        position: relative;
        top: auto;
        left: auto;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        max-width: 100%; } }
    #home .advertisement ._img.left {
      left: auto;
      right: calc(50% + 10px); }
      @media all and (max-width: 700px) {
        #home .advertisement ._img.left {
          right: auto; } }
    #home .advertisement ._img img {
      -webkit-transform: translateY(101%);
      -ms-transform: translateY(101%);
      transform: translateY(101%); }
  #home .advertisement ._text {
    position: absolute;
    top: 50%;
    max-width: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden; }
    @media all and (max-width: 700px) {
      #home .advertisement ._text {
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0);
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        text-align: center;
        margin-top: 25px; } }
    #home .advertisement ._text h6 {
      font-size: 2.25rem;
      font-family: 'Alata'; }
      @media all and (max-width: 700px) {
        #home .advertisement ._text h6 {
          font-size: 1.875rem; } }
    #home .advertisement ._text > p {
      font-size: 1rem;
      line-height: 2;
      margin-top: 40px;
      letter-spacing: 0.5px; }
      @media all and (max-width: 1580px) {
        #home .advertisement ._text > p {
          margin-top: 2.5vw; } }
    #home .advertisement ._text a {
      color: #fff;
      background-color: #000;
      text-align: center;
      padding: 15px;
      margin-top: 70px;
      font-size: 0.9375rem;
      font-weight: bold;
      -webkit-transform: translateY(101%);
      -ms-transform: translateY(101%);
      transform: translateY(101%); }
      @media all and (max-width: 1580px) {
        #home .advertisement ._text a {
          margin-top: 4.5vw; } }
    #home .advertisement ._text.center {
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      @media all and (max-width: 700px) {
        #home .advertisement ._text.center {
          left: auto;
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0); } }
    #home .advertisement ._text.right {
      left: auto;
      right: 25%;
      -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
      transform: translate(50%, -50%); }
      @media all and (max-width: 700px) {
        #home .advertisement ._text.right {
          right: auto;
          -webkit-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0); } }

#home .videoLibox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-animation: fadeIn 0.4s both;
  animation: fadeIn 0.4s both;
  opacity: 0;
  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; }
  #home .videoLibox.close {
    -webkit-animation: fadeOut 0.4s both;
    animation: fadeOut 0.4s both; }
    #home .videoLibox.close .liboxClose {
      -webkit-animation: slideOutUp .4s both;
      animation: slideOutUp .4s both; }
  #home .videoLibox .liboxClose {
    position: absolute;
    top: 0;
    right: calc(5% - 25px);
    width: 50px;
    height: 50px;
    background-color: #e83434;
    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;
    cursor: pointer;
    -webkit-animation: slideInDown 1s both 0.4s;
    animation: slideInDown 1s both 0.4s; }
    @media all and (max-width: 700px) {
      #home .videoLibox .liboxClose {
        width: 40px;
        height: 40px; } }
    #home .videoLibox .liboxClose span {
      position: relative;
      width: 25px;
      height: 25px;
      display: block;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
      @media all and (max-width: 700px) {
        #home .videoLibox .liboxClose span {
          width: 20px;
          height: 20px; } }
      #home .videoLibox .liboxClose span:before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      #home .videoLibox .liboxClose span:after {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        background-color: #fff; }
  #home .videoLibox iframe {
    width: 80%;
    height: 100%;
    -webkit-animation: fadeIn 1s both .5s;
    animation: fadeIn 1s both .5s;
    opacity: 0; }
    @media all and (max-aspect-ratio: 1 / 1) {
      #home .videoLibox iframe {
        height: calc(100% - 100px);
        width: 100%; } }
    @media all and (max-aspect-ratio: 1 / 1) and (max-width: 700px) {
      #home .videoLibox iframe {
        height: calc(100% - 80px); } }

#home .noticeLibox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 99;
  background-color: rgba(232, 52, 52, 0.8);
  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;
  opacity: 0;
  -webkit-animation: fadeIn 1s both .4s;
  animation: fadeIn 1s both .4s; }
  #home .noticeLibox.close {
    -webkit-animation: fadeOut .4s both;
    animation: fadeOut .4s both; }
  #home .noticeLibox section {
    /* background-color: #fff; */
    position: relative;
    max-width: 1000px;
    max-height: 690px;
    width: 90%; }
    #home .noticeLibox section .liboxClose {
      position: absolute;
      top: -20px;
      right: -20px;
      z-index: 1;
      width: 50px;
      height: 50px;
      background-color: #000;
      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;
      cursor: pointer; }
      #home .noticeLibox section .liboxClose span {
        position: relative;
        width: 28px;
        height: 28px;
        display: block;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }
        #home .noticeLibox section .liboxClose span:before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background-color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
        #home .noticeLibox section .liboxClose span:after {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          content: "";
          display: block;
          width: 2px;
          height: 100%;
          background-color: #fff; }
    #home .noticeLibox section ._text {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      width: 100%;
      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;
      text-align: center; }
      #home .noticeLibox section ._text.noImg {
        position: relative;
        top: auto;
        left: auto; }
        #home .noticeLibox section ._text.noImg .box {
          max-height: calc(100vh - 40px);
          max-width: 990px; }
          @media all and (max-width: 1024px) {
            #home .noticeLibox section ._text.noImg .box {
              max-width: calc(100vw - 10vw); } }
      #home .noticeLibox section ._text .box {
        overflow-y: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-height: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 100px 120px; }
        @media all and (max-width: 1024px) {
          #home .noticeLibox section ._text .box {
            padding: 80px 10vw; } }
        @media all and (max-width: 700px) {
          #home .noticeLibox section ._text .box {
            padding: 40px 5vw; } }
      #home .noticeLibox section ._text h6 {
        color: #e83434;
        font-family: Alata, 微軟正黑體;
        font-size: 3.75rem;
        line-height: 1.5;
        margin-bottom: 40px; }
        @media all and (max-width: 700px) {
          #home .noticeLibox section ._text h6 {
            font-size: 2.25rem; } }
      #home .noticeLibox section ._text p {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1.8; }
        @media all and (max-width: 700px) {
          #home .noticeLibox section ._text p {
            font-size: 1rem; } }
      #home .noticeLibox section ._text a {
        margin-top: 100px; }
        #home .noticeLibox section ._text a p {
          font-size: 0.9375rem; }
          @media all and (max-width: 700px) {
            #home .noticeLibox section ._text a p {
              font-size: 0.8125rem; } }
        #home .noticeLibox section ._text a:after {
          content: "";
          display: block;
          width: 100%;
          height: 3px;
          background-color: #f18585; }

#news.index main {
  position: relative;
  z-index: 1; }

#news.index .ajaxContent {
  max-width: 1580px;
  margin: auto;
  padding: 120px 50px 80px; }
  @media all and (max-width: 1024px) {
    #news.index .ajaxContent {
      padding: 120px 5vw 80px; } }
  #news.index .ajaxContent ._title {
    position: relative;
    z-index: 1; }
    #news.index .ajaxContent ._title .en {
      font-family: Alata;
      font-size: 2.25rem;
      text-align: center; }
      @media all and (max-width: 700px) {
        #news.index .ajaxContent ._title .en {
          font-size: 1.625rem; } }
      #news.index .ajaxContent ._title .en span {
        font-size: 2.125rem;
        font-family: 微軟正黑體;
        font-weight: bold; }
        @media all and (max-width: 700px) {
          #news.index .ajaxContent ._title .en span {
            font-size: 1.5rem; } }
    #news.index .ajaxContent ._title .ch {
      font-size: 1.125rem;
      text-align: center;
      margin-top: 5px; }
      @media all and (max-width: 700px) {
        #news.index .ajaxContent ._title .ch {
          font-size: 1rem; } }
    #news.index .ajaxContent ._title .year {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin: 50px 0 70px; }
      #news.index .ajaxContent ._title .year .ajax, #news.index .ajaxContent ._title .year .dropDown {
        margin: 0 30px;
        position: relative;
        cursor: pointer;
        font-size: 0.9375rem;
        font-family: SarabunRegular,微軟正黑體; }
        #news.index .ajaxContent ._title .year .ajax:before, #news.index .ajaxContent ._title .year .ajax:after, #news.index .ajaxContent ._title .year .dropDown:before, #news.index .ajaxContent ._title .year .dropDown:after {
          position: absolute;
          bottom: 0;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
        #news.index .ajaxContent ._title .year .ajax:before, #news.index .ajaxContent ._title .year .dropDown:before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background-color: #ccc; }
        #news.index .ajaxContent ._title .year .ajax:after, #news.index .ajaxContent ._title .year .dropDown:after {
          content: "";
          display: block;
          width: 0%;
          height: 2px;
          background-color: #000;
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
          @media all and (max-width: 1024px) {
            #news.index .ajaxContent ._title .year .ajax:after, #news.index .ajaxContent ._title .year .dropDown:after {
              width: 100%; } }
        #news.index .ajaxContent ._title .year .ajax:hover:after, #news.index .ajaxContent ._title .year .ajax.active:after, #news.index .ajaxContent ._title .year .dropDown:hover:after, #news.index .ajaxContent ._title .year .dropDown.active:after {
          width: 100%; }
      #news.index .ajaxContent ._title .year .ajax {
        padding: 0 20px 15px; }
        @media all and (max-width: 700px) {
          #news.index .ajaxContent ._title .year .ajax {
            display: none; } }
      #news.index .ajaxContent ._title .year .dropDown {
        width: 200px; }
        #news.index .ajaxContent ._title .year .dropDown .selectMenu {
          padding: 0 20px 10px 0; }
          #news.index .ajaxContent ._title .year .dropDown .selectMenu p {
            text-align: center;
            padding: 0 20px; }
        #news.index .ajaxContent ._title .year .dropDown ul {
          top: calc(100% - 2px); }
  #news.index .ajaxContent .grid-size {
    width: calc(25% - 22.5px); }
    @media all and (max-width: 1024px) {
      #news.index .ajaxContent .grid-size {
        width: calc(50% - 7.5px); } }
    @media all and (max-width: 460px) {
      #news.index .ajaxContent .grid-size {
        width: 100%; } }
  #news.index .ajaxContent .masonry.out li a, #news.index .ajaxContent .masonry ul.out li a {
    -webkit-animation: fadeOutUp 0.8s both;
    animation: fadeOutUp 0.8s both; }
  #news.index .ajaxContent .masonry ul li {
    margin-bottom: 30px;
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      #news.index .ajaxContent .masonry ul li {
        margin-bottom: 15px; } }
    @media all and (max-width: 600px) {
      #news.index .ajaxContent .masonry ul li {
        margin-bottom: 50px; } }
    #news.index .ajaxContent .masonry ul li.show.in figure {
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    #news.index .ajaxContent .masonry ul li.show.in.big ._text .dateAndType, #news.index .ajaxContent .masonry ul li.show.in.middle ._text .dateAndType, #news.index .ajaxContent .masonry ul li.show.in.small ._text .dateAndType {
      -webkit-animation: fadeInUp 1.6s both .6s;
      animation: fadeInUp 1.6s both .6s; }
    #news.index .ajaxContent .masonry ul li.show.in.big ._text .words, #news.index .ajaxContent .masonry ul li.show.in.middle ._text .words, #news.index .ajaxContent .masonry ul li.show.in.small ._text .words {
      -webkit-animation: fadeInUp 1.6s both .8s;
      animation: fadeInUp 1.6s both .8s; }
    #news.index .ajaxContent .masonry ul li a {
      position: relative;
      display: block; }
      #news.index .ajaxContent .masonry ul li a:hover figure img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }
    #news.index .ajaxContent .masonry ul li figure {
      overflow: hidden;
      opacity: 0;
      -webkit-transition: all .4s ease;
      -o-transition: all .4s ease;
      transition: all .4s ease; }
      #news.index .ajaxContent .masonry ul li figure img {
        -webkit-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease; }
    #news.index .ajaxContent .masonry ul li ._text .dateAndType {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end; }
      #news.index .ajaxContent .masonry ul li ._text .dateAndType .date {
        font-family: 'Alata';
        font-size: 1.5rem; }
      #news.index .ajaxContent .masonry ul li ._text .dateAndType .type {
        font-size: 0.875rem;
        padding: 0 0 5px;
        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; }
        #news.index .ajaxContent .masonry ul li ._text .dateAndType .type:before {
          content: "/";
          margin: 0 8px;
          font-size: 0.75rem; }
    #news.index .ajaxContent .masonry ul li ._text .words {
      margin-top: 5px; }
      #news.index .ajaxContent .masonry ul li ._text .words h6 {
        font-family: SarabunRegular, 微軟正黑體;
        font-size: 1.25rem; }
        @media all and (max-width: 700px) {
          #news.index .ajaxContent .masonry ul li ._text .words h6 {
            font-size: 1.125rem; } }
      #news.index .ajaxContent .masonry ul li ._text .words p {
        font-size: 0.9375rem;
        margin-top: 20px;
        line-height: 2; }
    #news.index .ajaxContent .masonry ul li.big ._text .dateAndType, #news.index .ajaxContent .masonry ul li.big ._text .words, #news.index .ajaxContent .masonry ul li.middle ._text .dateAndType, #news.index .ajaxContent .masonry ul li.middle ._text .words, #news.index .ajaxContent .masonry ul li.small ._text .dateAndType, #news.index .ajaxContent .masonry ul li.small ._text .words {
      opacity: 0; }
    #news.index .ajaxContent .masonry ul li.big, #news.index .ajaxContent .masonry ul li.middle {
      width: calc(50% - 15px); }
      @media all and (max-width: 1024px) {
        #news.index .ajaxContent .masonry ul li.big, #news.index .ajaxContent .masonry ul li.middle {
          width: 100%; } }
      #news.index .ajaxContent .masonry ul li.big ._text, #news.index .ajaxContent .masonry ul li.middle ._text {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 40px;
        color: #fff; }
        @media all and (max-width: 1024px) {
          #news.index .ajaxContent .masonry ul li.big ._text, #news.index .ajaxContent .masonry ul li.middle ._text {
            padding: 5vw; } }
        @media all and (max-width: 600px) {
          #news.index .ajaxContent .masonry ul li.big ._text, #news.index .ajaxContent .masonry ul li.middle ._text {
            position: relative;
            bottom: auto;
            left: auto;
            padding: 10px 5px;
            color: #000; } }
      #news.index .ajaxContent .masonry ul li.big figure, #news.index .ajaxContent .masonry ul li.middle figure {
        background-color: #000; }
      #news.index .ajaxContent .masonry ul li.big a:hover figure img, #news.index .ajaxContent .masonry ul li.middle a:hover figure img {
        opacity: 0.5; }
    #news.index .ajaxContent .masonry ul li.big figure {
      height: 725px; }
      @media all and (max-width: 1580px) {
        #news.index .ajaxContent .masonry ul li.big figure {
          height: calc(50vw - 72px); } }
      @media all and (max-width: 1024px) {
        #news.index .ajaxContent .masonry ul li.big figure {
          height: auto; } }
    #news.index .ajaxContent .masonry ul li.middle figure {
      height: 345px; }
      @media all and (max-width: 1580px) {
        #news.index .ajaxContent .masonry ul li.middle figure {
          height: calc(25vw - 50px); } }
      @media all and (max-width: 1024px) {
        #news.index .ajaxContent .masonry ul li.middle figure {
          width: 100%;
          height: auto; } }
    #news.index .ajaxContent .masonry ul li.small {
      height: 350px;
      width: calc(25% - 22.5px); }
      @media all and (max-width: 1580px) {
        #news.index .ajaxContent .masonry ul li.small {
          height: calc(25vw - 50px); } }
      @media all and (max-width: 1024px) {
        #news.index .ajaxContent .masonry ul li.small {
          width: calc(50% - 7.5px);
          height: auto; } }
      @media all and (max-width: 460px) {
        #news.index .ajaxContent .masonry ul li.small {
          width: 100%;
          height: auto; } }
      #news.index .ajaxContent .masonry ul li.small figure {
        height: 230px; }
        @media all and (max-width: 1580px) {
          #news.index .ajaxContent .masonry ul li.small figure {
            height: calc(16.42vw - 31px); } }
        @media all and (max-width: 1024px) {
          #news.index .ajaxContent .masonry ul li.small figure {
            height: auto; } }
      #news.index .ajaxContent .masonry ul li.small ._text {
        padding: 10px 5px;
        height: calc(100% - 230px); }
        @media all and (max-width: 1580px) {
          #news.index .ajaxContent .masonry ul li.small ._text {
            height: calc(100% - 16.42vw + 31px); } }
        @media all and (max-width: 1580px) and (min-width: 461px) {
          #news.index .ajaxContent .masonry ul li.small ._text .dateAndType .date {
            font-size: 1.25rem; }
          #news.index .ajaxContent .masonry ul li.small ._text .dateAndType .type {
            padding: 0; }
          #news.index .ajaxContent .masonry ul li.small ._text h6 {
            font-size: 1rem; } }
    #news.index .ajaxContent .masonry ul li.textOnly {
      width: calc(50% - 15px); }
      @media all and (max-width: 1024px) {
        #news.index .ajaxContent .masonry ul li.textOnly {
          width: 100%; } }
      #news.index .ajaxContent .masonry ul li.textOnly.show a {
        -webkit-animation: fadeInDown 1.2s both;
        animation: fadeInDown 1.2s both; }
        #news.index .ajaxContent .masonry ul li.textOnly.show a ._text .dateAndType {
          -webkit-animation: fadeInDown 1.6s both .2s;
          animation: fadeInDown 1.6s both .2s; }
        #news.index .ajaxContent .masonry ul li.textOnly.show a ._text .words h6 {
          -webkit-animation: fadeInDown 1.6s both .4s;
          animation: fadeInDown 1.6s both .4s; }
        #news.index .ajaxContent .masonry ul li.textOnly.show a ._text .words p {
          -webkit-animation: fadeInUp 1.6s both .6s;
          animation: fadeInUp 1.6s both .6s; }
      #news.index .ajaxContent .masonry ul li.textOnly a {
        height: 350px;
        opacity: 0; }
        @media all and (max-width: 1580px) {
          #news.index .ajaxContent .masonry ul li.textOnly a {
            height: calc(25vw - 50px); } }
        @media all and (max-width: 1024px) {
          #news.index .ajaxContent .masonry ul li.textOnly a {
            height: auto; } }
      #news.index .ajaxContent .masonry ul li.textOnly ._text {
        width: 100%;
        height: 100%;
        padding: 40px;
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        @media all and (max-width: 1280px) and (min-width: 1025px) {
          #news.index .ajaxContent .masonry ul li.textOnly ._text .dateAndType {
            opacity: 0; }
            #news.index .ajaxContent .masonry ul li.textOnly ._text .dateAndType .date {
              font-size: 1.25rem; }
            #news.index .ajaxContent .masonry ul li.textOnly ._text .dateAndType .type {
              padding: 0; }
          #news.index .ajaxContent .masonry ul li.textOnly ._text .words h6 {
            font-size: 1rem;
            opacity: 0; }
          #news.index .ajaxContent .masonry ul li.textOnly ._text .words p {
            font-size: 0.875rem;
            opacity: 0; } }
        @media all and (max-width: 1024px) {
          #news.index .ajaxContent .masonry ul li.textOnly ._text {
            padding: 60px 5vw; } }

#news.detail .close {
  position: absolute;
  top: 90px;
  left: calc(50% + 730px);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  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;
  cursor: pointer;
  z-index: 1; }
  @media all and (max-width: 1580px) {
    #news.detail .close {
      left: auto;
      right: 20px;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      top: 40px; } }
  @media all and (max-width: 600px) {
    #news.detail .close {
      top: 35px; } }
  #news.detail .close p {
    font-family: 'SarabunRegular';
    font-size: 0.875rem;
    margin-right: 15px;
    -webkit-animation: fadeInRight 1s both 1s;
    animation: fadeInRight 1s both 1s; }
    @media all and (max-width: 700px) {
      #news.detail .close p {
        display: none; } }
  #news.detail .close span {
    position: relative;
    width: 45px;
    height: 45px;
    display: block;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
    @media all and (max-width: 600px) {
      #news.detail .close span {
        width: 30px;
        height: 30px; } }
    #news.detail .close span:before, #news.detail .close span:after {
      content: "";
      display: block;
      position: absolute;
      background-color: #9b9b9b; }
    #news.detail .close span:before {
      top: 50%;
      left: 0;
      width: 0;
      height: 1px;
      -webkit-animation: w100 0.8s both .2s;
      animation: w100 0.8s both .2s; }
    #news.detail .close span:after {
      top: 0;
      left: 50%;
      height: 0;
      width: 1px;
      -webkit-animation: h100 0.8s both 0.6s;
      animation: h100 0.8s both 0.6s; }

#news.detail .newsContent {
  max-width: 1580px;
  margin: auto;
  padding: 200px 50px 50px;
  position: relative; }
  @media all and (max-width: 1580px) {
    #news.detail .newsContent {
      padding: 150px 50px 50px; } }
  @media all and (max-width: 1200px) {
    #news.detail .newsContent {
      position: static; } }
  @media all and (max-width: 1000px) {
    #news.detail .newsContent {
      padding: 150px 5vw 50px; } }
  @media all and (max-width: 600px) {
    #news.detail .newsContent {
      padding: 120px 5vw 50px; } }
  #news.detail .newsContent .socialMedia {
    position: fixed;
    top: 210px;
    right: calc(50% + 560px);
    padding: 0 0 100px 0; }
    @media all and (max-width: 1580px) {
      #news.detail .newsContent .socialMedia {
        right: auto;
        left: 50px;
        top: 160px; } }
    @media all and (max-width: 1200px) {
      #news.detail .newsContent .socialMedia {
        position: absolute;
        top: 40px;
        left: auto;
        right: calc(50% + 450px);
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%); } }
    @media all and (max-width: 1100px) {
      #news.detail .newsContent .socialMedia {
        left: 100px;
        right: auto;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0); } }
    @media all and (max-width: 1000px) {
      #news.detail .newsContent .socialMedia {
        left: 5vw; } }
    @media all and (max-width: 600px) {
      #news.detail .newsContent .socialMedia {
        top: 20px; } }
    @media all and (min-width: 1201px) {
      #news.detail .newsContent .socialMedia.bottom {
        position: absolute;
        top: auto;
        bottom: 0; } }
    #news.detail .newsContent .socialMedia:before {
      content: "";
      display: block;
      width: 0%;
      height: 4px;
      background-color: #e72e35;
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-animation: w100 0.6s both .4s;
      animation: w100 0.6s both .4s; }
      @media all and (max-width: 1200px) {
        #news.detail .newsContent .socialMedia:before {
          -webkit-animation: w65 0.5s both .4s;
          animation: w65 0.5s both .4s;
          left: 0;
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0); } }
    #news.detail .newsContent .socialMedia ul {
      padding: 18px 10px; }
      @media all and (max-width: 1200px) {
        #news.detail .newsContent .socialMedia ul {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          padding: 10px 0; } }
      #news.detail .newsContent .socialMedia ul li {
        -webkit-animation: fadeInDown 1s both;
        animation: fadeInDown 1s both; }
        @media all and (max-width: 1200px) {
          #news.detail .newsContent .socialMedia ul li {
            margin: 0 20px 0 0;
            -webkit-animation: fadeInLeft 1s both;
            animation: fadeInLeft 1s both; } }
        #news.detail .newsContent .socialMedia ul li 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;
          padding: 12.5px 10px;
          font-size: 1.25rem;
          color: #9c9c9c;
          -webkit-transition: all .4s ease;
          -o-transition: all .4s ease;
          transition: all .4s ease; }
          @media all and (max-width: 1200px) {
            #news.detail .newsContent .socialMedia ul li a {
              padding: 10px 0; } }
          #news.detail .newsContent .socialMedia ul li a:hover {
            color: #e72e35; }
  #news.detail .newsContent ._title, #news.detail .newsContent .content {
    margin: auto;
    max-width: 1130px;
    padding: 0 115px; }
    @media all and (max-width: 1200px) {
      #news.detail .newsContent ._title, #news.detail .newsContent .content {
        max-width: 1000px;
        padding: 0 50px; } }
    @media all and (max-width: 1000px) {
      #news.detail .newsContent ._title, #news.detail .newsContent .content {
        padding: 0; } }
  #news.detail .newsContent ._title h1 {
    font-family: SarabunRegular, 微軟正黑體;
    font-weight: bold;
    font-size: 1.625rem;
    line-height: 1.5;
    -webkit-animation: fadeInDown 1.2s both;
    animation: fadeInDown 1.2s both; }
    @media all and (max-width: 600px) {
      #news.detail .newsContent ._title h1 {
        font-size: 1.375rem; } }
  #news.detail .newsContent ._title .dateAndType {
    margin: 15px 0 50px;
    -webkit-animation: fadeInDown 1.2s both .4s;
    animation: fadeInDown 1.2s both .4s; }
    #news.detail .newsContent ._title .dateAndType .date {
      font-size: 1rem; }
    #news.detail .newsContent ._title .dateAndType .type {
      font-size: 0.875rem;
      color: #555555; }
  #news.detail .newsContent .content > *:not(:first-child) {
    margin-top: 50px; }
  #news.detail .newsContent .content figure {
    position: relative;
    overflow: hidden;
    display: block; }
    #news.detail .newsContent .content figure.show b {
      -webkit-animation: fadeInUp 1s both 0.8s;
      animation: fadeInUp 1s both 0.8s; }
    #news.detail .newsContent .content figure.show img.b-loaded {
      -webkit-animation: allin 1s both;
      animation: allin 1s both; }
    #news.detail .newsContent .content figure.Left img {
      -webkit-transform: translateX(-101%);
      -ms-transform: translateX(-101%);
      transform: translateX(-101%); }
    #news.detail .newsContent .content figure.Right img {
      -webkit-transform: translateX(101%);
      -ms-transform: translateX(101%);
      transform: translateX(101%); }
    #news.detail .newsContent .content figure.Down img {
      -webkit-transform: translateY(-101%);
      -ms-transform: translateY(-101%);
      transform: translateY(-101%); }
    #news.detail .newsContent .content figure.Up img {
      -webkit-transform: translateY(101%);
      -ms-transform: translateY(101%);
      transform: translateY(101%); }
    #news.detail .newsContent .content figure b {
      display: block;
      font-size: 0.875rem;
      color: #737373;
      margin: 15px 5px 0;
      opacity: 0; }
  #news.detail .newsContent .content ._text {
    overflow: hidden; }
    @media all and (max-width: 1024px) {
      #news.detail .newsContent .content ._text {
        padding: 0 5px; } }
    #news.detail .newsContent .content ._text h6 {
      background-color: #fff;
      font-size: 1.25rem;
      font-weight: bold;
      line-height: 1.5;
      -webkit-animation: fadeInDown 1.2s both;
      animation: fadeInDown 1.2s both; }
    #news.detail .newsContent .content ._text p {
      font-size: 0.9375rem;
      line-height: 2;
      -webkit-animation: fadeInUp 1.2s both .2s;
      animation: fadeInUp 1.2s both .2s; }
      @media all and (max-width: 600px) {
        #news.detail .newsContent .content ._text p {
          margin-top: 15px; } }
  #news.detail .newsContent .content .half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    #news.detail .newsContent .content .half figure, #news.detail .newsContent .content .half ._text {
      width: calc(50% - 10px); }
      @media all and (max-width: 1024px) {
        #news.detail .newsContent .content .half figure, #news.detail .newsContent .content .half ._text {
          width: 100%; } }
    #news.detail .newsContent .content .half figure {
      margin-bottom: 20px; }
      @media all and (max-width: 1024px) {
        #news.detail .newsContent .content .half figure {
          margin-bottom: 15px; } }
    #news.detail .newsContent .content .half ._text {
      padding: 40px 0; }
      #news.detail .newsContent .content .half ._text:nth-child(even) {
        padding: 40px 0 40px 10px; }
      @media all and (max-width: 1024px) {
        #news.detail .newsContent .content .half ._text {
          padding: 40px 5px; } }
      #news.detail .newsContent .content .half ._text p {
        margin-top: 40px; }
        @media all and (max-width: 600px) {
          #news.detail .newsContent .content .half ._text p {
            margin-top: 20px; } }

#news.detail .recommend {
  max-width: 1580px;
  margin: auto;
  padding: 0 50px; }
  @media all and (max-width: 1000px) {
    #news.detail .recommend {
      padding: 0 5vw; } }
  #news.detail .recommend.show ._title .goTop span {
    -webkit-animation: fadeInUp 1s both 1s;
    animation: fadeInUp 1s both 1s; }
  #news.detail .recommend.show ._title .goTop p {
    -webkit-animation: fadeIn 1s both .8s;
    animation: fadeIn 1s both .8s; }
  #news.detail .recommend.show ._title .words:before {
    -webkit-animation: w100 1s both;
    animation: w100 1s both; }
  #news.detail .recommend.show ._title .words p {
    -webkit-animation: fadeInUp .8s both .4s;
    animation: fadeInUp .8s both .4s; }
  #news.detail .recommend.show ._title .words:after {
    -webkit-animation: w100 1s both;
    animation: w100 1s both; }
  #news.detail .recommend.show .slick ul li {
    -webkit-animation: fadeInUp 1s both .4s;
    animation: fadeInUp 1s both .4s; }
  #news.detail .recommend.show .slick .arrows .icon-3 {
    -webkit-animation: fadeInRight 1.2s both .6s;
    animation: fadeInRight 1.2s both .6s; }
  #news.detail .recommend.show .slick .arrows .icon-2 {
    -webkit-animation: fadeInLeft 1.2s both .6s;
    animation: fadeInLeft 1.2s both .6s; }
  #news.detail .recommend ._title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #e83434; }
    #news.detail .recommend ._title .goTop {
      text-align: center;
      cursor: pointer; }
      #news.detail .recommend ._title .goTop span {
        display: block;
        font-size: 1.875rem;
        opacity: 0; }
      #news.detail .recommend ._title .goTop p {
        margin-top: 10px;
        font-size: 0.875rem;
        font-family: 'SarabunRegular';
        opacity: 0; }
    #news.detail .recommend ._title .words {
      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: 100%;
      padding: 25px;
      margin-top: 20px;
      position: relative; }
      @media all and (max-width: 600px) {
        #news.detail .recommend ._title .words {
          padding: 10px; } }
      #news.detail .recommend ._title .words:before, #news.detail .recommend ._title .words:after {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        content: "";
        display: block;
        width: 0%;
        height: 4px;
        background-color: #e83434; }
      #news.detail .recommend ._title .words:before {
        top: 0; }
      #news.detail .recommend ._title .words:after {
        bottom: 0; }
      #news.detail .recommend ._title .words p {
        opacity: 0; }
      #news.detail .recommend ._title .words .en {
        font-size: 1.5rem;
        font-family: 'Alata'; }
      #news.detail .recommend ._title .words .ch {
        font-size: 1.25rem;
        margin-left: 15px; }
  #news.detail .recommend .slick {
    padding: 100px 180px 100px;
    position: relative; }
    @media all and (max-width: 1580px) {
      #news.detail .recommend .slick {
        padding: 100px 10vw 60px; } }
    @media all and (max-width: 1440px) {
      #news.detail .recommend .slick {
        padding: 100px 50px 60px; } }
    @media all and (max-width: 1200px) {
      #news.detail .recommend .slick {
        padding: 100px 10vw 60px; } }
    @media all and (max-width: 600px) {
      #news.detail .recommend .slick {
        padding: 50px 10vw 60px; } }
    #news.detail .recommend .slick ul li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 40px;
      opacity: 0; }
      @media all and (max-width: 1580px) {
        #news.detail .recommend .slick ul li {
          margin: 0 2.5vw; } }
      @media all and (max-width: 1200px) {
        #news.detail .recommend .slick ul li {
          margin: 0 1px; } }
      @media all and (max-width: 600px) {
        #news.detail .recommend .slick ul li {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column; } }
      #news.detail .recommend .slick ul li figure {
        overflow: hidden;
        display: block;
        width: 180px;
        height: 180px;
        position: relative; }
        @media all and (max-width: 600px) {
          #news.detail .recommend .slick ul li figure {
            width: 100%;
            height: auto;
            padding-bottom: 100%; } }
        #news.detail .recommend .slick ul li figure img {
          position: absolute;
          top: 0;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          height: 100%;
          width: auto;
          max-width: unset; }
      #news.detail .recommend .slick ul li ._text {
        padding: 0 0 0 30px;
        position: relative;
        width: calc(100% - 180px); }
        @media all and (max-width: 600px) {
          #news.detail .recommend .slick ul li ._text {
            width: 100%;
            padding: 10px 5px 0; } }
        #news.detail .recommend .slick ul li ._text .dateAndType .type {
          font-size: 0.875rem;
          color: #555555; }
        #news.detail .recommend .slick ul li ._text h6 {
          font-size: 1.25rem;
          margin-top: 20px; }
          @media all and (max-width: 600px) {
            #news.detail .recommend .slick ul li ._text h6 {
              font-size: 1.125rem; } }
        #news.detail .recommend .slick ul li ._text .buttonType1 {
          width: 100px;
          float: right;
          margin-top: 50px; }
          @media all and (max-width: 600px) {
            #news.detail .recommend .slick ul li ._text .buttonType1 {
              margin-top: 20px; } }
          #news.detail .recommend .slick ul li ._text .buttonType1 span {
            height: 1px; }
          #news.detail .recommend .slick ul li ._text .buttonType1 .top {
            width: 100%; }
          #news.detail .recommend .slick ul li ._text .buttonType1:before, #news.detail .recommend .slick ul li ._text .buttonType1:after {
            height: 100%;
            width: 1px; }
          #news.detail .recommend .slick ul li ._text .buttonType1 .bottom:after {
            width: 0; }
          #news.detail .recommend .slick ul li ._text .buttonType1 p {
            font-family: SarabunRegular, 微軟正黑體;
            font-size: 0.75rem;
            padding: 5px 35px;
            -webkit-animation: fadeInUp 0.8s both 0.4s;
            animation: fadeInUp 0.8s both 0.4s; }
    #news.detail .recommend .slick .arrows .icon-3, #news.detail .recommend .slick .arrows .icon-2 {
      position: absolute;
      top: 50%;
      font-size: 1.875rem;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      cursor: pointer; }
      @media all and (max-width: 600px) {
        #news.detail .recommend .slick .arrows .icon-3, #news.detail .recommend .slick .arrows .icon-2 {
          top: calc(35vw + 50px);
          font-size: 1.5rem;
          padding: 0 5px; } }
    #news.detail .recommend .slick .arrows .icon-3 {
      left: 45px; }
      @media all and (max-width: 1440px) {
        #news.detail .recommend .slick .arrows .icon-3 {
          left: 10px; } }
      @media all and (max-width: 600px) {
        #news.detail .recommend .slick .arrows .icon-3 {
          left: -5px; } }
    #news.detail .recommend .slick .arrows .icon-2 {
      right: 45px; }
      @media all and (max-width: 1440px) {
        #news.detail .recommend .slick .arrows .icon-2 {
          right: 10px; } }
      @media all and (max-width: 600px) {
        #news.detail .recommend .slick .arrows .icon-2 {
          right: -5px; } }

@-webkit-keyframes w65 {
  0% {
    width: 0; }
  100% {
    width: 65px; } }

@keyframes w65 {
  0% {
    width: 0; }
  100% {
    width: 65px; } }