* {
     color: #000 !important;
 }
 
 blockquote {
     display: none;
 }
 
 #ecf_header_section {
     display: none !important;
 }
 
 .l-container {
     padding: 0 !important;
     margin: 0 !important;
 }
 
 .l-container__row {
     margin: 0 !important;
 }
 
 .p-page_content {
     padding: 0 !important;
 }
 
 .p-page_content__inner {
     max-width: 100% !important;
 }
 
 #ecf_footer_section {
     display: none !important;
 }
 
 .p-page_content__inner a {
     text-decoration: none;
 }
 
 .u-text--body {
     font-size: 16px !important;
 }
 
 .p-page_content__inner h2.qaHead {
     font-size: 24px;
     font-weight: 800;
 }
 
 .p-page_content__inner p {
     margin: 16px 0;
 }
 /*全域設定*/
 
 body {
     margin: 0;
     font-size: 16px;
     letter-spacing: 4px;
     line-height: 1.8;
     font-family: "Noto Sans TC", serif;
     font-optical-sizing: auto;
     font-size-adjust: 0.5;
     color: #333;
 }
 
 a {
     text-decoration: none;
     color: #000;
 }
 
 img {
     width: 100%;
     display: block;
 }
 
 @media (max-width: 767px) {
     body {
         overflow-x: hidden;
     }
 }
 /*選單*/
 
 .headerBg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 100;
     transition: 0.5s;
 }
 
 .headerBg.active {
     background-color: rgba(255, 255, 255, 0.7);
     transition: 0.5s;
 }
 
 .headerBg .headerArea {
     width: calc(100% - 40px);
     max-width: 1200px;
     padding: 28px 0;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .headerBg .logoBox .logo {
     width: 118px;
     margin: 0;
 }
 
 .headerBg .menuBox ul {
     display: flex;
     gap: 40px;
 }
 
 .headerBg .menuBox ul li {
     list-style-type: none;
 }
 
 .headerBg .menuBox ul li a:hover {
     opacity: 0.7;
 }
 
 .headerBg .spMenuBox {
     display: none;
     width: 60px;
     height: 60px;
     justify-content: center;
     align-items: center;
 }
 
 .headerBg .spMenuBox span {
     width: 30px;
     height: 1px;
     background-color: #333;
     display: grid;
 }
 
 .headerBg .spMenuBox span:before {
     content: "";
     width: 30px;
     height: 1px;
     background-color: #333;
     transform: translate(0, 7px);
 }
 
 .headerBg .spMenuBox span:after {
     content: "";
     width: 30px;
     height: 1px;
     background-color: #333;
     transform: translate(0, -7px);
 }
 
 .spMenuPopupBg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: transparent;
     transform: translate(-40px, 0);
     transition: 0.5s;
     opacity: 0;
     pointer-events: none;
 }
 
 .spMenuPopupBg .spMenuCloseBtn {
     position: absolute;
     top: 10px;
     right: 0;
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .spMenuPopupBg .spMenuCloseBtn span {
     display: grid;
 }
 
 .spMenuPopupBg .spMenuCloseBtn span:before {
     content: "";
     width: 30px;
     height: 1px;
     background-color: #333;
     transform: rotate(-45deg);
 }
 
 .spMenuPopupBg .spMenuCloseBtn span:after {
     content: "";
     width: 30px;
     height: 1px;
     background-color: #333;
     transform: rotate(45deg);
 }
 
 .spMenuPopupBg .spMenuBg {
     position: absolute;
     left: 5%;
     top: 50%;
     transform: translate(0, -50%);
 }
 
 .spMenuPopupBg .spMenuBg ul {
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .spMenuPopupBg .spMenuBg ul li {
     list-style-type: none;
 }
 
 .spMenuPopupBg .spMenuBg ul li a {
     font-size: 18px;
 }
 
 .spMenuPopupBg.active {
     display: block;
     transform: translate(0, 0);
     transition: 0.5s;
     opacity: 1;
     background-color: transparent;
     background-color: #ffe541;
 }
 
 .spMenuPopupBg.active {
     pointer-events: initial;
 }
 
 @media (max-width: 1000px) {
     .headerBg .menuBox {
         display: none;
     }
     .headerBg .spMenuBox {
         display: flex;
     }
 }
 
 @media (max-width: 767px) {
     .headerBg .headerArea {
         padding: 30px 0;
     }
     .headerBg .logoBox .logo {
         width: 90px;
     }
     .spMenuPopupBg .spMenuCloseBtn {
         top: 0;
     }
     .spMenuPopupBg .spMenuBg {
         top: 10%;
         transform: translate(0, 0);
     }
 }
 /*footer*/
 
 .footerBg {
     background-color: #ffe541;
     padding: 2rem 0 1rem 0;
 }
 
 .footerBg .footerArea {
     width: calc(100% - 40px);
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
 }
 
 .footerBg .leftItem .logo {
     margin: 0 0 2rem 0;
     width: 178px;
 }
 
 .footerBg .leftItem ul {
     padding: 0;
 }
 
 .footerBg .leftItem ul li {
     list-style-type: none;
 }
 
 .footerBg .rightItem {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: flex-end;
 }
 
 .footerBg .rightItem ul {
     padding: 0;
 }
 
 .footerBg .rightItem ul li {
     list-style-type: none;
     text-align: right;
 }
 
 @media (max-width: 1000px) {
     .footerBg .footerArea {
         flex-direction: column;
     }
     .footerBg .rightItem {
         align-items: flex-start;
     }
     .footerBg .rightItem ul li {
         text-align: left;
     }
 }
 
 @media (max-width: 767px) {
     .footerBg .leftItem ul li {
         font-size: 13px;
     }
     .footerBg .rightItem ul li {
         font-size: 13px;
     }
 }
 /*content共同部分*/
 
 .contentBg {
     position: relative;
     z-index: 1;
 }
 
 .contentBg .contentArea {
     width: calc(100% - 40px);
     max-width: 1200px;
     margin: 0 auto;
 }
 
 .contentBg .allHead {
     display: flex;
     align-items: center;
     font-size: 20px;
     font-weight: 500;
     margin: 20px 0;
 }
 
 .contentBg .allHead:before {
     content: "";
     height: 1px;
     width: 35px;
     background-color: #ccc;
     margin-right: 20px;
 }
 
 .contentBg .allBtn {
     border: 1px solid #ffe541;
     border-radius: 100px;
     width: 210px;
     padding: 12px 17px;
     box-sizing: border-box;
     text-align: center;
     font-size: 14px;
     transition: 0.4s;
     background-color: rgba(255, 255, 255, 0.8);
 }
 
 .contentBg .allBtn:hover {
     background-color: #ffe541;
     transition: 0.4s;
 }
 
 .contentBg .bigHead {
     position: relative;
     display: flex;
     justify-content: center;
     max-width: 1000px;
     width: 100%;
     margin: 6rem auto;
 }
 
 .contentBg .bigHead:before {
     content: "";
     width: 100%;
     height: 1px;
     background-color: #6a6a6a;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
 }
 
 .contentBg .bigHead .text {
     background-color: #fff;
     padding: 0 20px;
     box-sizing: border-box;
     text-align: center;
     line-height: 1.4;
     font-size: 36px;
     font-weight: 500;
 }
 
 @media (max-width: 767px) {
     .contentBg .bigHead {
         margin: 0 0;
     }
     .contentBg .bigHead .text {
         font-size: 30px;
     }
 }
 /*content內容專屬設定*/
 
 .contentBg .effects {
     position: absolute;
     z-index: -1;
     pointer-events: none;
 }
 
 .contentBg .effects01 {
     width: 311px;
     top: 0;
     right: 0;
 }
 
 .contentBg .effects02 {
     width: 274px;
     bottom: 28%;
     left: 0;
 }
 
 .contentBg .effects03 {
     width: 265px;
     bottom: 2%;
     right: 0;
 }
 
 .conceptBg .conceptBox {
     display: flex;
     align-items: center;
     max-width: 1200px;
     margin: 10rem 0;
 }
 
 .conceptBg .item {
     flex: 1 1;
 }
 
 .conceptBg .item.positionSet {
     position: relative;
     display: flex;
     justify-content: center;
 }
 
 .conceptBg .pic {
     width: 485px;
 }
 
 .conceptBg .product {
     width: 69px;
     position: absolute;
     right: 90px;
     bottom: -40px;
 }
 
 @media (max-width: 1000px) {
     .conceptBg .product {
         right: -2%;
     }
 }
 
 @media (max-width: 767px) {
     .conceptBg .product {
         width: 16%;
     }
 }
 
 .conceptBg .text {
     font-size: 18px;
 }
 
 .conceptBg .videoBox {
     width: 328px;
     height: 533px;
     overflow: hidden;
     border-radius: 16px;
     border: 10px solid #f4f5f9;
 }
 
 .conceptBg .videoBox video {
     width: 102%;
 }
 
 .goodsBg .goodsBox {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     margin: 10rem 0;
     gap: 40px;
 }
 
 .goodsBg .pic {
     width: 600px;
     max-width: 50vw;
 }
 
 .goodsItem {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }
 
 .goodsBg .text {
     text-align: center;
 }
 
 .goodsBg .title {
     font-size: 30px;
     text-align: center;
 }
 
 .salesBg .salesBox {
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin: 10rem 0;
 }
 
 .salesBg .item {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
 }
 
 .salesBg .title {
     font-size: 30px;
     text-align: center;
     margin: 0 0 16px 0;
 }
 
 .faqBg {
     background: linear-gradient( to right, rgb(244, 245, 249) 0% 46%, rgba(244, 245, 249, 0) 53%);
     display: flex;
     padding: 2rem 6rem;
     box-sizing: border-box;
     margin: 0 0 10rem 0;
 }
 
 .faqBg .item {
     flex: 1 1;
 }
 
 .faqBg .item.itemInfo {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .faqBg .item .text {
     margin: 0 0 40px 0;
 }
 
 .faqBg .pic {
     width: 485px;
 }
 
 .faqBg .spLogo {
     width: 80%;
     margin: 0 auto;
     display: none;
 }
 
 @media (max-width: 1000px) {
     .conceptBg .pic {
         width: 100%;
     }
     .faqBg .pic {
         width: 100%;
     }
 }
 
 @media (max-width: 767px) {
     .contentBg .effects01 {
         display: none;
     }
     .contentBg .effects {
         display: none;
     }
     .conceptBg .conceptBox {
         flex-direction: column;
         margin: 1rem 0 3rem 0;
     }
     .conceptBg .pic {
         width: 80%;
         margin: 0 auto;
     }
     .conceptBg .text {
         text-align: center;
         font-size: 16px;
         padding: 0 10px;
         box-sizing: border-box;
     }
     .goodsBg .goodsBox {
         margin: 1rem 0 3rem 0;
     }
     .goodsBg .pic {
         width: 100%;
         max-width: 90vw;
     }
     .goodsBg .title {
         margin: 0 0 20px 0;
     }
     .salesBg .salesBox {
         flex-direction: column;
         margin: 1rem 0 3rem 0;
     }
     .salesBg .title {
         font-size: 16px;
     }
     .salesBg .salesBox .pic {
         width: 80%;
     }
     .faqBg {
         background: transparent;
         padding: 0;
     }
     .faqBg .item:last-child {
         display: none;
     }
     .faqBg .spLogo {
         display: block;
     }
     .faqBg .item .text {
         text-align: center;
     }
     .contentBg .faqBg .allBtn {
         margin: 0 auto;
     }
     .goodsBg .goodsBox {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
         margin: 10rem 0;
     }
 }
 /*首頁banner區域*/
 
 .bannerBg {
     height: 46vw;
 }
 
 @media (max-width: 767px) {
     .bannerBg {
         height: auto;
     }
 }
 /*商品介紹區域*/
 
 .aboutBg {
     margin: 10rem 0 0 0;
 }
 
 .aboutBg .aboutArea {
     max-width: calc(50% + 615px);
     margin-left: auto;
 }
 
 .aboutBg .aboutBox {
     display: flex;
     flex-direction: row-reverse;
 }
 
 .aboutBg .allHead {
     display: flex;
     align-items: center;
     font-size: 20px;
     font-weight: 500;
 }
 
 .aboutBg .allHead:before {
     content: "";
     height: 1px;
     width: 35px;
     background-color: #ccc;
     margin-right: 20px;
 }
 
 .aboutBg .aboutBox .itemInfo {
     padding: 0 100px 0 100px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .aboutBg .aboutBox .itemInfo h3 {
     margin: 20px 0;
     font-weight: 800;
 }
 
 .aboutBg .aboutBox .itemPic img {
     transform: translate(0, -60px);
 }
 
 .aboutBg2 {
     position: relative;
     margin: 0 0 10rem 0;
 }
 
 .aboutBg2 .aboutArea2 {
     width: calc(100% - 40px);
     max-width: 1200px;
     margin: 0 auto;
 }
 
 @media (max-width: 1000px) {
     .aboutBg .aboutBox .itemInfo {
         padding: 0 20px 0 20px;
     }
 }
 
 @media (max-width: 767px) {
     .aboutBg {
         margin: 4rem 0 0 0;
     }
     .aboutBg .aboutBox {
         flex-direction: column;
     }
     .aboutBg .aboutBox .itemPic img {
         transform: translate(0, 0px);
     }
     .aboutBg2 {
         margin: 0 0 2rem 0;
     }
 }
 
 .featureBg {
     display: flex;
     flex-direction: row-reverse;
 }
 
 .featureBg .item {
     flex: 1 1;
 }
 
 .featureBg .item.itemInfo {
     padding: 0 100px 0 80px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .featureBg .item.itemInfo h3 {
     margin: 20px 0;
     font-weight: 800;
 }
 
 @media (max-width: 1000px) {
     .featureBg .item.itemInfo {
         padding: 0 20px 0 0;
     }
 }
 
 @media (max-width: 767px) {
     .featureBg {
         flex-direction: column;
         margin: 4rem 0;
     }
 }
 
 .pointBg {
     margin: 10rem auto;
 }
 
 .pointBg .title {
     display: flex;
     align-items: center;
     max-width: 1000px;
     margin: 0 auto;
 }
 
 .pointBg .title .pic {
     max-width: 60px;
 }
 
 .pointBg .title .text {
     font-size: 20px;
     margin: 0 0 0 20px;
 }
 
 .pointBg .contentBox {
     margin: 40px 0 80px 0;
 }
 
 .pointBg .contentItemBox {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1000px;
     margin: 40px auto 80px auto;
 }
 
 .pointBg .contentItemBox .item.paddingSet {
     width: 60%;
 }
 
 .pointBg .pointPic01 {
     max-width: 900px;
     margin: 0 auto;
 }
 
 @media (max-width: 767px) {
     .pointBg {
         margin: 4rem 0;
     }
     .pointBg .pointPic01 {
         width: 100%;
     }
     .pointBg .contentItemBox {
         flex-direction: column-reverse;
     }
     .pointBg .contentItemBox .item.paddingSet {
         width: 100%;
     }
 }
 
 .productBg {
     margin: 10rem auto;
 }
 
 .productBox {
     display: flex;
     margin: 0 0 80px 0;
 }
 
 .productBox .itemPic {
     flex: 0 0 540px;
     position: relative;
     margin-right: 40px;
 }
 
 .productBox .itemPic .pic {
     padding-left: 43px;
     padding-bottom: 49px;
     position: relative;
 }
 
 .productBox .itemPic .pic img {
     width: 540px;
 }
 
 .productBox.product-yellow .itemPic .pic img {
     border: 1px solid #ffe541;
 }
 
 .productBox.product-gray .itemPic .pic img {
     border: 1px solid #bcbcbf;
 }
 
 .productBox.product-blackOrg .itemPic .pic img {
     border: 1px solid #ee7500;
 }
 
 .productBox .itemPic .pic:before {
     content: "";
     top: 49px;
     bottom: 0;
     left: 0;
     right: 43px;
     position: absolute;
     z-index: -1;
 }
 
 .productBox.product-yellow .itemPic .pic:before {
     background-color: #ffe541;
 }
 
 .productBox.product-gray .itemPic .pic:before {
     background-color: #bcbcbf;
 }
 
 .productBox.product-blackOrg .itemPic .pic:before {
     background-color: #ee7500;
 }
 
 .productBox .itemInfo .head {
     font-size: 26px;
     line-height: 1.4;
     margin: 0 0 10px 0;
 }
 
 .productBox .itemInfo .title {
     font-size: 18px;
     font-weight: 600;
     margin: 10px 0;
 }
 
 .productBox .itemInfo .list {
     padding: 0;
 }
 
 .productBox .itemInfo .list li {
     list-style-type: none;
     position: relative;
     display: flex;
     margin-bottom: 8px;
 }
 
 .productBox .itemInfo .list li p {
     margin: 0;
 }
 
 .productBox .itemInfo .list li .small {
     font-size: 12px;
     letter-spacing: 0;
     margin: 0 0 0 -2px;
 }
 
 .productBox .itemInfo .list li:before {
     content: "";
     width: 10px;
     height: 10px;
     flex: 0 0 10px;
     border-radius: 50%;
     margin-top: 8px;
     margin-right: 8px;
 }
 
 .productBox.product-yellow .itemInfo .list li:before {
     background-color: #ffe541;
 }
 
 .productBox.product-gray .itemInfo .list li:before {
     background-color: #bcbcbf;
 }
 
 .productBox.product-blackOrg .itemInfo .list li:before {
     background-color: #ee7500;
 }
 
 .productBox .itemInfo .note {
     font-size: 14px;
     line-height: 1.6;
     margin: 40px 0 0 0;
 }
 
 .productBox .itemInfo .btnBox {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 32px 0 0 0;
 }
 
 .productBox .itemInfo .btnBox a {
     border: 1px solid #bcbcbc;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 58px;
     border-radius: 100px;
     padding: 3px 30px;
     margin: 0 4px;
     flex: 1 1;
     line-height: 1.4;
 }
 
 .productBox .itemInfo .btnBox a img {
     width: 68px;
     margin: 0 6px 0 0;
 }
 
 @media (max-width: 1080px) {
     .productBox .itemPic {
         flex: 0 0 480px;
     }
     .productBox .itemPic .pic img {
         width: 480px;
     }
 }
 
 @media (max-width: 1000px) {
     .productBox {
         flex-direction: column;
     }
     .productBox .itemPic {
         margin: 0 auto;
         width: 100%;
     }
     .productBox .itemPic .pic {
         transform: scale(0.85);
     }
     .productBox .itemPic .pic img {
         width: 100%;
     }
 }
 
 @media (max-width: 767px) {
     .productBg {
         margin: 4rem 0;
     }
     .productBox .itemPic .pic {
         transform: scale(1);
         margin: 0 0 20px 0;
     }
     .productBox .itemPic {
         flex: 0 0;
     }
     .productBox .itemInfo .btnBox {
         flex-direction: column;
     }
     .productBox .itemInfo .btnBox a {
         margin: 0 0 12px 0;
         width: 80%;
         padding: 9px 30px;
     }
 }
 
 .useBg {
     margin: 80px 0;
 }
 
 .useBg .useBox {
     display: flex;
     margin: 0 0 40px 0;
 }
 
 .useBg .useBox .item {
     flex: 1 1 50%;
     display: flex;
     align-items: center;
 }
 
 .useBg .useBox .item.pic {
     justify-content: center;
     padding-left: 40px;
     box-sizing: border-box;
 }
 
 .useBg .useBox .item.text {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 
 .useBg .useBox .item.text span {
     font-size: 12px;
     margin: 18px 0 0 0;
 }
 
 .useBg .useBox .item img {
     max-width: 321px;
 }
 
 @media (max-width: 767px) {
     .useBg .useBox .item.pic {
         padding-left: 0;
     }
 }
 
 .qaHead {
     text-align: center;
     margin: 200px 0 40px 0;
 }
 
 .qaBg {
     margin: 0 0 10rem 0;
 }
 
 .qaBox {
     max-width: 1000px;
     margin: 0 auto;
     border-bottom: 1px solid #d8dddf;
     padding: 20px 20px;
     box-sizing: border-box;
     cursor: pointer;
 }
 
 .qaBox:first-child {
     border-top: 1px solid #d8dddf;
 }
 
 .qaBox dt {
     display: flex;
     position: relative;
 }
 
 .qaBox dt span {
     flex: 0 0 30px;
     font-size: 20px;
 }
 
 .qaBox dt p {
     flex: 1 1;
     margin: 4px 0 0 0;
     transition: 0.4s;
     text-align: justify;
 }
 
 .qaBox:hover dt p {
     opacity: 0.6;
     transition: 0.4s;
 }
 
 .qaBox dt .icon {
     position: absolute;
     top: 8px;
     right: 0;
 }
 
 .qaBox dt .plus {
     opacity: 1;
     transition: 0.5s;
 }
 
 .qaBox.active dt .plus {
     opacity: 0;
     transition: 0.5s;
 }
 
 .qaBox dt .minus {
     opacity: 0;
     transition: 0.5s;
 }
 
 .qaBox.active dt .minus {
     opacity: 1;
     transition: 0.5s;
 }
 
 .qaBox dd {
     margin: 0;
     transition: 1s;
     overflow: hidden;
     display: flex;
     height: 0;
     opacity: 0;
 }
 
 .qaBox.active dd {
     transition: 1s;
     height: auto;
     opacity: 1;
     padding: 20px 0 0 0;
 }
 
 .qaBox dd span {
     flex: 0 0 30px;
     font-size: 20px;
 }
 
 .qaBox dd p {
     flex: 1 1;
     margin: 4px 0 0 0;
     text-align: justify;
 }
 
 @media (max-width: 767px) {
     .qaBox {
         padding: 20px 0;
     }
     .qaBox dt p {
         margin: 4px 36px 0 0;
     }
     .qaBox dd p {
         margin: 4px 36px 0 0;
     }
 }
 
 .mv {
     width: 100%;
     height: 100vh;
 }
 
 .mvSwiper {
     height: 100vh;
 }
 
 .swiper-slide {
     width: 100%;
     height: auto;
 }
 
 .swiper-slide img {
     width: 100%;
     height: auto;
 }
 
 .award {
     width: 100%;
 }
 
 .award-img {
     width: 100%;
     height: 100%;
 }
 
 @media (min-width: 767px) {
     .mv {
         height: calc(638 / 1360 * 100vw);
     }
 }
 
 @media (max-width: 767px) {
     .mvSwiper {
         height: 88vh;
     }
     .swiper-slide img {
         height: 88vh;
         width: auto;
     }
     .award-img {
         display: flex;
         justify-content: center;
     }
 }