@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap);
@font-face{
  font-family:swiper-icons;

  src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");

  font-weight:400;

  font-style:normal
}

:root{
  --swiper-theme-color:#007aff
}

.swiper{
  margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:hidden;
  list-style:none;
  padding:0;
  z-index:1
}

.swiper-vertical>.swiper-wrapper{
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column
}

.swiper-wrapper{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-transition-property:-webkit-transform;
  transition-property:-webkit-transform;
  -o-transition-property:transform;
  transition-property:transform;
  transition-property:transform, -webkit-transform;
  -webkit-box-sizing:content-box;
  box-sizing:content-box
}

.swiper-android .swiper-slide,.swiper-wrapper{
  -webkit-transform:translate3d(0px, 0, 0);
  transform:translate3d(0px, 0, 0)
}

.swiper-pointer-events{
  -ms-touch-action:pan-y;
  touch-action:pan-y
}

.swiper-pointer-events.swiper-vertical{
  -ms-touch-action:pan-x;
  touch-action:pan-x
}

.swiper-slide{
  -webkit-flex-shrink:0;
  -ms-flex-negative:0;
  flex-shrink:0;
  width:100%;
  height:100%;
  position:relative;
  -webkit-transition-property:-webkit-transform;
  transition-property:-webkit-transform;
  -o-transition-property:transform;
  transition-property:transform;
  transition-property:transform, -webkit-transform
}

.swiper-slide-invisible-blank{
  visibility:hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide{
  height:auto
}

.swiper-autoheight .swiper-wrapper{
  -webkit-align-items:flex-start;
  -ms-flex-align:start;
  align-items:flex-start;
  -webkit-transition-property:height,-webkit-transform;
  transition-property:height,-webkit-transform;
  -o-transition-property:transform,height;
  transition-property:transform,height;
  transition-property:transform,height,-webkit-transform
}

.swiper-backface-hidden .swiper-slide{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden
}

.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{
  -webkit-perspective:1200px;
  perspective:1200px
}

.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:10
}

.swiper-3d .swiper-slide-shadow{
  background:rgba(0,0,0,0.15)
}

.swiper-3d .swiper-slide-shadow-left{
  background-image:-webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
  background-image:-o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image:linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-right{
  background-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
  background-image:-o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-top{
  background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
  background-image:-o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image:linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-bottom{
  background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
  background-image:-o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0));
  background-image:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0))
}

