tdesign-react 0.27.1 → 0.29.0

package/dist/tdesign.css

@@ -331,6 +331,14 @@ template {
 }
 /* stylelint-enable */
 
+:root {
+  --td-screen-xs: 320px;
+  --td-screen-sm: 768px;
+  --td-screen-md: 992px;
+  --td-screen-lg: 1200px;
+  --td-screen-xl: 1400px;
+  --td-screen-xxl: 1880px;
+}
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
   background: transparent;
@@ -2944,8 +2952,8 @@ template {
   transition: opacity 0.2s linear;
 }
 .t-popup--animation-leave-active {
-  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-popup--animation-expand-enter-active[data-popper-placement^=top] {
   -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
@@ -4914,13 +4922,12 @@ template {
 }
 
 .t-checkbox-group {
-  display: inline-block;
-}
-.t-checkbox-group .t-checkbox {
-  margin-right: 16px;
-}
-.t-checkbox-group .t-checkbox:last-child {
-  margin-right: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 16px;
 }
 .t-checkbox {
   display: -webkit-inline-box;
@@ -5122,7 +5129,7 @@ template {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  width: 120px;
+  width: 128px;
 }
 .t-input-number input::-webkit-outer-spin-button,
 .t-input-number input::-webkit-inner-spin-button {
@@ -6167,33 +6174,44 @@ a .t-tag:active {
   -webkit-animation: t-fade-in 0.1s ease-in-out;
           animation: t-fade-in 0.1s ease-in-out;
 }
-.t-tag-input.t-input {
+.t-tag-input .t-input {
   padding-left: 4px;
   overflow: hidden;
 }
-.t-tag-input.t-input.t-size-s {
+.t-tag-input .t-input.t-size-s {
   padding-left: 2px;
 }
 .t-tag-input:hover .t-input__inner,
 .t-tag-input .t-input--focused .t-input__inner {
-  min-width: 60px;
+  min-width: 40px;
 }
 .t-tag-input .t-tag-input__prefix,
 .t-tag-input .t-input__prefix:empty {
   margin-left: 4px;
 }
+.t-tag-input .t-input--auto-width {
+  padding-right: 4px;
+}
+.t-tag-input .t-input--auto-width .t-tag:last-child {
+  margin-right: 0;
+}
+.t-tag-input .t-input--auto-width:hover .t-input__prefix:not(:empty) + .t-input__inner,
+.t-tag-input .t-input--auto-width .t-is-focused .t-input__prefix:not(:empty) + .t-input__inner {
+  margin-left: 4px;
+}
 .t-tag-input__suffix-clear {
   cursor: pointer;
 }
-.t-tag-input--break-line.t-input {
+.t-tag-input--break-line .t-input {
   display: block;
   height: auto;
+  padding-right: 24px;
 }
-.t-tag-input--break-line.t-input.t-input--prefix > .t-input__prefix {
+.t-tag-input--break-line .t-input.t-input--prefix > .t-input__prefix {
   display: inline;
   text-align: left;
 }
-.t-tag-input--break-line.t-input .t-input__suffix-icon {
+.t-tag-input--break-line .t-input .t-input__suffix-icon {
   position: absolute;
   right: 8px;
   bottom: 0;
@@ -6344,18 +6362,20 @@ a .t-tag:active {
       -ms-flex-align: center;
           align-items: center;
 }
-.t-select .t-select__input {
-  margin-left: 4px;
+.t-select .t-input__wrap {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
-.t-select .t-select__input.t-input {
+.t-select .t-tag + .t-input__wrap {
+  margin-left: 4px;
+}
+.t-select .t-select__input .t-input {
   height: auto;
   border: 0;
   padding: 0;
 }
-.t-select .t-select__input.t-input--focused {
+.t-select .t-select__input .t-input--focused {
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: transparent;
@@ -6465,6 +6485,12 @@ a .t-tag:active {
   border-radius: 3px;
 }
 .t-select__dropdown-inner {
+  padding: 6px;
+}
+.t-select__dropdown-inner--size-s {
+  padding: 4px;
+}
+.t-select__dropdown-inner--size-l {
   padding: 8px;
 }
 .t-select__list {
@@ -6508,29 +6534,29 @@ ul.t-select-option-group__header,
 .t-select-option-group__header {
   color: var(--td-text-color-placeholder);
   display: block;
-  height: 40px;
-  line-height: 22px;
-  padding: 9px 8px;
+  height: 28px;
+  line-height: 20px;
+  padding: 3px 8px;
   white-space: nowrap;
   word-wrap: normal;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .t-select-option-group__header.t-size-l {
-  height: 48px;
-  padding: 13px 16px;
+  height: 36px;
+  padding: 7px 12px;
 }
 .t-select-option-group__header.t-size-s {
-  height: 32px;
-  padding: 5px 8px;
+  height: 20px;
+  padding: 0 8px;
 }
 .t-select-option {
   display: block;
   border-radius: 3px;
-  height: 40px;
-  line-height: 22px;
+  height: 28px;
+  line-height: 20px;
   cursor: pointer;
-  padding: 9px 8px;
+  padding: 3px 8px;
   color: var(--td-text-color-primary);
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
@@ -6575,13 +6601,13 @@ ul.t-select-option-group__header,
   background: var(--td-bg-color-specialcomponent);
 }
 .t-select-option.t-size-l {
-  height: 48px;
-  padding: 13px 16px;
+  height: 36px;
+  padding: 7px 12px;
   font-size: 16px;
 }
 .t-select-option.t-size-s {
-  height: 32px;
-  padding: 5px 8px;
+  height: 20px;
+  padding: 0 8px;
   font-size: 12px;
 }
 .t-select-option.t-is-selected {
@@ -6606,7 +6632,7 @@ ul.t-select-option-group__header,
   color: inherit;
 }
 .t-select-option + .t-select-option {
-  margin-top: 4px;
+  margin-top: 2px;
 }
 .t-select.t-select-input--borderless .t-select__right-icon {
   position: relative;
@@ -8304,6 +8330,84 @@ ul.t-select-option-group__header,
             transform: translate3d(0, 0, 0);
   }
 }
+.t-notification-list__show-transition--top-left {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.t-notification-list__show-transition--top-left .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--top-left .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--top-left .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--top-left .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--top-right {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+.t-notification-list__show-transition--top-right .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--top-right .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--top-right .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--top-right .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--bottom-left {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--bottom-right {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
 
 a.t-menu__item {
   text-decoration: none;
@@ -8754,6 +8858,27 @@ a.t-menu__item:active {
   -webkit-transform: scaleY(-1);
           transform: scaleY(-1);
 }
+.t-menu::-webkit-scrollbar {
+  display: none;
+}
+.t-menu__spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__spacer--left::before {
+  left: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__spacer--top::before {
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item {
   position: relative;
   display: -webkit-box;
@@ -8762,8 +8887,8 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 64px;
-  line-height: 64px;
+  height: 40px;
+  line-height: 40px;
   text-align: center;
   color: var(--td-font-gray-2);
   cursor: pointer;
@@ -8777,6 +8902,27 @@ a.t-menu__item:active {
 .t-menu__item ::selection {
   background: transparent;
 }
+.t-menu__item-spacer {
+  overflow: unset;
+}
+.t-menu__item-spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__item-spacer--right::before {
+  right: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__item-spacer--bottom::before {
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item a {
   color: unset;
   text-decoration: none;
@@ -8895,6 +9041,9 @@ a.t-menu__item:active {
   padding: 8px;
   height: 100%;
 }
+.t-menu__popup .t-fake-arrow {
+  margin-left: 8px;
+}
 .t-menu__popup.t-is-vertical {
   max-height: unset;
   width: 0;
@@ -8905,6 +9054,19 @@ a.t-menu__item:active {
 .t-menu__popup.t-is-vertical.t-is-opened {
   width: var(--popup-width, 216px);
 }
+.t-menu__popup.t-is-vertical .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 4px 0;
+}
+.t-menu__popup.t-is-horizontal .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  white-space: nowrap;
+}
+.t-menu__popup.t-is-horizontal li + li {
+  margin-top: 4px;
+}
 .t-menu__popup.t-is-opened {
   max-height: var(--popup-max-height, 364px);
   opacity: 1;
@@ -11084,6 +11246,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
 }
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-success-color);
+}
 .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
@@ -11162,6 +11344,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
 }
+.t-is-warning .t-form__controls-content .t-input .t-icon,
+.t-is-warning .t-form__controls-content .t-select .t-icon,
+.t-is-warning .t-form__controls-content .t-radio-button .t-icon,
+.t-is-warning .t-form__controls-content .t-cascader .t-icon,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-warning .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-warning-color);
+}
+.t-is-warning .t-form__controls-content .t-cascader .t-input,
+.t-is-warning .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-warning-color);
+}
 .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
@@ -11192,6 +11394,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
 }
+.t-is-error .t-form__controls-content .t-input .t-icon,
+.t-is-error .t-form__controls-content .t-select .t-icon,
+.t-is-error .t-form__controls-content .t-radio-button .t-icon,
+.t-is-error .t-form__controls-content .t-cascader .t-icon,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-error .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-error-color);
+}
+.t-is-error .t-form__controls-content .t-cascader .t-input,
+.t-is-error .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-error-color);
+}
 .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
@@ -11232,6 +11454,7 @@ small.t-upload__tips-error {
   width: 100%;
   height: 100%;
   pointer-events: none;
+  overflow: hidden;
 }
 .t-drawer--lock {
   overflow: hidden;
@@ -12587,6 +12810,16 @@ small.t-upload__tips-error {
 .t-time-picker.t-is-disabled {
   cursor: not-allowed;
 }
+.t-time-picker .t-is-focused .t-input {
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+.t-time-picker.t-is-focused .t-input {
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
 .t-time-picker > *:focus,
 .t-time-picker > *:active {
   outline: 0;
@@ -12829,7 +13062,7 @@ small.t-upload__tips-error {
   background-color: var(--td-bg-color-container);
   overflow: auto;
 }
-.t-date-picker .t-is-active > .t-input {
+.t-date-picker .t-is-active .t-input {
   border-color: var(--td-brand-color);
   -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
           box-shadow: 0 0 0 2px var(--td-brand-color-focus);
@@ -13145,47 +13378,18 @@ small.t-upload__tips-error {
 /* Swiper */
 .t-swiper {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  opacity: 1;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-.t-swiper.t-is-hidden {
-  /* 隐藏 */
-  display: none;
-}
-.t-swiper--closing {
-  opacity: 0;
-}
-.t-swiper .t-swiper__trigger-wrap {
-  color: var(--td-text-color-disabled);
 }
-.t-swiper .t-swiper__trigger--active {
-  color: var(--td-text-color-secondary);
+.t-swiper__wrap {
+  display: block;
+  position: relative;
+  height: 100%;
 }
 .t-swiper__content {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  position: relative;
   z-index: 1;
   overflow: hidden;
-  height: 48px;
-}
-.t-swiper__swiper-wrap {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  left: 0;
-}
-.t-swiper__swiper-wrap > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
 }
-.t-swiper__swiper-wrap--horizontal {
+.t-swiper__container {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -13194,68 +13398,836 @@ small.t-upload__tips-error {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  left: 0;
-}
-.t-swiper__swiper-wrap--horizontal > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.t-swiper__swiper-wrap--vertical {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  top: 0;
-}
-.t-swiper__swiper-wrap--vertical > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.t-swiper__trigger-wrap {
-  position: absolute;
-  right: 32px;
+  height: 100%;
   z-index: 1;
+}
+.t-swiper__container__item {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  padding: 16px 8px;
-  margin: 0;
-  font-size: 20px;
-  line-height: 20px;
-  height: 48px;
-}
-.t-swiper__trigger-wrap > li {
+  width: 100%;
+  height: 100%;
   display: inline-block;
-  list-style-type: none;
-  cursor: pointer;
 }
-.t-swiper__trigger-wrap > li::before {
-  content: "\2022";
-}
-.t-swiper__close {
-  position: absolute;
-  right: 0;
-  z-index: 100;
-  width: 32px;
-  height: 48px;
-  padding: 16px 24px 16px 4px;
-  font-size: 14px;
-  color: var(--td-text-color-placeholder);
-  cursor: pointer;
+.t-swiper__arrow {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-
-.t-comment {
+.t-swiper__arrow svg.t-icon {
   width: 100%;
-  color: var(--td-text-color-primary);
+  height: 100%;
+}
+.t-swiper__arrow svg.t-icon::before {
+  font-size: 24px;
+}
+.t-swiper__arrow--default .t-swiper__arrow-left {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-white-2);
+  cursor: pointer;
+  left: 16px;
+}
+.t-swiper__arrow--default .t-swiper__arrow-left:hover {
+  color: var(--td-bg-color-container);
+  background-color: var(--td-font-white-4);
+}
+.t-swiper__arrow--default .t-swiper__arrow-left:active {
+  background-color: var(--td-font-white-3);
+}
+.t-swiper__arrow--default .t-swiper__arrow-right {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-white-2);
+  cursor: pointer;
+  right: 16px;
+}
+.t-swiper__arrow--default .t-swiper__arrow-right:hover {
+  color: var(--td-bg-color-container);
+  background-color: var(--td-font-white-4);
+}
+.t-swiper__arrow--default .t-swiper__arrow-right:active {
+  background-color: var(--td-font-white-3);
+}
+.t-swiper-card .t-swiper__container {
+  display: block;
+}
+.t-swiper-card .t-swiper__container .t-is-active {
+  z-index: 2;
+}
+.t-swiper-card .t-swiper__card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 41.5%;
+  height: 100%;
+  z-index: 0;
+}
+.t-swiper-fade .t-swiper__container {
+  display: block;
+}
+.t-swiper-fade .t-swiper__fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.t-swiper__navigation {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 2;
+}
+.t-swiper__navigation > li {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  list-style-type: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 6px;
+  padding: 18px 0;
+  width: 14px;
+  height: auto;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 3px;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 24px;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--vertical .t-swiper__container {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-swiper--vertical .t-swiper__navigation {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  left: auto;
+  right: 0;
+  bottom: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 6px 0 0 0;
+  padding: 0 18px;
+  width: auto;
+  height: 14px;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 3px;
+  height: 100%;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 24px;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--outside .t-swiper__navigation {
+  bottom: -36px;
+}
+.t-swiper--outside .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation {
+  bottom: auto;
+  right: -36px;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation {
+  bottom: 0;
+}
+.t-swiper--inside .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--large .t-swiper__arrow i.t-icon::before {
+  font-size: 32px;
+}
+.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-left {
+  width: 32px;
+  height: 32px;
+  left: 24px;
+}
+.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-right {
+  width: 32px;
+  height: 32px;
+  right: 24px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 9px;
+  padding: 27px 0;
+  width: 21px;
+  height: auto;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 4px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 36px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -40px;
+  height: 28px;
+  line-height: 28px;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 20px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation {
+  bottom: -54px;
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 9px 0 0 0;
+  padding: 0 27px;
+  width: auto;
+  height: 21px;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 4px;
+  height: 100%;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 36px;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
+  right: -54px;
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__arrow i.t-icon::before {
+  font-size: 16px;
+}
+.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-left {
+  width: 16px;
+  height: 16px;
+  left: 8px;
+}
+.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-right {
+  width: 16px;
+  height: 16px;
+  right: 8px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 3px;
+  padding: 9px 0;
+  width: 9px;
+  height: auto;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 2px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 15px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -34px;
+  height: 22px;
+  line-height: 22px;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 14px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation {
+  bottom: -18px;
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 3px 0 0 0;
+  padding: 0 9px;
+  width: auto;
+  height: 9px;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 2px;
+  height: 100%;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 15px;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
+  right: -18px;
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+
+.t-comment {
+  width: 100%;
+  color: var(--td-text-color-primary);
 }
 .t-comment__inner {
   display: -webkit-box;
@@ -13426,6 +14398,11 @@ small.t-upload__tips-error {
 }
 .t-transfer__list-content .t-checkbox-group {
   width: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 4px;
 }
 .t-transfer__list-content .t-checkbox-group .t-checkbox {
   margin-right: 8px;
@@ -13446,7 +14423,7 @@ small.t-upload__tips-error {
   display: -ms-flexbox;
   display: flex;
   cursor: pointer;
-  margin: 4px 8px 0px 8px;
+  margin: 0 8px;
   border-radius: 3px;
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);