@charset "utf-8";
/* CSS Document  */


body{
	background: #fff;
  font-family: Verdana,Arial,Helvetica,"微軟正黑體","Microsoft JhengHei",sans-serif;
  font-size: 0.625rem;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 10%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 10%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.10) 0%,rgba(0,0,0,0) 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}
h2{margin-top:0rem; margin-bottom: 2rem;}
a:hover{ 
  text-decoration: none; 
  color: rgb(202, 21, 28); 
}
.navbar>.container .navbar-brand{font-size: 0;}


/* ==navbar== */
.navbar{ 
	background: #fff; 
	padding:0px 0 0px 0;
  position: relative;
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #eee;
/*  box-shadow: 0 0 10px rgba(0,0,0,.2);*/
}

.navbar .container{
  border-bottom: 4px solid #c42605; 
  padding-top: 20px; 
  padding-bottom:25px;    
}



.container{ 
	width:1248px; /* 扣掉scroll寬 */ 
  max-width: 100%;
	margin: 0 auto; position:relative; 
  padding-left: 0;
  padding-right: 0;
}
.container:after{content: ''; display: block; clear: both;}

@media (max-width: 1247px){
  .container {
    width: calc(100% - 20px * 2);
    margin-left: 20px;
    margin-right: 20px;
  }
}



/* logo */
.navbar-brand {
    background: url(../img/RTI_logo.png) 0 0 no-repeat;
    width: 155px;
    height: 35px;
    background-size: auto 35px;
    display: inline-block;
    padding:0;
    margin:0;
}
.navbar-brand a{
    
    width: 155px;
    height: 35px;
    display:block;
}

@media (min-width: 768px){
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
	    margin-left: 0px;
	}
}



/* podcasts list */
.podcasts-wrapper {
    padding: 40px 0;
}
.podcasts-wrapper p{font-size: 2rem;}


.podcasts-box{
	display: flex;
  flex-wrap: wrap;
  vertical-align: top;
  text-align: left;
	margin-left: -10px;
  width: calc(100% + 20px);     
	justify-content: flex-start;

}
.podcasts-box .program-item{ 
  text-align: center;
  vertical-align: top;
  border:0;
  flex: 0 0 calc(25% - 20px);
  margin:5px 10px 20px 10px; 
  /*flex-wrap: wrap;
  display: inline-flex;
  align-content: stretch;*/
  text-align: left;
  
}
.podcasts-box .program-item{   
  padding:0; 
  border-bottom-width: 0px;
  background-color: #fff;
  border:1px solid #eee; 

}
.podcasts-box .program-item:hover{
  border:1px solid #c42605;
}

.podcasts-box .program-item .photo{ 
  padding-top: 0; 
  margin: 0 auto 0 auto; 
  border-bottom: 0px solid #fff; /* box-shadow: 0 0 10px rgba(0,0,0,.2); */
  width: 100%;
}
.podcasts-box .program-item:hover .photo{
  box-shadow: 0 0 10px rgba(202, 21, 28,0.2);

}

.podcasts-box .program-item .photo .box{
  position: relative;
  background-size: cover;
  display: block;
  font-size: 0;
}
.podcasts-box .program-item .photo .box:before{
  content: '';
  padding-top: 100%;
  width: 100%;
  display: block;

}

.podcasts-box .program-item .photo img{
  object-fit: cover;
  width: 100%;  height: 100%;
  position: absolute;
  top: 0; left: 0; right: 0;
}

.podcasts-box .program-item .conts{
  padding-bottom: 10px;
  /*display: flex; flex-direction: column;
  justify-content: space-between;
  width: 100%;
  position: relative;*/
}

.podcasts-box .program-item  .action{ position: absolute; bottom: 5px; right: 5px; }
.audio-play, .podcast-play {
    float: right;
    background: url(../img/icon-headphones.png) 50% 50% no-repeat;
    background-size: 20px auto;
    width: 28px;
    height: 28px;
    display: inline-block;
    background-color: #4a4a4a;
    margin-left: 5px;
    border-radius: 5px;
    margin-top: -5px;
    font-size: 0;
}
.podcast-play {
    background-image: url(../img/icon-podcast.png);
}
.audio-play:hover, .podcast-play:hover{background-color: rgb(202, 21, 28);}



.podcasts-box .title,
.podcasts-box .date,
.podcasts-box .author{ 
  margin:5px 10px; 
}

.podcasts-box .author{margin-right: 65px;}
.podcasts-box .title{
  color:#000;
  font-size: 1.8rem; 
}


.podcasts-box:hover .title{
  color: #c42605; 
}
.podcasts-box .title a{
  color: #000;
}

.podcasts-box .author, .podcasts-box .date{
  font-size: 1.4rem;
  color: #adadad;
}

.podcasts-box .author{margin-top: 20px;}
.podcasts-box .date{margin-top: -4px;}


/* Podcast 平台按鈕 */
.podcast_btn_box{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin:0 10px;
}