.swiper-css-mode>.swiper-wrapper{
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{
  display:none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide{
  scroll-snap-align:start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper{
  -webkit-scroll-snap-type:x mandatory;
  -ms-scroll-snap-type:x mandatory;
  scroll-snap-type:x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper{
  -webkit-scroll-snap-type:y mandatory;
  -ms-scroll-snap-type:y mandatory;
  scroll-snap-type:y mandatory
}

.swiper-centered>.swiper-wrapper::before{
  content:'';
  -webkit-flex-shrink:0;
  -ms-flex-negative:0;
  flex-shrink:0;
  -webkit-order:9999;
  -ms-flex-order:9999;
  order:9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{
  -webkit-margin-start:var(--swiper-centered-offset-before);
  margin-inline-start:var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper::before{
  height:100%;
  min-height:1px;
  width:var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{
  -webkit-margin-before:var(--swiper-centered-offset-before);
  margin-block-start:var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper::before{
  width:100%;
  min-width:1px;
  height:var(--swiper-centered-offset-after)
}

.swiper-centered>.swiper-wrapper>.swiper-slide{
  scroll-snap-align:center center
}

.swiper-virtual .swiper-slide{
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  pointer-events:none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{
  height:1px;
  width:var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{
  width:1px;
  height:var(--swiper-virtual-size)
}

:root{
  --swiper-navigation-size:44px
}

.swiper-button-next,.swiper-button-prev{
  position:absolute;
  top:50%;
  width:calc(44px/ 44 * 27);
  width:calc(var(--swiper-navigation-size)/ 44 * 27);
  height:44px;
  height:var(--swiper-navigation-size);
  margin-top:calc(0px - (44px/ 2));
  margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));
  z-index:10;
  cursor:pointer;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  color:var(--swiper-theme-color);
  color:var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{
  opacity:.35;
  cursor:auto;
  pointer-events:none
}

.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{
  opacity:0;
  cursor:auto;
  pointer-events:none
}

.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{
  display:none !important
}

.swiper-button-next:after,.swiper-button-prev:after{
  font-family:swiper-icons;
  font-size:44px;
  font-size:var(--swiper-navigation-size);
  text-transform:none !important;
  letter-spacing:0;
  -webkit-font-feature-settings:normal, ;
  font-feature-settings:normal, ;
  font-variant:normal;
  font-variant:initial;
  line-height:1
}

.swiper-button-prev,.swiper-rtl .swiper-button-next{
  left:10px;
  right:auto
}

.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{
  content:'prev'
}

.swiper-button-next,.swiper-rtl .swiper-button-prev{
  right:10px;
  left:auto
}

.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{
  content:'next'
}

.swiper-button-lock{
  display:none
}

.swiper-pagination{
  position:absolute;
  text-align:center;
  -webkit-transition:.3s opacity;
  -o-transition:.3s opacity;
  transition:.3s opacity;
  -webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  z-index:10
}

.swiper-pagination.swiper-pagination-hidden{
  opacity:0
}

.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{
  display:none !important
}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{
  bottom:10px;
  left:0;
  width:100%
}

.swiper-pagination-bullets-dynamic{
  overflow:hidden;
  font-size:0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  -webkit-transform:scale(0.33);
  -ms-transform:scale(0.33);
  transform:scale(0.33);
  position:relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{
  -webkit-transform:scale(0.66);
  -ms-transform:scale(0.66);
  transform:scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{
  -webkit-transform:scale(0.33);
  -ms-transform:scale(0.33);
  transform:scale(0.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{
  -webkit-transform:scale(0.66);
  -ms-transform:scale(0.66);
  transform:scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{
  -webkit-transform:scale(0.33);
  -ms-transform:scale(0.33);
  transform:scale(0.33)
}

.swiper-pagination-bullet{
  width:8px;
  width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height:8px;
  height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display:inline-block;
  border-radius:50%;
  background:#000;
  background:var(--swiper-pagination-bullet-inactive-color, #000);
  opacity:0.2;
  opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)
}

button.swiper-pagination-bullet{
  border:none;
  margin:0;
  padding:0;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}

.swiper-pagination-clickable .swiper-pagination-bullet{
  cursor:pointer
}

.swiper-pagination-bullet:only-child{
  display:none !important
}

.swiper-pagination-bullet-active{
  opacity:1;
  opacity:var(--swiper-pagination-bullet-opacity, 1);
  background:var(--swiper-theme-color);
  background:var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{
  right:10px;
  top:50%;
  -webkit-transform:translate3d(0px, -50%, 0);
  transform:translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin:6px 0;
  margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display:block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  width:8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  display:inline-block;
  -webkit-transition:.2s transform,.2s top;
  -o-transition:.2s transform,.2s top;
  transition:.2s transform,.2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin:0 4px;
  margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
  left:50%;
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  transform:translateX(-50%);
  white-space:nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  -webkit-transition:.2s transform,.2s left;
  -o-transition:.2s transform,.2s left;
  transition:.2s transform,.2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  -webkit-transition:.2s transform,.2s right;
  -o-transition:.2s transform,.2s right;
  transition:.2s transform,.2s right
}

.swiper-pagination-progressbar{
  background:rgba(0,0,0,0.25);
  position:absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background:var(--swiper-theme-color);
  background:var(--swiper-pagination-color, var(--swiper-theme-color));
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-transform:scale(0);
  -ms-transform:scale(0);
  transform:scale(0);
  -webkit-transform-origin:left top;
  -ms-transform-origin:left top;
  transform-origin:left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  -webkit-transform-origin:right top;
  -ms-transform-origin:right top;
  transform-origin:right top
}

.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
  width:100%;
  height:4px;
  left:0;
  top:0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{
  width:4px;
  height:100%;
  left:0;
  top:0
}

.swiper-pagination-lock{
  display:none
}

.swiper-scrollbar{
  border-radius:10px;
  position:relative;
  -ms-touch-action:none;
  background:rgba(0,0,0,0.1)
}

.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{
  display:none !important
}

.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{
  position:absolute;
  left:1%;
  bottom:3px;
  z-index:50;
  height:5px;
  width:98%
}

.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{
  position:absolute;
  right:3px;
  top:1%;
  z-index:50;
  width:5px;
  height:98%
}

.swiper-scrollbar-drag{
  height:100%;
  width:100%;
  position:relative;
  background:rgba(0,0,0,0.5);
  border-radius:10px;
  left:0;
  top:0
}

.swiper-scrollbar-cursor-drag{
  cursor:move
}

.swiper-scrollbar-lock{
  display:none
}

.swiper-zoom-container{
  width:100%;
  height:100%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  text-align:center
}

.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{
  max-width:100%;
  max-height:100%;
  -o-object-fit:contain;
  object-fit:contain
}

.swiper-slide-zoomed{
  cursor:move
}

.swiper-lazy-preloader{
  width:42px;
  height:42px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-21px;
  margin-top:-21px;
  z-index:10;
  -webkit-transform-origin:50%;
  -ms-transform-origin:50%;
  transform-origin:50%;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border:4px solid var(--swiper-theme-color);
  border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius:50%;
  border-top-color:transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{
  -webkit-animation:swiper-preloader-spin 1s infinite linear;
  animation:swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white{
  --swiper-preloader-color:#fff
}

.swiper-lazy-preloader-black{
  --swiper-preloader-color:#000
}

@-webkit-keyframes swiper-preloader-spin{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }

  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}

@keyframes swiper-preloader-spin{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
  }

  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}

.swiper .swiper-notification{
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  opacity:0;
  z-index:-1000
}

.swiper-free-mode>.swiper-wrapper{
  -webkit-transition-timing-function:ease-out;
  -o-transition-timing-function:ease-out;
  transition-timing-function:ease-out;
  margin:0 auto
}

.swiper-grid>.swiper-wrapper{
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
}

.swiper-grid-column>.swiper-wrapper{
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column
}

.swiper-fade.swiper-free-mode .swiper-slide{
  -webkit-transition-timing-function:ease-out;
  -o-transition-timing-function:ease-out;
  transition-timing-function:ease-out
}

.swiper-fade .swiper-slide{
  pointer-events:none;
  -webkit-transition-property:opacity;
  -o-transition-property:opacity;
  transition-property:opacity
}

.swiper-fade .swiper-slide .swiper-slide{
  pointer-events:none
}

.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{
  pointer-events:auto
}

.swiper-cube{
  overflow:visible
}

.swiper-cube .swiper-slide{
  pointer-events:none;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  z-index:1;
  visibility:hidden;
  -webkit-transform-origin:0 0;
  -ms-transform-origin:0 0;
  transform-origin:0 0;
  width:100%;
  height:100%
}

.swiper-cube .swiper-slide .swiper-slide{
  pointer-events:none
}

.swiper-cube.swiper-rtl .swiper-slide{
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin:100% 0
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{
  pointer-events:auto
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{
  pointer-events:auto;
  visibility:visible
}

.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{
  z-index:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden
}

.swiper-cube .swiper-cube-shadow{
  position:absolute;
  left:0;
  bottom:0px;
  width:100%;
  height:100%;
  opacity:.6;
  z-index:0
}

.swiper-cube .swiper-cube-shadow:before{
  content:'';
  background:#000;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  -webkit-filter:blur(50px);
  filter:blur(50px)
}

.swiper-flip{
  overflow:visible
}

.swiper-flip .swiper-slide{
  pointer-events:none;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  z-index:1
}

.swiper-flip .swiper-slide .swiper-slide{
  pointer-events:none
}

.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{
  pointer-events:auto
}

.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{
  z-index:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden
}

.swiper-creative .swiper-slide{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
  -webkit-transition-property:opacity,height,-webkit-transform;
  transition-property:opacity,height,-webkit-transform;
  -o-transition-property:transform,opacity,height;
  transition-property:transform,opacity,height;
  transition-property:transform,opacity,height,-webkit-transform
}

.swiper-cards{
  overflow:visible
}

.swiper-cards .swiper-slide{
  -webkit-transform-origin:center bottom;
  -ms-transform-origin:center bottom;
  transform-origin:center bottom;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #a0aec0;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #a0aec0;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a0aec0;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #a0aec0;
}

input::placeholder,
textarea::placeholder {
  color: #a0aec0;
}

button,
[role="button"] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

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

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

.tw-container{
  width: 100%;
}

@media (min-width: 640px){
  .tw-container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .tw-container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .tw-container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .tw-container{
    max-width: 1280px;
  }
}

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

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

@-webkit-keyframes ping{
  75%, 100%{
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping{
  75%, 100%{
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes pulse{
  50%{
    opacity: .5;
  }
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

@-webkit-keyframes bounce{
  0%, 100%{
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50%{
    -webkit-transform: none;
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

@keyframes bounce{
  0%, 100%{
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50%{
    -webkit-transform: none;
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

body{
  background-color:#f5f5f5 !important
}

.footer-tnc ul{
  list-style:inherit !important;
  padding-left:15px
}

.isD2G .d2g{
  display:block !important
}

.isD2G .d2g.tw-flex{
  display:-webkit-flex !important;
  display:-ms-flexbox !important;
  display:flex !important
}

.isD2G .p2g{
  display:none !important
}

.isD2G .daasc{
  display:none !important
}

.isDaaSC .d2g{
  display:none !important
}

.isDaaSC .p2g{
  display:none !important
}

.isDaaSC .daasc{
  display:block !important
}

.isDaaSC .daasc.tw-flex{
  display:-webkit-flex !important;
  display:-ms-flexbox !important;
  display:flex !important
}

.isDaaSC .lan_area{
  display:none !important
}

.isP2G .d2g{
  display:none !important
}

.isP2G .p2g{
  display:block !important
}

.isP2G .p2g.tw-flex{
  display:-webkit-flex !important;
  display:-ms-flexbox !important;
  display:flex !important
}

.isP2G .daasc{
  display:none !important
}

body{
  font-family:"Microsoft JhengHei","微軟正黑體","PingFang HK","Noto Sans CJK TC","Arial","Helvetica Neue","Noto Sans","Helvetica","sans-serif",-apple-system, system-ui !important
}

.desktop{
  display:block !important
}

.mobile{
  display:none !important
}

.landing-section{
  padding-bottom:40px;
  background-repeat:no-repeat;
  background-size:cover
}

.landing-section .title{
  font-weight:700;
  font-size:60px;
  line-height:150%;
  letter-spacing:0;
  color:#008A41;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  grid-gap:15px;
  gap:15px;
  margin-bottom:30px;
  margin-top:50px
}

.landing-section .org-instruction{
  width:80%;
  max-width:790px;
  border-radius:16px;
  border:1px solid #EA913E;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:stretch;
  -ms-flex-align:stretch;
  align-items:stretch;
  overflow:hidden;
  margin:auto auto 20px
}

.landing-section .org-instruction .left,.landing-section .org-instruction .right{
  padding:8px
}

.landing-section .org-instruction .left{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  background-color:#EA913E
}

.landing-section .org-instruction .right{
  color:#DB6B00;
  text-align:center;
  background-color:#FEFFE9;
  font-weight:400;
  font-size:22px;
  line-height:140%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-flex:1 1;
  -ms-flex:1 1;
  flex:1 1
}

.landing-section .line{
  width:120px;
  height:5px;
  border-radius:10px;
  background-color:#008A41
}

.landing-section .content{
  font-weight:500;
  font-size:30px;
  line-height:150%;
  letter-spacing:0;
  text-align:center;
  color:#14463C;
  margin-bottom:40px
}

.entry-container{
  max-width:1060px;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  grid-gap:50px;
  gap:50px;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  margin:auto
}

.journey-card{
  width:280px;
  height:240px;
  -webkit-box-shadow:5px 5px 20px 0 #3CB21E26;
  box-shadow:5px 5px 20px 0 #3CB21E26;
  grid-gap:18px;
  gap:18px;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  border-radius:20px;
  padding:15px;
  cursor:pointer;
  background-color:#FEFFFD
}

.journey-card .upper{
  width:100%;
  padding:5px 0;
  border-radius:10px;
  height:125px;
  background-color:#FAFBEC;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center
}

.journey-card .upper .icon-wrapper{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center
}

.journey-card .upper .icon-wrapper .caption{
  color:#01544D;
  font-weight:600;
  font-size:20px;
  line-height:125%;
  letter-spacing:0;
  margin-top:10px
}

.journey-card .lower .description{
  font-weight:400;
  font-size:18px;
  line-height:150%;
  letter-spacing:0;
  text-align:center;
  color:#555555
}

.text-container{
  padding:50px 100px;
  text-underline-offset:3px
}

.notes{
  font-size:16px;
  font-weight:300;
  line-height:180%;
  letter-spacing:0;
  margin-bottom:24px
}

.notes ol{
  list-style:decimal;
  padding-left:20px
}

.statement-container{
  border:0.5px solid #000000;
  padding:10px
}

.statement-container .title{
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
  font-size:16px;
  font-weight:500;
  line-height:180%;
  letter-spacing:0;
  text-decoration:underline
}

.statement-container .section .subtitle{
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
  font-size:16px;
  font-weight:400;
  line-height:180%;
  letter-spacing:0;
  text-decoration:underline
}

.statement-container .section .content{
  font-size:16px;
  font-weight:300;
  line-height:180%;
  letter-spacing:0
}

.statement-container .section1{
  margin-bottom:30px
}

.dev-step-menu{
  border:1px solid black;
  margin:20px;
  display:none
}

.dev-step-menu .dev-note{
  padding:0 10px;
  font-size:20px;
  font-weight:bold
}

.dev-step-menu .dev-step-menu-wrapper{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  grid-gap:30px;
  gap:30px;
  margin:10px
}

.dev-step-menu .dev-step-menu-wrapper .dev-step-btn{
  border:1px solid blue;
  border-radius:4px;
  padding:4px 10px;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  cursor:pointer
}

.dev-step-menu .dev-step-menu-wrapper .dev-step-btn:hover{
  background-color:lightblue
}

main,#wrap,.container-fluid,.main-container{
  height:100%;
  font-family:"Microsoft JhengHei","微軟正黑體","PingFang HK","Noto Sans CJK TC","Arial","Helvetica Neue","Noto Sans","Helvetica","sans-serif",-apple-system, system-ui !important;
  overflow:hidden
}

main.landing{
  height:auto
}

.container-fluid{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column
}

.main-container{
  width:100%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center
}

.dummyEntryBtn{
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
  border:3px solid black;
  padding:10px;
  margin:10px;
  border-radius:10px
}

#phone-container{
  position:relative;
  overflow-x:hidden;
  overflow-y:hidden;
  height:calc(400px * 145/67);
  width:100%;
  max-width:400px;
  margin-top:10px;
  -ms-overflow-style:none;
  scrollbar-width:none
}

#phone-container::-webkit-scrollbar{
  display:none
}

.step{
  position:absolute;
  top:0;
  display:none;
  width:100%
}

.step.scroll{
  position:-webkit-sticky;
  position:sticky;
  margin-top:-1000px
}

.step.active{
  display:block
}

.guide{
  z-index:-2;
  position:absolute;
  border-radius:10px;
  border:3px solid #96d200;
  cursor:pointer;
  opacity:0
}

.guide.active{
  -webkit-animation:shine 2s ease-in-out infinite;
  animation:shine 2s ease-in-out infinite
}

.instruction{
  position:absolute;
  padding:12px 20px 12px 8px;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  grid-gap:7px;
  gap:7px;
  border-radius:8px;
  background-color:#7FC300;
  color:#ffffff;
  z-index:-10;
  left:50%;
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  transform:translateX(-50%);
  width:94%;
  opacity:0;
  -webkit-transition:opacity 0.3s ease-in-out;
  -o-transition:opacity 0.3s ease-in-out;
  transition:opacity 0.3s ease-in-out;
  font-weight:400;
  font-size:16px;
  line-height:100%;
  letter-spacing:0
}

.instruction.active{
  z-index:10;
  opacity:1
}

.show-more-btn{
  -webkit-box-shadow:4px 4px 16px 0px #82B40680;
  box-shadow:4px 4px 16px 0px #82B40680;
  padding:10px 20px;
  cursor:pointer;
  opacity:0;
  z-index:-10;
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content
}

.show-more-btn.active{
  opacity:1;
  z-index:10;
  -webkit-transition:opacity 0.5s ease-in-out;
  -o-transition:opacity 0.5s ease-in-out;
  transition:opacity 0.5s ease-in-out
}

.custom-buttons{
  position:absolute;
  z-index:10;
  top:3px;
  margin-left:1%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  width:100%;
  -webkit-justify-content:flex-start;
  -ms-flex-pack:start;
  justify-content:flex-start;
  -webkit-align-items:flex-end;
  -ms-flex-align:end;
  align-items:flex-end;
  grid-gap:10px;
  gap:10px;
  background-color:transparent
}

.custom-buttons.sticky{
  position:-webkit-sticky;
  position:sticky
}

.custom-button{
  cursor:pointer
}

.custom-button.grey{
  border-radius:6px;
  background-color:#F2F2F2;
  color:#6D6D6D;
  padding:10px;
  height:-webkit-max-content;
  height:-moz-max-content;
  height:max-content;
  font-weight:500;
  font-size:14px;
  line-height:100%;
  letter-spacing:0
}

.custom-button.grey.active{
  background-color:white
}

.custom-button.green{
  background-color:#7FC300;
  border-radius:6px;
  color:#ffffff;
  padding:13px 20px;
  font-weight:500;
  font-size:16px;
  line-height:100%;
  letter-spacing:0
}

.finish-modal{
  width:62%;
  position:absolute;
  top:63.5%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:-10;
  padding:24px 20px;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  grid-gap:20px;
  gap:20px;
  border-radius:10px;
  border:3px solid #7FC300;
  -webkit-box-shadow:4px 4px 16px 0px #82B40680;
  box-shadow:4px 4px 16px 0px #82B40680;
  background-color:#ffffff;
  opacity:0;
  font-weight:500;
  font-size:17px;
  line-height:100%;
  letter-spacing:0;
  text-align:center;
  -webkit-transition:opacity 0.3s ease-in-out;
  -o-transition:opacity 0.3s ease-in-out;
  transition:opacity 0.3s ease-in-out
}

.finish-modal.active{
  z-index:10;
  opacity:1;
  -webkit-transition:opacity 0.5s ease-in-out;
  -o-transition:opacity 0.5s ease-in-out;
  transition:opacity 0.5s ease-in-out
}

.modal-message{
  text-align:center
}

.journey1 #instruction1{
  bottom:11%
}

.journey1 #instruction13{
  bottom:52%
}

.journey1 #guide1{
  width:17%;
  height:7%;
  top:90%;
  left:28.7%
}

.journey1 #guide2{
  width:25%;
  height:14%;
  top:25%;
  left:2.5%
}

.journey1 #guide3{
  width:95.5%;
  height:10.5%;
  top:12%;
  left:3%
}

.journey1 #guide4{
  width:95%;
  height:6.5%;
  top:15.5%;
  left:3%
}

.journey1 #guide5{
  width:96%;
  height:5%;
  top:16%;
  left:2%
}

.journey1 #guide6{
  width:15%;
  height:5.1%;
  top:60.4%;
  left:84%
}

.journey1 #guide7{
  width:95%;
  height:9%;
  top:22%;
  left:2%
}

.journey1 #guide8{
  width:88.9%;
  height:8%;
  top:32%;
  left:5.5%
}

.journey1 #guide9{
  width:14%;
  height:5.5%;
  top:55%;
  left:84.5%
}

.journey1 #guide10{
  width:96%;
  height:8%;
  top:87.5%;
  left:2%
}

.journey1 #guide11{
  width:32%;
  height:6.5%;
  top:22.5%;
  left:34%
}

.journey1 #guide12{
  width:14%;
  height:5.6%;
  top:60.1%;
  left:84.5%
}

.journey1 #guide13{
  width:97%;
  height:14%;
  top:27%;
  left:2%
}

.journey1 #guide14{
  width:96%;
  height:8%;
  top:87.5%;
  left:2%
}

.journey1 #guide15{
  width:42.6%;
  height:7.7%;
  top:57.5%;
  left:49.5%
}

.journey1 #guide16{
  width:97%;
  height:7.8%;
  top:87.5%;
  left:1.5%
}

.journey1 #guide17{
  width:19%;
  height:19%;
  top:19%;
  left:19%
}

.journey2 #instruction1{
  bottom:11%
}

.journey2 #instruction4{
  top:25%
}

.journey2 #instruction8{
  top:26%
}

.journey2 #instruction14{
  top:68%
}

.journey2 #showMoreBtn22{
  bottom:15%
}

.journey2 #showMoreBtn26{
  bottom:7%
}

