/* GDPR */
.html_hidden {overflow: hidden!important;}
.sel_div {opacity: 0.75!important;}

/* CSS Document */

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

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

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

* { margin:0; padding:0; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

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

#content { font-size: 16px; line-height:26px; color: #333333; letter-spacing: 0.05rem; padding-top: 94px;}
#content p{ margin:0 0 30px 0; font-size: 16px; line-height:26px; }
p, td, li, label { font-size: 16px;line-height:26px;  }

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

.video-box { padding-bottom: 43.1%;}

.banner { position: relative; height: 250px;}
.banner-title { position: absolute; z-index: 3; width: 100%; text-align: center; bottom: 42px; text-shadow: 0px 0px 8px #222;}
.banner-title > span { position: absolute; width: 3px; height: 80px; background: #e89115; bottom: -100px; left: calc(50% - 1px); animation-name: banner-line; animation-duration: 2s; transform-origin: 50% 0%; animation-delay:1s;  animation-fill-mode: forwards;transform: scaleY(0);}
.banner-title h1 { font-size: 50px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0; margin: 0; padding: 0; line-height: 110%;}

@keyframes banner-line {
  0%   { transform: scaleY(0); opacity: 0;}
  100% { transform: scaleY(1); opacity: 1;}
}

#path { padding: 25px 5% 40px 5%; }
#path ul { text-align: right; padding: 0; margin: 0;}
#path li { display: inline-block; vertical-align: top; font-size: 16px; margin: 0; padding: 0; color: #333333; line-height: 110%; letter-spacing: 0; }
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333333; }
#path li a:hover { color: #e89115;}
#path li:last-child a { color: #333;}

/*about*/
.about-section-1 { position: relative; padding-left: 5%; padding-top: 65px;}
.about-section-1:after { position: absolute; content: ""; top: 0; left: 0; display: block;background: #ededed; width: 78%; height: 640px; z-index: -1; }

.title01 { color: #e89115; font-size: 50px; font-weight: 700; line-height: 110%; padding-bottom: 14px;}
.title02 { color: #5b7b7f; font-size: 32px; font-weight: 700; line-height: 120%; padding-bottom: 30px;}

.about-section-1-content { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 40px;}
.about-section-1-content > div:nth-of-type(1) { width: 35%;}
.about-section-1-content > div:nth-of-type(2) { width: 60%; padding-top: 30px;}
.about-section-1-content > div:nth-of-type(2) img { width: 100%;}

.about-section-2 { position: relative; padding-left: 5%; padding-right: 5%; padding-bottom: 40px;}
.title03 { color: #5b7b7f; font-size: 22px; font-weight: 700; line-height: 120%; padding-bottom: 7px;}

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

/*history*/
.history-box { background: url("../images/history-bg.png") no-repeat center center ; background-size: 80%;}
.history-section { max-width: 100%; margin: 0 auto 50px auto;}
.history-year {  margin: 15px 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.history-year > span { display: block; width: calc((100% - 100px) / 2); height: 2px; background: #555555;}
.history-year > div { width: 100px; text-align: center; color: #1c2b5e; font-size: 26px; font-weight: 700; line-height: 100%;}
.history-pto { line-height: 0; margin-bottom: 12px;}

.history-list-1 { display: flex; flex-direction: column; flex-wrap: nowrap; position: relative; padding-bottom: 50px;}
.history-list-1:after { position: absolute; content: ""; width: 18px; height: 100%; top: 0; left: calc(50% - 9px); background: #e89115;}
.history-list-1 > div { width: 50%; position: relative; z-index: 3; padding: 20px 55px 0px 55px; font-weight: 500; color: #333; font-size: 20px; line-height: 30px;}
.history-list-1 > div span { display: block; color: #7a7a7a; font-size: 16px;}
.history-list-1 > div:after { position: absolute; z-index: 2; content: ""; width: 24px; height: 24px; border-radius: 100%; border: 2px solid #7a7a7a; top: 51px; background: #fff;}
.history-list-1 > div:before { position: absolute; content: ""; width: 38px; height: 2px; background: #7a7a7a; top: 63px;}
.history-left { text-align: right; margin: 0 auto 0 0;}
.history-left:after { right: -12px;}
.history-left:before { right: 10px;}
.history-right { text-align: left; margin: 0 0 0 auto;}
.history-right:after { left: -12px;}
.history-right:before { left: 10px;}

/*products*/
.products-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.products-list > div { position: relative; padding: 60px 4% 40px 4%; background: linear-gradient(0deg, #d6d6d6 0%, #f6f6f6 100%); width: 50%;}
.products-list > div:nth-child(odd):after { position: absolute; content: ""; top: 0; right: 0; width: 1px; height: 100%; background: #fff; display: block;}
.products-list > div:nth-child(even) .products-list-content > div:nth-of-type(1) { order: 2;}
.products-list > div:nth-child(even) .products-list-content > div:nth-of-type(2) { order: 1;}
.products-list-title { text-align: center; padding-bottom: 35px; font-weight: 700; line-height: 130%; font-size: 26px; color: #5b7b7f;}
.products-list-title span { display: block; font-size: 40px; color: #e89115; padding-bottom: 10px;}
.products-list-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.products-list-content > div:nth-of-type(1) { width: 42%;}
.products-list-content > div:nth-of-type(2) { width: 50%;}
.products-list-pto { padding-bottom: 100%; display: block;}
.list-type-1 { margin: 0 0 25px 0; padding: 0; list-style: none;}
.list-type-1 li { position: relative; padding:0 0 8px 22px; margin: 0;}
.list-type-1 li:before { position: absolute; content: ""; left: 0; top:12px; display: block; width: 10px; height: 2px; background: #e89115;}

.btn02 a { max-width: 280px; width: 100%; line-height: 55px; color: #ffffff !important;text-align: left; padding: 0 0 0 25px; font-size: 18px; display: inline-block; background: #e89115; text-transform: uppercase; position: relative;}
.btn02 a:hover { color: #fff;}
.btn02 a:hover span { right: -15px;}
.btn02 a:hover span:before, .btn02 a:hover span:after { background: #e89115;}
.btn02 a span { display: inline-block; position: absolute; right: 20%; top:55%; width: 23px;transition: all 0.4s ease-out 0s;}
.btn02 a span:before, .btn02 a span:after { content: ""; position: absolute; background: #fff;transition: all 0.4s ease-out 0s;}
.btn02 a span:before { width: 26px; height: 1px; background: #fff; left: 0; bottom: 0px;}
.btn02 a span:after { width: 1px; height: 10px; transform: rotate(135deg); right: 0; top:-9px;}

/*products-list*/
.aside-menu { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; padding-left: 5%; padding-right: 5%;}
.aside-menu > a { margin: 0 5px; display: inline-block; border-radius: 10px 10px 0 0; background: #f6f6f6; line-height: 40px; padding: 0 12px; color: #b1b1b1 !important; font-size: 18px; font-weight: 500; letter-spacing: 0;}
.aside-menu > a:hover, .aside-menu > a.current { background: #e89115; color: #fff !important;}

.products-list-section { background: linear-gradient(0deg, #d6d6d6 0%, #f6f6f6 100%); padding: 40px 5%;}
.products-list-2 { display: flex; flex-direction: row; flex-wrap: wrap; }
.products-list-2 > a { margin: 0 14px 32px 14px; width:calc(33.33% - 28px);}

.new-pro { border: 1px solid #e4e4e4; padding:25px 25px 45px 25px;transition: all 0.4s ease-out 0s; display: block; position: relative; background: #fff;}
.new-pro:hover { border: 2px solid #e89115; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.new-pro:hover .new-pro-btn { background: #e89115;}
.new-pro-pto { padding-bottom: 75%; margin-bottom: 15px;}
.new-pro-name { font-size: 16px; color: #888888; min-height: 70px; line-height: 120%; text-align:left;}
.new-pro-name span { font-size: 24px; color: #333333; display: block; font-weight: 700; padding: 10px 0 0 0;}
.new-pro-btn { position: absolute; bottom: 0px; right: 0px; width: 75px; height: 45px;transition: all 0.4s ease-out 0s; background: #111111; line-height: 45px; clip-path: polygon(0% 18px, 20px 0%, 100% 0%, 100% 100%, 0% 100%); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; transform-origin: 100% 100%;}
.new-pro-btn img { width: 30px !important;}

.page { text-align: center; padding:30px 0 60px 0;}
.page a { font-size: 15px; color: #898989; font-weight: bold; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; display: inline-block;}
.page a:hover, .page a.current { background: #1c2b5e; 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);}

/*seo zone*/
.seo_zone p{font-size: 16px; line-height: 2;margin-bottom: 10px!important;}
.seo_zone a:link, .seo_zone a:visited {text-decoration:underline; color:#F53240; transition: all 0.5s ease 0s;}
.seo_zone a:active, .seo_zone a:hover {text-decoration:underline; color:#222!important; cursor:pointer; transition: all 0.5s ease 0s;}
.seo_zone ul li{list-style: disc;margin-left:25px;margin-bottom: 10px;}
.seo_zone ul, .seo_zone ol {padding:12px 0;}
.seo_zone ol li{list-style: decimal;margin-left:25px;margin-bottom: 10px;}
.seo_zone h2 {font-size: 187.5%; font-weight: 600;  line-height: 2;}
.seo_zone h3 {font-size: 175%; font-weight: 600;  line-height: 2;}
.seo_zone h4 {font-size: 162.5%; font-weight: 600;  line-height: 2;}
.seo_zone h5 {font-size: 150%; font-weight: 600;  line-height: 2;}
.seo_zone h6 {font-size: 137.5%; font-weight: 600;  line-height: 2;}

/*products-detail*/
.products-detail-top-bg { padding: 35px 5% 90px 5%; background: url("../images/p-detail-bg.jpg") no-repeat center bottom; background-size: 100%;}
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap;}
.products-detail-top > div:nth-of-type(1) { width: 65%; padding: 0 8%;}
.products-detail-top > div:nth-of-type(2) { width: 35%;}


.loop4 .owl-dots {}
.loop4 .owl-item {position: relative; }
.loop4 .owl-nav { position: absolute; top:calc(50% - 30px); left: 0; width: 100%; z-index: 11;}
.loop4 .owl-prev, .loop4 .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,.35) !important;*/}
.loop4 .owl-prev { left:30px; }
.loop4 .owl-next { right:30px;}
.loop4 .owl-prev:before, .loop4 .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: 48px; height: 48px; background-size: contain; display: block; border-width: 6px 6px 0 0; border-style: solid; border-color: #fff; position: relative;}
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg);  }
.loop4 .owl-next:before { content: ""; transform: rotate(45deg); }
.loop4 .owl-prev:hover, .loop4 .owl-next:hover { background: none !important;}
.loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { opacity: 0.8;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom:-30px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #e1e1e1 !important; width: 14px !important; height: 14px !important; display: block; border-radius: 100% !important; margin: 0 5px;}
.loop4 .owl-dots .owl-dot.active span, .loop4  .owl-dots .owl-dot:hover span { background: #e89115 !important; }

.social-tool { padding-bottom: 40px;}

.products-detail-title { padding-bottom: 40px; margin-bottom: 40px; position: relative; line-height: 100%; font-weight: 700; color: #e89115; font-size: 60px;}
.products-detail-title:after { content: ""; position: absolute; width: 80px; height: 8px; background: #e89115; display: block; bottom: 0; left: 0;}
.products-detail-title span { display: block; font-size: 36px; line-height:80%; color: #333; opacity: 0.15;}

.btn-download a { width: 180px; line-height: 50px; border-radius: 25px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin-bottom: 30px; background: #2f353b;}
.btn-download img { width: 30px; margin-right: 10px;}
.btn-download font { font-size: 16px; color: #fff;}

.btn-box { display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; padding-top: 10px; border-top:1px solid #000000;}
.btn-box > a { display: inline-block; width: calc(50% - 2px); line-height: 45px; text-align: center; color: #333; font-size: 16px;border: 1px solid #333333; margin-bottom: 4px;}
.btn-inquiry { background: #e89115; color: #fff !important;border: 1px solid #e89115 !important;}

.products-detail-bottom { padding: 50px 5%;}

.btn-back { text-align: center; padding-bottom: 40px; padding-top: 30px;}
.btn-back > a { display: inline-block; width: 185px; line-height: 45px; text-align: center; color: #333333; font-size: 16px; box-shadow: 0px 0px 0px 1px #333333;}

.spec-table { border-spacing: 0px; width: 100%;min-width: 650px;}
.spec-table th, .spec-table td { font-size: 15px; padding: 3px 3%; border-bottom: 1px solid #f5f5f5;}
.spec-table th { font-weight: bold; color: #333; background: #fbb40f; text-align: center;}
.spec-table td { color: #5c6873; background: #fff; text-align: left;font-weight: 400; vertical-align: top;}

.loop3 { padding-bottom: 30px;}
.loop3 .owl-dots {}
.loop3 .owl-item {position: relative; }
.loop3 .owl-nav { position: absolute; top:calc(50% - 30px); left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .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,.35) !important;*/}
.loop3 .owl-prev { left:30px; }
.loop3 .owl-next { right:30px;}
.loop3 .owl-prev:before, .loop3 .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: 48px; height: 48px; background-size: contain; display: block; border-width: 6px 6px 0 0; border-style: solid; border-color: #fff; position: relative;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg);  }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); }
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { background: none !important;}
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 0.8;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom:-30px; width: 100%; text-align: center !important; padding: 0 0px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #e1e1e1 !important; width: 14px !important; height: 14px !important; display: block; border-radius: 100% !important; margin: 0 5px;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #e89115 !important; }

/*news*/
.news-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-between; padding-bottom: 0px;}
.news-list > a { width: 48.5%; margin-bottom: 25px; border: 1px solid #d3d3d3; position: relative; padding: 0 18px;display: flex; flex-direction: row; flex-wrap: nowrap; }
.news-list > a:hover { transform: scale(0.95);}
.news-list > a:before { content: ""; position: absolute; left:-1px; top: 0; width: 2px; height: 100%; border-width: 2px 0 2px 2px; border-style: solid; border-color: #e89115; transform-origin: 100% 50%;transition: all 0.4s ease-out 0s;  }
.news-list > a:after { content: ""; position: absolute; right:-1px; top: 0; width: 100%; height: 100%;border-width: 0 2px 0 0; border-style: solid; border-color: #e89115; transform-origin: 100% 50%; transform: scale(0);transition: all 0.4s ease-out 0s; }
.news-list > a:hover:before { width: 100%;}
.news-list > a:hover:after { transform: scale(1);}
.news-list-pto { line-height: 0; width: 32%; min-height: 153px;display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.news-list-data { width: 68%; padding: 22px 0 22px 22px; font-size: 20px; color: #333; font-weight: 400; word-break: break-word;}
.news-list-data span, .news-date { display: block;font-size: 18px; color: #929292; padding-bottom: 10px;}
.news-date { padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-bottom: 20px;}
.editor{ font-weight: 400; line-height: 180%; }
.editor a { color: #e89115 !important;}

.align-center { text-align: center;}
.news-detail-title { padding-bottom: 10px;}

/*application*/
.application-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.application-list > a { width: 33.33%; padding: 0 22px 55px 22px; display: block;}
.application-pto { padding-bottom: 64%; margin-bottom: 20px;}
.application-name { font-size: 24px; font-weight: 700; text-align: center; color: #333333; line-height: 110%;}

/*Contact*/
.contact-section-top { padding-bottom: 30px; padding-left: 5%; padding-right: 5%;}
.contact-section-top-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-section-top-list > div { width: 33.33%; padding: 0 18px 32px 18px;}
.contact-section-top-title { border-radius: 20px 0 20px 0; background: #e89115; padding: 8px 10px; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 15px;}
.contact-info { display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-info > div { padding-bottom: 12px;}
.contact-info > div:nth-child(odd) { width: 24px;}
.contact-info > div:nth-child(even) { width: calc(100% - 24px); padding-left: 10px; font-size: 16px;}
.contact-info > div:nth-child(even) a { color: #333;}

.contact-bottom-section { background: linear-gradient(180deg, #f1f1f1 0%, #FFFFFF 100%); padding: 60px 5%;}
.contact-bottom-box { max-width: 860px; margin: 0 auto;}
.contact-bottom-info { max-width: 660px; margin: 0 auto 30px auto; text-align: center;}

.color-red { color: #ff0000;}

.contact-form {display: flex; flex-direction: row; flex-wrap: wrap;  justify-content: space-between; margin-bottom: 0px;}
.contact-form > div { width: 48.5%; margin-bottom: 18px; padding-bottom: 10px; border: 1px solid #d6d6d6; padding-top: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; background: #fff; }
.contact-form > div > div:nth-of-type(1) { width: 120px; padding: 0px 10px; border-right: 1px solid #d9d9d9; font-weight: 400; position: relative; padding-left: 30px; line-height: 180%; font-size: 16px;}
.contact-form > div > div:nth-of-type(1) span { position: absolute; left: 13px; top:-1px; color: #e6000c;}
.contact-form > div > div:nth-of-type(2) { width: calc(100% - 120px);}
.input-50 { display: flex; flex-direction: row; flex-wrap: nowrap; }
.input-50 > div { width: 50%; }
.input-50 > div:nth-of-type(1) { border-right: 1px solid #d9d9d9;  }
.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: 16px; border-width:0px; border-style: solid; border-color: #e2e2e2; margin: 0px 0 0px 0; width: 100%; padding: 0px 15px; color:#333; background: #fff; font-family: 'Noto Sans TC', sans-serif; line-height: 30px; border-radius: 5px; }
.contact-form textarea { height:240px; padding:10px 15px; resize:none; line-height: 120%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 10px) 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; font-size: 16px; border-width:0px; border-style: solid; border-color: #e2e2e2; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0 15px;  line-height: 100%; border-radius: 5px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}
.width-100 { width: 100% !important;}

.contact-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0px 0 0px 0;}
.contact-btn-box > div { padding: 0 0px 20px 0px;}

.contact-btn { width: 150px; line-height: 55px; color: #ffffff !important;text-align: left; padding: 0 0 0 25px; font-size: 18px; display: inline-block; background: #1c2b5e; text-transform: uppercase; position: relative; border-width: 0;}
.contact-btn:hover { color: #fff;}
.contact-btn:hover span { right: -15px;}
.contact-btn:hover span:before, .contact-btn:hover span:after { background: #1c2b5e;}
.contact-btn span { display: inline-block; position: absolute; right: 20%; top:55%; width: 23px;transition: all 0.4s ease-out 0s;}
.contact-btn span:before, .contact-btn span:after { content: ""; position: absolute; background: #fff;transition: all 0.4s ease-out 0s;}
.contact-btn span:before { width: 26px; height: 1px; background: #fff; left: 0; bottom: 0px;}
.contact-btn span:after { width: 1px; height: 10px; transform: rotate(135deg); right: 0; top:-9px;}

/*distributor*/
.distributor-info { padding-bottom: 28px; text-align: center; font-size: 24px; font-weight: 700; line-height: 120%;}
.distributor-main { background: linear-gradient(180deg, #f1f1f1 0%, #FFFFFF 100%); padding: 40px 5% 60px 5%;}

.distributor_all {
    display: flex;
    flex-direction: row;
    justify-content: space-around; flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0 0px 0;
}
.image_worldmap {
    width: 65%;
}
.distributor_rightblock {
    width: 35%;
    padding-left: 30px;
}
.image_worldmap img {
    max-width: 100%;
    height: auto;
    height: auto;vertical-align: top;
    filter: blur(0px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}
#mapd area {
	cursor: pointer;
}
#list_02,#list_03,#list_04,#list_05 {
    display: none;
}
.distributor_info {
    line-height: 1.5rem;
    color: #000;
}
.distributor_info a {
    color: #000;
    text-decoration: none;
}
.distributor_info a:hover {
    color: #F60;
}
.distributor_list h2 {border-radius: 20px 0 20px 0; background: #e89115; padding: 8px 10px; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 15px;
}
.distributor_info ul {
    padding: 0;
    margin: 0;
}
.distributor_info li {
    list-style-type: none;
}
.distributor_info li:before {
    margin-right: 8px;
}
.distributor_flag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 10px;
}
.distributor_flag > div {
    display: flex; flex-direction: column; margin-right: 14px; line-height: 110%;
    margin-bottom: 12px;
    width: 45px;
    color: #000;
    font-size: 12px; letter-spacing: 0; text-align: center;
}
.distributor_flag img {
    width: 45px;
    height: 25px;
    border: 1px solid #CCC; display: block; margin-bottom: 5px;
}
.distributor_flag p {
    font-size: 12px; letter-spacing: 0; margin: 0; padding: 0;
}

/*ESG*/
.esg-section-1{padding: 65px 5% 0;position: relative;overflow: hidden;}
.esg-section-1::before{content: "";display: block;width: 3000px;height: 200px;background-color: #ededed;position: absolute;top: 180px;left: 0;z-index: -1;}
.corporate-content{margin-top: 50px;display: flex;flex-wrap: wrap;justify-content: center;}
.corporate-content > div{width: 33%;padding: 0 10px;}
.corporate-content > div .title02{padding: 80px 0 80px 50px;position: relative;}
.corporate-content > div .title02::before{content: "";display: block;width: 100px;height: 100px;border-radius: 50%;background-color: #fff; position: absolute;top: 40px;left: 0;z-index: -1;}
.corporate-content > div:nth-child(2) .title02::before{content: "";display: block;width: 92px;height: 92px;border-radius: 50%;background-color: #ededed;border: 8px #fff solid; position: absolute;top: 40px;left: 0;z-index: -1;}
.corporate-content > div .corporate-content-text{margin-top: 50px;}
#content .corporate-content p{margin: 10px;}

.esg-section-2{padding: 65px 5% 0;position: relative;}
.csr-content{display: flex;flex-wrap: wrap; }

.csr-top-L{width: 90%;margin: -5% auto 0;}
.csr-top-S{display: none;}
.csr-bottom{width: 100%;display: flex;flex-wrap: wrap; margin-top: 10%;justify-content: space-between;text-align: center;}
.csr-bottom > div{width: 30%;}
.csr-bottom > div .title03{margin-top: 15px;color: #000;}

.esg-section-3{padding: 100px 5% ;position: relative; margin-bottom: 100px;}
.esg-section-3::before{content: "";display: block;width: 70%;height: 80%;background-color: #ededed;position: absolute;top: 100px;left: 0;z-index: -1;}
.certification-pic{width: 70%;display: flex;padding: 50px 0;}
.certification-pic > div{width: 25%; padding: 15px;margin-right: 20px;position: relative;}
.certification-pic > div::before{content: "";display: block;width: 60px;height: 60px;border-radius: 50%;position: absolute;bottom: 0px;left: 0px;}
.certification-pic > div:nth-child(1)::before{background: #e89115;}
.certification-pic > div:nth-child(2)::before{background: #b3c045;}
.certification-pic > div:nth-child(3)::before{background: #f5d328;}
.certification-text{position: absolute;bottom: 15%;right: 5%;background: rgba(0,0,0,0.8);padding: 30px 80px;color: #fff;}
.certification-text li{font-size: 22px; font-weight: 700; margin-bottom: 30px;list-style-type: none;position: relative;}
.certification-text li::before{content: "";display: block;width: 25px;height: 25px;position: absolute;top: 0px;left: -40px;}
.certification-text li:nth-child(1)::before{background: url("../images/certification-icon-o.png");}
.certification-text li:nth-child(2)::before{background: url("../images/certification-icon-g.png");}
.certification-text li:nth-child(3)::before{background: url("../images/certification-icon-y.png");}

@media only screen and (max-width: 1600px) {
    .certification-text{right: 0;}	
}

@media only screen and (max-width:  1279px) {
	#content { padding-top: 60px;}
	
	.banner { height: 150px;}
	.banner-title h1 { font-size: 34px;}
	.banner-title > span { display: none;}
	
	#path { padding: 15px 5% 10px 5%; }
	#path ul { text-align: left; }
	
	.about-section-1 { padding-top: 40px; padding-right: 5%;}
	.title01 { font-size: 40px;}
	.title02 { font-size: 26px;}
	.about-section-1-content > div:nth-of-type(1) { width: 100%; order: 2;}
	.about-section-1-content > div:nth-of-type(2) { width: 100%; order: 1; padding-top: 0px; padding-bottom: 20px;}
	
	.products-list > div { width: 100%;}
	.products-list > div:nth-child(odd):after { display: none;}
	
	.products-detail-title { font-size: 40px;}
	.products-detail-title span { font-size: 24px;}
	
	.application-name { font-size: 20px; }

	.contact-section-top-list > div { width: 50%; padding: 0 10px 25px 10px;}
	
	.image_worldmap {
    width: 100%;
	}
	.distributor_rightblock {
		width: 100%;
		padding-left: 0px;
	}
    
    
    .csr-top{width: 100%;}
    .certification-text{bottom: -15%;right: 0;padding: 20px 60px;}
    .certification-pic > div{width: 28%; padding: 0px;}
    .certification-pic > div::before{width: 30px;height: 30px;left: -10px;}
}
@media only screen and (max-width: 980px) {
	.products-list > div { padding: 40px 5%;}
	.products-list-title { font-size: 20px;}
	.products-list-title span { font-size: 30px;}
	
	.aside-menu { display: none;}
	
	.products-detail-top-bg { padding-bottom: 60px;}
	.products-detail-top > div:nth-of-type(1) { width: 100%; padding: 0 0 50px 0;}
	.products-detail-top > div:nth-of-type(2) { width: 100%;}

	.application-pto { margin-bottom: 10px;}
	.application-list > a { width: 50%; padding: 0 10px 35px 10px;}
	
	.contact-form > div { width: 100%; }
    
    .esg-section-1,.esg-section-2{padding: 50px 5% 0;}
    .esg-section-1::before{display: none;}
    .corporate-content{margin-top: 20px;}
    .corporate-content > div{width: 33%;}
    .corporate-content > div .title02{padding: 30px 0 30px 0;}
    .corporate-content > div .title02::before{display: none}
    .corporate-content > div:nth-child(2) .title02::before{display: none}
    .corporate-content > div .corporate-content-text{margin-top: 0px;}
    
    .csr-bottom > div .title03{margin-top: 15px;color: #000;font-size: 18px;}
    
    .esg-section-3{padding: 50px 5%; margin-bottom: 50px;}
    .esg-section-3::before{display: none;}
    .certification-pic{width: 100%;display: flex;padding: 50px 20px;background-color: #ededed;}
    .certification-pic > div{width: 30%; padding: 10px; position: relative;}
    .certification-pic > div::before{width: 60px;height: 60px;}

    .certification-text{position: relative;width: 100%; padding: 30px 80px;}

    
}
@media only screen and (max-width: 768px) {
	.history-list-1:after { left: 9px;}
    .history-list-1 > div { width: 100%;  padding: 20px 0px 0px 70px; font-size: 18px; }
    .history-left { text-align: left; margin: 0 0 0 auto;}
    .history-left:after { left: 6px; right: auto;}
    .history-left:before { left: 20px; right: auto;}
    .history-right:after { left: 6px;}
    .history-right:before { left: 20px;}
	
	.new-pro-btn { transform: scale(0.6);}

	.products-list-2 > a { width:calc(50% - 28px); padding-bottom: 20px;}
	.new-pro-name span { font-size: 20px;}
	
    .news-list > a { width: 100%; }
	
	.contact-section-top-list > div { width: 100%; padding: 0 0px 15px 0px;}
    
    .corporate-content > div{width: 100%;}

    .csr-top-L{display: none;}
    .csr-top-S{display: block; width: 100%;}
    .csr-bottom{order: 3;}
    .csr-bottom > div{width: 100%;}
    .csr-bottom > div .title03{margin-top: 15px;color: #000;}
    
    
}
@media only screen and (max-width: 640px) {
    
	
}
@media only screen and (max-width: 570px) {
	.products-list-content > div:nth-of-type(1) { width: 100%;}
	.products-list-content > div:nth-of-type(2) { width: 100%;}
	.products-list > div:nth-child(odd) .products-list-content > div:nth-of-type(1) { order: 2;}
	.products-list > div:nth-child(odd) .products-list-content > div:nth-of-type(2) { order: 1;}
	.products-list-pto { padding-bottom: 75%;}
	
	.products-list-2 > a { width:calc(100% - 28px); }
	
	.application-list > a { width: 100%; padding: 0 0px 30px 0px;}
    .certification-pic > div::before{width: 35px;height: 35px;}
    .certification-text li{font-size: 18px; margin-bottom: 20px;}
    .certification-text{padding: 30px 60px;}
}

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

}

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

}