@charset "utf-8";
/*Content HomeContent*/
.Content.HomeContent { display:flex; align-items: flex-start; /* 頂部對齊 */ margin-top:40px; gap:0 40px; position:relative;}
.Content.HomeContent * { padding:0; margin:0; list-style:none;}
.Content.HomeContent h2 { font-size:1.875em; font-weight: bold; width:100%; color:var(--color-main); letter-spacing:2px;}
.Content.HomeContent h2 a,
.Content.HomeContent h2 a:link,
.Content.HomeContent h2 a:visited { color:var(--color-main); text-decoration: none;}
.Content.HomeContent h2 a:hover,
.Content.HomeContent h2 a:focus { color:var(--color-main); text-decoration: underline;}
.Content.HomeContent h2 a.aspNetDisabled:hover,
.Content.HomeContent h2 a.aspNetDisabled:focus {text-decoration: none;}
.Wrapper.dark-mode .Content.HomeContent h2 a,
.Wrapper.dark-mode .Content.HomeContent h2 a:link,
.Wrapper.dark-mode .Content.HomeContent h2 a:visited { color:white;}
.Wrapper.dark-mode .Content.HomeContent h2 a:hover,
.Wrapper.dark-mode .Content.HomeContent h2 a:focus { color:white;}
.Content.HomeContent a { display:block; width:100%; height:auto; overflow:hidden;}
.Content.HomeContent img { display:block; max-width:100%; height:auto;object-fit: cover; background:#f5f5f5; border:1px solid rgb(230 230 230); border-radius: 15px;}
.Content.HomeContent img.portrait {object-fit: contain;}
.Content.HomeContent .left-content { width:960px;}

.Content.HomeContent .left-content > div { display:flex; flex-wrap:wrap; gap:0 40px; overflow:hidden;}
.Content.HomeContent img { display:block; max-width:100%; height:auto;object-fit: cover; background:#f5f5f5; border:1px solid rgb(230 230 230); border-radius: 15px;}
.Content.HomeContent .left-content > div .breaking-news { width:300px;}
.Content.HomeContent .left-content > div .breaking-news ul li:not(:last-child) { border-bottom:1px solid #ccc;}
.Content.HomeContent .left-content > div .breaking-news ul li a { padding:5px 0;}
.Content.HomeContent .left-content > div .breaking-news ul li a h3 { margin-bottom: 0; font-size:0.95em; font-size:1.04em; letter-spacing:0;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

.Content.HomeContent .left-content > div .main-news { width:calc( 100% - 340px ); overflow:hidden; position:relative; padding-bottom:15px;}
.Content.HomeContent .left-content > div .main-news img{ width:100%; height:345px; margin-bottom:20px;}
.Content.HomeContent .left-content > div .main-news .title{ margin-bottom: 5px; letter-spacing:1px; font-size:1.625em; font-size:1.25em; line-height:1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.Content.HomeContent .left-content > div .main-news .editor-content{ margin-bottom: 5px; font-size:0.875em;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.Content.HomeContent .left-content > div .main-news .swiper-pagination { width:100%; height:15px; overflow:hidden; display:flex; flex-wrap:wrap; justify-content:center;}
.Content.HomeContent .left-content > div .main-news .swiper-pagination .swiper-pagination-bullet { width:15px; height:15px; margin:0 3px;}
.Content.HomeContent .left-content > div .main-news .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#333;}

.Content.HomeContent .left-content > div.news-section > section { display:flex; flex-wrap:wrap; width:100%; height:auto; overflow:hidden; margin-top:20px; border-top:1px solid #ccc; padding-top:20px; gap:20px 40px;}
.Content.HomeContent .left-content > div.news-section > section .main-side { width: 620px; flex-grow: 1; }
.Content.HomeContent .left-content > div.news-section > section .def-media-content .photo { display:block; width:100%; height:auto; float:left; position:relative; overflow:hidden; border-radius: 15px;}
.Content.HomeContent .left-content > div.news-section > section .def-media-content .photo img { object-fit: cover; background:none;}
.Content.HomeContent .left-content > div.news-section > section .def-media-content .photo:before { content:''; display:block; width:3.5rem; height:3.5rem; overflow:hidden; position:absolute; top:50%; margin-top:-1.75rem; left:50%; margin-left:-1.75rem; border:0.25rem solid white; opacity:0.8; z-index:1;
background:url(/tw/Images/Layout/UI/Btn_Play_a.png) center center no-repeat;
/*背景圖片尺寸*/
background-size:contain;
/*圓角*/
border-radius:100%;
/*基礎動畫設定*/
transition:all .5s, transform .5s;}
.Content.HomeContent .left-content > div.news-section > section .def-media-content a:hover > span.photo:before,
.Content.HomeContent .left-content > div.news-section > section .def-media-content a:active > span.photo:before,
.Content.HomeContent .left-content > div.news-section > section .def-media-content a:focus > span.photo:before { background:url(/tw/Images/Layout/UI/Btn_Play_a.png) center center no-repeat, rgba(0,100,180,1); border:0.25rem solid rgba(0,100,180,1); opacity:1;
/*背景圖片尺寸*/
background-size:contain;}
.Content.HomeContent .left-content > div.news-section > section .main-side img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.Content.HomeContent .left-content > div.news-section > section .main-side img.portrait {object-fit: contain;}
.Content.HomeContent .left-content > div.news-section > section .main-side .title{ margin-top:10px; margin-bottom: 5px; letter-spacing:1px; font-size:1.625em; line-height:1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.Content.HomeContent .left-content > div.news-section > section .main-side .editor-content{ margin-bottom: 5px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.Content.HomeContent .left-content > div.news-section > section .main-side + aside { width: 300px; flex-shrink: 0; }
.Content.HomeContent .left-content > div.news-section > section .main-side + aside article { margin-bottom: 20px; }
.Content.HomeContent .left-content > div.news-section > section .main-side + aside article:last-child { margin-bottom: 0; }
.Content.HomeContent .left-content > div.news-section > section .main-side + aside article img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 10px;
}
.Content.HomeContent .left-content > div.news-section > section .main-side + aside article img.portrait {object-fit: contain;}
.Content.HomeContent .left-content > div.news-section .mark { font-size:0.875em; color:#999;}
.Content.HomeContent .left-content > div.news-section .banner-middle { width:100%; height:auto; overflow:hidden; margin-top:20px; border-top:1px solid #ccc; padding:20px; padding-bottom:0;}
.Content.HomeContent .left-content > div.news-section .banner-middle img { margin:0 auto;}

.Content.HomeContent .left-content > div.def-media > section .def-media-content { display:flex; flex-wrap:wrap; width:100%; height:auto; overflow:hidden; gap:20px 40px;}
.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * { margin-bottom: 16px; }
.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > *:last-child { margin-bottom: 0; }
.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * .photo { display:block; width:100%; height:auto; overflow:hidden; background:#000; height:165px;}
.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * img { width:100%; object-fit: cover; margin-bottom:0;height: 165px; border:0;}
.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * img.portrait {object-fit: contain;}
.Content.HomeContent .right-sidebar { width:280px;}
.Content.HomeContent .right-sidebar.right-div-fixed-bottom { position:fixed; bottom:0; right:50%; margin-right:-640px;}
.Content.HomeContent .right-sidebar.right-div-absolute-bottom { position:absolute; right:0; margin:0;}
.Content.HomeContent .right-sidebar.right-div-normal-top { position:static; right:auto; margin:0;}
.Content.HomeContent .right-sidebar > div:not(:last-child) { margin-bottom:20px;}

.Content.HomeContent .right-sidebar > div.def-epaper { margin-bottom:20px;}
.Content.HomeContent .right-sidebar > div.def-epaper img { border-radius:0;}
.Content.HomeContent .right-sidebar > div.def-epaper ul { width:100%; height:auto; overflow:hidden;}
.Content.HomeContent .right-sidebar > div.def-epaper ul li { padding:5px 0; border-bottom:1px dashed #ccc; }
.Content.HomeContent .right-sidebar > div.def-epaper ul li a span { font-weight: normal; } /* 標題為16px粗體 */
.Content.HomeContent .right-sidebar > div.def-epaper ul li a time { display:inline;}

.Content.HomeContent .right-sidebar > div.album-box { margin-bottom:20px;}
.Content.HomeContent .right-sidebar > div.album-box:last-child { margin-bottom:0;}
.Content.HomeContent .right-sidebar > div.album-box li:first-child { padding-bottom:10px; border-bottom:1px solid #ccc;}
.Content.HomeContent .right-sidebar > div.album-box li:first-child img { margin-bottom:10px;}
.Content.HomeContent .right-sidebar > div.album-box li:first-child .title { font-size:1.17em; font-weight:bold;} 
.Content.HomeContent .right-sidebar > div.album-box li:first-child ~ li a { width:100%;
	border-bottom:1px solid #ccc;
	padding:10px 0;
    display: flex;
    gap: 10px;
    align-items: center;
	justify-content:space-between;
}
.Content.HomeContent .right-sidebar > div.album-box li:first-child ~ li a img {
    width: 120px; /* 左圖 */
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}
.Content.HomeContent .right-sidebar > div.album-box li:first-child ~ li a img.portrait {object-fit: contain;}
.Content.HomeContent .right-sidebar > div.album-box li:first-child ~ li a .title {
    margin-top: 0; /* 調整對齊 */
	width:calc( 100% - 130px );
}

.Content.HomeContent .right-sidebar > div.banner-aside > *:not(:last-child) { margin-bottom:20px;}

.popup-box { display:none;}

@media only screen and (min-width:0px) and (max-width:1300px){
	.Content.HomeContent { gap:0 20px; margin-top:20px;}
	.Content.HomeContent .left-content { width:calc( ( 100vw - 40px ) * 0.77 );}
	.Content.HomeContent .left-content > div { gap:0;}
	.Content.HomeContent .left-content > div .breaking-news { width:calc( ( 100% - 20px ) * 0.3 ); margin-right:20px;}
	.Content.HomeContent .left-content > div .main-news { width:calc( ( 100% - 20px ) * 0.7 );}
	.Content.HomeContent .left-content > div.news-section > section { gap:10px 20px;}
	.Content.HomeContent .left-content > div.def-media > section .def-media-content { gap:10px 20px;}
	.Content.HomeContent .left-content > div.news-section > section .main-side { width:calc( ( 100% - 20px ) * 0.65 );}
	.Content.HomeContent .left-content > div.news-section > section .main-side + aside { width:calc( ( 100% - 20px ) * 0.35 );}
	.Content.HomeContent .right-sidebar { width:calc( ( 100vw - 40px ) * 0.23 );}
	.Content.HomeContent .right-sidebar.right-div-fixed-bottom { right:10px; margin-right:0;}
	.Content.HomeContent .right-sidebar.right-div-absolute-bottom { right:0;}
}
@media only screen and (min-width:0px) and (max-width:960px){
	.Content.HomeContent { flex-wrap:wrap;}
	.Content.HomeContent .left-content { width:100%;}
	.Content.HomeContent .left-content > div .main-news .title { font-size:1.17em; line-height:1.6;}
	.Content.HomeContent .left-content > div.ani-content:nth-child(1) {flex-direction:column-reverse;}
	.Content.HomeContent .left-content > div .breaking-news { width:100%; margin-right:0;}
	.Content.HomeContent .left-content > div .main-news { width:100%; padding-bottom:25px; margin-bottom:10px;}
	.Content.HomeContent .left-content > div .main-news .swiper-pagination { bottom:0;}
	.Content.HomeContent .left-content > div .main-news img { height:auto; height:62.6953125vw; object-fit: cover;}
	.Content.HomeContent .left-content > div .main-news img.portrait { object-fit: contain;}
	.Content.HomeContent .left-content > div.news-section > section .main-side .title { font-size:1.17em; line-height:1.6;}
	.Content.HomeContent .left-content > div.news-section > section .main-side .editor-content { display:none;}
	.Content.HomeContent .left-content > div.news-section > section .main-side img { height:auto;}
	.Content.HomeContent .left-content > div.news-section > section .main-side { width:100%;}
	.Content.HomeContent .left-content > div.news-section > section .main-side + aside { width:100%;}
	.Content.HomeContent .left-content > div.news-section > section .main-side + aside article img { height:auto;}
	.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * .photo { height:auto;}
	.Content.HomeContent .left-content > div.def-media > section .def-media-content .main-side + aside > * img { height:auto;}
	.Content.HomeContent .right-sidebar { width:100%; display:block; overflow:hidden;}
	.Content.HomeContent .right-sidebar.right-div-fixed-bottom,
	.Content.HomeContent .right-sidebar.right-div-absolute-bottom,
	.Content.HomeContent .right-sidebar.right-div-normal-top { position:static; bottom:auto; right:auto; margin:0;}
	.Content.HomeContent .right-sidebar > div.banner-aside-top { margin-top:20px;}
	.Content.HomeContent .right-sidebar > div.banner-aside-top img { margin:0 auto;}
	.Content.HomeContent .right-sidebar > div.def-facebook { background:#000; text-align:center;}
	.Content.HomeContent .right-sidebar > div.def-facebook > div { width:290px; margin:0 auto;}
	.Content.HomeContent .right-sidebar > div.def-epaper .cover { width:240px; float:left;}
	.Content.HomeContent .right-sidebar > div.def-epaper .data-list { width:calc( 100% - 250px ); margin-left:10px; float:left;}
	.Content.HomeContent .right-sidebar > div.album-box li:first-child img { width:100%;}
}
@media only screen and (min-width:0px) and (max-width:768px){
	.Content.HomeContent .right-sidebar > div.def-epaper { float:left;}
	.Content.HomeContent .right-sidebar > div.def-epaper .cover { width:100%;}
	.Content.HomeContent .right-sidebar > div.def-epaper .cover img { margin:0 auto;}
	.Content.HomeContent .right-sidebar > div.def-epaper .data-list { width:100%; margin-left:0;}
}

.Wrapper.dark-mode .Content.HomeContent img { background:rgba(0,0,0,0.2);}