html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

main {
  display: block;
}

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

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

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

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

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

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[hidden],
template {
  display: none;
}

:root {
  --bg: #fafafa;
  --bg-grey: #efefef;
  --bg-grey-border: #dedede;
  --light-grey: #999;
  --dark-grey: #7e7e7e;
  --btn-light-grey: hsla(0, 0%, 85%, 0.3);
  --btn-grey: #c7c7c7;
  --grey: #777;
  --text-color: #000;
  --light-text-color: #333;
  --text-unactive: #7e7e7e;
  --udn-red: #d64937;
  --udn-blue: #2f76aa;
  --udn-orange: #ee5103;
  --udn-pink: #e36b6a;
  --udn-travel: #00becc;
  --udn-orange-alpha: rgba(244, 108, 0, 0.3);
  --udn-orange-alpha-2: rgba(244, 108, 0, 0.1);
  --mynews-bg-color: rgba(0, 0, 0, 0.4);
  --border-pixel: 3px;
  --breaking-gap: 25px;
  --article-color: #000;
  --section-gap: 20px;
  --list-gap: 15px;
  --news-gap: 30px;
  --header-gap: 20px;
  --cate-gap: 50px;
  --aside-padding-gap: 40px;
  --btn-social-facebook: #1877f2;
  --btn-social-youtube: red;
  --btn-social-instagram: #c32aa3;
  --btn-social-whatsapp: #c32aa3;
  --btn-social-line: #00c300;
  --index-slider-range: 210px;
  --regular-weight: 300;
  --medium-weight: 400;
  --bold-weight: 500;
}

@media screen and (max-width: 1297px) {
  :root {
    --news-gap: 20px;
    --list-gap: 10px;
    --aside-padding-gap: 10px;
    --section-gap: 15px;
    --index-slider-range: 140px;
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --aside-padding-gap: 0;
    --news-gap: 15px;
    --index-slider-range: 20px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --section-gap: 30px;
    --news-gap: 25px;
    --header-gap: 15px;
    --cate-gap: 30px;
    --breaking-gap: 15px;
    --index-slider-range: 0;
    --regular-weight: 400;
  }
}

@keyframes fade {
  0% {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

@keyframes steeringWheel {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-50deg);
  }

  80%,
  to {
    transform: rotate(3turn);
  }
}

