* {
  box-sizing: border-box;
}

html, body {
  font-family: Merriweather, Roboto, Helvetica, Arial, '微軟正黑體', 'Microsoft JhengHei', 'PingFang TC', '儷黑 Pro', 'LiHei Pro', sans-serif;
}

:root {
  --main_1: #004E98;
  --main_1-1: #0263BF;
  --main_1-2: #0079EC;
  --main_2: #232323;
  --main_2-1: #3E3E3E;
  --main_2-2: #515151;
  --additional_1: #FFDD33;
  --additional_1-1: #FF9142;
  --additional_1-2: #FFBA33;
  --additional_2: #595959;
  --additional_2-1: #6D6D6D;
  --additional_2-2: #828282;
  --additional_3: #F4F4F4;
  --additional_3-1: #CDCDCD;
  --additional_3-2: #DADADA;
  --additional_4: #fff;
  --font_family_1: Roboto, sans-serif;
  --font_family_2: 'Merriweather', serif;
  --font_fomily_3: Times New Roman, serif;
}

.FixedTop {
  clear: both;
  zoom: 1;
}

.FixedTop:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

.FixedTop {
  position: relative;
}

.FixedTop.hidemenu .TopAdBox {
      display: none;
    }

@media screen and (max-width: 1024px) {

  .FixedTop {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 5;
  }
    .FixedTop .TopAdBox {
      display: none;
    }
}

.FixedTop.hidemenu .mb-scroll-icon {
  display: none;
}

.FixedTop.hidemenu .main-menu-ul li.current .sub-menu {
  display: none;
}

.FixedTop.hidemenu .menu-toggle.PCshowInline {
  display: none;
}

@media screen and (max-width: 1024px) {

  .FixedTop.hidemenu .main-menu {
    display: none;
  }
}

@media screen and (max-width: 1024px) {

  .FixedTop.hidemenu .side-menu {
    top: 70px;
  }
}

@media screen and (max-width: 600px) {

  .FixedTop.hidemenu .side-menu {
    top: 60px;
  }
}

@media screen and (max-width: 320px) {

  .FixedTop.hidemenu .side-menu {
    top: 54px;
  }
}

@media screen and (max-width: 600px) {

  .menuOpen header {
    height: 100%;
  }
}

header {
  background-color: var(--main_2);
  text-align: center;
  clear: both;
  zoom: 1;
}

header:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

header a:link {
      color: #ffffff;
    }

header a:active {
      color: #ffffff;
    }

header a:visited {
      color: #ffffff;
    }

header a:hover {
      color: #ffffff;
    }

@media screen and (max-width: 600px) {

  header {
    width: 100vw;
  }
}

.logo {
  display: block;
  padding: 24px 0;
  margin: 0 auto;
  width: 60%;
}

.logo img {
    width: 320px;
    height: 37px;
    vertical-align: middle;
  }

@media screen and (max-width: 1024px) {

  .logo {
    padding: 16px 0;
  }
}

@media screen and (max-width: 600px) {
    .logo img {
      /* width: 200px; */
      height: 28px;
    }
}

@media screen and (max-width: 320px) {
    .logo img {
      /* width: 150px; */
      height: 21px;
    }
}

.menu {
  display: flex;
  align-items: center;
  border-top: 1px solid #4c4b4b;
  text-align: left;
}

@media screen and (max-width: 800px) {

  .menu {
    border-top: none;
  }
    .menu::after {
      content: '';
      display: block;
      position: absolute;
      width: 64px;
      height: 35px;
      bottom: 0;
      right: 0;
      background: rgb(35, 35, 35);
      background: linear-gradient(
        90deg,
        rgba(35, 35, 35, 0) 0%,
        rgba(35, 35, 35, 1) 100%
      );
    }
}

@media screen and (max-width: 320px) {
    .menu::after {
    }
}

.mb-scroll-icon {
  display: none;
  position: absolute;
  right: 0;
  bottom: 12px;
  z-index: 2;
}

.mb-scroll-icon svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

