/* 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:1200px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 17px; line-height:1.8; color: #444; letter-spacing: 0.05rem; font-weight: 400; padding-top: 170px;}

.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-18 { font-size: 18px;}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-28 { font-size: clamp(20px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-32 { font-size: clamp(22px, 2.7vw, 32px);}
.font-size-36 { font-size: clamp(22px, 3.1vw, 36px);}
.font-size-40 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(24px, 3.5vw, 42px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-50 { font-size: clamp(24px, 3.5vw, 50px); line-height: 1.3;}
.font-size-100 { font-size: clamp(30px, 7vw, 100px); line-height: 1;}

.title01 { padding-bottom: 20px;}
.title01 > span { display: block; position: relative; margin-bottom: 16px; line-height: 1.1; padding-left: 55px; color: #222;}
.title01 > span:before { content: ""; position:absolute; background: #222; width: 40px; height: 2px; left: 0; top:50%; transform: translateY(-50%);}
.title01 > div, .title01 > h1 { font-weight: 700; color: #009dc4; margin: 0; padding: 0;}

.btn01 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; transition: all 0.8s ease 0.8s; }
.btn01 > div:nth-of-type(1) { margin-right: 24px; width: 80px; height: 80px; border-radius: 100%; background: #009dc4; position: relative;transition: all 0.4s ease-out 0s; overflow: hidden;}
.btn01 > div:nth-of-type(1):before { content: ""; position: absolute; width:11px; height: 23px; background: #fff;clip-path: polygon(0% 0, 100% 50%, 0% 100%); top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.btn01 > div:nth-of-type(1):after { content: ""; position: absolute; width:100%; height: 100%; background: #009a70;top:50%; left: 50%; transform: translate(-50%, -50%) scale(0);transition: all 0.3s ease-out 0s; border-radius: 100%; }
.btn01:hover > div:nth-of-type(1):after { transform: translate(-50%, -50%) scale(1);}
.btn01 > div:nth-of-type(2) { font-weight: 700;  line-height: 1;}

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

/*about*/
.about-box { position: relative;}
.about-box:before { position: absolute; content: ""; background: #f4f4f4; z-index: -1; left: 0; top:355px; width: 100%; height: 405px; transform: skewY(18deg); transform-origin: 0 0;}
.about-box:after { position: absolute; content: ""; background: #f4f4f4; z-index: -1; left: 0; top:696px; width: 100%; height: 405px; transform: skewY(-18deg); transform-origin: 0 0;}

.about-section-1 { padding-top: calc(20px + 4%); padding-bottom: calc(20px + 4%); padding-left: 10%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.about-section-1 > div:nth-of-type(1) { width: 35%;}
.about-section-1 > div:nth-of-type(1) .title02 { padding-bottom: 5px;}
.about-section-1 > div:nth-of-type(1) p { padding:0 0 calc(20px + 1%) 0; margin: 0; font-size: 17px; line-height:1.8; color: #444; letter-spacing: 0.05rem; font-weight: 400; }
.about-section-1 > div:nth-of-type(2) { width: 65%; padding: 0 5%;}

.title02 { padding-bottom: calc(20px + 1%);}
.title02 > span { display: block; line-height: 1; color: #222; padding-bottom: 12px;}
.title02 > h1, .title02 > div { padding: 0; margin: 0; color: #009dc4; font-weight: 700;}

.about-section-2 { margin-bottom: calc(20px + 2%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: hidden;}
.about-section-2 > div { width: 50%;}
.about-section-2 > div:nth-of-type(1) { padding: 0 5%; }
.about-section-2 > div:nth-of-type(1) img { display: block; position: relative; }
.about-section-2 > div:nth-of-type(2) { padding: 0 5% 0 2%; line-height: 2.2;}

#path { padding: 0 10%; margin: 20px 0 10px 0;}
#path ul { margin: 0; padding: 0 0; ;line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 17px; font-weight: 400;}
#path li:after { content:""; display: inline-block; vertical-align: middle; margin: 0 4px; padding-top: 2px; width: 5px; height: 5px; border-radius: 100%; background: #009dc4; transform: translateY(-2px);}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: rgba(68,68,68,.5);}
#path li a:hover { color: rgba(68,68,68,1);}
#path li:last-child a { color: rgba(68,68,68,1);;}

/*products*/
.products-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -28px; padding-bottom: 20px; padding-left: 5%; padding-right: 5%;}
.products-list > a { width: calc(33.33% - 28px); margin: 0 28px 0 0; padding-bottom: calc(20px + 2%);}
.products-list > a:hover .products-list-top { box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3);}
.products-list > a:hover .products-list-top-number-1 { left: -200px;}
.products-list > a:hover .products-list-top-number-2 { right: 20px;}
.products-list > a:hover .products-list-top-pto { bottom: -50px; right: -50px;}
.products-list-top { border-radius: 15px; background: #e1e1e1; overflow: hidden;transition: all 0.4s ease-out 0s; position: relative;  margin-bottom: 20px; padding-bottom: 117%;}
.products-list-top-number-1 { color: #fff; font-weight: 900; transition: all 0.4s ease-out 0s; top:22px; left: 20px; position: absolute; z-index: 3;}
.products-list-top-number-2 { color: #009dc4; font-weight: 900; transition: all 0.4s ease-out 0s; top:22px; right: -200px; position: absolute; z-index: 3;}
.products-list-top-pto { position: absolute; bottom: -45%; right: -45%;transition: all 0.4s ease-out 0s; mix-blend-mode: multiply;}
.products-list-name { color: #222; font-weight: 700; line-height: 1.2; padding-bottom: 4px;}
.products-list-cash { color: #222;}
.products-list-cash span.old-price { font-size: 18px;color: #222; font-weight: normal;text-decoration: line-through}
.products-list-cash span { color: #009dc4; font-weight: 700;}

/*products-detail*/
.products-detail-top-box { padding: 0 10% calc(20px + 4%) 10%;}
.products-detail-top { position: relative; padding-top: calc(20px + 2%);  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.products-detail-top > div { width: 50%;}
.products-detail-top > div:nth-of-type(1) { padding: 0 30px;}
.products-detail-top > div:nth-of-type(2) { padding-right: 10%; padding-left: 2%;}
.products-detail-top > div:nth-of-type(2) h1 { color: #222; padding:0 0 5px 0; margin: 0; font-weight: 700;}
.products-detail-top > div:nth-of-type(2) li { font-size: 17px; line-height:1.8; color: #444; letter-spacing: 0.05rem; font-weight: 400;}
.products-detail-top:after { position: absolute; content: ""; width: 75%; height: 100%; top: 0; right: 0; background: #f1f1f1;clip-path: polygon(0% 0, 100% 0%, 100% 100%, 290px 100%); z-index:-1;}

.products-detail-tool { position: relative;}
   .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: inline-block;
      max-width: 600px; width: 100%;
      /*height: 100%;
      object-fit: cover;*/
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center; padding: 0 5px;
    }

    .mySwiper2 { mix-blend-mode: multiply;
      height: 100%;
      width: 100%; 
    }

    .mySwiper {
      height: auto;
      box-sizing: border-box;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

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

.swiper-next, .swiper-prev { width: 26px !important; height: 26px !important; border-radius: 100%; background: #fff; 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: 1px solid #362e2b;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 6px; height: 6px ; border-width: 1px 1px 0 0; border-color: #362e2b; border-style: solid;}
.swiper-prev:after { transform: rotate(-135deg); margin-left: 3px;}
.swiper-next:after { transform: rotate(45deg); margin-right: 3px;}
.swiper-prev { left: 0px;}
.swiper-next { right: 0px;}

.share-tool { margin-bottom: 25px;}

.pro-cash {padding-bottom: calc(15px + 1%); color: #222;}
.pro-cash span { font-weight: 700; color: #009dc4; display: inline-block; margin-left: 10px;}
.pro-cash.old-price {color: #7a7a7a;text-decoration: line-through}

.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;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 3px;left: 0;height: 25px;width: 25px;background-color: transparent; border: 1px solid #989898; }
.contact-note2:hover input ~ .checkmark {background-color: transparent;}
.contact-note2 input:checked ~ .checkmark {background: #009dc4}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 5px;top: 6px;width: 13px;height: 7px; border-width: 0 0 2px 2px; border-style: solid; border-color:#fff; transform: rotate(-45deg);}

.p-detail-select {padding-bottom: calc(20px + 2%);}

.products-detail-bottom-number { border: 1px solid #222222; width: 250px; height: 58px; border-radius: 29px; overflow: hidden; display: flex; flex-direction: row; flex-wrap: nowrap; line-height: 1; letter-spacing: 0; }
.products-detail-bottom-number > div:nth-of-type(1) {  background: #222; width: 85px; line-height: 55px; border-radius: 28px; text-align: center; color: #fff;font-size: clamp(19px, 1.1vw, 23px);}
.products-detail-bottom-number > div:nth-of-type(2) {  width: calc(100% - 85px); padding: 0px 17px 0 17px;}

#cms-amount-panel .cms-amount-value { margin-bottom: 15px;
    border: 0px solid #999;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 130px;
    height: 30px;
    font-size: clamp(22px, 1.5vw, 26px); 
    
}
#cms-amount-less {
    width: 30px;
    border: 0;
    border-right: 0px solid #999;
    line-height: 36px;
    display: block;
    text-align: center;
    background: none;
    cursor: pointer;
    outline: 0;color: #222;
}
#cms-amount-more {
    width: 30px;
    border: 0;
    border-left: 0px solid #999;
    line-height: 36px;
    display: block;
    text-align: center;
    background: none;
    cursor: pointer;
    outline: 0;color: #222;
}
#cms-amount-value {
    display: block;
    width: calc(100% - 72px);
    text-align: center;
    background: none;
    border-width: 0;
    font-size: clamp(19px, 1.1vw, 22px);font-weight: 500; color: #222;
    height: 38px;
    line-height: 38px;
    outline: 0;
    padding: 0;
}
#cms-amount-value:disabled {
    color: lightgrey;
}


.p-detail-btn { margin-top: 30px; margin-bottom: 30px; 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 #333333; padding: 10px; margin-bottom: 10px; border-radius: 30px; height: 60px;}
.p-detail-btn > a:hover { background: #333;}
.p-detail-btn > a:hover > img { filter:brightness(0) invert(1);}
.p-detail-btn > a:hover > span { color: #fff;}
.p-detail-btn > a > img { width: 30px;}
.p-detail-btn > a > span { display: inline-block; margin-left: 10px;}

.p-detail-bottom-section { padding-bottom: calc(20px + 4%);}
.p-detail-title-2 { margin-bottom: calc(20px + 1%); position: relative;}
.p-detail-title-2:after { content: ""; position: absolute; width: 100%; height: 1px; background: #222; left: 0; top:50%; transform: translateY(-50%); z-index: -1;}
.p-detail-title-2 span { display: inline-block; padding-right: 18px; background: #fff; line-height: 1; font-weight: 700;}

.p-detail-spec { width: 100%; border-spacing: 0; border-collapse: inherit; margin-bottom: calc(20px + 2%);}
.p-detail-spec li { font-size: clamp(20px, 1.7vw, 22px); line-height:1.8; color: #444; letter-spacing: 0.05rem; font-weight: 400;}
.p-detail-spec th { text-align: left; padding: 20px 30px; color: #222; font-weight: 700; border-bottom: 1px solid #bcbcbc; font-size: clamp(20px, 1.7vw, 22px);}
.p-detail-spec td { text-align: left; padding: 20px; border-bottom: 1px solid #bcbcbc; font-size: clamp(20px, 1.7vw, 22px);}

.p-detail-spec-title-1 { width: 180px; text-align: center; padding:20px calc(15px + 1.5%); color: #fff; background: #009dc4; line-height:1; border-radius: 30px; font-weight: 700; display: inline-block;}
.p-detail-spec-title-2 { width: 180px; text-align: center; padding:20px calc(15px + 1.5%); color: #333; border: 1px solid #333;; line-height:1; border-radius: 30px; font-weight: 700; display: inline-block;}

.bg-gray { background: #f1f1f1;}

.btn-back { width: 250px; display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 1px solid #333333; padding: 10px; margin-bottom: 10px; border-radius: 30px; height: 60px; margin: 0 auto; background: transparent;transition: all 0.4s ease-out 0s; }
.btn-back:hover { background: #333;}
.btn-back:hover > img { filter:brightness(0) invert(1);}
.btn-back:hover > span { color: #fff;}
.btn-back > img { width: 30px;}
.btn-back > span { display: inline-block; margin-left: 10px;}


/*news*/
.news-section {padding: 0 10% calc(20px + 4%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.news-section > div:nth-of-type(1) {width: 270px;}
.news-section > div:nth-of-type(2) {width: 65%; padding-top: calc(20px + 2%);}

.news-list { padding: 0 0 calc(20px + 2%) 20px; margin-bottom:calc(20px + 2%); border-bottom: 1px solid #bcbcbc;}
.news-list-top { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: calc(5px + 1%);}
.news-list-top > div { margin-bottom: 10px;}
.news-tag { width: 160px; line-height: 30px; text-align: center; background: #009dc4; color: #fff; border-radius: 15px; font-size: 18px;}
.news-date { color: #222; font-size: 16px;}
.news-title {display:block; font-weight: 700; color: #222; }
.news-title:hover {color: #009dc4; }

#page { text-align: center; padding:0 0 calc(10px + 1%) 0;}
#page a { font-size: 16px; color: #333; font-weight: 400; width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 100%; display: inline-block;}
#page a:hover, #page a.current { background: #362e2b; 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 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*qa*/
.qa-list-section { padding:0 10% calc(15px + 4%) 10%;}

/*contact*/
.contact-section { padding:0 10% calc(15px + 3%) 10%; display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-section > div:nth-of-type(1) { width: 40%;}
.contact-section > div:nth-of-type(2) { width: 60%; padding: 0 5%;}

.contact-desc-title { font-weight: 500; padding-bottom: 20px; color: #362e2b;}
.contact-desc-data { padding-bottom: 35px;}
.contact-title-1 { position: relative; margin-bottom: 25px; font-weight: 500;}
.contact-title-1:after { position: absolute; content: ""; left: 0; bottom: 0; background: #362e2b; width: 30px; height: 3px; }

.contact-list { background: #f3f3f3; padding: 16px 20px; margin-bottom: 25px;}

.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: clamp(20px, 1.7vw, 22px); border-width:0px; border-style: solid; border-color: #d0d0d0; margin: 0px 0 0px 0; width: 100%; padding:0px 0px ; color:#362e2b; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 1.3; border-radius: 0px; letter-spacing: 0.05rem; font-weight: 400; }
.contact-form textarea { height:100px; padding: 0; resize:none; line-height: 1.7;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; background-image: url("/images/theme-c67/select-arrow.png"); background-repeat: no-repeat; background-position: calc(100% - 16px) calc(50% - 0px); -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; border-width:0px; border-style: solid; border-color: #d0d0d0; color:#362e2b; font-family: 'Noto Sans TC', sans-serif;  padding:0px 55px 0px 0px;  line-height: 1.5; border-radius: 0px; letter-spacing: 0.05rem; font-size: clamp(20px, 1.7vw, 22px);}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}
.contact-form ::placeholder {opacity: 1; color: #362e2b;}

.contact-btn { background: #362e2b; width: 100px; line-height: 55px; text-align: center; color: #fff; border-width: 0; font-size: 16px;transition: all 0.2s ease-out 0s;}
.contact-btn:hover { width: 120px;}

.help-red{color: red;font-size: 13px;}
.help-black{font-size: 13px;}
.help-block{color: red;}
#m-paper-file{max-width: 210px;}
@media only screen and (max-width: 1365px) {
    #content { padding-top: 60px; font-size: 16px;}
	

	
}
@media only screen and (max-width: 1279px) {
	#path { padding: 0 5%; }
	
	.products-detail-top-box { padding: 0 5% calc(20px + 4%) 5%;}
	.products-detail-top > div { width: 100%;}
	.products-detail-top > div:nth-of-type(2) { padding-right: 0%; padding-left: 0%;}
	.products-detail-top:after { display: none;}

	.news-section {padding: 0 5% calc(20px + 4%); }
	.news-section > div:nth-of-type(1) {width: 100%;}
	.news-section > div:nth-of-type(2) {width: 100%;}
	.news-list { padding-left: 0;}
	
	.qa-list-section { padding:0 5% calc(15px + 4%) 5%;}
	
	.contact-section { padding:0 5% calc(15px + 3%) 5%;}
	.contact-section > div:nth-of-type(1) { display: none;}
	.contact-section > div:nth-of-type(2) { width: 100%; padding: 0 0%;}
}

@media only screen and (max-width: 980px) {
	.btn01 > div:nth-of-type(1) { width: 40px; height: 40px; margin-right: 14px; }
	.btn01 > div:nth-of-type(1):before { width:6px; height: 14px;}
	
	.about-section-1 { padding-left: 5%; padding-right: 5%;}
	.about-section-1 > div:nth-of-type(1) { width: 100%;}
	.about-section-1 > div:nth-of-type(2) { width: 100%; }
	
	.about-section-2 > div { width: 100%;}
	.about-section-2 > div:nth-of-type(1) { order: 2; padding-right: 5%;}
	.about-section-2 > div:nth-of-type(2) { order: 1; padding-bottom: 20px;}
	.about-section-2 > div:nth-of-type(2) { padding: 0 5% 0 4%; line-height: 1.8;}
	
	.products-list { padding-left: 0; padding-right: 0;}
	.products-list > a { width: calc(50% - 28px);}
}
@media only screen and (max-width: 768px) {
	
	
}
@media only screen and (max-width: 640px) {
	.btn-back { width: 200px;}
	
	
}
@media only screen and (max-width: 570px) {
	.products-list { margin-right: 0;}
	.products-list > a { width: calc(100% - 0px); margin-right: 0; }
	
	
}

@media only screen and (max-width: 414px) {
	.p-detail-btn > a { width: 100%;}
}

@media only screen and (max-width: 320px) {
	
	
}