/* colors */
/* clearBoth */
/* breakpoints */
/* font */
/*===================
Article Style
===================*/
.Information {
  padding: 0 16px; }
  @media screen and (max-width: 37.5rem) {
    .Information {
      padding: 0; } }

.paragraph {
  clear: both;
  zoom: 1;
  margin-bottom: 32px;
  padding: 0 16px; }
  .paragraph:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .paragraph:last-child {
    margin-bottom: 0; }
  .paragraph p:not(.noMarginB) {
    font-family: "Merriweather", serif, "Noto Sans TC";
    line-height: 1.6;
    margin-bottom: 32px; }
    .paragraph p:not(.noMarginB):last-child {
      margin-bottom: 0; }
  .paragraph a:not(.languageLink):link {
    color: #004E98; }
  .paragraph a:not(.languageLink):active {
    color: #004E98; }
  .paragraph a:not(.languageLink):visited {
    color: #004E98; }
  .paragraph a:not(.languageLink):hover {
    color: #004E98; }
  @media screen and (max-width: 37.5rem) {
    .paragraph {
      padding: 0; } }

.article .PrimarySide h1 {
  font-weight: bold;
  margin-bottom: 16px; }
  .article .PrimarySide h1 .topic {
    color: #004E98;
    padding-right: 2px; }

.article .PrimarySide h2 {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 16px; }

.breadcrumb {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: bold;
  font-family: Roboto, sans-serif;
  margin-bottom: 8px; }
  .breadcrumb a {
    display: inline-block;
    vertical-align: middle; }
    .breadcrumb a:link {
      color: #004E98; }
    .breadcrumb a:active {
      color: #004E98; }
    .breadcrumb a:visited {
      color: #004E98; }
    .breadcrumb a:hover {
      color: #004E98; }

/* TimeAndShare */
.TimeAndShare {
  clear: both;
  zoom: 1;
  margin-bottom: 16px;
  position: relative; }
  .TimeAndShare:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }

.updatetime {
  float: left;
  font-size: 0.75rem;
  line-height: 1.4;
  padding-top: 8px; }
  @media screen and (max-width: 37.5rem) {
    .updatetime {
      float: none;
      margin-bottom: 8px; } }

.btn_like {
  display: inline-block;
  vertical-align: middle;
  width: 108px;
  height: 28px; }

.socialshare {
  float: right; }
  @media screen and (max-width: 37.5rem) {
    .socialshare {
      float: none; } }

a[class^="share_"] {
  background-color: #F4F4F4;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-left: 16px; }
  a[class^="share_"] svg {
    width: 22px;
    height: 22px;
    vertical-align: middle; }
  a[class^="share_"].btn_more svg {
    width: 16px;
    height: 16px;
    vertical-align: middle; }
  a[class^="share_"].btn_audio {
    width: 100px;
    border-radius: 20px;
    padding: 0 10px;
    box-sizing: border-box; }
    a[class^="share_"].btn_audio svg {
      width: 13px;
      height: 13px; }
  @media screen and (max-width: 37.5rem) {
    a[class^="share_"] {
      margin-left: 7px; }
      a[class^="share_"].btn_audio {
        width: 95px; } }
  @media screen and (max-width: 20rem) {
    a[class^="share_"] {
      margin-left: 13px; }
      a[class^="share_"].btn_audio {
        display: block;
        margin: 10px 0 0 0; } }

.binline {
  padding: 1px 0 0 5px;
  display: inline-block;
  vertical-align: middle; }

a[class^="more_"] {
  display: block;
  margin-bottom: 8px;
  line-height: 1;
  padding: 10px 0; }
  a[class^="more_"]:last-child {
    margin-bottom: 0; }
  a[class^="more_"]:link {
    color: #ffffff; }
  a[class^="more_"]:active {
    color: #ffffff; }
  a[class^="more_"]:visited {
    color: #ffffff; }
  a[class^="more_"]:hover {
    color: #ffffff; }
  a[class^="more_"] svg {
    width: 20px;
    height: 20px;
    vertical-align: middle; }
  a[class^="more_"] span {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle; }

.hiddenBtn {
  display: none;
  position: absolute;
  right: 15px;
  top: 41px;
  padding: 16px;
  background-color: rgba(35, 35, 35, 0.8);
  z-index: 2;
  border-radius: 5px 0 5px 5px; }
  .hiddenBtn.open {
    display: block; }
  .hiddenBtn::before {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 0 10px 20px;
    border-color: transparent transparent rgba(35, 35, 35, 0.8) transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    position: absolute;
    right: -5px;
    top: -30px; }
  @media screen and (max-width: 37.5rem) {
    .hiddenBtn {
      right: inherit;
      left: 173px;
      top: 70px;
      border-radius: 5px; }
      .hiddenBtn::before {
        border-width: 20px 10px 10px 0px;
        border-color: transparent transparent rgba(35, 35, 35, 0.8) transparent;
        right: inherit;
        left: 35px; } }
  @media screen and (max-width: 20rem) {
    .hiddenBtn {
      left: 160px; }
      .hiddenBtn::before {
        left: 65px; } }

.hasAudio .hiddenBtn {
  right: 135px; }
  @media screen and (max-width: 37.5rem) {
    .hasAudio .hiddenBtn {
      right: inherit;
      left: 173px; }
      .hasAudio .hiddenBtn::before {
        left: 35px; } }
  @media screen and (max-width: 20rem) {
    .hasAudio .hiddenBtn {
      left: 160px; }
      .hasAudio .hiddenBtn::before {
        left: 65px; } }

.hiddenBtn#hiddenTip {
  right: 12px; }
  .hiddenBtn#hiddenTip > div {
    width: 400px;
    margin: 0 auto;
    color: #ffffff; }
  @media screen and (max-width: 37.5rem) {
    .hiddenBtn#hiddenTip {
      right: 0;
      left: inherit; }
      .hiddenBtn#hiddenTip > div {
        width: 100%; }
      .hiddenBtn#hiddenTip::before {
        left: 300px; } }
  @media screen and (max-width: 20rem) {
    .hiddenBtn#hiddenTip {
      top: 110px;
      left: 0; }
      .hiddenBtn#hiddenTip > div {
        width: 100%; }
      .hiddenBtn#hiddenTip::before {
        left: 18px; } }

/* FullPic */
.FullPic {
  margin: 0 0 32px 0; }
  .FullPic figure {
    width: 46rem; }
  .FullPic .wrap {
    height: calc(46rem*0.625); }
  @media screen and (max-width: 64rem) {
    .FullPic figure {
      width: calc(100vw - 32px); }
    .FullPic .wrap {
      height: calc((100vw - 32px)*0.625); } }

/* media */
.media {
  margin: 32px 0;
  text-align: center;
  clear: both; }
  .media .wrap {
    margin-bottom: 0; }

.pageImg {
  position: relative;
  width: 100%; }
  .pageImg.center {
    width: 100%;
    margin: 0 auto 30px auto;
    text-align: center; }
    .pageImg.center > img {
      right: 0; }
  .pageImg.left {
    width: 300px;
    float: left;
    margin-right: 32px; }
  @media screen and (max-width: 37.5rem) {
    .pageImg {
      margin: 20px auto; }
      .pageImg.left {
        width: 100%;
        float: none;
        margin-right: 0; } }

.picinfo {
  text-align: left;
  margin-top: 8px;
  line-height: 1.4;
  font-size: 0.875rem;
  color: #595959;
  font-family: Roboto, sans-serif; }
  @media screen and (max-width: 20rem) {
    .picinfo {
      font-size: 0.75rem; } }

blockquote {
  margin: 48px auto;
  width: 64%;
  padding: 48px 32px;
  position: relative; }
  blockquote p {
    font-family: "Merriweather", serif;
    font-size: 1.125rem;
    font-weight: bold; }
  blockquote:before {
    content: '';
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url(../img/quotes_up.svg);
    left: 0;
    top: 0; }
  blockquote:after {
    content: '';
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url(../img/quotes_down.svg);
    right: 0;
    bottom: 0; }
  @media screen and (max-width: 37.5rem) {
    blockquote {
      width: 80%; }
      blockquote p {
        font-size: 1rem; } }
  @media screen and (max-width: 20rem) {
    blockquote {
      width: 90%;
      padding: 48px 24px; } }

.author {
  clear: both;
  zoom: 1; }
  .author:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .author p {
    font-family: "Merriweather", serif;
    color: #595959; }

.languageLink {
  font-size: 14px;
  position: relative;
  margin-top: 10px;
  display: inline-block;
  font-family: "Merriweather", serif; }
  .languageLink:link {
    color: #515151; }
  .languageLink:active {
    color: #515151; }
  .languageLink:visited {
    color: #515151; }
  .languageLink:hover {
    color: #515151; }
  .languageLink:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 13px);
    height: 1px;
    background-color: #515151;
    left: 13px;
    bottom: 0; }

/* youtube */
.youtube {
  position: relative; }

.youtubeBox .picinfo {
  padding: 0 0 10px 0; }

/* VOD */
.VOD {
  width: 100%; }
  .VOD .video-js {
    width: 100%;
    height: calc((46rem - 32px) * 0.5625); }
  @media screen and (max-width: 64rem) {
    .VOD .video-js {
      width: calc(100vw - 64px);
      height: calc((100vw - 64px) * 0.5625); } }
  @media screen and (max-width: 37.5rem) {
    .VOD .video-js {
      width: calc(100vw - 32px);
      height: calc((100vw - 32px) * 0.5625); } }

/* social media embed */
.facebookMedia {
  width: 500px;
  margin: 0 auto;
  text-align: center; }
  @media screen and (max-width: 37.5rem) {
    .facebookMedia {
      width: 99%; }
      .facebookMedia .fb-post span, .facebookMedia .fb-post iframe, .facebookMedia iframe {
        width: 99% !important; } }

.twitterMedia {
  width: 500px;
  margin: 0 auto;
  text-align: center; }
  @media screen and (max-width: 37.5rem) {
    .twitterMedia {
      width: 100%; }
      .twitterMedia iframe {
        width: 99% !important; } }

.instagramMedia {
  width: 500px;
  margin: 0 auto;
  text-align: center; }
  .instagramMedia .instagram-width {
    margin: 0 auto !important; }
  @media screen and (max-width: 37.5rem) {
    .instagramMedia {
      width: 100%; }
      .instagramMedia iframe {
        max-width: 100% !important;
        min-width: 100% !important; } }

.soundcloudMedia {
  margin: 0 auto;
  text-align: center; }

.noWidthMedia {
  margin: 0 auto;
  text-align: center; }

/* RelatedNews */
.RelatedNews {
  clear: both;
  zoom: 1;
  padding: 0 16px;
  margin-bottom: 32px; }
  .RelatedNews:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .RelatedNews a {
    padding: 16px 0;
    border-bottom: 1px solid #CDCDCD;
    display: block; }
    .RelatedNews a:last-child {
      border-bottom: none; }
  @media screen and (max-width: 37.5rem) {
    .RelatedNews {
      padding: 0; }
      .RelatedNews a:nth-of-type(3) {
        border-bottom: none; }
      .RelatedNews a:nth-of-type(4) {
        display: none; }
      .RelatedNews a:nth-of-type(5) {
        display: none; } }

.RelatedNews-title {
  font-family: "Merriweather", serif, "Noto Sans TC";
  font-size: 1.25rem;
  font-weight: bold;
  color: #004E98;
  line-height: 1.4; }

.RelatedNews-link {
  font-family: "Merriweather", serif, "Noto Sans TC";
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4; }
  .RelatedNews-link:link {
    color: #232323; }
  .RelatedNews-link:active {
    color: #232323; }
  .RelatedNews-link:visited {
    color: #232323; }
  .RelatedNews-link:hover {
    color: #232323; }

/* BottomAdBox */
.BottomAdGruop {
  text-align: center;
  margin: 32px 0;
  clear: both;
  zoom: 1; }
  .BottomAdGruop:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .BottomAdGruop .BottomAdBox {
    margin: 0 16px;
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    height: 250px; }
  @media screen and (max-width: 50rem) {
    .BottomAdGruop {
      display: none; } }

/* SimilarNews */
.SimilarNews {
  margin-bottom: 40px; }

.SimilarNews-title {
  font-size: 1.25rem;
  font-weight: bold;
  font-family: "Merriweather", serif;
  line-height: 1.4; }

.SimilarNews-group li {
  clear: both;
  zoom: 1;
  padding: 16px 0;
  border-bottom: 1px solid #CDCDCD; }
  .SimilarNews-group li:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }
  .SimilarNews-group li:last-child {
    border-bottom: none; }

.SimilarNews-group .wrap {
  float: left;
  width: 224px;
  height: 140px; }

.SimilarNews-group .SimilarBox {
  margin-left: 240px; }
  .SimilarNews-group .SimilarBox > div {
    line-height: 1.4;
    margin-bottom: 8px; }
    .SimilarNews-group .SimilarBox > div:last-child {
      margin-bottom: 0; }

.SimilarNews-group .Similar-title {
  font-size: 1.25rem;
  font-weight: bold;
  font-family: "Merriweather", serif; }

.SimilarNews-group .Similar-desc {
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  color: #595959; }

.SimilarNews-group .Similar-time {
  font-size: 0.75rem;
  font-family: Roboto, sans-serif;
  color: #595959; }

@media screen and (max-width: 37.5rem) {
  .SimilarNews-group li:nth-child(2) {
    border-bottom: none; }
  .SimilarNews-group li:nth-child(3) {
    display: none; }
  .SimilarNews-group .wrap {
    width: 140px;
    height: 87.5px; }
  .SimilarNews-group .SimilarBox {
    margin-left: 156px; }
  .SimilarNews-group .Similar-title {
    font-size: 1rem; }
  .SimilarNews-group .Similar-desc {
    display: none; } }

/* RecommendModule */
/* MbAdBox */
.MbAdBox {
  display: none;
  margin: 32px auto 64px auto;
  text-align: center; }
  @media screen and (max-width: 50rem) {
    .MbAdBox {
      display: block; } }

.RecommendModule {
  margin-bottom: 64px; }
  @media screen and (max-width: 64rem) {
    .RecommendModule {
      margin-bottom: 32px; } }

.OtherSideAdBox {
  margin-bottom: 32px;
  text-align: center; }
  .OtherSideAdBox.w-300 {
    width: 300px;
    height: 250px;
    margin: 0 auto 32px; }

/* audio ctrl */
.AudioCtrl {
  display: none; }
  .AudioCtrl.open {
    display: block; }

/* 2020 election custom */
.electionEmbed html, .electionEmbed body {
  height: 100%; }

.electionEmbed.parliament {
  width: 100%;
  height: 520px; }

.electionEmbed.presidentMap {
  width: 100%;
  height: 750px; }

.electionEmbed.presidentBar {
  width: 100%;
  height: 400px; }

.electionEmbed.twmap {
  width: 100%;
  height: 780px; }

@media screen and (max-width: 1023px) {
  .electionEmbed.parliament {
    width: 100%;
    height: 480px; } }

@media screen and (max-width: 767px) {
  .electionEmbed.parliament {
    width: 100%;
    height: 650px; }
  .electionEmbed.presidentMap {
    width: 100%;
    height: 720px; }
  .electionEmbed.presidentBar {
    width: 100%;
    height: 400px; }
  .electionEmbed.twmap {
    width: 100%;
    height: 700px; } }