/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1360px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(18px, 1.5vw, 20px); line-height:1.5; color: #333; letter-spacing: 0; font-weight: 400; padding-top: 120px;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.demo-section { padding-left: 5%; padding-right: 5%;}

.font-size-15 { font-size: 15px;}
.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.5vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-26 { font-size: clamp(20px, 2.1vw, 26px);}
.font-size-28 { font-size: clamp(24px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(24px, 2.5vw, 30px);}
.font-size-32 { font-size: clamp(26px, 2.7vw, 32px);}
.font-size-34 { font-size: clamp(26px, 2.9vw, 34px);}
.font-size-36 { font-size: clamp(28px, 3.3vw, 36px); line-height: 1.3;}
.font-size-38 { font-size: clamp(28px, 3.3vw, 38px); line-height: 1.3;}
.font-size-40 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(30px, 3.5vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.3;}
.font-size-50 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.3;}
.font-size-60 { font-size: clamp(44px, 4vw, 60px); line-height: 1.2;}
.font-size-70 { font-size: clamp(50px, 4.4vw, 70px); line-height: 1.1;}

.font-Serif { font-family: "Noto Serif TC", sans-serif;}

.color-blue { color: #0a4594;}
.color-green { color: #009fb4;}
.color-white { color: #fff;}
.color-black { color: #111;}
.color-red { color: #c6010f;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}
.align-justify { text-align: justify!important;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-600 { font-weight: 600;}
.weight-700 { font-weight: 700;}
.weight-900 { font-weight: 900;}

.p-layout { padding: 0; margin:0 0 calc(20px + 2%) 0; font-weight: 400; line-height: 1.5; font-size: clamp(18px, 1.5vw, 20px);}

.layout-wrap { display: flex; flex-direction: row; flex-wrap: wrap;}
.layout-nowrap { display: flex; flex-direction: row; flex-wrap: nowrap;}

.hr-type-1 { padding: 0 !important; margin: 20px 0 !important;}

.title-type-1 { line-height: 1.3; padding-bottom: 10px;}
.title-type-2 { line-height: 1.3; padding-bottom: calc(15px + 1%);}

.banner { position: relative; margin-bottom: calc(20px + 2%); padding: 25px 5% 50px 5%;}
.banner:before { position: absolute; content: ""; left: 0; bottom: 0;height: 25px;  width: 37%; background: #c6010f; clip-path: polygon(0% 0, 100% 0%, calc(100% - 10px) 100%, 0 100%);}
.banner:after { position: absolute; content: ""; right: 0; bottom: 25px;height: 25px;  width: 74%; background: #eaddcd; clip-path: polygon(10px 0, 100% 0%, 100% 100%, 0 100%);}

.banner-title { padding:0 0 8px 0; margin:0 0 0 0;font-size: clamp(28px, 3.3vw, 36px); font-weight: 900; color: #111; ; position: relative; line-height: 1.3; font-family: "Noto Serif TC", sans-serif; letter-spacing: 0;}

.title-1 { padding:0 0 20px 0; margin:0 0 0 0;font-size: clamp(30px, 3vw, 50px); font-weight: 900; color: #111; ; position: relative; line-height: 1.3; font-family: "Noto Serif TC", sans-serif; letter-spacing: 0;}

.btn-type-1 { display: block; width: 180px; line-height: 50px; color: #333 !important; text-align: center; font-size: 16px; border-radius: 30px;  position: relative; overflow: hidden; border: 1px solid #111;}
.btn-type-1 > span { position: relative; z-index: 2; font-size: clamp(18px, 1.5vw, 20px);font-weight: 400; letter-spacing: 0.1rem; color: #111;font-family: 'Noto Sans TC', sans-serif;}
.btn-type-1:after { background: #c6010f; bottom: 0; width: 0%; height: 100%; right: -10px; content: ""; display: block; position: absolute;transition: all 0.25s ease-out 0s; transform: skewX(-20deg);}
.btn-type-1:hover { border: 1px solid #c6010f;}
.btn-type-1:hover > span { color: #fff !important;}
.btn-type-1:hover:after { width: 120%; left: -10px;}

.title-2 { padding:0 calc(20px + 2%); margin:0 auto calc(25px + 1%) auto;font-size: clamp(28px, 3.8vw, 44px); font-weight: 900; color: #111; ; position: relative; line-height: 1.3; font-family: "Noto Serif TC", sans-serif; letter-spacing: 0; width: fit-content;}
.title-2:before { content: ""; position: absolute; width: 1px; height: 100%; background: #111; transform: rotate(30deg) translateY(-50%); left: 0; top:50%;}
.title-2:after { content: ""; position: absolute; width: 1px; height: 100%; background: #111; transform: rotate(30deg) translateY(-50%); right: 12%; top:50%;}

#path { }
#path ul { margin: 0; padding: 0; text-align: left;}
#path li { display: inline-block; vertical-align: top; font-size: 15px; line-height: 1.2; letter-spacing: 0; position: relative; font-weight: 400;}
#path li:after { content:"/"; display: inline-block; padding: 0 2px 0 6px; color: #666;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #666; }
#path li a:hover { color: #000;}
#path li:last-child { color: #000;}

/*about*/
.about-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding:0 5% calc(20px + 4%) 5%;}
.about-section-1 > div:nth-of-type(1) { width: calc(50% - 30px); padding: 0 40px 0 5%;}
.about-section-1 > div:nth-of-type(2) { width: calc(50% + 30px);}

.about-section-2 { background: #eaddcd; padding: calc(20px + 5%) 5%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.about-section-2 > div:nth-of-type(1) { width: calc(50% + 75px);}
.about-section-2 > div:nth-of-type(2) { width: calc(50% - 75px); padding-left: 5%;}

.about-section-2-ce { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.about-section-2-ce > div { padding: 0 7px;}

.about-section-3 { padding: calc(20px + 5%) 5%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.about-section-3 > div:nth-of-type(1) { width: 35%; }
.about-section-3 > div:nth-of-type(2) { width: 65%; padding-left: 5%; padding-top: 15px; }

/*products*/
.banner-box { margin-bottom: calc(20px + 2%);}
.banner-pc { display: block !important; width: 100%;}
.banner-mobile { display: none !important; width: 100%; }

.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -24px;}
.pro-list > div { margin: 0 24px 0 0; padding-bottom: calc(20px + 2%); width: calc(33.33% - 24px); position: relative; z-index: 1;}
.pro-list > div:hover .pro-list-pto-over { opacity: 1;}
.pro-list-pto { position: relative; z-index: 1; padding-bottom: 66.58%; margin-bottom: 15px; display: block;}
.pro-list-pto-over { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.4s ease-out 0s; opacity: 0; z-index: 3;}
.pro-list-pto-over img { object-fit: cover; width: 100%; height: 100%;}
.pro-list-pto-note { position: absolute; top: 0; left: 0; z-index: 4; background: #c6010f; color: #fff; font-size: 17px; padding: 10px; line-height: 1.1;}
.pro-list > div > a {font-size: 0; line-height: 0; text-decoration: none!important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}

.pro-cash-box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding-bottom: 5px;}
.pro-cash-box > div { line-height: 1; padding-bottom: 5px; padding-right: 12px;}
.pro-cash-0 { font-size: 20px; color: #333; text-decoration: line-through;}
.pro-cash-1 { font-size: 24px; color: #c6010f; font-weight: 900;}
.pro-cash-2 { font-size: 24px; color: #111111; font-weight: 900;}

.pro-list-data { white-space:nowrap; text-overflow : ellipsis; overflow:hidden; line-height: 1.3; padding-bottom: 15px;}
.pro-list-data a:hover {color: #C6010F;}

.pro-list-tool { display: flex; flex-direction: row; flex-wrap: wrap; }
.pro-list-tool > a { margin: 0 10px 10px 0; border: 1px solid #c6010f; border-radius: 100%; width: 45px; height: 45px; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content: center;}
.pro-list-tool > a:hover { background: #c6010f;}
.pro-list-tool > a:hover > img { filter: brightness(0) invert(1);}
.pro-list-tool > a > img { width: 22px !important;}

.pro-list-tool > a.collected { background: #c6010f;}
.pro-list-tool > a.collected > img { filter: brightness(0) invert(1);}

#page { text-align: center; padding:0 0 calc(20px + 4%) 0;}
#page a { font-size: 18px; color: #333; font-weight: 400; width: 30px; height: 30px; line-height: 27px; text-align: center; border-radius: 100%; display: inline-block;}
#page a:hover, #page a.current { background: #3e3e3e; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #333; border-right: 1px solid #333; margin: 0 15px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}


/*products-detail*/
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; position: relative; margin-bottom: calc(20px + 3%);}
.products-detail-top > div { width: 50%; }
.products-detail-top > div:nth-of-type(1) { position: sticky; top: 130px; padding: 0 15px; }
.products-detail-top > div:nth-of-type(2) { padding: 0 28px;;}

.products-detail-tool { position: relative; margin-top: 20px;}
   .swiper-slide {}

    .swiper-slide img {}

    .swiper {}

    .swiper-slide {padding: 0 5px;}

    .mySwiper2 {}

    .mySwiper {}

    .mySwiper .swiper-slide {opacity: 0.4;}

    .mySwiper .swiper-slide-thumb-active {opacity: 1;}

.swiper-next, .swiper-prev { width: 26px !important; height: 26px !important; border-radius: 100%; background: #333333; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%); border: 0px solid #362e2b;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 6px; height: 6px ; border-width: 1px 1px 0 0; border-color: #fff; border-style: solid;}
.swiper-prev:after { transform: rotate(-135deg); margin-left: 2px;}
.swiper-next:after { transform: rotate(45deg); margin-right: 2px;}
.swiper-prev { left: 0px;}
.swiper-next { right: 0px;}

.products-detail-top-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 16px;}
.products-detail-top-section-1 > div:nth-of-type(1) { width:calc(100% - 45px); padding-right: 20px;}
.products-detail-top-section-1 > div:nth-of-type(2) { width: 45px;}

.products-detail-title { padding:0 0 0 0; margin:0 0 0 0;font-size: clamp(30px, 3.5vw, 44px); font-weight: 900; color: #111; ; position: relative; line-height: 1.3; font-family: "Noto Serif TC", sans-serif; letter-spacing: 0;}
.icon-favorite { border: 1px solid #c6010f; border-radius: 100%; width: 45px; height: 45px; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content: center;}
.icon-favorite.current { background: #c6010f;}
.icon-favorite.current img { filter: brightness(0) invert(1);}
.icon-favorite img { width: 22px;}

.icon-favorite.collected { background: #c6010f;}
.icon-favorite.collected img { filter: brightness(0) invert(1);}

.pro-evaluate-box { padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.pro-evaluate-box > div { padding-right: 8px;}
.pro-evaluate-box > div:nth-of-type(1) { display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-evaluate-box > div:nth-of-type(1) > div { padding-right: 3px;}
.pro-evaluate-box > div:nth-of-type(1) > div img { width: 26px;}
.pro-evaluate-box > div:nth-of-type(2) { font-size: 20px; font-weight: 500; color: #333;}
.pro-evaluate-box > div:nth-of-type(2) a:hover { color: #c6010f;}

.pro-activity-box { border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; padding: 15px 0; margin-bottom: 25px;}
.pro-activity-content { background: #f1eae2; border-radius: 15px; padding: 15px 20px 10px 20px;}
.pro-activity-data { position: relative; padding: 0 0 7px 18px; font-weight: 500; font-size: 18px; line-height: 1.3;}
.pro-activity-data:before { position: absolute; content:""; width: 8px; height: 8px; border-radius: 100%; border: 1px solid #c6010f; top:9px; left: 0;}

.pro-select-box { display: flex; flex-direction: row; flex-wrap: nowrap; padding-bottom: 20px; }
.pro-select-box > div:nth-of-type(1) { width: 60px; }
.pro-select-box > div:nth-of-type(2) { width: calc(100% - 60px); }

.pro-spec-select { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.pro-spec-select > div { cursor: pointer; width: calc(50% - 10px); margin-bottom: 20px; padding: 12px 10px; border: 1px solid #cccccc; border-radius: 15px;text-align: center; font-size: 18px;}
.pro-spec-select > div.current { border: 1px solid #c6010f;}
.pro-spec-select > div.active  { border: 1px solid #c6010f;}
.pro-spec-select > div.disable { opacity: 0.5; cursor: not-allowed; }

#cms-amount-panel {display: flex; flex-direction: row; align-items: center;}
#cms-amount-panel > div { /*font-weight:bold;*/}
#cms-amount-panel > div:nth-child(1) {padding: 0;}
.cms-amount-value {border: 1px solid #cccccc; display: flex; flex-direction: row; height: 42px;}
#cms-amount-panel button { width:30px; font-size: 20px; color: #333; background-color: #fff; border: 0; background: #fff !important;}
#cms-amount-panel button:nth-of-type(1) { border-right: 1px solid #cccccc;}
#cms-amount-panel button:nth-of-type(2) { border-left: 1px solid #cccccc;}
#cms-amount-panel input[type="text"] { width:54px; font-size: 20px; text-align:center; border: 0; background: #fff; color: #333;}


.pro-detail-cash { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; border-top: 1px solid #cccccc; padding: 30px 0 calc(20px + 2%) 0;}
.pro-detail-cash-0 { font-size: 20px; color: #333; text-decoration: line-through; padding-left: 30px; line-height: 1;}
.pro-detail-cash-1 { font-size: 20px; color: #c6010f; font-weight: 900; line-height: 1;}
.pro-detail-cash-1 span { font-size: clamp(30px, 3.5vw, 44px); }

.pro-add-section { margin-bottom: calc(15px + 2%); }
.products-add-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #d8d8d8;}
.products-add-list > div { line-height: 1.4; letter-spacing: 0;}
.products-add-list > div:nth-of-type(1) { width: 30px;}
.products-add-list > div:nth-of-type(2) { width: 140px; }
.products-add-list > div:nth-of-type(3) { width: calc(100% - 30px - 140px - 70px); padding: 0 10px 0 20px;color: #444;}
.products-add-list > div:nth-of-type(3) span { color: #f2b21a;}
.products-add-list > div:nth-of-type(4) { width: 70px; line-height: 1;}

.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 28px; padding-right: 20px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #333; margin-bottom: 0; font-weight: 300;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 3px;left: 0;height: 20px;width: 20px;background-color: #fff; border: 1px solid #cccccc; }
.contact-note2:hover input ~ .checkmark {background-color: #fff;}
.contact-note2 input:checked ~ .checkmark {background: #c6010f; border-color: #c6010f;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 3px;top: 4px;width: 13px;height: 7px; border-width: 0 0 2px 2px; border-style: solid; border-color:#fff; transform: rotate(-45deg);}

.number-select select{  margin: 0px 0 0 0;  width:100%; background-image: url("../images/select-arrow.png"); background-repeat: no-repeat; background-position: calc(100% - 10px) 15px; background-size: 13px 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; font-size: 20px; border-width:1px; border-style: solid; border-color: #cccccc; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding: 0px 25px 0 10px;  letter-spacing: 0; height: 40px; line-height: 100%; text-align: center; }
.number-select option { padding:1px 5px;}
.number-select select::-ms-expand {
    display: none;
}

.p-add-name { white-space:nowrap; text-overflow : ellipsis; overflow:hidden; line-height: 1.4; padding-bottom: 5px;}
.p-add-cash { display: flex; flex-direction: row; flex-wrap: wrap;}
.p-add-cash-o { text-decoration: line-through; }
.p-add-cash-s { color: #ff0000;margin-right: 8px;}

.p-detail-btn { margin-bottom: 15px; display: flex ;flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.p-detail-btn > a { width: calc(50% - 12px); display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 1px solid #c6010f; padding: 13px; margin-bottom: 10px; background: #fff; color: #c6010f !important; border-radius: 30vw; }
.p-detail-btn > a:nth-of-type(1) { color: #fff !important; background: #c6010f; }
.p-detail-btn > a:nth-of-type(1) img { filter:brightness(0) invert(1);}
.p-detail-btn > a:hover { transform: scale(0.9);}
.p-detail-btn > a > img { width: 23px;}
.p-detail-btn > a > span { font-size: 20px; display: inline-block; margin-left: 10px;}

.p-detail-btn > button { width: calc(50% - 12px); display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 1px solid #c6010f; padding: 13px; margin-bottom: 10px; background: #fff; color: #c6010f !important; border-radius: 30vw; }
.p-detail-btn > button:nth-of-type(1) { color: #fff !important; background: #c6010f; }
.p-detail-btn > button:nth-of-type(1) img { filter:brightness(0) invert(1);}
.p-detail-btn > button:hover { transform: scale(0.9);}
.p-detail-btn > button > img { width: 23px;}
.p-detail-btn > button > span { font-size: 20px; display: inline-block; margin-left: 10px;}

.btn-tool-box { padding: 0 5%; border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc; margin-bottom: calc(20px + 3%);}
.btn-tool { display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content:space-between; padding: 15px 0;}
.btn-tool > a { display: flex ;flex-direction: row; flex-wrap: nowrap; align-items: center; cursor: pointer;}
.btn-tool > a:hover { transform: scale(0.9);}
.btn-tool > a > span { display: inline-block; padding: 0 10px;}

.p-detail-tab-top { border-bottom: 1px solid #cccccc; padding: 0 5%;}

.share-tool { text-align: center; padding-bottom: 25px;}

.loop-related { padding:0 0 calc(20px + 2%) 0; margin-bottom: calc(20px + 3%)}
.loop-related .owl-dots { }
.loop-related .owl-item {position: relative; background: #ffffff;  }
.loop-related .owl-item:hover .pro-list-pto-over { opacity: 1;} 
.loop-related .owl-nav { position: absolute; top: calc(50% - 40px); transform: translateY(-50%); left: 0%; width: 100%; z-index: 11;}
.loop-related .owl-prev, .loop-related .owl-next { position:absolute; z-index:100;  width: 40px !important; height: 40px !important; border-radius: 100% !important; background: #333333 !important; border: 0px solid #074151 !important; transition: all 0.4s ease-out 0s; top:50%; transform: translateY(-70%); margin: 0 !important;}
.loop-related .owl-prev:hover, .loop-related .owl-next:hover { background: #f2b21a !important;}
.loop-related .owl-prev:hover:before, .loop-related .owl-next:hover:before { border-color: #fff;}
.loop-related .owl-prev { left:-20px; }
.loop-related .owl-next { right:-20px;}
.loop-related .owl-prev:before, .loop-related .owl-next:before { content: ""; position: absolute; width: 11px; height: 11px; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; background-size: contain; background-repeat: no-repeat; top:50%; left: 50%; transition: all 0.4s ease-out 0s;}
.loop-related .owl-prev:before { transform:translate(-30%, -50%) rotate(-135deg);}
.loop-related .owl-next:before { transform:translate(-70%, -50%) rotate(45deg);;}
.loop-related .owl-prev:hover:before, .loop-related .owl-next:hover:before { }
.loop-related .owl-stage-outer {z-index: 2;}
.loop-related .owl-dots { position: absolute; z-index: 100; bottom:0px; left:0; width: 100%; text-align: center!important; padding: 0 0px; }
.loop-related .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop-related .owl-dots .owl-dot.active {  }
.loop-related .owl-dots .owl-dot span, .loop-related  .owl-dots .owl-dot span { background: #dadada !important; width: 12px !important; height: 12px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important;}
.loop-related .owl-dots .owl-dot.active span/*, .loop-related  .owl-dots .owl-dot:hover span*/ { background: #3e3e3e !important; }

/*recommend*/
.recommend-list-section { display: flex; flex-direction:column; flex-wrap: nowrap; padding-bottom: 20px;}
.recommend-list-section > div { display: flex; flex-direction:row; flex-wrap: wrap; align-items: center; margin-bottom: calc(20px + 4%);}
.recommend-list-section > div > div:nth-of-type(1) { width: calc(50% + 78px);}
.recommend-list-section > div > div:nth-of-type(1) img { width: 100%; border-radius: 25px; transition: all 0.4s ease-out 0s; }
.recommend-list-section > div > div:nth-of-type(1):hover img { transform: scale(0.9);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);}
.recommend-list-section > div > div:nth-of-type(2) { width: calc(50% - 78px); padding-left: 5%;}

.recommend-list-section > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.recommend-list-section > div:nth-child(even) > div:nth-of-type(2) { order: 1;padding-right: 5%;padding-left: 0;}

.btn-more { position: relative; display: block; width: fit-content; line-height: 1; padding: 8px 4px 13px 4px; border-width: 1px 0; border-color: #a3a3a3; border-style: solid;}
.btn-more:hover { padding: 8px 12px 13px 12px; }
.btn-more:hover span { color: #fff; }
.btn-more:before { content: ""; position: absolute; width: 0; height: 100%; top: 0; right: 0; background: #f2b500; transition: all 0.4s ease-out 0s;}
.btn-more:hover:before { width: 100%; left: 0;}
.btn-more span { position: relative; z-index: 3; color: #333; font-size: 18px; line-height: 1;}

/*blog*/
.blog-section { padding: 10px 0 0 0; display: flex ;flex-direction: row; flex-wrap: wrap;}
.blog-section > div:nth-of-type(1) { width: 300px;}
.blog-section > div:nth-of-type(2) { width: calc(100% - 300px); padding-left: 5%;}
.title-3 {font-size: clamp(20px, 1.9vw, 25px); color: #111; margin-bottom: 12px; font-weight: 700;}

.blog-image { margin-bottom: calc(20px + 3%);}
.blog-title { padding: 0 0 15px 0; margin: 0; font-weight: 700;}
.blog-search-bar { color: #999; border: 1px solid #111; font-size: 20px; background: #fff; padding:10px 14px; display: flex ;flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: calc(35px + 3%); border-radius: 30vw;}
.blog-search-bar input { width: calc(100% - 40px); border-width: 0; background: none; letter-spacing: 1px;}
.blog-search-bar a { width: 40px; text-align: center; font-size: 28px;}

.tags-list { display: flex ;flex-direction: row; flex-wrap: wrap; padding-bottom: calc(35px + 3%);}
.tags-list > a { border-radius: 30vw; padding: 8px 15px; margin: 0 8px 8px 0; border: 1px solid #111;}
.tags-list > a:hover, .tags-list > a.currnet { background: #c6010f; color: #fff; border-color: #c6010f;}

.tags-submenu { padding-bottom: calc(35px + 3%); }
.tags-submenu > a { display: block; border-bottom: 1px solid #111; padding: 0 0 8px 0; margin-bottom: 8px;;}
.tags-submenu > a:hover { color: #c6010f;}

.blog-list-content { padding-bottom: calc(20px + 3%); display: flex ;flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.blog-list-content .tags-list { padding-bottom: 10px;}
.blog-list-content .tags-list > a { padding: 4px 15px;}
.blog-list-content > div:nth-of-type(1) { width: 33%;}
.blog-list-content > div:nth-of-type(1) img { transition: all 0.8s ease-out 0s; width: 100%; }
.blog-list-content > div:nth-of-type(1):hover img { transform: scale(0.95);}
.blog-list-content > div:nth-of-type(2) { width: 67%; padding-left: 5%;}
.blog-list-title { color: #111; display: block; padding-bottom: 15px; font-weight: 900; font-size: clamp(24px, 2.2vw, 28px);font-family: "Noto Serif TC", sans-serif;white-space:nowrap; text-overflow : ellipsis; overflow:hidden; }
.blog-list-title:hover { color: #c6010f; }
.blog-list-data { color: #333; margin-bottom: 15px; font-size: 17px; line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}
.blog-list-date { color: #333; font-size: 17px; padding-bottom: 5px;}
.blog-list-btn { color: #333; font-size: 17px; width: fit-content; position: relative; display: block; padding-bottom: 7px; font-weight: 700;}
.blog-list-btn:after { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background: #333;transition: all 0.4s ease-out 0s;}
.blog-list-btn:hover { color: #c6010f;}
.blog-list-btn:hover:after { left: 0; width: 0;}

/*blog-detail*/
.blog-detail-section {}
.blog-detail-title { padding:0 0 20px 0; margin:0 0 0 0;font-size: clamp(30px, 3.3vw, 36px);; font-weight: 900; color: #111; ; position: relative; line-height: 1.3; font-family: "Noto Serif TC", sans-serif; letter-spacing: 0;}
.blog-detail-section .tags-list { padding-bottom: 30px;}
.blog-detail-section .tags-list > a { padding: 4px 15px;}
.blog-detail-section .share-tool { text-align: left; padding-bottom: calc(20px + 4%);}

/*odm*/
.odm-section { padding-bottom: calc(20px + 5%);}

.odm-content-1 { display: flex ;flex-direction: row; flex-wrap: wrap; align-items: center;}
.odm-content-1 > div:nth-of-type(1) { width: 55%;}
.odm-content-1 > div:nth-of-type(2) { width: 45%; padding: 0 5%;}

.odm-content-1-data { display: flex ;flex-direction: row; flex-wrap: wrap; align-items: center; padding: 30px 0; border-bottom: 1px solid #a2998f;}
.odm-content-1-data.no-border { border-bottom: 0px solid #a2998f;}
.odm-content-1-data > div:nth-of-type(1) { width: 130px; height: 130px; border-radius: 100%; border: 1px solid #333333; display: flex ;flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 28px;}
.odm-content-1-data > div:nth-of-type(2) { width: calc(100% - 130px); padding-left: 5%; }
.odm-content-1-data > div:nth-of-type(2) > span { display: block; font-weight: 500;font-size: clamp(24px, 2.2vw, 28px);}

.odm-content-2 { display: flex ;flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 3%;}
.odm-content-2 > div { width: calc((100% - 36px) / 3);}
.odm-content-2-pto { margin-bottom: 15px;}
.odm-content-2-pto img { width: 100%;}

.odm-section-3 { background: #eaddcd; padding: calc(20px + 4%) 5%;} 
.odm-section-3-list { display: flex ;flex-direction: row; flex-wrap: wrap; margin-right: -15px;} 
.odm-section-3-list > div { width: calc(25% - 15px); border-radius: 20px; background: #fff; padding: 25px 20px 35px 20px; position: relative; margin-bottom: 15px; margin-right: 15px;} 
.odm-section-3-list-arrow { position: absolute; top:50%; right: -32px; width: 46px; transform: translateY(-50%); z-index: 2;} 
.odm-section-3-list-pto { text-align: center; margin:10px 0 20px 0; height: 80px;display: flex ;flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;} 
.odm-section-3-list-pto img { max-height: 70px; max-width: 85px;} 
.odm-section-3-list-title { display: flex ;flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 14px; justify-content: center;} 
.odm-section-3-list-title > span { color: #c6010f; font-weight: 900;font-size: clamp(30px, 3.5vw, 44px); line-height: 1; display: block; padding-right: 10px;} 
.odm-section-3-list-title > div { color: #333; font-weight: 500;font-size: clamp(24px, 2.2vw, 28px); position: relative; padding-left: 10px; border-left: 1.5px solid #333; line-height: 1.2;} 
.odm-section-3-list-data {  line-height: 1.4; text-align: center;} 

.odm-section-4 { background: #f1f1f1; padding: calc(20px + 4%) 10px;}
.odm-section-4-content { display: flex ;flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.odm-section-4-content > div { width: calc((100% - 40px) / 6);}
.odm-section-4-pto { margin-bottom: 16px;}
.odm-section-4-title { font-weight: 500; text-align: center;font-size: clamp(20px, 1.9vw, 24px); line-height: 1.3; padding-bottom: 25px;}

.odm-section-5-content { display: flex ;flex-direction: row; flex-wrap: wrap;}
.odm-section-5-content > div:nth-of-type(1) { width: calc(50% - 45px); padding-right: 5%;}
.odm-section-5-content > div:nth-of-type(2) { width: calc(50% + 45px); }

.contact-section-data { border-bottom: 1px solid #dfdfdf; padding: 13px 0; position: relative; padding-left: 25px;}
.contact-section-data span { color: #d60000; position: absolute; left: 0; top:13px;}

.contact-main input[type="text"], .contact-main input[type="number"], .contact-main input[type="tel"], .contact-main input[type="phone"], .contact-main input[type="date"], .contact-main input[type="email"], .contact-main input[type="password"], .contact-main input[type="button"], .contact-main textarea { font-size: clamp(18px, 1.5vw, 20px); border-width:0 0 0 0; border-style: solid; border-color: #cccccc; margin: 0px 0 0 0; width: 100%; padding: 0; color:#333; background: none; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0; }
.contact-main textarea { height:105px; padding:0; letter-spacing: 0; resize: none;}
.contact-main select{  margin: 0px 0 0 0; width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: 100% 50%; background-size:18px 8px;  -webkit-appearance: none; -moz-appearance: none; appearance: none;   margin-right:4px; background-color: transparent; font-size: clamp(18px, 1.5vw, 20px); border-width:0 0 0px 0; border-style: solid; border-color: #cccccc; mwidth: 100%; color:#333; font-family: 'Noto Sans TC', sans-serif; padding: 0 35px 0 0;  letter-spacing: 0;}
.contact-main option { padding:1px 5px;}
.contact-main select::-ms-expand {
    display: none;
}
input::placeholder, textarea::placeholder { color: #3c312c; opacity:1;}

.layout-33 { display: flex; flex-direction: row; flex-wrap: wrap;}
.layout-33 > div { width: 33.33%; padding-right: 10px; padding-bottom: 10px;}

.odm-btn {width: 100%; max-width: 240px;margin: 0 0 0 auto; line-height: 80px; text-align: center; border-radius: 20vw; color: #fff !important; font-weight: 700;font-size: clamp(24px, 2.2vw, 28px);background: linear-gradient(90deg, #ad7c0f 0%, #f3b600 50%, #ad7c0f 100%); display: block; border-width: 0;transition: all 0.4s ease-out 0s; }
.odm-btn:hover { transform: scale(0.9);}

/*news*/
.news-section { padding-bottom: 10px;}
.news-content { border-radius: 25px; border: 1px solid #dadada; padding: 22px; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: calc(20px + 2%);}
.news-content > div:nth-of-type(1) { width: 33%;}
.news-content > div:nth-of-type(1) img { border-radius: 25px; width: 100%;}
.news-content > div:nth-of-type(2) { width: 67%; padding: calc(10px + 1%) 0 0 4%;}
.news-date { line-height: 1; padding-bottom: 10px; font-size: 17px;}
.news-title { font-family: "Noto Serif TC", sans-serif; font-weight: 900; color: #111;font-size: clamp(24px, 2.2vw, 28px); line-height: 1.4; padding-bottom: 14px;}
.news-data { font-size: 18px; line-height: 1.5; margin-bottom: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;}

.demo-section .btn-more-01{  color: #FFF!important; background: #f0ac00;}
.demo-section .btn-more-01:hover { background: #ffc535;}
.demo-section .btn-more-01::before, .demo-section .btn-more-01::after{display: none;}

@media only screen and (max-width: 1279px) {
	body { padding-bottom: 45px;}
	#content { padding-top: 70px;}
	
	#content , .p-layout { }
	
	.banner { background: linear-gradient(180deg, #efefef 0%, transparent 100%);}
	
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important; }
	
	.pro-list { margin-right: 0px; justify-content: space-between}
	.pro-list > div { margin: 0 0 0 0; width: calc(50% - 10px);}
}

@media only screen and (max-width: 980px) {
	.about-section-1 > div:nth-of-type(1) { width: 100%; padding: 0 0px 30px 0;}
	.about-section-1 > div:nth-of-type(2) { width: 100%;}
	
	.about-section-2 > div:nth-of-type(1) { width: 100%; order: 2;}
	.about-section-2 > div:nth-of-type(2) { width: 100%; order: 1; padding-left: 0; padding-bottom: 30px;}
	
	.about-section-3 > div:nth-of-type(1) { width: 100%; }
	.about-section-3 > div:nth-of-type(2) { width: 100%; padding-left: 0%; padding-top: 30px; }
	
	.products-detail-top > div { width: 100%; }
	.products-detail-top > div:nth-of-type(1) {  position: relative; top: auto; padding: 0 0 25px 0;}
	.products-detail-top > div:nth-of-type(2) {  padding: 0;}
	
	.p-detail-tab-top { display: none;}
    
    .pro-list-pto-over, .pro-list > div:hover .pro-list-pto-over {display: none!important;}
	
	.recommend-list-section > div > div:nth-of-type(1) { width: 100%; padding-bottom: 20px;}
	.recommend-list-section > div > div:nth-of-type(2) { width: 100%; padding-left: 0;}
	.recommend-list-section > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.recommend-list-section > div:nth-child(even) > div:nth-of-type(2) { order: 2;padding-right: 0;}
	
	.blog-section > div:nth-of-type(1) { width: 100%; order: 2;}
	.blog-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0; order: 1;}
	.blog-list-content { align-items: flex-start;}
	
	.odm-content-1 > div:nth-of-type(1) { width: 100%; }
	.odm-content-1 > div:nth-of-type(2) { width: 100%;}
	.odm-content-1-data > div:nth-of-type(1) { width: 80px; height: 80px;  padding: 14px;}
	.odm-content-1-data > div:nth-of-type(2) { width: calc(100% - 80px); padding-left: 20px; }
	
	.odm-section-3-list > div { width: calc(33.33% - 15px); } 
	.odm-section-3-list-arrow { right: -15px; width: 30px;} 
	
	.odm-section-4-content > div { width: calc((100% - 24px) / 3);}
	
	.odm-section-5-content > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-bottom: 30px; text-align: center;}
	.odm-section-5-content > div:nth-of-type(2) { width: 100%; }
	
	.news-content { border-radius: 15px; padding: 10px;}
	.news-content > div:nth-of-type(1) { width: 100%;}
	.news-content > div:nth-of-type(1) img { border-radius: 10px;}
	.news-content > div:nth-of-type(2) { width: 100%; padding:20px 0;}
}
@media only screen and (max-width: 768px) {
	.odm-content-2 { padding-left: 5%; padding-right: 5%;}
	.odm-content-2 > div { width: 100%; padding-bottom: 30px; }
	
}
@media only screen and (max-width: 640px) {
	.pro-list > div { width: 100%;}
	
	.products-add-list > div:nth-of-type(2) {  width: 70px;}
	.products-add-list > div:nth-of-type(3) {  width: calc(100% - 30px - 70px);}
	.products-add-list > div:nth-of-type(4) { width: 100%; padding-left: 110px; margin-bottom: 10px; margin-top: 10px;}
	.products-add-list > div:nth-of-type(4) select { max-width: 88%;}
	.p-add-name { white-space: inherit;}
	
	.pro-detail-cash-0 { padding-left: 15px;}
	
	.odm-section-3-list { margin-right: -5px; } 
	.odm-section-3-list > div { width: calc(50% - 5px); margin-right: 5px; margin-bottom: 5px; padding-bottom: 50px; } 
	.odm-section-3-list-arrow { right: 0px; top:90%; } 
	
	.layout-33 {  padding-bottom: 8px;}
	.layout-33 > div { width: 100%; padding-right: 0px; border-bottom: 1px solid #dfdfdf; padding-top: 8px;}
}
@media only screen and (max-width: 570px) {
	.pro-spec-select > div { width: 100%; margin-bottom: 15px;}
	
	.blog-list-content > div:nth-of-type(1) { width: 100%; margin-bottom: 15px;}
	.blog-list-content > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.odm-section-4-content > div { width: calc((100% - 8px) / 2);}
}

@media only screen and (max-width: 414px) {
	.p-detail-btn > a { width: 100%; }
	
	.odm-section-3-list { margin-right: 0; } 
	.odm-section-3-list > div { width: 100%; margin-right: 0; } 
	.odm-section-3-list-arrow { right: 0px; top:100%; left: 50%; transform: translate(calc(50% - 30px), -50%) rotate(90deg);} 
}

@media only screen and (max-width: 320px) {
	.btn-tool { flex-direction: column; align-items: center;}
	.btn-tool > a { padding-bottom: 15px;}
	.btn-tool > a:last-child { padding-bottom: 0;}
	
}