:root{
--btnfontcolor:#fff;
--bodybgcolor:#fff;
--bodybgfile:url(/_file/blog21/bg.png);
--bodybgposition:repeat;
--bodybgrepeat:;
}

html{font-size:18px}
body{color:#373737;font-family:Arial, "文泉驛正黑", "WenQuanYi Zen Hei","微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif; letter-spacing:1px; line-height:1.3; background:url(/_file/blog21/bg.png)}
.maxWidth{max-width:var(--max-width); margin:0 auto; padding:0 8px}
.pagecontent img{display:block; vertical-align:bottom; margin:10px 0}
.fiex{display:flex; justify-content:space-between; width:100%; align-items:center; padding:0 10px}
.ff4{flex:4}
.line-clamp4{display: -webkit-box;  overflow: hidden;  -webkit-line-clamp:4;  -webkit-box-orient: vertical;}
.line-clamp2{display: -webkit-box;  overflow: hidden;  -webkit-line-clamp:2;  -webkit-box-orient: vertical;}
.line-clamp1{display: -webkit-box;  overflow: hidden;  -webkit-line-clamp:1;  -webkit-box-orient: vertical;}
#nav ul{ display:flex; gap:10px 25px}
#nav li a{font-size:1.3rem; display:block; color:var(--btnfontcolor); font-weight:900}
#nav li a:hover{opacity:.7}
#h1tite{display:flex; align-items:center; gap:0 5px}
.imgblock{display:block}
#h1{font-weight:700; font-size:1.5rem;color:var(--btnfontcolor); }
.bannerBlog img{margin:0 auto; display:block; vertical-align:middle}
.pageurl{font-size:13px; margin:0 0 15px 0; color:#888;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.pageurl a{color:#000;padding:2px 3px}

.homeintro{display:flex; justify-content:space-between; background:#f8f9fa; margin:20px auto}
.introtext{padding:10px; position:relative; flex:1;}
.introtext::before{position: absolute; background:#f8f9fa; top:0; width:50rem; left:-50rem; content:''; bottom:0}
.introimg{flex:1}


.cnlist{margin:25px 0; width:100%; display:flex; flex-wrap:wrap; gap:15px}
.cnlist li{flex:0 0 calc(100% / 4 - 15px); border-radius:3px;transition: transform .3s, box-shadow .3s; position:relative; background:#fff; border:1px dotted #e5e5e5}
.cnlist h2{color:#000; padding: 8px; font-size:15px}
cnlist li figure{display: flex; align-items:center; justify-content:center; height:240px}
.cnlist li:hover{box-shadow: 0px 10px 35px rgba(0, 0, 0, .06);transform: translateY(-4px);}
.cnlist li:hover h2{text-decoration:underline}
.cnlist li:hover a::before{position:absolute; inset:0; content:''}

.p8cly{display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.p8cly li{background:#fff; border-radius:8px; border:1px solid #939393; padding:5px; position:relative}
.p8cly a{font-size:1.2rem; color:#333}
.p8cly li:hover{background:#F1F1F1}
.p8cly li:hover a::befoer{content:''; position:absolute; inset:0}
.newph,.homesec{margin:50px auto 20px auto}
.newph ul{display:flex; width:100%; gap:15px 45px; flex-wrap:wrap; padding:10px; margin:10px 0}
.newph li{flex:1; display:flex; gap:15px; position:relative}
.newph .mhit h3{ font-size:1.2rem}
.newph h2{font-size:2rem; border-bottom:2px solid #444;}
.newph .mhit p{font-size:1rem; margin:8px 0}
.newph .mhit time{font-size:13px}
.newph a{border:1px solid var(--box-color); color:#fff; background:var(--box-color); padding:2px 8px; border-radius:4px; display:table; margin-top:8px}
.newph a:hover{border:1px solid var(--hover-color); color:#fff; background:var(--hover-color);}
.newph li:hover a::before{position:absolute; content:''; inset:0}


.homesec h2{font-size:2rem; border-bottom:2px solid #444;}
.homesec ul{display:flex; width:100%; gap:15px; flex-wrap:wrap; padding:10px; margin:10px 0}
.homesec li{flex:0 0 calc(100% / 4 - 15px); border-radius:3px;transition: transform .3s, box-shadow .3s; position:relative; }
.homesec li a::before{position:absolute; content:''; inset:0; z-index:3}
.homesec li:hover{box-shadow: 0px 10px 35px rgba(0, 0, 0, .06);transform: translateY(-4px);}
.homesec li:hover::before{content:''; position:absolute; inset:0; z-index:1; background:#000000d1}
.homesec h3{color:#fff; font-size:1rem; position:absolute; top:45%; padding:5px; z-index:2; display:none; text-align:center}
.homesec li:hover h3{display:block}

#main1{display:flex; justify-content:space-between; gap:20px; margin:20px auto 20px auto; min-height:80vh}
#fontsize{font-size:0.8rem; display:flex; padding:5px; align-items:center; gap:8px; justify-content: center}
#fontsize dd{padding:3px; border:1px solid #333; color:#222; background:#DFDFDF; cursor:pointer; line-height:1} 
#fontsize dd:hover{border:1px inset #FFFFFF}
.section{padding:10px}
#pageH1{font-size:2.4rem; line-height:1.3}
.brief{font-size:1.1rem; padding:15px 0; font-weight:500}
.pageImg li{margin:10px 0; padding:5px 0}
.pageImg li img{display:block}
.pagecontent{ padding:4px 0; font-size:1em; line-height:1.8}
.pagecontent h2{font-size:2em}
.pagecontent h3{font-size:1.4rem}
.pageImg{margin:12px 0}
.pageImg figcaption{font-size:0.8em; color:#555}
.tag{display:flex; gap:20px; flex-wrap:wrap}
.tag span{font-weight:900; color:#000; font-size:1em}
.asidepage{padding:0 15px; border-left:1px solid #cbcbcb}
.asidepage h2{font-size:24px; margin-bottom:15px}
.mysec{margin-bottom:35px; margin-top:10px}
.mysec h3{color:#000; font-size:15px}
.mysec dd{margin:2px 0 35px 0; color:#555; position:relative}
.mysec dd:hover h3{ text-decoration:underline; color:#039}
.mysec dd:hover a::before{content:''; position:absolute; inset:0}

.mysec time{font-size:13px}
.mysec p{font-size:14px}
.submitted td{padding:5px 8px}

.notpage{font-size:1.5rem; display:flex; justify-content:center; align-items:center; height:30vh; font-weight:700}

.pagemune{width:100%; border:1px solid #d0d0d0; margin:5px auto 25px auto;box-shadow:0 0.2rem 0.4rem rgb(0 0 0 / 70%); background:var(--theme-color); color:var(--btnfontcolor);color:#5b5b5b}
.pagemune dt{font-size:24px; font-weight:900; padding:10px 10px 8px 10px; border-bottom:1px solid #d0d0d0; display:flex; justify-content:space-between; align-items:center; cursor:pointer}
/*.muneben dt::after{ content:'\25B2';transform: rotate(180deg)}*/
.ez-toc-icon-toggle-span{display:flex; align-items:center; border:1px solid #999191; border-radius:3px}
.muneben dt.over::after{transform: rotate(0deg)}
.muneben dd span:hover,.muneben dd p:hover{transform: translate(2px); text-decoration:underline; color:#000; background:#d0d0d0; font-weight:700}
.pagemune dd span{transition: transform .3s, box-shadow .3s; font-size:1.5rem; font-weight:900}
.pagemune dd{padding:5px 10px 3px 10px; cursor:pointer;}
muneben dd span::before{content: attr(ins)'.'}

.pagemune dd p{ padding:0 0 0 25px; font-size:1rem}
pagemune dd p::before{content: '\25E6'; font-weight:900; font-size:1.3rem; display:inline-block; margin:0 4px 0 0}

#sidebtn{ display:flex; flex-direction:column; gap:10px; position:sticky}
.asidemune{width:100%;box-shadow:0px 1px 2px 0px rgb(0 0 0 / 30%); overflow-x: hidden; background:#fff; position:sticky}


.asidemune::-webkit-scrollbar { width: 2px; height:2px}
.asidemune::-webkit-scrollbar-button {background: transparent;border-radius: 4px; }
.asidemune::-webkit-scrollbar-track-piece {background: transparent;}
.asidemune::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0, 0, 0, 0.4);border: 1px solid slategrey; }
.asidemune::-webkit-scrollbar-track {box-shadow: transparent;}

.asidemune dt{font-size:15px; font-weight:900; padding:10px 10px 0 10px; border-bottom:1px solid #d0d0d0; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
.asidemune dd{padding:5px 0; font-size:13px; cursor:pointer}
.asidemune dd p{ padding:1px 8px 1px 22px}
.asidemune dd span{font-weight:700; padding:0 8px}
.current{color:#039 !important}

.overpost{padding:45px 0; text-align:center; color:#f00; font-size:1.3rem; font-weight:bold; letter-spacing:2px}
.orgUl li{display:flex; gap:8px; justify-content:space-between}
.orgUl .org_name{flex:0 0 90px}
.orgUl .org_intro{flex:0 0 calc(100% - 100px)}
.menu-box{ display: none}

.send_box{padding:2rem; background:#FFFFFF; font-size:15px; line-height:1.5; width:100%; position:relative; margin:20px 0}
.send_box p{ line-height:1.5; margin:0}
send_box::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:var(--theme-color); opacity:.8}
.send_box_h2{position:relative;font-size:1.5rem; margin:10px 0; display:flex}
.send_box_h2:after {content: ''; position: absolute;bottom: -3px; display: block;width: 4em;height: 0.25em; transform: skew(-30deg);background:var(--theme-color); opacity: .45;}
.send_box label{font-weight:900}
.send_box table{width:100%;}
.send_box th{padding:5px 5px 5px 0; width:80px; text-align:right; vertical-align:top}
.send_box td{padding:8px 0;vertical-align:top; letter-spacing:1px; font-size:14px; color:#404040; position:relative}
.send_box input[type=text]{width:100%;font-size:14px; padding:6px 3px; border:1px solid #727272ab; border-radius:3px; background:#f7f7f7}
.send_box textarea:focus,.send_box input[type=text]:focus{}
.send_box input.intk{width:80px; display:inline-block; margin:2px 6px 1px 0}
.send_box td.kkword input[type=text]{padding:4px 3px;color:#0052d6; height:auto}
#addsk{border-radius:3px; cursor:pointer; padding:4px 8px; font-size:13px; background:#1A237E; color:#fff; display:inline-block; min-width:auto}
.send_box select{ padding:8px 5px; border:1px solid #949393; margin:0 0 0 3px; width:auto}
.send_box textarea{width:100%; padding:8px 3px;font-size:14px; border:1px solid #727272ab; border-radius:3px;resize:none; height:89px; background:#f7f7f7}
.form-submit_web66{border-radius:25px; padding:10px 50px;background:var(--theme-color); color:#fff; letter-spacing:3px; font-size:24px;font-weight:700; cursor:pointer; transition:all 0.25s ease-in-out;box-shadow:-1px 1px 3px 2px rgb(0 0 0 / 20%)}
.form-submit_web66:hover{ opacity:.7}
.form-submit_web66 i svg{width:28px;fill:#fff; position:relative; top:4px; margin-right:5px}
i.inssend{font-style:normal;animation: inssend .8s infinite;}

.newAskBg{ position:relative; width:100%; margin:0 auto;}


 @keyframes inssend {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
.send_box img{vertical-align:middle; margin:0}
.send_box .inpot::after{color:#f00; content:'*'; font-weight:400}
#seraiok{text-align:center; color:#fff; font-size:1.5rem; position:relative; z-index:1; margin-top:20px}
#seraiok span{font-size:16px; }

.shareicon{bottom:10px; display:flex; justify-content:center; font-size:0.8rem; align-items:center}
.shareicon dd{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
@media (max-width: 760px){
html{font-size:14px}	
#h1tite figure{width:50px}
.Mobflex{ flex-direction:column}

#sidebtn{ display:none}
.asidepage {padding:0; border:none}
.pagemune{width:100%}
.muneben dd{padding:5px 10px}
.cnlist li,.homesec li{flex:1}
.shareicon{margin-top:10px}
.asidemuneop{position: fixed !important; left:0; background:#ededed;display:block !important; right:0; bottom:0}	
.menu-box{ display: flex; justify-content: flex-end; align-items:center; flex-wrap:wrap; gap:15px; padding-right:8px; position:relative; z-index:10; top:-7px}
.menu-btn {cursor: pointer;width: 30px;display: inline-block;}
#asidemune dt .ez-toc-icon-toggle-span{display:none}
#asidemunebtn{cursor:pointer; border:1px solid #000}
}