.journey2 #finish-modal27{
  top:69%
}

.journey2 #guide1{
  width:17%;
  height:7.5%;
  top:90%;
  left:28.7%
}

.journey2 #guide2{
  width:43%;
  height:7%;
  top:17%;
  left:51.7%
}

.journey2 #guide3{
  width:26%;
  height:12%;
  top:24.5%;
  left:25.7%
}

.journey2 #guide4{
  width:96%;
  height:8%;
  top:15%;
  left:1.7%
}

.journey2 #guide5{
  width:96%;
  height:8%;
  top:24.3%;
  left:1.7%
}

.journey2 #guide6{
  width:98%;
  height:7%;
  top:10.5%;
  left:1.7%
}

.journey2 #guide7{
  width:97%;
  height:6.3%;
  top:83.5%;
  left:1.7%
}

.journey2 #guide8{
  width:96%;
  height:7.4%;
  top:15.4%;
  left:1.9%
}

.journey2 #guide9{
  width:17%;
  height:5.4%;
  top:60.3%;
  left:82.7%
}

.journey2 #guide10{
  left:2%;
  top:31.6%;
  height:7.5%;
  width:96%
}

.journey2 #guide11{
  width:17%;
  height:5.4%;
  top:60.3%;
  left:82.7%
}

.journey2 #guide12{
  left:2%;
  top:45.2%;
  height:7.5%;
  width:96%
}

