@charset "UTF-8";
/*
	arrows 方向箭頭
	.arrows-top { @include arrows($direction: top); }
	.arrows-right { @include arrows($direction: right); }
	.arrows-bottom { @include arrows($direction: bottom); }
	.arrows-left { @include arrows($direction: left); }
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/*
	shadow
*/
/* CSS Document */
/*
	form-wrong
*/
/*
	form-animation
*/
/*
  media cellphone	
  @include media-tablet { ... }
*/
/*
  media tablet	
  @include media-tablet { ... }
*/
/*
  media mobile (cellphone、tablet)	
  @include media-mobile { ... }
*/
/*
  media laptops、desktop
  @include media-desktop { ... }
*/
/*
	CSS content property 支援 Font Awesome 5
*/
/*
	Cumulative Layout Shift 優化元素偏離移動
*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 提取
*/
/*@function map-pull($map, $key1, $key2) {
	$value: map-get(map-get($map, $key1), $key2);
	
	@return $value;
}*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 多層次 map 合併
*/
/*
	擴充 (map)$default 資料，優先載入 (map)$options 資料
	$default
	$options
*/
/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
/*
	arrows 方向箭頭
	.arrows-top { @include arrows($direction: top); }
	.arrows-right { @include arrows($direction: right); }
	.arrows-bottom { @include arrows($direction: bottom); }
	.arrows-left { @include arrows($direction: left); }
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/*
	shadow
*/
/* CSS Document */
/*
	form-wrong
*/
/*
	form-animation
*/
/*
  media cellphone	
  @include media-tablet { ... }
*/
/*
  media tablet	
  @include media-tablet { ... }
*/
/*
  media mobile (cellphone、tablet)	
  @include media-mobile { ... }
*/
/*
  media laptops、desktop
  @include media-desktop { ... }
*/
/*
	CSS content property 支援 Font Awesome 5
*/
/*
	Cumulative Layout Shift 優化元素偏離移動
*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 提取
*/
/*@function map-pull($map, $key1, $key2) {
	$value: map-get(map-get($map, $key1), $key2);
	
	@return $value;
}*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 多層次 map 合併
*/
/*
	擴充 (map)$default 資料，優先載入 (map)$options 資料
	$default
	$options
*/
/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
/* border */
.border {
  border: #dfdfdf 1px solid;
}

.border-0 {
  border-width: 0;
}

.border-primary {
  border-color: #018cb5;
}

.border-second {
  border-color: #cd242b;
}

.border-third {
  border-color: #66676B;
}

.border-t {
  border-top: #dfdfdf 1px solid;
}

.border-b {
  border-bottom: #dfdfdf 1px solid;
}

.border-l {
  border-left: #dfdfdf 1px solid;
}

.border-r {
  border-right: #dfdfdf 1px solid;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .md\:border {
    border: #dfdfdf 1px solid;
  }

  .md\:border-t {
    border-top: #dfdfdf 1px solid;
  }

  .md\:border-b {
    border-bottom: #dfdfdf 1px solid;
  }

  .md\:border-l {
    border-left: #dfdfdf 1px solid;
  }

  .md\:border-r {
    border-right: #dfdfdf 1px solid;
  }
}
@media (min-width: 1025px) {
  .lg\:border {
    border: #dfdfdf 1px solid;
  }

  .lg\:border-t {
    border-top: #dfdfdf 1px solid;
  }

  .lg\:border-b {
    border-bottom: #dfdfdf 1px solid;
  }

  .lg\:border-l {
    border-left: #dfdfdf 1px solid;
  }

  .lg\:border-r {
    border-right: #dfdfdf 1px solid;
  }
}
/* border-radius */
.radius {
  border-radius: 0px;
}

.radius-xs {
  border-radius: 4px;
}

.radius-sm {
  border-radius: 6px;
}

.radius-md {
  border-radius: 8px;
}

.radius-lg {
  border-radius: 10px;
}

.radius-xl {
  border-radius: 12px;
}

.radius-full {
  border-radius: 50%;
}

/* row col */
.col-row {
  flex-direction: row;
}

.col-cell {
  flex-direction: row;
  justify-content: space-between;
}

