/* 字體設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* 顏色設定 */
:root{
    --c-main-01: #19406d;
    --c-main-02: #ffffff;
    --c-minor-03: #33B8B1;
    --c-minor-04: #367997;
    --c-minor-05: #e7e8e9;
    --c-minor-06: #525252;
    --c-minor-07: #6f767d;
    --f-family: "Noto Sans TC",sans-serif;
}

/* 其他設定 */
* {box-sizing: border-box;margin: 0;padding: 0;font-family: var(--f-family); scroll-behavior:smooth;}
html {font-size:medium;font-weight: 500;line-height: 26px;color: #333;}
body{background-image: url(../images/bg.png);background-size: contain;}
body:has(.TG-box){background-image: none;background-color: #f3f3f3;}
p {padding-bottom: 10px;}
a {text-decoration: none;}
button{cursor: pointer;}
img {display: block;}
main{margin-top: 100px;}
main .alink{margin-right: 10px;}
.container {max-width: 1300px;margin: 0 auto;padding: 0 20px;}
.ContentBox{padding: 60px 0;}
.font-0{opacity: 0;}
.index-h2{margin-bottom: 80px;position: relative;text-align: center;letter-spacing: 3px;}
.index-h2:before {content: '';position: absolute;left: 50%;transform: translateX(-50%);width: 70px;height: 5px;bottom: -15px;background: linear-gradient(90deg, var(--c-main-01) 0%, var(--c-main-01) 50%, var(--c-minor-03) 50%, var(--c-minor-03));}
.h1 {font-size: 3rem;color: var(--c-main-01);}
.h2 {font-size: 2.5rem;color: var(--c-main-01);}
.h3 {font-size: 1.5rem;}
.btn-area{text-align: center;margin-top: 60px;}
.btn-center{text-align: center;margin-top: 20px;}
.btn-style-01{max-width: max-content;padding: 10px 50px;background-color: var(--c-main-01);color: white;border-radius: 5px;transition: .3s;border: none;}
.btn-style-02{max-width: max-content;padding: 10px 50px;background-color: var(--c-minor-03);color: white;border-radius: 5px;display: inline-block;margin: 0 auto;font-size: 1.25rem;transition: .3s;}
.btn-style-03{max-width: max-content;padding: 5px 15px;background-color: var(--c-minor-04);color: white;border-radius: 5px;font-size: 1rem;margin-left: auto;transition: .3s;}
.t-btb,.t-content{font-size: 1.25rem;}
.t-replenish{font-size: 1rem;}

@media screen and (max-width: 1300px) and (min-width: 769px) {
    main{margin-top: 80px;}
}

@media screen and (max-width:768px) {
    main{margin-top: 80px;}
    .h1 {font-size: 1.875rem;}
    .h2 {font-size: 1.875rem;}
    .ContentBox{padding: 30px 0;}
    .font-0{opacity: 0;font-size: 0;display: none;}
    .btn-area{margin-top: 40px;}
    .btn-style-01{padding: 8px 40px;}
    .btn-style-02{font-size: 1rem;padding: 8px 40px;}
}

/* 無障礙-focus樣式 */
*:focus{ border: 3px solid #fff !important; outline: 3px solid #333 !important; }

/* 無障礙-跳到主要內容區塊" */
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;z-index: 100;}
.sr-only-focusable:active,.sr-only-focusable:focus {width: auto;height: auto;margin: 0;overflow: visible;clip: auto;color: #333;left: 0;top: 0;}

/* 無障礙定位點 */
.alink{transform: translateY(-2px);color: #333;}

/* 頁碼 */
.page_number{ position:relative; padding-bottom:100px; text-align:center;}
.page_number .btn{ display:inline-block; min-width:40px; padding:0 10px; background-color: #fff; line-height:40px; height:40px; font-size:1rem; color:#555; border:1px solid #ccc; vertical-align:top; margin:0 2px; text-align:center; text-decoration:none; border-radius:5px;}
.page_number .btn[rel="next"]{border:none;background-color: transparent;}
.page_number .btn[rel="prev"]{border:none;background-color: transparent;}
.page_number .btn.focus{ border:1px solid var(--c-main-01); background-color:var(--c-main-01); color:#fff; font-weight:bold;}
.page_number .btn .fa{ line-height:40px; vertical-align:top;}
.page_number .btn.looking{ color:#ccc; border:none;cursor:not-allowed;background-color: transparent;}
.page_number .quantity{ font-size: 1rem; color:#555; line-height:30px;}
.page_number .quantity .fa{ padding-right:5px;}

/* 光箱 */
.lightbox {background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;bottom: 0;right: 0;margin: auto;z-index: 200;}
.lightbox .pstxt p{font-size: 18px;line-height:1.8; color:#333; padding-bottom:20px;}
.lightbox .pstxt div{padding-bottom:20px;}
.lightbox .pstxt a{color: #0000ee;}
.lightbox .pstxt ul,.lightbox .pstxt ol{padding-bottom: 20px;list-style: decimal;margin-left: 1rem;}
.lightbox .pstxt li{padding-bottom: 10px;}
.lightbox .pstxt span{font-size:20px;font-weight: 700;color:#FF1A1A}
.lightbox .prevent{color: #FF1A1A;font-size: 24px;font-weight: 800;text-align: center;margin-bottom: 10px;}
.lightbox .prenent-time{color: #FF1A1A;font-size: 18px;font-weight: 800;text-align: center;margin-bottom: 20px;}
.lightbox .marbox {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;display: flex;justify-content: center;align-items: center}
.lightbox .w_bg_1 {width: 90%;background: #fff;padding: 30px;max-width: 700px;border-radius: 5px;}
.lightbox .closebox {display: flex;justify-content: end;width: 100%;margin-bottom: 20px;}
.lightbox .closebox .btn {display: inline-block;width: 22px;height: 22px;position: relative;cursor: pointer;box-sizing: content-box;padding: 2px;background-color: transparent;border-color: transparent;}
.lightbox .closebox .btn:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;display: block;width: 100%;height: 2px;background: var(--c-minor-07);transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg)}
.lightbox .closebox .btn:after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;display: block;width: 100%;height: 2px;background: var(--c-minor-07);;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg)}
.lightbox .pstxt {margin-bottom: 20px;max-height: 60vh;overflow: auto;}

/* header */
header {background: #fffffff1;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
header .header-area {display: flex;align-items: center;height: 100px;}
header .logo {font-size: 1.25rem;font-weight: 800;}
header .logo a{color: var(--c-main-01);}
header .nav {margin-left: auto; display: flex;align-items: center;gap: 10px;}
header .nav ul {display: flex;gap: 25px;list-style: none;}
header .nav .item{position: relative;}
header .nav a{display: block;color: #333;padding: 0 5px;text-align: center;}
header .menubtn{ display:none; }

/* footer */
footer{background-color: var(--c-main-01);}
footer .footer-area{padding: 40px 0;}
footer .f-b {display: flex;justify-content: space-between;}
footer .f-b .text{color:var(--c-minor-05)}
footer .f-b .text p{padding-bottom: 20px;}
footer .f-b .text span{margin: 0 5px;}
footer .f-b i{margin-right: 20px;}
footer .f-b .text a{color: var(--c-minor-05);}
footer .f-b .copyright {display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
footer .f-b .copyright img{width: 80px;height: 80px;}
footer .f-b .copyright p{padding-bottom: 20px;color: var(--c-minor-05);}
footer .alink {display: inline-block;color: var(--c-minor-05);margin: 30px 0;}

/* PageBox */
.PageBox {background-color: white;}
:not(:has(.noData)) .PageBox::after{display: block;content: "";left: 0;background-image: url(../images/blu-bg.png);background-repeat: no-repeat;width: 100%;height: 100%;background-size: contain;position: absolute;z-index: -10;opacity: .9;}
.PageBox .container{position: relative;}
.PageBox .page_info{position: absolute;left: 20px;top: 0;}
.PageBox .page-title{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 200px;gap: 20px;}
.PageBox .page-title span{font-size: 1.25rem;color: var(--c-main-01);font-weight: 600;position: relative;}
.PageBox .page-title span::after{content: '';position: absolute;left: 50%;bottom: -15px;transform: translateX(-50%);width: 180px;height: 5px;background: linear-gradient(90deg, var(--c-main-01) 0%, var(--c-main-01) 50%, var(--c-minor-03) 50%, var(--c-minor-03));}
.PageBox iframe{width: 100%;height: 320px;}
.PageBox .news-page{display: flex;justify-content: space-around;height: 100px;padding: 0 20px;position: relative;}
.PageBox .news-page button,.PageBox .news-page a{line-height: 100px;text-align: center;flex: 1;border: none;background-color: transparent;font-size: 1.25rem;color: var(--c-main-01);font-weight: 500;transition: .3s;}
.PageBox .news-page .focus{color: #2c817c;}
.PageBox .news-page button i,.PageBox .news-page a i{margin-right: 10px;font-size: 1.5rem;transform: translateY(1px);}
.PageBox .news-page hr{margin: 30px 0;}
.PageBox .news-page .alink{position: absolute;left: 0;top: 50%;transform: translateY(-50%);font-size: 1rem;}

/* page_info */
.page_info .label{ padding:15px 0;}
.page_info .label .page_name{ line-height:20px; color:#333; font-size:1rem; display:inline-block; vertical-align:text-bottom; margin:0; padding: 0;}
.page_info .label a.page_name{ padding-right:25px; position:relative;}
.page_info .label a.page_name::before{content: "";display: block;position: absolute;width: 5px;height: 5px;border-right: 2px solid #333;border-top: 2px solid #333;transform: rotate(45deg);top: 0;bottom: 0;margin: auto;right: 9px;}
.page_info .label p.page_name{ color:var(--c-main-01);}

/* forms */
.forms{ margin-left:-20px; display:flex; flex-wrap:wrap;}
/* .forms .grids input[type="date"]::-webkit-calendar-picker-indicator {display: none;} */
.forms .grids{ padding:0 0 0 40px; margin-bottom:25px; }
.forms .grids .titles{ margin-bottom:20px; color:var(--c-main-01);font-size: 1.125rem;font-weight: 600; }
.forms .grids .titles span.red{ color:#F00; }
.forms .grids .titles span.deepRed{ color:#eb0000; }
.forms .grids .titles .size_m{ font-size:1rem; }
.forms .grids .contbx{ display:flex; margin-left:-5px;column-gap: 10px; }
.forms .grids .contbx p{color: var(--c-minor-06); }
.forms .grids .contbx .fx{ padding:0 0 0 5px; margin-bottom:5px; color:#333;display: flex;justify-content: space-around; }
.forms .grids .contbx .fx label{color: var(--c-minor-06);margin-right:15px;}
.forms .grids .contbx .fx .input{border: 0;border-bottom: 1px solid #8e969fde;width:100%;height: 48px;line-height: 30px;background: transparent;font-size: 1rem;color: var(--c-minor-06);-moz-border-radius: 5px;font-weight: 500;}
.forms .grids .contbx .fx .areatext{ width:100%; height:100px; line-height:1.6; background:#fff; border:none; font-size:1rem; color:#333; padding:10px 15px; border:1px solid #ccc; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; resize:none; }
.forms .grids .contbx .fx .txt{ color:#777; padding: 10px; background: #f5f5f5; }
.forms .grids .contbx .fx .radiobox{flex: 1;text-align: center;color: var(--c-main-01);}
.forms .grids .contbx .fx .radiobox input {margin-right: 10px;}
.forms .grids .contbx .fx .radiobox img{width: 100%;height: auto;margin-top: 10px;/* object-fit: contain; */}
.forms .grids .contbx .fx.date{ position:relative; }
/* .forms .grids .contbx .fx.date .icons{ position:absolute; width:20px; height:20px; font-size:1.25rem; color:#000; top:0; bottom:0; margin:auto; right:10px;  } */
.forms .grids .contbx .fx.ops{ position:relative; }
.forms .grids .contbx .fx.ops .input{ padding:0 50px; text-align: center; text-indent:0px; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance:textfield;}/* Firefox */
.forms .grids .contbx .fx.ops .rease_01{ position:absolute; width:30px; height:30px; top:0; bottom:0; left:15px; margin:auto; background:#eee; cursor:pointer; }
.forms .grids .contbx .fx.ops .rease_01:before{ content:""; display:block; position:absolute; top:0; bottom:0; left:7px; right:7px; margin:auto; height:2px; background:#000; }
.forms .grids .contbx .fx.ops .rease_02{ position:absolute; width:30px; height:30px; top:0; bottom:0; right:10px; margin:auto; background:#eee; cursor:pointer; }
.forms .grids .contbx .fx.ops .rease_02:before{ content:""; display:block; position:absolute; top:0; bottom:0; left:7px; right:7px; margin:auto; height:2px; background:#000; }
.forms .grids .contbx .fx.ops .rease_02:after{ content:""; display:block; position:absolute; top:7px; bottom:7px; left:0; right:0; margin:auto; width:2px; background:#000; }
.forms .wh-01{ width:8.3333333333%; }
.forms .wh-02{ width:16.6666666667%; }
.forms .wh-03{ width:25%; }
.forms .wh-04{ width:33.3333333333%; }
.forms .wh-05{ width:41.6666666667%; }
.forms .wh-06{ width:50%; }
.forms .wh-07{ width:58.3333333333%; }
.forms .wh-08{ width:66.6666666667%; }
.forms .wh-09{ width:75%; }
.forms .wh-10{ width:83.3333333333%; }
.forms .wh-11{ width:91.6666666667%; }
.forms .wh-12{ width:100%; }

.forms fieldset{ border:unset }

.forms .txtDesc{ font-size: 1rem; padding: 0 5px; }

/*步驟*/
.mbtnbox{ text-align:center; padding:20px 0 0 0; }
.mbtnbox .btns-a{ line-height:42px; height:42px; font-size:1rem; color:#fff; background:#d82f24; border:none; display:inline-block; vertical-align:middle; padding:0 25px; cursor:pointer; margin:0 10px; border-radius:5px; }
.mbtnbox .btns-b{ line-height:42px; height:42px; font-size:1rem; color:#333; background:#ccc; border:none; display:inline-block; vertical-align:middle; padding:0 25px; cursor:pointer; margin:0 10px; border-radius:5px; }

/* Kanban-box */
.Kanban-box{padding: 60px ;max-width: 100%;margin: 0 auto;background-color: white;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;}
.Kanban-box .n-title{font-size: 1.75rem;}
.Kanban-box .n-data{margin-bottom: 60px;}
.Kanban-box .n-img{border-radius: 10px;overflow: hidden;height: 500px;margin-bottom: 60px;}
.Kanban-box .n-img img{object-fit: cover;width: 100%;height: 100%;}

/* tab */
.tab{display: flex;padding-bottom: 20px;margin-bottom: 60px;border-bottom: 2px solid #bdbdbd4f;width: 100%;gap: 20px;}
.tab a{color: var(--c-main-02);padding: 8px 16px;background-color: white;width: min-content;white-space: nowrap;border-radius: 5px;border: 1px solid var(--c-main-02);}
.tab .tab-focus{color: white;padding: 8px 16px;background-color: var(--c-main-02);}

/* back-btn */
.back-btn{display: flex;justify-content: center;}
.back-btn a{color: white;padding: 8px 24px;background-color: var(--c-main-01);margin: 20px auto 0;width: min-content;white-space: nowrap;border-radius: 5px;font-size: 1.5rem;margin:0 auto 20px;}

/* card-box */
.card-box{display: flex;row-gap: 20px;column-gap: 2%;flex-wrap: wrap;max-width: 1060px;margin: 0 auto;}
.card-box .card{width: 32%;color: #333;background-color: white;box-shadow: 0 0px 10px rgba(0, 0, 0, 25%);border-radius: 5px;overflow: hidden;transition: .3s;}
.card-box .card .Photo{padding-top: 65%;background: no-repeat center #eee;background-size: cover;}
.card-box .card .Note{padding: 20px;display: flex;flex-direction: column;gap: 20px;}
.card-box .card .Describe{color: var(--c-minor-07);}
.card-box .card .btn-card{color: white;padding: 8px 16px;background-color: var(--c-main-01);margin: 20px auto 0;width: min-content;white-space: nowrap;border-radius: 5px;}
.card-box .card .t-new{display: flex;flex-direction: column;text-align: left;gap: 0;}
.card-box .card .t-new .Name{color: var(--c-main-01);}
.card-box .card .t-new hr{height: 20px;margin-top: 5px;color: var(--c-main-01);}
.card-box .card .t-new .Date{color: var(--c-minor-07);}

.noData{ padding:10dvh 0 4dvh; display:flex; justify-content:center; }
@media screen and (min-width: 769px){
    .noData{ padding:0 0 12dvh; }
}

/* Aboutbox */
.Aboutbox{max-width: 1060px;}
.Aboutbox .h3{margin-bottom: 20px;line-height: 30px;color: var(--c-main-01);}
.Aboutbox .t-img{width: 100%;height: 350px;object-fit: cover;border-radius: 5px;object-position: center;max-width: 100%;}
.Aboutbox img{max-width: 600px;width: 100%;height: auto;margin: 0 auto;}

/* hover - 桌機 */
@media screen and (min-width: 1300px){
    header .nav a:hover{color: var(--c-main-01);}
    header .nav .item::after{content: "";display: block;position: absolute;width: 0; height: 3px;background-color: var(--c-main-01);left: 0;bottom: -8px;transition: .3s;}
    header .nav .item:hover::after{width: 100%;}
    .btn-style-01:hover{background-color: var(--c-minor-03);}
    .btn-style-02:hover{transform: scale(1.1);}
    .card-box .card:hover .btn-style-03{background-color: var(--c-minor-03);}
    .card-box .card:hover {box-shadow: 0 0px 15px #333333ab;transform: scale(1.02);}
    .PageBox .news-page button:hover,.PageBox .news-page a:hover{color: #2c817c;}
}   

/* 平板 */
@media screen and (max-width: 1300px) and (min-width: 769px) {

/* header */
header {background: white;}
header .header-area {height: 80px;}
header .nav {display: none;padding: 0 20px;margin: 0;flex-direction: column;position: fixed;top: 79px;left: 0;right: 0;bottom: 0;background-color: #fff;z-index: 10;gap: 0;overflow: auto;}
header .nav ul{width: 100%;flex-direction: column;gap: 10px;margin-top: 0;}
header .nav a{padding: 15px 0 25px 0;text-align: center;border-bottom: 1px solid #33333321;font-size: 1.125rem;}
header .logo {font-size: 1rem;}
header .menubtn{ display:inline-flex; flex-direction:column; position:absolute; width:24px; height:18px; top:0; bottom:0; right:20px; margin:auto; border:unset; background-color:unset; }
header .menubtn span{ margin:auto; display:block; width:100%; height:2px; background:#333; }
header .menubtn:before{ content:""; display:block; width:100%; height:2px; background:#333; }
header .menubtn:after{ content:""; display:block; width:100%; height:2px; background:#333; }	
header .nav .alink {padding: 5px;align-self: flex-start;border: none;font-size: 1rem;}

/* menu */
/* header .menubox{display: block;} */

/* footer */
footer .container{max-width: 500px;}
footer .f-b {flex-direction: column;gap: 60px;}
footer .f-b .copyright {gap: 30px;}

/* card-box */
.card-box .card .Note{gap: 10px;}
.card-box .card .t-new{flex-direction: column;text-align: left;gap: 0;}
.card-box .card .t-new hr{display: none;}
}

/* 手機 */
@media screen and (max-width:768px) {

/* 頁碼 */
.page_number{ padding-top:50px; padding-bottom:50px;}

/* header */
header {background: white;}
header .header-area {height: 80px;}
header .nav {display: none;padding: 0 20px;margin: 0;flex-direction: column;position: fixed;top: 79px;left: 0;right: 0;bottom: 0;background-color: #fff;z-index: 10;gap: 0;overflow: auto;}
header .nav ul{width: 100%;flex-direction: column;gap: 10px;margin-top: 0;}
header .nav a{padding: 15px 0 25px 0;text-align: left;border-bottom: 1px solid #33333321;font-size: 1.125rem;}
header .logo {font-size: 1rem;margin-right: 40px;}
header .menubtn{ display:inline-flex; flex-direction:column; position:absolute; width:24px; height:18px; top:0; bottom:0; right:20px; margin:auto; border:unset; background-color:unset; }
header .menubtn span{ margin:auto; display:block; width:100%; height:2px; background:#333; }
header .menubtn:before{ content:""; display:block; width:100%; height:2px; background:#333; }
header .menubtn:after{ content:""; display:block; width:100%; height:2px; background:#333; }	
header .nav .alink {padding: 5px;align-self: flex-start;border: none;font-size: 1rem;}

/* menu */
/* header .menubox{display: block;} */

/* footer */
footer .footer-area{padding: 20px 0;}
footer .container{max-width: 430px;}
footer .text a{display: flex;padding-left: 2.5em;}
footer .f-b {flex-direction: column;gap: 60px;}
footer .f-b .text a{margin-top: 10px;}
footer .f-b .text span{display: none;}
footer .f-b .copyright {gap: 30px;}
footer .f-b .copyright p{text-align: center;}

/* card-box */
.card-box{gap: 20px;padding:0;}
.card-box .card{width: 100%;}
.card-box .card .Note{gap: 10px;}
.card-box .card .t-new{flex-direction: column;text-align: left;gap: 0;}
.card-box .card .t-new hr{display: none;}

/* forms */
.forms .grids{ width:100% !important; padding: 0 0 0 20px;}
.forms .grids .contbx{column-gap: 0;row-gap: 20px;}
.forms .grids .contbx.multi-line{ flex-wrap:wrap; }
.forms .grids .contbx.multi-line .wh-02{ width:50%; }
.forms .grids .contbx.multi-line .wh-06{ width:100%; }
.forms .grids .contbx .fx{flex-direction: column;}

/* PageBox */
.PageBox .page-title{gap: 10px;height: 180px;padding-top: 20px;}
.PageBox .page-title span{font-size: 1rem;}
.PageBox .page-title span::after {width: 120px;}
.PageBox .news-page {padding-right: 0;height: 60px;}
.PageBox .news-page button,.PageBox .news-page a{font-size: 1rem;line-height: 60px;}
.PageBox .news-page button i,.PageBox .news-page a i {font-size: 1rem;margin-right: 5px;}
.PageBox .news-page hr{margin: 20px 0;}

/* Aboutbox */
.Aboutbox .h3{line-height: 26px;font-size: 1.375rem;}
.Aboutbox .t-img {height: 200px;}
}

/* 無障礙補正 */
*{ scroll-margin-top:110px; }
@media screen and (max-width: 1300px) {
    *{ scroll-margin-top:100px; }
}

/* Javascript Effect - LayoutMenu */
header.MenuOpen .nav{ display:block; }