@keyframes bounceAlpha {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  25% {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
  }

  26% {
    opacity: 0;
    transform: translateX(-10px) scale(0.9);
  }

  55% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes swipeLeftAndRemoveHeight {
  50% {
    transform: translateX(-100%);
  }

  to {
    height: 0;
    opacity: 0;
    padding: 0;
    visibility: hidden;
  }
}

@keyframes pulseBig {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(2.5);
  }

  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes pulse {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(1.8);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes wobbleRight {
  16.65% {
    transform: translateX(2px);
  }

  33.33% {
    transform: translateX(-2px);
  }

  49.95% {
    transform: translateX(1px);
  }

  66.6% {
    transform: translateX(-1px);
  }

  83.25% {
    transform: translateX(0);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes strikeThrought {
  0% {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes wobble {
  16.65% {
    transform: translateY(6px);
  }

  33.33% {
    transform: translateY(-5px);
  }

  49.95% {
    transform: translateY(4px);
  }

  66.6% {
    transform: translateY(-2px);
  }

  83.25% {
    transform: translateY(1px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes wobbleRightForNavigationArrow {
  0% {
    transform: translate(25px, -50%);
  }

  10% {
    transform: translate(28px, -50%);
  }

  20% {
    transform: translate(25px, -50%);
  }

  80% {
    transform: translate(25px, -50%);
  }

  90% {
    transform: translate(28px, -50%);
  }

  to {
    transform: translate(25px, -50%);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes shine-holder {
  0% {
    background-position-x: 0;
  }

  40%,
  to {
    background-position-x: -200%;
  }
}

@keyframes bounceInLeft {
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

[v-cloak] {
  opacity: 0;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

html {
  font-family: Noto Sans TC, 黑體-繁, Apple LiGothic Medium, PingFang,
    微軟正黑體, Microsoft JhengHei, WenQuanYi Zen Hei, helvetica, Arial,
    sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  letter-spacing: 1px;
}

html.ie-incompatible {
  background: #fafafa;
  display: table;
  height: 100%;
  left: 0;
  position: relative;
  position: absolute;
  top: 0;
  width: 100%;
}

::-moz-selection {
  background-color: #ee5103;
  background-color: var(--udn-orange);
  color: #fff;
}

::selection {
  background-color: #ee5103;
  background-color: var(--udn-orange);
  color: #fff;
}

body {
  background: #fafafa;
  background: var(--bg);
  color: #000;
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

body.classification-open {
  overflow: hidden;
}

.ie-incompatible body {
  display: table-cell;
  vertical-align: middle;
}

.ie-incompatible body:before {
  background-image: url("logo-1.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  content: "糟糕，udn.com 已不再支援舊版的瀏覽器，請更新至新版瀏覽器，感謝您的配合";
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 50px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.ie-incompatible body > * {
  display: none;
}

button,
input {
  font-family: Noto Sans TC, 黑體-繁, Apple LiGothic Medium, PingFang,
    微軟正黑體, Microsoft JhengHei, WenQuanYi Zen Hei, helvetica, Arial,
    sans-serif;
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  font-weight: var(--bold-weight);
}

time {
  font-family: Arial, Helvetica, sans-serif;
}

input {
  border: 0;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  padding: 8px 10px;
}

input:focus {
  outline-color: #ee5103;
  outline-color: var(--udn-orange);
  outline-style: inset;
}

input:-ms-input-placeholder,
input::-webkit-input-placeholder,
input::placeholder {
  color: #7e7e7e;
  color: var(--text-unactive);
}

b,
strong {
  font-weight: 500;
  font-weight: var(--bold-weight);
}

a {
  color: #000;
  color: var(--text-color);
  text-decoration: none;
}

a:focus,
a:hover {
  color: #2f76aa;
  color: var(--udn-blue);
  outline: 0;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}

@media screen and (max-width: 1297px) {
  .container {
    max-width: 970px;
  }
}

@media screen and (max-width: 1023px) {
  .container {
    max-width: 740px;
    padding: 0 10px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding: 0 20px;
  }
}

@media screen and (max-width: 320px) {
  .container {
    padding: 0 10px;
  }
}

.text-number {
  font-family: Arial, Helvetica, sans-serif;
}

.text-black {
  color: #000;
  color: var(--text-color);
}

.text-orange {
  color: #ee5103;
  color: var(--udn-orange);
}

.text-red {
  color: #d64937;
  color: var(--udn-red);
}

.text-blue {
  color: #2f76aa;
  color: var(--udn-blue);
}

.text-grey {
  color: #575757;
}

.newsletter {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  font-size: 13px;
  padding: 0 15px;
}

@media screen and (max-width: 767px) {
  .newsletter {
    justify-content: center;
    padding: 15px 0 0;
    width: 100%;
  }
}

.newsletter input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  font-size: 13px;
  width: 180px;
}

.newsletter .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  width: 60px;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.list-ellipsis {
  display: inline-block;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.list-ellipsis:before {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "▪";
  display: inline-block;
  margin-right: 5px;
}

.list-ellipsis:first-of-type {
  margin-top: 12px;
}

.arrow-icon,
.arrow-icon:before {
  display: inline-block;
}

.arrow-icon:before {
  color: #ee5103;
  color: var(--udn-orange);
  content: "\e800";
  font-family: fontello;
  margin-right: 3px;
}

.btn {
  align-items: center;
  border: 0;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  justify-content: center;
  line-height: 1.25;
  outline: 0;
  padding: 0 10px;
  text-align: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.btn[data-state="loading"] {
  cursor: not-allowed;
  position: relative;
}

.btn[data-state="loading"]:after,
.btn[data-state="loading"]:before {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.btn[data-state="loading"]:before {
  background: #c7c7c7;
  background: var(--btn-grey);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
}

.btn[data-state="loading"]:after {
  animation: spin 2s linear infinite;
  content: "\E834";
  font-family: fontello;
}

.btn.disabled,
.btn[data-state="invalid"],
.btn[data-state="unchecked"] {
  background-color: hsla(0, 0%, 78%, 0.8);
  cursor: not-allowed;
  opacity: 0.8;
}

.btn.disabled:hover,
.btn[data-state="invalid"]:hover,
.btn[data-state="unchecked"]:hover {
  background-color: background hsla(0, 0%, 78%, 0.8);
}

.btn-box {
  height: 30px;
  width: 90px;
}

.btn-box,
.btn-follow {
  font-size: 13px;
  margin: 0 10px;
}

.btn-follow {
  border: 1px solid #dedede;
  border: 1px solid var(--bg-grey-border);
  color: #7e7e7e;
  color: var(--text-unactive);
  line-height: 1;
  overflow: hidden;
  padding: 7.5px 14.5px 7.5px 9.5px;
  position: relative;
}

.btn-follow:after {
  background: hsla(0, 0%, 100%, 0.3);
  border-radius: 100%;
  content: "";
  display: block;
  height: 120px;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  visibility: hidden;
  width: 120px;
}

.btn-follow:focus:after {
  visibility: visible;
}

.btn-follow:not(:active):after {
  animation: ripple-animation 0.6s ease-out;
}

@media screen and (max-width: 767px) {
  .btn-follow {
    display: flex;
  }
}

.btn-follow:before {
  content: "\e842";
  display: inline-block;
  font-family: fontello;
  margin-right: 5px;
}

.btn-follow.subscribed {
  background: #2f76aa;
  background: var(--udn-blue);
  border-color: transparent;
  color: #fff;
}

.btn-follow.subscribed:before {
  content: "\e841";
}

.btn-vote {
  font-size: 18px;
  line-height: 45px;
  padding: 0 20px;
  text-align: center;
  width: 150px;
}

.btn-collapse {
  text-align: center;
  width: 100px;
}

.btn-collapse:after {
  content: "\38";
  display: inline-block;
  font-family: fontello;
  font-size: 18px;
  margin-left: 5px;
}

.btn-indicator {
  font-size: 20px;
  min-height: 1px;
  position: relative;
}

.btn-more {
  background: #c7c7c7;
  background: var(--btn-grey);
  color: #fff;
  overflow: hidden;
  overflow-anchor: none;
  padding: 6px 40px;
}

.btn-more .i-arrow5-down:after {
  margin-right: 0;
}

.btn-more i {
  pointer-events: none;
  width: 18px;
}

@media (any-hover: hover) {
  .btn-more:hover i {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: wobble;
    animation-timing-function: linear;
  }
}

.btn-more[data-state="fetching"],
.btn-more[data-state="finished"] {
  display: none;
}

.btn-more[data-state="loading"] {
  cursor: not-allowed;
  font-size: 0;
  opacity: 0.7;
  padding: 6px 10px;
}

.btn-more[data-state="loading"]:hover {
  padding-right: 10px;
}

@media screen and (max-width: 1023px) {
  .btn-more[data-state="loading"]:hover {
    padding-right: 10px;
  }
}

.btn-more[data-state="loading"] i {
  animation: spin 2s linear infinite;
  font-size: 15px;
  height: 20px;
  transform: translateX(0);
  width: 20px;
  z-index: 1;
}

.btn-more[data-state="loading"] i:before {
  content: "\e834";
}

.btn-social {
  color: #999;
  color: var(--light-grey);
  font-size: 24px;
}

.btn-social:hover {
  color: #2f76aa;
  color: var(--udn-blue);
}

.btn-holder {
  display: flex;
  flex-flow: row wrap;
}

.btn-holder--right {
  justify-content: flex-end;
}

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

.btn-holder .btn-more {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.btn-border {
  border-radius: 3px;
  border-radius: var(--border-pixel);
  border-style: solid;
  border-width: 1px;
  padding: 5px 10px;
}

.btn-border--orange {
  border-color: rgba(244, 108, 0, 0.3);
  border-color: var(--udn-orange-alpha);
  color: #ee5103;
  color: var(--udn-orange);
}

.btn-border--orange:visited {
  color: #ee5103;
  color: var(--udn-orange);
  opacity: 0.9;
}

.btn-border--orange:hover {
  border-color: rgba(214, 73, 55, 0.3);
  color: #d64937;
  color: var(--udn-red);
}

.btn-border--blue {
  border-color: rgba(47, 118, 170, 0.3);
  color: #2f76aa;
  color: var(--udn-blue);
}

.btn-border--blue:visited {
  color: #2f76aa;
  color: var(--udn-blue);
  opacity: 0.9;
}

.btn-border--blue:hover {
  border-color: rgba(214, 73, 55, 0.3);
  color: #d64937;
  color: var(--udn-red);
}

.btn-border--blue.disabled {
  border-color: #7e7e7e;
  border-color: var(--text-unactive);
  color: #000;
  color: var(--text-color);
}

.btn-border--grey {
  border-color: hsla(0, 0%, 64%, 0.3);
  color: #7e7e7e;
  color: var(--text-unactive);
}

.btn-border--grey:visited {
  color: #7e7e7e;
  color: var(--text-unactive);
  opacity: 0.9;
}

.btn-blue {
  background: #2f76aa;
  background: var(--udn-blue);
  color: #fff;
}

.btn-blue:focus,
.btn-blue:visited {
  color: #fff;
  opacity: 0.9;
}

.btn-blue:hover {
  background: #d64937;
  background: var(--udn-red);
  color: #fff;
}

.btn-dark-grey {
  background: #7e7e7e;
  background: var(--dark-grey);
  color: #fff;
}

.btn-dark-grey:visited {
  color: #fff;
  opacity: 0.9;
}

.btn-dark-grey:hover {
  color: #fff;
  opacity: 0.8;
}

.btn-grey {
  background: hsla(0, 0%, 85%, 0.3);
  background: var(--btn-light-grey);
  color: #7e7e7e;
  color: var(--text-unactive);
}

.btn-grey:visited {
  color: #fff;
  opacity: 0.9;
}

.btn-grey:hover {
  background: #c7c7c7;
  background: var(--btn-grey);
  color: #fff;
}

.btn-red {
  background: #d64937;
  background: var(--udn-red);
  color: #fff;
}

.btn-red:visited {
  color: #fff;
  opacity: 0.9;
}

.btn-red:hover {
  color: #fff;
}

.btn-orange {
  background: #ee5103;
  background: var(--udn-orange);
  color: #fff;
}

.btn-orange:visited {
  color: #fff;
  opacity: 0.9;
}

.btn-orange:hover {
  background: rgba(244, 108, 0, 0.3);
  background: var(--udn-orange-alpha);
  color: #fff;
}

.btn-icon {
  align-items: center;
  display: flex;
  height: 25px;
  justify-content: center;
  padding: 0;
  width: 25px;
}

.btn-icon-side {
  padding-left: 5px;
}

.btn-icon-side:before,
.btn-icon:before {
  font-family: fontello;
}

.btn-icon:before {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: center;
  left: 0.5px;
  position: relative;
  width: 30px;
}

.btn-like {
  display: none !important;
}

.btn-like:before {
  content: "\e83c";
}

.btn-like-filled:before,
.btn-like:hover {
  color: #d64937;
  color: var(--udn-red);
}

.btn-like-filled:before {
  content: "\e83a";
}

.btn-bookmark--cancel {
  background-image: url("bookmark-cancel.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 24px;
  width: 24px;
}

.btn-bookmark.btn-bookmark--filled i:before {
  content: "\e840";
}

.btn-indicator[data-state="loading"]:before {
  background-color: transparent;
  background-image: url("udn-loading.webp");
  background-image: url("udn-loading.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  height: 50px;
  position: static;
  width: 50px;
}

.btn-indicator[data-state="loading"]:after {
  display: none;
}

.btn-indicator--sm:before {
  height: 30px;
  width: 30px;
}

.btn-setting {
  font-size: 20px;
}

.btn-setting:before {
  content: "\e8b7";
}

.btn-social--facebook:hover {
  color: #1877f2;
  color: var(--btn-social-facebook);
}

.btn-social--line:hover {
  color: #00c300;
  color: var(--btn-social-line);
}

.btn-social--whatsapp:hover {
  color: #c32aa3;
  color: var(--btn-social-whatsapp);
}

.btn-ripple {
  overflow: hidden;
  position: relative;
}

.btn-ripple:after {
  background: hsla(0, 0%, 100%, 0.3);
  border-radius: 100%;
  content: "";
  display: block;
  height: 120px;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
  transform: scale(0);
  visibility: hidden;
  width: 120px;
}

.btn-ripple:focus:after {
  visibility: visible;
}

.btn-ripple:not(:active):after {
  animation: ripple-animation 0.6s ease-out;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0);
  }

  20% {
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1);
  }
}

.keywords .btn {
  line-height: 28px;
  margin-bottom: 8px;
  margin-right: 8px;
  padding: 0 10px;
}

.keywords .btn:last-of-type {
  margin-right: 0;
}

.thumb-list {
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}

.thumb-list__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  display: inline-block;
  display: -webkit-box;
  font-size: 19px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.4;
  margin: 0 0 0 15px;
  max-height: calc(1em * 1.4 * 4);
  overflow: hidden;
  width: calc(100% - 120px);
}

.thumb-list img {
  font-family: "object-fit: cover;";
  height: 100px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 160px;
}

.thumb-list img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

.main-content {
  display: block;
  margin-top: 25px;
  margin-top: var(--breaking-gap);
}

.thumb-news {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
  padding-right: 40px;
  padding-right: var(--aside-padding-gap);
}

.thumb-news--big.context-box {
  overflow: visible;
}

.thumb-news__button {
  border-top: 1px solid #dedede;
  border-top: 1px solid var(--bg-grey-border);
}

.thumb-news__button--nb {
  border-top: 0;
}

.rounded-thumb__title {
  font-size: 16px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.6;
  margin: 0;
  overflow: hidden;
  padding-left: 5px;
  width: calc(100% - var(--pic-width));
}

@media screen and (max-width: 1023px) {
  .rounded-thumb__title {
    padding: 0 5px;
  }
}

.rounded-thumb__title:empty {
  display: flex;
  flex-flow: column nowrap;
}

.rounded-thumb__title:empty:after,
.rounded-thumb__title:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.rounded-thumb__title:empty:after {
  background-color: #ddd;
  width: 75%;
}

.rounded-thumb__title a {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: inline-block;
  display: -webkit-box;
  line-height: 1.4;
  max-height: calc(1em * 1.4 * 2);
  overflow: hidden;
}

.rounded-thumb__title a:empty {
  display: flex;
  flex-flow: column nowrap;
}

.rounded-thumb__title a:empty:after,
.rounded-thumb__title a:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.rounded-thumb__title a:empty:after {
  background-color: #ddd;
  width: 75%;
}

.rounded-thumb__list {
  --pic-width: 50px;
  --pic-height: 50px;
  display: flex;
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
  overflow: hidden;
  padding-left: 5px;
  position: relative;
}

.main-index .rounded-thumb__list {
  overflow: visible;
}

.rounded-thumb__list:last-of-type {
  margin-bottom: 0;
}

.rounded-thumb__list:first-child {
  margin-top: 15px;
  margin-top: var(--list-gap);
}

.rounded-thumb__list img {
  font-family: "object-fit: cover;";
  height: var(--pic-height);
  -o-object-fit: cover;
  object-fit: cover;
  width: var(--pic-width);
}

@media screen and (max-width: 1023px) {
  .rounded-thumb__list {
    padding: 5px 0;
  }
}

@media screen and (max-width: 767px) {
  .rounded-thumb__list {
    padding: 0;
  }
}

.rounded-thumb__image {
  border-radius: 50%;
  display: inline-block;
  font-size: 0;
  height: var(--pic-width);
  overflow: hidden;
  position: relative;
  width: var(--pic-width);
}

.rounded-thumb__image:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(1 / 1 * 100%);
  width: 100%;
}

.rounded-thumb__image img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.rounded-thumb__image img.lazyload:not([src]),
.rounded-thumb__image img.lazyloading:not([src]) {
  visibility: hidden;
}

.rounded-thumb__image img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .rounded-thumb__image img {
    transition: transform 0.3s linear;
  }
}

.author-thumb {
  display: inline-block;
  height: 32px;
  position: relative;
  width: 32px;
}

.author-thumb__name {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .author-thumb__name {
    font-size: 18px;
  }
}

.author-thumb__info {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #777;
  display: inline-block;
  display: -webkit-box;
  font-size: 16px;
  line-height: 1.45;
  margin-top: 10px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .author-thumb__info {
    font-size: 14px;
    margin: 8px 5px 0;
  }
}

.author-thumb--big {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: inherit;
  justify-content: center;
  min-width: 147px;
}

@media screen and (max-width: 767px) {
  .author-thumb--big {
    margin-bottom: 5px;
  }
}

.author-thumb--big img {
  height: 147px;
  margin-bottom: 10px;
  width: 147px;
}

@media screen and (max-width: 767px) {
  .author-thumb--big img {
    height: 122px;
    width: 122px;
  }

  .author-thumb:not(.author-thumb--big) {
    height: 28px;
    width: 28px;
  }
}

.author-thumb:not(:first-child) {
  transform: translateX(-1px);
}

.author-thumb__holder {
  display: flex;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.author-thumb:hover {
  z-index: 1;
}

.author-thumb:hover:not(.author-thumb--big) img {
  outline-color: #7e7e7e;
  outline-color: var(--dark-grey);
}

.author-thumb img {
  aspect-ratio: 1/1;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  outline-color: #fafafa;
  outline-style: solid;
  outline-width: 1px;
  transition: outline-color 0.2s ease-in-out;
  width: 100%;
}

.dialog-actions {
  align-items: stretch;
  color: #000;
  color: var(--text-color);
  color: #7e7e7e;
  color: var(--text-unactive);
  display: flex;
  flex-flow: column wrap;
  font-size: 15px;
  text-align: center;
}

.dialog-actions .btn {
  background: #f8f8f8;
  border-bottom: 1px solid #fff;
  padding: 10px 0;
}

.dialog-actions .btn:last-child {
  border-bottom: 0;
}

.article-total {
  font-size: 15px;
}

@media screen and (max-width: 767px) {
  .article-total {
    font-size: 13px;
  }
}

.article-total span {
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  .article-total span {
    font-size: 15px;
  }
}

.context-box {
  font-size: 18px;
  overflow: hidden;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .context-box {
    content-visibility: auto;
    overflow: visible;
  }
}

.context-box:not(.custom-menu) {
  overflow: visible;
}

.context-box--tagging .context-box__header--start {
  flex-flow: row nowrap;
}

.context-box--tagging .context-box__title {
  flex-shrink: 0;
}

.context-box--collapsable {
  background: #fff;
  cursor: pointer;
}

.context-box--collapsable.hide {
  background: hsla(0, 0%, 100%, 0.6);
}

.context-box--collapsable.hide .context-box__content {
  line-height: 0;
  opacity: 0;
  padding-bottom: 0;
  padding-top: 0;
  visibility: hidden;
}

.context-box--collapsable.hide .list-box li {
  height: 0;
}

.context-box--collapsable.hide .btn-collapse:after {
  transform: rotate(0);
}

.context-box--collapsable .context-box__content {
  line-height: 1.4;
  overflow: hidden;
  transition: all 0.3s linear;
}

.context-box--collapsable .context-box__title {
  border-bottom: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .context-box--collapsable .context-box__title {
    font-size: 15px;
  }
}

.context-box--collapsable .context-box__content,
.context-box--collapsable .context-box__header {
  margin-bottom: 0;
}

.context-box--collapsable .context-box__header {
  padding: 10px 65px;
}

@media screen and (max-width: 767px) {
  .context-box--collapsable .context-box__header {
    padding: 10px 20px;
  }
}

.context-box--collapsable .context-box__content {
  padding: 0 65px 30px;
}

@media screen and (max-width: 767px) {
  .context-box--collapsable .context-box__content {
    padding: 0 10px 20px;
  }
}

.context-box--collapsable .btn-collapse:after {
  transform: rotate(0.5turn);
  transition: transform 0.3s linear;
}

@media screen and (max-width: 767px) {
  .context-box--collapsable .btn-collapse {
    font-size: 14px;
  }
}

.context-box__lists {
  background: #fff;
  font-size: 18px;
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
  padding: 35px;
}

.context-box__lists .context-box__content {
  padding: 0 60px;
}

@media screen and (max-width: 767px) {
  .context-box__lists .context-box__content {
    padding: 0;
  }
}

.context-box__lists .list-box {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .context-box__lists .list-box {
    flex-flow: column wrap;
  }
}

.context-box__lists .list-box li {
  padding: 0 5px;
  width: 25%;
}

.context-box__lists--full.context-box__lists .list-box li {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .context-box__lists .list-box li {
    width: 100%;
  }
}

.context-box__lists .list-box .list-ellipsis {
  display: flex;
  overflow: visible;
  white-space: normal;
}

.context-box__author {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 50px;
  margin-bottom: var(--cate-gap);
  padding: 0 25px;
  position: relative;
}

.context-box__author .article-total {
  bottom: calc(calc(50px + 36px) * -1);
  bottom: calc(calc(var(--cate-gap) + 36px) * -1);
  position: absolute;
  right: 0;
}

@media screen and (max-width: 767px) {
  .context-box__author .article-total {
    display: none;
  }

  .context-box__author {
    flex-flow: column wrap;
    margin-bottom: 20px;
    padding: 0;
  }
}

.context-box__author .author-name {
  color: #000;
  color: var(--text-color);
  font-size: 24px;
  margin: 0;
}

.context-box__author .author-info {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  padding: 0 0 10px;
}

.context-box__author .author-bio,
.context-box__author .author-info,
.context-box__author .author-social a {
  color: #7e7e7e;
  color: var(--dark-grey);
}

.context-box__author .author-social a:hover {
  color: #2f76aa;
  color: var(--udn-blue);
}

.context-box__author .author-holder {
  font-size: 15px;
  line-height: 1.4;
  padding-left: 20px;
  width: calc(100% - 200px);
}

@media screen and (max-width: 767px) {
  .context-box__author .author-holder {
    padding: 10px 0;
    width: 100%;
  }
}

.context-box__author .author-image {
  align-self: center;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 200px;
}

.context-box__author .author-image:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(2 / 3 * 100%);
  width: 100%;
}

.context-box__author .author-image img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.context-box__author .author-image img.lazyload:not([src]),
.context-box__author .author-image img.lazyloading:not([src]) {
  visibility: hidden;
}

.context-box__author .author-image img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .context-box__author .author-image img {
    transition: transform 0.3s linear;
  }
}

.context-box__author .author-image img {
  height: 133.333px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 200px;
}

.context-box--mag .context-box__content {
  font-size: 15px;
  line-height: 22px;
  padding-top: 10px;
  text-align: justify;
}

@media screen and (max-width: 767px) {
  .context-box--mag .context-box__content {
    font-size: 13px;
  }
}

.context-box__header {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  line-height: 1.5;
  margin-bottom: 20px;
  margin-bottom: var(--header-gap);
  position: relative;
}

.context-box--mag .context-box__header {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  margin-bottom: 10px;
}

.context-box__header .article-total {
  bottom: 0;
  position: absolute;
  right: 0;
}

@media screen and (max-width: 767px) {
  .cate-list--mynews .context-box__header .article-total {
    display: none;
  }
}

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

.context-box__header--start .context-box__title + .context-box__title {
  margin-left: 40px;
}

@media screen and (max-width: 1297px) {
  .context-box__header--start .context-box__title + .context-box__title {
    margin-left: 20px;
  }
}

.context-box__header--selectable .context-box__title {
  color: #7e7e7e;
  color: var(--dark-grey);
  will-change: font-weight;
}

.context-box__header--selectable .context-box__title.active,
.context-box__header--selectable .context-box__title:hover,
.context-box__header--selectable .context-box__title:hover a {
  color: #000;
  color: var(--text-color);
}

.context-box__header--selectable .context-box__title a {
  color: #7e7e7e;
  color: var(--dark-grey);
}

.context-box__header--selectable.context-box__header--box
  .context-box__header__wrap,
.context-box__header--selectable.context-box__header--box .context-box__title {
  border-bottom: 0;
}

.context-box__header--selectable.context-box__header--box
  .context-box__header__wrap {
  display: flex;
}

.context-box__header--selectable.context-box__header--box .context-box__title {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--bg-grey-border);
  font-size: 20px;
  padding: 5px 20px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:first-child,
.context-box__header--selectable.context-box__header--box
  .context-box__title:last-child {
  position: relative;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:first-child:before,
.context-box__header--selectable.context-box__header--box
  .context-box__title:last-child:before {
  background: #dedede;
  background: var(--bg-grey-border);
  bottom: -1px;
  content: "";
  height: 1px;
  position: absolute;
  width: 5px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:first-child {
  margin-left: 5px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:first-child:before {
  left: -5px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:last-child {
  margin-right: 5px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title:last-child:before {
  right: -5px;
}

.context-box__header--selectable.context-box__header--box
  .context-box__title.active {
  border-bottom-color: transparent;
  border-left-color: #dedede;
  border-left-color: var(--bg-grey-border);
  border-right-color: #dedede;
  border-right-color: var(--bg-grey-border);
  border-top-color: #dedede;
  border-top-color: var(--bg-grey-border);
  color: #2f76aa;
  color: var(--udn-blue);
  font-weight: 300;
}

.context-box__header__wrap {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
}

.context-box__logo {
  display: inline-block;
  margin: 10px 10px 10px 0;
  max-width: 100px;
  width: 100%;
}

.context-box__title {
  border-bottom: 1px solid #ee5103;
  border-bottom: 1px solid var(--udn-orange);
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin: 0;
}

@media screen and (max-width: 1297px) {
  .context-box__title {
    font-size: 21px;
  }
}

@media screen and (max-width: 767px) {
  .context-box__title {
    font-size: 19px;
  }
}

.context-box--mag .context-box__title {
  border-bottom: 0;
  font-size: 20px;
  font-weight: 500;
  font-weight: var(--bold-weight);
  line-height: 1.3;
}

.context-box__title--pseudo {
  border-bottom: 0;
  position: relative;
}

.context-box__title--pseudo.active:after,
.context-box__title--pseudo:focus:after,
.context-box__title--pseudo:hover:after {
  width: 100%;
}

.context-box__title--pseudo:after {
  background: #ee5103;
  background: var(--udn-orange);
  bottom: -1px;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  transition: width 0.3s linear;
  width: 0;
}

.context-box__title.context-box__title--big {
  font-size: 22px;
  font-weight: 300;
  font-weight: var(--regular-weight);
}

@media screen and (max-width: 767px) {
  .context-box__title.context-box__title--big {
    font-size: 18px;
  }
}

.darker-context .context-box__title {
  color: #fff;
}

.context-box__title--orange {
  font-size: 18px;
  margin: 0 0 10px;
}

.context-box__title--orange:before {
  background: #ee5103;
  background: var(--udn-orange);
  border-radius: 12px;
  content: "";
  display: inline-block;
  height: 14px;
  margin-right: 5px;
  width: 6px;
}

.context-box__more {
  padding: 5px 0;
}

.context-box__more:before {
  color: #7e7e7e;
  color: var(--text-unactive);
  content: "\72";
  display: inline-block;
  font-family: fontello;
}

.custom-selection select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("77a8171b7e41e56c188811f07d7af5327a3bbcba.webp");
  background-position: 93% 50%;
  background-repeat: no-repeat;
  background-size: 16px;
  font-size: 14px;
  line-height: 1;
  margin-right: 10px;
  outline: none;
  padding: 5px 26px 5px 10px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .custom-selection select {
    margin-bottom: 5px;
    margin-right: 0;
    margin-top: 5px;
    width: 100%;
  }
}

.custom-selection select:last-of-type {
  margin-right: 0;
}

.input-holder {
  display: flex;
  font-size: 18px;
  justify-content: center;
  margin: 0 auto;
}

.input-holder[role="search"] {
  border-bottom: 1px solid #c7c7c7;
  border-bottom: 1px solid var(--btn-grey);
  max-width: 350px;
}

.input-holder label {
  cursor: pointer;
}

.input-holder .tick-radio,
.input-holder .vote-checkbox,
.input-holder .vote-radio {
  left: -9999px;
  position: absolute;
}

.input-holder .tick-radio:not(:checked) + label:after,
.input-holder .vote-checkbox:not(:checked) + label:after,
.input-holder .vote-radio:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0) translateY(-50%);
}

.input-holder .tick-radio:checked + label:after,
.input-holder .vote-checkbox:checked + label:after,
.input-holder .vote-radio:checked + label:after {
  opacity: 1;
  transform: scale(1) translateY(-50%);
}

.input-holder .tick-radio + label,
.input-holder .vote-checkbox + label,
.input-holder .vote-radio + label {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  font-size: 17px;
  justify-content: center;
  max-width: calc(100% - 130px);
  position: relative;
}

.input-holder .tick-radio + label:after,
.input-holder .tick-radio + label:before,
.input-holder .vote-checkbox + label:after,
.input-holder .vote-checkbox + label:before,
.input-holder .vote-radio + label:after,
.input-holder .vote-radio + label:before {
  transform-origin: top;
  transition: all 0.3s linear;
}

.input-holder .tick-radio + label:before,
.input-holder .vote-checkbox + label:before,
.input-holder .vote-radio + label:before {
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 50%;
  color: #7e7e7e;
  color: var(--dark-grey);
  content: "";
  display: inline-block;
  flex: none;
  font-size: 14px;
  height: 18px;
  line-height: 24px;
  margin: 0 5px;
  text-align: center;
  width: 18px;
}

.input-holder .vote-checkbox + label:after,
.input-holder .vote-radio + label:after {
  background: #ee5103;
  background: var(--udn-orange);
  border-radius: 50%;
  content: "";
  height: 12px;
  left: 9px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}

.input-holder .vote-checkbox:checked + label:before,
.input-holder .vote-radio:checked + label:before {
  border-color: #ee5103;
  border-color: var(--udn-orange);
}

.input-holder .vote-checkbox:checked + label:after,
.input-holder .vote-radio:checked + label:after {
  opacity: 1;
}

.input-holder .vote-checkbox + label:after,
.input-holder .vote-checkbox + label:before {
  border-radius: 0;
}

.input-holder .tick-radio:checked + label:before {
  content: "\e805";
  font-family: fontello;
}

.input-holder .tick-radio + label:first-of-type:before {
  margin-left: 0;
}

.input-holder .tick-radio + label:before {
  height: 24px;
  width: 24px;
}

.input-holder input {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 0;
}

.input-holder input::-moz-placeholder {
  font-weight: 300;
  font-weight: var(--regular-weight);
}

.input-holder input::placeholder {
  font-weight: 300;
  font-weight: var(--regular-weight);
}

.input-holder .btn-search {
  align-items: center;
  display: flex;
  font-size: 30px;
  justify-content: center;
  padding: 0;
}

.input-holder .btn-search i {
  pointer-events: none;
}

.lazyload,
.lazyloading {
  opacity: 0.6;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 1s, filter 1s;
}

.error-container {
  margin: 60px auto;
  max-width: 920px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .error-container {
    margin: 30px auto;
  }
}

.error-actions,
.error-holder {
  color: #7e7e7e;
  color: var(--dark-grey);
  display: flex;
  flex-flow: row wrap;
}

@media screen and (max-width: 1023px) {
  .error-actions,
  .error-holder {
    justify-content: center;
  }
}

.error-text {
  color: #c7c7c7;
  color: var(--btn-grey);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 172px;
  font-weight: 900;
  line-height: 0.85;
  text-align: center;
  width: 500px;
}

@media screen and (max-width: 1023px) {
  .error-text {
    line-height: 1;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .error-text {
    font-size: 90px;
  }
}

.error-info {
  font-size: 24px;
  width: calc(100% - 500px);
}

@media screen and (max-width: 1023px) {
  .error-info {
    width: 335px;
  }
}

@media screen and (max-width: 767px) {
  .error-info {
    font-size: 18px;
    width: 200px;
  }
}

.error-holder {
  align-items: flex-end;
  justify-content: center;
}

@media screen and (max-width: 1023px) {
  .error-holder {
    justify-content: center;
  }
}

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

@media screen and (max-width: 1023px) {
  .error-actions {
    justify-content: center;
    padding: 20px 0;
  }
}

.error-actions .error-canvas,
.error-actions img {
  max-width: 500px;
  width: 100%;
}

.error-actions .input-holder {
  align-self: flex-end;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-bottom: 30px;
  transform: translateX(-40px);
}

.error-actions .input-holder:before {
  content: "復電前，您可以嘗試........";
  display: inline-block;
}

@media screen and (max-width: 1023px) {
  .error-actions .input-holder {
    margin: 20px 0;
    transform: translateX(0);
  }
}

@media screen and (max-width: 767px) {
  .error-actions .input-holder {
    font-size: 14px;
  }
}

.error-actions .input-holder input {
  width: calc(100% - 37px);
}

.error-actions .input-holder .btn-search {
  width: 37px;
}

.error-actions .input-holder > div,
.story-list {
  width: 100%;
}

.story-list__time,
.story-list__view {
  color: #777;
  color: var(--grey);
  font-size: 13px;
  letter-spacing: 0;
  margin: auto 0 0;
  padding: 0 10px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .story-list__time,
  .story-list__view {
    font-size: 13px;
    line-height: 1;
    padding: 0 0 0 4px;
  }
}

.story-list__holder--full .story-list__time,
.story-list__holder--full .story-list__view {
  color: #777;
  color: var(--grey);
  font-size: 14px;
}

.story-list__view {
  align-items: center;
  display: flex;
  height: 16px;
  overflow: visible;
}

.story-list__view i {
  color: #7e7e7e;
  color: var(--dark-grey);
  font-size: 17px;
}

@media screen and (max-width: 767px) {
  .story-list__view {
    display: none;
  }
}

.story-list__holder {
  grid-gap: 30px 15px;
  grid-gap: var(--news-gap) 15px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: flex-start;
}

@media screen and (max-width: 1297px) {
  .story-list__holder {
    grid-gap: 30px 20px;
    grid-gap: var(--news-gap) 20px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder {
    grid-gap: 0;
    display: flex;
    flex-flow: column wrap;
    width: 100%;
  }
}

.story-list__holder .udn-ads {
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
}

.story-list__holder--big,
.story-list__holder--big .story-list__holder--append {
  grid-gap: 30px 26.667px;
  grid-gap: var(--news-gap) 26.667px;
}

@media screen and (max-width: 1297px) {
  .story-list__holder--big {
    grid-gap: 30px 35px;
    grid-gap: var(--news-gap) 35px;
  }
}

.story-list__holder--small {
  --news-gap: 15px;
  grid-template-columns: repeat(auto-fit, calc(50% - 15px));
}

.story-list__holder--small .story-list__holder--append {
  grid-template-columns: repeat(auto-fit, calc(50% - 7.5px));
}

.story-list__holder--small .story-list__video .story-list__image:after {
  --width-height: 30px;
  font-size: 22px;
  left: calc(var(--pic-width) - var(--width-height) - var(--border-gap));
  right: inherit;
}

.story-list__holder--small .story-list__news {
  --pic-width: 200px;
  --pic-height: 133px;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

@media screen and (max-width: 1297px) {
  .story-list__holder--small .story-list__news {
    --pic-width: 150px;
    --pic-height: 100px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder--small .story-list__news {
    --pic-width: 250px;
    --pic-height: 167px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--small .story-list__news {
    --pic-width: 125px;
    --pic-height: 90px;
  }
}

.story-list__holder--small .story-list__text {
  width: calc(100% - var(--pic-width));
}

.story-list__holder--small .story-list__text h2,
.story-list__holder--small .story-list__text h3 {
  padding-top: 0;
}

@media screen and (max-width: 1297px) {
  .story-list__holder--small .story-list__text h2 a,
  .story-list__holder--small .story-list__text h3 a {
    -webkit-line-clamp: 3;
    max-height: calc(1em * 1.4 * 3);
  }
}

.story-list__holder--small .story-list__image {
  width: var(--pic-width);
}

.story-list__holder--grid {
  grid-gap: 10px;
  display: grid;
  flex-wrap: nowrap;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

.story-list__holder--grid .story-list__news {
  --pic-width: 100%;
  --pic-height: 208.33px;
  grid-column: span 1;
  grid-row: span 1;
  margin-bottom: 0;
  max-height: inherit;
}

.story-list__holder--grid .story-list__news:first-child h2,
.story-list__holder--grid .story-list__news:first-child h3 {
  font-weight: 500;
  font-weight: var(--bold-weight);
}

@media screen and (max-width: 1023px) {
  .story-list__holder--grid .story-list__news:first-child h2,
  .story-list__holder--grid .story-list__news:first-child h3 {
    font-weight: 300;
    font-weight: var(--regular-weight);
  }
}

@media screen and (max-width: 1297px) {
  .story-list__holder--grid .story-list__news {
    --pic-height: 156.64px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder--grid .story-list__news {
    --pic-height: 236.64px;
    grid-column: span 2;
    grid-row: span 1;
  }

  .story-list__holder--grid .story-list__news .story-list__image {
    width: 100%;
  }

  .story-list__holder--grid .story-list__news .story-list__text {
    padding: 0;
    width: 100%;
  }

  .story-list__holder--grid .story-list__news .story-list__text p {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid .story-list__news {
    flex-flow: column nowrap;
    height: inherit;
    margin-bottom: 30px;
    margin-bottom: var(--news-gap);
    overflow: visible;
    width: calc(50% - 10px);
  }

  .story-list__holder--grid .story-list__news img {
    height: 100%;
  }
}

.story-list__holder--grid .story-list__news:first-child {
  --pic-height: 423.33px;
  grid-column: span 2;
  grid-row: span 2;
}

@media screen and (max-width: 1297px) {
  .story-list__holder--grid .story-list__news:first-child {
    --pic-height: 319.95px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder--grid .story-list__news:first-child {
    --pic-height: 479.95px;
    grid-column: span 4;
    grid-row: span 2;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid .story-list__news:first-child {
    width: 100%;
  }

  .story-list__holder--grid .story-list__news:first-child .story-list__image {
    overflow: visible;
  }

  .story-list__holder--grid .story-list__news:first-child img {
    font-family: "object-fit: cover";
    height: 100%;
    margin: 0 calc(-50vw + 50%);
    max-width: 100vw;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100vw;
  }
}

.story-list__holder--grid .story-list__news:first-child .story-list__text {
  border-left: 1px solid #ee5103;
  border-left: 1px solid var(--udn-orange);
  margin: 15px 0;
  padding: 0 24px;
}

@media screen and (max-width: 1023px) {
  .story-list__holder--grid .story-list__news:first-child .story-list__text {
    margin: 10px 0;
    padding: 0 10px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid .story-list__news:first-child .story-list__text {
    border-left: 0;
    margin: 0;
    padding: 0;
  }
}

.story-list__holder--grid .story-list__news:first-child .story-list__text h2,
.story-list__holder--grid .story-list__news:first-child .story-list__text h3 {
  padding: 0;
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid .story-list__news:first-child .story-list__text h2,
  .story-list__holder--grid .story-list__news:first-child .story-list__text h3 {
    font-weight: 300;
    font-weight: var(--regular-weight);
    padding: 5px 0 10px;
  }
}

.story-list__holder--grid .story-list__news:first-child .story-list__text h2 a,
.story-list__holder--grid .story-list__news:first-child .story-list__text h3 a {
  -webkit-line-clamp: 1;
  font-size: 33px;
  max-height: calc(1em * 1.5);
}

@media screen and (max-width: 1297px) {
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h2
    a,
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h3
    a {
    font-size: 28px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h2
    a,
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h3
    a {
    font-size: 24px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h2
    a,
  .story-list__holder--grid
    .story-list__news:first-child
    .story-list__text
    h3
    a {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: inline-block;
    display: -webkit-box;
    font-size: 18px;
    line-height: 1.25;
    max-height: calc(1em * 1.25 * 2);
    overflow: hidden;
  }
}

.story-list__holder--grid .story-list__news:first-child .story-list__text p {
  display: block;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .story-list__holder--grid .story-list__news:first-child .story-list__text p {
    display: none;
  }
}

.story-list__holder--append {
  grid-gap: 30px 15px;
  grid-gap: var(--news-gap) 15px;
  display: grid;
  grid-column-end: -1;
  grid-column-start: 1;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: flex-start;
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
  width: 100%;
}

.story-list__holder--append:empty {
  margin-bottom: 0;
}

@media screen and (max-width: 1297px) {
  .story-list__holder--append {
    grid-gap: 30px 20px;
    grid-gap: var(--news-gap) 20px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__holder--append {
    display: flex;
    flex-flow: column wrap;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--append {
    margin: 0 0 30px;
    margin: 0 0 var(--news-gap);
  }
}

.story-list__holder + .story-list__holder {
  padding-top: 0;
}

.story-list__holder.story-list__holder--full {
  grid-gap: 0;
  display: flex;
  flex-flow: column wrap;
}

.story-list__holder.story-list__holder--full .story-list__holder--append {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.story-list__holder.story-list__holder--full
  .story-list__holder--append
  .story-list__news {
  margin-bottom: 0;
}

.story-list__holder.story-list__holder--full .story-list__news {
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
}

@media screen and (max-width: 767px) {
  .story-list__holder.story-list__holder--horizontal {
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 15px 0 0;
    margin: var(--list-gap) 0 0;
    min-height: 160px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__video
    .story-list__image:after {
    bottom: inherit;
    left: inherit;
    right: 5px;
    top: 55px;
  }

  .story-list__holder.story-list__holder--horizontal .story-list__news {
    --horizontalPictureWidth: 125px;
    flex-flow: column nowrap;
    height: 190px;
    margin-bottom: 0;
    margin-right: 30px;
    margin-right: var(--news-gap);
    max-width: var(--horizontalPictureWidth);
    min-width: var(--horizontalPictureWidth);
    position: relative;
    white-space: normal;
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__text {
    flex-flow: column nowrap;
    padding: 0;
    width: 100%;
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__text
    h3 {
    padding: 5px 0;
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__image {
    position: static;
    width: var(--horizontalPictureWidth);
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__image--holder {
    min-width: var(--horizontalPictureWidth);
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__image
    img {
    height: 90px;
    width: var(--horizontalPictureWidth);
  }

  .story-list__holder.story-list__holder--horizontal
    .story-list__news
    .story-list__cate {
    background: transparent;
    bottom: 0;
    color: #777;
    color: var(--grey);
    left: 0;
  }
}

.story-list__news {
  --pic-width: 300px;
  --pic-height: 200px;
  --title-height: 72px;
  --time-height: 20px;
  --border-gap: 10px;
  max-height: calc(
    var(--pic-height) + var(--title-height) + var(--time-height)
  );
  overflow: visible;
  position: relative;
  width: var(--pic-width);
}

.story-list__holder--full .story-list__news {
  display: flex;
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .story-list__news {
    --pic-width: 250px;
    --pic-height: 167px;
    --border-gap: 7px;
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 30px;
    margin-bottom: var(--news-gap);
    width: 100%;
  }

  .feature-guess .story-list__news {
    --pic-width: 300px;
    --pic-height: 200px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__news {
    --pic-width: 125px;
    --pic-height: 90px;
    height: var(--pic-height);
    max-height: inherit;
    position: relative;
  }

  .story-list__news:last-child {
    margin-bottom: 0;
  }

  .thumb-news--big .story-list__holder > .story-list__news:first-of-type {
    --pic-width: 100%;
    flex-flow: column wrap;
    height: inherit;
    overflow: visible;
  }

  .thumb-news--big
    .story-list__holder
    > .story-list__news:first-of-type
    .story-list__text {
    padding: 0;
    width: 100%;
  }

  .thumb-news--big
    .story-list__holder
    > .story-list__news:first-of-type
    .story-list__text
    h2,
  .thumb-news--big
    .story-list__holder
    > .story-list__news:first-of-type
    .story-list__text
    h3 {
    padding: 5px 0;
  }

  .thumb-news--big
    .story-list__holder
    > .story-list__news:first-of-type
    .story-list__image--holder {
    min-height: inherit;
  }

  .thumb-news--big
    .story-list__holder
    > .story-list__news:first-of-type
    .story-list__image {
    overflow: visible;
  }

  .thumb-news--big .story-list__holder > .story-list__news:first-of-type img {
    font-family: "object-fit: cover";
    height: 100%;
    margin: 0 calc(-50vw + 50%);
    max-width: 100vw;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100vw;
  }
}

.story-list__news iframe {
  border: 0;
  height: 276px;
  overflow: hidden;
  width: var(--pic-width);
}

@media screen and (max-width: 1023px) {
  .story-list__news iframe {
    height: var(--pic-height);
    width: 100%;
  }
}

.story-list__image {
  border-radius: 3px;
  border-radius: var(--border-pixel);
  font-size: 0;
  overflow: hidden;
  width: 100%;
}

.story-list__holder--full .story-list__image {
  width: var(--pic-width);
}

.story-list__image--holder {
  display: inline-block;
  position: relative;
  width: 100%;
}

.story-list__image--holder:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(2 / 3 * 100%);
  width: 100%;
}

.story-list__image--holder img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.story-list__image--holder img.lazyload:not([src]),
.story-list__image--holder img.lazyloading:not([src]) {
  visibility: hidden;
}

.story-list__image--holder img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .story-list__image--holder img {
    transition: transform 0.3s linear;
  }

  .story-list__image--holder {
    display: inline-block;
    position: relative;
  }

  .story-list__image--holder:after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: calc(90 / 125 * 100%);
    width: 100%;
  }

  .story-list__image--holder img {
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
  }

  .story-list__image--holder img.lazyload:not([src]),
  .story-list__image--holder img.lazyloading:not([src]) {
    visibility: hidden;
  }

  .story-list__image--holder img:not(.lazyloaded) {
    background-position: 0;
    background-size: 200% 100%;
  }
}

@media screen and (max-width: 767px) and (max-width: 767px) {
  .story-list__image--holder img {
    transition: transform 0.3s linear;
  }
}

.story-list__image--video {
  --pic-height: 168.75px;
}

.story-list__image--video .story-list__image--holder {
  display: inline-block;
  position: relative;
}

.story-list__image--video .story-list__image--holder:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(9 / 16 * 100%);
  width: 100%;
}

.story-list__image--video .story-list__image--holder img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.story-list__image--video .story-list__image--holder img.lazyload:not([src]),
.story-list__image--video
  .story-list__image--holder
  img.lazyloading:not([src]) {
  visibility: hidden;
}

.story-list__image--video .story-list__image--holder img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .story-list__image--video .story-list__image--holder img {
    transition: transform 0.3s linear;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__image {
    position: relative;
    width: 250px;
  }

  .feature-guess .story-list__image {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .story-list__image {
    position: relative;
    width: var(--pic-width);
  }
}

.story-list__live .story-list__image:after {
  animation-direction: alternate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-name: fade;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  background-color: #d64937;
  background-color: var(--udn-red);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  bottom: 5px;
  color: #fff;
  content: "Live";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 4px 6px;
  position: absolute;
  right: 5px;
}

.story-list__video .story-list__image:after {
  --width-height: 50px;
  align-items: center;
  background: rgba(80, 80, 80, 0.4);
  border-radius: 50%;
  color: #fff;
  content: "\e89b";
  display: flex;
  font-family: fontello;
  font-size: 30px;
  height: var(--width-height);
  justify-content: center;
  letter-spacing: 0;
  pointer-events: none;
  position: absolute;
  right: var(--border-gap);
  top: calc(var(--pic-height) - calc(var(--width-height) + var(--border-gap)));
  width: var(--width-height);
}

.story-list__holder--full .story-list__video .story-list__image:after {
  left: calc(var(--pic-width) - var(--width-height) - var(--border-gap));
  right: inherit;
}

@media screen and (max-width: 1023px) {
  .story-list__video .story-list__image:after {
    --width-height: 35px;
    bottom: var(--border-gap);
    font-size: 24px;
    top: inherit;
  }
}

@media screen and (max-width: 767px) {
  .story-list__video .story-list__image:after {
    --width-height: 20px;
    font-size: 14px;
  }
}

.story-list__image img {
  font-family: "object-fit: cover";
  height: var(--pic-height);
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: var(--pic-width);
}

.story-list__setting {
  color: #7e7e7e;
  color: var(--dark-grey);
  font-size: 20px;
  height: 15px;
  width: 15px;
}

.story-list__info {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  line-height: 1;
  margin: auto 0 0;
}

@media screen and (max-width: 767px) {
  .story-list__info {
    align-items: baseline;
  }
}

.story-list__info .btn-setting {
  font-size: 24px;
}

.story-list__info .btn-icon {
  color: #7e7e7e;
  color: var(--dark-grey);
  height: 16px;
  width: 16px;
}

.story-list__vote .story-list__info {
  align-items: flex-start;
  flex: 1;
  justify-content: flex-end;
  margin: 10px 0 0;
}

@media screen and (max-width: 1023px) {
  .story-list__vote .story-list__info {
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .story-list__vote .story-list__info {
    display: none;
  }
}

.story-list__vote .story-list__info .btn-holder {
  align-self: flex-end;
  margin: 0;
}

.story-list__vote .story-list__info .vote-rules {
  align-items: flex-start;
  flex-flow: column wrap;
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .story-list__vote .story-list__info .vote-rules {
    margin: 0;
  }
}

.story-list__vote .story-list__info .vote-rules span {
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
}

.story-list__cate {
  font-size: 15px;
  left: var(--border-gap);
  line-height: 1;
  padding: 5px 10px;
  position: absolute;
  top: calc(var(--pic-height) - calc(30px + var(--border-gap) - 5px));
}

.cate-list--mynews .story-list__cate,
.story-list__cate:empty {
  display: none;
}

@media screen and (max-width: 767px) {
  .story-list__cate {
    background: transparent;
    color: #777;
    color: var(--grey);
    font-size: 13px;
    letter-spacing: 0;
    padding: 0;
    position: static;
  }

  .story-list__cate:hover,
  .story-list__cate:visited {
    background: transparent;
    color: #7e7e7e;
    color: var(--dark-grey);
  }

  .story-list__cate + .story-list__time {
    border-left: 1px solid #777;
    border-left: 1px solid var(--grey);
    margin-left: 4px;
    margin-top: 0;
  }
}

.story-list__text {
  display: flex;
  flex-flow: column nowrap;
  line-height: 1.3;
}

.story-list__holder--full .story-list__text {
  overflow: hidden;
  padding: 0 30px;
  width: calc(100% - var(--pic-width));
}

.story-list__holder--full .story-list__text h2,
.story-list__holder--full .story-list__text h3 {
  font-size: 24px;
  font-weight: 400;
  font-weight: var(--medium-weight);
}

@media screen and (max-width: 1297px) {
  .story-list__holder--full .story-list__text h2,
  .story-list__holder--full .story-list__text h3 {
    font-size: 21px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--full .story-list__text h2,
  .story-list__holder--full .story-list__text h3 {
    font-size: unset;
  }
}

.story-list__holder--full .story-list__text p {
  color: #777;
  color: var(--grey);
  font-size: 16px;
}

.story-list__holder--full .story-list__text p a {
  color: #777;
  color: var(--grey);
}

@media screen and (max-width: 1297px) {
  .story-list__holder--full .story-list__text {
    padding: 0 15px;
  }
}

@media screen and (max-width: 767px) {
  .story-list__holder--full .story-list__text {
    padding: 0 10px;
  }
}

@media screen and (max-width: 1023px) {
  .story-list__text {
    padding: 0 15px;
    width: calc(100% - var(--pic-width));
  }

  .feature-guess .story-list__text {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .story-list__text {
    padding: 0 0 0 8px;
  }
}

.story-list__text h2,
.story-list__text h3 {
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin: 0;
  padding: 8px 10px;
}

.feature-guess .story-list__text h2,
.feature-guess .story-list__text h3 {
  padding: 3px 0;
}

@media screen and (max-width: 1023px) {
  .story-list__text h2,
  .story-list__text h3 {
    font-size: 21px;
    font-weight: 400;
    font-weight: var(--medium-weight);
    margin-bottom: 10px;
    padding: 0;
  }

  .story-list__holder--grid .story-list__text h2,
  .story-list__holder--grid .story-list__text h3 {
    padding: 5px 0;
  }

  .feature-guess .story-list__text h2,
  .feature-guess .story-list__text h3,
  .story-list__holder--grid .story-list__text h2,
  .story-list__holder--grid .story-list__text h3 {
    font-size: 15px;
  }
}

.story-list__holder--full .story-list__text h2,
.story-list__holder--full .story-list__text h3 {
  margin-bottom: 15px;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .story-list__holder--full .story-list__text h2,
  .story-list__holder--full .story-list__text h3 {
    margin: 0;
  }
}

.story-list__text h2:empty,
.story-list__text h3:empty {
  display: flex;
  flex-flow: column nowrap;
  padding: 5px 0;
}

.story-list__text h2:empty:after,
.story-list__text h2:empty:before,
.story-list__text h3:empty:after,
.story-list__text h3:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.story-list__text h2:empty:after,
.story-list__text h3:empty:after {
  background-color: #ddd;
  width: 75%;
}

@media screen and (max-width: 767px) {
  .story-list__text h2,
  .story-list__text h3 {
    font-size: 19px;
    font-weight: 300;
    font-weight: var(--regular-weight);
    line-height: 1.3;
    margin-bottom: 0;
  }

  .mobile-recommendation--horizontal .story-list__text h2,
  .mobile-recommendation--horizontal .story-list__text h3 {
    margin: 5px 0;
  }
}

.story-list__text h2 a,
.story-list__text h3 a {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: inline-block;
  display: -webkit-box;
  line-height: 1.4;
  max-height: calc(1em * 1.4 * 2);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .story-list__text h2 a,
  .story-list__text h3 a {
    -webkit-line-clamp: 3;
    line-height: 1.25;
    max-height: calc(1em * 1.25 * 3);
  }
}

.story-list__text h2 a:empty,
.story-list__text h3 a:empty {
  display: flex;
  flex-flow: column nowrap;
  min-height: 42px;
  width: 100%;
}

.story-list__text h2 a:empty:after,
.story-list__text h2 a:empty:before,
.story-list__text h3 a:empty:after,
.story-list__text h3 a:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.story-list__text h2 a:empty:after,
.story-list__text h3 a:empty:after {
  background-color: #ddd;
  width: 75%;
}

.darker-context .story-list__text h2 a,
.darker-context .story-list__text h3 a {
  color: #fff;
}

.darker-context .story-list__text h2 a:hover,
.darker-context .story-list__text h3 a:hover {
  color: #c7c7c7;
  color: var(--btn-grey);
}

@media screen and (max-width: 1023px) and (max-width: 767px) {
  .feature-guess .story-list__text h2,
  .feature-guess .story-list__text h3,
  .story-list__holder--grid .story-list__text h2,
  .story-list__holder--grid .story-list__text h3 {
    font-size: 19px;
  }
}

.story-list__text p {
  color: #777;
  color: var(--grey);
  display: none;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0;
}

@media screen and (max-width: 1023px) {
  .story-list__text p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: block;
    display: inline-block;
    display: -webkit-box;
    max-height: calc(1em * 1.4 * 3);
    overflow: hidden;
  }
}

.story-list__holder--full .story-list__text p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: block;
  display: inline-block;
  display: -webkit-box;
  max-height: calc(1em * 1.4 * 3);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .story-list__holder--full .story-list__text p {
    display: none;
  }
}

@media screen and (max-width: 1023px) and (max-width: 767px) {
  .story-list__text p {
    display: none;
  }
}

.feature-guess {
  position: relative;
}

.feature-guess .context-box__header {
  margin-bottom: 0;
}

.feature-guess__list {
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
  position: relative;
}

.feature-guess__list:first-child {
  margin: 15px 0;
  margin: var(--list-gap) 0;
}

.feature-guess__dialog {
  --padding-size: 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-shadow: none;
  top: 35px;
  transition: visibility 0.3s linear, opacity 0.3s linear;
  visibility: hidden;
  width: 250px;
  z-index: -1;
}

.feature-guess__dialog.show {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.feature-guess__tools {
  align-items: center;
  color: #fff;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 6px;
  position: absolute;
  right: 0;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  top: 0;
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

.story-list__info .feature-guess__tools {
  padding: 0;
  position: static;
  text-shadow: none;
}

.feature-loading .feature-guess__tools {
  opacity: 0;
  visibility: hidden;
}

.feature-guess.context-box {
  overflow: visible;
  width: 300px;
}

.feature-guess__index.feature-guess.context-box {
  margin-left: 10px;
  padding: 0 10px;
}

.feature-guess .context-box__content {
  counter-reset: list;
}

.feature-guess .context-box__title {
  align-items: center;
  border-bottom-color: transparent;
  display: flex;
}

.feature-guess .context-box__title span:first-child {
  border-bottom: 1px solid #ee5103;
  border-bottom: 1px solid var(--udn-orange);
  display: inline-block;
  line-height: 1.5;
  margin-right: 5px;
}

.follow-tag {
  align-items: center;
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  display: flex;
  flex-flow: row nowrap;
  font-weight: 300;
  justify-content: space-between;
  line-height: 1.4;
  margin: 0;
  padding: 8px var(--padding-size);
}

.follow-tag .btn-follow {
  margin-right: 0;
}

.feature-refresh {
  display: inline-block;
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  width: 24px;
}

.feature-refresh:after {
  align-items: center;
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "\e8b2";
  display: flex;
  font-family: fontello;
  justify-content: center;
}

.feature-refresh:hover {
  animation: spin 2s linear infinite forwards;
}

.interest-lists {
  color: #7e7e7e;
  color: var(--text-unactive);
  display: flex;
  flex-flow: column wrap;
  font-size: 15px;
}

.interest {
  cursor: pointer;
  padding: 8px var(--padding-size);
  position: relative;
}

.interest:after {
  background: #7e7e7e;
  background: var(--text-unactive);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 0;
}

.interest:hover {
  background: #f8f8f8;
}

.interest:hover:after {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: strikeThrought;
  animation-timing-function: linear;
}

.interest.hide {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: swipeLeftAndRemoveHeight;
}

.toggle-button {
  height: 28px;
  margin: 0 10px;
  overflow: hidden;
  position: relative;
  top: 50%;
  width: 84px;
}

.toggle-button .checkbox {
  cursor: pointer;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 3;
}

.toggle-button .checkbox:checked ~ .layer {
  background-color: rgba(244, 108, 0, 0.1);
  background-color: var(--udn-orange-alpha-2);
}

.toggle-button .checkbox:checked + .knobs:after {
  color: #fff;
}

.toggle-button .checkbox:checked + .knobs:before {
  background-color: #ee5103;
  background-color: var(--udn-orange);
  left: 45px;
}

.toggle-button .checkbox:checked + .knobs span {
  color: #000;
  color: var(--text-color);
}

.toggle-button .knobs,
.toggle-button .layer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.toggle-button .layer {
  background-color: #efefef;
  background-color: var(--bg-grey);
  transition: all 0.3s ease;
  width: 100%;
  z-index: 1;
}

.toggle-button .knobs {
  z-index: 2;
}

.toggle-button .knobs span,
.toggle-button .knobs:after,
.toggle-button .knobs:before {
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  font-weight: var(--bold-weight);
  height: 20px;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 4px;
  transition: all 0.3s ease;
  width: 35px;
}

.toggle-button .knobs:before {
  background-color: #7e7e7e;
  background-color: var(--dark-grey);
  content: "";
  left: 4px;
}

.toggle-button .knobs span {
  color: #fff;
  display: inline-block;
  left: 4px;
  z-index: 1;
}

.toggle-button .knobs:after {
  color: #000;
  color: var(--text-color);
  content: "開啟";
  right: 4px;
}

.udn-box {
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: -webkit-backdrop-filter 0.2s ease-in;
  transition: backdrop-filter 0.2s ease-in;
  transition: backdrop-filter 0.2s ease-in, -webkit-backdrop-filter 0.2s ease-in;
  visibility: hidden;
  width: 100vw;
  z-index: -1;
}

.alert-open .udn-box {
  -webkit-backdrop-filter: blur(2px) opacity(0.7);
  backdrop-filter: blur(2px) opacity(0.7);
  opacity: 1;
  visibility: visible;
  z-index: 12;
}

.udn-box__title {
  font-size: 22px;
  line-height: 1;
}

.udn-box__content,
.udn-box__title {
  margin: 0 0 20px;
  margin: 0 0 var(--section-gap);
  text-align: center;
}

.udn-box__content {
  font-size: 15px;
}

.udn-box__content .icon {
  display: block;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100px;
}

.udn-box__container {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  left: 50%;
  max-width: 100%;
  padding: 20px;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
}

.udn-ads {
  align-self: flex-start;
  font-size: 0;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .udn-ads {
    width: 100%;
  }
}

.udn-ads > * {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .udn-ads:not(.udn-ads--mobile) {
    display: none;
  }

  .udn-ads.ads-all {
    display: block;
  }
}

.udn-ads--mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .udn-ads--mobile {
    display: block;
  }
}

.udn-ads-300x100 {
  height: 100px;
  overflow: hidden;
  width: 300px;
}

.udn-ads-300x600 {
  width: 300px;
}

@media screen and (max-width: 1023px) {
  .udn-ads-300x600 {
    margin-left: auto;
    margin-right: auto;
  }
}

.udn-story-mixed {
  margin-top: 0;
  width: 100%;
}

.udn-idle-mixed {
  width: 100%;
}

#news_txtdown {
  max-width: 970px;
  width: 100%;
}

#news_txtdown iframe {
  width: 100%;
}

#ultraDesktopBanner {
  background: #fafafa;
  background: var(--bg);
  position: relative;
  text-align: center;
  z-index: 5;
}

#ads-superBanner,
.ads-superBanner {
  margin-right: 10px;
  width: 970px;
}

@media screen and (max-width: 1297px) {
  #ads-superBanner,
  .ads-superBanner {
    margin-right: 0;
  }
}

@media screen and (max-width: 1023px) {
  #ads-superBanner,
  .ads-superBanner {
    display: none;
  }
}

#ads-index-top--mobile {
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
}

#ads-billboard {
  height: inherit;
}

@media screen and (max-width: 1297px) {
  #ads-billboard {
    margin-left: 10px;
  }

  .wrapper-aside #ads-billboard {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  #ads-billboard {
    display: none;
  }
}

#ads-index-ls,
.ads-index-ls {
  height: 650px;
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}

@media screen and (max-width: 1297px) {
  #ads-index-ls,
  .ads-index-ls {
    top: 265px;
  }
}

@media screen and (max-width: 1023px) {
  #ads-index-ls,
  .ads-index-ls {
    display: none;
  }
}

.inline-ads {
  background: #efefef;
  background: var(--bg-grey);
  display: none;
  margin-bottom: var(--article-gap);
}

@media screen and (max-width: 767px) {
  .inline-ads {
    display: block;
  }
}

.inline-ads.hide {
  display: none;
}

.inline-ads .udn-ads {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .udn-ads--full {
    margin: 0 auto 30px;
    margin: 0 auto var(--news-gap);
    max-width: 480px;
    width: 100vw;
  }
}

@media (max-width: 480px) {
  .udn-ads--full {
    margin: 0 calc(-50vw + 50%) 30px;
    margin: 0 calc(-50vw + 50%) var(--news-gap);
  }
}

@media screen and (max-width: 767px) {
  .udn-slider + #ads-index-top--mobile {
    margin: 0 auto 30px;
    margin: 0 auto var(--news-gap);
    max-width: 480px;
    width: 100vw;
  }
}

@media (max-width: 480px) {
  .udn-slider + #ads-index-top--mobile {
    margin: 0 calc(-50vw + 50%) 25px;
    margin: 0 calc(-50vw + 50%) var(--breaking-gap);
  }
}

.notifier-container {
  bottom: 4px;
  color: #999;
  color: var(--light-grey);
  font-family: 黑體-繁, Apple LiGothic Medium, PingFang, 微軟正黑體,
    Microsoft JhengHei, WenQuanYi Zen Hei, helvetica, Arial, sans-serif;
  max-width: 98%;
  padding: 4px;
  position: fixed;
  right: 4px;
  width: 300px;
  z-index: 999;
}

.notifier {
  background: #fff;
  border-left: 4px solid #dedede;
  border-left: 4px solid var(--bg-grey-border);
  border-radius: 1px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  min-height: 62px;
  opacity: 0;
  padding: 8px;
  position: relative;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.5, -0.5, 0.3, 1.4), opacity 0.6s ease;
  width: 100%;
}

.notifier.shown {
  opacity: 1;
  transform: translateX(0);
}

.notifier.shown:hover {
  opacity: 1;
}

.notifier-close {
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #aaa;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  height: 16px;
  opacity: 0.5;
  outline: none;
  padding: 0;
  position: absolute;
  right: 4px;
  text-align: center;
  text-decoration: none;
  top: 4px;
  transition: 0.3s ease;
  width: 16px;
}

.notifier-close:focus,
.notifier-close:hover {
  background: #eee;
  color: #999;
  color: var(--light-grey);
  opacity: 1;
}

.notifier-img {
  float: left;
  margin-right: 8px;
  vertical-align: middle;
}

.notifier-img .img {
  height: 48px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 48px;
}

.notifier-title {
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 4px;
  padding: 0;
}

.notifier-body {
  font-size: 13px;
}

.notifier.info {
  border-left-color: #2f76aa;
  border-left-color: var(--udn-blue);
}

.notifier.success {
  border-left-color: #ee5103;
  border-left-color: var(--udn-orange);
}

.notifier.danger,
.notifier.warning {
  border-left-color: #d64937;
  border-left-color: var(--udn-red);
}

.breaking-news {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin: 0;
  order: 3;
  padding-right: 6px;
  position: relative;
  width: calc(100% - 110px);
}

@media screen and (max-width: 767px) {
  .breaking-news {
    display: flex;
    flex-flow: row wrap;
    font-size: 16px;
    height: 64px;
    order: 2;
    padding-left: 40px;
    padding-right: 0;
    width: calc(100% - 30px);
    width: 100%;
  }
}

.breaking-news a {
  align-items: center;
  display: inline-flex;
  line-height: 1;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .breaking-news a {
    align-items: center;
  }
}

.breaking-news__title {
  color: #d64937;
  color: var(--udn-red);
  display: inline-block;
  line-height: 30px;
  max-width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-1px);
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .breaking-news__title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #fff;
    display: inline-block;
    display: -webkit-box;
    line-height: 1.45;
    max-height: calc(1em * 1.4 * 2);
    max-width: 100%;
    overflow: hidden;
    padding-top: 0;
    text-overflow: unset;
    white-space: unset;
  }
}

.breaking-news__time {
  color: #7e7e7e;
  color: var(--text-unactive);
  font-size: 15px;
  margin-left: 8px;
}

@media screen and (max-width: 767px) {
  .breaking-news__time {
    display: none;
  }
}

.breaking-news__icon {
  align-items: center;
  background: #d64937;
  background: var(--udn-red);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  color: #fff;
  display: flex;
  font-size: 16px;
  height: 30px;
  justify-content: center;
  margin-right: 40px;
  order: 1;
  position: relative;
  width: 70px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .breaking-news__icon {
    animation: none;
    display: none;
  }
}

.breaking-news__icon:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid #d64937;
  border-left-color: var(--udn-red);
  border-top: 15px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(98%);
  width: 0;
  z-index: 2;
}

.breaking-news__arrow {
  position: absolute;
  right: -16px;
  top: -2px;
}

.breaking-news__arrow:nth-child(2) {
  right: -25px;
}

.breaking-news__arrow:nth-child(2):after,
.breaking-news__arrow:nth-child(2):before {
  background: rgba(214, 73, 55, 0.2);
}

.breaking-news__arrow:after,
.breaking-news__arrow:before {
  background: rgba(214, 73, 55, 0.6);
  border-radius: 1px;
  content: "";
  display: block;
  height: 21px;
  width: 2px;
}

.breaking-news__arrow:before {
  transform: rotate(-45deg) translate(0);
}

.breaking-news__arrow:after {
  transform: rotate(45deg) translate(-5px, -5px);
}

.breaking-news__wrapper {
  display: flex;
  flex-flow: row wrap;
  font-size: 16px;
  justify-content: flex-end;
  margin-bottom: 25px;
  margin-bottom: var(--breaking-gap);
  max-height: 30px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.breaking-news__wrapper:hover .breaking-news {
  animation-play-state: paused !important;
}

.breaking-news__wrapper--index {
  display: inline-flex;
  width: calc(100% - 305px);
}

@media screen and (max-width: 1023px) {
  .breaking-news__wrapper {
    width: 100%;
  }
}

.breaking-news__wrapper.breaking-news--single {
  justify-content: flex-start;
}

@media screen and (max-width: 1297px) {
  .breaking-news__wrapper.breaking-news--single .breaking-news {
    animation: none;
  }
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--single .breaking-news {
    max-height: inherit;
  }
}

.breaking-news__wrapper.breaking-news--double .breaking-news:first-of-type {
  animation: slide-double-first 10s linear infinite;
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--double .breaking-news:first-of-type {
    animation: slide-double-first-mobile 10s linear infinite;
  }
}

.breaking-news__wrapper.breaking-news--double .breaking-news:nth-of-type(2) {
  animation: slide-double-other 10s linear infinite;
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--double .breaking-news:nth-of-type(2) {
    animation: slide-double-other-mobile 10s linear infinite;
  }
}

.breaking-news__wrapper.breaking-news--triple .breaking-news:first-of-type {
  animation: slide-triple-first 15s linear infinite;
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--triple .breaking-news:first-of-type {
    animation: slide-triple-first-mobile 15s linear infinite;
  }
}

.breaking-news__wrapper.breaking-news--triple .breaking-news:nth-of-type(2) {
  animation: slide-triple-second 15s linear infinite;
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--triple .breaking-news:nth-of-type(2) {
    animation: slide-triple-second-mobile 15s linear infinite;
  }
}

.breaking-news__wrapper.breaking-news--triple .breaking-news:nth-of-type(3) {
  animation: slide-triple-third 15s linear 5s infinite;
}

@media screen and (max-width: 767px) {
  .breaking-news__wrapper.breaking-news--triple .breaking-news:nth-of-type(3) {
    animation: slide-triple-third-mobile 15s linear 5s infinite;
  }

  .breaking-news__wrapper {
    align-items: center;
    background: #e36b6a;
    background: var(--udn-pink);
    max-height: 64px;
    padding: 0 10px 10px;
    position: relative;
  }

  .breaking-news__wrapper:before {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: #e36b6a;
    color: var(--udn-pink);
    content: "\e8b6";
    display: flex;
    font-family: fontello;
    font-size: 22px;
    height: 30px;
    justify-content: center;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
  }
}

.breaking-news__wrapper:hover .breaking-news__arrow {
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-name: bounceAlpha;
  animation-timing-function: linear;
}

.breaking-news__wrapper:hover .breaking-news__arrow:first-child {
  animation-delay: 0.2s;
}

@keyframes slide-double-first {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  60% {
    opacity: 1;
  }

  61% {
    opacity: 0;
  }

  62% {
    transform: translateY(-30px);
  }

  63% {
    transform: translateY(30px);
  }

  90% {
    transform: translateY(30px);
  }

  95% {
    transform: translateY(0);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-double-other {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  90% {
    transform: translateY(-30px);
  }

  95% {
    opacity: 1;
    transform: translateY(-60px);
  }

  96% {
    opacity: 0;
    transform: translateY(-60px);
  }

  97% {
    opacity: 0;
    transform: translateY(0);
  }

  98% {
    opacity: 1;
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-double-first-mobile {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-64px);
  }

  60% {
    opacity: 1;
  }

  61% {
    opacity: 0;
  }

  62% {
    transform: translateY(-64px);
  }

  63% {
    transform: translateY(64px);
  }

  90% {
    transform: translateY(64px);
  }

  95% {
    transform: translateY(0);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-double-other-mobile {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-64px);
  }

  90% {
    transform: translateY(-64px);
  }

  95% {
    opacity: 1;
    transform: translateY(-128px);
  }

  96% {
    opacity: 0;
    transform: translateY(-128px);
  }

  97% {
    opacity: 0;
    transform: translateY(0);
  }

  98% {
    opacity: 1;
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-triple-first {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(0);
  }

  33% {
    opacity: 1;
    transform: translateY(-30px);
  }

  36% {
    opacity: 0;
    transform: translateY(-30px);
  }

  38% {
    transform: translateY(30px);
  }

  97% {
    transform: translateY(30px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-triple-second {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(-30px);
  }

  63% {
    transform: translateY(-30px);
  }

  66% {
    opacity: 1;
    transform: translateY(-60px);
  }

  78% {
    opacity: 0;
    transform: translateY(-60px);
  }

  79% {
    transform: translateY(0);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-triple-third {
  0% {
    transform: translateY(-30px);
  }

  30% {
    transform: translateY(-30px);
  }

  33% {
    transform: translateY(-60px);
  }

  63% {
    transform: translateY(-60px);
  }

  66% {
    opacity: 1;
    transform: translateY(-90px);
  }

  78% {
    opacity: 0;
    transform: translateY(-90px);
  }

  79% {
    transform: translateY(-30px);
  }

  to {
    transform: translateY(-30px);
  }
}

@keyframes slide-triple-first-mobile {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(0);
  }

  33% {
    opacity: 1;
    transform: translateY(-64px);
  }

  36% {
    opacity: 0;
    transform: translateY(-64px);
  }

  38% {
    transform: translateY(64px);
  }

  97% {
    transform: translateY(64px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-triple-second-mobile {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(-64px);
  }

  63% {
    transform: translateY(-64px);
  }

  66% {
    opacity: 1;
    transform: translateY(-128px);
  }

  78% {
    opacity: 0;
    transform: translateY(-128px);
  }

  79% {
    transform: translateY(0);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-triple-third-mobile {
  0% {
    transform: translateY(-64px);
  }

  30% {
    transform: translateY(-64px);
  }

  33% {
    transform: translateY(-128px);
  }

  63% {
    transform: translateY(-128px);
  }

  66% {
    opacity: 1;
    transform: translateY(-192px);
  }

  78% {
    opacity: 0;
    transform: translateY(-192px);
  }

  79% {
    transform: translateY(-64px);
  }

  to {
    transform: translateY(-64px);
  }
}

.navigation {
  -ms-overflow-style: none;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  font-size: 18px;
  height: 30px;
  overflow: hidden;
  padding: 0;
  scrollbar-width: none;
  width: calc(100% - 30px);
}
@media screen and (min-width: 767px) {
  .navigation {
    pointer-events: none;
  }
}

.navigation::-webkit-scrollbar {
  display: none;
}

.navigation:hover .navigation-list:not(:hover),
.navigation[data-state="opened"] .navigation-list:not(.on) {
  opacity: 0.6;
}

@media screen and (max-width: 1023px) {
  .navigation {
    flex-flow: row nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
  }
}

@media screen and (max-width: 767px) {
  .navigation {
    font-size: 16px;
  }
}

@media screen and (max-width: 320px) {
  .navigation {
    font-size: 14px;
  }
}

.menu-stick .navigation {
  height: 41px;
}

@media screen and (max-width: 767px) {
  .menu-stick .navigation {
    height: 50px;
    padding: 10px 0;
  }
}

.navigation--sales {
  display: none;
}

@media screen and (max-width: 767px) {
  .navigation--sales {
    display: block;
  }
}

.navigation-submenu {
  --context-gap: 40px;
  --nav-width: 220px;
  background: #fbfbfb;
  box-shadow: none;
  height: 460px;
  position: absolute;
  top: 131px;
  transform: translateY(-600px);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 100%;
  z-index: 4;
}

@media screen and (max-width: 767px) {
  .navigation-submenu {
    top: 75px;
  }
}

.navigation-submenu:after,
.navigation-submenu:before {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s linear;
  visibility: hidden;
  width: 100%;
  z-index: 10;
}

.navigation-submenu:after {
  background-color: hsla(0, 0%, 100%, 0.5);
  content: "";
  z-index: 0;
}

.navigation-submenu:before {
  background-image: url("udn-loading.webp");
  background-image: url("udn-loading.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  height: 40px;
  left: 50%;
  position: absolute;
  top: 41%;
  transform: translate(-50%, -50%);
  width: 40px;
  z-index: 1;
}

.menu-stick .navigation-submenu {
  left: 0;
  position: fixed;
  top: 40px;
}

.navigation-submenu[data-state="open-loading"],
.navigation-submenu[data-state="opened"] {
  box-shadow: 0 100px 99px 0 rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

.navigation-submenu[data-state="open-loading"]:after,
.navigation-submenu[data-state="open-loading"]:before {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.navigation-submenu > .container {
  height: 400px;
  max-width: 1020px;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 1297px) {
  .navigation-submenu > .container {
    max-width: 970px;
  }
}

.navigation-submenu__iframe {
  border: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.navigation-submenu__iframe ~ .navigation-submenu__controls,
.navigation-submenu__iframe ~ .navigation-submenu__selector,
.navigation-submenu__iframe ~ .navigation-submenu__wrapper {
  display: none;
}

.navigation-submenu .context-box__header {
  margin-bottom: 12px;
}

.navigation-submenu .arrow {
  --arrowGap: 5px;
  align-items: center;
  color: #dedede;
  color: var(--bg-grey-border);
  cursor: pointer;
  display: flex;
  font-size: 45px;
  height: 45px;
  justify-content: center;
  position: relative;
  top: 50%;
  transform: translate(25px, -50%);
  transition: all 0.3s linear;
  width: 45px;
}

.navigation-submenu .arrow:before {
  margin: 0;
}

.navigation-submenu .arrow.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.navigation-submenu .arrow.disabled:hover {
  color: #c7c7c7;
  color: var(--btn-grey);
}

.navigation-submenu .arrow:hover {
  color: #7e7e7e;
  color: var(--text-unactive);
}

.navigation-submenu .arrow-area {
  height: 100%;
  position: absolute;
  top: 0;
  width: var(--context-gap);
}

.navigation-submenu .arrow-area.left {
  background: linear-gradient(90deg, #fbfbfb, 85%, hsla(0, 0%, 98%, 0));
  left: calc(var(--nav-width) - 70px);
  width: 70px;
}

.navigation-submenu .arrow-area.right {
  background: linear-gradient(270deg, #fbfbfb, 95%, hsla(0, 0%, 98%, 0));
  display: flex;
  justify-content: center;
  right: 0;
  width: 100px;
}

.navigation-submenu .arrow-area.right span {
  animation-delay: 0.5s;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: wobbleRightForNavigationArrow;
  animation-timing-function: ease-in-out;
}

.navigation-submenu .arrow-area.right span.disabled {
  animation: none;
}

.navigation-submenu__selector {
  background: #fbfbfb;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  justify-content: flex-start;
  left: 0;
  padding: 38px 0;
  position: absolute;
  width: calc(var(--nav-width) - 60px);
  z-index: 1;
}

.navigation-submenu__selector .list-ellipsis {
  cursor: pointer;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 8px;
  margin-top: 0;
}

.navigation-submenu__selector .list-ellipsis:last-of-type {
  margin-bottom: 0;
}

.navigation-submenu__selector .list-ellipsis.active,
.navigation-submenu__selector .list-ellipsis:hover {
  color: #ee5103;
  color: var(--udn-orange);
  opacity: 1;
}

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

.navigation-submenu__footer {
  --span-width: 40px;
  background-color: #fafafa;
  background-color: var(--bg);
  bottom: 0;
  font-size: 15px;
  height: 60px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.navigation-submenu__footer .container {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  justify-content: center;
  justify-content: space-between;
  max-width: 1020px;
  width: 100%;
}

@media screen and (max-width: 1297px) {
  .navigation-submenu__footer .container {
    max-width: 970px;
  }
}

.navigation-submenu__footer__recomendation {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  max-width: 35%;
}

.navigation-submenu__footer__recomendation:before {
  content: "推薦";
  display: inline-block;
  width: var(--span-width);
}

.navigation-submenu__footer__recomendation a {
  display: inline-block;
  margin: 0 5px;
}

.navigation-submenu__footer__recomendation a:hover {
  color: #ee5103;
  color: var(--udn-orange);
}

.navigation-submenu__footer__recomendation a:first-child {
  margin-left: 10px;
  margin-top: 0;
}

.navigation-submenu__footer__recomendation
  + .navigation-submenu__footer__issues {
  width: 65%;
}

.navigation-submenu__footer__recomendation
  + .navigation-submenu__footer__issues
  .list-ellipsis {
  width: 50%;
}

.navigation-submenu__footer__issues {
  align-items: center;
  display: flex;
  width: 100%;
}

.navigation-submenu__footer__issues .list-ellipsis {
  width: 25%;
}

.navigation-submenu__footer__issues:before {
  content: "話題";
  display: inline-block;
  width: var(--span-width);
}

.navigation-submenu__footer__issues .list-ellipsis {
  margin: 0 10px;
}

.navigation-submenu__wrapper {
  backface-visibility: hidden;
  cursor: grab;
  display: flex;
  height: 100%;
  left: var(--nav-width);
  position: absolute;
  top: 0;
  transition: transform 0.3s linear;
}

.navigation-submenu__wrapper.dragging {
  cursor: grabbing;
  transition: none;
}

.navigation-submenu__wrapper.dragging > * {
  pointer-events: none;
}

.navigation-submenu__wrapper .list-ellipsis {
  line-height: 17px;
}

.navigation-submenu__wrapper .list-ellipsis:before {
  content: "";
}

.navigation-submenu__wrapper .thumb-list {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.navigation-submenu__wrapper .thumb-list picture {
  font-size: 0;
}

.navigation-submenu__wrapper .context-box__title {
  border-bottom: 0;
  color: #000;
  color: var(--text-color);
  font-size: 18px;
  line-height: 1;
}

.navigation-submenu__wrapper .context-box {
  display: inline-block;
  padding-bottom: 38px;
  padding-left: var(--context-gap);
  padding-right: var(--context-gap);
  padding-top: 38px;
  transition: background-color 0.3s linear;
  width: 460px;
}

.navigation-submenu__wrapper .context-box.active {
  background-color: #fff;
}

.navigation-submenu__wrapper .context-box:last-child {
  margin-right: 0;
}

.navigation-wrapper {
  --width-size: 1280px;
  background: #fafafa;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  position: relative;
}

@media screen and (max-width: 1297px) {
  .navigation-wrapper {
    --width-size: 970px;
  }
}

@media screen and (max-width: 1023px) {
  .navigation-wrapper {
    --width-size: 740px;
  }
}

@media screen and (max-width: 767px) {
  .navigation-wrapper {
    --width-size: 100%;
    max-height: 50px;
  }
}

.menu-stick .navigation-wrapper {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  height: 41px;
  left: 50%;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: var(--width-size);
}

@media screen and (max-width: 767px) {
  .menu-stick .navigation-wrapper {
    height: 50px;
    padding: 0 20px;
  }
}

.menu-stick .navigation-wrapper:after,
.menu-stick .navigation-wrapper:before {
  background: #fafafa;
  background: var(--bg);
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  content: "";
  height: 40px;
  position: absolute;
  top: 0;
  width: var(--width-size);
}

@media screen and (max-width: 767px) {
  .menu-stick .navigation-wrapper:after,
  .menu-stick .navigation-wrapper:before {
    height: 49px;
  }
}

.menu-stick .navigation-wrapper:before {
  transform: translateX(calc(-1 * var(--width-size)));
}

.menu-stick .navigation-wrapper:after {
  transform: translateX(var(--width-size));
}

.navigation-wrapper.navigation-loading:after,
.navigation-wrapper.navigation-loading:before {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.navigation-wrapper.navigation-loading:after {
  align-items: center;
  animation: spin 2s linear infinite;
  content: "\e834";
  display: flex;
  font-family: fontello;
  justify-content: center;
}

.navigation-wrapper.navigation-loading:before {
  background: #fafafa;
  background: var(--bg);
  content: "";
  opacity: 0.8;
}

.navigation-toggler {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: 10px;
  padding: 0 5px;
  transform-origin: center;
  transition: transform 0.3s linear;
  width: 30px;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .navigation-toggler {
    color: #7e7e7e;
    color: var(--dark-grey);
    flex: none;
    padding-right: 0;
    width: 25px;
  }
}

.navigation-toggler:hover {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: wobble;
  animation-timing-function: linear;
}

@media screen and (max-width: 767px) {
  .navigation-toggler:hover {
    animation: none;
  }
}

.navigation-toggler:before {
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  content: "\38";
  display: inline-block;
  font-family: fontello;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1em;
  margin: 0;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  width: 1em;
}

.navigation .home {
  height: 25px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 0;
}

.navigation .home:hover img {
  opacity: 0;
  transform: scale(0);
}

.navigation .home:hover:before {
  opacity: 1;
  transform: scale(1);
}

.menu-stick .navigation .home {
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .menu-stick .navigation .home {
    margin-right: 12px;
  }
}

.navigation .home img {
  height: 25px;
  transition: opacity 0.5s linear, transform 0.5s linear;
  width: 25px;
}

.menu-stick .navigation .home {
  opacity: 1;
  padding: 0;
  width: 25px;
}

.navigation .home:before {
  color: #ee5103;
  color: var(--udn-orange);
  content: "\21";
  font-family: fontello;
  font-size: 25px;
  height: 25px;
  left: 0;
  line-height: 25px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0);
  transition: all 0.5s linear;
  width: 25px;
  z-index: -1;
}

.menu-stick .navigation .home:after {
  height: 0;
}

.navigation-list {
  border-bottom: 0;
  flex: none;
  line-height: 1.6;
  margin-right: 13px;
  position: relative;
  transition: opacity 0.2s linear;
  pointer-events: none;
}

.navigation-list.active:after,
.navigation-list:focus:after,
.navigation-list:hover:after {
  width: 100%;
}

.navigation-list:after {
  background: #ee5103;
  background: var(--udn-orange);
  bottom: -1px;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  transition: width 0.3s linear;
  width: 0;
}

.navigation-list.navigation--simple,
.navigation-list.navigation--simple.active,
.navigation-list.navigation--simple.on,
.navigation-list.navigation--simple:hover,
.navigation-list.navigation-list--vip,
.navigation-list.navigation-list--vip.active,
.navigation-list.navigation-list--vip.on,
.navigation-list.navigation-list--vip:hover {
  color: #d64937;
  color: var(--udn-red);
}

.navigation-list.navigation--simple.active:after,
.navigation-list.navigation--simple.on:after,
.navigation-list.navigation--simple:hover:after,
.navigation-list.navigation-list--vip.active:after,
.navigation-list.navigation-list--vip.on:after,
.navigation-list.navigation-list--vip:hover:after {
  background-color: #d64937;
  background-color: var(--udn-red);
}

@media screen and (max-width: 1297px) {
  .navigation-list {
    margin-right: 12px;
  }
}

@media screen and (max-width: 767px) {
  .navigation-list {
    line-height: 1.875;
    transition: none;
  }
}

.menu-stick .navigation-list {
  margin-right: 10px;
  padding: 6px 2px;
}

@media screen and (max-width: 1297px) {
  .menu-stick .navigation-list {
    margin-right: 9px;
  }
}

@media screen and (max-width: 767px) {
  .menu-stick .navigation-list {
    margin-right: 12px;
    padding: 10px 2px;
  }
}

.navigation-list:after {
  transition: width 0.5s linear;
}

.menu-stick .navigation-list:after {
  height: 2px;
}

.navigation-list.active,
.navigation-list.on {
  color: #ee5103;
  color: var(--udn-orange);
}

.navigation-list.active:after,
.navigation-list.on:after {
  width: 100%;
}

.menu-stick .navigation-list.active:after,
.menu-stick .navigation-list.on:after {
  bottom: 0;
}

@media screen and (max-width: 767px) {
  .navigation-list.active:after,
  .navigation-list.on:after {
    bottom: 0;
  }
}

.navigation-list:focus,
.navigation-list:hover {
  color: #ee5103;
  color: var(--udn-orange);
  outline: 0;
}

.navigation-list:last-child {
  margin: 0;
}

.dropdown-box {
  align-items: center;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: none;
  flex-flow: column nowrap;
  justify-content: center;
  position: absolute;
  width: 120px;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .dropdown-box.member-dropdown {
    left: 0 !important;
    width: 100vw;
  }
}

.dropdown--open .dropdown-box {
  display: flex;
}

.dropdown-box a {
  display: inline-block;
  padding: 12px 0;
  text-align: center;
  width: 100%;
}

.dropdown-box a:last-child {
  border-top: 1px solid #e0e0e0;
}

.header {
  background: #fafafa;
  background: var(--bg);
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  height: 131px;
  position: relative;
  transition: padding 0.3s linear;
  will-change: height;
  z-index: 11;
}

@media screen and (max-width: 767px) {
  .header {
    height: 73px;
  }
}

.header--canvas,
.header--canvas--holder {
  height: 131px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.menu-stick .header--canvas,
.menu-stick .header--canvas--holder {
  opacity: 0;
  visibility: none;
}

@media screen and (max-width: 767px) {
  .header--canvas,
  .header--canvas--holder {
    display: none;
  }
}

.header--canvas {
  display: block;
  width: 1920px;
}

.header--canvas--holder {
  width: 100%;
  z-index: -1;
}

.header-wrapper {
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  min-height: 100px;
  padding: 40px 0 17px;
}

@media screen and (max-width: 1297px) {
  .header-wrapper {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .header-wrapper {
    align-items: center;
    max-height: 42px;
    min-height: 42px;
    padding: 0px 0 8px;
  }

  .header-wrapper .member-dropdown {
    font-size: 14px;
  }
}

.header .container {
  background: #fafafa;
  background: var(--bg);
  flex: 1;
  position: relative;
  z-index: 2;
}

.logo {
  align-items: center;
  align-self: flex-start;
  display: flex;
  font-size: 0;
  min-height: 43px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .logo {
    min-height: 24px;
  }
}

.logo-custom {
  align-items: flex-end;
  display: flex;
}

.logo-custom--fallback-logo {
  width: 43px !important;
}

@media screen and (max-width: 767px) {
  .logo-custom--fallback-logo {
    width: 23px !important;
  }
}

.logo-custom--fallback-title {
  aspect-ratio: unset !important;
  width: 183px !important;
}

@media screen and (max-width: 767px) {
  .logo-custom--fallback-title {
    width: 104px !important;
  }
}

.logo-custom--canvas {
  width: 100%;
}

.logo-sponsor {
  align-items: center;
  display: flex;
  height: 43px;
  margin: 0 14px;
  width: 226px;
}

@media screen and (max-width: 1297px) {
  .logo-sponsor {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .logo-sponsor {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .logo-sponsor {
    height: inherit;
    margin: 0 10px;
    width: 100px;
  }

  .logo-sponsor.logo-sponsor--ads {
    display: none;
  }
}

@media (max-width: 374px) {
  .logo-sponsor {
    display: none;
  }
}

.logo-sponsor a {
  width: 100% !important;
}

.offline-mode .logo:after {
  border: 1px solid #ee5103;
  border: 1px solid var(--udn-orange);
  color: #ee5103;
  color: var(--udn-orange);
  content: "離線";
  display: inline-block;
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 10px;
}

@media screen and (max-width: 767px) {
  .offline-mode .logo:after {
    font-size: 12px;
    padding: 3px 5px;
  }
}

.logo a {
  display: inline-block;
}

.logo a:first-of-type {
  width: 43px;
}

.logo a:first-of-type img {
  aspect-ratio: 1/1;
}

@media screen and (max-width: 767px) {
  .logo a:first-of-type {
    width: 24px;
  }
}

.logo a:nth-child(2) {
  height: 43px;
  width: 183px;
}

.logo a:nth-child(2) img {
  aspect-ratio: 183/43;
}

@media screen and (max-width: 767px) {
  .logo a:nth-child(2) {
    height: 24px;
    width: 104px;
  }
}

.logo a.logo-custom {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  height: 65px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
}

.logo a.logo-custom + .logo-sponsor {
  margin-left: 300px;
}

@media screen and (max-width: 767px) {
  .logo a.logo-custom + .logo-sponsor {
    margin-left: 150px;
  }

  .logo a.logo-custom {
    height: inherit;
    width: 150px;
  }
}

.logo a img {
  width: 100%;
}

.tools-box {
  align-items: center;
  align-self: flex-start;
  display: flex;
}

.tools-box i {
  display: inline-block;
  font-size: 20px;
}

@media screen and (max-width: 767px) {
  .tools-box i {
    font-size: 23px;
    padding: 0;
  }

  .tools-box i.i-list-rounded:before {
    content: "\e958";
  }
}

.tools-box__items {
  padding-top: 9px;
  align-items: center;
  align-self: flex-start;
  color: #7e7e7e;
  color: var(--dark-grey);
  display: flex;
  line-height: 1;
}

.tools-box__items > * {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

@media screen and (max-width: 767px) {
  .tools-box__items > * {
    height: 24px;
    margin: 0 4px;
    width: 24px;
  }

  .tools-box__items > :last-child {
    margin-right: 0;
  }
}

.vip-button {
  display: none;
}

@media screen and (max-width: 767px) {
  .vip-button {
    display: flex;
  }
}

.channel-link {
  display: flex;
  flex-flow: row nowrap;
  font-family: helvetica, Arial, 黑體-繁, Apple LiGothic Medium, PingFang,
    微軟正黑體, Microsoft JhengHei;
  font-weight: 400;
  overflow: hidden;
}

@media screen and (max-width: 1023px) {
  .channel-link {
    display: none;
  }
}

.channel-link a {
  --custom-blue-color: #1491cc;
  --custom-green-color: #47cd56;
  --custom-orange-color: #fb0;
  --custom-red-color: #ee1001;
  --custom-purple-color: #ad11c9;
  align-items: center;
  color: #7e7e7e;
  color: var(--text-unactive);
  display: flex;
  flex: none;
  letter-spacing: 0;
  margin-right: 9px;
  position: relative;
}

.channel-link a:after,
.channel-link a:before {
  background-color: #000;
  border-radius: 50%;
  content: "";
  display: none;
  height: 7px;
  left: 5px;
  position: absolute;
  top: 9px;
  transition: opacity 0.3s, transform 0.3s;
  width: 7px;
  z-index: -1;
}

.channel-link a:before {
  opacity: 0;
}

.channel-link a:focus,
.channel-link a:hover {
  color: #000;
  color: var(--text-color);
}

.channel-link a:focus:before,
.channel-link a:hover:before {
  animation: pulseBig 1s cubic-bezier(0.24, 0, 0.38, 1) forwards;
}

.channel-link a i {
  display: inline-block;
  flex: none;
  margin-right: 2px;
}

.channel-link a i:before {
  margin-left: 0;
  margin-right: 0;
}

.channel-link a:hover .i-vip-udn {
  color: #cb2529;
}

.channel-link a:hover .i-udesign {
  color: #c7c7c7;
  color: var(--btn-grey);
}

.channel-link a:hover .i-vision {
  color: var(--custom-blue-color);
}

.channel-link a:hover .i-shopping {
  color: #ee5103;
  color: var(--udn-orange);
}

.channel-link a:hover .i-ticket {
  color: var(--custom-orange-color);
}

.channel-link a:hover .i-orangetag2 {
  color: #fab94b;
}

.channel-link a:hover .i-heart-fill {
  color: #d64937;
}

.member-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.member-button.member-button--isloading i:before {
  animation: spin 2s linear infinite;
  content: "\e834";
}

.member-button.member-button--islogin i {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

@media screen and (max-width: 767px) {
  .member-button.member-button--islogin i {
    background-image: none !important;
    border-radius: 0;
    height: inherit;
    width: inherit;
  }
}

.member-button.member-button--islogin i:before {
  content: "";
}

@media screen and (max-width: 767px) {
  .member-button.member-button--islogin i:before {
    content: "\e8b0";
  }

  .member-button {
    background: transparent;
  }

  .member-button:focus,
  .member-button:hover,
  .member-button:visited {
    background: transparent;
    color: #7e7e7e;
    color: var(--dark-grey);
  }

  .member-button i:before {
    content: "\e957";
    margin: 0;
  }
}

.udn-overlay {
  background: rgba(0, 0, 0, 0.9);
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: visibility 0.3s linear, opacity 0.3s linear;
  visibility: hidden;
  width: 100vw;
  z-index: 10;
}

.classification-open .udn-overlay,
.idle-open .udn-overlay,
.menu-open .udn-overlay {
  opacity: 1;
  visibility: visible;
}

.idle-open .udn-overlay {
  z-index: 12;
}

@media screen and (max-width: 1023px) {
  .idle-open .udn-overlay {
    display: none;
  }
}

.classification-open .udn-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 12;
}

.overlay-menu {
  background: #fafafa;
  background: var(--bg);
  height: 100%;
  left: 0;
  max-height: 90vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 80px 0 30px;
  position: fixed;
  top: 0;
  transform: translateY(-100vh);
  transition: transform 0.3s linear;
  width: 100vw;
  will-change: transform;
  z-index: 101;
}

.overlay-menu .container {
  flex: inherit;
  width: calc(100% - 180px);
}

@media screen and (max-width: 767px) {
  .overlay-menu .container {
    width: 100%;
  }

  .overlay-menu {
    padding: 60px 0 30px;
  }
}

.menu-open.custom .overlay-menu.custom-menu,
.menu-open.full .overlay-menu.full-menu {
  transform: translateY(0);
}

.overlay-menu .close-btn {
  --close-position: 40px;
  align-items: center;
  color: #c7c7c7;
  color: var(--btn-grey);
  display: flex;
  font-size: 28px;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: var(--close-position);
  top: var(--close-position);
  width: 36px;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .overlay-menu .close-btn {
    font-size: 22px;
  }
}

.overlay-menu .close-btn:hover {
  color: #000;
  color: var(--text-color);
}

@media screen and (max-width: 767px) {
  .overlay-menu .close-btn {
    --close-position: 12px;
  }
}

.overlay-menu .close-btn i {
  pointer-events: none;
}

.overlay-menu .input-holder {
  border-bottom: 1px solid transparent;
  max-width: calc(600px + 42px);
  transition: border-bottom 0.3s linear 0.6s;
}

.menu-open .overlay-menu .input-holder {
  border-bottom-color: #c7c7c7;
  border-bottom-color: var(--btn-grey);
}

.overlay-menu .input-holder input {
  -webkit-appearance: none;
  font-size: 18px;
  transition: width 0.3s linear 0.3s;
  width: 0;
}

@media screen and (max-width: 767px) {
  .overlay-menu .input-holder input {
    max-width: calc(100% - 42px);
    width: 600px;
  }
}

.menu-open .overlay-menu .input-holder input {
  max-width: calc(100% - 42px);
  width: 600px;
}

.overlay-menu .input-holder .btn-search {
  transform: rotate(540deg);
  transition: transform 1s linear 0.6s;
  will-change: transform;
}

@media screen and (max-width: 767px) {
  .overlay-menu .input-holder .btn-search {
    transform: rotate(0);
  }
}

.menu-open .overlay-menu .input-holder .btn-search {
  transform: rotate(0);
}

.overlay-menu .site-links {
  padding: 50px 15px 40px;
}

@media screen and (max-width: 767px) {
  .overlay-menu .site-links {
    overflow: hidden;
    padding: 30px 0;
  }
}

.overlay-menu .site-links__title {
  border-bottom: 1px solid #ee5103;
  border-bottom: 1px solid var(--udn-orange);
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.6;
  margin: 0;
}

.overlay-menu .site-links__wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 20px 0;
}

@media screen and (max-width: 1023px) {
  .overlay-menu .site-links__wrapper {
    flex-flow: row nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.overlay-menu .site-product {
  display: flex;
  flex-flow: column wrap;
  width: 12.5%;
}

@media screen and (max-width: 1023px) {
  .overlay-menu .site-product {
    margin-right: 20px;
    min-width: 150px;
  }
}

@media screen and (max-width: 767px) {
  .overlay-menu .site-product {
    background: #ededed;
    min-width: 200px;
    padding: 20px;
  }
}

.overlay-menu .site-product__title {
  margin-bottom: 10px;
}

.overlay-menu .site-product__link {
  align-self: flex-start;
  margin-bottom: 14px;
}

.custom-menu {
  display: flex;
  flex-flow: row wrap;
  max-height: 55vh;
  padding: 80px 0;
}

@media screen and (max-width: 1297px) {
  .custom-menu {
    max-height: 70vh;
  }
}

@media screen and (max-width: 1023px) {
  .custom-menu {
    max-height: 80vh;
  }
}

@media screen and (max-width: 767px) {
  .custom-menu {
    max-height: 95vh;
    padding: 15px 0 30px;
  }

  .custom-menu .context-box__header {
    align-items: flex-start;
    margin-bottom: 15px;
    width: calc(100% - 30px);
  }
}

.custom-menu__tools {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  .custom-menu__tools {
    align-items: flex-end;
    flex-flow: column wrap;
  }
}

.custom-menu__tools .btn--customize {
  width: 90px;
}

.custom-menu__tools .btn--customize:hover {
  background: #2f76aa;
  background: var(--udn-blue);
  border-color: transparent;
  color: #fff;
}

.is-editing .custom-menu__tools .btn--customize {
  display: none;
}

.custom-menu__tools .btn--customize:before {
  content: "\e8b7";
  display: inline-block;
  font-family: fontello;
  left: -4px;
  margin-bottom: -1px;
  margin-top: 1px;
  position: relative;
  transform: scale(1.2);
}

.custom-menu__info {
  display: none;
  font-size: 12px;
}

@media screen and (max-width: 767px) {
  .custom-menu__info {
    order: 2;
  }
}

.is-editing .custom-menu__info {
  display: inline-block;
}

.custom-menu__wrapper {
  padding: 30px 0;
}

@media screen and (max-width: 767px) {
  .custom-menu__wrapper {
    padding: 10px 0;
  }
}

.custom-menu__confirm {
  display: none;
}

@media screen and (max-width: 767px) {
  .custom-menu__confirm {
    order: 1;
  }
}

.is-editing .custom-menu__confirm {
  display: flex;
}

.custom-menu__confirm .btn {
  margin: 0 10px;
  width: 90px;
}

@media screen and (max-width: 767px) {
  .custom-menu__confirm .btn {
    margin: 0 5px;
  }
}

@media screen and (max-width: 320px) {
  .custom-menu__confirm .btn {
    font-size: 13px;
    width: 80px;
  }
}

.custom-menu__confirm .btn:last-child {
  margin-right: 0;
}

.custom-menu__confirm .btn-holder {
  padding-left: 10px;
}

@media screen and (max-width: 767px) {
  .custom-menu__confirm .btn-holder {
    padding: 0 0 10px;
  }
}

.custom-menu__content {
  margin-bottom: 30px;
}

.custom-menu--mobile,
.custom-menu--sales {
  display: none;
}

@media screen and (max-width: 767px) {
  .custom-menu--mobile,
  .custom-menu--sales {
    display: flex;
  }
}

.custom-menu--button {
  font-size: 16px;
  margin: 0 10px 15px;
  padding: 5px 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  will-change: transform;
}

@media screen and (max-width: 767px) {
  .custom-menu--button {
    margin: 0 6px 12px;
  }
}

.custom-menu--button.draggable-source--placed {
  animation: pulse 1s cubic-bezier(0.24, 0, 0.38, 1) forwards;
  background: #2f76aa;
  background: var(--udn-blue);
  border-color: #2f76aa;
  border-color: var(--udn-blue);
  color: #fff;
}

.draggable-container--is-dragging .custom-menu--button {
  opacity: 0.6;
}

.draggable-container--is-dragging .custom-menu--button.draggable--original,
.draggable-container--is-dragging
  .custom-menu--button.draggable-source--is-dragging,
.draggable-container--is-dragging
  .custom-menu--button.draggable-source--placed {
  background: #2f76aa;
  background: var(--udn-blue);
  border-color: #2f76aa;
  border-color: var(--udn-blue);
  color: #fff;
  opacity: 1;
}

.is-editing .custom-menu--button {
  cursor: grab;
}

.custom-menu--button-disabled {
  margin: 0 10px 15px;
  padding: 5px 20px;
}

@media screen and (max-width: 767px) {
  .custom-menu--button-disabled {
    margin: 0 6px 12px;
  }
}

.custom-menu--button-disabled.disabled {
  background: transparent;
  border-color: rgba(47, 118, 170, 0.3);
  color: #2f76aa;
  color: var(--udn-blue);
  cursor: pointer;
  opacity: 1;
}

.custom-menu--button-disabled.disabled:hover {
  border-color: rgba(214, 73, 55, 0.3);
  color: #d64937;
  color: var(--udn-red);
}

.is-editing .custom-menu--button-disabled {
  border-color: #7e7e7e;
  border-color: var(--text-unactive);
  color: #000;
  color: var(--text-color);
  opacity: 0.5;
  pointer-events: none;
}

.custom-menu--button__holder {
  border: 2px dashed transparent;
  display: flex;
  flex-flow: row wrap;
  min-height: 62px;
  padding: 15px 40px 0;
  position: relative;
  transition: all 0.3s linear;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .custom-menu--button__holder {
    padding: 15px 10px 0;
  }
}

@media screen and (max-width: 320px) {
  .custom-menu--button__holder {
    justify-content: space-evenly;
  }
}

.custom-menu--button__holder:after {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.7);
  content: "";
  display: flex;
  font-family: fontello;
  font-size: 30px;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s linear, visibility 0.3s linear;
  visibility: hidden;
  width: 100%;
  z-index: 0;
}

.draggable--is-dragging .custom-menu--button__holder:after {
  opacity: 1;
  visibility: visible;
}

.draggable--is-dragging
  .draggable-container--over.custom-menu--button__holder:after {
  opacity: 0;
  visibility: hidden;
}

.custom-menu--main .custom-menu--button__holder:after {
  content: "\73";
}

.custom-menu--button__holder:focus {
  outline: 0;
}

.custom-menu--button__holder.drop-active,
.is-editing .custom-menu--button__holder {
  background: #efefef;
  background: var(--bg-grey);
  border-color: #dedede;
  border-color: var(--bg-grey-border);
}

@media screen and (max-width: 767px) and (max-width: 320px) {
  .custom-menu .context-box__header {
    width: calc(100% - 40px);
  }
}

@media print {
  .custom-menu,
  .navigation-list.navigation-fixed.home,
  .navigation-list.navigation-fixed.navigation-list--vip,
  .overlay-menu,
  .udn-ads,
  .udn-idle,
  .udn-overlay {
    display: none;
  }

  .menu-stick .header {
    height: auto;
    position: relative;
  }

  .menu-stick .header-wrapper {
    height: auto;
  }

  .menu-stick .main-content {
    padding-top: 0;
  }
}

.recommendation-text {
  color: #c7c7c7;
  color: var(--btn-grey);
  display: inline-block;
}

.recommendation-link__holder .arrow-icon {
  margin: 0 8px;
}

.udn-idle {
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s linear, visibility 0.3s linear;
  visibility: hidden;
  width: 100vw;
  z-index: -1;
}

.idle-open .udn-idle {
  opacity: 1;
  visibility: visible;
  z-index: 13;
}

.udn-idle .close-btn {
  --close-position: 20px;
  align-items: center;
  color: #999;
  color: var(--light-grey);
  display: flex;
  font-size: 28px;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: var(--close-position);
  right: 22px;
  top: var(--close-position);
  top: 22px;
  width: 36px;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .udn-idle .close-btn {
    font-size: 22px;
  }
}

.udn-idle .close-btn:hover {
  color: #000;
  color: var(--text-color);
}

.udn-idle .close-btn i {
  pointer-events: none;
}

.udn-idle__content {
  --news-gap: 22px;
  grid-gap: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 30px;
  margin-top: var(--news-gap);
}

@media screen and (max-width: 1297px) {
  .udn-idle__content #idle-1 {
    order: 1;
  }

  .udn-idle__content #idle-2 {
    order: 2;
  }
}

.udn-idle__content .story-list__news {
  --pic-width: 220px;
  --pic-height: 146.67px;
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 65px;
  max-height: var(--pic-height);
  width: 415px;
}

.udn-idle__content .story-list__news:nth-child(odd) {
  margin-left: 65px;
}

.udn-idle__content .story-list__news:nth-child(2n) {
  margin-right: 65px;
}

.udn-idle__content .story-list__text {
  padding: 0 10px;
  width: calc(100% - var(--pic-width));
}

.udn-idle__content .story-list__text h2,
.udn-idle__content .story-list__text h3 {
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  padding: 0;
}

.udn-idle__content .story-list__text h2 a,
.udn-idle__content .story-list__text h3 a {
  -webkit-line-clamp: 3;
  max-height: calc(1em * 1.4 * 3);
}

.udn-idle__content .story-list__image {
  width: var(--pic-width);
}

.udn-idle__content .story-list__image--holder {
  min-height: var(--pic-height);
}

.udn-idle__content .story-list__image img {
  -o-object-fit: cover;
  object-fit: cover;
}

.udn-idle__header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 842px;
  padding-bottom: 5px;
}

.udn-idle__logo {
  display: inline-block;
  height: 120px;
  position: relative;
  width: 120px;
}

.udn-idle__logo:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(1 / 1 * 100%);
  width: 100%;
}

.udn-idle__logo img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.udn-idle__logo img.lazyload:not([src]),
.udn-idle__logo img.lazyloading:not([src]) {
  visibility: hidden;
}

.udn-idle__logo img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .udn-idle__logo img {
    transition: transform 0.3s linear;
  }
}

.udn-idle__logo img {
  border-radius: 3px;
  border-radius: var(--border-pixel);
  height: 120px;
  -o-object-fit: contain;
  object-fit: contain;
  width: 120px;
}

.udn-idle__subtext {
  color: #c7c7c7;
  color: var(--btn-grey);
  font-size: 15px;
}

.udn-idle__title {
  font-size: 36px;
  font-weight: 500;
  font-weight: var(--bold-weight);
  line-height: 1.25;
  margin: 5px 0;
}

.udn-idle__title a {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: inline-block;
  display: -webkit-box;
  max-height: calc(1em * 1.25 * 2);
  overflow: hidden;
}

.udn-idle__text {
  line-height: 1.4;
  width: calc(100% - 150px);
}

.udn-idle__recommendation {
  display: flex;
  flex-flow: row nowrap;
  font-size: 15px;
  justify-content: flex-start;
  margin-top: 18px;
  width: 100%;
}

.udn-idle__container {
  background: #fff;
  border-radius: 3px;
  height: 700px;
  left: 50%;
  padding: 55px 27px;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1024px;
}

@media screen and (max-width: 1023px) {
  .udn-idle__container {
    display: none;
  }
}

.footer {
  background: #fafafa;
  background: var(--bg);
  border-top: 1px solid #dedede;
  border-top: 1px solid var(--bg-grey-border);
  margin-top: 70px;
}

@media screen and (max-width: 1297px) {
  .footer {
    margin-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  .footer {
    margin-top: 0;
  }
}

.overlay-menu .footer {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .overlay-menu .footer {
    margin-top: 0;
  }
}

.footer .container {
  padding: 60px 0;
}

@media screen and (max-width: 767px) {
  .footer .container {
    padding: 30px 0;
  }
}

.footer-social {
  display: flex;
  flex-flow: row wrap;
  font-size: 20px;
  justify-content: center;
}

.footer-social .btn-social {
  align-items: center;
  color: #c7c7c7;
  color: var(--btn-grey);
  display: flex;
  height: 28px;
  justify-content: center;
  margin: 0 5px;
  padding: 0;
  transition: color 0.3s linear;
  width: 28px;
}

@media screen and (max-width: 767px) {
  .footer-social .btn-social {
    margin: 0 10px;
  }
}

.footer-social .btn-social:hover {
  color: #2f76aa;
  color: var(--udn-blue);
}

.footer-social .btn-social.pwa-install {
  display: none;
}

@media screen and (max-width: 767px) {
  .footer-social .btn-social.pwa-install.show {
    display: none;
  }
}

.footer-note {
  font-size: 13px;
  line-height: 1.5;
  padding-top: 20px;
  text-align: center;
}

.footer-note__wrapper a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1023px) {
  .footer-note__wrapper {
    display: none;
  }
}

.footer-note__link {
  border-right: 1px solid #c7c7c7;
  border-right: 1px solid var(--btn-grey);
  padding: 0 10px;
}

.footer-note__link:last-child {
  border-right: 0;
}

.footer-word {
  font-size: 12px;
  padding: 5px 0;
}

#gotop {
  align-items: center;
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 50%;
  bottom: 100px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #2f76aa;
  color: var(--udn-blue);
  display: flex;
  height: 40px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: fixed;
  right: 30px;
  transform: translate3d(0, -100%, 0);
  transition: all 0.3s linear;
  visibility: hidden;
  width: 40px;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  #gotop {
    bottom: 50px;
    right: 10px;
  }
}

#gotop.show {
  opacity: 1;
  transform: translateZ(0);
  visibility: visible;
}

#gotop:hover i {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: wobble;
  animation-timing-function: linear;
}

#gotop i {
  font-size: 22px;
  font-weight: 500;
  font-weight: var(--bold-weight);
  position: relative;
  top: -4px;
}

.two-column .paywall-editor .story-list__news {
  margin: 15px 0 0;
  margin: var(--list-gap) 0 0;
}

.two-column .paywall-banner {
  text-align: center;
}

.two-column .container {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.one-column #ads-superBanner {
  margin-left: auto;
  margin-right: auto;
}

.one-column .udn-ads {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

.wrapper-left {
  width: calc(100% - 310px);
}

.wrapper-left .udn-ads,
.wrapper-left .udn-focus {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

.wrapper-left .udn-ads:last-child,
.wrapper-left .udn-focus:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
  .wrapper-left {
    width: 100%;
  }
}

.wrapper-left #ads-superBanner {
  margin-right: 0;
}

.wrapper-aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.wrapper-aside[\:has\(\.feature-guess\)] {
  justify-content: flex-end;
}

.wrapper-aside:has(.feature-guess) {
  justify-content: flex-end;
}

.wrapper-aside .story-list__news {
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
}

.wrapper-aside__container {
  position: sticky;
  top: 41px;
}

.wrapper-aside__container[\:has\(\.feature-guess\)] {
  bottom: 20px;
  bottom: var(--section-gap);
  top: unset;
}

.wrapper-aside__container:has(.feature-guess) {
  bottom: 20px;
  bottom: var(--section-gap);
  top: unset;
}

@media screen and (max-width: 1023px) {
  .wrapper-aside__container {
    position: static;
    width: 100%;
  }
}

.wrapper-aside__container > * {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

.wrapper-aside__container > * .context-box__header {
  margin-bottom: 0;
}

.wrapper-aside .udn-ads {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 1297px) {
  .wrapper-aside {
    --top: 250px;
    position: relative;
  }

  .wrapper-aside[\:has\(\.feature-guess\)] {
    margin-bottom: calc(var(--top) + var(--section-gap));
    top: calc(var(--top) + 20px);
    top: calc(var(--top) + var(--section-gap));
  }

  .wrapper-aside:has(.feature-guess) {
    margin-bottom: calc(var(--top) + var(--section-gap));
    top: calc(var(--top) + 20px);
    top: calc(var(--top) + var(--section-gap));
  }

  .reset-aside .wrapper-aside {
    margin-bottom: 20px;
    margin-bottom: var(--section-gap);
    top: 0;
  }
}

@media screen and (max-width: 1023px) {
  .wrapper-aside {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 20px;
    margin-bottom: var(--section-gap);
    padding: 20px 0;
    position: static;
    top: 0;
    width: 100%;
  }

  .wrapper-aside .feature-guess__tools {
    left: calc(250px - 37px);
    right: inherit;
  }

  .wrapper-aside .feature-guess__list .story-list__image {
    width: 250px;
  }

  .wrapper-aside .rounded-thumb__title,
  .wrapper-aside .story-list__text {
    font-size: 21px;
    font-weight: 400;
    font-weight: var(--medium-weight);
    padding: 0 15px;
    width: calc(100% - 250px);
  }

  .wrapper-aside .rounded-thumb__title h3,
  .wrapper-aside .story-list__text h3 {
    font-size: 21px;
    margin: 0;
    padding: 0;
  }

  .wrapper-aside .rounded-thumb__image {
    border-radius: 3px;
    border-radius: var(--border-pixel);
    height: 167px;
    width: 250px;
  }

  .wrapper-aside .rounded-thumb__image:after {
    padding-bottom: calc(2 / 3 * 100%);
  }

  .wrapper-aside .rounded-thumb__image img {
    height: 167px;
    width: 250px;
  }

  .wrapper-aside #ads-billboard {
    margin-left: 0;
    order: 2;
  }

  .wrapper-aside .hottest-news {
    max-width: 300px;
    order: 1;
    width: 100%;
  }

  .main-cate .wrapper-aside .hottest-news,
  .main-story .wrapper-aside .hottest-news {
    max-width: 100%;
    order: 1;
    width: 100%;
  }

  .wrapper-aside #ads-300x600 {
    order: 4;
  }

  .wrapper-aside .feature-guess.context-box {
    order: 3;
    width: 100%;
  }

  .wrapper-aside .feature-guess.context-box .context-box__content {
    margin: 0 auto;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .wrapper-aside {
    display: none;
  }
}

@media screen and (max-width: 1023px) and (max-width: 1023px) {
  .wrapper-aside .hottest-news {
    max-width: 100%;
  }
}

@media print {
  .wrapper-left {
    width: 100%;
  }

  .wrapper-aside {
    display: none;
  }
}

.audio-player {
  align-items: center;
  background: #efefef;
  background: var(--bg-grey);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  color: #7e7e7e;
  color: var(--dark-grey);
  display: flex;
  font-size: 15px;
  padding: 0 12px;
}

.audio-player .current-indicator {
  background: #fff;
  display: inline-block;
  font-size: 12px;
  left: 0;
  line-height: 1;
  opacity: 0;
  padding: 2px 5px;
  position: absolute;
  top: -15px;
  transform: scale(0.75);
  transform-origin: left;
  transition: opacity 0.2s linear;
}

.audio-player .player-progress {
  outline: 0;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .audio-player .player-progress {
    display: none;
  }
}

.audio-player .player-seek {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 3px;
  display: block;
  height: 15px;
  margin: 0;
  outline: 0;
  padding: 0;
  position: relative;
  transition: box-shadow 0.3s ease;
  z-index: 2;
}

.audio-player .player-seek:hover + .current-indicator {
  opacity: 1;
}

.audio-player .player-seek::-ms-thumb {
  background: #fff;
  background: transparent;
  border-color: transparent;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: transparent;
  cursor: pointer;
  height: 14px;
  width: 14px;
  width: 100%;
}

.audio-player .player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: 14px;
  width: 14px;
}

.audio-player .player-seek::-moz-range-thumb {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: 14px;
  width: 14px;
}

.audio-player .player-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #dedede;
  background: var(--bg-grey-border);
  border: 0;
  border-radius: 100px;
  height: 3px;
  left: 0;
  margin-top: -2.5px;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 1;
}

.audio-player .player-bar::-ms-fill {
  background-color: #7e7e7e;
  background-color: var(--text-unactive);
}

.audio-player .player-bar::-webkit-progress-bar {
  background-color: #7e7e7e;
  background-color: var(--text-unactive);
}

.audio-player .player-bar::-webkit-progress-value {
  background-color: #000;
  background-color: var(--text-color);
}

.audio-player .player-timeline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1;
  margin: 0 5px;
  transform: scale(0.75);
  transform-origin: left;
  transform-origin: center;
}

@media screen and (max-width: 767px) {
  .audio-player .player-timeline {
    display: none;
  }
}

.audio-player .player-controls {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 30px;
}

.audio-player button {
  background: transparent;
  border: 0;
  display: none;
  height: 30px;
  padding: 0;
  width: 30px;
}

.audio-player button i {
  align-items: center;
  color: #7e7e7e;
  color: var(--dark-grey);
  display: flex;
  justify-content: center;
}

.audio-player button i:before {
  margin: 0;
}

.audio-player button.show {
  display: block;
}

.audio-player .player-play {
  cursor: pointer;
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  .audio-player .player-pause,
  .audio-player .player-play {
    pointer-events: none;
  }
}

.discuss-board {
  line-height: 1.5;
  overflow: visible;
}

.discuss-board .emoji-selection {
  align-items: flex-end;
  display: inline-flex;
}

.discuss-board__list {
  border-bottom: 1px solid #f1f1f1;
}

.discuss-board__list:last-of-type {
  border-bottom-color: transparent;
}

.discuss-board__content {
  background: #fff;
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  margin: 30px 0 0;
  padding: 50px;
}

.discuss-board__content.discuss-board__content--loading,
.discuss-board__content:empty {
  position: relative;
}

.discuss-board__content.discuss-board__content--loading:after,
.discuss-board__content.discuss-board__content--loading:before,
.discuss-board__content:empty:after,
.discuss-board__content:empty:before {
  align-items: center;
  content: "";
  display: flex;
  font-size: 12px;
  justify-content: center;
  left: 50%;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.discuss-board__content.discuss-board__content--loading:before,
.discuss-board__content:empty:before {
  background: #fff;
  height: 100%;
  width: 100%;
}

.discuss-board__content:empty:before {
  content: "目前只有註冊用戶才能發表評論";
}

.discuss-board__content.discuss-board__content--loading {
  cursor: not-allowed;
}

.discuss-board__content.discuss-board__content--loading:before {
  content: "";
}

.discuss-board__content.discuss-board__content--loading:after {
  animation: spin 2s linear infinite;
  content: "\e834";
  font-family: fontello;
  font-size: 20px;
  top: calc(50% - 15px);
}

@media screen and (max-width: 767px) {
  .discuss-board__content {
    margin: 15px 0 0;
    padding: 30px 25px;
  }
}

.discuss-board__rules {
  font-size: 13px;
  line-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
}

.rules-open .discuss-board__rules {
  line-height: 1.6;
  opacity: 1;
  visibility: visible;
}

.discuss-board__tools {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.discuss-board__tools .rules-toggler i {
  display: inline-block;
  transition: transform 0.3s linear;
}

.rules-open .discuss-board__tools .rules-toggler i {
  transform: rotate(0.5turn);
}

.discuss-board__textarea {
  margin: 10px 0;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.discuss-board__total {
  color: #222;
  font-size: 16px;
}

.discuss-details {
  display: flex;
  flex-flow: row wrap;
  font-size: 13px;
  justify-content: space-between;
  padding: 10px 0;
}

@media screen and (max-width: 767px) {
  .discuss-details__count {
    text-align: right;
  }

  .discuss-details {
    flex-flow: column wrap;
  }
}

.discuss-details__emoji {
  max-width: 150px;
}

@media screen and (max-width: 767px) {
  .discuss-details__emoji {
    max-width: 100%;
  }
}

.discuss-details__emoji + p {
  width: calc(100% - 150px);
}

@media screen and (max-width: 767px) {
  .discuss-details__emoji + p {
    width: 100%;
  }
}

.discuss-details__emoji img {
  max-width: 100%;
  width: 150px;
}

@media screen and (max-width: 767px) {
  .discuss-details__emoji img {
    display: block;
    margin: auto;
  }
}

.discuss-details__text {
  display: flex;
  flex-flow: row wrap;
  font-size: 16px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .discuss-details__text {
    flex-flow: column wrap;
  }
}

.discuss-details__text p {
  line-height: 1.5;
  margin: 0;
  padding: 10px;
  width: 100%;
  word-break: break-all;
}

.discuss-details__text .discuss-details__emoji + p {
  width: calc(100% - 150px);
}

@media screen and (max-width: 767px) {
  .discuss-details__text .discuss-details__emoji + p {
    width: 100%;
  }
}

.discuss-details__author {
  padding-top: 10px;
}

.discuss-details__author time {
  color: #999;
  color: var(--light-grey);
}

.discuss-details__author a {
  color: #2f76aa;
  color: var(--udn-blue);
}

.user-tools {
  display: flex;
}

.user-emoji,
.user-tools {
  position: relative;
}

.udn-emoji {
  background: #fff;
  border: 6px solid #7e7e7e;
  border: 6px solid var(--dark-grey);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  display: flex;
  flex-flow: row wrap;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 32px;
  transition: opacity 0.3s linear, visibility 0.3s linear;
  visibility: hidden;
  width: 412px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .udn-emoji {
    width: 255px;
  }
}

.emoji-open .udn-emoji {
  opacity: 1;
  visibility: visible;
}

.udn-emoji img {
  align-self: flex-start;
  aspect-ratio: 15/13;
  border: 1px dashed transparent;
  cursor: pointer;
  transition: border 0.3s linear;
  width: 80px;
}

.udn-emoji img:hover {
  border-color: #7e7e7e;
  border-color: var(--dark-grey);
}

.udn-emoji--toggler {
  background: linear-gradient(180deg, #fff 0, #f6f6f6 47%, #ededed);
  border: 1px solid #dedede;
  border: 1px solid var(--bg-grey-border);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  cursor: pointer;
  display: inline-block;
  height: 29px;
  margin-right: 5px;
  padding: 0;
  position: relative;
  transition: border 0.3s linear;
  width: 29px;
}

.udn-emoji--toggler:hover {
  border-color: #c7c7c7;
  border-color: var(--btn-grey);
}

.udn-emoji--toggler:focus {
  outline-color: #ee5103;
  outline-color: var(--udn-orange);
}

.udn-emoji--toggler:before {
  content: "\e8a6";
  font-family: fontello;
  font-size: 13px;
  font-weight: 700;
  height: 100%;
  text-align: center;
  width: 100%;
}

.lum-lightbox {
  background: rgba(0, 0, 0, 0.9);
}

.lum-lightbox-inner {
  bottom: 2.5%;
  left: 2.5%;
  right: 2.5%;
  top: 2.5%;
}

.lum-lightbox-inner img {
  position: relative;
}

.lum-lightbox-inner .lum-lightbox-caption {
  color: #fff;
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
}

.lum-loading .lum-lightbox-loader {
  animation: lum-loader-rotate 1.8s linear infinite;
  display: block;
  height: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
}

.lum-lightbox-loader:after,
.lum-lightbox-loader:before {
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 20px;
  content: "";
  display: block;
  height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
}

.lum-lightbox-loader:before {
  animation: lum-loader-before 1.8s linear infinite;
  left: 0;
}

.lum-lightbox-loader:after {
  animation: lum-loader-after 1.8s linear infinite;
  animation-delay: -0.9s;
  right: 0;
}

.lum-lightbox.lum-opening {
  animation: lum-fade 0.18s ease-out;
}

.lum-lightbox.lum-opening .lum-lightbox-inner {
  animation: lum-fadeZoom 0.18s ease-out;
}

.lum-lightbox.lum-closing {
  animation: lum-fade 0.3s ease-in;
  animation-direction: reverse;
}

.lum-lightbox.lum-closing .lum-lightbox-inner {
  animation: lum-fadeZoom 0.3s ease-in;
  animation-direction: reverse;
}

.lum-img {
  transition: opacity 0.12s ease-out;
}

.lum-loading .lum-img {
  opacity: 0;
}

.lum-gallery-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 100px;
  margin: 0;
  max-height: 100%;
  opacity: 0.8;
  outline: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-indent: 150%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  width: 60px;
}

.lum-gallery-button:hover {
  opacity: 1;
}

.lum-gallery-button:after {
  color: #fff;
  display: block;
  font-family: fontello;
  font-size: 60px;
  line-height: 1;
  position: absolute;
  text-indent: 0;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  top: 50%;
  transform: translateY(-50%);
}

.lum-previous-button {
  left: 12px;
}

.lum-previous-button:after {
  content: "\e88f";
}

.lum-next-button {
  right: 12px;
}

.lum-next-button:after {
  content: "\e890";
}

.lum-close-button {
  --close-position: 40px;
  color: #fff;
  cursor: pointer;
  font-size: 28px;
  height: 32px;
  opacity: 0.8;
  position: absolute;
  right: var(--close-position);
  top: var(--close-position);
  width: 32px;
}

@media screen and (max-width: 767px) {
  .lum-close-button {
    --close-position: 12px;
  }
}

.lum-close-button:hover {
  opacity: 1;
}

.lum-close-button:before {
  content: "\2c";
  font-family: fontello;
}

@media (max-width: 460px) {
  .lum-lightbox-image-wrapper {
    -webkit-overflow-scrolling: touch;
    display: flex;
    overflow: auto;
  }

  .lum-lightbox-caption {
    bottom: 0;
    position: absolute;
    width: 100%;
  }

  .lum-lightbox-position-helper {
    margin: auto;
  }

  .lum-lightbox-inner img {
    max-height: none;
    max-width: none;
  }
}

@keyframes lum-fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lum-fadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lum-loader-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-1turn);
  }
}

@keyframes lum-loader-before {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2) translateX(6px);
  }

  25% {
    transform: scale(1.3) translateX(8px);
  }

  40% {
    transform: scale(1.2) translateX(6px);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.8) translateX(6px);
  }

  75% {
    transform: scale(0.7) translateX(8px);
  }

  90% {
    transform: scale(0.8) translateX(6px);
  }

  to {
    transform: scale(1);
  }
}

@keyframes lum-loader-after {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2) translateX(-6px);
  }

  25% {
    transform: scale(1.3) translateX(-8px);
  }

  40% {
    transform: scale(1.2) translateX(-6px);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.8) translateX(-6px);
  }

  75% {
    transform: scale(0.7) translateX(-8px);
  }

  90% {
    transform: scale(0.8) translateX(-6px);
  }

  to {
    transform: scale(1);
  }
}

.udn-lightbox {
  z-index: 33;
}

.udn-lightbox:before {
  background-image: var(--bg-image);
  background-position: 50%;
  background-size: 10%;
  content: "";
  filter: blur(2px) brightness(0.5);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(11);
  width: 100%;
}

.udn-lightbox-inner img {
  max-height: 98%;
  transition: all 0.3s ease-in;
}

@media screen and (max-width: 767px) {
  .udn-lightbox-inner img {
    width: 100%;
  }
}

.udn-lightbox-caption {
  font-size: 14px;
}

.udn-gallery {
  background-color: #fff;
  display: grid;
  flex-wrap: nowrap;
  grid-template-areas: "big big small" "big big small2";
  grid-template-columns: repeat(3, 1fr);
  padding: 35px;
  transition: background-color 0.3s linear;
}

@media screen and (max-width: 767px) {
  .udn-gallery {
    grid-template-areas: "big big" "small small2";
    grid-template-columns: repeat(2, 1fr);
    margin: 0 -20px var(--article-gap) !important;
    padding: 20px;
    width: 100vw;
  }
}

.udn-gallery__total {
  bottom: 10px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  letter-spacing: 0;
  position: absolute;
  right: 20px;
  text-align: right;
  width: 100%;
  z-index: 1;
}

@media screen and (max-width: 1297px) {
  .udn-gallery__total {
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .udn-gallery__total {
    font-size: 24px;
  }
}

.udn-gallery__total:after,
.udn-gallery__total:before {
  display: inline-block;
  font-size: 24px;
  margin: 0 3px;
}

@media screen and (max-width: 767px) {
  .udn-gallery__total:after,
  .udn-gallery__total:before {
    font-size: 20px;
  }
}

.udn-gallery__total:before {
  content: "共";
}

.udn-gallery__total:after {
  content: "張 >";
}

.udn-gallery__list {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  grid-area: small;
  overflow: hidden;
  position: relative;
}

.udn-gallery__list:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(2 / 3 * 100%);
  width: 100%;
}

.udn-gallery__list img {
  left: 0;
  position: absolute;
  top: 0;
}

.udn-gallery__list img.lazyload:not([src]),
.udn-gallery__list img.lazyloading:not([src]) {
  visibility: hidden;
}

.udn-gallery__list img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .udn-gallery__list img {
    transition: transform 0.3s linear;
  }
}

.udn-gallery__list:focus {
  outline: 0;
}

.udn-gallery__list:hover img {
  transform: scale(1.01);
}

.udn-gallery__list img {
  font-family: "object-fit: cover";
  height: 163.5px;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.3s linear;
  width: 244px;
  will-change: transform;
}

.one-column .udn-gallery__list img {
  height: 168.66px;
  width: 250px;
}

@media screen and (max-width: 1297px) {
  .udn-gallery__list img {
    height: 121px;
    width: 174px;
  }
}

@media screen and (max-width: 1023px) {
  .udn-gallery__list img {
    height: 123px;
    width: 192.66px;
  }
}

@media screen and (max-width: 767px) {
  .udn-gallery__list img {
    height: 100% !important;
    width: 100% !important;
  }
}

.udn-gallery__list:before {
  border: 1px solid transparent;
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.udn-gallery__list:first-child {
  grid-area: big;
}

.udn-gallery__list:first-child img {
  height: 327px;
  width: 490px;
}

@media screen and (max-width: 1297px) {
  .udn-gallery__list:first-child img {
    height: 242px;
    width: 350px;
  }
}

@media screen and (max-width: 1023px) {
  .udn-gallery__list:first-child img {
    height: 248px;
    width: 383.31px;
  }
}

.one-column .udn-gallery__list:first-child img {
  height: 335.33px;
  width: 502px;
}

.udn-gallery__list:nth-child(3) {
  grid-area: small2;
}

.udn-gallery__list:nth-child(3):before {
  background: rgba(0, 0, 0, 0.6);
}

.udn-gallery__list:nth-child(n + 4) {
  display: none;
}

.follow-tags__holder {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  max-width: 200px;
  position: relative;
}

.follow-tags__holder > .btn-follow {
  font-size: 15px;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .follow-tags__holder > .btn-follow {
    margin-left: 0;
  }

  .follow-tags__holder {
    justify-content: flex-start;
    left: 0;
    position: absolute;
    top: 0;
  }
}

.follow-tags__holder .all-tags {
  align-items: flex-start;
  display: flex;
  flex-flow: column wrap;
  padding: 15px 20px;
}

.follow-tags__holder .all-tags .btn {
  font-size: 15px;
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
}

.follow-tags__holder .all-tags .btn:last-child {
  margin-bottom: 0;
}

.follow-tags__holder .btn-close {
  padding: 10px 0;
}

.follow-tags__holder .tags-holder {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: none;
  min-width: 200px;
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .follow-tags__holder .tags-holder {
    left: 0;
    right: inherit;
  }
}

.tags-open.follow-tags__holder .tags-holder {
  display: block;
}

.follow-more {
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 30px;
  justify-content: center;
  margin-left: 5px;
  padding: 0;
  transition: rotate 0.3s linear;
  width: 30px;
}

@media screen and (max-width: 767px) {
  .follow-more {
    height: 24px;
    width: 24px;
  }
}

.tags-open .follow-more {
  transform: rotate(0.5turn) translate(2px, -3px);
}

@media (any-hover: hover) {
  .follow-more:hover {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: wobble;
    animation-timing-function: linear;
  }
}

.keywords {
  content-visibility: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.sponsor-ads .context-box__content {
  display: flex;
  justify-content: center;
}

.sponsor-ads .udn-ads {
  margin: 0 5px;
}

.sponsor-ads .btn {
  margin: 0 5px 5px 0;
}

@media screen and (max-width: 767px) {
  .sponsor-ads .btn {
    font-size: 13px;
  }
}

.sponsor-ads__button {
  border-top: 1px solid #dedede;
  border-top: 1px solid var(--bg-grey-border);
}

@media screen and (max-width: 767px) {
  .sponsor-ads {
    padding-right: 0;
  }

  .sponsor-ads .udn-ads:not(.udn-ads--mobile) {
    display: none;
  }

  .sponsor-ads .story-list__holder {
    margin-bottom: 0;
  }
}

.article-section {
  margin-bottom: 50px;
  margin-bottom: var(--cate-gap);
}

.article-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 20px 0 50px;
  margin: var(--section-gap) 0 var(--cate-gap);
}

.article-content__abbr {
  color: #000;
  color: var(--article-color);
  cursor: pointer;
}

.article-content__abbr[title] {
  text-decoration: none;
}

.article-content__abbr__title {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  color: #2f76aa;
  color: var(--udn-blue);
  display: block;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
  .article-content__abbr__title {
    font-size: 22px;
  }
}

.article-content__abbr__title:before {
  content: "新聞辭典>>";
  font-size: 20px;
}

.article-content__abbr__content {
  background: #fff;
  display: none;
  font-size: 18px;
  margin: 10px 0;
  padding: 40px 75px;
}

@media screen and (max-width: 767px) {
  .article-content__abbr__content {
    font-size: 16px;
    padding: 27px 30px;
  }
}

.show .article-content__abbr__content {
  animation: fadeInUp 0.5s linear forwards;
  display: block;
}

.article-content__abbr__text {
  background: #efefef;
  background: var(--bg-grey);
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.article-content__abbr__text:after {
  background-color: #2f76aa;
  background-color: var(--udn-blue);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  color: #fff;
  content: "\38";
  font-family: fontello;
  font-size: 25px;
  height: 30px;
  line-height: 30px;
  padding: 1px;
  position: absolute;
  right: -20px;
  text-align: center;
  top: 1px;
  transform: scale(0.5);
  transform-origin: right top;
  width: 30px;
}

.show .article-content__abbr__text:after {
  content: "\37";
}

@media screen and (max-width: 767px) {
  .article-content__audio {
    align-self: flex-end;
  }

  .article-content__audio .audio-player {
    padding-right: 0;
  }

  .article-content__breadcrumb {
    display: none;
  }
}

.article-content__wrapper {
  --article-gap: 40px;
  --article-size: 20px;
  color: #000;
  color: var(--article-color);
  padding-right: 40px;
  padding-right: var(--aside-padding-gap);
}

@media screen and (max-width: 767px) {
  .article-content__wrapper {
    --article-gap: 30px;
    position: relative;
  }
}

.article-content__wrapper .story-list__time {
  display: none;
}

@media screen and (max-width: 767px) {
  .article-content__wrapper .story-list__time {
    display: block;
  }
}

.article-content__ads--bd {
  padding: 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .article-content__ads--bd {
    display: none;
  }
}

.article-content__ads--bd .article-content__lists li {
  margin-bottom: 0;
}

.article-content__ads--bd .article-content__lists a {
  color: #d64937;
  color: var(--udn-red);
}

.article-content__ads--video {
  margin-bottom: var(--article-gap) !important;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.article-content__editor {
  zoom: 1;
  content-visibility: auto;
  margin-bottom: 50px;
}

.article-content__editor .fb_iframe_widget:not(.fb-video),
.article-content__editor .fb_iframe_widget:not(.fb-video) iframe,
.article-content__editor .fb_iframe_widget:not(.fb-video) span {
  min-width: 100% !important;
  width: 100% !important;
}

.article-content__editor video {
  max-width: 100%;
}

.article-content__editor p:empty {
  display: none;
}

.article-content__editor > * {
  margin: 0 0 var(--article-gap);
}

.article-content__editor .context-box {
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
}

.article-content__editor .context-box__header {
  margin-bottom: 0;
}

.article-content__editor .embedded-content > * {
  display: block;
  margin: 0 auto !important;
  max-width: 500px;
}

.article-content__editor .embedded-responsive,
.article-content__editor .video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.article-content__editor .embedded-responsive iframe,
.article-content__editor .video-container iframe {
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.article-content__editor p {
  word-break: break-all;
}

.article-content__editor p a {
  color: #2f76aa;
  color: var(--udn-blue);
}

.article-content__editor p a[rel] {
  border-bottom: 1px solid #7e7e7e;
  border-bottom: 1px solid var(--dark-grey);
  color: #7e7e7e;
  color: var(--dark-grey);
}

.article-content__editor p a[rel]:hover {
  border-color: #7e7e7e;
  border-color: var(--dark-grey);
  color: #000;
  color: var(--text-color);
}

@media screen and (max-width: 767px) {
  .article-content__editor {
    margin-bottom: 20px;
  }
}

.article-content__plugins {
  --social-gaps: 8px;
  align-items: center;
  content-visibility: auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--social-gaps);
  padding-right: 20px;
  width: 100%;
}

@media screen and (max-width: 1297px) {
  .article-content__plugins {
    padding-right: 10px;
  }
}

@media screen and (max-width: 1023px) {
  .article-content__plugins {
    padding-right: 0;
  }
}

.article-content__plugins .fb_iframe_widget {
  display: flex;
  height: 20px;
}

.article-content__plugins .plugins-line {
  display: flex;
  height: 20px;
  margin-left: var(--social-gaps);
}

.article-content__plugins .plugins-line:hover {
  opacity: 0.8;
}

.article-content__plugins .btn-sponsor {
  background: #09f;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  margin-left: var(--social-gaps);
  padding: 0 10px 0 8px;
}

.article-content__plugins .btn-sponsor i:before {
  font-size: 13px;
  margin-left: 0;
}

.article-content__plugins .btn-sponsor:hover {
  opacity: 0.8;
}

.article-content__image {
  --width: 100%;
  --height: inherit;
  align-items: center;
  content-visibility: auto;
  display: flex;
  flex-flow: column;
  font-size: 0;
  margin: var(--section-gap) auto var(--article-gap);
  max-width: 100%;
  width: var(--width);
}

.article-content__image img {
  display: block;
  height: var(--height);
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: var(--width);
}

.article-content__image img.lazyload:not([src]),
.article-content__image img.lazyloading:not([src]) {
  visibility: hidden;
}

@media screen and (max-width: 767px) {
  .article-content__image img {
    height: inherit;
    width: 100%;
  }
}

.article-content__image figcaption {
  align-self: flex-start;
  background-color: #fafafa;
  background-color: var(--bg);
  color: #333;
  color: var(--light-text-color);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.4;
  padding: 10px 0;
}

.one-column .article-content__cover.article-content__image figcaption {
  padding-left: 220px;
  padding-right: 220px;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__cover.article-content__image figcaption {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .article-content__image figcaption {
    font-size: 13px;
    line-height: 1.5;
  }
}

.article-content__image figcaption a {
  color: #2f76aa;
  color: var(--udn-blue);
}

.article-content__image--left {
  float: left;
  margin-right: 20px;
}

.article-content__image--right {
  float: right;
  margin-left: 20px;
}

.article-content__image--left,
.article-content__image--right {
  margin-bottom: 20px;
  margin-top: 8px;
}

.article-content__image--left:after,
.article-content__image--left:before,
.article-content__image--right:after,
.article-content__image--right:before {
  content: "";
  display: table;
}

.article-content__image--left:after,
.article-content__image--right:after {
  clear: both;
}

@media screen and (max-width: 767px) {
  .article-content__image--left,
  .article-content__image--right {
    float: none;
    margin: var(--section-gap) auto var(--article-gap);
  }

  .article-content__social {
    background: #fafafa;
    background: var(--bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    content-visibility: auto;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateY(-50px);
    width: 100%;
    z-index: 9;
  }

  .menu-stick .article-content__social {
    transform: translateY(49px);
  }

  .menu-stick.backward .article-content__social {
    transform: translateY(50px);
  }
}

.article-content__social .social-wrapper {
  display: flex;
  flex-flow: column wrap;
  position: sticky;
  top: 50px;
}

@media screen and (max-width: 767px) {
  .article-content__social .social-wrapper {
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 5px 0;
    position: static;
    top: 0;
  }
}

.article-content__social .btn-social {
  --border-radius: 1px;
  --shadow-bottom-color: 5px 5px 10px hsla(0, 0%, 83%, 0.6);
  --shadow-top-color: -5px -5px 10px hsla(0, 0%, 100%, 0.5);
  align-items: center;
  background-color: #fafafa;
  background-color: var(--bg);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-bottom-color), var(--shadow-top-color);
  display: flex;
  font-size: 22px;
  height: 50px;
  justify-content: center;
  line-height: 1;
  margin: 10px 0;
  padding: 0;
  position: relative;
  transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: box-shadow 0.3s linear;
  width: 50px;
}

.article-content__social .btn-social:active {
  box-shadow: none;
}

.article-content__social .btn-social:active:before {
  border-radius: 50%;
  box-shadow: inset var(--shadow-bottom-color), inset var(--shadow-top-color);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .article-content__social .btn-social {
    border: 0;
    box-shadow: none;
    font-size: 20px;
    height: 35px;
    margin: 0;
    width: 35px;
  }
}

.article-content__social .btn-social--whatsapp {
  display: none;
}

@media screen and (max-width: 767px) {
  .article-content__social .btn-social--whatsapp {
    display: flex;
    order: 4;
  }
}

.article-content__social .btn-social--facebook {
  margin-top: 0;
  order: 2;
}

@media screen and (max-width: 767px) {
  .article-content__social .btn-social--facebook {
    order: 5;
  }
}

.article-content__social .btn-social--line {
  order: 3;
}

@media screen and (max-width: 767px) {
  .article-content__social .btn-social--line {
    order: 6;
  }
}

.article-content .btn-like {
  font-size: 15px;
  margin-top: 0;
  order: 1;
}

@media screen and (max-width: 767px) {
  .article-content .btn-like {
    order: 3;
  }
}

.article-content .btn-bookmark {
  font-size: 18px;
}

.article-content .btn-comment {
  order: 5;
  position: relative;
}

.article-content .btn-comment.available:after,
.article-content .btn-comment.available:before {
  background: #d64937;
  background: var(--udn-red);
  border-radius: 50%;
  content: "";
  height: 6px;
  opacity: 0.8;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 6px;
}

@media screen and (max-width: 767px) {
  .article-content .btn-comment.available:after,
  .article-content .btn-comment.available:before {
    right: 4px;
    top: 4px;
  }
}

.article-content .btn-comment.available:hover:before {
  animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@media screen and (max-width: 767px) {
  .article-content .btn-comment {
    order: 1;
  }
}

.article-content .btn-bookmark {
  order: 6;
}

@media screen and (max-width: 767px) {
  .article-content .btn-bookmark {
    order: 2;
  }
}

.article-content .btn-text {
  order: 7;
  position: relative;
  transition: color 0.3s linear;
  will-change: font-size;
}

.size-up--up.article-content .btn-text,
.size-up.article-content .btn-text {
  color: #2f76aa;
  color: var(--udn-blue);
  font-size: 24px;
}

.size-up--up.article-content .btn-text:after,
.size-up.article-content .btn-text:after {
  content: "+";
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  right: 9px;
  top: 9px;
  transform: scale(0.75);
  transform-origin: left;
}

@media screen and (max-width: 767px) {
  .size-up--up.article-content .btn-text:after,
  .size-up.article-content .btn-text:after {
    right: 3px;
    top: 3px;
  }
}

.size-up--up.article-content .btn-text {
  font-size: 26px;
}

.article-content__paragraph {
  font-size: var(--article-size);
  line-height: 1.75;
  padding: 0 20px 0 60px;
  width: calc(100% - 50px);
}

.size-up .article-content__paragraph {
  --article-size: 22px;
}

@media screen and (max-width: 767px) {
  .size-up .article-content__paragraph {
    --article-size: 22px;
  }
}

.size-up--up .article-content__paragraph {
  --article-size: 24px;
}

@media screen and (max-width: 767px) {
  .size-up--up .article-content__paragraph {
    --article-size: 24px;
  }
}

@media screen and (max-width: 1297px) {
  .article-content__paragraph {
    padding: 0 10px 0 30px;
  }
}

@media screen and (max-width: 1023px) {
  .article-content__paragraph {
    padding: 0 0 0 15px;
  }
}

@media screen and (max-width: 767px) {
  .article-content__paragraph {
    line-height: 1.666667;
    padding: 0;
    width: 100%;
  }
}

.article-content__cover {
  --width: 930px;
  --height: 620px;
  content-visibility: auto;
  font-size: 0;
  margin: var(--section-gap) auto var(--article-gap);
  overflow: hidden;
  position: relative;
}

.article-content__cover:before {
  background-color: transparent;
  background-image: var(--bg-image);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 10%;
  content: "";
  filter: blur(2px);
  height: var(--height);
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(15);
  transform-origin: center;
  width: var(--width);
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .article-content__cover:before {
    display: none;
  }
}

.article-content__cover img {
  display: block;
  height: var(--height);
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: var(--width);
}

.article-content__cover img.lazyload:not([src]),
.article-content__cover img.lazyloading:not([src]) {
  visibility: hidden;
}

@media screen and (max-width: 767px) {
  .article-content__cover img {
    height: inherit;
    width: 100%;
  }
}

.article-content__cover figcaption {
  align-self: flex-start;
  background-color: #fafafa;
  background-color: var(--bg);
  color: #333;
  color: var(--light-text-color);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.4;
  padding: 10px 0;
}

.one-column .article-content__cover.article-content__cover figcaption {
  padding-left: 220px;
  padding-right: 220px;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__cover.article-content__cover figcaption {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .article-content__cover figcaption {
    font-size: 13px;
    line-height: 1.5;
  }
}

.article-content__cover figcaption a {
  color: #2f76aa;
  color: var(--udn-blue);
}

.article-content__cover + .article-content__plugins {
  margin-top: -20px;
}

@media screen and (max-width: 1297px) {
  .article-content__cover {
    --width: 660px;
    --height: 440px;
  }
}

@media screen and (max-width: 1023px) {
  .article-content__cover {
    --width: 720px;
    --height: 480px;
  }
}

@media screen and (max-width: 767px) {
  .article-content__cover {
    overflow: visible;
  }

  .article-content__cover img {
    font-family: "object-fit: cover";
    margin: 0 calc(-50vw + 50%);
    max-width: 100vw;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100vw;
  }
}

.article-content__subinfo {
  color: #7e7e7e;
  color: var(--dark-grey);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-bottom: var(--list-gap);
}

.article-content__subinfo .authors {
  max-width: calc(100% - 200px);
}

@media screen and (max-width: 767px) {
  .article-content__subinfo .authors {
    max-width: 100%;
  }
}

.article-content__time {
  display: inline-block;
  font-size: 11px;
  margin-right: 5px;
}

.article-content__author {
  align-items: center;
  display: inline-flex;
  flex-flow: row wrap;
  margin-right: 5px;
}

.article-content__author a {
  color: #2f76aa;
  color: var(--udn-blue);
}

.article-content__author .author-thumb {
  margin-left: 5px;
}

.article-content__title {
  font-size: 32px;
  line-height: 1.4;
  margin: 0 0 20px;
  margin: 0 0 var(--section-gap) 0;
}

@media screen and (max-width: 767px) {
  .article-content__title {
    font-size: 26px;
  }
}

.article-content__info {
  content-visibility: auto;
  display: flex;
  flex-flow: row wrap;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

@media screen and (max-width: 767px) {
  .article-content__info {
    justify-content: flex-end;
    margin-bottom: 30px;
    margin-bottom: var(--news-gap);
    min-height: 30px;
  }
}

.breadcrumb-items {
  align-items: center;
  display: inline-flex;
  margin: 0 2px;
}

.breadcrumb-items:last-of-type:after {
  content: "";
}

.breadcrumb-items:after {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: " / ";
  display: inline-block;
  font-size: 12px;
  margin-left: 6px;
}

@media screen and (max-width: 767px) {
  .ec-section,
  .sponsor-ads {
    display: none;
  }
}

.one-column .article-content__subinfo,
.one-column .article-content__title {
  margin: 0 auto 15px;
  margin: 0 auto var(--list-gap);
  padding-left: 220px;
  padding-right: 220px;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__subinfo,
  .one-column .article-content__title {
    padding-left: 0;
    padding-right: 0;
  }
}

.one-column .article-content__wrapper {
  padding-right: 0;
}

.one-column .story-list__holder {
  grid-gap: 30px 35px;
  grid-gap: var(--news-gap) 35px;
}

.one-column .article-content__title {
  margin-top: 20px;
}

.one-column .article-content__social {
  width: 70px;
}

@media screen and (max-width: 1023px) {
  .one-column .article-content__social {
    width: 50px;
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content__social {
    width: 100%;
  }
}

.one-column .article-content__cover {
  --width: 1280px;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__cover {
    --width: 970px;
    --height: 646.66px;
  }
}

@media screen and (max-width: 1023px) {
  .one-column .article-content__cover {
    --width: 720px;
    --height: 480px;
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content__cover {
    --width: 100%;
    --height: inherit;
  }
}

.one-column .article-content--timeline .article-content__paragraph {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0 70px 0 0;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content--timeline .article-content__paragraph {
    padding: 0 20px 0 0;
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content--timeline .article-content__paragraph {
    padding: 0;
  }
}

.one-column .article-content--timeline .article-content__editor {
  padding-left: 70px;
  width: calc(100% - 200px);
}

.one-column .article-content--timeline .article-content__editor img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

@media screen and (max-width: 1297px) {
  .one-column .article-content--timeline .article-content__editor {
    padding-left: 20px;
  }
}

@media screen and (max-width: 1023px) {
  .one-column .article-content--timeline .article-content__editor {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content--timeline .article-content__editor {
    padding-left: 0;
  }
}

.one-column .article-content__plugins {
  padding-right: 220px;
}

.main-story--timeline.one-column .article-content__plugins {
  padding-right: 70px;
}

@media screen and (max-width: 1297px) {
  .main-story--timeline.one-column .article-content__plugins {
    padding-right: 20px;
  }
}

@media screen and (max-width: 1023px) {
  .main-story--timeline.one-column .article-content__plugins {
    padding-right: 0;
  }
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__plugins {
    padding-right: 170px;
  }
}

@media screen and (max-width: 1023px) {
  .one-column .article-content__plugins {
    padding-right: 0;
  }
}

.one-column .article-content__paragraph {
  padding: 0 220px 0 150px;
  width: calc(100% - 70px);
}

@media screen and (max-width: 1297px) {
  .one-column .article-content__paragraph {
    padding: 0 170px 0 100px;
  }
}

@media screen and (max-width: 1023px) {
  .one-column .article-content__paragraph {
    padding: 0 0 0 15px;
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content__paragraph {
    padding: 0;
    width: 100%;
  }
}

.one-column .article-content__ads--bd,
.one-column .article-content__ads--text,
.one-column .article-content__ads--video,
.one-column .context-box,
.one-column .keywords {
  margin-left: auto;
  margin-right: auto;
  max-width: 970px;
}

@media screen and (max-width: 1023px) {
  .one-column .article-content__ads--bd,
  .one-column .article-content__ads--text,
  .one-column .article-content__ads--video,
  .one-column .keywords {
    padding-left: 20px;
  }
}

@media screen and (max-width: 767px) {
  .one-column .article-content__ads--bd,
  .one-column .article-content__ads--text,
  .one-column .article-content__ads--video,
  .one-column .keywords {
    padding-left: 0;
  }
}

.main-story--sales.one-column .article-content__paragraph {
  padding: 0 220px;
}

@media screen and (max-width: 1297px) {
  .main-story--sales.one-column .article-content__paragraph {
    padding: 0 100px;
  }
}

@media screen and (max-width: 1023px) {
  .main-story--sales.one-column .article-content__paragraph {
    padding: 0;
  }
}

.main-story--sales .article-content__paragraph {
  padding: 0 65px;
  width: 100%;
}

@media screen and (max-width: 1023px) {
  .main-story--sales .article-content__paragraph {
    padding: 0;
  }
}

.timeline-aside {
  font-size: 18px;
  line-height: 1.4;
  max-width: 200px;
}

@media screen and (max-width: 1023px) {
  .timeline-aside {
    background-color: #fafafa;
    background-color: var(--bg);
    display: flex;
    flex-flow: row nowrap;
    max-width: 100vw;
    overflow-x: auto;
    padding: 10px 5px 0;
    position: sticky;
    top: 0;
    transform: translateY(41px);
    transition: 0.3s linear;
    width: 100vw;
    z-index: 5;
  }

  .backward .timeline-aside {
    transform: translateY(95px);
  }

  .timeline-aside + .article-content__editor {
    margin-top: 20px;
  }
}

.timeline-aside__title {
  color: #7e7e7e;
  color: var(--dark-grey);
  font-size: 15px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin: 0;
  pointer-events: none;
}

.timeline-aside__time {
  color: #575757;
  font-size: 15px;
  font-weight: 500;
  font-weight: var(--bold-weight);
  pointer-events: none;
  position: relative;
  top: -6px;
}

@media screen and (max-width: 1023px) {
  .timeline-aside__time {
    display: inline-block;
    padding-top: 15px;
  }
}

.timeline-aside__lists {
  list-style: none;
  margin: 15px 0;
  padding-left: 10px;
}

@media screen and (max-width: 1023px) {
  .timeline-aside__lists {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: visible;
  }
}

.timeline-aside__lists li {
  border-left: 1px solid;
  border-color: #dedede;
  border-color: var(--bg-grey-border);
  border-style: solid;
  border-width: 0 0 0 1px;
  cursor: pointer;
  padding: 0 10px 20px;
  position: relative;
}

@media screen and (max-width: 1023px) {
  .timeline-aside__lists li {
    border-left-width: 0;
    min-width: 150px;
  }

  .timeline-aside__lists li:after {
    background: #dedede;
    background: var(--bg-grey-border);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 4px;
    width: 100%;
    z-index: 1;
  }
}

.timeline-aside__lists li:hover .timeline-aside__title {
  color: #2f76aa;
  color: var(--udn-blue);
}

.timeline-aside__lists li:before {
  background: #999;
  background: var(--light-grey);
  border-radius: 50%;
  content: "";
  display: block;
  height: 7px;
  left: -4px;
  position: absolute;
  top: 0;
  width: 7px;
  z-index: 2;
}

@media screen and (max-width: 1023px) {
  .timeline-aside__lists li:before {
    top: 1px;
  }
}

.timeline-aside__day {
  letter-spacing: 1px;
}

.timeline-aside__date {
  align-items: center;
  display: inline-flex;
  font-weight: 500;
  font-weight: var(--bold-weight);
  line-height: 1.1;
}

.timeline-aside__date:before {
  background: #ee5103;
  background: var(--udn-orange);
  content: "";
  display: inline-block;
  height: 9px;
  margin: 0 5px;
  transform: rotate(45deg);
  width: 9px;
}

.timeline-aside__year {
  color: #999;
  color: var(--light-grey);
  font-size: 11px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin-left: 2px;
}

@media screen and (max-width: 1023px) and (max-width: 767px) {
  .timeline-aside {
    padding: 10px 0 0;
    transform: translateY(50px);
  }
}

.timeline-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 15px 0;
}

@media screen and (max-width: 767px) {
  .timeline-title {
    font-size: 26px;
  }
}

.timeline-datetime {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid var(--bg-grey-border);
  color: #fff;
  display: flex;
  font-size: 21px;
  line-height: 1.55;
  margin-bottom: 0;
  padding: 5px 0;
}

.timeline-datetime:before {
  color: #575757;
  content: "\e86f";
  display: inline-block;
  font-family: fontello;
  margin-right: 5px;
}

@media screen and (max-width: 767px) {
  .timeline-datetime {
    font-size: 18px;
    padding: 20px 0 5px;
  }
}

.timeline-datetime span {
  display: inline-block;
  padding: 0 10px;
}

.timeline-datetime__time {
  background: #575757;
  border-bottom-right-radius: 3px;
  border-bottom-right-radius: var(--border-pixel);
  border-top-right-radius: 3px;
  border-top-right-radius: var(--border-pixel);
}

.timeline-datetime__date {
  background: #ee5103;
  background: var(--udn-orange);
  border-bottom-left-radius: 3px;
  border-bottom-left-radius: var(--border-pixel);
  border-top-left-radius: 3px;
  border-top-left-radius: var(--border-pixel);
}

.facebook-comment .fb_iframe_widget,
.facebook-comment .fb_iframe_widget iframe,
.facebook-comment .fb_iframe_widget span {
  min-width: 100% !important;
  width: 100% !important;
}

.discuss-board .context-box__content,
.facebook-comment .context-box__content {
  margin: 30px 0 0 auto;
  max-width: 840px;
}

@media screen and (max-width: 767px) {
  .discuss-board .context-box__content,
  .facebook-comment .context-box__content {
    margin-top: 15px;
  }
}

.one-column .discuss-board .context-box__content,
.one-column .facebook-comment .context-box__content {
  margin: 30px auto;
}

@media screen and (max-width: 767px) {
  .one-column .discuss-board .context-box__content,
  .one-column .facebook-comment .context-box__content {
    margin-top: 15px;
  }

  .related-news .context-box__header,
  .related-news .story-list__news:nth-child(n + 4),
  .sales-bottom {
    display: none;
  }
}

@media print {
  .article-content__social,
  .discuss-board,
  .ec-section,
  .facebook-comment,
  .sales-bottom,
  .sponsor-ads {
    display: none;
  }

  .article-content__cover img,
  .article-content__cover:before {
    width: 100%;
  }
}

.article-content iframe,
.article-content img {
  max-width: 100%;
}

.article-content b {
  font-weight: 500;
  font-weight: var(--bold-weight);
}

.article-content strong {
  font-weight: 400;
}

.article-content__lists {
  font-size: 18px;
  line-height: 1.4;
  list-style: none;
  margin: 15px 0;
  padding-left: 40px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .article-content__lists {
    font-size: 16px;
    padding-left: 20px;
  }
}

.article-content__lists li {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
  position: relative;
}

.article-content__lists li a {
  display: flex;
  flex-flow: row nowrap;
  font-size: 18px;
  margin: 0;
}

.article-content__lists li a:before {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "▪";
  display: inline-block;
  flex: none;
  margin-right: 5px;
}

.article-content__lists li:last-child {
  margin-bottom: 0;
}

.editor-feature--bg {
  background: #efefef;
  background: var(--bg-grey);
  border-left: 3px solid #ee5103;
  border-left: 3px solid var(--udn-orange);
  padding: 25px 35px;
}

@media screen and (max-width: 767px) {
  .editor-feature--bg {
    padding: 20px;
  }
}

.editor-feature--bg .article-content__lists {
  margin-bottom: 0;
  padding-left: 20px;
}

.editor-feature--bg .context-box__title {
  border-bottom: 0;
}

.article-lazybag__title {
  background: #579fd4;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  color: #fff;
  font-size: 21px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 2.15;
  margin: 0 0 30px;
  padding: 0 20px;
}

.article-lazybag__subtitle {
  color: #2f76aa;
  color: var(--udn-blue);
  font-size: 20px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  margin: 0 0 10px;
}

.article-lazybag__subtitle:before {
  background: #ee5103;
  background: var(--udn-orange);
  border-radius: 12px;
  content: "";
  display: inline-block;
  height: 14px;
  margin-right: 7px;
  width: 6px;
}

[class^="content_title"] {
  content-visibility: auto;
  font-size: var(--article-size);
  margin: 0 0 calc((var(--article-gap) / 2));
}

[class^="content_title"] a {
  color: inherit;
}

.content_title_1 {
  color: #2f76aa;
  color: var(--udn-blue);
}

.content_title_2 {
  color: #ee5103;
  color: var(--udn-orange);
}

.content_title_3 {
  color: #7e7e7e;
  color: var(--dark-grey);
}

.article-blockquote {
  content-visibility: auto;
  font-size: var(--article-size);
}

.article-blockquote__1 {
  background: #efefef;
  background: var(--bg-grey);
  border-left: 3px solid #ee5103;
  border-left: 3px solid var(--udn-orange);
  padding: 45px 35px;
}

.article-blockquote__2 {
  background: #efefef;
  background: var(--bg-grey);
  padding: 55px 70px;
}

@media screen and (max-width: 1297px) {
  .article-blockquote__2 {
    padding: 35px 50px;
  }
}

@media screen and (max-width: 767px) {
  .article-blockquote__2 {
    padding: 35px 30px;
  }
}

.article-blockquote__3 {
  background: #efefef;
  background: var(--bg-grey);
  border-bottom: 1px solid #ee5103;
  border-bottom: 1px solid var(--udn-orange);
  color: #ee5103;
  color: var(--udn-orange);
  padding: 55px 70px;
  position: relative;
}

.article-blockquote__3:before {
  background-image: url("blockquote.svg");
  background-repeat: no-repeat;
  background-size: 35px;
  content: "";
  display: inline-block;
  height: 35px;
  left: 50%;
  position: absolute;
  top: -15px;
  transform: translateX(-50%);
  width: 35px;
}

@media screen and (max-width: 1297px) {
  .article-blockquote__3 {
    padding: 35px 50px;
  }
}

@media screen and (max-width: 767px) {
  .article-blockquote__3 {
    padding: 35px 30px;
  }
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.udn-vote__count {
  align-self: flex-end;
  font-size: 13px;
  line-height: 1.2;
  text-align: right;
  width: 130px;
}

.udn-vote__percent {
  font-size: 18px;
  margin: 0 5px;
}

.udn-vote__quantity:after,
.udn-vote__quantity:before {
  display: inline-block;
}

.udn-vote__quantity:before {
  content: " ( ";
}

.udn-vote__quantity:after {
  content: "票 ) ";
}

.udn-vote__body {
  counter-reset: vote;
}

.udn-vote__list {
  border-bottom: 2px solid #c7c7c7;
  border-bottom: 2px solid var(--btn-grey);
  display: flex;
  flex-flow: row wrap;
  padding: 8px 0 3px;
  position: relative;
}

.udn-vote__list:empty {
  border-color: transparent;
  display: flex;
  flex-flow: column nowrap;
}

.udn-vote__list:empty:after,
.udn-vote__list:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.udn-vote__list:empty:after {
  background-color: #ddd;
  width: 75%;
}

.udn-vote__list h5 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: inline-block;
  display: -webkit-box;
  font-size: 15px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.4;
  margin: 0;
  max-height: calc(calc(1em * 1.4 * 2) + 12px);
  overflow: hidden;
  padding: 6px 0;
  width: calc(100% - 130px);
}

.udn-vote__list:last-child {
  margin-bottom: 20px;
}

.udn-vote__progress {
  background: #ffb478;
  bottom: -2px;
  height: 2px;
  left: 0;
  max-width: 100%;
  position: absolute;
  transition: width 0.3s linear;
}

.udn-vote__header {
  padding: 10px 0;
}

.udn-vote__total {
  bottom: 0;
  font-size: 12px;
  position: absolute;
  right: 0;
}

.udn-vote__total span {
  font-size: 17px;
  font-weight: 500;
  font-weight: var(--bold-weight);
}

.udn-vote__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: inline-block;
  display: -webkit-box;
  font-size: 21px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.4;
  margin: 10px 0;
  max-height: calc(1em * 1.4 * 3);
  overflow: hidden;
  width: calc(100% - 140px);
}

.udn-vote__title:empty {
  display: flex;
  flex-flow: column nowrap;
}

.udn-vote__title:empty:after,
.udn-vote__title:empty:before {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 3px;
  border-radius: var(--border-pixel);
  content: "";
  display: inline-block;
  height: 1em;
  margin-top: 2px;
  width: 100%;
}

.udn-vote__title:empty:after {
  background-color: #ddd;
  width: 75%;
}

.udn-vote__header {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.udn-vote__header .vote-img {
  background-position: 0;
  background-size: 200% 100%;
  border-radius: 50%;
  height: 120px;
  width: 120px;
}

.udn-vote__header .vote-img--filled {
  animation: none;
  background-position: 50%;
  background-size: cover;
}

.udn-vote .btn-holder .btn {
  padding: 6px 20px;
}

.vote-email,
.vote-rules,
.vote-validation {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  font-size: 15px;
  justify-content: center;
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

.vote-email input,
.vote-rules input,
.vote-validation input {
  border: 1px solid #dedede;
  border: 1px solid var(--bg-grey-border);
  border-radius: 3px;
  border-radius: var(--border-pixel);
  height: 30px;
}

.vote-image {
  aspect-ratio: 1/1;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
  will-change: transform;
}

.vote-rules span {
  display: inline-flex;
  margin-right: 20px;
}

.vote-rules span:before {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "▪";
  display: inline-block;
  margin-right: 5px;
}

.vote-rules .udn-vote__total {
  font-size: 15px;
  position: static;
}

.vote-validation {
  color: #7e7e7e;
  color: var(--dark-grey);
}

.vote-validation img {
  cursor: pointer;
  margin: 0 10px;
  max-width: 72px;
}

.vote-validation input {
  width: 80px;
}

.vote-holder {
  max-height: none;
  padding: 0 var(--padding-gap) var(--padding-height);
  position: relative;
  transition: max-height 0.3s linear;
}

.vote-holder:after,
.vote-holder:before {
  opacity: 0;
  position: absolute;
  transition: all 0.3s linear;
  visibility: hidden;
}

.vote-holder:before {
  content: "\e834";
  font-family: fontello;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.vote-holder:after {
  background: #fafafa;
  background: var(--bg);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.vote-holder[data-state="error"],
.vote-holder[data-state="loading"] {
  max-height: 300px;
  overflow: hidden;
}

.vote-holder[data-state="error"]:after,
.vote-holder[data-state="error"]:before,
.vote-holder[data-state="loading"]:after,
.vote-holder[data-state="loading"]:before {
  opacity: 1;
  visibility: visible;
}

.vote-holder[data-state="error"]:before {
  content: "投票模組異常，請稍後再試試看";
}

.vote-holder[data-state="loading"]:before {
  animation: spin 2s linear infinite;
  content: "\e834";
  font-family: fontello;
}

.vote-holder .btn-submit {
  border: 0;
  font-size: 18px;
  line-height: 45px;
  outline: 0;
  padding: 0;
  width: 220px;
}

.vote-questions {
  color: #7e7e7e;
  color: var(--text-unactive);
  font-size: 18px;
  font-weight: 300;
  font-weight: var(--regular-weight);
  line-height: 1.3;
  margin: 0 0 20px;
  margin-bottom: var(--section-gap);
}

.article-content__editor .vote-questions,
.vote-embedded .vote-questions {
  color: #000;
  color: var(--text-color);
  font-size: 20px;
  font-size: var(--article-size);
}

.vote-selection {
  font-size: 18px;
  padding: 0 30px;
}

@media screen and (max-width: 1297px) {
  .vote-selection {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .vote-selection {
    padding: 0;
  }
}

.vote-selection__lists {
  padding: 30px 0;
  padding: var(--news-gap) 0;
}

.vote-selection .input-holder {
  justify-content: flex-start;
  line-height: 1.4;
  margin-bottom: 30px;
  margin-bottom: var(--news-gap);
}

.vote-percent-show.vote-selection .input-holder label {
  max-width: calc(100% - 130px);
}

.vote-percent-show.vote-selection .input-holder.udn-vote__image label {
  max-width: 100%;
}

.vote-selection .vote-image__wrapper {
  display: inline-block;
  font-size: 0;
  margin: 1px 1px 5px;
  outline: 1px solid transparent;
  transition: all 0.3s ease-in-out;
}

.vote-selection .udn-vote__image {
  --left-margin: 0;
  display: inline-flex;
  flex-flow: column wrap;
  margin-right: 3.5%;
  width: 31%;
}

@media screen and (max-width: 1297px) {
  .vote-selection .udn-vote__image {
    margin-right: 1%;
    width: 49%;
  }
}

.vote-selection .udn-vote__image:after {
  margin-left: 0;
  width: 100%;
}

.vote-selection .udn-vote__image:nth-child(3n + 3) {
  margin-right: 0;
}

@media screen and (max-width: 1297px) {
  .vote-selection .udn-vote__image:nth-child(3n + 3) {
    margin-right: 1%;
  }

  .vote-selection .udn-vote__image:nth-child(2n + 2) {
    margin-right: 0;
  }
}

.vote-end .vote-selection .udn-vote__image.udn-vote__list {
  --left-margin: 0;
}

.vote-end .vote-selection .udn-vote__image.udn-vote__list:before {
  display: none;
}

.vote-end .vote-selection .udn-vote__image.udn-vote__list label {
  align-items: flex-start;
  flex-flow: column nowrap;
  margin-bottom: 5px;
}

.vote-selection .udn-vote__image .udn-vote__count {
  align-self: flex-start;
  margin-bottom: 5px;
  text-align: left;
}

.vote-selection
  .udn-vote__image
  .vote-checkbox:checked
  + label
  .vote-image__wrapper,
.vote-selection
  .udn-vote__image
  .vote-radio:checked
  + label
  .vote-image__wrapper {
  outline-color: #ee5103;
  outline-color: var(--udn-orange);
}

.vote-selection .udn-vote__image .vote-checkbox:checked + label img,
.vote-selection .udn-vote__image .vote-radio:checked + label img {
  transform: scale(0.8);
}

.vote-selection .udn-vote__image .vote-checkbox:checked + label:after,
.vote-selection .udn-vote__image .vote-radio:checked + label:after {
  display: none;
}

.vote-selection .udn-vote__image .vote-checkbox + label,
.vote-selection .udn-vote__image .vote-radio + label {
  align-items: flex-start;
  border-radius: 3px;
  flex-flow: column wrap;
  margin: 0 0 5px;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.vote-selection .udn-vote__image .vote-checkbox + label:before,
.vote-selection .udn-vote__image .vote-radio + label:before {
  display: none;
}

.vote-title {
  background-image: linear-gradient(
    180deg,
    transparent 0,
    hsla(0, 0%, 100%, 0.7) 40%,
    #fff
  );
  border-bottom: var(--padding-height) solid #fff;
  bottom: 0;
  color: #000;
  color: var(--text-color);
  font-size: 45px;
  left: 0;
  line-height: 1.4;
  margin: 0;
  padding: var(--padding-height) var(--padding-gap) 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .vote-title {
    font-size: 21px;
  }
}

.vote-figure {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.vote-figure:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: calc(2 / 3 * 100%);
  width: 100%;
}

.vote-figure img {
  left: 0;
  position: absolute;
  top: 0;
}

.vote-figure img.lazyload:not([src]),
.vote-figure img.lazyloading:not([src]) {
  visibility: hidden;
}

.vote-figure img:not(.lazyloaded) {
  background-position: 0;
  background-size: 200% 100%;
}

@media screen and (max-width: 767px) {
  .vote-figure img {
    transition: transform 0.3s linear;
  }
}

.vote-figure img {
  border-radius: 3px;
  border-radius: var(--border-pixel);
  max-width: 100%;
  width: 100%;
}

.udn-vote__progress {
  bottom: 0;
  height: 7px;
  margin-left: var(--left-margin);
  max-width: calc(100% - var(--left-margin));
  z-index: 1;
}

.udn-vote__list {
  border-bottom: 0;
}

.udn-vote__list,
.vote-end .udn-vote__list {
  --left-margin: 29px;
}

.vote-end .udn-vote__list:before {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "▪";
  display: inline-block;
  left: 5px;
  margin-right: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.udn-vote__list:after {
  background: #efefef;
  background: var(--bg-grey);
  content: "";
  height: 7px;
  margin-left: var(--left-margin);
  position: relative;
  top: 3px;
  width: calc(100% - var(--left-margin));
}

.vote-selection .udn-vote__list {
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .vote-selection .udn-vote__list {
    align-items: flex-start;
  }
}

.vote-end .input-holder label {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  font-size: 17px;
  justify-content: center;
  position: relative;
}

.vote-end .input-holder label:before {
  content: "";
  display: inline-block;
  flex: none;
  font-size: 14px;
  height: 17px;
  line-height: 24px;
  margin: 0 5px;
  text-align: center;
  visibility: hidden;
  width: 17px;
}

.vote-percent-none .vote-selection .input-holder label {
  max-width: 100%;
}

.udn-tabs {
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  align-items: stretch;
  background: #fff;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  line-height: 1.4;
  overflow: hidden;
  overflow-x: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.udn-tabs__content {
  padding: 10px 32px;
}

.udn-tabs__content .tab-content {
  font-size: 15px;
}

.udn-tabs__content .tab-content p {
  margin-bottom: 10px;
}

.udn-tabs__content .tab-content img {
  max-width: 100%;
}

.udn-tabs__content .tab-content img.double-image {
  max-width: 300px;
}

.udn-tabs__content .tab-content--center {
  text-align: center;
}

.udn-tabs ul {
  align-items: center;
  border-bottom: 1px solid #dedede;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-start;
  list-style: none;
  margin: 0 32px;
  padding: 0;
}

.udn-tabs li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  top: 1px;
}

.udn-tabs li.is-active a {
  border-bottom-color: #ee5103;
  font-weight: 500;
  font-weight: var(--bold-weight);
}

.udn-tabs li a {
  align-items: center;
  border-bottom: 1px solid transparent;
  color: #4a4a4a;
  display: flex;
  justify-content: center;
  margin: 0 18px;
  padding: 14px 0 5px;
  text-decoration: none;
  vertical-align: top;
}

.udn-tabs li a:first-child {
  margin-left: 0;
}

.paywall .article-content__editor {
  min-height: 600px;
  position: relative;
  width: 100%;
}

.paywall--isLogin.paywall .article-content__editor {
  height: inherit;
}

.paywall-content {
  align-items: center;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 98%, 0) 0,
    hsla(0, 0%, 98%, 0.8) 16%,
    #fafafa 20%
  );
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1;
}

.paywall-content__wrapper {
  position: relative;
}

.paywall-content__wrapper h4 {
  color: #d64937;
  color: var(--udn-red);
  font-size: 22px;
  margin: 10px 0;
}

.paywall-content__wrapper p {
  color: #000;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.2;
}

.paywall-content__member {
  display: flex;
  margin: 30px 0;
}

.paywall-content__member a {
  font-size: 16px;
  line-height: 1.2;
  margin: 0 5px;
  padding: 13px 0;
  width: 130px;
}

.paywall-content .spin4 {
  display: none;
}

.paywall-content__loading {
  margin-top: auto;
}

.paywall-content__loading:before {
  background: #fafafa;
  background: var(--bg);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.paywall-content__loading .spin4 {
  display: block;
}

.paywall-content__loading .spin4:before {
  color: #c7c7c7;
  color: var(--btn-grey);
  content: "\e834";
  display: inline-block;
  font-family: fontello;
  font-style: normal;
  font-weight: 400;
}

.my-udn-tab {
  background: #fff;
}

.my-udn-tab,
.vote-holder {
  margin-bottom: var(--article-gap);
}

.vote-holder .vote-selection__lists {
  padding: 20px 0;
  padding: var(--section-gap) 0;
}

.vote-holder .vote-selection .input-holder {
  margin-bottom: 20px;
  margin-bottom: var(--section-gap);
}

@media screen and (max-width: 1023px) {
  .navigation {
    display: flex;
    flex-flow: row nowrap; /* всё в одну строку */
    overflow-x: auto; /* включаем горизонтальную прокрутку */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
  }

  .navigation > * {
    flex-shrink: 0; /* не сжимать вложенные элементы */
    white-space: nowrap; /* если нужно — запрещает перенос текста */
  }
}