.col-wrap {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.col-wrap:after {
  content: "";
  display: table;
  clear: both;
}

.col-wrap .col {
  box-sizing: border-box;
}
.col-wrap .col.grow {
  flex-grow: 1;
}

.col.s1 {
  width: 8.33333%;
}
.col.s2 {
  width: 16.66666%;
}
.col.s3 {
  width: 24.99999%;
}
.col.s4 {
  width: 33.33333%;
}
.col.s5 {
  width: 41.66666%;
}
.col.s6 {
  width: 49.99999%;
}
.col.s7 {
  width: 58.33333%;
}
.col.s8 {
  width: 66.66666%;
}
.col.s9 {
  width: 74.99999%;
}
.col.s10 {
  width: 83.33333%;
}
.col.s11 {
  width: 91.66666%;
}
.col.s12 {
  width: 99.99999%;
}

@media (min-width: 767px) {
  .col.m1 {
    width: 8.33333%;
  }
  .col.m2 {
    width: 16.66666%;
  }
  .col.m3 {
    width: 24.99999%;
  }
  .col.m4 {
    width: 33.33333%;
  }
  .col.m5 {
    width: 41.66666%;
  }
  .col.m6 {
    width: 49.99999%;
  }
  .col.m7 {
    width: 58.33333%;
  }
  .col.m8 {
    width: 66.66666%;
  }
  .col.m9 {
    width: 74.99999%;
  }
  .col.m10 {
    width: 83.33333%;
  }
  .col.m11 {
    width: 91.66666%;
  }
  .col.m12 {
    width: 99.99999%;
  }
}
@media (min-width: 1023px) {
  .col.l1 {
    width: 8.33333%;
  }
  .col.l2 {
    width: 16.66666%;
  }
  .col.l3 {
    width: 24.99999%;
  }
  .col.l4 {
    width: 33.33333%;
  }
  .col.l5 {
    width: 41.66666%;
  }
  .col.l6 {
    width: 49.99999%;
  }
  .col.l7 {
    width: 58.33333%;
  }
  .col.l8 {
    width: 66.66666%;
  }
  .col.l9 {
    width: 74.99999%;
  }
  .col.l10 {
    width: 83.33333%;
  }
  .col.l11 {
    width: 91.66666%;
  }
  .col.l12 {
    width: 99.99999%;
  }
}
.opacity-100 {
  opacity: 1;
}

.opacity-75 {
  opacity: .75;
}

.opacity-50 {
  opacity: .5;
}

.opacity-25 {
  opacity: .25;
}

.opacity {
  opacity: 0;
}

.shadow-xs {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-xl {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-none {
  box-shadow: none;
}

.select-none {
  user-select: none;
}

.cursor-pointer {
  cursor: pointer;
}

.outline {
  outline: none;
}

/* flex */
.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.items-stretch {
  align-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-baseline {
  align-items: baseline;
}

.content-start {
  align-content: flex-start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
.grid {
  display: grid;
}

.grid.gap-xs {
  gap: 8px 8px;
}

.grid.gap-sm {
  gap: 12px 12px;
}

.grid.gap-md {
  gap: 16px 16px;
}

.grid.gap-lg {
  gap: 20px 20px;
}

.grid.gap-xl {
  gap: 24px 24px;
}

.grid.gap-border {
  gap: 1px 1px;
}

.grid.gap-line-height {
  gap: 1.5 1.5;
}

/* grid.s */
.grid.s1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid.s2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid.s3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid.s4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.s5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid.s6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid.s7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid.s8 {
  grid-template-columns: repeat(8, 1fr);
}

@media (min-width: 767px) {
  .grid.m1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid.m2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid.m3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.m4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.m5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.m6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.m7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.m8 {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (min-width: 1023px) {
  .grid.l1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid.l2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid.l3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.l4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid.l5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid.l6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid.l7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid.l8 {
    grid-template-columns: repeat(8, 1fr);
  }
}
/*
	arrows 方向箭頭
	.arrows-top { @include arrows($direction: top); }
	.arrows-right { @include arrows($direction: right); }
	.arrows-bottom { @include arrows($direction: bottom); }
	.arrows-left { @include arrows($direction: left); }
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/*
	shadow
*/
/* CSS Document */
/*
	form-wrong
*/
/*
	form-animation
*/
/*
  media cellphone	
  @include media-tablet { ... }
*/
/*
  media tablet	
  @include media-tablet { ... }
*/
/*
  media mobile (cellphone、tablet)	
  @include media-mobile { ... }
*/
/*
  media laptops、desktop
  @include media-desktop { ... }
*/
/*
	CSS content property 支援 Font Awesome 5
*/
/*
	Cumulative Layout Shift 優化元素偏離移動
*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 提取
*/
/*@function map-pull($map, $key1, $key2) {
	$value: map-get(map-get($map, $key1), $key2);
	
	@return $value;
}*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 多層次 map 合併
*/
/*
	擴充 (map)$default 資料，優先載入 (map)$options 資料
	$default
	$options
*/
/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
/* visibility */
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* position */
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-auto {
  z-index: auto;
}

.lt {
  top: 0;
}

.lb {
  bottom: 0;
}

.lr {
  right: 0;
}

.ll {
  left: 0;
}

/* box */
.box-border {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

/* bg */
.bg-color {
  background-color: white;
}

.bg-opacity-25 {
  background-color: rgba(0, 0, 0, 0.25);
}

.bg-opacity-50 {
  background-color: rgba(0, 0, 0, 0.5);
}

.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.75);
}

.bg-p-main {
  background-color: #018cb5;
}

.bg-p-dark {
  background-color: #018cb5;
}

.bg-p-light {
  background-color: #018cb5;
}

.bg-p-text {
  background-color: #ffffff;
}

.bg-s-main {
  background-color: #cd242b;
}

.bg-s-dark {
  background-color: #cd242b;
}

.bg-s-light {
  background-color: #cd242b;
}

.bg-s-text {
  background-color: #ffffff;
}

.bg-t-main {
  background-color: #66676B;
}

.bg-t-dark {
  background-color: #66676B;
}

.bg-t-light {
  background-color: #66676B;
}

.bg-t-text {
  background-color: #272727;
}

.bg-dark {
  background-color: #272727;
}

.bg-light {
  background-color: #ffffff;
}

.bg-success {
  background-color: #28a745;
}

.bg-danger {
  background-color: #dc3545;
}

.bg-warning {
  background-color: #ffc107;
}

.bg-info {
  background-color: #17a2b8;
}

.bg-accent {
  background-color: #cd242b;
}

.bg-low {
  background-color: #aaaaaa;
}

.bg-link {
  background-color: #5085F6;
}

.bg-text {
  background-color: #272727;
}

.bg-border {
  background-color: #dfdfdf;
}

/* display */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.table-cell {
  display: table-cell;
}

/* overflow */
.overflow {
  overflow: hidden;
}

.overflow-x {
  overflow-x: auto;
}

.overflow-y {
  overflow-y: auto;
}

/* float */
.float-none {
  float: none;
}

.float-l {
  float: left;
}

.float-r {
  float: right;
}

.clear {
  clear: both;
}

/* width & height */
[class^="w-"] {
  max-width: 100%;
}

.w-24 {
  width: 24px;
}

.w-36 {
  width: 36px;
}

.w-48 {
  width: 48px;
}

.w-60 {
  width: 60px;
}

.w-72 {
  width: 72px;
}

.w-96 {
  width: 96px;
}

.w-128 {
  width: 128px;
}

.w-160 {
  width: 160px;
}

.w-192 {
  width: 192px;
}

.w-224 {
  width: 224px;
}

.w-256 {
  width: 256px;
}

.w-320 {
  width: 320px;
}

.w-414 {
  width: 414px;
}

.w-480 {
  width: 480px;
}

.w-640 {
  width: 640px;
}

.w-768 {
  width: 768px;
}

.w-1024 {
  width: 1024px;
}

.w-1280 {
  width: 1280px;
}

.w-1366 {
  width: 1366px;
}

.w-1680 {
  width: 1680px;
}

.w-1920 {
  width: 1920px;
}

.w-max {
  max-width: 100%;
}

.h-24 {
  height: 24px;
}

.h-36 {
  height: 36px;
}

.h-48 {
  height: 48px;
}

.h-60 {
  height: 60px;
}

.h-72 {
  height: 72px;
}

.h-96 {
  height: 96px;
}

.h-128 {
  height: 128px;
}

.h-160 {
  height: 160px;
}

.h-192 {
  height: 192px;
}

.h-224 {
  height: 224px;
}

.h-256 {
  height: 256px;
}

.h-320 {
  height: 320px;
}

.h-414 {
  height: 414px;
}

.h-480 {
  height: 480px;
}

.h-640 {
  height: 640px;
}

.h-768 {
  height: 768px;
}

.h-1024 {
  height: 1024px;
}

.h-1280 {
  height: 1280px;
}

.h-1366 {
  height: 1366px;
}

.h-1680 {
  height: 1680px;
}

.h-1920 {
  height: 1920px;
}

.h-max {
  max-height: 100%;
}

.hide.all {
  display: none;
}
@media (min-width: 1px) and (max-width: 767px) {
  .hide.s {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hide.m {
    display: none;
  }
}
@media (min-width: 1025px) {
  .hide.l {
    display: none;
  }
}

@media (min-width: 767px) {
  .md\:w-24 {
    width: 24px;
  }

  .md\:w-36 {
    width: 36px;
  }

  .md\:w-48 {
    width: 48px;
  }

  .md\:w-60 {
    width: 60px;
  }

  .md\:w-72 {
    width: 72px;
  }

  .md\:w-96 {
    width: 96px;
  }

  .md\:w-128 {
    width: 128px;
  }

  .md\:w-160 {
    width: 160px;
  }

  .md\:w-192 {
    width: 192px;
  }

  .md\:w-224 {
    width: 224px;
  }

  .md\:w-256 {
    width: 256px;
  }

  .md\:w-320 {
    width: 320px;
  }

  .md\:w-414 {
    width: 414px;
  }

  .md\:w-480 {
    width: 480px;
  }

  .md\:w-640 {
    width: 640px;
  }

  .md\:w-768 {
    width: 768px;
  }

  .md\:w-1024 {
    width: 1024px;
  }

  .md\:w-1280 {
    width: 1280px;
  }

  .md\:w-1366 {
    width: 1366px;
  }

  .md\:w-1680 {
    width: 1680px;
  }

  .md\:w-1920 {
    width: 1920px;
  }
}
@media (min-width: 1023px) {
  .lg\:w-24 {
    width: 24px;
  }

  .lg\:w-36 {
    width: 36px;
  }

  .lg\:w-48 {
    width: 48px;
  }

  .lg\:w-60 {
    width: 60px;
  }

  .lg\:w-72 {
    width: 72px;
  }

  .lg\:w-96 {
    width: 96px;
  }

  .lg\:w-128 {
    width: 128px;
  }

  .lg\:w-160 {
    width: 160px;
  }

  .lg\:w-192 {
    width: 192px;
  }

  .lg\:w-224 {
    width: 224px;
  }

  .lg\:w-256 {
    width: 256px;
  }

  .lg\:w-320 {
    width: 320px;
  }

  .lg\:w-414 {
    width: 414px;
  }

  .lg\:w-480 {
    width: 480px;
  }

  .lg\:w-640 {
    width: 640px;
  }

  .lg\:w-768 {
    width: 768px;
  }

  .lg\:w-1024 {
    width: 1024px;
  }

  .lg\:w-1280 {
    width: 1280px;
  }

  .lg\:w-1366 {
    width: 1366px;
  }

  .lg\:w-1680 {
    width: 1680px;
  }

  .lg\:w-1920 {
    width: 1920px;
  }
}
@media (min-width: 767px) {
  .md\:h-24 {
    height: 24px;
  }

  .md\:h-36 {
    height: 36px;
  }

  .md\:h-48 {
    height: 48px;
  }

  .md\:h-60 {
    height: 60px;
  }

  .md\:h-72 {
    height: 72px;
  }

  .md\:h-96 {
    height: 96px;
  }

  .md\:h-128 {
    height: 128px;
  }

  .md\:h-160 {
    height: 160px;
  }

  .md\:h-192 {
    height: 192px;
  }

  .md\:h-224 {
    height: 224px;
  }

  .md\:h-256 {
    height: 256px;
  }

  .md\:h-320 {
    height: 320px;
  }

  .md\:h-414 {
    height: 414px;
  }

  .md\:h-480 {
    height: 480px;
  }

  .md\:h-640 {
    height: 640px;
  }

  .md\:h-768 {
    height: 768px;
  }

  .md\:h-1024 {
    height: 1024px;
  }

  .md\:h-1280 {
    height: 1280px;
  }

  .md\:h-1366 {
    height: 1366px;
  }

  .md\:h-1680 {
    height: 1680px;
  }

  .md\:h-1920 {
    height: 1920px;
  }
}
@media (min-width: 1023px) {
  .lg\:h-24 {
    height: 24px;
  }

  .lg\:h-36 {
    height: 36px;
  }

  .lg\:h-48 {
    height: 48px;
  }

  .lg\:h-60 {
    height: 60px;
  }

  .lg\:h-72 {
    height: 72px;
  }

  .lg\:h-96 {
    height: 96px;
  }

  .lg\:h-128 {
    height: 128px;
  }

  .lg\:h-160 {
    height: 160px;
  }

  .lg\:h-192 {
    height: 192px;
  }

  .lg\:h-224 {
    height: 224px;
  }

  .lg\:h-256 {
    height: 256px;
  }

  .lg\:h-320 {
    height: 320px;
  }

  .lg\:h-414 {
    height: 414px;
  }

  .lg\:h-480 {
    height: 480px;
  }

  .lg\:h-640 {
    height: 640px;
  }

  .lg\:h-768 {
    height: 768px;
  }

  .lg\:h-1024 {
    height: 1024px;
  }

  .lg\:h-1280 {
    height: 1280px;
  }

  .lg\:h-1366 {
    height: 1366px;
  }

  .lg\:h-1680 {
    height: 1680px;
  }

  .lg\:h-1920 {
    height: 1920px;
  }
}
/*
	arrows 方向箭頭
	.arrows-top { @include arrows($direction: top); }
	.arrows-right { @include arrows($direction: right); }
	.arrows-bottom { @include arrows($direction: bottom); }
	.arrows-left { @include arrows($direction: left); }
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/*
	shadow
*/
/* CSS Document */
/*
	form-wrong
*/
/*
	form-animation
*/
/*
  media cellphone	
  @include media-tablet { ... }
*/
/*
  media tablet	
  @include media-tablet { ... }
*/
/*
  media mobile (cellphone、tablet)	
  @include media-mobile { ... }
*/
/*
  media laptops、desktop
  @include media-desktop { ... }
*/
/*
	CSS content property 支援 Font Awesome 5
*/
/*
	Cumulative Layout Shift 優化元素偏離移動
*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 提取
*/
/*@function map-pull($map, $key1, $key2) {
	$value: map-get(map-get($map, $key1), $key2);
	
	@return $value;
}*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 多層次 map 合併
*/
/*
	擴充 (map)$default 資料，優先載入 (map)$options 資料
	$default
	$options
*/
/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
/* padding app */
.pa {
  padding: 0;
}

.pv {
  padding-top: 0;
  padding-bottom: 0;
}

.ph {
  padding-left: 0;
  padding-right: 0;
}

.pt {
  padding-top: 0;
}

.pt-21-9 {
  padding-top: 42.85714%;
}

.pt-16-9 {
  padding-top: 56.25%;
}

.pt-4-3 {
  padding-top: 75%;
}

.pt-1-1 {
  padding-top: 100%;
}

.pb {
  padding-bottom: 0;
}

.pl {
  padding-left: 0;
}

.pr {
  padding-right: 0;
}

/* padding web */
.pa-xs {
  padding: 8px;
}

.pv-xs {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ph-xs {
  padding-left: 8px;
  padding-right: 8px;
}

.pt-xs {
  padding-top: 8px;
}

.pb-xs {
  padding-bottom: 8px;
}

.pl-xs {
  padding-left: 8px;
}

.pr-xs {
  padding-right: 8px;
}

.pa-sm {
  padding: 12px;
}

.pv-sm {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ph-sm {
  padding-left: 12px;
  padding-right: 12px;
}

.pt-sm {
  padding-top: 12px;
}

.pb-sm {
  padding-bottom: 12px;
}

.pl-sm {
  padding-left: 12px;
}

.pr-sm {
  padding-right: 12px;
}

.pa-md {
  padding: 16px;
}

.pv-md {
  padding-top: 16px;
  padding-bottom: 16px;
}

.ph-md {
  padding-left: 16px;
  padding-right: 16px;
}

.pt-md {
  padding-top: 16px;
}

.pb-md {
  padding-bottom: 16px;
}

.pl-md {
  padding-left: 16px;
}

.pr-md {
  padding-right: 16px;
}

.pa-lg {
  padding: 20px;
}

.pv-lg {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ph-lg {
  padding-left: 20px;
  padding-right: 20px;
}

.pt-lg {
  padding-top: 20px;
}

.pb-lg {
  padding-bottom: 20px;
}

.pl-lg {
  padding-left: 20px;
}

.pr-lg {
  padding-right: 20px;
}

.pa-xl {
  padding: 24px;
}

.pv-xl {
  padding-top: 24px;
  padding-bottom: 24px;
}

.ph-xl {
  padding-left: 24px;
  padding-right: 24px;
}

.pt-xl {
  padding-top: 24px;
}

.pb-xl {
  padding-bottom: 24px;
}

.pl-xl {
  padding-left: 24px;
}

.pr-xl {
  padding-right: 24px;
}

.pa-line-height {
  padding: 1.5;
}

.pv-line-height {
  padding-top: 1.5;
  padding-bottom: 1.5;
}

.ph-line-height {
  padding-left: 1.5;
  padding-right: 1.5;
}

.pt-line-height {
  padding-top: 1.5;
}

.pb-line-height {
  padding-bottom: 1.5;
}

.pl-line-height {
  padding-left: 1.5;
}

.pr-line-height {
  padding-right: 1.5;
}

/* margin */
.ma {
  margin: 0;
}

.mv {
  margin-top: 0;
  margin-bottom: 0;
}

.mh {
  margin-left: 0;
  margin-right: 0;
}

.mt {
  margin-top: 0;
}

.mb {
  margin-bottom: 0;
}

.ml {
  margin-left: 0;
}

.ml-indent {
  margin-left: 0;
}

.mr {
  margin-right: 0;
}

.mr-indent {
  margin-right: 0;
}

.ma-xs {
  margin: 8px;
}

.mh-xs {
  margin-left: 8px;
  margin-right: 8px;
}

.mv-xs {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mt-xs {
  margin-top: 8px;
}

.mb-xs {
  margin-bottom: 8px;
}

.ml-xs {
  margin-left: 8px;
}

.ml-xs-indent {
  margin-left: -8px;
}

.mr-xs {
  margin-right: 8px;
}

.mr-xs-indent {
  margin-right: -8px;
}

.ma-sm {
  margin: 12px;
}

.mh-sm {
  margin-left: 12px;
  margin-right: 12px;
}

.mv-sm {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mt-sm {
  margin-top: 12px;
}

.mb-sm {
  margin-bottom: 12px;
}

.ml-sm {
  margin-left: 12px;
}

.ml-sm-indent {
  margin-left: -12px;
}

.mr-sm {
  margin-right: 12px;
}

.mr-sm-indent {
  margin-right: -12px;
}

.ma-md {
  margin: 16px;
}

.mh-md {
  margin-left: 16px;
  margin-right: 16px;
}

.mv-md {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-md {
  margin-top: 16px;
}

.mb-md {
  margin-bottom: 16px;
}

.ml-md {
  margin-left: 16px;
}

.ml-md-indent {
  margin-left: -16px;
}

.mr-md {
  margin-right: 16px;
}

.mr-md-indent {
  margin-right: -16px;
}

.ma-lg {
  margin: 20px;
}

.mh-lg {
  margin-left: 20px;
  margin-right: 20px;
}

.mv-lg {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mt-lg {
  margin-top: 20px;
}

.mb-lg {
  margin-bottom: 20px;
}

.ml-lg {
  margin-left: 20px;
}

.ml-lg-indent {
  margin-left: -20px;
}

.mr-lg {
  margin-right: 20px;
}

.mr-lg-indent {
  margin-right: -20px;
}

.ma-xl {
  margin: 24px;
}

.mh-xl {
  margin-left: 24px;
  margin-right: 24px;
}

.mv-xl {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mt-xl {
  margin-top: 24px;
}

.mb-xl {
  margin-bottom: 24px;
}

.ml-xl {
  margin-left: 24px;
}

.ml-xl-indent {
  margin-left: -24px;
}

.mr-xl {
  margin-right: 24px;
}

.mr-xl-indent {
  margin-right: -24px;
}

.ma-line-height {
  margin: 1.5;
}

.mh-line-height {
  margin-left: 1.5;
  margin-right: 1.5;
}

.mv-line-height {
  margin-top: 1.5;
  margin-bottom: 1.5;
}

.mt-line-height {
  margin-top: 1.5;
}

.mb-line-height {
  margin-bottom: 1.5;
}

.ml-line-height {
  margin-left: 1.5;
}

.ml-line-height-indent {
  margin-left: -1.5;
}

.mr-line-height {
  margin-right: 1.5;
}

.mr-line-height-indent {
  margin-right: -1.5;
}

.mh-auto {
  margin-left: auto;
  margin-right: auto;
}

.mv-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@media (min-width: 767px) {
  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-xs {
    padding: 8px;
  }

  .md\:pv-xs {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .md\:ph-xs {
    padding-left: 8px;
    padding-right: 8px;
  }

  .md\:pt-xs {
    padding-top: 8px;
  }

  .md\:pb-xs {
    padding-bottom: 8px;
  }

  .md\:pl-xs {
    padding-left: 8px;
  }

  .md\:pr-xs {
    padding-right: 8px;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-xs {
    margin: 8px;
  }

  .md\:ma-xs {
    margin: 8px;
  }

  .md\:mv-xs {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .md\:mh-xs {
    margin-left: 8px;
    margin-right: 8px;
  }

  .md\:mt-xs {
    margin-top: 8px;
  }

  .md\:mb-xs {
    margin-bottom: 8px;
  }

  .md\:ml-xs {
    margin-left: 8px;
  }

  .md\:mr-xs {
    margin-right: 8px;
  }

  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-sm {
    padding: 12px;
  }

  .md\:pv-sm {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .md\:ph-sm {
    padding-left: 12px;
    padding-right: 12px;
  }

  .md\:pt-sm {
    padding-top: 12px;
  }

  .md\:pb-sm {
    padding-bottom: 12px;
  }

  .md\:pl-sm {
    padding-left: 12px;
  }

  .md\:pr-sm {
    padding-right: 12px;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-sm {
    margin: 12px;
  }

  .md\:ma-sm {
    margin: 12px;
  }

  .md\:mv-sm {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .md\:mh-sm {
    margin-left: 12px;
    margin-right: 12px;
  }

  .md\:mt-sm {
    margin-top: 12px;
  }

  .md\:mb-sm {
    margin-bottom: 12px;
  }

  .md\:ml-sm {
    margin-left: 12px;
  }

  .md\:mr-sm {
    margin-right: 12px;
  }

  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-md {
    padding: 16px;
  }

  .md\:pv-md {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .md\:ph-md {
    padding-left: 16px;
    padding-right: 16px;
  }

  .md\:pt-md {
    padding-top: 16px;
  }

  .md\:pb-md {
    padding-bottom: 16px;
  }

  .md\:pl-md {
    padding-left: 16px;
  }

  .md\:pr-md {
    padding-right: 16px;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-md {
    margin: 16px;
  }

  .md\:ma-md {
    margin: 16px;
  }

  .md\:mv-md {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .md\:mh-md {
    margin-left: 16px;
    margin-right: 16px;
  }

  .md\:mt-md {
    margin-top: 16px;
  }

  .md\:mb-md {
    margin-bottom: 16px;
  }

  .md\:ml-md {
    margin-left: 16px;
  }

  .md\:mr-md {
    margin-right: 16px;
  }

  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-lg {
    padding: 20px;
  }

  .md\:pv-lg {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .md\:ph-lg {
    padding-left: 20px;
    padding-right: 20px;
  }

  .md\:pt-lg {
    padding-top: 20px;
  }

  .md\:pb-lg {
    padding-bottom: 20px;
  }

  .md\:pl-lg {
    padding-left: 20px;
  }

  .md\:pr-lg {
    padding-right: 20px;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-lg {
    margin: 20px;
  }

  .md\:ma-lg {
    margin: 20px;
  }

  .md\:mv-lg {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .md\:mh-lg {
    margin-left: 20px;
    margin-right: 20px;
  }

  .md\:mt-lg {
    margin-top: 20px;
  }

  .md\:mb-lg {
    margin-bottom: 20px;
  }

  .md\:ml-lg {
    margin-left: 20px;
  }

  .md\:mr-lg {
    margin-right: 20px;
  }

  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-xl {
    padding: 24px;
  }

  .md\:pv-xl {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .md\:ph-xl {
    padding-left: 24px;
    padding-right: 24px;
  }

  .md\:pt-xl {
    padding-top: 24px;
  }

  .md\:pb-xl {
    padding-bottom: 24px;
  }

  .md\:pl-xl {
    padding-left: 24px;
  }

  .md\:pr-xl {
    padding-right: 24px;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-xl {
    margin: 24px;
  }

  .md\:ma-xl {
    margin: 24px;
  }

  .md\:mv-xl {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .md\:mh-xl {
    margin-left: 24px;
    margin-right: 24px;
  }

  .md\:mt-xl {
    margin-top: 24px;
  }

  .md\:mb-xl {
    margin-bottom: 24px;
  }

  .md\:ml-xl {
    margin-left: 24px;
  }

  .md\:mr-xl {
    margin-right: 24px;
  }

  .md\:pa {
    padding: 0;
  }

  .md\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .md\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .md\:pt {
    padding-top: 0;
  }

  .md\:pb {
    padding-bottom: 0;
  }

  .md\:pl {
    padding-left: 0;
  }

  .md\:pr {
    padding-right: 0;
  }

  .md\:pa-line-height {
    padding: 1.5;
  }

  .md\:pv-line-height {
    padding-top: 1.5;
    padding-bottom: 1.5;
  }

  .md\:ph-line-height {
    padding-left: 1.5;
    padding-right: 1.5;
  }

  .md\:pt-line-height {
    padding-top: 1.5;
  }

  .md\:pb-line-height {
    padding-bottom: 1.5;
  }

  .md\:pl-line-height {
    padding-left: 1.5;
  }

  .md\:pr-line-height {
    padding-right: 1.5;
  }

  .md\:ma {
    margin: 0;
  }

  .md\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .md\:mt {
    margin-top: 0;
  }

  .md\:mb {
    margin-bottom: 0;
  }

  .md\:ml {
    margin-left: 0;
  }

  .md\:mr {
    margin-right: 0;
  }

  .md\:ma-line-height {
    margin: 1.5;
  }

  .md\:ma-line-height {
    margin: 1.5;
  }

  .md\:mv-line-height {
    margin-top: 1.5;
    margin-bottom: 1.5;
  }

  .md\:mh-line-height {
    margin-left: 1.5;
    margin-right: 1.5;
  }

  .md\:mt-line-height {
    margin-top: 1.5;
  }

  .md\:mb-line-height {
    margin-bottom: 1.5;
  }

  .md\:ml-line-height {
    margin-left: 1.5;
  }

  .md\:mr-line-height {
    margin-right: 1.5;
  }

  .md\:mh-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:mv-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
}
@media (min-width: 1023px) {
  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-xs {
    padding: 8px;
  }

  .lg\:pv-xs {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lg\:ph-xs {
    padding-left: 8px;
    padding-right: 8px;
  }

  .lg\:pt-xs {
    padding-top: 8px;
  }

  .lg\:pb-xs {
    padding-bottom: 8px;
  }

  .lg\:pl-xs {
    padding-left: 8px;
  }

  .lg\:pr-xs {
    padding-right: 8px;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-xs {
    margin: 8px;
  }

  .lg\:mv-xs {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .lg\:mh-xs {
    margin-left: 8px;
    margin-right: 8px;
  }

  .lg\:mt-xs {
    margin-top: 8px;
  }

  .lg\:mb-xs {
    margin-bottom: 8px;
  }

  .lg\:ml-xs {
    margin-left: 8px;
  }

  .lg\:mr-xs {
    margin-right: 8px;
  }

  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-sm {
    padding: 12px;
  }

  .lg\:pv-sm {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .lg\:ph-sm {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lg\:pt-sm {
    padding-top: 12px;
  }

  .lg\:pb-sm {
    padding-bottom: 12px;
  }

  .lg\:pl-sm {
    padding-left: 12px;
  }

  .lg\:pr-sm {
    padding-right: 12px;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-sm {
    margin: 12px;
  }

  .lg\:mv-sm {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .lg\:mh-sm {
    margin-left: 12px;
    margin-right: 12px;
  }

  .lg\:mt-sm {
    margin-top: 12px;
  }

  .lg\:mb-sm {
    margin-bottom: 12px;
  }

  .lg\:ml-sm {
    margin-left: 12px;
  }

  .lg\:mr-sm {
    margin-right: 12px;
  }

  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-md {
    padding: 16px;
  }

  .lg\:pv-md {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .lg\:ph-md {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lg\:pt-md {
    padding-top: 16px;
  }

  .lg\:pb-md {
    padding-bottom: 16px;
  }

  .lg\:pl-md {
    padding-left: 16px;
  }

  .lg\:pr-md {
    padding-right: 16px;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-md {
    margin: 16px;
  }

  .lg\:mv-md {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .lg\:mh-md {
    margin-left: 16px;
    margin-right: 16px;
  }

  .lg\:mt-md {
    margin-top: 16px;
  }

  .lg\:mb-md {
    margin-bottom: 16px;
  }

  .lg\:ml-md {
    margin-left: 16px;
  }

  .lg\:mr-md {
    margin-right: 16px;
  }

  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-lg {
    padding: 20px;
  }

  .lg\:pv-lg {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .lg\:ph-lg {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lg\:pt-lg {
    padding-top: 20px;
  }

  .lg\:pb-lg {
    padding-bottom: 20px;
  }

  .lg\:pl-lg {
    padding-left: 20px;
  }

  .lg\:pr-lg {
    padding-right: 20px;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-lg {
    margin: 20px;
  }

  .lg\:mv-lg {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .lg\:mh-lg {
    margin-left: 20px;
    margin-right: 20px;
  }

  .lg\:mt-lg {
    margin-top: 20px;
  }

  .lg\:mb-lg {
    margin-bottom: 20px;
  }

  .lg\:ml-lg {
    margin-left: 20px;
  }

  .lg\:mr-lg {
    margin-right: 20px;
  }

  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-xl {
    padding: 24px;
  }

  .lg\:pv-xl {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .lg\:ph-xl {
    padding-left: 24px;
    padding-right: 24px;
  }

  .lg\:pt-xl {
    padding-top: 24px;
  }

  .lg\:pb-xl {
    padding-bottom: 24px;
  }

  .lg\:pl-xl {
    padding-left: 24px;
  }

  .lg\:pr-xl {
    padding-right: 24px;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-xl {
    margin: 24px;
  }

  .lg\:mv-xl {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .lg\:mh-xl {
    margin-left: 24px;
    margin-right: 24px;
  }

  .lg\:mt-xl {
    margin-top: 24px;
  }

  .lg\:mb-xl {
    margin-bottom: 24px;
  }

  .lg\:ml-xl {
    margin-left: 24px;
  }

  .lg\:mr-xl {
    margin-right: 24px;
  }

  .lg\:pa {
    padding: 0;
  }

  .lg\:pv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .lg\:ph {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:pt {
    padding-top: 0;
  }

  .lg\:pb {
    padding-bottom: 0;
  }

  .lg\:pl {
    padding-left: 0;
  }

  .lg\:pr {
    padding-right: 0;
  }

  .lg\:pa-line-height {
    padding: 1.5;
  }

  .lg\:pv-line-height {
    padding-top: 1.5;
    padding-bottom: 1.5;
  }

  .lg\:ph-line-height {
    padding-left: 1.5;
    padding-right: 1.5;
  }

  .lg\:pt-line-height {
    padding-top: 1.5;
  }

  .lg\:pb-line-height {
    padding-bottom: 1.5;
  }

  .lg\:pl-line-height {
    padding-left: 1.5;
  }

  .lg\:pr-line-height {
    padding-right: 1.5;
  }

  .lg\:ma {
    margin: 0;
  }

  .lg\:mv {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:mh {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mt {
    margin-top: 0;
  }

  .lg\:mb {
    margin-bottom: 0;
  }

  .lg\:ml {
    margin-left: 0;
  }

  .lg\:mr {
    margin-right: 0;
  }

  .lg\:ma-line-height {
    margin: 1.5;
  }

  .lg\:mv-line-height {
    margin-top: 1.5;
    margin-bottom: 1.5;
  }

  .lg\:mh-line-height {
    margin-left: 1.5;
    margin-right: 1.5;
  }

  .lg\:mt-line-height {
    margin-top: 1.5;
  }

  .lg\:mb-line-height {
    margin-bottom: 1.5;
  }

  .lg\:ml-line-height {
    margin-left: 1.5;
  }

  .lg\:mr-line-height {
    margin-right: 1.5;
  }

  .lg\:mh-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:mv-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
}
/*
	arrows 方向箭頭
	.arrows-top { @include arrows($direction: top); }
	.arrows-right { @include arrows($direction: right); }
	.arrows-bottom { @include arrows($direction: bottom); }
	.arrows-left { @include arrows($direction: left); }
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/*
	shadow
*/
/* CSS Document */
/*
	form-wrong
*/
/*
	form-animation
*/
/*
  media cellphone	
  @include media-tablet { ... }
*/
/*
  media tablet	
  @include media-tablet { ... }
*/
/*
  media mobile (cellphone、tablet)	
  @include media-mobile { ... }
*/
/*
  media laptops、desktop
  @include media-desktop { ... }
*/
/*
	CSS content property 支援 Font Awesome 5
*/
/*
	Cumulative Layout Shift 優化元素偏離移動
*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 提取
*/
/*@function map-pull($map, $key1, $key2) {
	$value: map-get(map-get($map, $key1), $key2);
	
	@return $value;
}*/
/*
 檢查索引值是否存在，不存在即帶入指定值
*/
/*
 多層次 map 合併
*/
/*
	擴充 (map)$default 資料，優先載入 (map)$options 資料
	$default
	$options
*/
/*
// 元件大小
$form-size: 20 !default;
// 元件間隙
$form-gap: 2 !default;
// 元件間隙
$form-gutter: 10 !default;
// 主題顏色
$form-theme-default: #CBD5E0 !default;
$form-theme-active: #0277BD !default;
// 已選擇樣式
$form-theme-selected: #B9B9B9 !default;
// 字體大小
$form-font-size: 15 !default;
// 字體顏色 
$form-font-color: #FFFFFF !default;
// 圖標顏色
$form-icon-color: #CBD5E0 !default;
// 邊框樣式
$form-border-color: $form-theme-default !default;
$form-border-width: 1 !default;
$form-border-radius: 2px !default;
// 邊框陰影
$form-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) !default;
// 錯誤警告
$form-wrong: #E0412F !default; 
*/
/* white-space */
.white {
  white-space: inherit;
}

.white-nowrap {
  white-space: nowrap;
}

/* text */
.text-ellipsis {
  text-overflow: ellipsis;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-decoration {
  text-decoration: none;
}

.text-through {
  text-decoration: line-through;
}

.text-underline {
  text-decoration: underline;
}

.text-none {
  text-decoration: none;
}

.text-vertical {
  vertical-align: middle;
}

.text-top {
  vertical-align: top;
}

.text-middle {
  vertical-align: middle;
}

.text-bottom {
  vertical-align: bottom;
}

.text-align {
  text-align: left;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* font-style */
.font-bold {
  font-weight: bold;
}

.font-lighter {
  font-weight: 100;
}

/* font-size */
.font-size {
  font-size: 16px;
}

.font-xs {
  font-size: 12px;
  line-height: 18px;
}
.font-xs[class*="line-"] {
  overflow: hidden;
}
.font-xs.line-s1 {
  height: 18px;
}
.font-xs.line-s2 {
  height: 36px;
}
.font-xs.line-s3 {
  height: 54px;
}
.font-xs.line-s4 {
  height: 72px;
}
@media (min-width: 768px) {
  .font-xs.line-m1 {
    height: 18px;
  }
  .font-xs.line-m2 {
    height: 36px;
  }
  .font-xs.line-m3 {
    height: 54px;
  }
  .font-xs.line-m4 {
    height: 72px;
  }
}
@media (min-width: 1024px) {
  .font-xs.line-l1 {
    height: 18px;
  }
  .font-xs.line-l2 {
    height: 36px;
  }
  .font-xs.line-l3 {
    height: 54px;
  }
  .font-xs.line-l4 {
    height: 72px;
  }
}

.font-sm {
  font-size: 14px;
  line-height: 21px;
}
.font-sm[class*="line-"] {
  overflow: hidden;
}
.font-sm.line-s1 {
  height: 21px;
}
.font-sm.line-s2 {
  height: 42px;
}
.font-sm.line-s3 {
  height: 63px;
}
.font-sm.line-s4 {
  height: 84px;
}
@media (min-width: 768px) {
  .font-sm.line-m1 {
    height: 21px;
  }
  .font-sm.line-m2 {
    height: 42px;
  }
  .font-sm.line-m3 {
    height: 63px;
  }
  .font-sm.line-m4 {
    height: 84px;
  }
}
@media (min-width: 1024px) {
  .font-sm.line-l1 {
    height: 21px;
  }
  .font-sm.line-l2 {
    height: 42px;
  }
  .font-sm.line-l3 {
    height: 63px;
  }
  .font-sm.line-l4 {
    height: 84px;
  }
}

.font-md {
  font-size: 16px;
  line-height: 24px;
}
.font-md[class*="line-"] {
  overflow: hidden;
}
.font-md.line-s1 {
  height: 24px;
}
.font-md.line-s2 {
  height: 48px;
}
.font-md.line-s3 {
  height: 72px;
}
.font-md.line-s4 {
  height: 96px;
}
@media (min-width: 768px) {
  .font-md.line-m1 {
    height: 24px;
  }
  .font-md.line-m2 {
    height: 48px;
  }
  .font-md.line-m3 {
    height: 72px;
  }
  .font-md.line-m4 {
    height: 96px;
  }
}
@media (min-width: 1024px) {
  .font-md.line-l1 {
    height: 24px;
  }
  .font-md.line-l2 {
    height: 48px;
  }
  .font-md.line-l3 {
    height: 72px;
  }
  .font-md.line-l4 {
    height: 96px;
  }
}

.font-lg {
  font-size: 18px;
  line-height: 27px;
}
.font-lg[class*="line-"] {
  overflow: hidden;
}
.font-lg.line-s1 {
  height: 27px;
}
.font-lg.line-s2 {
  height: 54px;
}
.font-lg.line-s3 {
  height: 81px;
}
.font-lg.line-s4 {
  height: 108px;
}
@media (min-width: 768px) {
  .font-lg.line-m1 {
    height: 27px;
  }
  .font-lg.line-m2 {
    height: 54px;
  }
  .font-lg.line-m3 {
    height: 81px;
  }
  .font-lg.line-m4 {
    height: 108px;
  }
}
@media (min-width: 1024px) {
  .font-lg.line-l1 {
    height: 27px;
  }
  .font-lg.line-l2 {
    height: 54px;
  }
  .font-lg.line-l3 {
    height: 81px;
  }
  .font-lg.line-l4 {
    height: 108px;
  }
}

.font-xl {
  font-size: 20px;
  line-height: 30px;
}
.font-xl[class*="line-"] {
  overflow: hidden;
}
.font-xl.line-s1 {
  height: 30px;
}
.font-xl.line-s2 {
  height: 60px;
}
.font-xl.line-s3 {
  height: 90px;
}
.font-xl.line-s4 {
  height: 120px;
}
@media (min-width: 768px) {
  .font-xl.line-m1 {
    height: 30px;
  }
  .font-xl.line-m2 {
    height: 60px;
  }
  .font-xl.line-m3 {
    height: 90px;
  }
  .font-xl.line-m4 {
    height: 120px;
  }
}
@media (min-width: 1024px) {
  .font-xl.line-l1 {
    height: 30px;
  }
  .font-xl.line-l2 {
    height: 60px;
  }
  .font-xl.line-l3 {
    height: 90px;
  }
  .font-xl.line-l4 {
    height: 120px;
  }
}

/* line-height */
.line-h {
  line-height: 24px;
}

.line-h-xs {
  line-height: 12px;
}

.line-h-sm {
  line-height: 18px;
}

.line-h-md {
  line-height: 24px;
}

.line-h-lg {
  line-height: 30px;
}

.line-h-xl {
  line-height: 36px;
}

.line-h-line-height {
  line-height: 2.25;
}

.line-h-40 {
  line-height: 40px;
}

.line-h-44 {
  line-height: 44px;
}

.line-h-48 {
  line-height: 48px;
}

.line-h-96 {
  line-height: 96px;
}

/* color */
.color {
  color: #018cb5 !important;
}

.color-p-main, a.color-p-main {
  color: #018cb5 !important;
}

.color-p-dark, a.color-p-dark {
  color: #018cb5 !important;
}

.color-p-light, a.color-p-light {
  color: #018cb5 !important;
}

.color-p-text, a.color-p-text {
  color: #ffffff !important;
}

a.color-p-text:hover {
  color: #ffffff !important;
}

a.color-p-text.active {
  color: #ffffff !important;
}

.color-s-main, a.color-s-main {
  color: #cd242b !important;
}

.color-s-dark, a.color-s-dark {
  color: #cd242b !important;
}

.color-s-light, a.color-s-light {
  color: #cd242b !important;
}

.color-s-text, a.color-s-text {
  color: #ffffff !important;
}

a.color-s-text:hover {
  color: #ffffff !important;
}

a.color-s-text.active {
  color: #ffffff !important;
}

.color-t-main, a.color-t-main {
  color: #66676B !important;
}

.color-t-dark, a.color-t-dark {
  color: #66676B !important;
}

.color-t-light, a.color-t-light {
  color: #66676B !important;
}

.color-t-text, a.color-t-text {
  color: #272727 !important;
}

a.color-t-text:hover {
  color: #272727 !important;
}

a.color-t-text.active {
  color: #272727 !important;
}

.color-dark, a.color-dark {
  color: #272727 !important;
}

.color-light, a.color-light {
  color: #ffffff !important;
}

.color-success, a.color-success {
  color: #28a745 !important;
}

.color-danger, a.color-danger {
  color: #dc3545 !important;
}

.color-warning, a.color-warning {
  color: #ffc107 !important;
}

.color-info, a.color-info {
  color: #17a2b8 !important;
}

.color-accent, a.color-accent {
  color: #cd242b !important;
}

.color-low, a.color-low {
  color: #aaaaaa !important;
}

.color-link, a.color-link {
  color: #5085F6 !important;
}

a.color-link:hover {
  color: #5085F6 !important;
}

.color-text, a.color-text {
  color: #272727 !important;
}

a.color-text:hover {
  color: #5085F6 !important;
}

.color-border, a.color-border {
  color: #dfdfdf !important;
}

a.color-border:hover {
  color: #cfcfcf !important;
}

a.color-border.active {
  color: #cfcfcf !important;
}

.color-black {
  color: black !important;
}

.color-white {
  color: white !important;
}

/* hover */
.hover-underline:hover {
  text-decoration: underline !important;
}

[class*="line-clamp-"] {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  -webkit-line-clamp: 4;
}

@media (min-width: 767px) {
  .md\:line-clamp-2 {
    -webkit-line-clamp: 2;
  }

  .md\:line-clamp-3 {
    -webkit-line-clamp: 3;
  }

  .md\:line-clamp-4 {
    -webkit-line-clamp: 4;
  }
}
@media (min-width: 1023px) {
  .lg\:line-clamp-2 {
    -webkit-line-clamp: 2;
  }

  .lg\:line-clamp-3 {
    -webkit-line-clamp: 3;
  }

  .lg\:line-clamp-4 {
    -webkit-line-clamp: 4;
  }
}
.spacing-xs {
  width: 8px;
}

.spacing-sm {
  width: 12px;
}

.spacing-md {
  width: 16px;
}

.spacing-lg {
  width: 20px;
}

.spacing-xl {
  width: 24px;
}

.spacing-border {
  width: 1px;
}

.spacing-line-height {
  width: 1.5;
}

/*
	form-wrong
*/
/*
	form-animation
*/
/*
	loading 載入等待
	$position : fixed, absolute, 
*/
/**
 * Nice User Interface
 * 縮寫 nu 開頭
 */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive::before {
  display: block;
  content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive figure,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

/* loading */
.loading {
  z-index: 1;
  transition: opacity 0.5s;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
}
.loading:before, .loading:after {
  position: absolute;
  top: calc(50% - 1.15em);
  left: calc(50% - 1.15em);
  content: "";
  border-radius: 50%;
  width: 2em;
  height: 2em;
}
.loading:before {
  text-indent: -9999em;
  border-top: 0.3em solid rgba(255, 255, 255, 0.5);
  border-right: 0.3em solid rgba(255, 255, 255, 0.5);
  border-bottom: 0.3em solid rgba(255, 255, 255, 0.5);
  border-left: 0.3em solid #fff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: rotate 1.1s infinite linear;
  animation: rotate 1.1s infinite linear;
}

.loading.overlay {
  position: fixed;
  z-index: 1000;
}

[data-swiper-animation] {
  visibility: hidden;
}

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

@keyframes null {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-opacity: 0;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes zoom {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: scale(1.2, 1.2);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    transform: scale(1, 1);
  }
}
.zoom {
  -webkit-animation-name: zoom;
  animation-name: zoom;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    transform: scale(1, 1);
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
}