/* 
<link rel="stylesheet" href="https://euz9zbmgucueafefgqmlaa.on.drv.tw/wesingkasu/code/css/wss.css">
*/
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w-serif{font-family:serif}.w-sans-serif{font-family:sans-serif}.w-cursive{font-family:cursive}.w-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w-t,.w-table,.w-t-all,.table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w-t-all,.table-all{border:1px solid #ccc}
.b-bottoms tr,.b-bottom-all tr,.w-t-all tr,.table-all tr{border-bottom:1px solid #ddd}
.w-striped tbody tr:nth-child(even),.w-zebra tbody tr:nth-child(even){background-color:#f1f1f1}
.w-striped2 tbody tr:nth-child(odd),.w-zebra2 tbody tr:nth-child(odd){background-color:#f1f1f1}
.w-t-all tr:nth-child(odd),.table-all tr:nth-child(odd){background-color:#fff}.w-t-all tr:nth-child(even),.table-all tr:nth-child(even){background-color:#f1f1f1}
.h-all tbody tr:hover,.w-ul.h-all li:hover{background-color:#ccc}.t-centers tr th,.t-centers tr td{text-align:center}
.w-t td,.w-t th,.w-table td,.w-table th,.w-t-all td,.w-t-all th,.table-all td,.table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w-t th:first-child,.w-t td:first-child,.w-table th:first-child,.w-table td:first-child,.w-t-all th:first-child,.w-t-all td:first-child,.table-all th:first-child,.table-all td:first-child{padding-left:16px}
.w-but,.w-btn,.bar-i-btn,.w-acc{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w-but:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w-but,.w-btn,.bar-i-btn,.w-acc{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w-disabled,.w-but:disabled,.w-btn:disabled,.w-acc:disabled,.bar-i-btn:disabled{cursor:not-allowed;opacity:0.3}.w-disabled *,:disabled *{pointer-events:none}
.w-but.w-disabled:hover,.w-btn:disabled:hover,.w-acc:disabled:hover,.bari-btn:disabled:hover{box-shadow:none}
.r-o{border-radius:50%}.r-o,.w-tag{background-color:#000;color:#fff;padding-left:8px;padding-right:8px;text-align:center;margin:2px 0 2px 0;}

.w-acc{color:#000;background-color:#f1f1f1}
/*
.r-o{border-radius:50%}.r-o,.w-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center;margin:2px 0 2px 0;}

*/

.tag-black,.tag-white,.tag-red,.tag-orange,.tag-yellow,.tag-green,.tag-blue,.tag-purple,.tag-brown,.tag-grey{padding-left:8px;padding-right:8px;text-align:center;margin:2px 0 2px 0;}

.tag-black,.tag-red,.tag-orange,.tag-yellow,.tag-green,.tag-blue,.tag-purple,.tag-brown,.tag-grey{color:#fff}
.tag-white{color:#000}
.tag-black,.w-black-eu{background-color:#282828!important}
.tag-white,.w-white-eu{background-color:#f4f4f4!important}
.tag-red,.w-red-eu{background-color:#a02128!important}
.tag-orange,.w-orange-eu{background-color:#d4652f!important}
.tag-yellow,.w-yellow-eu{background-color:#f7ba0b!important}
.tag-green,.w-green-eu{background-color:#317f43!important}
.tag-blue,.w-blue-eu{background-color:#154889!important}
.tag-purple,.w-purple-eu{background-color:#904684!important}
.tag-brown,.w-brown-eu{background-color:#7b5141!important}
.tag-grey,.w-grey-eu{background-color:#9b9b9b!important}



.w-ul{list-style-type:none;padding:0;margin:0}.w-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w-ul li:last-child{border-bottom:none}

.li-circle,.li-o{list-style-type:circle}
.li-square,.li-s{list-style-type:square}
.li-upper-roman,.li-R{list-style-type:upper-roman}
.li-lower-roman,.li-r{list-style-type:lower-roman}
.li-lower-alpha,.li-a{list-style-type:lower-alpha}
.li-upper-alpha,.li-A{list-style-type:upper-alpha}
.li-none,.li-0{list-style-type:none}

.w-tip,.d-c,.w-cc{position:relative}.w-tip:hover .tip-i,.w-tip:hover span{display:inline-block;background-color:#ccc}
.w-tip .tip-i,.w-tip .tip-i-top,.w-tip span{display:none;text-align:center;font-style:normal;border-radius:5px;padding:5px;position:absolute;z-index:1;bottom:120%;left:50%;}
/*
.w-tip .tip-i::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent;}
*/
.w-ripple:active{opacity:0.5}.w-ripple{transition:opacity 0s}
.w-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.dp-k,.dp-h{position:relative;display:inline-block;cursor:pointer}
.dp-h:hover .dp-i,.dp-h:hover .dp-y{display:block}
.dp-h:first-child,.dp-k:hover{background-color:#ccc;color:#000}
.dp-h:hover > .w-btn:first-child,.dp-h:hover > .w-acc:first-child,
.dp-h:hover > .bar-i-btn:first-child,.dp-k:hover > .w-btn:first-child,.dp-k:hover > .w-acc:first-child,
.dp-k:hover > .bar-i-btn:first-child{background-color:#ccc;color:#000}
.dp-i,.dp-y{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w-check,.w-checkbox,.w-radio{width:24px;height:24px;position:relative;top:6px}
/* .bar-side{height:100%;width:200px;background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:11;overflow:auto}*/
.bar-side{height:100%;width:200px;background-color:#fff;position:fixed;z-index:1;overflow:auto}
.bar-y .dp-h,.bar-y .dp-k,.dp-y .dp-h,.dp-y .dp-k{width:100%}
.bar-y .dp-h .dp-i,.bar-y .dp-k .dp-i,.bar-y .dp-h .dp-y,.bar-y .dp-k .dp-y{min-width:100%}
.bar-y .dp-h .w-btn,.bar-y .dp-h .w-acc,.bar-y .dp-h .bar-i-btn,.bar-y .dp-k .w-btn,.bar-y .dp-k .w-acc,.bar-y .dp-k .bar-i-btn{width:100%;text-align:left;padding:8px 16px}

.bar-side .dp-h,.bar-side .dp-k{width:100%}
.bar-side .dp-h .dp-i,.bar-side .dp-k .dp-i,.bar-side .dp-h .dp-y,.bar-side .dp-k .dp-y{min-width:100%}
.bar-side .dp-h .w-btn,.bar-side .dp-h .w-acc,.bar-side .dp-h .bar-i-btn,
.bar-side .dp-k .w-btn,.bar-side .dp-k .w-acc,.bar-side .dp-k .bar-i-btn{width:100%;text-align:left;padding:8px 16px}

.w-main,#main{transition:margin-left .4s}
.w-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-i{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}

.bar-x{width:100%;overflow:hidden}.t-center .bar-x{display:inline-block;width:auto}
.bar-x .bar-i, .bar-x .bar-i-btn{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.bar-x .dp-h,.bar-x .dp-k{position:static;float:left}
.bar-x .w-btn,.bar-x .w-acc,.bar-x .bar-i-btn{white-space:normal}
.bar-y .bar-i,.bar-y .bar-i-btn,.dp-y .bar-i,.dp-y .bar-i-btn{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.bar-y.t-center .bar-i,.bar-y.t-center .bar-i-btn,.dp-y.t-center .bar-i,.dp-y.t-center .bar-i-btn{text-align:center}


.bar-side .bar-i,.bar-side .bar-i-btn{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.bar-side.t-center .bar-i,.bar-side.t-center .bar-i-btn{text-align:center}

.d-start{display:flex;justify-content:flex-start}.d-center{display:flex;justify-content:center}.d-end{display:flex;justify-content:flex-end}
.d-between{display:flex;justify-content:space-between}.d-around{display:flex;justify-content:space-around}.d-fair,.d-evenly{display:flex;justify-content:space-evenly}
  
  
  
.w-block,.d-block,.d-100,.w-acc{display:block;width:100%}
.d-10{display:block;width:10%}.d-15{display:block;width:15%}.d-20{display:block;width:20%}.d-25{display:block;width:25%}
.d-30{display:block;width:30%}.d-35{display:block;width:35%}.d-40{display:block;width:40%}.d-45{display:block;width:45%}
.d-50{display:block;width:50%}.d-55{display:block;width:55%}.d-60{display:block;width:60%}.d-65{display:block;width:65%}
.d-70{display:block;width:70%}.d-75{display:block;width:75%}.d-80{display:block;width:80%}.d-85{display:block;width:85%}
.d-90{display:block;width:90%}

/* 以下無效，因非塊元素無法占比 */
.w-10{width:10%!important}.w-15{width:15%!important}.w-20{width:20%!important}.w-25{width:25%!important}
.w-30{width:30%!important}.w-35{width:35%!important}.w-40{width:40%!important}.w-45{width:45%!important}
.w-50{width:50%!important}.w-55{width:55%!important}.w-60{width:60%!important}.w-65{width:65%!important}
.w-70{width:70%!important}.w-75{width:75%!important}.w-80{width:80%!important}.w-85{width:85%!important}
.w-90{width:90%!important}.w-100{width:100%!important}
.w-21,.w-42{width:50%!important}.w-31{width:33.33%!important}.w-41{width:25%!important}.w-51{width:20%!important}
/* 以上無效 */

.w-100px{width:100px}.w-200px{width:200px}.w-300px{width:300px}
.w-150px{width:150px}.w-250px{width:250px}.w-350px{width:300px}
.w-400px{width:400px}.w-500px{width:500px}.w-600px{width:600px}
.w-450px{width:450px}.w-550px{width:550px}.w-650px{width:650px}

.h-100px{height:100px}.h-200px{height:200px}.h-300px{height:300px}
.h-150px{height:150px}.h-250px{height:250px}.h-350px{height:300px}
.h-400px{height:400px}.h-500px{height:500px}.h-600px{height:600px}
.h-450px{height:450px}.h-550px{height:550px}.h-650px{height:650px}

.w-rp{display:block;overflow-x:auto}
.w-c:after,.w-c:before,.acc-i:after,.acc-i:before,.w-c-hide:after,.w-c-hide:before,
.w-cc:after,.w-cc:before,.w-cc-hide:after,.w-cc-hide:before,
.w-p:after,.w-p:before,.w-row:after,.w-row:before,.w-row-p:after,.w-row-p:before,
.w-cell:before,.w-cell:after,.w-clear:after,.w-clear:before,.bar-x:before,.bar-x:after{content:"";display:table;clear:both}
.row-12,.row-21,.row-42,.row-31,.row-32,.row-43,.row-41{float:left;width:100%}
.row-12.s1{width:8.33333%}.row-12.s2{width:16.66666%}.row-12.s3{width:24.99999%}.row-12.s4{width:33.33333%}
.row-12.s5{width:41.66666%}.row-12.s6{width:49.99999%}.row-12.s7{width:58.33333%}.row-12.s8{width:66.66666%}
.row-12.s9{width:74.99999%}.row-12.s10{width:83.33333%}.row-12.s11{width:91.66666%}.row-12.s12{width:99.99999%}
@media (min-width:601px){.row-12.m1{width:8.33333%}.row-12.m2{width:16.66666%}.row-12.m3,.row-41{width:24.99999%}.row-12.m4,.row-31{width:33.33333%}
.row-12.m5{width:41.66666%}.row-12.m6,.row-21,.row-42{width:49.99999%}.row-12.m7{width:58.33333%}.row-12.m8,.row-32{width:66.66666%}
.row-12.m9,.row-43{width:74.99999%}.row-12.m10{width:83.33333%}.row-12.m11{width:91.66666%}.row-12.m12{width:99.99999%}}
@media (min-width:993px){.row-12.l1{width:8.33333%}.row-12.l2{width:16.66666%}.row-12.l3{width:24.99999%}.row-12.l4{width:33.33333%}
.row-12.l5{width:41.66666%}.row-12.l6{width:49.99999%}.row-12.l7{width:58.33333%}.row-12.l8{width:66.66666%}
.row-12.l9{width:74.99999%}.row-12.l10{width:83.33333%}.row-12.l11{width:91.66666%}.row-12.l12{width:99.99999%}}
.w-rest,.row-rest{overflow:hidden}.w-stretch,.m-0{margin-left:-16px;margin-right:-16px}
.w-content,.w-auto,.d-auto{margin-left:auto;margin-right:auto}.w-content{max-width:980px}.w-auto,.d-auto{max-width:1140px}
.w-cell{display:table;width:100%}.cell-i{display:table-cell}
.cell-top{vertical-align:top}.cell-middle,.cell-center{vertical-align:middle}.cell-bottom{vertical-align:bottom}
.cell-center{text-align:center!important}
.w-hide,.acc-i,.w-c-hide{display:none!important}.w-show-block,.w-show{display:block!important}.d-line{display:inline-block!important}
.w-hidden,.w-invisible{visibility:hidden!important}.w-visible{visibility:visible!important}


@media (max-width:1205px){.w-auto,.d-auto{max-width:95%}}
@media (max-width:600px){.modal-i{margin:0 10px;width:auto!important}.w-modal{padding-top:30px}
.dp-h.w-mobile .dp-i,.dp-k.w-mobile .dp-i,.dp-h.w-mobile .dp-y,.dp-k.w-mobile .dp-y{position:relative}	
.w-hide-small,.w-hide-s{display:none!important}.w-mobile{display:block;width:100%!important}.bar-i.w-mobile,.bar-i-btn.w-mobile.dp-h.w-mobile,.dp-k.w-mobile{text-align:center}
.dp-h.w-mobile,.dp-h.w-mobile .w-but,.dp-h.w-mobile .w-btn,.dp-h.w-mobile .w-acc,.dp-h.w-mobile .bar-i-btn,.dp-k.w-mobile,.dp-k.w-mobile .w-but,.dp-k.w-mobile .w-btn,.dp-k.w-mobile .w-acc,.dp-k.w-mobile .bar-i-btn{width:100%}}
@media (max-width:768px){.modal-i{width:500px}.w-modal{padding-top:50px}}
@media (min-width:993px){.modal-i{width:900px}.w-hide-large,.w-hide-l{display:none!important}.bar-side.w-side{display:block!important}}
/* @media (min-width:993px){.modal-i{width:900px}.w-hide-large,.w-hide-l{display:none!important}.bar-side.w-side{display:block!important}} */
@media (max-width:992px) and (min-width:601px){.bar-side.w-side{display:none}.w-hide-medium,.w-hide-m{display:none!important}}
@media (max-width:992px){.bar-side.w-side{display:none}.w-main{margin-left:0!important;margin-right:0!important}.w-auto,.d-auto{max-width:100%}}
.w-top,.w-bottom,.fixed-top,.fixed-bottom{position:fixed;width:100%;z-index:1}.w-top,.fixed-top{top:0}.w-bottom,.fixed-bottom{bottom:0}

.d-topleft,.d-tl{position:absolute;left:0;top:0}.d-topright,.d-tr{position:absolute;right:0;top:0}
.d-bottomleft,.d-bl{position:absolute;left:0;bottom:0}.d-bottomright,.d-br{position:absolute;right:0;bottom:0}
.d-middle,.d-m{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.d-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.d-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.d-topmiddle,.d-tm{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.d-bottommiddle,.d-bm{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.d-c:hover .d-h,.w-cc:hover .d-h{display:block}.d-c:hover span.d-h,.w-cc:hover span.d-h{display:inline-block}.d-h,.w-hide-n{display:none}
.d-position,.d-p,.d-absolute{position:absolute}.d-sticky{position:-webkit-sticky;position:sticky;top:0;z-index:10}.d-relative{position:relative}

.r-s,.r-2{border-radius:2px}.r-n,.r-m,.r-4{border-radius:4px}.r-l,.r-8{border-radius:8px}.r-xl,.r-16{border-radius:16px}.r-xxl,.r-32,.r-r{border-radius:32px}
.r-o,.r-c,.r-50{border-radius:50%}
.w-row-p,.w-row-p>.row-21,.w-row-p>.row-42,.w-row-p>.row-31,
.w-row-p>.row-32,.w-row-p>.row-43,.w-row-p>.row-41,.w-row-p>.row-12{padding:0 8px}
.w-c,.acc-i,.w-cc,.w-p,.w-c-hide{padding:0.01em 16px}.w-p{margin-top:16px;margin-bottom:16px}
.w-code,.w-codespan{font-family:Consolas,"courier new";font-size:16px}
.w-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w-shadow,.w-shadow-2,.w-shadow1,.h-shadow:hover,.h-shadow-2:hover,.h-shadow1:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w-shadow-4,.h-shadow-4:hover,.h-shadow2:hover,.w-shadow2{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

.t-shadow,.t-h-shadow:hover{text-shadow:1px 1px 0 #444}



.t.capitalize{text-transform:uppercase}.t-lowercase{text-transform:lowercase}.t-uppercase{text-transform:capitalize}.t.small-caps{font-variant:small-caps}
.t-indent,.t-indent2{text-indent:2em}.t-indent1{text-indent:1em}.t-indent-2{text-indent:-2em}.t-indent-1{text-indent:-1em}
.t-justify,.t-fair{text-align:justify;text-justify:inter-word}
.t-overflow-dotted{overflow:hidden;text-overflow:ellipsis}

 

.t-select-none,.select-none,.select-0{-webkit-user-select:none;-ms-user-select:none;user-select:none}.t-select,.select-all,.t-select-all{user-select:all}



.l-over{text-decoration:overline}.l-through{text-decoration:line-through}.l-under{text-decoration:underline}
.l-solid{text-decoration-style:solid}.l-double{text-decoration-style:double}.l-wavy{text-decoration-style:wavy}
.l-none,.l-0{text-decoration:none}
.act-spin{animation:act-spin 2s infinite linear}@keyframes act-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.act-spin1{animation:act-spin1 2s 1 linear}@keyframes act-spin1{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.act-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.act-fade{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.act-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.act-acc{position:relative;animation:animatetop 0.2s}@keyframes animatetop{from{top:0px;opacity:0.5} to{top:0;opacity:1}}

.act-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.act-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.act-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.act-zoom{animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.act-input{transition:width 0.4s ease-in-out}.act-input:focus{width:100%!important}
.act-jump{position:relative;animation: act-jump 0.5s 1;}@keyframes act-jump {0%{top:0px;}50%{top:-1em;}100%{top:0px}}
.act-jump1{position:relative;animation: act-jump1 0.5s 1;}@keyframes act-jump1 {0%{top:0px;}50%{top:-1.5em;}100%{top:0px}}
.act-jump2{position:relative;animation: act-jump2 0.5s 1;}@keyframes act-jump2 {0%{top:0px;}50%{top:-2em;}100%{top:0px}}
.act-jump3{position:relative;animation: act-jump3 0.5s 1;}@keyframes act-jump3 {0%{top:0px;}50%{top:-3em;}100%{top:0px}}
.act-jump4{position:relative;animation: act-jump4 0.5s 1;}@keyframes act-jump4 {0%{top:0px;}50%{top:-4em;}100%{top:0px}}

.act-shake{position:relative;animation: act-shake 0.4s 1;animation-timing-function: linear;}@keyframes act-shake {0%{left:0;}25%{left:2em;}70%{left:-2em;}100%{left:0px}}
.act-shaking{position:relative;animation: act-shake 0.6s infinite;animation-timing-function: linear;}@keyframes act-shake {0%{left:0;}25%{left:1em;}70%{left:-1em;}100%{left:0px}}

.w-opacity,.h-opacity:hover{opacity:0.60}.w-opacity-off,.h-opacity-off:hover,.h-opacity-0:hover,.h-opacity-none:hover{opacity:1}
.w-opacity-max{opacity:0.25}.w-opacity-min{opacity:0.75}
.w-greyscale-max,.w-grayscale-max,.h-greyscale:hover,.h-grayscale:hover{filter:grayscale(100%)}
.w-greyscale,.w-grayscale{filter:grayscale(75%)}.w-greyscale-min,.w-grayscale-min{filter:grayscale(50%)}
.w-sepia{filter:sepia(75%)}.w-sepia-max,.h-sepia:hover{filter:sepia(100%)}.w-sepia-min{filter:sepia(50%)}
.s-ss,.s-10{font-size:10px!important}.s-s,.s-12{font-size:12px!important}.s-m,.s-15{font-size:15px!important}.s-l,.s-18{font-size:18px!important}
.s-xl,.s-24{font-size:24px!important}.s-xxl,.s-36{font-size:36px!important}.s-xxxl,.s-48{font-size:48px!important}.s-xxxxl,.s-64{font-size:64px!important}
.t-left,.w-acc{text-align:left!important}.t-right{text-align:right!important}.t-justify{text-align:justify!important}.t-center{text-align:center!important}
.b-0{border:0!important}.b-1,.b-n{border:1px solid #ccc!important}
.b-top{border-top:1px solid #ccc!important}.b-bottom{border-bottom:1px solid #ccc!important}
.b-left{border-left:1px solid #ccc!important}.b-right{border-right:1px solid #ccc!important}
.b-top2{border-top:6px solid #ccc!important}.b-bottom2{border-bottom:6px solid #ccc!important}
.b-left2{border-left:6px solid #ccc!important}.b-right2{border-right:6px solid #ccc!important}

.b-solid{border-style:solid!important}.b-dashed{border-style:dashed!important}.b-dotted{border-style:dotted!important}   

.w-section,.m-topbottom,.m-tb,.w-code{margin-top:16px!important;margin-bottom:16px!important}
.m-lr,.m-n{margin:16px!important}

.m-all-8,.m-all1{margin:8px!important}.m-all,.m-all-16,.m-all2{margin:16px!important}.m-all-24,.m-all3{margin:24px!important}
.m-all-32,.m-all4{margin:32px!important}.m-all-48,.m-all5{margin:48px!important}.m-all-64,.m-all6{margin:64px!important}

.m-top-8,.m-top1{margin-top:8px!important}.m-top,.m-top-16,.m-top2{margin-top:16px!important}.m-top-24,.m-top3{margin-top:24px!important}
.m-top-32,.m-top4{margin-top:32px!important}.m-top-48,.m-top5{margin-top:48px!important}.m-top-64,.m-top6{margin-top:64px!important}
.m-right-8,.m-right1{margin-right:8px!important}.m-right,.m-right-16,.m-right2{margin-right:16px!important}.m-right-24,.m-right3{margin-right:24px!important}
.m-right-32,.m-right4{margin-right:32px!important}.m-right-48,.m-right5{margin-right:48px!important}.m-right-64,.m-right6{margin-right:64px!important}
.m-bottom-8,.m-bottom1{margin-bottom:8px!important}.m-bottom,.m-bottom-16,.m-bottom2{margin-bottom:16px!important}.m-bottom-24,.m-bottom3{margin-bottom:24px!important}
.m-bottom-32,.m-bottom4{margin-bottom:32px!important}.m-bottom-48,.m-bottom5{margin-bottom:48px!important}.m-bottom-64,.m-bottom6{margin-bottom:64px!important}
.m-left-8,.m-left1{margin-left:8px!important}.m-left,.m-left-16,.m-left2{margin-left:16px!important}.m-left-24,.m-left3{margin-left:24px!important}
.m-left-32,.m-left4{margin-left:32px!important}.m-left-48,.m-left5{margin-left:48px!important}.m-left-64,.m-left6{margin-left:64px!important}

.m-left-200,.m-left-200px{margin-left:200px}
.m-right-200,.m-right-200px{margin-right:200px}

.p-indent-1{padding:1em 1em 1em 2em!important}
.p-2,.p-ss{padding:2px 4px!important}.p-1,.p-sss{padding:1px 2px!important}
.p-4,.p-s{padding:8px 4px!important}.p-8,.p-n{padding:16px 8px!important}.p-12,.p-m{padding:24px 12px!important}
.p-16,.p-l{padding:32px 16px!important}.p-24,.p-xl{padding:48px 24px!important}
.p-32,.p-xxl{padding:64px 32px!important}.p-48,.p-xxxl{padding:96px 48px!important}
.p-64,.p-xxxxl{padding:128px 64px!important}


.p-top1{padding-top:8px!important}.p-top,.p-top-16,.p-top2{padding-top:16px!important}.p-top-24,.p-top3{padding-top:24px!important}
.p-top-32,.p-top4{padding-top:32px!important}.p-top-48,.p-top5{padding-top:48px!important}.p-top-64,.p-top6{padding-top:64px!important}
.p-right1{padding-right:8px!important}.p-right,.p-right-16,.p-right2{padding-right:16px!important}.p-right-24,.p-right3{padding-right:24px!important}
.p-right-32,.p-right4{padding-right:32px!important}.p-right-48,.p-right5{padding-right:48px!important}.p-right-64,.p-right6{padding-right:64px!important}
.p-bottom1{padding-bottom:8px!important}.p-bottom,.p-bottom-16,.p-bottom2{padding-bottom:16px!important}.p-bottom-24,.p-bottom3{padding-bottom:24px!important}
.p-bottom-32,.p-bottom4{padding-bottom:32px!important}.p-bottom-48,.p-bottom5{padding-bottom:48px!important}.p-bottom-64,.p-bottom6{padding-bottom:64px!important}
.p-left1{padding-left:8px!important}.p-left,.p-left-16,.p-left2{padding-left:16px!important}.p-left-24,.p-left3{padding-left:24px!important}
.p-left-32,.p-left4{padding-left:32px!important}.p-left-48,.p-left5{padding-left:48px!important}.p-left-64,.p-left6{padding-left:64px!important}

.w-left{float:left!important}.w-right{float:right!important}
.at-left{left:0!important}.at-right{right:0!important}

.w-btn:hover,.w-acc:hover,.bar-i-btn:hover{color:#000!important;background-color:#ccc!important}
.w-color-0,.h-0:hover{background-color:transparent!important}
.h-0:hover{box-shadow:none!important}
/* Colors */
.w-amber,.h-amber:hover{color:#000!important;background-color:#ffc107!important}
.w-aqua,.h-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w-blue,.h-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w-light-blue,.h-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w-brown,.h-brown:hover{color:#fff!important;background-color:#795548!important}
.w-cyan,.h-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w-blue-grey,.h-blue-grey:hover,.w-blue-gray,.h-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w-green,.h-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w-light-green,.h-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w-indigo,.h-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w-khaki,.h-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w-lime,.h-lime:hover{color:#000!important;background-color:#cddc39!important}
.w-orange,.h-orange:hover{color:#000!important;background-color:#ff9800!important}
.w-deep-orange,.h-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w-pink,.h-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w-purple,.h-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w-deep-purple,.h-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w-red,.h-red:hover{color:#fff!important;background-color:#f44336!important}
.w-sand,.h-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w-teal,.h-teal:hover{color:#fff!important;background-color:#009688!important}
.w-yellow,.h-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w-white,.h-white:hover{color:#000!important;background-color:#fff!important}
.w-black,.h-black:hover{color:#fff!important;background-color:#000!important}
.w-grey,.h-grey:hover,.w-gray,.h-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w-light-grey,.h-light-grey:hover,.w-light-gray,.h-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w-dark-grey,.h-dark-grey:hover,.w-dark-gray,.h-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w-pale-red,.h-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w-pale-green,.h-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w-pale-yellow,.h-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w-pale-blue,.h-pale-blue:hover{color:#000!important;background-color:#ddffff!important}

.t-bold,.h-bold:hover{font-weight:bold;!important}
.t-normal,.h-normal:hover{font-weight:normal;!important}

.f-normal,.f-h-normal:hover{font-style:normal;!important}
.f-italic,.f-h-italic:hover{font-style:italic;!important}  

.t-amber,.t-h-amber:hover{color:#ffc107!important}
.t-aqua,.t-h-aqua:hover{color:#00ffff!important}
.t-blue,.t-h-blue:hover{color:#2196F3!important}
.t-light-blue,.t-h-light-blue:hover{color:#87CEEB!important}
.t-brown,.t-h-brown:hover{color:#795548!important}
.t-cyan,.t-h-cyan:hover{color:#00bcd4!important}
.t-blue-grey,.t-h-blue-grey:hover,.t-blue-gray,.t-h-blue-gray:hover{color:#607d8b!important}
.t-green,.t-h-green:hover{color:#4CAF50!important}
.t-light-green,.t-h-light-green:hover{color:#8bc34a!important}
.t-indigo,.t-h-indigo:hover{color:#3f51b5!important}
.t-khaki,.t-h-khaki:hover{color:#b4aa50!important}
.t-lime,.t-h-lime:hover{color:#cddc39!important}
.t-orange,.t-h-orange:hover{color:#ff9800!important}
.t-deep-orange,.t-h-deep-orange:hover{color:#ff5722!important}
.t-pink,.t-h-pink:hover{color:#e91e63!important}
.t-purple,.t-h-purple:hover{color:#9c27b0!important}
.t-deep-purple,.t-h-deep-purple:hover{color:#673ab7!important}
.t-red,.t-h-red:hover{color:#f44336!important}
.t-sand,.t-h-sand:hover{color:#fdf5e6!important}
.t-teal,.t-h-teal:hover{color:#009688!important}
.t-yellow,.t-h-yellow:hover{color:#d2be0e!important}
.t-white,.t-h-white:hover{color:#fff!important}
.t-black,.t-h-black:hover{color:#000!important}
.t-grey,.t-h-grey:hover,.t-gray,.t-h-gray:hover{color:#757575!important}
.t-light-grey,.t-h-light-grey:hover,.t-light-gray,.t-h-light-gray:hover{color:#f1f1f1!important}
.t-dark-grey,.t-h-dark-grey:hover,.t-dark-gray,.t-h-dark-gray:hover{color:#3a3a3a!important}
.b-amber,.b-h-amber:hover{border-color:#ffc107!important}
.b-aqua,.b-h-aqua:hover{border-color:#00ffff!important}
.b-blue,.b-h-blue:hover{border-color:#2196F3!important}
.b-light-blue,.b-h-light-blue:hover{border-color:#87CEEB!important}
.b-brown,.b-h-brown:hover{border-color:#795548!important}
.b-cyan,.b-h-cyan:hover{border-color:#00bcd4!important}
.b-blue-grey,.b-h-blue-grey:hover,.b-blue-gray,.b-h-blue-gray:hover{border-color:#607d8b!important}
.b-green,.b-h-green:hover{border-color:#4CAF50!important}
.b-light-green,.b-h-light-green:hover{border-color:#8bc34a!important}
.b-indigo,.b-h-indigo:hover{border-color:#3f51b5!important}
.b-khaki,.b-h-khaki:hover{border-color:#f0e68c!important}
.b-lime,.b-h-lime:hover{border-color:#cddc39!important}
.b-orange,.b-h-orange:hover{border-color:#ff9800!important}
.b-deep-orange,.b-h-deep-orange:hover{border-color:#ff5722!important}
.b-pink,.b-h-pink:hover{border-color:#e91e63!important}
.b-purple,.b-h-purple:hover{border-color:#9c27b0!important}
.b-deep-purple,.b-h-deep-purple:hover{border-color:#673ab7!important}
.b-red,.b-h-red:hover{border-color:#f44336!important}
.b-sand,.b-h-sand:hover{border-color:#fdf5e6!important}
.b-teal,.b-h-teal:hover{border-color:#009688!important}
.b-yellow,.b-h-yellow:hover{border-color:#ffeb3b!important}
.b-white,.b-h-white:hover{border-color:#fff!important}
.b-black,.b-h-black:hover{border-color:#000!important}
.b-grey,.b-h-grey:hover,.b-gray,.b-h-gray:hover{border-color:#9e9e9e!important}
.b-light-grey,.b-h-light-grey:hover,.b-light-gray,.b-h-light-gray:hover{border-color:#f1f1f1!important}
.b-dark-grey,.b-h-dark-grey:hover,.b-dark-gray,.b-h-dark-gray:hover{border-color:#616161!important}
.b-pale-red,.b-h-pale-red:hover{border-color:#ffe7e7!important}.b-pale-green,.b-h-pale-green:hover{border-color:#e7ffe7!important}
.b-pale-yellow,.b-h-pale-yellow:hover{border-color:#ffffcc!important}.b-pale-blue,.b-h-pale-blue:hover{border-color:#e7ffff!important}

.w-grey1,.h-grey1:hover {color:#000!important;background-color:#ecf0f1!important}	.t-grey1,.t-h-grey1 {color:#ecf0f1!important}
.w-grey1,.h-grey1:hover{color:#000!important;background-color:#ecf0f1!important} .t-grey1,.t-h-grey1{color:#ecf0f1!important}
.w-grey2,.h-grey2:hover{color:#000!important;background-color:#bdc3c7!important} .t-grey2,.t-h-grey2{color:#bdc3c7!important}
.w-grey3,.h-grey3:hover{color:#fff!important;background-color:#95a5a6!important} .t-grey3,.t-h-grey3{color:#95a5a6!important}
.w-grey4,.h-grey4:hover{color:#fff!important;background-color:#7f8c8d!important} .t-grey4,.t-h-grey4{color:#7f8c8d!important}
.w-red1,.h-red1:hover{color:#fff!important;background-color:#e74c3c!important} .t-red1,.t-h-red1{color:#e74c3c!important}
.w-red2,.h-red2:hover{color:#fff!important;background-color:#c0392b!important} .t-red2,.t-h-red2{color:#c0392b!important}
.w-purple1,.h-purple1:hover{color:#fff!important;background-color:#9b59b6!important} .t-purple1,.t-h-purple1{color:#9b59b6!important}
.w-purple2,.h-purple2:hover{color:#fff!important;background-color:#8e44ad!important} .t-purple2,.t-h-purple2{color:#8e44ad!important}
.w-yellow1,.h-yellow1:hover{color:#fff!important;background-color:#f1c40f!important} .t-yellow1,.t-h-yellow1{color:#f1c40f!important}
.w-green1,.h-green1:hover{color:#fff!important;background-color:#2ecc71!important} .t-green1,.t-h-green1{color:#2ecc71!important}
.w-green2,.h-green2:hover{color:#fff!important;background-color:#27ae60!important} .t-green2,.t-h-green2{color:#27ae60!important}
.w-green3,.h-green3:hover{color:#fff!important;background-color:#16a085!important} .t-green3,.t-h-green3{color:#16a085!important}
.w-green4,.h-green4:hover{color:#fff!important;background-color:#1abc9c!important} .t-green4,.t-h-green4{color:#1abc9c!important}
.w-orange1,.h-orange1:hover{color:#fff!important;background-color:#f39c12!important} .t-orange1,.t-h-orange1{color:#f39c12!important}
.w-orange2,.h-orange2:hover{color:#fff!important;background-color:#e67e22!important} .t-orange2,.t-h-orange2{color:#e67e22!important}
.w-orange3,.h-orange3:hover{color:#fff!important;background-color:#d35400!important} .t-orange3,.t-h-orange3{color:#d35400!important}
.w-blue1,.h-blue1:hover{color:#fff!important;background-color:#3498db!important} .t-blue1,.t-h-blue1{color:#3498db!important}
.w-blue2,.h-blue2:hover{color:#fff!important;background-color:#2980b9!important} .t-blue2,.t-h-blue2{color:#2980b9!important}
.w-blue3,.h-blue3:hover{color:#fff!important;background-color:#34495e!important} .t-blue3,.t-h-blue3{color:#34495e!important}
.w-blue4,.h-blue4:hover{color:#fff!important;background-color:#2c3e50!important} .t-blue4,.t-h-blue4{color:#2c3e50!important}


.n-out{counter-reset:s}.n-i{counter-reset:sb;}.n-i::before{counter-increment:s;content: counter(s) ". "}
.n-in::before{counter-increment:sb;content: counter(s) "." counter(sb) " "}

.overlay-i,.overlay-top,.overlay-bottom,.overlay-i-10,.overlay-i-20,.overlay-i-30,.overlay-i-40,.overlay-i-50,
.overlay-i-60,.overlay-i-70,.overlay-i-80,.overlay-i-90,.overlay-i-100{position:absolute;overflow:hidden;width:100%;height:0;transition: .5s ease;}
.overlay-i,.overlay-i-10,.overlay-i-20,.overlay-i-30,.overlay-i-40,.overlay-i-50,.overlay-i-60,.overlay-i-70,
.overlay-i-80,.overlay-i-90,.overlay-i-100{bottom:0;left:0;right:0}

.overlay-right,.overlay-left{position:absolute;overflow:hidden;width:0;height:100%;transition: .5s ease;}

.overlay-top{bottom:100%;left:0;right:0}.overlay-right{bottom:0;left:100%;right:0}
.overlay-bottom,.overlay-left{bottom:0;left:0;right:0}


.w-overlay{position:relative}
.w-overlay:hover .overlay-i,.w-overlay:hover .overlay-bottom,.h-100{height:100%}
.w-overlay:hover .overlay-top{bottom:0;height:100%}
.w-overlay:hover .overlay-left{width:100%}
.w-overlay:hover .overlay-right{left:0;width:100%}

.w-overlay:hover .overlay-i-10,.h-10{height:10%}
.w-overlay:hover .overlay-i-20,.h-20{height:20%}
.w-overlay:hover .overlay-i-30,.h-30{height:30%}
.w-overlay:hover .overlay-i-40,.h-40{height:40%}
.w-overlay:hover .overlay-i-50,.h-50{height:50%}
.w-overlay:hover .overlay-i-60,.h-60{height:60%}
.w-overlay:hover .overlay-i-70,.h-70{height:70%}
.w-overlay:hover .overlay-i-80,.h-80{height:80%}
.w-overlay:hover .overlay-i-90,.h-90{height:90%}




.w-pop{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.w-pop .pop-i{visibility:hidden;width:160px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:8px 0;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-80px;}
.w-pop .pop-i::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color: #555 transparent transparent transparent;}
.w-pop .show{visibility:visible;-webkit-animation:fadeIn 1s;animation:fadeIn 1s;}


.w-mirro-x{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform: scaleX(-1);transform:scaleX(-1);transform:rotateX(180deg)!important}
.w-mirro-y{-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform: scaleY(-1);transform:scaleY(-1);transform:rotateY(180deg)!important}

.slide-i,.slide-i-auto{display:none;width:100%}

.w-slide:first-child {
    background-color: lime;
	display:block
}
/*
.w-overlay,.d-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.x-overlay{display:none;width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;cursor:pointer;}

.t-middle{white-space:normal;position:absolute;overflow:hidden;top:50%;left:50%;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);}
*/
.t-break-all{word-break:break-all}
.t-break-word,body{word-break:break-word}

.w-pointer,.d-pointer{cursor:pointer}
.j-x::after{content: "×"}.j-E::after{content: "☰"}
.i-dagou::before,.j-v::after{content: "✔"}.i-X::before,.j-X::after{content: "✖"}
.i-boy::before{content: "👦"},.i-girl::before{content:"👩"}

.i-plus::before,.j-plus::after{content:"+"}
.i-minus::before,.j-minus::after{content:"-"}

.i-dp-down::before{content:""}
.i-dp-up::before{content:""}

.i-jiandao::before{content:"✂"}
.i-shangyinhao::before{content:"❝"}
.i-xiayinhao::before{content:"❞"}


.i-v-left::before,.j-v-left::after{content:"❮"}
.i-v-right::after,.j-v-right::after{content:"❯"}

.i-v-up::before,.j-v-up::after{content:"▴"}
.i-v-down::before,.j-v-down::after{content:"▾"}

.i-v-up2::before,.j-v-up2::after{content:"⏶"}
.i-v-down2::before,.j-v-down2::after{content:"⏷"}

.i-snd::before,.j-snd::after{content:"🕩"}

.i-right-v::before{content:""}
.i-left-v::before{content:""}

.f-wood,.f-allertaStencil{font-family: "Allerta Stencil", Sans-serif;}
.f-sofia,.f-writeQ{font-family: Sofia, cursive;}
.f-lobster{font-family: "Lobster", serif;}


i{font-style:normal!important}
.t-i{font-style:italic!important}
/*

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://euz9zbmgucueafefgqmlaa.on.drv.tw/wesingkasu/code/0wesingjs.js"></script>
<link rel="stylesheet" href="https://euz9zbmgucueafefgqmlaa.on.drv.tw/wesingkasu/code/css/w39.css">
<body>

<!-- Sidebar -->

<div class="bar-side bar-y d-h act-left w-100">
<button onclick="w3_close(this)" class="bar-i w-red s-xl t-center">close &times;</button>
   <a href="#" class="bar-i-btn">Link 1</a>
  <a href="#" class="bar-i-btn">Link 2</a>
  <a href="#" class="bar-i-btn">Link fffff3</a>
</div>
<div class="w-teal">
  <button class="w-btn w-teal s-xxl" onclick="w3_open(this)">☰</button>
</div>


<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>This sidebar is hidden by default, (style="display:none")</p>
<p>You must click on the "hamburger" icon (top left) to open it.</p>
<p>The sidebar will hide a part of the page content.</p>
</div>

<script>
function w3_open(me) {
let p = me.parentNode;
let x = p.previousElementSibling;
  x.style.display = "block";
}

function w3_close(me) {
me.parentNode.style.display = "none";
}
</script>
     
</body>
</html> 


*/





/*
燈箱效果
按鈕
隱藏顯示說明
  <button onclick="this.nextElementSibling.style.display='block'" class="w-btn w-teal">Open Modal</button>
  <div class="w-modal">
    <div class="modal-i">
        <span onclick="this.parentNode.parentNode.style.display='none'" class="w-btn d-tr j-x"></span>
        <p>Some text. Some text. Some text.</p>
     </div>
  </div>

*/






/*
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://euz9zbmgucueafefgqmlaa.on.drv.tw/wesingkasu/code/css/w59.css">
<body>
<div class="w-c">

<h2>Active Accordions</h2>
<p>In this example we add the w3-red class to an active accordion (when the button is clicked on and the content is opened).</p>

<button onclick="myFunction('Demo1')" class="w-acc w-black">Open Section 1</button>
<div id="Demo1" class="acc-i">
    <p>Some text..</p>
</div>

<button onclick="myFunction('Demo2')" class="w-acc w-black">Open Section 2</button>
<div id="Demo2" class="w3-hide w3-container">
    <p>Some other text..</p>
</div>

</div>
<script>
function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w-show") == -1) {
    x.className += " w-show";
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace("w-black", "w-red");
  } else { 
    x.className = x.className.replace(" w-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace("w-red", "w-black");
  }
}
</script>

</body>
</html>


*/

/* 燈箱範本 Modal
  <button onclick="this.nextElementSibling.style.display='block'" class="w-btn w-green">燈箱按鈕</button>
  <div class="w-modal">
    <div class="modal-i act-top w-shadow">	
      <div class="w-c w-teal">
	  <span onclick="this.parentNode.parentNode.parentNode.style.display='none'" class="w-btn d-tr j-x"></span>
        <h2>燈箱內文</h2>
      </div>
   </div>
  </div>
*/