.podcast_btn_box .item-btn{
  border: 1px solid #cbcbcb;
  box-shadow: 0 0 6px rgba(0,0,0,.2);
  background-color: #fff;
  padding: 4px;
  border-radius: 5px;
  margin: 5px 5px 0 0;
  width: 30px;
  text-align: center;
  font-size: 0;
  line-height: 0;
}
.podcast_btn_box .item-btn .img{
  width: 20px;
}
.podcast_btn_box .item-btn:hover, .podcast_btn_box .item-btn:focus{
  border: 1px solid #d5444a;}


.play-window .podcast_btn_box{ justify-content: flex-start;  }
.podcast_btn_box .wording{ text-align: left; }

@media (max-width: 767px){
  .podcasts-box{
    display: flex;
    }
  .podcasts-box .program-item{     
    width:  auto;   
    flex: 0 0 calc(50% - 20px);
  }
  .podcasts-box .title{    font-size: 1.6rem;   }
  .podcasts-box .author{  font-size: 1.2rem;}
}



/* page */
.page-box{ margin-top: 20px; }
.page-box:after{ content: ''; display: block; font-size: 0; clear: both; }
.page-box, .page-box a{font-size: 1.8rem;}
.page-box .num-box{ float: left; color: #999999; }
.page-box .num-box a{ padding: 8px 5px; color: #626262; display: inline-block;}
.page-box .num-box a:hover {color: #c42605;}
.page-box .num-box a.current{ font-weight: bolder; font-size: 2rem; color: #c42605;}

.page-box .btn-box{ float: right; }
.page-box .btn-box a{ background-color: #343434; padding: 5px 5px; margin-left: 5px; display: inline-block; }
.page-box .btn-box a img{width: 40px;}
.page-box .btn-box a:hover{ background-color: #c42605; }
.page-box .btn-box a.disable{ cursor: not-allowed; background-color: #999999;}


@media  (max-width: 640px) {
 .page-box .num-box .dotted, .page-box .num-box a{ display: none; }
 .page-box .num-box a.current{ display: block; }
 .page-box .num-box a.current:before{content: 'PAGE:'; font-size: 1.6rem; color: #626262;}
} 




/* ====Modul==== ...*/
/* 行數 */


.ellipsis-effect{
 line-height: 1.5; /* h */
  overflow: hidden;
  font-size: 1em;
}

.ellipsis-effect .text{ 
  float: right;
  margin-left: -5px;
  width: 100%;
  font-size: 1em;
  word-break: break-all;
}

.ellipsis-effect::before{
  float: left;
  width: 5px; /* 與 .wrap .text 屬性 margin-left 一樣  */
  content: '';
}
.ellipsis-effect::after{
  float: right;
  content: "...";
  height: calc(1em * 1.5);
  line-height: calc(1em * 1.5);
  padding-right: 5px;
  text-align: right;
  width: 3em;  /* 为三个省略号的宽度 */
  margin-left: -3em; /* 使盒子不占位置 */
  position: relative; /* 移动省略号位置 */
  left: 100%;
  top: calc(1em * -1.5);
  padding-right: 4px;
  font-weight: normal;
color: #999;
  /* 显示更好的效果 */

  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    /* 重要 讓...不要失效 */
    -moz-box-sizing:content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

}
.ellipsis-effect.nodote::after{ content: ''; }

/* 1行 */
.ellipsis-effect, .ellipsis-effect::before {
  height: calc(1em * 1.5 * 1);
  
}

/* 2行 */
.ellipsis-effect.rows2, .ellipsis-effect.rows2::before  {
  height: calc(1em * 1.5 * 2);
  
}

/* 3行 */
.ellipsis-effect.rows3, .ellipsis-effect.rows3::before {
 height: calc(1em * 1.5 * 3);
}

/* 4行 */
.ellipsis-effect.rows4, .ellipsis-effect.rows4::before {
  height: calc(1em * 1.5 * 4);
}



/* ====Modul==== modal */


.modal-content{
  border-radius: 0;
  padding: 20px;
      width: 100%;
}
.modal-content h5{
  font-size: 2rem;
    font-weight: bolder;
    margin: 0 auto 10px 0;
    color: #343434;

}
.modal-body p{font-size: 1.4rem;}
.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
    max-width: 100%;
    margin: 1.75rem auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 20px;
  }
.modal-body{padding:0}

.modal-header .close{float: none; margin:0}
.modal-header .close span{
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('../img/close_black.png') 0 0 no-repeat;
  background-size: cover;
}


.copylink_box{
  background-color: #eee;
    border: #e2e2e2 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
  margin:10px 0;
}
.copylink_box input{border:0; height: 32px; line-height: 32px; font-size: 1.4rem; background-color:transparent; width: calc(100% - 100px);}
.copylink_box button{width:100px; background-color: rgb(202, 21, 28); color: #fff; height: 32px; border:0px; font-size: 1.4rem; padding:0 6px}
.copylink_box button:hover, .copylink_box button:focus{opacity: 0.8;}



/* noscript */
#RTIall.single-page .noscript-show .container, 
#RTIall.news-page .noscript-show .container,
.noscript-show{margin-top:0px; padding-top:1rem; padding-bottom:1rem;}
.noscript-show{ background-color:transparent;}
.noscript-show p{font-size:1.6rem; margin-bottom:15px; padding-top:0px;}
.noscript-show p:last-of-type{margin-bottom:0;}
.noscript-show a{text-decoration:underline;}
.noscript-show a:hover{text-decoration:none;}