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

/*------------------------------*\
			   內文
\*------------------------------*/

.whitecon.borderline{
    border:1px solid #c3c3c3;
}

/* 新聞標題+分隔線 */
.whitecon h1 {
    width:90%;
    font-family:'Noto Sans TC';
    font-size:28px;
    font-weight:700;
    line-height:35px;
    border:none;
    border-bottom:3px double #8c8b8b;
    padding:0 0 10px;
    margin:20px auto 5px;
}
/* 分享+功能鍵 */
.whitecon .function {
    width:90%;
    height:auto;
    margin:0 auto 15px;
    overflow: hidden;
}
.whitecon .function span.time /* 時間 */{
    display:block;
    width:100%;
    font-size:14px;
    color:#59493f;
    margin:10px auto 3px;
}
.whitecon .function span.author span /* 作者 */{
    display:block;
    width:100%;
    font-size:15px;
    color:#111;
    margin:0px auto 12px;
}
.whitecon .function a {
    display:inline-block;
    width:35px;
    height:35px;
    margin-right:5px;
}
.whitecon .function a:last-child{
    margin-right:0px;
}
.function a.sharefbnice {
    background-color:#1877f2;
    border-radius:100%;
    position:relative;
}
.function a.sharefbnice iframe {
    transform:scale(0.8);
    position:absolute;
    top:6px;
    left:-3px;
}
.function a.sharefb {
    background:url(../images/fb.svg) center no-repeat;
    background-size:35px;
}
.function a.sharetwitter {
    background:url(../images/twitter.svg) center no-repeat;
    background-size:35px;
}
.function a.shareline {
    background:url(../images/line.svg) center no-repeat;
    background-size:35px;
}
.whitecon .function a:hover {
    opacity:0.8;
}

/* 內文 */
.whitecon .text {
    width:90%;
    margin:0 auto;
}
.whitecon .text p,
.whitecon .text p b,
.whitecon .text p strong,
.whitecon .text p a,
.whitecon .text p span {
    font-size:18px;
    line-height:30px;
    text-align:justify;
    text-justify:inter-ideograph;
    margin:0px 0px 30px;
}
.whitecon .text p b,
.whitecon .text p strong {
    font-weight:500;
}
.borderline .text a{
    word-break: break-word;
}


/* RWD------------------------------ */
@media screen and (max-width:1300px) and (min-width:1140px) {
    .whitecon h1, .whitecon .function, .whitecon .text { width:93%; }
}

@media screen and (max-width:1139px) {
    .whitecon .function { text-align:right; }
    .whitecon .function span.time {
        display:inline-block;
        width:auto;
        float:left;
        font-size:15px;
        text-align:left;
        margin-right: 15px;
    }
    .whitecon .function span.author{
        display: inline-block;
        width: auto;
        margin: 10px auto 5px;
        float: left;
    }
    .whitecon .function > div{
        display: inline-block;
        overflow: hidden;
        margin-top:5px;
    }
}
@media screen and (max-width:600px) {
    .whitecon.borderline {
        padding-left:20px;
        padding-right:20px;
    }
    .whitecon .function,
    .whitecon .text{
        width:100%;
    }
    .whitecon h1{
        width:100%;
        margin:15px auto 8px;
        font-size:25px;
        font-weight:500;
        line-height:1.2;
    }
}
@media screen and (max-width:500px) {
    .whitecon.borderline {
        padding-left:15px;
        padding-right:15px;
    }
}
@media screen and (max-width:420px) {
    .whitecon .function{
        text-align: left;
    }
    .whitecon .function span.author span{
        margin-bottom:3px;
    }
}
@media screen and (max-width:380px) {
    .whitecon.borderline { padding-left:10px; padding-right:10px; }
}
@media screen and (max-width:330px) {
    .whitecon h1{ font-size:24px; }
}
/* ------------------------------RWD */

