@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional");/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    /*border:0;*/
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    /*background:transparent;*/
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#fff;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}/*******global.css**********************************************************/
* { font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; list-style: none; box-sizing:border-box;}
html{
  -webkit-text-size-adjust:none;/*修正旋轉後文字會變大*/
  -webkit-overflow-scrolling:touch;/*修正ios滾動順暢*/
}
body{ font-size: 14px; line-height: 1.7; background: #ccc; color:#4d4d4d;}
/*預設連結狀態*/
a:link, a:visited { color:#4d4d4d; text-decoration: none;}
a:hover, a:active { color:#218cff;}
/*去除圖片底下空白*/
img{ vertical-align: bottom;} 
/*圖片無框*/
a img { border: none;}
/*標題設定*/
h1 { font-size: 22px; font-weight: 500;}
h2 { font-size: 20px; font-weight: 500;}
h3 { font-size: 16px; font-weight: 500;}
h4 { font-size: 14px; font-weight: 400;}
p{ font-weight: 400;}
/*清除 clearfix*/
.clearfix:after { content: "."; display: block; overflow: hidden; height:0; clear: both; visibility: hidden;}

/*more_box====================*/
.more_box{ clear: both;}
a.btn_more{}
a.btn_more i.icon_arrow{ display:inline-block; width:16px; height:16px; background:url(../images/icon_arrow_right.png) no-repeat; background-size: auto 200%; position:relative; top: 3px; margin-right: 3px;} 
a.btn_more:link, a.btn_more:visited { color:#b9bfbf;}
a.btn_more:hover i.icon_arrow{ background-position: 0px -16px;}
/*靠右*/
.more_box a.btn_more.right{ float: right;}

/* .gototop 滾回網頁最上面 ============*/
.gototop{ width: 45px; height: 45px; background: url(../images/icon_gototop.png) no-repeat left top / 100% 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; opacity: 0.3; position: fixed; right: 5px; bottom: 30px; z-index:100; cursor:pointer; transition:0.3s ease-in-out;}
@media only screen and (min-width: 820px){
  .gototop{ right: 50px;}
}

/* 無限滾動頁面 loading圖 */
.loading{ width: 100%; height: 50px; position: sticky; left: 0px; bottom: 90px;  z-index: 100; display: none;}
.loading::before{ content: ""; display: block; width: 50px; height: 50px; border: 5px solid hsla(211, 100%, 56%, 0.2); border-top-color: #218cff; border-radius: 50%; margin: 0 auto; animation: spin 1s linear infinite;}
@keyframes spin{  
	to {transform: rotate(360deg);}
}/*******layout.css****************************************************/
.wrapper{}
.header_box{ background-color: #fff; height: 70px; border-bottom: 1px solid #e2e2e2;}
.header{ max-width: 820px; height: 100%; margin: 0 auto; position: relative;}
/* logo_ettoday */
.header .logo_ettoday{ width: 190px; height: 31px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.header .logo_ettoday > img{ width: 100%; height: auto;}

/* menu_box ==== */
.header .menu_box{ display: flex; flex-direction: column; gap: 8px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none;}
/* menu_1 */
.menu_box .menu_1{ display: flex; gap: 5px; justify-content: end; height: 20px;}
.menu_box .menu_1 a{ display: block; width: 20px; height: 20px; background: url(../images/icon_menu_1.png) no-repeat; background-size: auto 40px; border-radius: 3px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
/*icon*/
.menu_box .menu_1 a.facebook{ background-position: calc( 20px * -1) 0px;}
.menu_box .menu_1 a.youtube{ background-position: calc( 20px * -4) 0px;}
.menu_box .menu_1 a.instagram{ background-position: calc( 20px * -2) 0px;}
.menu_box .menu_1 a.rss{ background-position: calc( 20px * -0) 0px;}
.menu_box .menu_1 a.weibo{ background-position: calc( 20px * -3) 0px;}
.menu_box .menu_1 a.google_news{ background-position: calc( 20px * -5) 0px;}
/* menu_2 */
.menu_box .menu_2 a{ font-size: 13px; position: relative;}
.menu_box .menu_2 a + a{ margin-left: 10px;}
.menu_box .menu_2 a:nth-of-type(n+2)::before{ content: ""; display: block; width: 1px; height: 10px; background-color: #4d4d4d; position: absolute; left: -7px; top: 5px;}
@media only screen and (min-width: 820px){
  .header_box{ height: 100px;}
  .header .logo_ettoday{ width: 250px; height: 41px; left: 0; transform: translate(0%, -50%);}
  .header .menu_box{ display: flex;}
}

.container_box{ background-color: #f5f7fa; padding: 15px;}
.container{ max-width: 820px; min-height: calc( 100dvh - 70px); margin: 0 auto; position: relative;}/*******block.css**************************************************************/
/* 通用組件 ============== */
/* social_box_1 社群 */
.social_box_1{ display: flex; justify-content: space-between; gap: 25px; color: #b2b2b2; font-size: 12px; font-weight: 400;}
.social_box_1 > span{ display: block;}
.social_box_1 .date{}
.social_box_1 .comment{}
.social_box_1 .comment > img{ width: 15px; height: auto; margin-right: 5px;}
.social_box_1 .emoji{ display: flex;}
.social_box_1 .emoji > div{ width: 18px; height: 18px; border-radius: 50%; overflow: hidden; border: 1px solid #fff; position: relative;}
.social_box_1 .emoji > div:nth-of-type(1){ z-index: 30;}
.social_box_1 .emoji > div:nth-of-type(2){ z-index: 20;}
.social_box_1 .emoji > div:nth-of-type(3){ z-index: 10;}
.social_box_1 .emoji > div:nth-last-child(1){ margin-right: 5px;}
.social_box_1 .emoji > div > img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.social_box_1 .emoji > div + div{ margin-left: -8px;}


/* social_box_2 分享給朋友 ======================== */
.social_box_2{ clear: both; margin-bottom: 20px;}
.social_box_2 p{ color: #666; margin-bottom: 5px;}
.social_box_2 .menu{ display: flex;}
.social_box_2 .menu > a{ display: block; width: 45px; height: 45px; background: url(../images/icon_social-2.png) no-repeat; background-size: auto 100%; border-radius: 6px; overflow: hidden; transition: box-shadow 0.3s linear;}	
.social_box_2 .menu > :nth-child(n+2){ margin-left: 10px;}
.social_box_2 .menu > a:hover{ box-shadow: 0px 0px 5px 5px rgba(50, 50, 50, 0.2) inset;}
.social_box_2 .menu .facebook{ background-position: calc( 45px * -0) 0px;}
.social_box_2 .menu .line{ background-position: calc( 45px * -1) 0px;}
.social_box_2 .menu .twitter{ background-position: calc( 45px * -2) 0px;}
.social_box_2 .menu .copy-link{ background-position: calc( 45px * -3) 0px;}
/* facebook-app ==== */
body.facebook-app .social_box_2{ display: flex; align-items: center;}
body.facebook-app .social_box_2 .menu .line,
body.facebook-app .social_box_2 .menu .twitter,
body.facebook-app .social_box_2 .menu .copy-link
{ display: none;}

/* line-app ==== */
body.line-app .social_box_2{ display: flex; align-items: center;}
body.line-app .social_box_2 .menu .facebook,
body.line-app .social_box_2 .menu .twitter,
body.line-app .social_box_2 .menu .copy-link
{ display: none;}


/* social_box_3 追蹤我 ======================== */
.social_box_3{ clear: both; margin-bottom: 20px;}
.social_box_3 p{ color: #666; margin-bottom: 5px;}
.social_box_3 .menu{ display: flex;}
.social_box_3 .menu > a{ display: block; width: 45px; height: 45px; background: url(../images/icon_social-3.png) no-repeat; background-size: auto 100%; border-radius: 6px; overflow: hidden; transition: box-shadow 0.3s linear;}	
.social_box_3 .menu > :nth-child(n+2){ margin-left: 10px;}
.social_box_3 .menu > a:hover{ box-shadow: 0px 0px 5px 5px rgba(50, 50, 50, 0.2) inset;}
.social_box_3 .menu .facebook{ background-position: calc( 45px * -0) 0px;}
.social_box_3 .menu .youtube{ background-position: calc( 45px * -1) 0px;}
.social_box_3 .menu .tiktok{ background-position: calc( 45px * -2) 0px;}
.social_box_3 .menu .instagram{ background-position: calc( 45px * -3) 0px;}
.social_box_3 .menu .twitter{ background-position: calc( 45px * -4) 0px;}
.social_box_3 .menu .line{ background-position: calc( 45px * -5) 0px;}


/******************* block 區塊 *************************/
/*block歸零==========================*/
.block{ clear:both; padding: 15px; margin-bottom: 20px;}
.block:nth-last-of-type(1){ margin-bottom:0px;}
.block .block_title{ clear:both;}
.block .block_content{ clear:both;}

/*block_1 ============*/
.block_1{ background: #fff; border-radius: 10px; padding: 15px; margin-bottom: 20px;}
.block_1 .block_title{ display: flex; justify-content: space-between; align-items: center; color: #1a1a1a; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2;}
.block_1 .block_title h3{ display: flex; align-items: center; font-size: 22px; font-weight: 400;}
.block_1 .block_title a.btn_more{ display:block; color:#666; font-size: 14px; font-weight: 400; letter-spacing: 1px;}
.block_1 .block_title a.btn_more:hover{ display:block; color:#218cff;}

/* editor_box 筆者介紹區塊 ========== */
.editor_box{ background: #fff; border-radius: 10px; padding: 15px; margin-bottom: 20px; position: relative;}
.editor_box .pic{ width: 200px; height: 200px; border-radius: 50%; border: 1px solid #e2e2e2; overflow: hidden; position: relative; margin: 0 auto;}
.editor_box .pic > img{ width: 100%; height: 100%; object-fit: cover;}
.editor_box .content .title{ font-size: 26px; font-weight: 700; text-align: center;}
.editor_box .content .txt{ font-size: 16px; margin-bottom: 10px;}
@media only screen and (min-width: 768px){
	.editor_box{ display: flex; align-items: center;}
  .editor_box .pic{ flex-shrink: 0; margin-right: 15px;}
  .editor_box .content{ flex-grow: 1;}
  .editor_box .content .title{ text-align: left;}
  .editor_box .content .txt{ font-size: 18px;}
}

/* part_title_1 ======= */
.part_title_1{ clear: both; margin-bottom: 20px;}
.part_title_1 .title{ font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.part_title_1 .tag_box{ display: flex; flex-wrap: wrap; gap: 10px;}
.part_title_1 .tag_box .tag{ display: block; padding: 3px 10px;  }
.part_title_1 .tag_box a.tag:link, .part_title_1 .tag_box a.tag:visited {background-color: #218cff; color: #fff; border-radius: 6px;}
.part_title_1 .tag_box a.tag.current, .part_title_1 .tag_box a.tag:hover { background-color:#0062cb;}

/* part_list_1 ======== */
.part_list_1{clear: both;}
.part_list_1 > p{ font-size: 18px; background-color: #e2e2e2; color: #666; text-align: center; padding: 5px 0; border-radius: 6px; margin-bottom: 5px;}
.part_list_1 li{ font-size: 16px; border-bottom: 1px dashed #cbcbcb; padding: 10px 0;
}
.part_list_1 li:nth-last-of-type(1){ border-bottom: none;}
.part_list_1 li > a{ 
/*以下截字*/
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media only screen and (min-width: 768px){
  .part_list_1 > p{ font-size: 16px;}
  .part_list_1 li{ height: 74px; padding: unset; display: flex; align-items: center;}
}


/* part_pictxt_1 ======== */
.part_pictxt_1{ clear: both;}
.part_pictxt_1 .piece{ padding: 20px 0px; border-bottom: 1px solid #cbcbcb; position: relative;}
.part_pictxt_1 .piece .pic{ display: block; aspect-ratio: 4 / 3; border-radius: 6px; border: 1px solid rgba(203, 203, 203, 0.5); overflow: hidden; margin-bottom: 10px;}
.part_pictxt_1 .piece .pic > img{ width: 100%; height: 100%; object-fit: cover;}
.part_pictxt_1 .piece .content{}
.part_pictxt_1 .piece .content .title{ font-size: 18px; font-weight: 500; margin-bottom: 10px;}
.part_pictxt_1 .piece .content .txt{ font-size: 15px; margin-bottom: 10px;}
@media only screen and (min-width: 768px){
  .part_pictxt_1 .piece{ display: flex;}
  .part_pictxt_1 .piece .pic{ width: 200px; height: 150px; flex-shrink: 0; margin-right: 10px; margin-bottom: unset;}
  .part_pictxt_1 .piece .content{ flex-grow: 1; display: flex; flex-direction: column;}
  .part_pictxt_1 .piece .content .social_box_1{ margin-top: auto; justify-content: flex-end;}
}

/* part_pictxt_2 ========== */
.part_pictxt_2{ clear: both; background: #fff; border-radius: 10px;}
.part_pictxt_2 .piece{ border-bottom: 1px solid #cbcbcb; padding: 20px 0px; margin-bottom: 40px; position: relative;}
.part_pictxt_2 .piece .editor{ display: flex; flex-direction: row;  margin-bottom: 0px;}
.part_pictxt_2 .piece .editor .pic{ flex-shrink: 0; width: 120px; height: 120px; border-radius: 50%; border: 1px solid #e2e2e2; overflow: hidden; position: relative; margin-right: 10px;}
.part_pictxt_2 .piece .editor .pic > img{ width: 100%; height: 100%; object-fit: cover;}
.part_pictxt_2 .piece .editor .content{ width: calc(100% - 110px); height: 160px;}
.part_pictxt_2 .piece .editor .content .title{ font-size: 24px; font-weight: 500;}
.part_pictxt_2 .piece .editor .content .txt{ font-size: 15px;
/*以下截字*/
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;}
@media only screen and (min-width: 768px){
  .part_pictxt_2{ display: flex; flex-wrap: wrap; gap: 45px;}
  .part_pictxt_2 .piece{ width: calc((100% - 45px) / 2);}
}

/*menu_bread_crumb ========== */
.menu_bread_crumb{ margin-bottom:20px;}
.menu_bread_crumb > div{ display:inline-block;}
.menu_bread_crumb > div:nth-of-type(1){ margin-right:3px;}
.menu_bread_crumb > div:nth-last-child(1){ font-weight:bold;}
.menu_bread_crumb div:not(:nth-of-type(1)) a{ margin-left:3px;}