/* 設定變數 =========================================================*/ :root { --c-orange-01: #ED6C00; --c-orange-02: #dc8b49; --c-orange-03: #ee791b; --c-black-01: #818181; --c-black-02: #b1b1b1; } /* page設定 ========================================================= */ /*■■■■■■■■■■■■■■■■後台畫面調整■■■■■■■■■■■■■■■*/ /* 標題 */ .content-box .h4{font-size: 1.6rem;color: #f18b38;font-weight: 900;line-height: 2.5rem;} .content-box .graphics-box .h4{display: block;text-align: start;font-size: 1.6rem;color: #f18b38;font-weight: 900;line-height: 2.5rem;position: relative;z-index: 1;} .content-box .graphics-box .h4::before{content: "";display: block;position: absolute;left: 0;top: 0;height: 50px;width: 50px;border-radius: 100px;background-color: #f1831d30;transform: translate(-40%,-15%);} .content-box .graphics-box .h4::after{content: "";display: block;position: absolute;left: 0;top: 0;height: 25px;width: 25px;border-radius: 100px;background-color: #f1831d30;transform: translate(90%, -65%);} .content-box .o-title{color: var(--c-orange-03);} /* 文字對齊 */ .content-box .text-center{text-align: center;} .content-box .text-right{text-align: right;} .content-box p:has([style="text-align:center"]) {text-align: center;} .content-box p:has([style="text-align:right"]) {text-align: right;} /* 斜體 */ .content-box em{display: block;text-align: center;line-height: 2.2;} /* 粗體 */ .content-box strong {display: inline-block;position: relative;padding: 0 10px;color: white;font-size: 19px;background-color: #f18b38;border-radius: 15px 1px 15px 1px;margin-top:10px} /* 左圖右文、右文左圖版型 */ .content-box img{position: relative;} .content-box .graphics-box {margin-bottom: 60px;background-color: white;border-radius: 10px;} .content-box .graphics-box .grids .effect_center {padding: 0 60px;} /* 卡排版型 */ .margin-seesaw-100:has(.card-box){margin: 0;} .content-box .card-box .in_s{border-radius: 10px;box-shadow: 0px 0px 6px #00000026;} .content-box .card-box .in_s .p4{font-weight: 500;} .content-box .card-box .in_s .p7{font-weight: 500;color: #9f9f9f;} /* 重點區塊 */ .content-box .emphasis-box{gap: 20px;} .content-box .emphasis-box .grids {color: #333;text-align: center;border-left: 0;padding: 35px 20px;/* flex: 1; */line-height: 2rem;box-shadow: 0px 0px 6px #00000026;border-radius: 5px;} .content-box .emphasis-box .grids .p4{font-size: 22px;font-weight: 800;color: #333;} /* 表格區塊 */ .content-box div:has(table){ overflow-y:hidden;} .content-box table{ width:100%; border-collapse:collapse; background-color:#fff;min-width: 768px;} .content-box table tr th{ border:0;background-color:rgb(241, 139, 56); color:#fff !important; padding:10px 25px; line-height:30px; height:50px; text-align:left; white-space:nowrap;} .content-box table tr td{ border:0;;color:#333; padding:10px 25px; line-height:30px; height:50px; border-top:1px solid #ccc;transition:.3s;} .content-box table tr:nth-child(2n){ background-color:#f5f5f5;} .content-box table ol{margin-left: 40px;} .content-box table li{margin:20px 0;} /* 下拉式區塊 */ .Accordion-box .open {padding: 30px 50px;} .Accordion-box .content-box{margin: 0;} .Accordion-box .content-box .graphics-box{margin: 0;} /* 自訂版型 */ .flex-img-1 {display: flex;justify-content: center;align-items: center;max-width: 200px;height: auto;margin: 0 auto;} .flex-img-2 {display: flex; } .flex-img-3 {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;object-fit: contain;height: auto;margin: 0 auto;} .flex-img-3 img{max-width: 40% !important;width: 100% !important;} .flex-img-4{display:flex;gap:60px;justify-content:center;margin:20px 0} .flex-img-4 .box-flex{text-align:center;padding:10px;} .flex-img-4 .box-flex div{display:flex;justify-content:center;align-items:center} .flex-img-4 .box-flex div img{display:block;width:300px;height:auto;object-fit:contain;padding:10px} .flex-img-4 a:hover{background-color:white !important;} .mx-150{max-width:150px;margin:0 auto} .mx-350{max-width:350px;margin:0 auto} .mx-720{max-width:720px;margin:0 auto;} .mx-720 a:hover{background-color:white !important;} .mx-center{text-align:center} .content-box .Customize-area {display: flex;flex-wrap: wrap;gap: 16px;justify-content: flex-start;margin:30px 0;} .content-box .Customize-area .card {flex: 0 0 calc(25% - 16px); background: white;padding: 16px;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);box-sizing: border-box;} @media screen and (max-width: 1360px) and (min-width: 768px) { /* 自訂版型 */ .content-box .Customize-area .card {flex: 0 0 calc(50% - 16px);} } @media screen and (max-width: 768px) { /* 標題 */ .content-box .h4{font-size:24px;} .content-box .graphics-box .h4{display: block;font-size: 24px;} .content-box .graphics-box .h4::before {transform: translate(0, -5px);height: 40px;width: 40px;} .content-box .graphics-box .h4::after {transform: translate(38px, -2px);width: 15px;height: 15px;} /* 斜體 */ .content-box em{display: block;text-align: start;line-height: 1.8;} /* 左圖右文、右文左圖版型 */ .content-box .graphics-box .grids .effect_center {padding: 0;} /* 重點區塊 */ .content-box .emphasis-box{/* flex-direction: column; */} /* .content-box .emphasis-box .grids {flex-direction: column;box-shadow: 0 3px .5px #00000026;border-radius: 0;} */ .content-box .emphasis-box .grids .word{padding: 0;text-align: center;/* margin-top: 10px; */} .content-box .emphasis-box .grids .p4{font-size: 18px;} /* 下拉式區塊 */ .Accordion-box .open {padding: 20px 0;} /* 自訂版型 */ .flex-img-1 {max-width: 100%;flex-direction: column;} .flex-img-2 {display: flex;} .flex-img-3 {flex-direction: column;max-width: 100%;height: auto;} .flex-img-3 img{max-width: 100% !important;width: 100% !important;} .flex-img-4{gap:20px;flex-direction:column;margin: 0} .flex-img-4 .box-flex{text-align:center;padding:10px;} .content-box .Customize-area .card {flex: 0 0 calc(100%);} .content-box .Customize-area .card h3{font-size: 20px;} } /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ /* 崁入區塊 */ .Kanban iframe{max-width: 100% !important;max-height: 100% !important;aspect-ratio: 1350 / 780 !important;} .Kanban .Video-bg iframe{max-width: 100% !important;max-height: 100% !important;margin: 0 auto;aspect-ratio: 100 / 1 !important;} .container-1600{max-width: 1700px;margin: 0 auto;height: 0;} /* select選單 */ .form-select{display: flex;font-family: var(--f-family-02);gap: 10px;position: relative;} .select-area{display: flex;flex-direction: column;} .select-area label{font-size: 0;height: 0;} input::placeholder,textarea::placeholder{font-family: var(--f-family-02);color: var(--c-black-02);font-size: 18px;} .select-input{display: flex;border: 1px solid #333;border-radius: 50px;max-height: 66px;} .select-input input{color: #333;font-size: 20px;vertical-align: middle;line-height: 64px;padding: 0 1.5rem;border-radius: 4rem;border: none;width: 204px;} .select-input .button{font-size: 1.8rem;padding: 10px 20px 10px 5px;} .select{font-family: var(--f-family-02);height: 64px;font-size: 20px;padding:0 3rem 0 1.5rem;appearance: none;-moz-appearance: none; -webkit-appearance: none;border: 1px solid #333;border-radius: 50px;outline: none;background-image: url(../images/newslist-triangle.png); background-repeat: no-repeat;background-size: 25px auto;background-position:right 1rem center ;background-color: white;color: #333;} .select option{color: #333;} .select-search button{font-size: 20px;line-height: 64px;background-color: var(--c-orange-01);padding: 0 1.5rem;border-radius: 4rem;color: white;width: 100%;white-space: nowrap;} .label-select{width: 175px;height: 60px;} .select-area-board{width: 445px;} .Contactus-sec3 select{height: 60px;} .PrayerProcess-sec3 select{height: 60px;} .PrayerProcess-top .form-example{width: 100%;} .formWaitClass{text-align: center;font-size: 1.6rem;color: red;} @media screen and (max-width: 1360px) and (min-width: 769px) { .form-select{width: 100%;flex-wrap: wrap;font-size: 18px;} .form-select .select-area{width:100%} .form-select .select-input{width: calc(100% - 15% - 5px);} .form-select .select-search{width: calc(100% - 85% - 5px);} .form-select .select-input input{width: 100%;} .form-select-split{width: 100%;flex-wrap: wrap;justify-content: space-between;} .form-select-split .select-area-split{width: 32%;} /* .form-select-split .select-input-split{width: 100%;} */ .form-select-split .select-input-split input{width: 100%;} .form-select-split-2{width: 100%;flex-wrap: wrap;justify-content: space-between;} .form-select-split-2 .select-area{width: 49%;} .form-select-split-2 .select-input{width: calc(100% - 15% - 5px);} .form-select-split-2 .select-search{width: calc(100% - 85% - 5px);} .form-select-split-2 .select-search button{padding: 0;} .form-select-split-2 .select-input input{width: 100%;} } @media screen and (max-width: 1200px){ .label-select{width: 100%;height: auto;} .select-area-board{width: 100%;} } @media screen and (max-width: 768px) { .form-select{flex-wrap: wrap;font-size: 18px;width: 100%;} .form-select .select-area{width:100%} .form-select .select-input{width: calc(100% - 30% - 5px);} .form-select .select-search{width: calc(100% - 70% - 5px);} .form-select .select-search button{padding: 0;line-height: 50px;font-size: 18px;} .select,.select-input input{width: 100%;height: 50px;font-size: 18px;} .Contactus-sec3 select{height: 50px;} .PrayerProcess-sec3 select{height: 50px;} .form-select-split-2{width: 100%;flex-wrap: wrap;flex-direction: row;} .form-select-split-2 .select-area{width: 100%} .form-select-split-2 .select-input{width: calc(100% - 30% - 5px);} .form-select-split-2 .select-search{width: calc(100% - 70% - 5px);} .form-select-split-2 .select-search button{padding: 0;line-height: 50px;font-size: 18px;} } /* page_info */ /* .page_info {padding-bottom: 180px;} */ .page_infoP-0{padding: 0;} .page_infoP-60{padding-top: 60px;} .page_info .page_box{line-height: 2rem;font-family: var(--f-family-02);font-size: 16px;} .page_info .page-container {max-width: 1700px;padding: 0 20px;margin: 0 auto 60px;position: relative;} .page_info .page-container::before {content: "";display: inline-block;width: 30px;height: 28px;margin-right: 10px;background-image: url(../images/newslist-home.png);background-repeat: no-repeat;background-size: cover;transform: translateY(6px); } .page_info .page-container a{color: #333;} .page_info p{color: var(--c-orange-01);display: inline;} .page_info .btn-area {display: flex;gap: 20px;width: 100%;white-space: nowrap;overflow-x: auto;justify-content: center;} .page_info .btn {display: block;text-align: center;font-family: var(--f-family-01);font-size: 1.6rem;max-width: 280px;width: 100%;line-height: 4rem;border-radius: 4rem;color: var(--c-orange-01);font-weight: 500;border: 2px dashed;padding: 0 1.5rem;} .page_info .btn.focus {color: white;background-color: var(--c-orange-01);border: 2px solid var(--c-orange-01);} .page_info .btn:hover {color: white;font-weight: 400;background-color: var(--c-orange-01);border: 2px solid var(--c-orange-01);} .page_info .btn-area-2 {justify-content: start;} .page_info .btn-area-2 .btn{padding: 0 2rem;} .page_info_2 {margin-right: 90px;overflow-x: auto;} @media screen and (max-width: 1200px) and (min-width: 769px) { .page_info .btn-area-2 {overflow-x: visible;flex-wrap: wrap;} .page_info .btn-area-2 .btn{padding: 0 2rem;max-width:calc(50% - 10px);font-size: 1.3rem;line-height: 3rem;} } @media screen and (max-width: 1360px) and (min-width: 769px) { .page_info_2 {margin-right: 0;} } @media screen and (max-width: 768px) { /* .page_info {padding-bottom: 70px;} */ .page_infoP-0{padding: 0;} .page_infoP-60{padding: 10;} .page_info .page_box{font-size: 14px;} .page_info .page-container{margin: 0 auto 20px;} .page_info .page-container::before{width: 28px;height: 26px;} .page_info .btn-area{display: flex;gap: 10px;width: 100%;overflow-x: visible;flex-wrap: wrap;justify-content: space-between;} .page_info .btn{max-width:100%;width: 100%;padding: 0 1.3rem;font-size: 18px;line-height: 2.5rem;} .page_info .btn-area-2 .btn{max-width:48%;width: 48%;padding: 0 1.3rem;font-size: 18px;line-height: 2.5rem;} .page_info_2 {margin-right: 0;} } /* 頁碼 */ main .page_number{font-family: var(--f-family-02);} main .page_number .ui{display: flex;justify-content: center;gap: 25px;position: relative;} main .page_number .btn{font-size: 18px;font-weight: 500; display:inline-block;cursor: pointer; min-width:45px;min-height:45px ; background-color: #fff; line-height:40px; color:var(--c-orange-01);border: 1px solid var(--c-orange-01);border-radius: 50px; vertical-align:middle; margin:0 2px; text-align:center; text-decoration:none;background-repeat: no-repeat;background-size: 50%;background-position: 10px;padding: 0;} main .page_number .btn:hover{border:1px solid var(--c-orange-01); background-color:var(--c-orange-01); color:#fff;} main .page_number .btn.focus{border:1px solid var(--c-orange-01); background-color:var(--c-orange-01); color:#fff;} main .page_number .btn:first-child,main .page_number .btn:last-child{border: none;font-size: 0;} main .page_number .btn:first-child:hover,main .page_number .btn:last-child:hover{background-color: transparent;border: none;} main .page_number .btn:first-child{background-image: url(../images/arrow-2.png);} main .page_number .btn:first-child:hover{background-image: url(../images/arrow-2-focus.png);} main .page_number .btn:last-child{background-image: url(../images/arrow-3.png);} main .page_number .btn:last-child:hover{background-image: url(../images/arrow-3-focus.png);} @media screen and (max-width: 768px) { main .page_number .ui{gap: 0;} main .page_number{ padding-top:50px; padding-bottom:50px;} main .page_number .btn{transform: scale(.75);} main .page_number .btn:first-child,main .page_number .btn:last-child{position: absolute;top: -80px;} main .page_number .btn:first-child{left: 25%;transform: translatex(-50%) scale(1);} main .page_number .btn:last-child{left: 75%;transform: translatex(-50%) scale(1);} } /* 無障礙 */ .Accessibility{font-family: var(--f-family-02); display: inline-block; font-size: 15px;color: #333;} .Accessibility:hover{color: var(--c-orange-01);} .Accessibility-L{position: relative;left: 3px;top: 2px;} .font-none{opacity: 0;} .font-0{font-size: 0;display: none;} .Video-Details .font-0{font-size: 0;display: none;} /* NewsList-------------------------------------------------------------------------------- */ /* 無障礙 */ .NewsList-Accessibility-C{position: absolute;left: -30px;top: 20px;} @media screen and (max-width: 768px) { .NewsList-Accessibility-C{} } /* NewsList-sec1 - 首頁區 ========================================================== */ .NewsList-sec1 {padding:0;} .banner img {width: 100%;height: 100%;object-fit: cover;} /* NewsList-sec2 - 按鈕區 ========================================================== */ .NewsList-sec2 {padding:60px 0 90px} .NewsList-sec2 .container {height: 100%;} .row {gap: 60px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;} .FunBox {display: flex;gap: 15px;width: 100%;justify-content: end;margin: 40px 0;} .dropdown {display: flex;position: relative;z-index: 1;} .dropdown-top-1{z-index: 5;} .dropdown-top-2{z-index: 4;} .dropdown-top-3{z-index: 3;} .disDiv {width: 100%; display: flex;justify-content: center;align-items: center;padding: 0 2.2rem;border: 1px solid #333;line-height: 4rem;border-radius: 4rem;background-color: white;color: #333;cursor: pointer;} .disDiv .text {font-family: var(--f-family-01);font-size: 1.3rem;} .disDiv .arrow {width: 25px;transform: translateY(7px) translateX(10px);} .dropdown .arrow img {width: 100%;height: 100%;background-size: cover;} /* js 展開 */ .duDiv {display: none;/* display: block; */font-family: var(--f-family-01);position: absolute;padding: 4.5rem 0 1rem 0;border-radius: 2.2rem;z-index: -1;background-color: white;border: 1px solid #333;width: 100%;font-size: 1.3rem;line-height: 2.5rem;top: 0;} .dulist {color: #333;display: block;padding-left: 2rem;text-align: left;} .FunBox .button {background-color: transparent;font-size: 1.8rem;color: #333;cursor: pointer;padding: 10px 20px 10px 5px;} .FunBox input:focus {outline: none;} @media screen and (max-width: 768px) { .NewsList-sec2 {height: auto;padding:10px 0 40px;} .row {gap: 10px;} .disDiv {width: 100%;line-height: 3rem;} .disDiv .text{font-size: 18px;} .dulist{padding-left: 1.5rem;} .duDiv {font-size: 18px;padding: 3.2rem 0 1rem 0;} .FunBox {font-size: 24px;padding: 0;margin-top: 10px;} .FunBox .button {font-size: 24px;padding: 0 20px;} } /* NewsList-sec3 - 卡片區 ========================================================== */ .card-area {display: flex;flex-wrap: wrap;gap: 20px;} .card {font-family: var(--f-family-02);background-color: #fff;display: flex;flex-direction: column;padding: 1.5rem;width: 33%;border-radius: 10px;text-align: left;line-height: 1.8rem;box-shadow: 0 0 10px #dadada;gap: 10px;flex: 0 0 calc(33% - 10px)} .card h1,.card h2,.card h3,.card h4{line-height: 2.2rem;} .image {display: inline-block;width: 100%;height: auto;background-size: cover;position: relative;background-image: url(../images/Preview.png);overflow: hidden;aspect-ratio: 1200 / 780;} .card img{width: 100%;height: auto;aspect-ratio: 1200 / 780; object-fit: contain;object-position: center;flex-shrink: 0;} .swiper-slide:has(.card){padding: 10px;} .swiper-slide:has(.card) .card{width: 100%;overflow: hidden;} .swiper-slide:has(.card) h3{padding: 0 15px 15px;height: 145px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;white-space: normal;} /* 隱藏面板 */ .board {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;left: 0;top: 0;position: absolute;background-color: rgba(255, 255, 255, 0.808);opacity: 0;transition: .6s;cursor: pointer;} .board:hover {opacity: 1;} .board span {display: inline-block;text-align: center;font-size: 1.2rem;line-height: 2.5rem;border-radius: 50px;color: white;width: 150px;background-color: var(--c-orange-01);} .title {display: inline;color: var(--c-orange-01);font-family: var(--f-family-02);font-size: 1.3rem;font-weight: 600;line-height: 2.2rem;/*-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: clip;height: min-content;*/} .card .label {display: inline-block;font-size: .8rem;line-height: 1.4rem;width: 60px;margin-left: .5rem;border-radius: 10px 0;transform: translateY(-4px);display: inline-block;text-align: center;color: white;background-color: rgb(237, 116, 89);} .content {font-size: 1.1rem;line-height: 2rem;-webkit-line-clamp: 3;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;margin-top: auto;} .data {font-family: var(--f-family-01);font-size: 1rem;width: 100%;text-align: right;display: flex;justify-content: right;align-items: center;} .data hr {display: none;} .card-new span{display: inline;font-weight: 600;} @media screen and (max-width: 1360px) and (min-width: 769px) { .card-area {gap: 50px 10px;} } @media screen and (max-width: 768px) { .NewsList-sec3 {padding-bottom: 0;} .NewsList-sec3 .container{padding: 0;} .card-area {justify-content: center;flex-wrap: wrap;gap: 0;} .card {padding: 0;width: 100%;box-shadow: none;gap: 10px; flex: 0 0 auto;} .image {border-radius: 20px 0 50px 0;} .data {margin: 20px 0 40px 0;} .data hr {display: inline;flex: 1;margin-right: 8px;border: 1px dashed rgb(197, 197, 197);} .title{-webkit-line-clamp: 2;height: min-content;} .board span{font-size: 18px;} .swiper-slide:has(.card) h3{padding: 15px;} .swiper-slide:has(.card) .image{border-radius: 10px;} } /* NewsList-sec4 - 頁選區 ========================================================== */ .NewsList-sec4 {padding: 50px 0;} /*頁碼*/ main .page_number {position: relative;text-align: center;margin: 50px 0;} main .page_number .arrow {display: inline-block;min-width: 30px;padding: 0 15.5px;line-height: 45px;height: 45px;margin: 0 5px;border-radius: 100%;} main .page_number .arrow:hover .change {fill: var(--c-orange-01);} .change {transform: scale(2) ;fill: #818181} main .page_number .left {transform: scale(-1);} .number-btn {display: inline-block;min-width: 30px;padding: 0 15.5px;background-color: #fff;line-height: 45px;height: 45px;font-size: 24px;color: var(--c-orange-01);border: 1px solid var(--c-orange-01);vertical-align: top;margin: 0 2px;text-align: center;text-decoration: none;border-radius: 5px;border-radius: 100%;font-weight: bold;margin: 0 15px;} .number-btn:hover {color: white;background-color: var(--c-orange-01);} .focus{border: 1px solid var(--c-orange-01);background-color: var(--c-orange-01);color: #fff;} .looking {border-color: transparent;cursor: not-allowed;} .quantity {font-size: 12px;color: #555;line-height: 30px;} @media screen and (max-width:768px) { .NewsList-sec4 {padding: 0;} .number-btn {margin:0 min(calc(0px + 1vw),5px) 0;} /*頁碼*/ main .page_number {padding-top: 80px;padding-bottom: 50px;} main .page_number .left {transform: scale(-1) translateY(2.5px);} main .page_number .arrow:nth-child(1) {position: absolute;top: 0;left: 10%;transform: scale();} main .page_number .arrow:nth-child(2) {position: absolute;top: 0;left: 30%;transform: scale();} main .page_number .arrow:nth-last-child(2) {position: absolute;top: 0;right: 30%;} main .page_number .arrow:nth-last-child(1) {position: absolute;top: 0;right: 10%;} } /* NewsDetail-------------------------------------------------------------------------------- */ /* 無障礙 */ .NewsDetail-Accessibility-C{position: absolute;left: -17px;top: 2px;} @media screen and (max-width: 768px) { .NewsDetail-Accessibility-C{top: 0;} } /* NewsDetail-sec1 - 首頁區================================================================== */ .NewsDeatil-sec1{padding-bottom: 0;} /* NewsDetail-sec2 - 介紹區================================================================= */ .NewsDeatil-sec2{padding-bottom: 100px;} .NewsDeatil-sec2 .container{max-width: 1184px;margin: 0 auto;padding: 0 20px;} .headline{display: flex;flex-direction: column;gap: 15px; margin-bottom: 50px;} .headline span{font-size: 19px;font-family: var(--f-family-01);position: relative;} .headline h2{font-size: 36px;font-weight: 500;line-height: 3rem;} .icon-area{margin-left: auto;display: flex;gap: 5px;} .Kanban .icon-area img,.icon-area img{height: 40px;width: 40px; object-fit: cover;} .introduce-area{display: flex;flex-direction: column;gap:40px; font-family: var(--f-family-02); line-height: 3rem;} .introduce-area img{width: 100%;height: auto;} .illustrate{margin-bottom: 50px;} .illustrate img{width: 100%; height: auto; object-fit: cover;} .illustrate h3{font-size: 20px;font-weight: 400;text-align: center;} .introduce-content p a {color: #333;} @media screen and (max-width: 1360px) and (min-width: 769px) { .headline h2{font-size: 28px;} } @media screen and (max-width: 768px) { .icon-area{margin: 10px 0 0 auto;flex-wrap: wrap;align-self: flex-start;justify-content:flex-start;} .NewsDeatil-sec2{padding-bottom: 30px; } .headline{margin-bottom: 15px;gap: 0;} .headline span{font-size: 16px;} .headline h2{font-size: 22px;line-height: 2.2rem;} .introduce-area{gap: 15px;line-height: 2.2rem;} .illustrate{margin-bottom: 20px;} .illustrate h3{font-size: 18px;} .Kanban .icon-area img,.icon-area img{height: 32px;width: 32px; } } /* NewsDetail-sec3 - 文章區================================================================= */ .NewsDeatil-sec3{padding-bottom: 130px;} .NewsDeatil-sec3 .container{max-width: 1184px;} .article-area-1{white-space: nowrap;overflow-x: auto;width: 100%;font-family: var(--f-family-02);margin-bottom: 40px;} .article-lbtn{display: inline-block;font-size: 18px;line-height: 40px;background-color: var(--c-orange-01);border-radius: 40px;padding: 0 1.2rem;color: white;margin-right: 10px;} .article-lbtn:hover{background-color:#444} .article-area-2{display: flex;flex-direction: column; gap: 20px; padding: 80px; font-family: var(--f-family-02);width: 100%;position: relative;background-color: white;border-radius: 16px;box-shadow: 0px 0px 6px #0000001A;margin-bottom: 120px;} .article-area-2 h2{position: absolute;display: inline-block;left: 0;top: 45px;font-size: 1.2rem;color: white; background-color: var(--c-orange-01);line-height: 47px;padding: 0 2rem;border-radius:0 2rem 2rem 0;transform: translateX(-10px);} .article-area-2 h2::after{ position: absolute; display: block;content: "";left: 0;bottom: 0;width: 0;height: 0;transform: translate(0, 10px);border-color: #333 #333 transparent transparent; border-style: solid;border-width: 5px;} .article-area-2 hr{border: 1px dashed #a5a5a5;} .data-text{display: flex;} .data-text span{font-size: 20px; margin-right: 2.5rem; white-space:nowrap;line-height: 3rem;} .data-text a{font-size: 20px; color: #333;line-height: 3rem;} .data-text a:hover{color: var(--c-orange-01);} .article-area-3{font-family: var(--f-family-02); text-align: center;} .article-btn {display: block;color: var(--c-orange-01);border: solid 1px var(--c-orange-01);border-radius: 50px;position: relative;transition: 1s;text-align: center;max-width: 350px;margin: 0 auto;font-weight: 800;font-size: 1.4rem;line-height: 66px;max-width: 350px;font-family: var(--f-family-01);} .article-btn:hover {color: white;background: linear-gradient(90deg, rgba(231, 69, 46, 1) 0%, rgba(225, 105, 14, 1) 100%);;border-color: transparent} .article-btn i {position: absolute;right: 10%;top: 50%;transform: translateY(-50%) scaleY(3);vertical-align: middle;} @media screen and (max-width: 1360px) and (min-width: 769px) { .article-lbtn:hover{background-color:#444} } @media screen and (max-width: 768px) { .article-area-1{margin-bottom: 30px;} .article-lbtn{margin-right: 4px;} .NewsDeatil-sec3{padding-bottom: 50px;} .article-area-2 h2{top: 25px;} .article-area-2{margin-bottom: 30px;padding: 65px 35px 35px;gap: 10px;} .data-text{flex-direction: column; gap:0;} .data-text span{font-size: 18px;line-height: 2.2rem;} .data-text a{font-size: 18px; text-align: justify; line-height: 2.2rem;} .article-btn {font-size: 20px;line-height: 66px;} } /* MediaNewsList-------------------------------------------------------------------------------- */ /* 無障礙 */ .MediaNewsList-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .MediaNewsList-Accessibility-C{position: absolute;left: 10px;top: 10px;} } /* MediaNewsList-sec1-首頁區================================================================== */ .MediaNewsList-sec1{ padding:0; } /* MediaNewsList-sec2-按鈕區================================================================= */ .MediaNewsList-sec2{} /* MediaNewsList-sec3-看板區================================================================= */ .MediaNewsList-sec3{padding-bottom: 150px;} .MediaNewsList-sec3 .container{ max-width: 1600px;} .Kanban{ padding: 60px 112px; margin: 140px auto 0; width: 100%; max-width: 1640px; position: relative; border-radius: 16px; box-shadow: 0px 0px 6px #0000001A;} .Kanban img{width: 100%;} .Kanban .container{padding: 0; } .choose{display: flex; align-items: flex-start; gap: 10px; position: absolute;left: 0;top: 0;transform: translateY(-70px);font-family: var(--f-family-02);white-space: nowrap;overflow-x: auto;width: 100%; } .choose a{display: inline-block; transition: 1s; background-color:#e5e5e5;color: #B1B1B1; line-height: 70px;font-size: 26px;font-weight: 400;padding: 0 50px; border-radius:15px 15px 0 0 ;} .choose .choose-focus{ padding-bottom: 13px; box-sizing: content-box; background-color: var(--c-orange-01);color: white;} .choose a:hover{ padding-bottom: 13px; box-sizing: content-box; background-color: var(--c-orange-01);color: white;} .Kanban .FunBox{justify-content: flex-end;margin: 0 0 40px;} /* .Kanban .duDiv{} */ .Kanban .card-area{display: flex; flex-wrap: wrap;gap: 20px; margin-bottom: 100px;} /* .Kanban .card{width: 33%;background-color: transparent;box-shadow: none;} */ /* .Kanban .title{-webkit-line-clamp: 3; } */ /* .Kanban .image{padding-top: 60%;} */ .Kanban main .page_number{padding-bottom: 25px;} .Kanban .area-color{color:#808080;font-size: 1.3rem;} @media screen and (max-width: 1360px) and (min-width: 769px) { .Kanban{ padding: 40px 30px; } /* .Kanban .card{padding: 0;} */ .Kanban .card-area{gap: 50px 10px;} .Kanban .area-color{color:#808080;font-size: 18px;} } @media screen and (max-width: 768px) { .MediaNewsList-sec2{padding-bottom: 120px;} .MediaNewsList-sec3{padding-bottom: 40px;} .Kanban{ padding: 40px 15px 20px; margin-top: 70px;} .Kanban .card{padding: 0;width: 100%;} .Kanban .card-area{gap: 30px; flex-wrap: wrap;} .choose {width: 100%;transform: translateY(-58px);} .choose {white-space:nowrap;overflow: auto;} .choose a{font-size: 18px; padding: 0 1rem;line-height: 57px;} .Kanban .FunBox {margin-bottom:20px ;} .Kanban .card-area {margin-bottom: 30px;} .Kanban .area-color{color:#808080;font-size: 18px;} } /* MediaNewsDetail-------------------------------------------------------------------------------- */ /* 無障礙 */ .MediaNewsDetail-Accessibility-C{position: absolute;left: 20px;top: 20px;} @media screen and (max-width: 768px) { .MediaNewsDetail-Accessibility-C{position: absolute;left: 10px;top: 10px;} } /* MediaNewsDetail-sec1-首頁區================================================================== */ /* MediaNewsDetail-sec2-按鈕區================================================================== */ .distance-sec2{padding-bottom: 180px;} @media screen and (max-width: 768px) { .distance-sec2{padding-bottom: 70px;} } /* MediaNewsDetail-sec3-看板區================================================================== */ .MediaNewsDetail-sec3{ padding-bottom: 120px;} .MediaNewsDetail-sec3 .container{max-width: 1600px;} .MediaNewsDetail-sec3 .newsdeatil-container{max-width: 1120px;margin: 0 auto;} .MediaNewsDetail-sec3 .Kanban{padding-bottom: 100px;} .MediaNewsDetail-sec3 .headline{margin-bottom: 10px;} .MediaNewsDetail-sec3 .headline .icon-area{margin-top: 80px;} .Video-introduction {width: 100%;height: 80%;} .Video-introduction img{width: 100%;height: 100%;object-fit: cover;} .connect{line-height: 2.6rem; text-align: left;} .connect a{color: #333;} .center-box{text-align: center;margin-top: 120px;padding: 0 2rem;} @media screen and (max-width: 1360px) and (min-width: 769px) { .MediaNewsDetail-sec3{} .Kanban{ padding: 40px 30px; } } @media screen and (max-width: 768px) { .MediaNewsDetail-sec3{padding-bottom: 30px;} .MediaNewsDetail-sec3 .headline .icon-area{margin-top: 20px;} .MediaNewsDetail-sec3 .Kanban{padding-bottom: 30px;} .connect{line-height: 2.2rem;} .center-box{margin-top: 30px;} } /* MediaNewsDetail-sec4-影片區================================================================== */ .MediaNewsDetail-sec4{padding-bottom: 450px;} .MediaNewsDetail-sec4 .container{max-width: 1600px;} .MediaNewsDetail-sec4 .Kanban{position: relative;padding: 100px 60px 100px; margin-bottom: 50px;} .sticker{position: absolute;display: inline-block;left: 0;top: 45px;font-size: 1.2rem;color: white; background-color: var(--c-orange-01);line-height: 47px;padding: 0 2rem;border-radius:0 2rem 2rem 0;transform: translateX(-10px);z-index: 1;} .sticker::after{ position: absolute; display: block;content: "";left: 0;bottom: 0;width: 0;height: 0;transform: translate(0, 10px);border-color: #333 #333 transparent transparent; border-style: solid;border-width: 5px;} .slider{display: flex;align-items: center;overflow: hidden;} .slider .slider-btn{font-size: 6rem;color: #333; display: inline-block;vertical-align: middle;transform: translateY(-30%);margin: 0 20px;} .MediaNewsDetail-sec4 .card-area{ margin-bottom: 0;} .MediaNewsDetail-sec4 .card{padding: 0;} .MediaNewsDetail-sec4 .card .title{font-size:20px ;} @media screen and (max-width: 1360px) and (min-width: 769px) { .MediaNewsDetail-sec4 .Kanban{ padding: 100px 0 40px;} .slider .slider-btn{margin: 0;} .slider .slider-btn:nth-child(1){margin-right:10px;} .slider .slider-btn:nth-child(3){margin-left:10px;} .MediaNewsDetail-sec4 .card .title{font-size:18px ;} } @media screen and (max-width: 768px) { .MediaNewsDetail-sec4{padding-bottom: 30px;} .NewsDetail-container{padding: 0;} .MediaNewsDetail-sec4 .Kanban{ padding: 100px 0 0;margin-bottom: 30px;} .sticker{top: 25px;} .slider .slider-btn:first-child{transform: translateX(-90%) translateY(-70%);z-index: 2;} .slider .slider-btn{margin: 0; font-size: 3rem;transform:translateX(10%) translateY(-70%);width: 30px;} .MediaNewsDetail-sec4 .slider .card:not(:first-child){ display: none; } .MediaNewsDetail-sec4 .slider .card-area{flex: 2;} .MediaNewsDetail-sec4 .card .title{font-size:18px ;} } /* Podcasts-------------------------------------------------------------------------------- */ /* 無障礙 */ .Podcasts-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .Podcasts-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* Podcasts-sec1 - 首頁區================================================================== */ /* Podcasts-sec2 - 按鈕區================================================================== */ /* Podcasts-sec3 - 看板區================================================================== */ .Podcasts-sec3 {padding-bottom: 180px;} .Podcasts-sec3 .Kanban{padding: 60px 70px;} .Kanban-container{max-width: 1704px;} .Video-box-area{display: flex;gap: 45px;} .Video-box{position: relative;} .Card-layout{width: 33%;} .title-color{color: var(--c-orange-01);} .b-font{margin-bottom: 1rem;font-weight: 600;line-height: 2.2rem;-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .grey-1{color: var(--c-black-01);} .grey-2{color: var(--c-black-02);} .Video-bg{margin-bottom: 40px; font-family: var(--f-family-02); max-width: 470px; display: flex;flex-direction: column;gap: 10px; background-color: #F7F7F9;border-radius: 25px;padding:20px 20px;} .Video-Details{display: flex;gap:10px;align-items: center;} .Video-Details img{width: 107px;height: 107px;border-radius: 5px;} .Video-Details .Video-date{font-size: 14px;-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-row{display: flex;align-items: center;} .Video-Details p{font-size: 22px;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-Details p:last-child{-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-more-btn {flex: none; display: flex;gap: 5px; justify-content: center;align-items: center; width: 49px; height: 49px; background-color: #EDE8F6;border-radius: 50%;} .Video-more-btn span{display: inline-block;background-color:#5F28CA;width: 5px;height: 5px;border-radius: 50%;} .Video-Details-btn{gap: 10px; display: flex;justify-content: space-around;} .Video-Details-btn a{ max-width: 200px; border-radius: 7px; flex: 1;text-align: center; font-size: 1.3rem;line-height: 47px;} .Video-Details-btn img{width: 15px; height: auto;margin:0 5px;} .Video-play{color: white;background-color: #5F28C8;-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-show{color:#5F28C8;background-color: #EDE8F6;-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-manage {font-size: 18px;align-self: flex-end;} .Video-News{padding-bottom: 150px;} .Video-News-box {display: block;} .Video-News-box img{width: 100%;margin-bottom: 2rem;border-radius: 10px;} .Video-News-box .label{margin-right: 10px;} /* .Podcasts-sec3 .Kanban .pagerfanta{margin: 130px 0 50px;} */ @media screen and (max-width: 1400px) and (min-width: 769px) { .Podcasts-sec3 .Kanban{padding: 40px 30px 20px;} } @media screen and (max-width: 1200px) and (min-width: 769px) { /* .Kanban .FunBox-warp{flex-wrap: wrap;justify-content: center;} */ .Kanban .dropdown-split{flex: 1;justify-content: center;} .Kanban .dropdown-split .disDiv{width: 100%;} .Kanban .form-warp{width: 100%;justify-content: space-between;} .Kanban .form-warp input{width: 100%;} .Video-box-area{flex-direction: column;max-width: 600px;} .Video-box-area{gap: 0;margin: 0 auto;} .Video-box{width: 100%;margin-bottom: 50px;} .Video-box:nth-child(even)::after{content:"";display: block;width: 100%;height: 100%;left: -15px;top:-12px;background-color: rgb(255, 251, 246);;position: absolute;z-index: -1;box-sizing: content-box;padding: 12px 15px; } .Video-box:nth-child(odd)::after{content:"";display: block;width: 100%;height: 100%;left: -15px;top:-12px;background-color: rgb(253, 241, 226);position: absolute;z-index: -2;box-sizing: content-box;padding: 12px 15px;} .Video-bg{max-width: 600px;} .Video-Details div{width: 100%;} .Video-Details-btn a{max-width: 100%;} .Podcasts-sec3 .Kanban .pagerfanta{margin: 50px 0 ;} } @media screen and (max-width: 768px) { .Video-box:nth-child(even)::after{content:"";display: block;width: 100%;height: 100%;left: -15px;top:-12px;background-color: rgb(255, 251, 246);;position: absolute;z-index: -1;box-sizing: content-box;padding: 12px 15px; } .Video-box:nth-child(odd)::after{content:"";display: block;width: 100%;height: 100%;left: -15px;top:-12px;background-color: rgb(253, 241, 226);position: absolute;z-index: -2;box-sizing: content-box;padding: 12px 15px;} .Podcasts-sec3 {padding-bottom: 50px;} .Podcasts-sec3 .Kanban{padding: 40px 15px 20px;} .Kanban .FunBox-warp{flex-wrap: wrap;justify-content: center;} .Kanban .dropdown-split{flex: 1;justify-content: center;} .Kanban .dropdown-split .disDiv{width: 100%;} .Kanban .form-warp{width: 100%;justify-content: space-between;} .Kanban .form-warp input{width: 100%;} .Video-box-area{flex-direction: column;gap: 25px;margin: 30px 0;} .Video-box{width: 100%;position: relative;} .b-font{font-size: 22px;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} .Video-bg{max-width: 100%;margin-bottom: 20px;} .Video-Details div{width: 100%;} .Video-Details p{font-size: 14px;} .Video-manage {font-size: 13px;} .Video-Details-btn a{max-width: 100%; font-size: 16px;line-height: 35px;} .Video-News-box .title{font-size: 18px;line-height: 2rem;} .Podcasts-sec3 .Kanban .pagerfanta{margin:20px 0 0 ;} .Video-News-box img{margin-bottom: 5px;} .Video-more-btn{width: 35px;height: 35px;} .Video-more-btn span{width: 3px;height: 3px;} .Video-Details img{width: 85px;height: 85px;} .Video-Details .Video-date{font-size: 12px;} } /* Branches-------------------------------------------------------------------------------- */ /* 無障礙 */ .Branches-Accessibility-C{position: absolute;left: -30px;top: 20px;} @media screen and (max-width: 1360px) and (min-width: 769px) { .Branches-Accessibility-C{left: -17px;} } @media screen and (max-width: 768px) { .Branches-Accessibility-C{position: absolute;left: -18px;top: 10px;} } /* Branches-sec1 - 首頁區================================================================== */ /* Branches-sec2 - 按鈕區================================================================== */ .Branches-sec2{padding-bottom: 50px;} @media screen and (max-width: 1360px) and (min-width: 769px) { .Branches-sec2 .FunBox {gap: 10px;} } @media screen and (max-width: 768px) { .Branches-sec2 {padding-bottom: 20px;} } /* Branches-sec3 - 卡片區================================================================== */ .Branches-sec3 {padding-bottom: 130px;} .Branches-sec3 h2{line-height: normal;font-size:1.3rem;} .Branches-card{box-shadow: none;padding: 0;width: 30%;} .Branches-content{display: flex;flex-direction: column;gap: 5px;padding: 0 1rem;} .Branches-card .image{border-radius: 15px;margin-bottom: 20px;background-position: center;border-radius: 20px} .Branches-title{font-size: 1.3rem;font-weight: 600;color: var(--c-orange-01);line-height: 2.2rem;} .Branches-text img{width: 20px;height: 20px;margin-right: 1rem;transform: translateY(4px);} .Branches-card hr{border: 1px dashed var(--c-black-01);margin-bottom: 10px;} .Branches-text{color: #333;font-size: 1.2rem;} @media screen and (max-width: 768px) { .Branches-sec3{padding-bottom: 30px;} .Branches-sec3 .card-area{gap: 25px;} .Branches-card{width: 100%; gap: 10px;} .Branches-title{font-size: 20px;line-height: 2rem;} .Branches-text{font-size: 16px;} .Branches-card .image{margin-bottom: 0;} } /* Branches-sec3 - 頁選區================================================================== */ .Branches-sec4{padding-bottom:0;} /* .DonationMethods-sec2 .a123{ fill: var(--c-orange-01); } */ /* DonationMethods-------------------------------------------------------------------------------- */ .DonationMethods-Accessibility-C{position: absolute;left: 11px;top: 30px;} @media screen and (max-width: 768px) { .DonationMethods-Accessibility-C{position: absolute;left: 11px;top: 15px;} } /* DonationMethods-sec1 - 首頁區================================================================== */ /* DonationMethods-sec2 - 按鈕區================================================================== */ .DonationMethods-sec2{padding-bottom: 80px;} .Donation-container{ max-width: 1704px; padding: 0;} .Donation-layout{display: flex;padding: 0 120px;gap: 50px;overflow-x: auto;} .Donation-layout hr{border-bottom: 1px solid #BFBFBF;} .Donation-layout a{display:block;min-height: 175px;min-width: 160px;background-repeat: no-repeat;background-size:auto 100%;background-position: center;position: relative;width: calc(100% / 6 - 25px);} .Donation-layout div{display: inline-block;font-family: var(--f-family-02);position: relative;top: 110px;width: 100%;text-align: center;font-size: 18px;color: #b1b1b1;font-weight: 600;} .Donation-layout a:hover div{color: var(--c-orange-01);} .Donation-layout .active{color: var(--c-orange-01);} .Donation-layout img{width: auto;height: 100%;position: absolute;z-index: -1;right: 50%; transform: translateX(50%);} /* ------------------------------------------------------------- */ @media screen and (max-width: 1360px) and (min-width: 769px) { .DonationMethods-sec2{padding-bottom: 80px;} .Donation-layout{padding: 0 50px} } @media screen and (max-width: 768px) { .DonationMethods-sec2{padding-bottom: 30px;} .Donation-layout{padding: 0 30px;gap:20px} .Donation-layout a{min-height: 120px;min-width: 110px;width: calc(100% / 6 - 10px);} .Donation-layout div{color: #b1b1b1;font-size: 16px;top: 73px;line-height: 1.2rem;} .Donation-layout a:hover div{color: #b1b1b1;} } /* DonationMethods-sec3 - 選項區================================================================== */ .DonationMethods-sec3{padding-bottom: 220px;} .DonationMethods-sec3-container {max-width: 1304px;position: relative;} .Donation-Accordion{display: flex;flex-direction: column;gap: 25px;} .Accordion-box{font-family: var(--f-family-02);position: relative;} .Accordion-box p:has(i.bx){display: flex;align-items: center;} .Accordion-box img{height: auto;object-fit: cover;/*width: 100%*/} .Accordion-box .bold{font-weight: 600;} .Accordion-box > a{display: flex;font-size: 26px;padding: 0 70px;border: 1px solid #707070;border-radius: 40px;height: 80px;width: 100%;color: #333;align-items: center;} .Accordion-box .bx{font-size: 24px;display: inline-block;transform: scaleX(2.5) scaleY(-1);position: absolute;right: 70px;line-height: revert;} /* .Accordion-box .open{display: none;} */ /* .Accordion-box a{color: #333;display: flex;align-items: center;} */ .Accordion-box .authorize{color: var(--c-orange-01);border-bottom: 1px solid var(--c-orange-01);width: max-content;} .Accordion-focus > a{color: white;background-color: var(--c-orange-01);border: 1px solid var(--c-orange-01);} .Accordion-focus .bx{transform: scaleX(2.5)} .Accordion-box .open{display: none;} .Accordion-focus .open{display: block;} @media screen and (max-width: 768px) { .DonationMethods-sec3{padding-bottom: 50px;} .Accordion-box > a{font-size: 18px;height: auto;min-height: 50px;padding: 10px 60px 10px 20px;} .Accordion-box .bx{font-size: 20px;right: 30px; } /* .Accordion-box div{font-size: 18px;padding: 25px 10px 0px;} */ } /* Donate-------------------------------------------------------------------------------- */ /* 無障礙 */ .Donate-Accessibility-C{position: absolute;left: 0;top: 5px;} @media screen and (max-width: 768px) { .Donate-Accessibility-C{position: absolute;left: -20px;top: 0;} } /* Donate-sec1 - 首頁區================================================================== */ /* Donate-sec2 - 內容區================================================================== */ .Donate-sec2{padding-bottom: 100px;} .Donate-text-container{max-width: 1184px;margin-bottom: 60px;position: relative;} .Donate-text{font-family: var(--f-family-02);font-size: 20px;line-height: 2.6rem;margin-bottom: 30px;} .Donate-text h3{font-size: 24px;line-height: 3.2rem;} .Donate-text a{color: #333;} .Donate-text .Donate-mail{border-bottom: 1px solid var(--c-orange-01);} .Donate-text .text-orange{color: var(--c-orange-01);} .Donate-text span{font-weight: 600;} .Donate-sec2 .page_info{padding-bottom: 0;} @media screen and (max-width: 1360px) and (min-width: 769px) { .Donate-sec2{padding-bottom: 60px;} .Donate-btn{font-size: 24px; padding: 10px 40px;} } @media screen and (max-width: 768px) { .Donate-sec2{padding-bottom: 30px;} .Donate-text-container{padding: 0;margin-bottom: 30px;} .Donate-text{font-size: 18px;margin-bottom: 10px;line-height: 2.2rem;} .Donate-text h3{font-size:20px;line-height: 2.5rem;} } /* Donate-sec3 - 表格區================================================================== */ .Donate-sec3{padding-bottom: 100px;} .rg-container {font-family: var(--f-family-02);font-size: 16px;line-height: 1.4;margin: 0;padding: 1em 0.5em;color: #222;} .rg-header {margin-bottom: 1em;text-align: left;} .rg-header > * {display: block;} .rg-hed {font-weight: bold;font-size: 1.4em;} .rg-dek {font-size: 1em;} .rg-source {margin: 0;font-size: 0.75em;text-align: right;} .rg-source .pre-colon {text-transform: uppercase;} .rg-source .post-colon {font-weight: bold;} /* table */ .rg-table {width: 100%;margin-bottom: 50px;font-size: 20px;border-collapse: collapse;border-spacing: 0;table-layout: fixed} .rg-table .text-left{text-align: left;padding:0 0 0 50px;} .rg-table thead {border-bottom: 4px solid #333;} .rg-table tr {-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-align: left; line-height: 2rem;border-bottom: 1px solid #ddd;color: #4d4d4d;} .rg-table tr:nth-of-type(even){background-color:rgba(255, 165, 0, 0.05);} .rg-table tr.highlight {background-color: #dcf1f0 !important;} .rg-table.zebra tr:nth-child(even) {background-color: #f6f6f6;} .rg-table th {font-weight: bold;padding-bottom: 20px;text-align: center;width: min-content;} .rg-table td {vertical-align: middle;font-size: 20px;color: var(--c-black-01);text-align: center;padding:20px 10px;} .rg-table .highlight td {font-weight: bold;} .rg-table th.number,td.number {text-align: right;} .rg-table tr:last-child{border: none;} .rg-table td[colspan="7"] {text-align: center;color: #333;} /* 自行設定 */ .new-products{padding: 0 10px; text-align: center; line-height: 30px; display: inline-block; color: #603813;background-color: #ffecd1;border-radius: 3px;} .Specification{display: block;} tr .table-btn{font-size: 18px; font-weight: 600; display: inline-block; line-height: 34px;padding: 0 2rem;border-radius: 20px; color: #333; border: 1px solid #333;background-color: white;} tr .table-btn:hover{color: white;background-color: #333;} /* media queries */ @media screen and (max-width: 1440px) and (min-width: 769px) { .Donate-sec3{padding-bottom: 0;} .Donate-sec3 .container{max-width: 900px;} .rg-container {max-width: 1360px;margin: 0 auto;padding: 0;} .rg-table {width: 100%;overflow: hidden;} .rg-table tr.hide-mobile,table.rg-table th.hide-mobile,table.rg-table td.hide-mobile {display: none;} .rg-table thead {display: none;} .rg-table tbody {width: 100%;} .rg-table tr,table.rg-table th,table.rg-table td {display: block;} .Specification {padding-left: 5px;} .rg-table tr {line-height: 3rem;border-bottom: 2px solid var(--c-black-01);margin: 0 0 1em 0;padding: 0 15px 10px;position: relative;} .rg-table tbody tr:nth-of-type(even)::after{content: "";display: block; position: absolute; background-color:rgba(255, 165, 0, 0.05);left: 0;top:-20px; width: 100%;height: 100%;z-index: -10;box-sizing: content-box;padding:0 0 20px;} .rg-table tr.highlight {background-color: inherit !important;} .rg-table.zebra tr:nth-child(even) {background-color: transparent;} .rg-table.zebra td:nth-child(even) {background-color: #f6f6f6;} .rg-table tr:nth-child(even) {background-color: transparent;} .rg-table td { line-height:2rem; padding: 5px 0;border-bottom: 1px dotted #ccc;text-align: left; font-size:16px;} .rg-table td[data-title]:before {width: 100%; content: attr(data-title);font-weight: bold;display: inline-block;content: attr(data-title);float: left;font-size: 16px;} .rg-table td:last-child {padding-right: 0;border: none;} .rg-table td:empty {display: none;} .rg-table .highlight td {background-color: inherit;font-weight: normal;} .Specification {padding-left: 5px;} tr .table-btn{margin-top: 10px; font-size: 16px;} .rg-table .text-left{padding:5px 0;text-align: left;} .rg-table .btn-td[data-title]{display: flex;justify-content: center;} .rg-table .btn-td[data-title]::before{display: none;} } @media screen and (max-width: 768px) { .Donate-sec3{padding-bottom: 0;} .Donate-sec3 .container{max-width: 900px;} .rg-container {max-width: 1360px;margin: 0 auto;padding: 0;} .rg-table {width: 100%;overflow: hidden;margin-bottom: 0;} .rg-table tr.hide-mobile,table.rg-table th.hide-mobile,table.rg-table td.hide-mobile {display: none;} .rg-table thead {display: none;} .rg-table tbody {width: 100%;} .rg-table tr,table.rg-table th,table.rg-table td {display: block;} .Specification {padding-left: 5px;} .rg-table tr {line-height: 3rem;border-bottom: 2px solid var(--c-black-01);margin: 0 0 1em 0;padding: 0 15px 10px;position: relative;} .rg-table tbody tr:nth-of-type(even)::after{content: "";display: block; position: absolute; background-color:rgba(255, 165, 0, 0.05);left: 0;top:-20px; width: 100%;height: 100%;z-index: -10;box-sizing: content-box;padding:0 0 20px;} .rg-table tr.highlight {background-color: inherit !important;} .rg-table.zebra tr:nth-child(even) {background-color: transparent;} .rg-table.zebra td:nth-child(even) {background-color: #f6f6f6;} .rg-table tr:nth-child(even) {background-color: transparent;} .rg-table td { line-height:2rem; padding: 5px 0;border-bottom: 1px dotted #ccc;text-align: left; font-size:16px;} .rg-table td[data-title]:before {width: 100%; content: attr(data-title);font-weight: bold;display: inline-block;content: attr(data-title);float: left;font-size: 16px;} .rg-table td:last-child {padding-right: 0;border: none;} .rg-table td:empty {display: none;} .rg-table .highlight td {background-color: inherit;font-weight: normal;} .Specification {padding-left: 5px;} tr .table-btn{margin-top: 10px; font-size: 16px;} .rg-table .text-left{padding:5px 0;text-align: left;} .rg-table .btn-td[data-title]{display: flex;justify-content: center;} .rg-table .btn-td[data-title]::before{display: none;} } /* Donate-sec4 - 頁選區================================================================== */ .Donate-sec4{padding-bottom: 80px;} @media screen and (max-width: 768px) { .Donate-sec4{padding-bottom: 0} } /* BranchesDetail-------------------------------------------------------------------------------- */ /* 無障礙 */ .BranchesDetail-Accessibility-C{position: absolute;left: -30px;top: 20px;} @media screen and (max-width: 768px) { .BranchesDetail-Accessibility-C{position: absolute;left: -20px;top: 10px;} } /* BranchesDetail-sec1 - 首頁區================================================================== */ /* BranchesDetail-sec2 - 按鈕區================================================================== */ .BranchesDetail-sec2{padding-bottom: 80px;} @media screen and (max-width: 768px) { .BranchesDetail-sec2{padding-bottom: 20px;} } /* BranchesDetail-sec3 - 文章區================================================================== */ .BranchesDetail-sec3{padding-bottom: 150px;} .BranchesDetail-contact{font-family: var(--f-family-02);padding-bottom: 50px;display: flex;;max-width: 1000px;margin: 0 auto;gap: 30px;} .BranchesDetail-contact-img{max-width: 500px;max-height: 350px;object-fit: contain;height: auto;width: 100%;border-radius: 25px;} .BranchesDetail-contact-box{display: flex;justify-content: space-between;flex: 1;} .BranchesDetail-text-area{display: flex;flex-direction: column;justify-content: center; line-height: 2.5rem;line-height: 60px;} .BranchesDetail-text-area .sociality {display: flex;flex-wrap: wrap;gap: 10px;} .BranchesDetail-text-area .sociality img{width: 40px; height: 40px;object-fit: cover;object-position: center;margin: 10px 10px 10px 0;} .BranchesDetail-text-area h2{font-size: 24px;line-height: 2rem;position: relative;} .BranchesDetail-text-area img{width: 20px; height: 20px;object-fit: cover;margin: 0 .5rem;transform: translateY(3px);} .BranchesDetail-text-area a {color: #333;font-size: 20px;} .BranchesDetail-article{border-radius: 16px;box-shadow: 0px 0px 6px #0000001A;padding: 40px;max-width: 1000px;margin: 0 auto;} .BranchesDetail-article strong{color: var(--c-orange-01);} .BranchesDetail-article p{font-family: var(--f-family-02);font-size: 18px;line-height: 2.2rem;} .BranchesDetail-article .BranchesDetail-title{color: var(--c-orange-01);font-size: 20px;font-weight: 600;margin-bottom: .5rem;} .BranchesDetail-article .detailed{margin-bottom: 25px;} .BranchesDetail-return{text-align: center;margin-top: 80px;} @media screen and (max-width: 1200px) and (min-width: 769px) { .BranchesDetail-contact{flex-direction: column;max-width: 700px;} .BranchesDetail-contact-img{max-width:100%;height: auto;} .BranchesDetail-article{max-width: 700px;} } @media screen and (max-width: 768px) { .BranchesDetail-sec3{padding-bottom: 30px;} .BranchesDetail-contact-img{max-width:100%;height: auto;} .BranchesDetail-text-area{line-height: 50px;} .BranchesDetail-text-area .sociality img{height: 35px;width: 35px;} .BranchesDetail-text-area h2{font-size: 22px;} .BranchesDetail-text-area a {font-size: 16px;} .BranchesDetail-article{padding: 20px;} .BranchesDetail-contact{flex-direction: column;max-width: 700px;padding-bottom: 30px;} .BranchesDetail-article .detailed{margin-bottom: 10px;} .BranchesDetail-return{margin-top: 30px;} } /* DonateDetail-------------------------------------------------------------------------------- */ /* 無障礙 */ .DonateDetail-Accessibility-C{position: absolute;left: -20px;top: 8px;} @media screen and (max-width: 768px) { .DonateDetail-Accessibility-C{position: absolute;left: -20px;top: 6px;} } /* DonateDetail-sec1 - 首頁區================================================================== */ /* DonateDetail-sec2 - 表格區================================================================== */ .DonateDetail-sec2{padding-bottom: 200px;position: relative;color: #5f5f5f;} .DonateDetail-sec2::after{position: absolute;display: block;content: "";background-image: url(../images/sec4-pc-bg.png);background-repeat: no-repeat;background-size: 100%;background-position: left bottom;width: 100%;height: 20vh;left: 0;bottom: 0;transform: translateY(5px);z-index: -1;} .DonateDetail-sec2-container{max-width: 1152px;} .DonateDetail-content{font-family: var(--f-family-02);font-size: 20px; letter-spacing: 1px;text-align: justify;position: relative;} .DonateDetail-content p{line-height: 2.6rem;} .DonateDetail-content a{color: #5f5f5f;} .DonateDetail-content table {width: 100%;border-collapse: collapse;margin: 40px 0;font-size: 18px;text-align: left;} .DonateDetail-content th, .DonateDetail-content td {padding: 15px 20px;border: 1px solid #808080;vertical-align: text-top;line-height: 2rem;} .DonateDetail-content th {font-weight: bold;white-space: nowrap;} .DonateDetail-return{text-align: center;} @media screen and (max-width: 768px) { .DonateDetail-sec2::after{background-image: url(../images/sec4-phone-bg.png);} .DonateDetail-sec2{padding-bottom: 100px} .DonateDetail-content p{line-height: 2.2rem;font-size: 18px;} .DonateDetail-content table,.DonateDetail-content tbody,.DonateDetail-content th,.DonateDetail-content td,.DonateDetail-content tr {display: block;width: 100%;} .DonateDetail-content table {margin: 30px 0;} .DonateDetail-content th, .DonateDetail-content td {border-bottom: none;} .DonateDetail-content .table-bottom {border-bottom: 1px solid #808080;flex-direction: column;gap: 10px;} .DonateDetail-content th {display: none; /* 隱藏標題列 */} .DonateDetail-content td {display: flex;justify-content: space-between;padding: 10px;position: relative;gap: 20px;} .DonateDetail-content td::before {content: attr(data-label);font-weight: bold;color: #5f5f5f;white-space: nowrap;;} } /* DonateDetail-sec3 - 表單區================================================================== */ .DonateDetail-sec3{background-color: #FFF7EC;padding-bottom: 150px;color: #5f5f5f;} .Donation-information{font-family: var(--f-family-02);} .Donation-information h2{text-align: center;font-size: 36px;font-weight: 400;} .Donation-information h3{color: var(--c-orange-01); font-size: 30px;font-weight: 400;padding: 40px 0;} .Donation-information span{color: #5f5f5f ;font-size: 20px;margin-left: 1rem;} .Donation-information .Confidence-Required {font-size: 20px;color: var(--c-orange-01);line-height: 2.2rem;} .form-example .Required{color: var(--c-orange-01);font-size: 1.5rem;position: absolute;transform: translateY(-10px);} .DonateDetail-box{display: flex;gap: 15px;margin-bottom: 55px;} .form-example {font-size: 20px; display: flex;flex-direction: column; gap:15px;justify-content: space-between;} .form-example-row{flex-direction: row;} .form-example input{ text-indent: 1em; } .form-example-all{flex:1;} .input-Customize{max-width: 200px;} .input-Customize-2{max-width: 280px;} .input-big{max-width: 300px;} .input-middle{max-width: 140px;} .input-Small{max-width: 110px;} .fill-in{font-size: 20px;height: 60px;border-radius: 50px;border: 1px solid #5f5f5f;} .form-example input:focus{outline: none;} .input-box{display: flex;gap: 10px;align-items: center;} .radio{width: 24px; height: 24px;} .radio-box{display: flex;gap: 10px;} .radio-box div{display: flex;white-space: nowrap;align-items: center;gap: 10px;} .radio-box input[type="radio"]{flex: 0 0 auto;width: 24px; height: 24px;accent-color:var(--c-orange-01);} .from-bottom{align-items: flex-end; line-height: 60px;} .DonateDetail-box textarea{border-radius: 15px;height: 154px;font-size: 22px;padding: 1rem;} .DonateDetail-box textarea:focus{outline: none;} .form-max{width: 100%;} .upload {display: none; /* 隱藏原生 input[type="file"] */} .custom-file-upload {display: inline-block;padding: 8px 30px;background-color: #444;color: white;font-size: 16px;border-radius: 20px;cursor: pointer;text-align: center;} .custom-file-upload:hover {background-color: #666;} .form-example-dropdown{justify-content: flex-end;} .form-example-dropdown .disDiv{ line-height: 58px;color: #5f5f5f;border: 1px solid #5f5f5f;} .form-example-Divide-equally{justify-content: space-between;} .Contact-address{font-size: 20px} .Contact-address span{color: var(--c-orange-01);font-size: 1.5rem;margin:0 .5rem;} .form-example .form-btn{font-family: var(--f-family-02); display: inline-block;line-height: 64px;font-size: 26px;padding: 0 80px;background-color: white;border-radius: 50px;font-weight: 500;cursor: pointer;} .form-example .form-clear{color: #15616d;border: 3px solid #15616d;background-color: transparent;} .form-example .form-clear:hover{color: white;border: 3px solid #15616d;background-color: #15616d;} .form-example .form-confirm{color: white;border: 3px solid var(--c-orange-01);background-color: var(--c-orange-01);} .form-example .form-confirm:hover{color: white;border: 3px solid #444;background-color: #444;} .DonateDetail-box-btn{justify-content: center;margin-top: 80px;} .DonateDetail-box-btn .form-example{gap: 30px;} /* .occupied */ @media screen and (max-width: 1200px) and (min-width: 769px) { .DonateDetail-box{flex-direction: column;margin-bottom: 20px;} .form-example{justify-content:flex-start;gap: 10px;} .input-Customize{max-width: 100%;} .input-Customize-2{max-width: 100%;} .input-big{max-width: 100%;} .input-middle{max-width: 100%;} .input-Small{max-width: 100%;} .form-example-row{flex-direction: column;} .from-bottom{align-items: flex-start;line-height: 2rem;} .radio-box{transform: translateY(0);} .occupied{width: 100%;} .DonateDetail-box:nth-last-child(2){gap: 0;} .form-example-dropdown{margin-top: 20px;} .radio-box div:last-child{width: 100%;} } @media screen and (max-width: 768px) { .form-example input{ text-indent: 1em; } .DonateDetail-sec3{padding-bottom: 50px;} .DonateDetail-box{flex-direction: column;margin-bottom: 20px;} .Donation-information h2{font-size: 28px;line-height: 4rem;} .Donation-information h3{font-size: 22px;padding:20px 0;} .Donation-information span{font-size: 18px;} .fill-in {font-size: 16px;height: 50px;line-height: 50px;vertical-align: middle;} .form-example{justify-content:flex-start;gap: 15px;font-size: 18px;} .input-Customize{max-width: 100%;} .input-Customize-2{max-width: 100%;} .input-big{max-width: 100%;} .input-middle{max-width: 100%;} .input-Small{max-width: 100%;} .form-example-row{flex-direction: column;} .from-bottom{align-items: flex-start;line-height: 2rem;} .radio-box{transform: translateY(0);} .occupied{width: 100%;} .DonateDetail-box:nth-last-child(2){gap: 0;} .form-example-dropdown{margin-top: 20px;} .form-example .form-btn{font-size: 20px;line-height: 50px;padding: 0;} .DonateDetail-box-btn{margin: 50px 0 0 0;} .DonateDetail-box-btn .form-example {gap: 15px;} .form-example-dropdown .disDiv{line-height: 48px} .DonateDetail-box textarea{font-size: 18px;} .radio-box div:last-child{width: 100%;} } /* AnnualReport-------------------------------------------------------------------------------- */ /* 無障礙 */ .AnnualReport-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .AnnualReport-Accessibility-C{position: absolute;left: 10px;top: 10px;} } /* AnnualReport-sec1 - 首頁區================================================================== */ /* AnnualReport-sec2 - 按鈕區================================================================== */ /* AnnualReport-sec3 - 看板區================================================================== */ .AnnualReport-sec3{padding-bottom: 200px;} .AnnualReport-sec3-container{max-width: 1600px;} .AnnualReport-choose{white-space: nowrap;overflow: auto;width: 100%;} .AnnualReport-choose a{padding: 0 35px;} .AnnualReport-Kanban .FunBox{margin-bottom: 30px;} .AnnualReport-disDiv{min-width: 365px; justify-content: space-between;} .AnnualReport-table-btn{width: 124px;text-align: center;} .AnnualReport-table tbody tr{text-align: center;} /* .AnnualReport-table tbody .tr-left{text-align: left;} */ /* .AnnualReport-Kanban .pagerfanta{margin: 100px 0;} */ @media screen and (max-width: 768px) { .AnnualReport-sec3{padding-bottom: 50px;} .AnnualReport-Kanban .FunBox{margin-bottom: 0;} .AnnualReport-disDiv{min-width: auto; width: 100%;justify-content: center;} .AnnualReport-Kanban .pagerfanta{margin: 0;} } /* Confidence-------------------------------------------------------------------------------- */ /* 無障礙 */ .Confidence-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .Confidence-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* Confidence-sec1 - 首頁區================================================================== */ /* Confidence-sec2 - 按鈕區================================================================== */ /* Confidence-sec3 - 看板區================================================================== */ .Confidence-sec3{padding-bottom: 80px;} .Confidence-content{display: flex;flex-direction: column; gap: 30px;font-family: var(--f-family-02);font-size: 20px;max-width: 812px; margin: 0 auto;padding-right: 170px;} .Confidence-Kanban{padding:100px 30px;} .Confidence-content h2{font-size: 24px;transform: translateX(80px);margin-bottom: 30px;line-height: normal;} .Confidence-Required{font-size: 20px;color: var(--c-orange-01);margin: 30px 0;line-height: 2.2rem;} .AnnualReport-form-example{flex-direction: row;justify-content: flex-end;align-items: center;} .AnnualReport-form-example label{width:160px ; text-align: end;} .Confidence-input-size{width: 445px;} .hint{transform: translateX(80px);font-size: 18px;} .Confidence-btn{ margin-top: 30px; display: inline-block; font-family: var(--f-family-02); background-color: #4C4C4C;border: none;color: white;line-height: 45px;width: 200px;font-size: 16px;border-radius: 50px;position: relative;left: 50%;cursor: pointer;} .Confidence-btn:hover{background-color: var(--c-orange-01);} @media screen and (max-width: 1200px) and (min-width: 769px) { .Confidence-Kanban{padding:100px;} .Confidence-content{ padding: 0;max-width: 100%;} .Confidence-content h2{transform: translateX(0);} .AnnualReport-form-example{flex-direction: column; justify-content: flex-start;align-items: start;} .AnnualReport-form-example label{width:auto ; text-align: start;} .Confidence-input-size{width: 100%;} .hint{transform: translateX(0);text-align: start;} .Confidence-btn{position: static;margin: 30px auto 0;} } @media screen and (max-width: 768px) { .Confidence-sec3{padding-bottom: 30px;} .Confidence-content{margin: 0; padding: 0;max-width: 100%;gap: 20px;} .Confidence-content h2{transform: translateX(0);font-size: 22px;margin-bottom: 0;} .Confidence-Required {font-size: 18px;} .Confidence-Kanban{padding:40px 30px;} .AnnualReport-form-example{flex-direction: column; justify-content: flex-start;align-items: start;gap: 10px;} .AnnualReport-form-example label{width:auto ; text-align: start;} .Confidence-input-size{width: 100%;} .hint{transform: translateX(0);text-align:left;font-size: 16px;} .Confidence-btn{position: static;margin: 20px auto 0;} } /* Confidence-sec4 - 提醒區================================================================== */ .Confidence-sec4{padding-bottom: 80px;} .Confidence-article{padding:110px 45px 45px;max-width: 1120px;margin: 0 auto;display: flex;justify-content: center;align-items: center;} .Service-hotline{font-family: var(--f-family-02);font-size: 20px;line-height: 2.6rem;} .Service-hotline a{color:#333} .Service-hotline .Service-mail{color: var(--c-orange-01);} @media screen and (max-width: 1200px) and (min-width: 769px) { .Confidence-article{padding: 110px 100px 45px;} } @media screen and (max-width: 768px) { .Confidence-sec4{padding-bottom: 50px;} .Confidence-article{padding: 90px 30px 30px;} .Confidence-article h2{top: 30px;} .Service-hotline{font-size: 18px;line-height: 2.2rem;} .Service-hotline a{display: block;} } /* EDMList-------------------------------------------------------------------------------- */ /* 無障礙 */ .EDMList-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .EDMList-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* EDMList-sec1 - 首頁區================================================================== */ /* EDMList-sec2 - 按鈕區================================================================== */ /* EDMList-sec3 - 看板區================================================================== */ .EDMList-sec3{padding-bottom: 180px;} .EDMList-sec3 .container{max-width: 1600px;} .EDMList-container{max-width: 1600px;} .date{text-align: right;font-size: 15px;color: #808080;line-height: 1rem;} /* .EDMList-sec3 .pagerfanta{margin:150px 0 80px;} */ @media screen and (max-width: 768px) { .EDMList-sec3{padding-bottom: 50px;} .EDMList-sec3 .pagerfanta{margin:0;} } /* Stuff-------------------------------------------------------------------------------- */ /* 無障礙 */ .Stuff-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .Stuff-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* Stuff-sec1 - 首頁區================================================================== */ /* Stuff-sec2 - 按鈕區================================================================== */ /* Stuff-sec3 - 看板區================================================================== */ .Stuff-sec3{padding-bottom: 150px;} @media screen and (max-width: 768px) { .Stuff-sec3{padding-bottom: 50px;} } /* Receipt-------------------------------------------------------------------------------- */ /* 無障礙 */ .Receipt-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .Receipt-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* Receipt-sec1 - 首頁區================================================================== */ /* Receipt-sec2 - 按鈕區================================================================== */ /* Receipt-sec3 - 看板區================================================================== */ .Receipt-sec3{padding-bottom: 150px;} @media screen and (max-width: 768px) { .Receipt-sec3{padding-bottom: 50px;} } /* Board-------------------------------------------------------------------------------- */ /* 無障礙 */ .Board-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .Board-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* Board-sec1 - 首頁區================================================================== */ /* Board-sec2 - 按鈕區================================================================== */ /* Board-sec3 - 看板區================================================================== */ .Board-sec3{padding-bottom: 150px;} .Board-form-example{flex-direction: row;align-items: center; justify-content: end;} .Board-form-example p{flex:0 0 65px; white-space:nowrap;} .Board-dropdown{width: 445px;} @media screen and (max-width: 1200px) and (min-width: 769px) { .Board-form-example{flex-direction: row;} .Board-dropdown{width: 100%;} } @media screen and (max-width: 768px) { .Board-dropdown{width: 100%;} .Board-sec3{padding-bottom: 50px;} } /* ConfidenceProcess-------------------------------------------------------------------------------- */ /* 無障礙 */ .ConfidenceProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .ConfidenceProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* ConfidenceProcess-sec1 - 首頁區================================================================== */ /* ConfidenceProcess-sec2 - 按鈕區================================================================== */ /* ConfidenceProcess-sec3 - 看板區================================================================== */ .ConfidenceProcess-sec3{padding-bottom: 150px;} .Confidence-btn-area{text-align: center;margin-top: 100px;} @media screen and (max-width: 768px) { .ConfidenceProcess-sec3{padding-bottom: 50px;} .Confidence-btn-area{text-align: center;margin-top: 30px;padding: 0 2rem;} } /* StuffProcess-------------------------------------------------------------------------------- */ /* 無障礙 */ .StuffProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .StuffProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* StuffProcess-sec1 - 首頁區================================================================== */ /* StuffProcess-sec2 - 按鈕區================================================================== */ /* StuffProcess-sec3 - 看板區================================================================== */ .StuffProcess-sec3{padding-bottom: 150px;} .FunBox .search-btn{background-color: var(--c-orange-01);color: white;border-radius: 50px;padding: 0;transform: translateY(0);font-size: 1.3rem;font-family: var(--f-family-02);min-width: 150px;} @media screen and (max-width: 768px) { .StuffProcess-sec3{padding-bottom: 50px;} .FunBox .search-btn{min-width: auto;width: 100%;line-height: 3rem;font-size: 18px;} } /* ReceiptProcess-------------------------------------------------------------------------------- */ /* 無障礙 */ .ReceiptProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .ReceiptProcess-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* ReceiptProcess-sec1 - 首頁區================================================================== */ /* ReceiptProcess-sec2 - 按鈕區================================================================== */ /* ReceiptProcess-sec3 - 看板區================================================================== */ .ReceiptProcess-sec3{padding-bottom: 150px;} @media screen and (max-width: 768px) { .ReceiptProcess-sec3{padding-bottom: 50px;} } /* Prayer-------------------------------------------------------------------------------- */ /* 無障礙 */ /* .Prayer-content .Prayer-Accessibility-C{position: absolute;left: -20px;top: 0;color: #333;} */ /* Prayer-sec1 - 首頁區================================================================== */ /* Prayer-sec2 - 介紹區================================================================== */ .Prayer-sec2{padding-bottom: 80px;} .Prayer-content{margin: 0 auto;position: relative;max-width: 1000px;} .Prayer-content a{color: var(--c-orange-01);} @media screen and (max-width: 768px) { .Prayer-sec2{padding-bottom: 30px;} .Prayer-content{font-size: 18px;line-height: 2.2rem;} .Prayer-content .newline br{display: none;} } /* Prayer-sec3 - 流程區================================================================== */ .Prayer-sec3{padding-bottom: 150px;} .Prayer-process{font-family: var(--f-family-02); display: flex;flex-direction: column;max-width: 1000px;margin: 0 auto;gap: 15px;} .Prayer-process h2{font-size: 30px;line-height: 2rem;color: var(--c-orange-01);font-weight: 400;} .Prayer-btn-area{margin-top: 80px;text-align: center;} @media screen and (max-width: 768px) { .Prayer-sec3{padding-bottom: 50px;} .Prayer-process h2{font-size: 22px;} .Prayer-btn-area{margin-top: 30px;} } /* PrayerProcess-------------------------------------------------------------------------------- */ /* 無障礙 */ .PrayerProcess-Accessibility-C{position: absolute;left: -18px;top: 8px;} @media screen and (max-width: 768px) { /* .PrayerProcess-Accessibility-C{position: absolute;left: 10px;top: 10px;} */ } /* PrayerProcess-sec1 - 首頁區================================================================== */ /* PrayerProcess-sec2 - 介紹區================================================================== */ /* PrayerProcess-sec3 - 代禱區================================================================== */ .PrayerProcess-sec3{padding-bottom: 100px;} .PrayerProcess-content{display: flex;flex-direction: column; gap: 40px; font-family: var(--f-family-02);max-width: 1000px; margin: 0 auto;} .PrayerProcess-top{display: flex;gap: 20px;position: relative;flex-direction: row;} .PrayerProcess-content textarea{height: 250px;font-size: 22px;border-radius: 15px;padding: 1rem;} .form-example .PrayerProcess-btn {padding: 0 ; font-size: 20px;line-height: 60px;width: 600px;margin:20px auto 0;} .form-example textarea:focus{outline: none;} @media screen and (max-width: 768px) { .PrayerProcess-sec3{padding-bottom: 50px;} .PrayerProcess-content{gap: 20px;} .PrayerProcess-top{flex-direction: column;gap: 15px;} .form-example .PrayerProcess-btn {max-width: 100%;line-height: 50px;margin: 0;} .PrayerProcess-disDiv{line-height: 48px;} .PrayerProcess-content textarea{font-size: 18px;} } /* ConfidenceNoInformation-------------------------------------------------------------------------------- */ .ConfidenceNoInformation-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .ConfidenceNoInformation-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* ConfidenceNoInformation-sec1 - 首頁區================================================================== */ /* ConfidenceNoInformation-sec2 - 按鈕區================================================================== */ /* ConfidenceNoInformation-sec3 - 看板區================================================================== */ .ConfidenceNoInformation-sec3{padding-bottom: 150px;} .no-service{max-width: 650px;margin: 0 auto 80px;} .no-service h2{text-align: center;line-height: auto;} @media screen and (max-width: 768px) { .ConfidenceNoInformation-sec3{padding-bottom: 50px;} .no-service{margin: 0 auto ;} .no-service h2{font-size: 22px; line-height: 4rem;} } /* BoardDonor-------------------------------------------------------------------------------- */ /* 無障礙 */ .BoardDonor-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .BoardDonor-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* BoardDonor-sec1 - 首頁區================================================================== */ /* BoardDonor-sec2 - 按鈕區================================================================== */ /* BoardDonor-sec3 - 看板區================================================================== */ .BoardDonor-sec3{padding-bottom: 150px;} .BoardDonor-sec3 .FunBox{position: relative;} .BoardDonor-sec3 .hint{font-family: var(--f-family-02);position: absolute;transform: translateX(0) translateY(2.5rem);;right: 0;bottom: 0; } .BoardDonor-sec3 .pagerfanta{margin: 100px 0;} @media screen and (max-width: 1360px) and (min-width: 769px) { .Board-search-btn{min-width: auto;width: 100%;} .BoardDonor-search-btn{line-height: 64px;} } @media screen and (max-width: 768px) { .BoardDonor-sec3{padding-bottom: 50px;} .BoardDonor-sec3 .pagerfanta{margin: 0;} } /* BoardRecipient-------------------------------------------------------------------------------- */ /* 無障礙 */ .BoardRecipient-Accessibility-C{position: absolute;left: 3px;top: 10px;} @media screen and (max-width: 768px) { .BoardRecipient-Accessibility-C{position: absolute;left: 3px;top: 10px;} } /* BoardRecipient-sec1 - 首頁區================================================================== */ /* BoardRecipient-sec2 - 按鈕區================================================================== */ /* BoardRecipient-sec3 - 看板區================================================================== */ .BoardRecipient-sec3{padding-bottom: 150px;} .BoardRecipient-sec3 .FunBox{position: relative;} .BoardRecipient-sec3 .hint{font-family: var(--f-family-02); position: absolute;transform: translateX(0) translateY(2.5rem);right: 0;bottom: 0; } .BoardRecipient-sec3 .pagerfanta{margin: 100px 0;} @media screen and (max-width: 768px) { .BoardRecipient-sec3{padding-bottom: 50px;} .BoardRecipient-sec3 .pagerfanta{margin: 0;} } /* Contactus-------------------------------------------------------------------------------- */ /* 無障礙 */ .Contactus-Accessibility-C{position: absolute;left: -20px;top: 15px;} @media screen and (max-width: 768px) { .Contactus-Accessibility-C{position: absolute;left: -20px;top: 2px;} } /* Contactus-sec1 - 首頁區================================================================== */ /* Contactus-sec2 - 內容區================================================================== */ .Contactus-text{font-family: var(--f-family-02);font-size: 20px;line-height: 3rem;max-width: 1075px;margin: 0 auto;position: relative;} .Contactus-text a{color: #333;} .Contactus-text h2{color: var(--c-orange-01);position: relative;line-height: 5rem;font-size: 24px;} .start-box{display: inline-block; height: 30px;width: 6px;background-color: var(--c-orange-01);transform: translateY(6px);margin-right:5px;} .Contactus-text .Contactus-btn-map{display: inline-block;font-family: var(--f-family-02);font-size: 20px;line-height: 2.5rem;border-radius: 50px; border: 1px solid var(--c-orange-01);width: 260px;text-align: center; color: var(--c-orange-01);margin: 30px 0;} .Contactus-text .Contactus-btn-map i{transform: translateY(2px);} .Contactus-text .Contactus-btn-map:hover{color: white;background-color: var(--c-orange-01);} @media screen and (max-width: 768px) { .Contactus-text{font-size: 16px;line-height: 2.2rem;} .Contactus-text h2{font-size: 20px;line-height: 3rem;} .Contactus-text .Contactus-btn-map{font-size: 16px; width: 100%;margin: 20px 0;} } /* Contactus-sec3 - 表單區================================================================== */ .Contactus-sec3{padding-bottom: 150px;} .Contactus-form {font-family: var(--f-family-02); max-width: 1075px;margin: 0 auto;} .Contactus-column-top{display: flex;flex-wrap: wrap;gap: 15px;justify-content: space-between;margin: 15px 0;} .Contactus-input-size{width: 100%;} .Contactus-form-example{width: 48%;} .Contactus-form-Customize{width: 48%;} .Contactus-disDiv{padding: 0;line-height: 58px;} .Contactus-column-top .Contactus-form-example:last-child{margin-top: 40px;} .Contactus-position{position: relative;} .Contactus-column-bottom{display: flex;gap: 15px;justify-content: space-between;} .Contactus-form-split{width: 20%;} .point-phone{position: absolute;left: 0;bottom: -32px;font-size: 16px;color: var(--c-black-02);} .Contactus-title{font-size: 20px;line-height: 3rem;} .Address-reminder{line-height: 2.5rem;color: var(--c-black-02);margin-bottom: 20px;} .Contactus-textarea{height: 250px;font-size: 22px;border-radius: 15px;padding: 1rem;} .Contactus-btn{margin: 40px auto 0;} .LocalCalls-area{display:flex;align-items:center;flex-wrap:wrap} .LocalCalls-area .LocalCalls-1{width:20%} .LocalCalls-area .LocalCalls-2{width:50%} .LocalCalls-area .LocalCalls-3{width:20%} .LocalCalls-area span{width:5%;text-align: center;} .Fax-area{display:flex;align-items:center;flex-wrap:wrap} .Fax-area .Fax-1{width:20%} .Fax-area .Fax-2{width:75%} .Fax-area span{width:5%;text-align: center;} @media screen and (max-width: 1200px) and (min-width: 769px) { .Contactus-column-bottom{flex-wrap: wrap;gap: 20px;} .Contactus-form-split{width: 31%;} .Contactus-form-Customize{width: 100%;} } @media screen and (max-width: 768px) { .Contactus-sec3{padding-bottom: 50px;} .Contactus-title{font-size: 18px;line-height: 3.5rem;} .Contactus-column-bottom{flex-wrap: wrap;gap: 30px;} .Contactus-form-example{width: 100%;} .Contactus-form-split{width: 100%;} .Contactus-form-Customize{width: 100%;} .Contactus-disDiv{line-height: 48px;} .Contactus-textarea{font-size: 18px;} } /* Subscribe-------------------------------------------------------------------------------- */ /* 無障礙 */ .Subscribe-Accessibility-C{position: absolute;left: 3px;top: 8px;} @media screen and (max-width: 768px) { .Subscribe-Accessibility-C{position: absolute;top: 8px;} } /* Subscribe-sec1 - 首頁區================================================================== */ /* Subscribe-sec2 - 訂閱區================================================================== */ .Subscribe-sec2{padding-bottom: 150px;} .Subscribe-sec2 .container{position: relative;} .Subscribe-form{font-family: var(--f-family-02);} .Subscribe-box-area{display: flex;gap: 50px;} .Subscribe-box{flex: 1;} .Subscribe-box h2{font-size: 24px;line-height: normal;} .Subscribe-box p{line-height: 2.5rem;} .Subscribe-form-example{flex-direction: row;justify-content: flex-start;margin-bottom: 20px;align-items: center;} .Release-time{font-size: 20px;font-weight: 400;padding-left: 1rem;} .Subscribe-input {width: 20px;height: 20px;accent-color: var(--c-orange-01);} .Subscribe-btn-area{flex-direction: row;margin: 50px 0 0 0;justify-content: center;gap: 50px;} @media screen and (max-width: 1200px) and (min-width: 769px){ .Subscribe-box-area{flex-direction: column; gap: 20px;} .Subscribe-btn-area{margin: 80px 0 0 0;} .Subscribe-input {width: 20px;height: 20px;accent-color: var(--c-orange-01);} } @media screen and (max-width: 768px){ .Subscribe-sec2{padding-bottom: 50px;} .Subscribe-box-area{flex-direction: column; gap: 0;} .Subscribe-input{transform: translateY(-12px);} .Subscribe-box h2{font-size: 20px;} .Subscribe-box p{line-height: 2.2rem;} .Release-time{font-size: 18px;display: block;padding: 0;} .Subscribe-btn-area{margin: 20px 0 0 0;flex-direction: column;gap: 20px;} } /* Download-------------------------------------------------------------------------------- */ /* 無障礙 */ .Download-Accessibility-C{position: absolute;left: -30px;top: 20px;} @media screen and (max-width: 768px) { .Download-Accessibility-C{position: absolute;left: -20px;top: 10px;} } /* Download-sec1 - 首頁區================================================================== */ /* Download-sec2 - 表格區================================================================== */ .Download-sec2-container{max-width: 1400px;} .Download-FunBox{justify-content: flex-end;} .Download-sec2 .pagerfanta{margin: 100px 0;} @media screen and (max-width: 768px){ .Download-sec2 .pagerfanta{margin: 0;} } /* Sitemap-------------------------------------------------------------------------------- */ /* 無障礙 */ .Sitemap-Accessibility-C{position: absolute;left: -20px;top: 0;} @media screen and (max-width: 768px) { .Sitemap-Accessibility-C{position: absolute;left: -20px;top: -2px;} } /* Sitemap-sec1 - 首頁區================================================================== */ /* Sitemap-sec2 - 導覽區================================================================== */ .Sitemap-sec2{padding-bottom: 150px;} .Sitemap-container{max-width: 1400px;} .Sitemap-illustrate{font-family: var(--f-family-02);line-height: 3rem;position: relative;} .Sitemap-illustrate ul{padding-left: 24px;margin: 20px 0;} .Sitemap-illustrate span{color: var(--c-orange-01);padding-right: 1rem;} .Sitemap-hr{border: 1px dashed var(--c-black-01);margin-bottom: 30px;} .Sitemap-GuidedTour{display: flex;flex-direction: column;gap: 15px;} .Sitemap-box{padding: 20px;background-color: #f0f0f0;} .Sitemap-box a{font-size: 16px;font-family: var(--f-family-02);color: var(--c-black-01);} .Sitemap-box .Sitemap-title{display:inline-block; font-size: 20px;color: var(--c-orange-01);font-weight: 500;margin-bottom: 20px;padding-right: 30px;} .Sitemap-box .Sitemap-headline{font-size: 18px;color: #333;} .Sitemap-section{display: flex;flex-wrap: wrap;gap: 20px;} .Sitemap-group{display: flex;flex-direction: column;flex: 0 0 200px;gap: 10px;} .Sitemap-box h2{display: inline-block;line-height: 30px;} @media screen and (max-width: 768px) { .Sitemap-sec2{padding-bottom: 50px;} .Sitemap-illustrate{line-height: 2.2rem;font-size: 16px;} .Sitemap-box .Sitemap-title{display:block;} .Sitemap-group{display: flex;flex-direction: column;flex:0 0 100%} .Sitemap-box h2{display: block;} }