.journey2 #guide13{
  width:17%;
  height:5.4%;
  top:54.8%;
  left:82.7%
}

.journey2 #guide14{
  left:2%;
  top:58.8%;
  height:7.6%;
  width:96%
}

.journey2 #guide15{
  left:2%;
  top:87.7%;
  height:7.6%;
  width:96%
}

.journey2 #guide16{
  left:2%;
  top:10.7%;
  height:7.6%;
  width:96%
}

.journey2 #guide17{
  left:1%;
  top:38.4%;
  height:7.6%;
  width:98%
}

.journey2 #guide18{
  width:17%;
  height:5.4%;
  top:60.3%;
  left:82.7%
}

.journey2 #guide19{
  left:2%;
  top:87.5%;
  height:7.6%;
  width:96%
}

.journey2 #guide20{
  left:2%;
  top:54%;
  height:7.7%;
  width:96%
}

.journey2 #guide21{
  width:17%;
  height:5.4%;
  top:60.3%;
  left:82.7%
}

.journey2 #guide22{
  left:2%;
  top:138%;
  height:7.5%;
  width:96%
}

.journey2 #guide23{
  left:1%;
  top:15.4%;
  height:7.6%;
  width:98%
}

.journey2 #guide24{
  width:17%;
  height:5.4%;
  top:55%;
  left:82.7%
}

