@charset "utf-8";
:root {
  --theme-color: #000000;
  --body-color: #f3f5ff;
  --text-color: #444;
  --text-color-dark: #242738;
  --bg-color: #ffffff;
  --hover-color: #AC0002;
  --white-color: #ffffff;
  --light-color: #f8f9fa;
  --font-family: Lato;
      --border: 1px solid #e6ecf2;
  --max-width:1200px;
  --box-shadow: 0 1px 2px 0 rgba(32, 33, 36, 0.2)
}
*{padding:0; list-style:none; margin:0; text-decoration:none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; border:0}
body{ line-height: 1.5; letter-spacing:1px;  font-family:sans-serif;-webkit-font-smoothing: antialiased; font-size: 14px; color: var(--text-color);  background-color: var(--body-color)}
#main{min-height:90vh}
#listsidedesk,.menu-btn{display:none}
.highlight{font-style:normal}
.bg-white {background-color: var(--white-color);box-shadow: 0 5px 15px rgba(0, 0, 0, .07) ;transition: .3s ease; border:1px solid #e2e2e2}


.bg-cover{width:100%; position:sticky; top:0;padding:0 5px; z-index:999;background: var(--theme-color);    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);}
.headerbg{max-width:var(--max-width); width:100%; display:flex; justify-content:space-between; align-items:center; color:var(--white-color); padding:4px; position:relative; margin:0 auto; height:55px}
.headerbg a{color:var(--white-color)}
.htopL .h1{font-size:1.25rem; font-weight:bold; color:var(--white-color);}
.htopR ul{display: flex; align-items:center; gap:10px; }
.htopR ul li{text-align:center}
.htopR ul svg{fill:#fff; width:25px; display:block; margin:auto}

.imghover{ransform: scale(1,1);transition: all 1s ease-out;}
.imghover:hover{transform: scale(1.2,1.2);}

/*導覽*/
.topmap{display:flex; gap:3px; flex-wrap:wrap; align-items:center;}
.topmap a{color:var(--text-color)}
.topmap h1{font-size:17px;color:#000;}

.pagebox{max-width:var(--max-width); width:100%; margin:0 auto}
img{max-width:100%; height:auto}
section{padding:10px}

.flex{display:flex; gap:10px; justify-content:space-between; flex-direction:row-reverse}

.ff1{ flex:1; overflow:hidden}
.ff4{flex:3; overflow:hidden}
.ff3_5{flex:3.5; overflow:hidden}


.listh1{ background:var(--bg-color); padding:10px 10px 10px 10px;    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);}
.listh1 h1{font-size:30px}
.listh1 p{font-size:15px; padding:0 10px}
/*listside*/
.listside{ background:var(--bg-color); padding:10px 10px 10px 10px;}
.clyList dt{border-bottom:2px solid #9E9E9E;}
.clyList h2{font-size:21px; padding:5px 10px}
.clyList dd{padding:8px 15px 8px 30px; border-bottom:1px inset #6B6B6B; position:relative}
.clyList dd:last-child{ border:none}
.clyList dd::before{content:'▼';transform: rotate(270deg); color:#f00; position:absolute; left:15px; top:14px}
.clyList dd.Mthiscly::before{transform: rotate(360deg);}
.clyList dd.Mthiscly ul{display:flex;}
.clyList dd.Mthiscly{background:#f7f7f7}
.clyList dd a:hover,.clyList dd.Mthiscly .Mside,.clyList dd.Mthiscly .thiscly{ color:var(--hover-color) !important; }
.thiscly{font-size:17px}
.clyList dd a.Mside{font-size:21px; color:#039}
.clyList dd ul{display: none; gap:8px; flex-wrap:wrap; padding:0 8px 0 0; flex-direction:column}
.clyList dd li a.sside{ color:#000; font-size:17px}
/*======*/

.listKK{}
.listKK dt h2{font-size:14px; padding:15px 0 0 10px; color:var(--text-color); font-weight:400}
.listKK dt h2 span{color:var(--text-color)}
.listKK dd{padding:10px; margin:5px 0;background:var(--bg-color);border:var(--border)}
.ListBox{display:flex; justify-content:center; width:100%; gap:2px}
.List_bref{ width:100%; margin:5px 0}

/*kkkkkkkkkk*/
.ttkk{display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--bg-color); padding:10px 10px 10px 10px; margin:15px 0}
.ttkk dt h2{font-size:21px}
/*=====*/

.sB{font-size:14px;}
.ListBox_pic a{display:block; height:90px; overflow:hidden}
.ListBox_pic img{border:1px solid #efefef; border-radius:8px; display:block; margin:0 auto; vertical-align:bottom}

.ListBox_side{display:flex; flex-direction:column;  justify-content:space-around}
.sB a{ text-decoration:underline;color:var(--text-color); padding:0 5px}
.ListBox_min a:hover{color:var(--hover-color); text-decoration:underline}
.ListBox_min h3{display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; font-size:17px}
.ListBox_min h3,.ListBox_min li{}
.ListBox_min ul{margin-top:5px; padding:5px 0}
.ListBox_min .listtite{color:#000; font-weight:900}



#pageNO{text-align:center; font-family:Arial; font-size:15px; line-height:25px; letter-spacing:1px; padding:10px 0; margin-top:10px}
#pageNO #Pall{margin:0px 10px;}
#pageNO #Pall span{margin:0px 3px}
#pageNO .Upage{border:1px solid #e5e5e5; padding:3px; background-color:#fafafa; font-size:13px; margin:0px 5px; color:#181717; display:inline-block}
#pageNO #Npage{border:1px solid var(--white-color);  color:var(--white-color); background-color:var(--theme-color); padding:0px 3px; margin:0px 3px; display:inline-block; min-width:25px; height:25px}
#pageNO .Pno{margin:0px 3px; text-decoration:none; border:1px solid #e5e5e5; padding:0px 3px; color:#181717; background-color:#fafafa; font-size:15px; display:inline-block; min-width:25px; height:25px}

#footbg{text-align:center; padding:10px; color:var(--white-color); background: var(--theme-color); font-size:13px; display:flex; justify-content:space-between; align-items:center}
#footbg a{color:var(--white-color); padding:0 12px; border-right:1px solid var(--white-color)}
#footbg div a:last-child{border:none}
.f00A9::before{content:'\00A9'}
@media (max-width: 760px){	
.flex{flex-direction:column}
.flexdetail{flex-direction:column}
section{padding:5px}

/*listside*/
.listside{padding:0;box-shadow: none; display:none; width:100%}
.clyList{ background:var(--theme-color); padding:15px 0}
.clyList dt{border-bottom:1px solid #9E9E9E;}
.clyList h2{font-size:17px; padding:3px 5px; color:var(--white-color)}
.clyList dd{padding:4px 5px 4px 20px}
.thiscly{font-size:14px}
.clyList dd::before{left:5px; top:4px}
.clyList dd.Mthiscly::before{transform: rotate(360deg);}
.clyList dd a.Mside{font-size:17px; color:var(--white-color)}
.clyList dd ul{padding:0; flex-direction: row; gap:5px}
.clyList dd li a.sside{font-size:14px}
.clyList dd li{flex:0 0 calc(100% / 3 - 5px)}

.navbox .listside{position: fixed; left:0; top:55px; display:block; max-height:calc(100vh - 55px); height:100vh; overflow:hidden; background:#000000d4; z-index:88}
.navbox #listsidedesk{display:block}
/*======*/




#footbg{flex-direction:column; justify-content:center}


.menu-btn{cursor: pointer; display:block}
.line-1,.line-2,.line-3 {border-top: 2px solid #fff;display: block;transition: margin 0.5s, transform 0.5s;width: 25px;}

.line-2 {margin: 5px 0;}

.navbox .line-1 {transform: rotate(45deg);margin: 0;}

.navbox .line-3 {transform: rotate(-45deg);margin: 0;}

.navbox .line-2 {margin: -2px 0;opacity: 0;}

}