@media screen and (max-width: 800px) {

  .mb-scroll-icon {
    display: block;
  }
}

.main-menu {
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {

  .main-menu {
    overflow: auto;
    position: relative;
    display: block;
    max-width: calc(100% + 40px);
    margin: 0 0 0 -20px;
  }
}

.main-menu-ul > li {
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }

.main-menu-ul > li.current:after {
      content: '';
      display: block;
      height: 2px;
      background-color: #93c9fc;
      width: 100%;
      position: absolute;
      bottom: 0px;
    }

.main-menu-ul > li.current > a:link {
      color: #93c9fc;
    }

.main-menu-ul > li.current > a:active {
      color: #93c9fc;
    }

.main-menu-ul > li.current > a:visited {
      color: #93c9fc;
    }

.main-menu-ul > li.current > a:hover {
      color: #93c9fc;
    }

.main-menu-ul a {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    margin: 0 12px;
    padding: 16px 0;
  }

@media screen and (max-width: 1150px) {

  .main-menu-ul a {
      margin: 0 6px;
  }
}

@media screen and (max-width: 1024px) {

  .main-menu-ul a {
      margin: 0 12px;
  }
}

.main-menu-ul a:last-child {
      margin-right: 0;
    }

@media screen and (max-width: 600px) {
    .main-menu-ul a {
      font-size: 1rem;
      padding: 0;
      height: 48px;
      line-height: 48px;
    }
}

@media screen and (max-width: 320px) {
    .main-menu-ul a {
      font-size: 0.875rem;
    }
}

.main-menu-ul li.current .sub-menu {
  display: block;
}

@media screen and (max-width: 1024px) {

  .main-menu-ul li.current .sub-menu {
    display: none;
  }
}

.sub-menu {
  display: none;
  position: absolute;
  top: 57px;
  left: 0;
  width: 272px;
  background-color: var(--main_2);
  padding: 16px;
  z-index: 2;
}

.sub-menu li {
    border-bottom: 1px solid var(--additional_3-1);
  }

.sub-menu li:last-child {
      border-bottom: none;
    }

.sub-menu a {
    display: block;
    font-size: 1rem;
  }

.sub-menu .wrap {
    width: 240px;
    height: 150px;
    margin-bottom: 16px;
  }

@media screen and (max-width: 1024px) {

  .scroll-layer {
    position: relative;
    width: 1000px;
    overflow: hidden;
  }
}

@media screen and (max-width: 320px) {

  .scroll-layer {
    width: 910px;
  }
}

/* Edition */

.Edition {
  right: 150px;
}

@media screen and (max-width: 1024px) {

  .Edition {
    display: none;
  }
}

.Search {
  right: 20px;
}

.Search .optionBox {
    width: 368px;
    padding: 24px;
  }

.Search .magnifier {
    margin-top: -11.2px;
  }

.Search .search-block {
    margin-bottom: 0;
  }

.Search .searchInput {
    width: 100%;
  }

@media screen and (max-width: 1024px) {

  .Search {
    display: none;
  }
}

.DropDownStyle {
  cursor: pointer;
  position: absolute;
  top: 8px;
  z-index: 100;
}

.DropDownStyle span {
    display: inline-block;
    vertical-align: middle;
  }

.DropDownStyle .arrow {
    display: inline-block;
    vertical-align: middle;
    transform: rotate(0deg);
  }

.DropDownStyle svg {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
  }

.DropDownStyle svg.prevm {
      width: 16px;
      height: 16px;
    }

.DropDownStyle .current-option {
    color: #ffffff;
  }

.DropDownStyle.dropdown .optionBox {
  display: block;
}

.DropDownStyle.dropdown .arrow {
  transform: rotateX(180deg);
}

.optionBox {
  display: none;

  position: absolute;
  right: 0;
  padding: 16px;
  width: 116px;
  text-align: left;
  border-radius: 4px;
  background-color: rgba(35, 35, 35, 0.8);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
}

.optionBox a {
    font-size: 12px;
    display: block;
    line-height: 1.4;
    font-family: var(--font_family_1), 'Noto Sans TC';
    margin-bottom: 8px;
  }

.optionBox a:last-child {
      margin-bottom: 0;
    }

.optionBox a:link {
      color: #ffffff;
    }

.optionBox a:active {
      color: #ffffff;
    }

.optionBox a:visited {
      color: #ffffff;
    }

.optionBox a:hover {
      color: #ffffff;
    }

/* side menu */

.menuOpen .side-menu {
  display: block;
}

.side-menu {
  display: none;
  width: 30rem;
  position: absolute;
  left: 0;
  top: 142px;
  z-index: 100;
  background-color: var(--main_2);
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-box-flex: 1;
}

.side-menu::-webkit-scrollbar {
    display: none;
  }

@media screen and (max-width: 1024px) {

  .side-menu {
    position: fixed;
    left: 0;
    top: 69px;
    height: 100vh;
  }
}

@media screen and (max-width: 600px) {

  .side-menu {
    width: 100vw;
    top: 61px;
  }
}

@media screen and (max-width: 320px) {

  .side-menu {
    top: 54px;
  }
}

.side-height {
  padding: 32px;
}

@media screen and (max-width: 1024px) {

  .side-height {
    padding: 32px 32px 180px 32px;
  }
}

@media screen and (max-width: 600px) {

  .side-height {
    padding: 32px 32px 100px 32px;
  }
}

.CateCollection {
  text-align: left;
}

.CateCollection li > a {
      font-weight: bold;
      line-height: 1.5;
      font-size: 1.125rem;
    }

.CateCollection li {
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid #595959;
}

.CateCollection li:last-child {
      border-bottom: none;
    }

.CateCollection li.hasarrow::after {
      content: '';
      display: block;
      background-image: url(../img/rightarrow.svg);
      background-position: center center;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 0;
      top: 16px;
      background-size: 100%;
    }

.CateCollection a {
    font-family: var(--font_family_1), 'Noto Sans TC';
    display: block;
  }

.CateCollection a:link {
      color: #ffffff;
    }

.CateCollection a:active {
      color: #ffffff;
    }

.CateCollection a:visited {
      color: #ffffff;
    }

.CateCollection a:hover {
      color: #ffffff;
    }

.CateCollection a[class^='icon-'] {
    display: inline-block;
    vertical-align: middle;
  }

@media screen and (max-width: 320px) {
      .CateCollection li > a {
        font-size: 1rem;
      }
}

.submenu {
  margin-top: 8px;
}

.subgroup {
  display: inline-block;
  vertical-align: top;
  margin-right: 64px;
}

.subgroup:last-child {
    margin-right: 0;
  }

.subgroup a {
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 0;
  }

.subgroup a:last-child {
      margin-bottom: 0;
    }

@media screen and (max-width: 320px) {
    .subgroup a {
      font-size: 0.875rem;
    }
}

a[class^='icon-'] svg {
    width: 26px;
    height: 26px;
    vertical-align: middle;
  }

a[class^='icon-'] {
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 100%;
  background-color: #ffffff;
  overflow: hidden;
  margin-right: 16px;
}

.menu-toggle {
  display: inline-block;
  vertical-align: middle;
  margin-right: 32px;
}

.toggleStyle {
  cursor: pointer;
}

.toggleStyle svg {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }

@media screen and (max-width: 1024px) {

  .toggleStyle {
    position: absolute;
    left: 16px;
    top: 20px;
    z-index: 2;
  }
}

@media screen and (max-width: 600px) {

  .toggleStyle {
    top: 16px;
  }
    .toggleStyle svg {
      width: 24px;
      height: 24px;
    }
}

.menu-icon {
  display: block;
}

.menu-close {
  display: none;
}

.menuOpen .menu-icon {
    display: none;
  }

.menuOpen .menu-close {
    display: block;
  }

/* search */

.search-block {
  position: relative;
  margin-bottom: 8px;
}

.magnifier {
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -12px;
}

.magnifier svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

.errorPage .toSearch {
}

.toSearch {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -20px;
  padding: 8px;
}

.toSearch svg {
    width: 24px;
    height: 12px;
    vertical-align: middle;
  }

.searchInput {
  width: 26rem;
  height: 3rem;
  padding: 0 8px 0 48px;
  outline: none;
  border: none;
}

@media screen and (max-width: 600px) {

  .searchInput {
    width: 100%;
    font-size: 1rem;
    line-height: 1.4;
  }
}

@media screen and (max-width: 320px) {

  .searchInput {
    font-size: 0.875rem;
  }
}

.PadOverlay {
  display: none;
}

.PadOverlay.open {
    display: block;
  }

.PadOverlay {

  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.menuOpen .PadOverlay {
  display: block;
}

@media screen and (max-width: 800px) {

  .menuOpen .PadOverlay {
    display: none;
  }
}

/* sticky */

@media screen and (max-width: 800px) {
  & .sticky {
    position: sticky;
    top: 0;
  }
  & .sticky:before,
  & .sticky:after {
    content: '';
    display: table;
  }
}

/* .appInfo {
  display: none;
  background-color: #eef0f3;
  align-itemss: center;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font_family_2);
  font-weight: 700;
  font-size: 14px;
  @mixin respond-to bp-large {
    display: flex;
    padding: 8px 16px;
  }
  .appInfoIcon {
    & > * {
      vertical-align: middle;
    }
    span {
      padding-left: 10px;
      @mixin respond-to bp-medium {
        padding-left: 6px;
      }
    }
  }
  a.appInfoBtn {
    font-size: 14px;
    color: #004e98;
    border: 1px solid #004e98;
    padding: 2px 6px;
    @mixin respond-to bp-medium {
      font-size: 12px;
    }
  }
} */

footer {
  background-color: var(--main_2);
  text-align: center;
  padding: 32px 0 var(--footer-padding);
}

@media screen and (max-width: 800px) {

  footer {
    padding: 32px 100px var(--footer-padding);
  }
}

@media screen and (max-width: 600px) {

  footer {
    padding: 24px 0 var(--footer-padding);
  }
}

.threeBox {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin-right: 48px;
  clear: both;
}

.threeBox:last-child {
    margin-right: 0;
  }

@media screen and (max-width: 800px) {

  .threeBox {
    margin-right: 0;
    width: 32%;
  }
}

@media screen and (max-width: 600px) {

  .threeBox {
    width: 75vw;
    margin-right: 0;
    padding: 16px 0;
  }
    .threeBox:first-child {
      padding: 0 0 16px 0;
    }
    .threeBox:last-child {
      margin-bottom: 0;
      border-bottom: none;
      padding: 16px 0 0 0;
    }
}

@media screen and (max-width: 320px) {

  .threeBox {
    width: 85vw;
  }
}

.fTitle {
  font-family: var(--font_family_2);
  color: #ffffff;
  font-weight: bold;
  font-size: 1rem;
  display: inline-block;
  vertical-align: top;
  margin-right: 24px;
  padding: 8px 0;
}

@media screen and (max-width: 800px) {

  .fTitle {
    width: 120px;
  }
}

@media screen and (max-width: 600px) {

  .fTitle {
    width: 132px;
    margin-right: 16px;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    font-weight: normal;
  }
}

@media screen and (max-width: 320px) {

  .fTitle {
    width: auto;
  }
}

.fBox {
  display: inline-block;
  vertical-align: top;
  font-family: var(--font_family_1);
  color: #c4c4c4;
  font-size: 0.875rem;
}

.fBox a {
    display: block;
    line-height: 1.5;
    padding: 10px 0;
  }

.fBox a:link {
      color: #c4c4c4;
    }

.fBox a:active {
      color: #c4c4c4;
    }

.fBox a:visited {
      color: #c4c4c4;
    }

.fBox a:hover {
      color: #c4c4c4;
    }

@media screen and (max-width: 600px) {

  .fBox {
    display: inline-block;
    vertical-align: top;
    float: right;
    min-width: 38%;
  }
}

html {
  font-size: 16px;
  touch-action: auto;
  overflow-y: scroll;
}

:lang(en) {
  -webkit-hyphens: auto;
          hyphens: auto;
}

body {
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  line-height: 1.4;
  color: var(--main_2);
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 1024px) {
    body.menuOpen {
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

article p {
  font-family: var(--font_family_2);
  margin: 0 auto;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.introtop p {
    margin: 0 auto;
    padding: 0;
    font-size: 1.125rem;
    color: var(--additional_2);
  }

@media screen and (max-width: 320px) {

  .introtop p {
      font-size: 1rem;
  }
}

.intro p {
    margin: 0 auto;
    padding: 0;
    font-size: 1rem;
    color: var(--additional_2);
  }

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

figure {
  margin: 0;
  padding: 0;
}

input {
  border-radius: 0;
  -webkit-appearance: none;
}

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

a {
  transition: all 0.3s ease-in;
  text-decoration: none;
}

a:link {
    color: var(--main_2);
  }

a:active {
    color: var(--main_2);
  }

a:visited {
    color: var(--main_2);
  }

a:hover {
    color: var(--additional_2);
  }

.container {
  position: relative;
  clear: both;
  zoom: 1;
}

.container:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

.wrapper {
  position: relative;
  max-width: 1152px;
  padding: 0 16px;
  margin: 0 auto;
  clear: both;
  zoom: 1;
}

.wrapper:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

.wrapper-sideMenu {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  clear: both;
  zoom: 1;
}

.wrapper-sideMenu:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

@media screen and (max-width: 1024px) {

  .wrapper-sideMenu {
    max-width: 100%;
  }
}

.bold {
  font-weight: bold;
}

/*===================
Container
===================*/

.PCshowInline {
  display: inline-block;
}

@media screen and (max-width: 1024px) {

  .PCshowInline {
    display: none;
  }
}

.PCshow {
  display: block;
}

@media screen and (max-width: 1024px) {

  .PCshow {
    display: none;
  }
}

.MobileShow {
  display: none;
}

@media screen and (max-width: 1024px) {

  .MobileShow {
    display: block;
  }
}

@media screen and (max-width: 800px) {

  .MobileShow {
    display: block;
    margin-bottom: 48px;
  }
}

/* Wrap */

.wrap {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: var(--additional_3);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}

/* 滿版溢出裁切 */

.wrap.full img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center center;
         object-position: center center;
    }

/* 鎖高置中 */

.wrap.limit img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: center center;
         object-position: center center;
    }

@media screen and (max-width: 600px) {

  .wrap {
    background-size: 60%;
  }
}

/* TopAdBox */

.TopAdBox {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  min-height: 90px;
}

@media screen and (max-width: 1024px) {

  .TopAdBox {
    display: none;
  }
}

/* BreakingNews */

.BreakingBlock {
  position: relative;
}

.BreakingNews {
  border: 2px solid var(--additional_1);
  margin: 32px 0 0 0;
  display: table;
  width: 100%;
}

@media screen and (max-width: 600px) {

  .BreakingNews {
    display: block;
    border: none;
    margin: 24px 0 0 0;
  }
}

.BN_t {
  display: table-cell;
  vertical-align: middle;
  background-color: var(--additional_1);
  padding: 16px 24px;
  text-align: center;
  width: 148px;
}

.BN_t h3 {
    font-weight: bold;
  }

@media screen and (max-width: 600px) {

  .BN_t {
    display: block;
    padding: 8px 24px;
  }
}

.BN_c {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  padding: 16px;
}

.BN_c h5 {
    font-weight: bold;
  }

@media screen and (max-width: 600px) {

  .BN_c {
    display: block;
    border: 2px solid var(--additional_1);
  }
}

/* font-size */

.font-18 p {
    font-size: 18px;
  }

.font-14 p {
    font-size: 14px;
  }

/*===================
GDPR
===================*/

.GDPR-content {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
  }

.GDPR.hide {
    display: none;
  }

.fix-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.privacy {
  background-color: var(--main_1);
  padding: 24px 32px;
  color: #ffffff;
}

@media screen and (max-width: 1024px) {

  .privacy {
    padding: 24px 16px;
  }
}

.privacy-main {
  margin-right: 30px;
}

@media screen and (max-width: 1024px) {

  .privacy-main {
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
    display: block;
  }
}

.privacy-btn {
  text-align: right;
  margin: 16px 0 0 auto;
  clear: both;
  zoom: 1;
}

.privacy-btn:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

@media screen and (max-width: 1024px) {

  .privacy-btn {
    width: 100%;
    display: block;
  }
}

.privacy-btn a {
    font-family: var(--font_family_2);
    text-align: center;
    line-height: 1.4;
    font-size: 1rem;
    height: 38px;
    display: inline-block;
  }

@media screen and (max-width: 1024px) {

  .privacy-btn a {
      vertical-align: middle;
  }
}

@media screen and (max-width: 600px) {

  .privacy-btn a {
      width: 100%;
  }
}

@media screen and (max-width: 320px) {

  .privacy-btn a {
      font-size: 14px;
  }
}

.privacy-btn a:nth-child(1) {
      padding: 8px 24px;
      background-color: #ffffff;
    }

.privacy-btn a:nth-child(1):link {
        color: var(--main_1);
      }

.privacy-btn a:nth-child(1):active {
        color: var(--main_1);
      }

.privacy-btn a:nth-child(1):visited {
        color: var(--main_1);
      }

.privacy-btn a:nth-child(1):hover {
        color: var(--main_1);
      }

.privacy-btn a:nth-child(2) {
      padding: 8px 10px;
      margin: 0 0 0 16px;
      border: 1px solid #FFF;
      background-color: transparent;
    }

@media screen and (max-width: 600px) {

  .privacy-btn a:nth-child(2) {
        margin: 16px 0 0;
  }
}

.privacy-btn a:nth-child(2):link {
        color: #ffffff;
      }

.privacy-btn a:nth-child(2):active {
        color: #ffffff;
      }

.privacy-btn a:nth-child(2):visited {
        color: #ffffff;
      }

.privacy-btn a:nth-child(2):hover {
        color: #ffffff;
      }

.privacy-t {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  line-height: 1.4;
}

@media screen and (max-width: 600px) {

  .privacy-t {
    font-size: 16px;
  }
}

.privacy-c {
  font-size: 14px;
  line-height: 1.4;
}

.grey-tip {
  color: #242323;
  background: #ECECEC;
  text-align: center;
  padding: 6px;
  font-weight: 700;
  font-size: 14px;
}

@media screen and (max-width: 600px) {

  .grey-tip {
    padding: 10px 0px 20px;
    font-size: 12px;
    overflow: hidden;
  }
}

@media screen and (max-width: 600px) {

  .grey-tip > span {
      transform: scale(0.85);
      display: block;
      width: 120%;
      margin: 0 0 0 -10%;
  }
}

/*===================
fixedAd 手機全站置底廣告
===================*/
.fixedAd {
  text-align: center;
}

  .fixedAd > div {
    margin: 0 auto;
  }

.fixedAdWrapper {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1024px) {
  .fixedAdWrapper {
    display: block;
  }
}

.fixedAdBtn {
  position: absolute;
  top: 0;
  right: 5px;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

  .fixedAdBtn.show {
    display: flex;
  }


/*===================
LoadMore
===================*/

.LoadMore {
  font-family: var(--font_family_2);
  font-size: 0.875rem;
  font-weight: bold;
  width: 135px;
  height: 36px;
  line-height: 36px;
  color: #ffffff;
  background-color: var(--main_2);
  text-align: center;
  display: block;
}

.LoadMore:link {
    color: #ffffff;
  }

.LoadMore:active {
    color: #ffffff;
  }

.LoadMore:visited {
    color: #ffffff;
  }

.LoadMore:hover {
    color: #ffffff;
  }

.LoadMore {
  margin: 24px auto 64px auto;
}

@media screen and (max-width: 600px) {

  .LoadMore {
    margin: 24px auto 48px auto;
  }
}

@media screen and (max-width: 320px) {

  .LoadMore {
    margin: 24px auto;
  }
}

.viewALL {
  font-family: var(--font_family_2);
  font-size: 0.875rem;
  font-weight: bold;
  width: 135px;
  height: 36px;
  line-height: 36px;
  color: #ffffff;
  background-color: var(--main_2);
  text-align: center;
  display: block;
}

.viewALL:link {
    color: #ffffff;
  }

.viewALL:active {
    color: #ffffff;
  }

.viewALL:visited {
    color: #ffffff;
  }

.viewALL:hover {
    color: #ffffff;
  }

.viewALL {
  margin: 32px auto 32px auto;
}

/*===================
General Style
===================*/

.PrimarySide {
  width: calc(100% - 382px);
  margin-right: 50px;
  float: left;
}

@media screen and (max-width: 1024px) {

  .PrimarySide {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

.OtherSide {
  width: 332px;
  float: right;
}

@media screen and (max-width: 1024px) {

  .OtherSide {
    width: 100%;
    float: none;
  }
}

@media screen and (max-width: 1024px) {

  .list .OtherSide, .article .OtherSide, .brand .OtherSide, .searchResult .OtherSide {
    display: none;
  }
}

.Latest {
  margin-bottom: 32px;
}

@media screen and (max-width: 1024px) {

  .Latest {
    margin-bottom: 0;
  }
}

.latestMore {
  text-align: right;
  font-size: 0.875rem;
  margin: 16px 0 0 auto;
  font-family: var(--font_family_2);
}

.latestMore span {
    display: inline-block;
  }

.latestMore svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }

@media screen and (max-width: 1024px) {

  .latestMore {
    text-align: center;
  }
}

/* mustWatch */

.VideoGrayBG {
  position: relative;
  clear: both;
  zoom: 1;
}

.VideoGrayBG:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

.VideoGrayBG::before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    z-index: -1;
    background-color: var(--additional_3);
    height: 190px;
    left: 0;
    top: 240px;
  }

@media screen and (max-width: 1024px) {
    .VideoGrayBG::before {
      top: calc(56.25vw - 160.4px);
    }
}

@media screen and (max-width: 600px) {
    .VideoGrayBG::before {
      height: 160px;
      top: calc(56.25vw - 136px);
    }
}

@media screen and (max-width: 320px) {
    .VideoGrayBG::before {
      height: 80px;
      top: calc(56.25vw - 67.2px);
    }
}

@media screen and (max-width: 1024px) {
    .videoPage.VideoGrayBG::before {
      display: none;
    }
}

/* halfBox */

.halfBoxGroup {
  clear: both;
  zoom: 1;
}

.halfBoxGroup:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: '';
  clear: both;
  height: 0;
}

.halfBox {
  width: calc(50% - 16px);
  float: left;
  margin-right: 32px;
  margin-bottom: 32px;
}

.halfBox:nth-child(2n) {
    margin-right: 0;
  }

.halfBox:nth-child(2n + 1) {
    margin-right: 32px;
  }

@media screen and (max-width: 600px) {

  .halfBox {
    width: calc(50% - 8px);
    margin-right: 16px;
    margin-bottom: 16px;
  }
    .halfBox:nth-child(2n + 1) {
      margin-right: 16px;
    }
}

@media screen and (max-width: 320px) {

  .halfBox {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

.ad-top {
  width: 970px;
  height: 90px;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {

  .ad-top {
    display: none;
  }
}

/* img cls prevent */

[style*='--aspect-ratio'] {
  position: relative;
  display: block;
}

[style*='--aspect-ratio']::before {
  content: '';
  display: block;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
}

[style*='--aspect-ratio'] > img {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 600px) {

  [style*='--aspect-ratio'] > img {
    width: 100%;
  }
}

.mobile-ad {
  display: none;
}

@media screen and (max-width: 600px) {

  .mobile-ad {
    display: block;
  }
}