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

#content { font-size: clamp(17px, 1vw, 18px); line-height:1.7; color: #333; letter-spacing: 0rem; font-weight: 400; padding-top: 75px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: clamp(17px, 1vw, 18px);line-height:1.7;  font-weight: 400;}
p, td, li, label { font-size: clamp(17px, 1vw, 18px);line-height:1.7;  font-weight: 400;}

.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%;}

/*brand*/
.banner-type-1 {  padding: calc(20px + 1%) 5%; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
.banner-type-1 h1 { font-size: 18px;  margin: 0; padding: 0; letter-spacing: 0; line-height: 1.2; font-weight: 300; color: #000;}

#path { padding: 12px 10% 6px 10%;}
#path ul { margin: 0; padding: 0; }
#path li { display: inline-block; vertical-align: top; font-size: 15px; line-height: 1.2; }
#path li:after { content:"|"; display: inline-block; vertical-align: top; padding: 0 4px 0 10px; color: #888888; line-height: 1;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #888888; }
#path li a:hover { color: #888888; opacity: 0.6;}
#path li:last-child a { color: #888888;}

.brand-type-1 { margin-bottom: 10px; overflow: hidden; display: block;}
.brand-type-2, .brand-type-3 { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.brand-type-2 > a { display: block; width: calc(50% - 5px);overflow: hidden;margin-bottom: 10px; }
.brand-type-3 > a { display: block; width: calc(33.33% - 6.66px);overflow: hidden; margin-bottom: 0px;}

.brand-pto img { transition: all 1.4s ease-out 0s; width: 100%;}
.brand-pto:hover img { transform: scale(1.1);}
.brand-pto img:nth-of-type(1) { }
.brand-pto img:nth-of-type(2) { display: none;}

/*brand-list*/
.seo-h1 { padding: 0; margin: 0; line-height: 1.5; letter-spacing: 0; font-size: clamp(17px, 1vw, 20px); font-weight: 400; display: inline-block;}
.banner-type-2 { position: relative; }
.banner-type-2 .brand-pto:hover img { transform: scale(1);} 

.brand-list-section-1 { padding:40px 10%;}

.loop { position: relative; margin-bottom: 25px;}
.loop .owl-dots { display: none;}
.loop .owl-item {position: relative; }
.loop .owl-item:nth-child(even) .idx-pro-data { background: #07517d;}
.loop .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 50px !important; height: 50px !important; border-radius: 100% !important; background: rgba(255,255,255,0) !important; border: 0px solid #fff !important;}
.loop .owl-prev { left:-80px; }
.loop .owl-next { right:-80px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 30px; height: 30px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #808080;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: 20px; }
.loop .owl-next:before { content: ""; transform: rotate(45deg); margin-left: 0px;}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom:40%; right: calc(10px + 2%); width: 10px; text-align: right !important; padding: 0 0px; }
.loop .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 6px;  margin-right: 6px; border-radius: 100%;}
.loop .owl-dots .owl-dot.active {  }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #d3d3d3 !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; display: block; border-radius: 100%;}
.loop .owl-dots .owl-dot.active span/*, .loop  .owl-dots .owl-dot:hover span*/ {  background: #9cc93a !important;}


.brand-list-section-2 { padding:calc(30px + 2%) 10%; }

.title01 { color: #e6571e; font-weight: 500; position: relative; padding-bottom: 30px;font-size: clamp(19px, 1.2vw, 24px); padding-left: 18px; }
.title01:before { content: ""; position: absolute; width: 7px; height: 7px; background: #e6571e; left: 0; top:14px; }

.brand-list-pro { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 15px; padding-top: 20px;}
.brand-list-pro > div { width: calc(50% - 6px); margin-bottom: calc(20px + 2%); border: 0px solid #4d4d4d;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.brand-list-pro > div:hover .brand-list-pro-pto img { transform: scale(1.3); }
.brand-list-pro > div > div:nth-of-type(1) { width: 60%; padding: 0px 5%;}
.brand-list-pro > div > div:nth-of-type(2) { width: 40%; padding-right: 5%;}
.brand-list-pro-pto { padding-bottom: 83%; display: block;}
.brand-list-pro-pto img { transition: all 2s ease-in-out 0s ;}
.brand-list-pro-title { display: block; font-weight: 400;font-size: 15px; line-height: 1.4; padding-bottom: 20px;}
.brand-list-pro-btn { display: block; width: 118px; line-height: 36px; text-align: center; padding: 0 10px; background: #dedede; font-size: 16px; font-weight: 300;}
.brand-list-pro-btn:hover {  background: #ff5725; color: #fff;}

#page { text-align: center; padding:0px 0 0px 0;}
#page a { font-size: 23px; color: #000; font-weight: 400; width: 40px; height: 40px; line-height: 38px; text-align: center;  display: inline-block; margin: 0 6px 10px 6px; position: relative;}
#page a:hover:after, #page a.current:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 1px; background: #000;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #898989; border-right: 1px solid #898989; margin: 0 15px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}



.loop2 { position: relative; padding: 0 0px;}
.loop2 .owl-dots { display: none;}
.loop2 .owl-item {position: relative; }
.loop2 .owl-item:nth-child(even) .idx-pro-data { background: #07517d;}
.loop2 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 50px !important; height: 50px !important; border-radius: 100% !important; background: rgba(255,255,255,0) !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:-20px; }
.loop2 .owl-next { right:-20px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 30px; height: 30px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #808080;}
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: 20px; }
.loop2 .owl-next:before { content: ""; transform: rotate(45deg); margin-left: 0px;}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom:40%; right: calc(10px + 2%); width: 10px; text-align: right !important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 6px;  margin-right: 6px; border-radius: 100%;}
.loop2 .owl-dots .owl-dot.active {  }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #d3d3d3 !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; display: block; border-radius: 100%;}
.loop2 .owl-dots .owl-dot.active span/*, .loop2  .owl-dots .owl-dot:hover span*/ {  background: #9cc93a !important;}

.agent-list-section {  padding:1% 5% calc(20px + 3%) 5%; }
.agent-pto { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; height: 100px; }
.agent-pto img { width: auto !important;}


/*brand-detail*/
.banner-type-3 { padding: calc(20px + 1%) 5%; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}

.brand-path { background: #fff !important;}
.brand-path li:after { color: #888888 !important;}
.brand-path li a { color: #888888 !important; }
.brand-path li a:hover { color: #888888 !important;}
.brand-path li:last-child a { color: #888888 !important;}

.brand-detail-section { padding:calc(10px + 1.5%) 10% calc(20px + 2.5%) 10%;}

.brand-detail-top { padding-bottom: calc(20px + 2%); display: flex ;flex-direction: row; flex-wrap: wrap; align-items: center;}
.brand-detail-top > div { width: 50%;}
.brand-detail-top > div:nth-of-type(1) { padding-left: 45px; padding-right: 45px;}
.brand-detail-top > div:nth-of-type(2) { padding-left: 5%;}

.pro-s { position: relative;}

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

    .swiper-slide img {
      display: block;
      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 {
      height: 80%;
      width: 100%; margin-bottom: 25px;
    }

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

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 1; background: #fff; border: 0px solid #9f9f9f;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;border: 1px solid #9f9f9f;
    }
	.mySwiper .swiper-pagination { bottom: 0px !important;}
	.mySwiper .swiper-pagination-bullet { background: #d9d9d9 !important; opacity: 1 !important;}
	.mySwiper .swiper-pagination-bullet-active { background: #4686b9 !important;}
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.swiper-next, .swiper-prev { width: 26px !important; height: 26px !important; border-radius: 100%; background: transparent; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:calc(50% - 12px);}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 15px; height: 15px ; border-width: 2px 2px 0 0; border-color: #9f9f9f; border-style: solid;}
.swiper-prev:after { transform: rotate(-135deg);}
.swiper-next:after { transform: rotate(45deg);}
.swiper-prev { left: -35px;}
.swiper-next { right: -35px;}
.swiper-button-disabled { opacity: 0.3;}

.brand-detail-title { font-size: clamp(24px, 2vw, 36px);  color: #ff5725; padding: 0 0 20px 0; margin: 0; line-height: 1.3; letter-spacing: 0; font-weight: 400;}

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

.spec-type-1 { border-spacing: 0; border-collapse: inherit; max-width: 830px; margin: 0 auto;}
.spec-type-1 th, .spec-type-1 td { font-size: clamp(17px, 1vw, 20px); color: #000; border-bottom: 1px solid #9f9f9f; line-height: 1.7; padding:10px 15px; font-weight: 400;}
.spec-type-1 th {  border-right: 2px solid #9f9f9f; text-align: right;}
.spec-type-1 td {  text-align: left;}

.align-center { text-align: center !important;}
.border-right { border-right: 1px solid #9f9f9f !important;}

.brand-detail-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
.brand-detail-btn-box > div { padding: 0 1vw 10px 1vw;}
.brand-detail-btn-box > div:nth-of-type(1) { display: flex; flex-direction: row; flex-wrap: wrap;}
.brand-detail-btn-box > div:nth-of-type(1) > div { padding-right: 25px; font-size: clamp(17px, 1vw, 24px);}
.brand-detail-btn-box > div:nth-of-type(1) > div:last-child { padding-right: 0px; }
.brand-detail-btn-box > div:nth-of-type(1) > div > a { color: #9f9f9f; display: inline-block;}
.brand-detail-btn-box > div:nth-of-type(1) > div > a:hover { color: #000;}
.brand-detail-btn-box > div:nth-of-type(1) > div > a:hover:before, .brand-detail-btn-box > div:nth-of-type(1) > div > a:hover:after { background: #000;}

.btn-prev, .btn-next { position: relative;}
.btn-prev:before { content: ""; display: inline-block; width: 8px; height: 14px; position: relative; background: #9f9f9f; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); margin-right: 10px;}
.btn-next:after { content: ""; display: inline-block; width: 8px; height: 14px; position: relative; background: #9f9f9f; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); margin-left: 10px;}

.btn-download { color: #9f9f9f;font-size: clamp(17px, 1vw, 24px); position: relative; top:2px;}
.btn-download:hover { color: #000; }
.btn-download img { display: inline-block; max-width:35px; margin-left: 10px; }

.data-type-1 { display: flex; flex-direction: row; flex-wrap: nowrap; }
.data-type-1 > div:nth-of-type(1) { white-space: nowrap;}
.data-type-1 > div:nth-of-type(2) { width: 100%;}

/*store*/
.banner-type-4 { height: 240px; position: relative;}
.banner-type-4 img { object-fit: cover; width: 100%; height: 100%;}
.banner-type-4 img:nth-of-type(2) { display: none;}
.banner-type-4-content { position: absolute; z-index: 3; width: 100%; top:50%; transform: translateY(-50%); text-align: center; padding: 0 5%; display: flex; flex-direction: column; flex-wrap: nowrap; color: #fff;}
.banner-type-4-content > h1 { font-size: clamp(22px, 1.5vw, 30px); padding: 0; margin: 0; line-height: 1.2; font-weight: 400;}
.banner-type-4-content > div { line-height: 1.6; font-weight: 400; padding-top: 20px;}

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

.store-box { max-width: 1200px; margin: 0 auto; padding-top: calc(10px + 2%);}

.store-title { position: relative; margin-bottom: calc(10px + 2.5%);}
.store-title span { display: inline-block; background: #fff; padding-right: 38px; color: #ff5725; position: relative; z-index: 3;}
.store-title:after { position: absolute; content: ""; width: 100%; height: 1px; background: #ff5725; left: 0; top:50%;}

.select-type-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(10px + 2%); }
.select-type-1 > div { width: 20%; padding-bottom: calc(10px + 2%); padding-right: 10px;}

.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 25px; padding-right: 15px; 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;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 5px;left: 0;height: 15px;width: 15px;background-color: #fff; border: 1px solid #000; border-radius: 0px;}
.contact-note2:hover input ~ .checkmark {background-color: #fff;}
.contact-note2 input:checked ~ .checkmark {background-color: #ff5725; border-color:#ff5725; }
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 4px;top: 1px;width: 5px;height: 10px;border: solid white;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

.select-type-2 { }
.select-type-2 > div { width: 25%; }

.btn-type { display: block; margin: 0 auto calc(20px + 2%) auto; width: 102px; line-height: 36px; color: #fff !important; background: #ff5725; text-align: center; border-width: 0;}
.btn-type:hover { transform: scale(0.9);}

.store-result { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(10px + 2%); margin-right: -40px; overflow: hidden;}
.store-result > div { width: calc(33.33% - 40px); margin-right: 40px; margin-bottom: 45px; border-bottom: 1px solid #808080; display: flex; flex-direction: column; flex-wrap: nowrap;}
.store-result > div > div { padding-bottom: 20px; line-height: 1.3;}
.store-result > div > div img { width: 44px;}

/*contact*/
.contact-section { max-width: 970px; margin: 0 auto calc(20px + 2%) auto;}

.contact-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-1 > div { width: calc(50% - 14px); padding-bottom: calc(10px + 1%);}

.contact-form-list {  display: flex; flex-direction: column; flex-wrap: nowrap;padding-bottom: calc(10px + 1%); }
.contact-form-list > div:nth-of-type(1) { width: 100%; padding: 3px 0px;  position: relative; line-height: 170%; }
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}

.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(17px, 1vw, 20px);; border-width:1px; border-style: solid; border-color: #9f9f9f; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 45px; border-radius: 0px; }
.contact-form textarea { height:115px; padding:15px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 160px; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 15px) 18px; background-size: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: clamp(17px, 1vw, 20px);; border-width:1px; border-style: solid; border-color: #9f9f9f; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 40px; border-radius: 0px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.color-red { color: #ff0000;}


@media only screen and (max-width: 1279px) {
    #content { padding-top: 60px; }
    #content p{ }
    p, td, li, label { }
	
	#path { padding: 12px 5% 6px 5%;}
	
	.seo-h1 { }
	
	.brand-list-section-1 { padding:25px 5%;}
	
	.loop .owl-prev:before, .loop .owl-next:before { width: 20px; height: 20px; }
	.loop .owl-prev { left:-50px; }
	.loop .owl-next { right:-50px;}
	.loop .owl-next:before { margin-left: 10px;}
	
	.title01 { padding-bottom: 20px;}
	.brand-list-section-2 { padding:calc(20px + 1%) 5%; }
	
	.brand-detail-section { padding:calc(10px + 1.5%) 5% calc(20px + 2.5%) 5%;}
}

@media only screen and (max-width: 980px) {
	.brand-pto img:nth-of-type(1) { display: none;}
	.brand-pto img:nth-of-type(2) { display: block;}

	.brand-type-2 > a { width: calc(100% - 0px);}
	.brand-type-3 > a { width: calc(100% - 0px); margin-bottom: 10px;}
	.brand-type-3 > a:last-child { margin-bottom: 10px;}
	
	.brand-list-pro > div { width: calc(100% - 0px); }
	
	.brand-detail-top > div { width: 100%;}
	.brand-detail-top > div:nth-of-type(1) { padding-left: 20px; padding-right: 20px; margin-bottom: 25px;}
	.brand-detail-top > div:nth-of-type(2) { padding-left:  0%;}

	.store-result > div { width: calc(50% - 40px); }
	
	.banner-type-4 img:nth-of-type(1) { display: none;}
	.banner-type-4 img:nth-of-type(2) { display: block;}
}
@media only screen and (max-width: 768px) {
	.select-type-1 > div { width: 33.33%; }
	
	.contact-layout-1 > div { width: calc(100% - 0px);}
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	.loop .owl-prev:before, .loop .owl-next:before { width: 10px; height: 10px; }
	.loop .owl-prev { left:-35px; }
	.loop .owl-next { right:-35px;}
	.loop .owl-next:before { margin-left: 20px;}
	
	.brand-list-pro > div > div:nth-of-type(1) { width: 100%; }
	.brand-list-pro > div > div:nth-of-type(2) { width: 100%; padding:0 5% 20px 5%; text-align: center;}
	.brand-list-pro-btn { margin: 0 auto;}
	
	.data-type-1 { flex-direction: column; }
	.data-type-1 > div:nth-of-type(1) { white-space:normal;}
	
	.store-result > div { width: calc(100% - 40px); margin-bottom: 20px;}
	
	.loop2 { position: relative; padding: 0 30px;}
}

@media only screen and (max-width: 414px) {
	.swiper-prev { left: -25px;}
	.swiper-next { right: -25px;}
	
	.select-type-1 > div { width: 50%; }
	
	.select-type-2 > div { width: 100%; }
	
	.banner-type-4 { height: 192px;}
}

@media only screen and (max-width: 320px) {
	.brand-detail-btn-box > div:nth-of-type(1) > div { padding-right: 10px; }
	
}