.journey2 #guide25{
  left:2%;
  top:87.5%;
  height:7.7%;
  width:96%
}

.journey2 #guide26{
  left:2%;
  top:140.8%;
  height:7.7%;
  width:96%
}

.journey2 #guide27{
  width:17%;
  height:7%;
  top:90%;
  left:54.7%
}

.journey2 #guide28{
  width:17%;
  height:7%;
  top:90%;
  left:55.7%
}

.journey3 #finish-modal19{
  top:72%
}

.journey3 #instruction1{
  bottom:11%
}

.journey3 #instruction5{
  top:23%
}

.journey3 #instruction12{
  top:31%
}

.journey3 #instruction15{
  top:49%
}

.journey3 #guide1{
  width:17%;
  height:7%;
  top:90%;
  left:28.7%
}

.journey3 #guide2{
  width:25%;
  height:14%;
  top:25%;
  left:2.5%
}

.journey3 #guide3{
  width:95.5%;
  height:10.5%;
  top:12%;
  left:3%
}

.journey3 #guide4{
  width:95%;
  height:6.8%;
  top:39%;
  left:3%
}

.journey3 #guide5{
  width:96%;
  height:9.5%;
  top:11.2%;
  left:2%
}

.journey3 #guide6{
  width:96%;
  height:7.5%;
  top:22.2%;
  left:2%
}