/*小標*/
.text h2, .text h3, .text h4, .text h5, .text h6,
.text h2 span, .text h3 span, .text h4 span, .text h5 span, .text h6 span,
.text h2 b, .text h3 b, .text h4 b, .text h5 b, .text h6 b,
.text h2 strong, .text h3 strong, .text h4 strong, .text h5 strong, .text h6 strong { font-size:20px; line-height:1.8; font-weight:500; color:#0160ba; }
.whitecon .text p a {
    color:#0160ba;
    font-weight:bold;
}
.whitecon .text p a:hover {
    color:#1e8ec5;
    text-decoration:underline;
}
/* ul/li */
.text > ul,
.text >p ul{
    margin:0px 0px 30px;
}
.text > ul li,
.text > p ul li{
    font-size:18px;
    line-height: 30px;
    list-style-type:disc;
    list-style-position: inside;
}

/* 老舊內文圖 */
.text img{
    width:100%;
}

/* 內文大圖 */
.text .photOut {
    width:100%;
    margin:0px auto 30px;
}
.text .photo {
    display:table;
    margin:auto;
    caption-side:bottom;
}
.text .photo a {
    margin:0px auto;
}
.text .photo a img {
    display:block;
    width:auto!important;
    max-width:100%;
    max-height:700px;
    line-height:0;
    margin:0px auto;
}
.text .photo p {
    display:table-caption;
    width:auto;
    font-size:18px;
    line-height:1.5;
    text-align:left;
    background-color:#e6e6e6;
    padding:7px 8px 8px;
    margin:0;
}

/* RWD------------------------------ */
@media screen and (max-width:600px) {
    .text .photOut{
        padding:0px
    }
    .text .photo p{
        padding-right:10px;
        padding-left:10px;
    }
}
@media screen and (max-width:500px) {
    .text .photOut{
        margin:15px auto;
    }
    .text h2, .text h3, .text h4, .text h5, .text h6,
    .text h2 span, .text h3 span, .text h4 span, .text h5 span, .text h6 span,
    .text h2 b, .text h3 b, .text h4 b, .text h5 b, .text h6 b,
    .text h2 strong, .text h3 strong, .text h4 strong, .text h5 strong, .text h6 strong { line-height:1.3; margin-bottom:10px; }
}

/* ------------------------------RWD */

/* 內文影音 YOUTUBE RWD */
.v_container ,
.v_containerTOP {
    height:0;
    padding-bottom:56.25%;
    position:relative;
    overflow:hidden;
    margin:0 auto 30px;
}
.v_container iframe,
.v_container object,
.v_container embed ,
.v_containerTOP iframe,
.v_containerTOP object,
.v_containerTOP embed{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
/* 影音專用，H1上 */
.v_containerTOP {
    margin:0 auto;
}

/* 關鍵字 */
div.keyword {
    width:100%;
    margin:30px auto 15px;
    padding:0;
    overflow:hidden;
}
div.keyword ul{
    /*overflow: hidden;*/
}
div.keyword ul li {
    float:left;
    cursor:pointer;
    height: 32px;
    background:#8295dc;
    border-bottom:5px solid #8295dc;
    padding:3px 8px 0px;
    margin:0px 10px 8px 0px;
    list-style-type:none;
    list-style-position: initial;
}
div.keyword ul li a {
    font-size:16px;
    line-height:1.6;
    color:#fff;
}
div.keyword ul li:hover{
    border-bottom:5px solid #6A7BB6;
}
div.keyword ul li:hover a {
    line-height: 1.42;
}

/* Album Examples */
.album-entrance{
    text-align: center;
    overflow: hidden;
	margin: 1rem 0;
}
.album-entrance .btn-outline{
	display: inline-block;
	border: 1px solid #9b9b9b;
    padding: 7px 16px;
    text-align: center;
	vertical-align: middle;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.album-entrance .btn-outline:hover{
	background:#07b8ea;
	border-color:#07b8ea;
}
.album-entrance .btn-outline:hover .x-small,
.album-entrance .btn-outline:hover span{
	color:#fff;
}
.album-entrance .btn-outline:hover .x-small:after{
	background:#fff;
}
.album-entrance .x-small{
	font-size:26px;
	font-family: "didot", times;
    font-weight:bold;
    line-height: 1;
    text-align: center;
    color:#000;
    padding-bottom: 5px;
    margin-bottom:8px;
	position: relative;
}
.album-entrance .x-small:after {
    display: inline-block;
    content: "";
    width: 25px;
    height: 2px;
    background: black;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}
.album-entrance .btn-outline span{
	font-size:16px;
    font-weight:normal;
	color: #0069b3;
}
.album-entrance .album-thumb-list {
    display: inline-block;
    max-width: 360px;
    padding: 0 10px;
    vertical-align: middle;
}
.album-entrance .album-thumb {
    width: 80px;
    height: 80px;
    background: #222;
    margin-right: 5px;
    margin-bottom: 5px;
	cursor:pointer;
    overflow: hidden;
    float: left;
}
.album-entrance .album-thumb:nth-child(4n){
    margin-right:0px;
}
.album-entrance .album-thumb:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.album-entrance .album-thumb img {
    max-width: 100%;
    max-height: 100%;
	vertical-align: middle;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
.album-entrance .album-thumb:hover img{
	opacity: 0.6;
}

/* RWD------------------------------ */
@media screen and (max-width:700px) {
    .album-entrance .btn-outline{
        margin:0px auto 15px!important;
    }
    .album-entrance .album-thumb-list{
        display: flex;
        flex-wrap: wrap;
        padding:0px;
        margin:0px auto;
        overflow: hidden;
    }
    .album-entrance .album-thumb{
        flex:0 0 23.9%;
        height: 0px;
        padding-bottom:23.9%;
    }
    .album-entrance .album-thumb:before{
        height: 0px;
        padding-top:100%;
    }
    .album-entrance .album-thumb img{
        width:100%;
        max-height: none;
    }
}
@media screen and (max-width:420px) {
    .album-entrance .btn-outline{
        padding:6px 14px;
        margin-bottom:10px!important;
    }
    .album-entrance .x-small{
        font-size: 24px;
        margin-bottom:5px;
    }
    .album-entrance .album-thumb-list{
        max-width:100%;
    }
    .album-entrance .album-thumb{
        margin-right:4px;
        margin-bottom:4px;
    }
}
/* ------------------------------RWD */

/*----- 文章下方區塊 -----*/
/* 標題後加影音小圖 */
span.video{
    display:inline-block;
    width:25px;
    height:20px;
    padding:0;
    margin-right:6px;
    background:url(../../images/video.svg) no-repeat;
    background-size:25px;
}

/* RWD------------------------------ */
@media screen and (max-width:330px) {
    span.video{
        width:18px;
        height:17px;
        background-size:20px;
    }
}
/* ------------------------------RWD */

/* 相關新聞 */
div.related ul{
    width:100%;
    padding:0px 15px;
    border: 1px solid #c3c3c3;
    border-top:none;
    overflow:hidden;
}
div.related li{
    width:100%;
    border-bottom:1px dotted #c3c3c3;
    padding:8px 0px;
    overflow: hidden;
}
/* 縮圖 */
div.related li .img {
    float:left;
    width:20%;
    height:0;
    padding:0 0 13.3333%;
    overflow:hidden;
}
div.related li .img img{
    width:100%;
    height: auto;
}
/* 標題 */
div.related li a.title { display:block; float:right; width:80%; margin-bottom:8px; }
div.related li a h3 {
    font-size:18px; font-weight:normal; font-family:"微軟正黑體"; line-height:1.3; padding:0 0 0 15px;
}
div.related li p.para{
    float:left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width:calc(100% - 30%);
    height: 48px;
    color:#777;
    line-height: 1.5;
    padding:0 0 0 15px;
    overflow:hidden;
}
div.related li:hover .img{
    opacity: 0.8;
}
div.related li:hover a h3{
    color: #1e8ec5;
}

/* RWD------------------------------ */
@media screen and (max-width:700px) {
    div.related ul{
        padding-top:15px;
    }
    div.related li{
        border-bottom: 1px solid #c3c3c3;
        padding:0px;
        margin: 0 0 15px;
    }
    div.related li .img{
        width: 35%;
        padding: 0 0 23%;
    }
    div.related li a.title { display:block; float:right; width:65%; margin:7px 0 0 0; }
    div.related li a h3 { display:block; height:auto; margin:0px; line-height:1.5; padding:0 0 0 10px; }
    div.related li p.para{
        display: none;
    }
}
@media screen and (max-width:600px) {
    div.related > ul { padding-left:20px; padding-right:20px; }
}
@media screen and (max-width:500px) {
    div.related > ul {
        padding-left:15px;
        padding-right:15px;
    }
    div.related li a.title { margin:-2px 0 6px; }
    div.related li a h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height:70px; line-height:1.3; overflow:hidden; }
}
@media screen and (max-width:380px) {
    div.related > ul { padding-left:10px; padding-right:10px; }
}
/* ------------------------------RWD */

/* 熱門文章 */
div.todaynews ul{
    display: flex;
    flex-wrap:wrap;
    padding:15px 15px 0px 15px;
    border: 1px solid #c3c3c3;
    border-top:none;
    overflow:hidden;
}
div.todaynews li{
    flex:0 032%;
    margin:0px 2% 15px 0px;
    overflow: hidden;
}
div.todaynews li a { display:block; }
div.todaynews li:hover img { opacity: 0.8; }

div.todaynews li:hover a h3 { color:#1e8ec5; }
div.todaynews li:nth-child(3n){
    margin-right:0px;
}
/* 縮圖 */
div.todaynews li a div {
    width:100%;
    height:0;
    padding:0 0 66.6666%;
    margin-bottom:3px;
    overflow:hidden;
}
div.todaynews li a div img{
    width:100%;
    height: auto;
}
/* 標題 */
div.todaynews li a h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width:100%;
    height: 54px;
    font-size:18px; font-weight:normal; font-family:"微軟正黑體";
    line-height:1.5;
    overflow: hidden;
}

/* RWD------------------------------ */
@media screen and (max-width:700px) {
    div.todaynews li{
        flex:100%;
        border-bottom: 1px solid #c3c3c3;
        margin: 0 0 15px;
    }
    div.todaynews li a div {
        float: left;
        width: 35%;
        padding: 0 0 23%;
        margin-bottom:0px;
    }
    div.todaynews li a h3 {
        float: left;
        -webkit-line-clamp: 3;
        width: 65%;
        height: 80px;
        line-height: 1.5;
        padding: 0 0 0 10px;
        margin-top: 7px;
    }
}
@media screen and (max-width:600px) {
    div.todaynews > ul { padding-left:20px; padding-right:20px; }
}
@media screen and (max-width:500px) {
    div.todaynews > ul { padding-left:15px; padding-right:15px; }
    div.todaynews > ul li a h3 { margin:-2px 0 6px; line-height:1.3; height:70px; }
}
@media screen and (max-width:380px) {
    div.todaynews > ul { padding-left:10px; padding-right:10px; }
}
/* ------------------------------RWD */

/* 熱門影音 */
div.popular_video ul{
    display: flex;
    flex-wrap:wrap;
    padding:15px;
    overflow:hidden;
}
div.popular_video li{
    flex:0 0 32%;
    margin:0px 2% 15px 0px;
    overflow: hidden;
}
div.popular_video li:nth-child(3n){
    margin-right:0px;
}
div.popular_video li a div /* 縮圖 */{
    width:100%;
    height:0;
    padding:0 0 56.25%;
    margin-bottom:3px;
    overflow:hidden;
}
div.popular_video li a div img{
    width:100%;
    height: auto;
}
div.popular_video li a p /* 標題 */{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width:100%;
    height: 54px;
    font-size:18px;
    line-height:1.5;
    overflow: hidden;
}

/* RWD------------------------------ */
@media screen and (max-width:700px) {
    div.popular_video > ul{
        justify-content: space-between;
    }
    div.popular_video li{
        flex:0 0 49%;
        margin:0px 0px 12px 0px;
    }
    div.popular_video li a div{
        border-bottom: 3px solid #c3b618;
    }
}
@media screen and (max-width:600px) {
    div.popular_video > ul { padding-left:20px; padding-right:20px; }
}
@media screen and (max-width:500px) {
    div.popular_video > ul {
        padding-left:15px;
        padding-right:15px;
    }
    div.popular_video li{
        flex:100%;
        border-bottom: 1px solid #c3c3c3;
    }
    div.popular_video li a div{
        border:none;
    }
    div.popular_video li a p{
        height: auto;
        -webkit-line-clamp: initial;
        margin-bottom: 7px;
        overflow:initial;
    }
}
@media screen and (max-width:380px) {
    div.popular_video > ul { padding-left:10px; padding-right:10px; }
}
/* ------------------------------RWD */

/* 網友回應 */
.fb-comments-wrapper{
    width:100%;
    border: 1px solid #c3c3c3;
    border-top: none;
    overflow: hidden; padding:10px auto;
}
.fb-comments,
.fb-comments iframe[style] {
    width:100% !important;
}
.fb-comments {
    width:100%;
    text-align:center;
}

/* 加入粉絲團 (桌機版隱藏) */
.add_fb { display:none; }

@media screen and (max-width:500px) {
    .add_fb { display:block; margin:20px 10px; border:4px solid #ddd; padding-bottom:12px; overflow:hidden; }
    .add_fb_title { border-bottom:1px dashed #ddd; font-size:1rem; color:#05a6d4; font-weight:bold; padding:10px; text-align:center; margin-bottom:12px; }
    .add_fb .box { text-align:center; }
}


/* ------------------------------ 熱門影音用 */
ul.videolist { display:flex; flex-wrap:wrap; width:100%; height:auto; overflow:hidden; background-color:#fff; padding:15px 15px 0px; border:1px solid #c3c3c3; }
ul.videolist li { flex: 0 0 32%; padding-bottom: 10px; margin: 0px 1.8% 20px 0px; border-bottom: 1px dashed #d5d5d5; overflow: hidden; }
ul.videolist li:nth-of-type(3n) { margin-right: 0px; }
ul.videolist li a { display:block; }
/* 圖 */
ul.videolist li a .ph { width:100%; height:0; padding:0 0 55%; overflow:hidden; }
ul.videolist li a:hover .ph { opacity:0.8; }
/* 標 */
ul.videolist li a h3 { font-size:18px; font-weight:normal; font-family:"微軟正黑體"; line-height:1.4; padding:5px 0 0; height:55px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
ul.videolist li a:hover h3 { color:#1e8ec5; }

@media screen and (max-width:800px) {
    ul.videolist li a h3 { height:76px; -webkit-line-clamp:3; }
}
@media screen and (max-width:600px) {
    ul.videolist li { flex: 0 0 100%; margin: 0px 0px 20px 0px; }
    ul.videolist li a h3 { display:block; height:auto; overflow:visible; }
}