.journey3 #guide7{
  width:15%;
  height:5.1%;
  top:60.4%;
  left:84%
}

.journey3 #guide8{
  width:96%;
  height:8%;
  top:32.2%;
  left:2%
}

.journey3 #guide9{
  width:14%;
  height:5.5%;
  top:55%;
  left:84.5%
}

.journey3 #guide10{
  width:96%;
  height:8%;
  top:42.5%;
  left:2%
}

.journey3 #guide11{
  width:96%;
  height:8%;
  top:87.5%;
  left:2%
}

.journey3 #guide12{
  width:42%;
  height:7%;
  top:22.5%;
  left:28.7%
}

.journey3 #guide13{
  width:31%;
  height:7%;
  top:22.5%;
  left:33.7%
}

.journey3 #guide14{
  width:15%;
  height:5.1%;
  top:60.4%;
  left:84%
}

.journey3 #guide15{
  width:96%;
  height:15%;
  top:32.5%;
  left:2%
}

.journey3 #guide16{
  width:96%;
  height:7.5%;
  top:88.3%;
  left:2%
}

.journey3 #guide17{
  width:42.5%;
  height:7.5%;
  top:57.5%;
  left:49.7%
}

.journey3 #guide18{
  width:96%;
  height:7.5%;
  top:88%;
  left:2%
}

.journey4 #instruction1{
  top:11%
}

.journey4 #instruction4{
  top:29.2%
}

.journey4 #instruction6{
  top:38.2%
}

.journey4 #instruction7{
  top:42%
}

.journey4 #instruction8{
  top:40%
}

.journey4 #instruction9{
  top:53%
}

.journey4 #instruction10{
  top:65%
}

.journey4 #instruction11{
  top:80.5%
}

.journey4 #showMoreBtn13{
  top:78.5%
}

.journey4 #finish-modal14{
  top:73.5%
}

.journey4 #guide1{
  width:9.3%;
  height:4.4%;
  top:6%;
  left:1.7%
}

.journey4 #guide2{
  width:71%;
  height:6%;
  top:42.7%;
  left:16.7%
}

.journey4 #guide3{
  width:93%;
  height:9%;
  top:22.5%;
  left:3.7%
}

.journey4 #guide4{
  width:91%;
  height:8.3%;
  top:19%;
  left:4.7%
}

.journey4 #guide5{
  width:14%;
  height:5.1%;
  top:56.8%;
  left:82%
}

.journey4 #guide6{
  width:91%;
  height:8.3%;
  top:28%;
  left:4.7%
}

.journey4 #guide7{
  width:96.5%;
  height:10.8%;
  top:29.5%;
  left:1.7%
}

.journey4 #guide8{
  width:96.5%;
  height:13%;
  top:25.5%;
  left:1.7%
}

.journey4 #guide9{
  width:96.5%;
  height:11.5%;
  top:39.5%;
  left:1.7%
}

.journey4 #guide10{
  width:96.5%;
  height:10.8%;
  top:52%;
  left:1.7%
}

.journey4 #guide11{
  width:96.5%;
  height:16.8%;
  top:62.5%;
  left:1.7%
}

.journey4 #guide12{
  width:96%;
  height:7.6%;
  top:87.5%;
  left:2%
}

.journey4 #guide13{
  width:96%;
  height:7.6%;
  top:112%;
  left:2%
}

.journey5 #instruction1{
  top:11%
}

.journey5 #instruction3{
  top:32.2%
}

.journey5 #instruction4{
  top:42.2%
}

.journey5 #finish-modal9{
  top:74.5%
}

.journey5 #guide1{
  width:9.3%;
  height:4.4%;
  top:6%;
  left:1.7%
}

.journey5 #guide2{
  width:71%;
  height:6%;
  top:55.7%;
  left:16.7%
}

.journey5 #guide3{
  width:97%;
  height:10%;
  top:21.5%;
  left:1.7%
}

.journey5 #guide4{
  width:97%;
  height:10%;
  top:31%;
  left:1.7%
}

.journey5 #guide5{
  width:97%;
  height:8.5%;
  top:41.5%;
  left:1.7%
}

.journey5 #guide6{
  width:15%;
  height:5.4%;
  top:60.2%;
  left:84%
}

.journey5 #guide7{
  width:96.1%;
  height:7.6%;
  top:87.4%;
  left:2%
}

.journey5 #guide8{
  width:96.1%;
  height:7.6%;
  top:87.4%;
  left:2%
}

.journey5 #guide9{
  width:96.5%;
  height:11.5%;
  top:39.5%;
  left:1.7%
}

.journey5 #guide10{
  width:96.5%;
  height:10.8%;
  top:52%;
  left:1.7%
}

.journey5 #guide11{
  width:96.5%;
  height:16.8%;
  top:62.5%;
  left:1.7%
}

.journey5 #guide12{
  width:96%;
  height:7.6%;
  top:87.5%;
  left:2%
}

.journey5 #guide13{
  width:96%;
  height:7.6%;
  top:112%;
  left:2%
}

@-webkit-keyframes shine{
  0%{
    opacity:1
  }

  50%{
    opacity:0.3
  }

  100%{
    opacity:1
  }
}

@keyframes shine{
  0%{
    opacity:1
  }

  50%{
    opacity:0.3
  }

  100%{
    opacity:1
  }
}

#wrap{
  max-width:100%
}

img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges
}

@media (min-width: 900px) and (min-height: 900px){
  .dev-step-menu{
    display:block
  }
}

@media (max-width: 768px){
  .text-container{
    padding:20px
  }
}

@media (max-width: 1000px){
  .landing-section .title{
    font-size:45px;
    line-height:150%
  }

  .landing-section .line{
    width:60px;
    height:4px
  }

  .landing-section .content{
    font-size:24px
  }
}

@media (max-width: 700px){
  .landing-section .title{
    font-size:24px;
    margin-top:40px
  }

  .landing-section .org-instruction .right{
    color:#EA913E;
    text-align:center;
    background-color:#FEFFE9;
    font-weight:400;
    font-size:14px;
    line-height:140%;
    -webkit-flex:1 1;
    -ms-flex:1 1;
    flex:1 1
  }

  .landing-section .line{
    width:30px;
    height:2px
  }

  .landing-section .content{
    font-size:18px;
    line-height:150%;
    padding:0 70px;
    margin-bottom:20px
  }

  .desktop{
    display:none !important
  }

  .mobile{
    display:block !important
  }
}

@media (min-width: 640px){
  .sm\:tw-container{
    width: 100%;
  }

  @media (min-width: 640px){
    .sm\:tw-container{
      max-width: 640px;
    }
  }

  @media (min-width: 768px){
    .sm\:tw-container{
      max-width: 768px;
    }
  }

  @media (min-width: 1024px){
    .sm\:tw-container{
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px){
    .sm\:tw-container{
      max-width: 1280px;
    }
  }
}

@media (min-width: 768px){
  .md\:tw-container{
    width: 100%;
  }

  @media (min-width: 640px){
    .md\:tw-container{
      max-width: 640px;
    }
  }

  @media (min-width: 768px){
    .md\:tw-container{
      max-width: 768px;
    }
  }

  @media (min-width: 1024px){
    .md\:tw-container{
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px){
    .md\:tw-container{
      max-width: 1280px;
    }
  }
}

@media (min-width: 1024px){
  .lg\:tw-container{
    width: 100%;
  }

  @media (min-width: 640px){
    .lg\:tw-container{
      max-width: 640px;
    }
  }

  @media (min-width: 768px){
    .lg\:tw-container{
      max-width: 768px;
    }
  }

  @media (min-width: 1024px){
    .lg\:tw-container{
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px){
    .lg\:tw-container{
      max-width: 1280px;
    }
  }
}

@media (min-width: 1280px){
  .xl\:tw-container{
    width: 100%;
  }

  @media (min-width: 640px){
    .xl\:tw-container{
      max-width: 640px;
    }
  }

  @media (min-width: 768px){
    .xl\:tw-container{
      max-width: 768px;
    }
  }

  @media (min-width: 1024px){
    .xl\:tw-container{
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px){
    .xl\:tw-container{
      max-width: 1280px;
    }
  }
}