/* 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: clamp(16px, 1.5vw, 20px); line-height:1.7; color: #555; letter-spacing: 0rem; font-weight: 400; padding-top: 0px;}
#content p{ margin-bottom: calc(20px + 3%); margin-top: 0; font-size: clamp(16px, 1.5vw, 20px); 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%;}

.demo-section { padding-left: calc(5% + 10px); padding-right: calc(5% + 10px);}
.demo-section-2 { padding-left: 10%; padding-right: 10%;}

.banner { position: relative; overflow: hidden; /*height: 590px;*/}
.banner img { /*object-fit: cover;height: 100%;*/ width: 100%; }
.banner-pc, .banner-mobile { line-height: 0;}
.banner-mobile { display: none !important;}

.title-1 { position: absolute; z-index: 2; top:55%; transform: translateY(-50%); width: 100%; left: 0; padding: 0 10%; margin: 0; color: #fff; font-size:clamp(25px, 4vw, 45px); font-weight: 400; line-height: 1.4; }

#path { background: rgba(0,51,102,.6); position: absolute; z-index: 1; left: 0; bottom:0; width: 100%; padding:4px 10%;line-height: 1.2; }
#path ul { margin: 0; padding: 0;}
#path li { display: inline-block; vertical-align: top; font-size: 18px; font-weight: 400; margin: 0; padding: 0; letter-spacing: 0; color: #fff;}
#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: #fff; }
#path li a:hover { opacity: 0.6;}
#path li a:hover, #path li:last-child a { color: #fff;}

.align-center { text-align: center !important;}
.color-blue { color: #5f789b !important;}
.color-blue2 { color: #008bd3 !important;}
.color-black { color: #000 !important;}
.color-green { color: #7cb56a !important;}
.color-red { color: #d81e79 !important;}

.main-box { padding-top: calc(20px + 1%);}

/*solution*/
.solution-title { background: #5f789b; display: inline-block; color: #fff; padding: 3px calc(15px + 1vw); line-height: 1.2; font-size: clamp(20px, 2.1vw, 26px); margin:0 0 calc(10px + 1.5%) 0;}
.solution-title-b { background: transparent; color: #000; font-weight: 500; margin-bottom: 5px; }
.solution-title-c { background: #555555; }

.solution-title-2 { font-size: clamp(18px, 1.9vw, 24px);margin-bottom: 15px;}

.title-2 {  padding-bottom: 20px;  color: #000; line-height: 1.3; font-size:clamp(30px, 3.1vw, 36px); font-weight: 500; }

.aside-menu-1 { padding-bottom: calc(10px + 1.5%);}

.solution-plan-section {}
.solution-plan-banner { margin-bottom: calc(20px + 1%);}

.loop3  { padding-bottom: calc(20px + 4%);}
.loop3 .owl-dots { display: none;}
.loop3 .owl-item {position: relative; }
.loop3 .owl-nav { position: absolute; top:calc(50% - 30px); width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px);  width: 35px !important; height: 35px !important; background: #b9b9b9 !important; border-radius: 100% !important;transition: all 0.4s ease-out 0s; }
.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:12px; height: 12px; background-size: contain !important; display: inline-block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; position: relative; top:-2px;}
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg) ; margin-left: 5px; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg);  margin-right: 5px; }
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { transform: scale(0.85);}
.loop3 .owl-stage-outer { z-index: 2;}
.loop3 .owl-stage { margin: auto;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: 25px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #C9C9C9 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop3 .owl-dots .owl-dot.active span { background: #FEAC5C !important; }

.loop3 .owl-item:hover .solution-pro-name > b { color: #5f789b; }
.loop3 .owl-item:hover .solution-pro-name > b:after { position: absolute; content: ""; left: 0; bottom: -1px;width: 100%; height: 3px; background:#5f789b;}

.solution-pro-name { text-align: center; color: #5f789b; font-size:clamp(16px, 1.3vw, 18px); line-height: 1.3; margin-bottom: 10px;}
.solution-pro-name > b { font-weight: 700; display: block; border-bottom: 1px solid #555; color: #555; font-size:clamp(17px, 1.2vw, 23px); padding-bottom: 5px; margin-bottom: 5px; position:relative;}
.solution-pro-pto-box { padding: 0 5%;}
.solution-pro-pto { padding-bottom: 100%;}

/*new-pro*/
.new-pro-list { margin-right: -40px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.new-pro-list > a { display: block; width: calc(33.33% - 40px); margin: 0 40px calc(20px + 3%) 0;}
.new-pro-list > a:hover .solution-pro-name b { color: #5f789b;}
.new-pro-list > a:hover .solution-pro-name b:after { position: absolute; content: ""; left: 0; bottom: -1px;width: 100%; height: 3px; background:#5f789b;}

/*products-detail*/
.products-detail-top { display:flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.products-detail-top > div:nth-of-type(1) { width: 50%; padding-top: 30px;}
.products-detail-top > div:nth-of-type(2) { width: 50%; padding-left: 5%;}
.products-detail-top > div:nth-of-type(3) { width: 100%; padding-top: calc(20px + 4%);}

.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;
       width: 100%;
      /*height: 100%;
      object-fit: cover;*/
    }

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

    .swiper-slide {
      background-size: cover;
      background-position: center; 
    }

    .mySwiper2 {
      height: 100%;
      width: 100%; 
    }

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

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

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

.swiper-button-next, .swiper-button-prev { width: 64px !important; height: 64px !important; border-radius: 100%; background: #dfdfdf; 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-button-next:after, .swiper-button-prev:after { content: "" !important; position: absolute;display: block; width: 20px; height: 20px ; border-width: 1px 1px 0 0; border-color: #666666; border-style: solid;}
.swiper-button-prev:after { transform: rotate(-135deg); margin-left: 10px;}
.swiper-button-next:after { transform: rotate(45deg); margin-right: 10px;}
.swiper-button-prev { left: -10px !important;}
.swiper-button-next { right: -10px !important;}

.btn-back { margin-bottom: 15px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;}
.btn-back img { width: 34px;display: inline-block; margin-right: 12px;transition: all 0.4s ease-out 0s; }
.btn-back:hover img { transform: rotate(360deg);}
.btn-back span { }

.pro-name-box { position: relative; padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #5f789b;}
.pro-name-box:before { content: ""; position: absolute; width: 8px; height: 8px; left: 0; background: #5f789b; border-radius: 100%; bottom:-4px;}
.pro-type { padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end;}
.pro-type > div { margin-right: 10px; background: #000; color: #fff; text-align: center; padding:7px 10px; line-height: 1; font-weight: 700; font-size: clamp(24px, 2.3vw, 28px); min-width: 130px;}
.pro-type > span { color: #000; font-size: clamp(18px, 1.5vw, 25px);}
.pro-name { font-weight: 500; font-size: clamp(26px, 2.5vw, 30px); color: #000; line-height: 1.4; margin: 0; padding: 0;}

.pro-description { display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-description > div { margin:0 0 20px 0;font-size: clamp(18px, 1.5vw, 22px);}
.pro-description > div:nth-child(odd) { text-align:right; text-align-last: right; font-weight: 400;color: #000; width: 160px; position: relative; padding-right: 30px;}
.pro-description > div:nth-child(odd):after { content: "："; position: absolute; top: 0; right: 0;}
.pro-description > div:nth-child(even) { width: calc(100% - 160px); padding-left: 10px;}

.choice-color { margin-bottom:15px;  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; cursor: pointer;}
.choice-color > div { width: 30px; height: 30px; border-radius: 100%; margin-right: 20px; }
.choice-color > div.current { box-shadow:inset 0px 0px 0px 4px #5f789b;}
.choice-color > span { color: #000; }

.btn-box {display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%); padding-top: 15px;}
.btn-box > a { display: inline-block; margin: 0 15px 15px 0; line-height: 1; padding: 16px 20px; text-align: center; min-width: 120px;}
.btn-box > a:hover { transform: scale(0.9);}
.btn-size { background: #5f789b; color: #fff !important;}
.btn-inquiry { background: #dfdfdf; color: #555;}

.btn-more { position: relative; padding-bottom: 5px; line-height: 1.3; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-size: clamp(20px, 2.5vw, 30px); font-weight: 300;}
.btn-more:after { position: absolute; content: ""; width: 100%; height: 1px; bottom: 0; right: 0;transition: all 0.4s ease-out 0s; background: #868686;}
.btn-more:hover:after { width: 0%; left: 0;}
.btn-more > div { color: #868686; padding-right: 10px;}

.p-detail-nav { position: sticky; top: 140px; z-index: 3;}

.p-detail-bar-menu { display:flex; flex-direction: row;flex-wrap: nowrap; margin-bottom: calc(20px + 3%); }
.p-detail-bar-menu > a { display: block; width: 100%; position: relative; background: #dfdfdf; text-align: center; font-size:clamp(20px, 1.5vw, 25px); line-height: 1.1; padding: 4px 10px 6px 10px; color: #555;}
.p-detail-bar-menu > a:after { content: ""; position: absolute; width: 3px; height: 100%; background: #fff; top:0; right: 0;}
.p-detail-bar-menu > a:last-child:after { display: none;}
.p-detail-bar-menu > a:hover { color: #fff; background: #5f789b; }
#navigation-menu a:hover, #navigation-menu a.mPS2id-highlight{
	color: #fff; background: #5f789b;
}

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

.title-3 { font-size: clamp(20px, 2.5vw, 30px); font-weight: 500; color: #5f789b; padding-bottom: calc(10px + 1%); line-height: 1.3;}

.p-detail-content { margin-bottom: calc(20px + 3.5%);}
.p-detail-content-1 { max-width: 1100px; margin: 0 auto;}

.width-50-layout {display:flex; flex-direction: row;flex-wrap: wrap; justify-content: space-between; }
.width-50-layout > div { width:47%;}

.p-detail-title-1 { font-size: clamp(20px, 1.5vw, 25px); border-bottom: 1px solid #000; margin-bottom: 20px; padding-bottom: 6px; font-weight: 500; color: #000;}

.font-size-20 { font-size: clamp(14px, 2.1vw, 20px); }
.font-size-26 { font-size: clamp(20px, 2.1vw, 26px); }
.font-size-32 { font-size: clamp(23px, 2.7vw, 32px);line-height: 1.4; }
.font-size-36 { font-size: clamp(22px, 2.4vw, 36px);padding-bottom: calc(10px + 1%); line-height: 1.4; }
.font-size-40 { font-size:clamp(24px, 2.8vw, 40px); font-weight: 700; line-height: 1.4;padding-bottom: calc(10px + 1%);  }
.font-size-45 { font-size:clamp(25px, 3vw, 45px); font-weight: 700; line-height: 1.4;padding-bottom: calc(10px + 1%);  }
.font-size-56 { font-size:clamp(30px, 4vw, 56px); line-height: 1.4; padding-bottom: calc(10px + 1%); }

.p-detail-size-content { background: #f2f2f2; position: relative; text-align: center; padding: calc(20px + 2%);}
.p-detail-size-content-note { position: absolute; top:calc(20px + 2%); right: 1%; width: 34%; color: #aa0027; text-align: left;}

.video-container {position: relative;padding-bottom: 51.5%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}

/*products*/
.products-section { display:flex; flex-direction: row;flex-wrap: wrap; padding-bottom: calc(20px + 4%); }
.products-section > div:nth-of-type(1) { width: 280px;}
.products-section > div:nth-of-type(2) { width: calc(100% - 280px); padding-left: 50px;}
.products-section > div:nth-of-type(2) .new-pro-list { padding-bottom: 0;}

.aside-title { padding:0 30px 20px 30px; font-weight: 500; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.1; color: #000;}
.aside-title-line { border-bottom: 1px solid #c0c0c0;}

.aside-open-title { border-top: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;font-size: clamp(20px, 1.5vw, 25px); padding-left: 30px; font-weight: 400; color: #000 !important;}

.aside-second-list-box { padding-left: 30px; border-bottom: 1px solid #b9b9b9;}
.aside-open-title-2 { font-size: 19px; color: #5f789b; font-weight: 400; padding-bottom: 10px;}
.aside-second-list > a { display:flex !important; flex-direction: row;flex-wrap: nowrap; align-items: center; margin-bottom: 8px;}
.aside-second-list > a > div:nth-of-type(1) { width: 45px;}
.aside-second-list > a > div:nth-of-type(2) { width: calc(100% - 45px); padding-left: 12px; color: #000;}
.aside-second-list > a:hover > div:nth-of-type(2), .aside-second-list > a.current > div:nth-of-type(2) { color: #5f789b;}

.page-zone{ padding-bottom: 60px; }
#page { text-align: center; padding:0 0 0 0;}
#page a { font-size: 16px; color: #555; font-weight: 400; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; display: inline-block; background: #dfdfdf; margin: 0 0.6vw;}
#page a:hover, #page a.current { background: #5f789b; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #d3d3d3; border-right: 1px solid #d3d3d3; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

.loop4  { padding-bottom: calc(20px + 4%);}
.loop4 .owl-dots { display: none;}
.loop4 .owl-item {position: relative; }
.loop4 .owl-nav { position: absolute; top:calc(50% - 70px); width: 100%; z-index: 11;}
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px);  width: 35px !important; height: 35px !important; background: #b9b9b9 !important; border-radius: 100% !important;transition: all 0.4s ease-out 0s; }
.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:12px; height: 12px; background-size: contain !important; display: inline-block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; position: relative; top:-2px;}
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg) ; margin-left: 5px; }
.loop4 .owl-next:before { content: ""; transform: rotate(45deg);  margin-right: 5px; }
.loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { opacity: 1;}
.loop4 .owl-prev:hover, .loop4 .owl-next:hover { transform: scale(0.85);}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom: 25px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #C9C9C9 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop4 .owl-dots .owl-dot.active span { background: #FEAC5C !important; }

.loop4 .owl-item:hover .solution-pro-name > b { color: #5f789b; }
.loop4 .owl-item:hover .solution-pro-name > b:after { position: absolute; content: ""; left: 0; bottom: -1px;width: 100%; height: 3px; background:#5f789b;}

.recommend-pto { padding-bottom: 100%; border: 1px solid #b9b9b9; margin-bottom: 10px;transition: all 0.4s ease-out 0s; }
.recommend-pto:hover { transform: scale(0.95);box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.recommend-name { text-align: center;}


.pro-main-section { padding-bottom: calc(20px + 4%);}
.pro-main-pto { padding-bottom: calc(20px + 1%);}
.pro-main-pto img { width: 100%;}

.btn01 { color: #5f789b !important; font-size: 18px; display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; margin-bottom: calc(20px + 4%);}
.btn01 > div { padding: 0 16px 12px 16px; line-height: 1.1;position: relative;}
.btn01 > div:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 1px ; background: #5f789b;transition: all 0.3s ease-out 0s;}
.btn01:hover > div:before { width: 10%;}
.btn01 > div:after { content: ""; position: absolute; width: 8px; height: 8px; border-width: 1px 1px 0 0; border-style: solid; border-color: #5f789b; transform: rotate(45deg); bottom: -3.4px; right: 0;}

.loop5  { }
.loop5 .owl-dots { display: none;}
.loop5 .owl-item {position: relative; }
.loop5 .owl-nav { position: absolute; top:calc(50% - 70px); width: 100%; z-index: 11;}
.loop5 .owl-prev, .loop5 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px);  width: 35px !important; height: 35px !important; background: #b9b9b9 !important; border-radius: 100% !important;transition: all 0.4s ease-out 0s; }
.loop5 .owl-prev { left:-30px; }
.loop5 .owl-next { right:-30px;}
.loop5 .owl-prev:before, .loop5 .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:12px; height: 12px; background-size: contain !important; display: inline-block; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; position: relative; top:-2px;}
.loop5 .owl-prev:before { content: ""; transform: rotate(-135deg) ; margin-left: 5px; }
.loop5 .owl-next:before { content: ""; transform: rotate(45deg);  margin-right: 5px; }
.loop5 .owl-prev:hover:before, .loop5 .owl-next:hover:before { opacity: 1;}
.loop5 .owl-prev:hover, .loop5 .owl-next:hover { transform: scale(0.85);}
.loop5 .owl-stage-outer {z-index: 2;}
.loop5 .owl-dots { position: absolute; z-index: 100; bottom: 25px; width: 100%; text-align: center !important; padding: 0 50px; }
.loop5 .owl-dots .owl-dot span, .loop5  .owl-dots .owl-dot span { background: #C9C9C9 !important; width: 14px !important; height: 14px !important; border: 0px solid #4c4c4c;}
.loop5 .owl-dots .owl-dot.active span { background: #FEAC5C !important; }

.pro-hot-link {display: block;}
.pro-hot-link-pto {/*height: 380px;*/ position: relative; margin-bottom: 20px;}
.pro-hot-link-pto img { object-fit: cover; width: 100%; height: 100%;}
.pro-hot-link-over { position: absolute;  z-index: 2; background: rgba(0,0,0,.64); width: 100%; height: 100%; padding: 0 8%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items:center; color: #fff; text-align: center; font-size: 18px;transition: all 0.4s ease-out 0s; opacity: 0;}
.pro-hot-link-name { text-align: center; border-bottom:1px solid #555;color: #000;padding-bottom: 8px;position: relative;}
.pro-hot-link:hover .pro-hot-link-name:after { position: absolute; content: ""; left: 0; bottom: -1px;width: 100%; height: 3px; background:#5f789b;}
.pro-hot-link:hover .pro-hot-link-over { opacity: 1;}

/*about*/
.bg-gray { background: #f2f2f2;}

.about-section-1 { padding-top: calc(20px + 4%); padding-bottom: calc(20px + 4%); text-align:center;}

.about-section-2 { padding-top: calc(20px + 4%); padding-bottom: calc(20px + 4%); display:flex; flex-direction: row; flex-wrap: wrap;}
.about-section-2 > div:nth-of-type(1) { width: calc(100% - 540px); padding-right: 7%;}
.about-section-2 > div:nth-of-type(2) { width: 540px; }

.about-title-1 { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #5f789b; color: #5f789b;}

.title-line { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #5f789b;}

.about-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%); padding-top: 20px;}
.about-layout-1 > div{ margin-bottom: 20px;}
.about-layout-1 > div:nth-child(odd) { width: 156px; padding-top: 12px;}
.about-layout-1 > div:nth-child(even) { width: calc(100% - 156px); padding-left: 5%;}

.about-right-section { position: relative;}
.about-right-section:after { position: absolute; content: ""; z-index: -1; left: 112px; top:8%; width: 18px; height: calc(100% - 450px); background: linear-gradient(180deg, #3f94e0 0%, #FFFFFF 100%);}

.about-history-box { padding: calc(20px + 4%) 0;}
.about-history { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(30px + 15%);}
.about-history > div:nth-of-type(1) { width: 110px; text-align: right; padding-right: 10px;}
.about-history > div:nth-of-type(2) { width: calc(100% - 145px); padding-left: 35px;}
.about-history-title { background: url("../images/icon-water.png") no-repeat left 10px; padding-left: 30px; padding-bottom: 6px; padding-top: 4px;}

.width-1040 { max-width: 1040px; margin: 0 auto; text-align:left;}
.ab-oem{position: relative;}
.ab-oem-icon{position: absolute;top: 27.5%;left: 49.9%;transform: translateX(-50%);}

/*core*/
.core-content { padding-bottom: 0; display: flex; flex-direction: column; flex-wrap: nowrap;}
.core-content > div { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid #636363; padding-bottom: 30px; margin-bottom: 30px;}
.core-content > div:last-child { border-bottom: 0px solid #636363;}
.core-content > div > div:nth-of-type(1) { width: 31%; border-right: 1px solid #636363; padding-right: 4%;}
.core-content > div > div:nth-of-type(2) { width: 69%; padding-left: 4%;}

.flex-layout { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex-layout-nowrap { display: flex; flex-direction: row; flex-wrap: nowrap; }
.flex-layout-center { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.flex-layout-end { display: flex; flex-direction: row; flex-wrap: wrap; align-items:flex-end; }
.flex-layout > div, .flex-layout-center > div, .flex-layout-end > div, .flex-layout-nowrap > div { padding-right: 20px; }

.icon-circle { width: 19px; height: 19px; border-radius: 100%; background: #3f3c3c; display: inline-block; margin-right: 10px; vertical-align: middle;}

.core-table { border-collapse: inherit; border-spacing: 1px; background: #251e1c;}
.core-table td { background: #fff; padding: 5px 1vw; line-height: 1.3; font-weight: 500;}

/*process*/
.process-section-1 { background: url("../images/process-0.png") no-repeat top center; height: 452px; max-width: 1920px; margin: 0 auto;}
.process-section-2 { position: relative; padding: 52px 0 115px 0; max-width: 1034px; margin: 0 auto;}
.process-section-2-water { position: absolute; top: 0; left: 238px; z-index: 3; height: 100%; width: 95px; background: linear-gradient(180deg, #bddef7 0%, #FFFFFF 25%, #bddef7 50%, #FFFFFF 75%, #bddef7 100%);}
.process-section-2-water:before { position: absolute; content: ""; width: 17px; height: 100%; background: rgba(255,255,255,.4); top: 0; left: 14px; z-index: 1; }

.process-section-2-list { margin-bottom: 15px; border: 1px solid #5f789b; min-height: 228px; border-radius: 114px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; overflow: hidden;}
.process-section-2-list > div:nth-of-type(1) { width: 238px;}
.process-section-2-list > div:nth-of-type(1) img { object-fit: cover; width: 100%; height: 100%;}
.process-section-2-list > div:nth-of-type(2) { width: calc(100% - 238px - 94px); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;	
background-image: url("../images/process-shadow.png"), url("../images/process-icon.png");
background-position: top left, calc(100% - 30px) 20px;
background-repeat: no-repeat, no-repeat;
background-size: 31px 100%, 70px 58px;}

.process-section-2-list-content { padding: calc(20px + 2%) calc(30px + 10%) calc(20px + 2%) calc(30px + 5%); width: 100%; }

.process-title { font-weight: 700; color: #5f789b; border-bottom: 1px solid #5f789b; margin-bottom: 6px; padding-bottom: 10px;}

.process-bottom-bg { background: url("../images/process-bottom.png") bottom center repeat-x; padding-bottom: calc(20px + 2%); position: relative; margin-top: -62px;}
.process-bottom-content { max-width: 1330px; margin: 0 auto; text-align: left;}
.process-bottom-note { max-width: 1330px; margin: 0 auto;text-align: right; font-weight: 500; line-height: 1.3; padding-right: 3%; padding-bottom: 12px;}
.process-bottom-content { padding: 25px; background: #bddef7; border-radius: 10px;}
.process-bottom-content-spec { border: 2px solid #5f789b; border-collapse: inherit; border-spacing: 0; width: 100%;}
.process-bottom-content-spec .flex-layout-center{ justify-content: center;}
.process-bottom-content-spec td { padding: 10px 10px; text-align: center; line-height: 1.4;font-size: clamp(16px, 1.5vw, 20px); font-weight: 400;}
.border-right { border-right: 2px solid #5f789b !important;}

.bg-white { background: #fff;}
.bg-blue { background: #5f789b; color: #fff;}
.bg-blue2 { background: #cfd6e1;}

/*equipment*/
.ce-seaction { position: relative; background: #ebebeb; padding: calc(30px + 2%) calc(20px + 3%) calc(30px + 4%) calc(20px + 3%); z-index: 1;}
.ce-seaction #ce { position: absolute; top: -70px; left: 0;}
.ce-content-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.ce-content-1 > div { text-align: center; max-width: 220px; margin: 0 calc(10px + 3%) calc(15px + 2%) calc(10px + 3%); font-weight: 500; }
.ce-content-1 > div > div { padding-top: 10px; }

.ce-content-2 { background: #fff; border-radius: 20px; padding:calc(15px + 1%) calc(15px + 3%) calc(5px + 1%) calc(15px + 3%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.ce-content-2 > div { padding-bottom: 20px;}
.ce-content-2 .flex-layout-center > div { padding-right: 0;}

/*case*/
.case-list { display: flex; flex-direction: row; flex-wrap: wrap;  align-items: flex-start; padding-bottom: calc(20px + 5%);}
.case-list > div { width: 20%;}
.case-list > div > div { font-size: 18px; line-height: 1.3; padding-bottom: 14px; position: relative; padding-left: 18px;}
.case-list > div > div:before { content: ""; position: absolute; top:10px; left: 0; background: #555; width: 4.5px; height: 4.5px; border-radius: 100%;}
.case-list > div > div.tit {padding-left: 0;}
.case-list > div > div.tit:before {content: none;}

/*filters*/
.filters-bg { background: #dddddd; position: relative; padding-top:calc(20px + 3%); padding-bottom:calc(20px + 5%);}
.filters-bg:after { content: "";position: absolute; width: 162px; height: 130px; bottom: 0; left: 50%; transform: translateX(-50%); background: #fff;}
.filters-bg #f1 { position: absolute; top: -80px; left: 0;}

.filters-section { background: #fff; border-radius: 70px; padding: calc(20px + 2.5%) calc(20px + 7%); display: flex; flex-direction: row; flex-wrap: wrap;}

.filters-section > a { width: 33.33%; padding: 0 20px 40px 20px; display: block;}
.filters-section > a:hover .filters-name { color: #5f789b;}
.filters-section > a:hover img { transform: scale(0.95);}
.filters-name { text-align: center; font-weight: 700; border-bottom: 1px solid #636363;transition: all 0.4s ease-out 0s; line-height: 1.3; padding-bottom: 5px; color: #808080;}
.filters-pto-content { background: rgba(221,221,221,.15); padding:5px 10%;}
.filters-pto-content > span { display: block; padding: 5px 0; color:#5f789b; text-align: center; min-height: 35px; margin-bottom: 15px; line-height: 1.3;}
.filters-pto { padding-bottom: 100%;}
.filters-pto img { transition: all 0.4s ease-out 0s; }

.filters-close { display: none;}

.filters-content { padding: calc(20px + 2%) calc(20px + 3.5%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative;background: #fff;}
.filters-content > div { width: 47%;}
.filters-content .font-size-40 { padding-bottom: 5px;}
.filters-content p { margin: 0; font-weight: 400 !important; font-size: clamp(16px, 1.5vw, 20px)}
.filters-content .title-line { margin-bottom: 10px;}
.filters-content .font-size-26 { line-height: 1.3;}
.filters-content .width-50-layout { padding-bottom: calc(20px + 3%);}
.filters-content .width-50-layout > div { font-weight: 400;}
.filters-content .close-btn{position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;max-width: max-content;top: calc(20px + 3.5%);right: calc(20px + 3.5%);font-weight: bold;cursor: pointer;transition: all 0.4s ease-out 0s;}
.filters-content .close-btn:hover{transform: scale(0.95);}
.filters-content .close-btn .icon {width: 28px;height: 28px;margin-right: 5px;display: inline-block;position: relative;background: #DFDFDF;border-radius: 50%;}
.filters-content .close-btn .icon::before,.filters-content .close-btn .icon::after {content: '';position: absolute;width: 16px;height: 2px;background: #5F789B;top: 50%;left: 50%;}
.filters-content .close-btn .icon::before {transform: translate(-50%, -50%) rotate(45deg);}
.filters-content .close-btn .icon::after {transform: translate(-50%, -50%) rotate(-45deg);}

.filters-data { padding-top: calc(15px + 1%);padding-bottom: calc(20px + 3%);}
.filters-data.flex-layout > div { padding-right: 0;}

.btn02 { display: block; width: 100px; line-height: 46px !important; text-align: center; border-radius: 23px; color: #fff !important; background: #5f789b;}
.btn02:hover { transform: scale(0.9);}

.filters-bottom-section.width-50-layout > div { width: 50%; padding-bottom: 0 !important; }
.filters-bottom-section.width-50-layout > div img { width: 100%; }

/*news*/
.news-box { padding-bottom: calc(20px + 4%);}
.news-section { padding-bottom: calc(20px + 3%);}
.news-list { padding-bottom: calc(20px + 1%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.news-list:hover .news-date  { color: #5f789b;}
.news-list:hover .news-pto img  { transform: scale(0.95); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);}
.news-list:hover .news-btn  { background: #5f789b;}
.news-list:hover .news-btn > div { color: #fff;}
.news-list:hover .news-btn > img { filter: invert(1) brightness(100);}
.news-list > div:nth-of-type(1) { width: 32%;}
.news-list > div:nth-of-type(1) img { width: 100%;}
.news-list > div:nth-of-type(2) { width: 68%; padding-left: 3.5%;}
.news-pto { position: relative; display: block;}
.news-pto img { transition: all 0.4s ease-out 0s;}
.news-date { position: absolute; z-index: 4; left: -50px; top:50%; transform: translateY(-50%); width: 100px; height: 100px; border-radius: 100%; background: #fff;box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.1); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; color: #000; line-height: 1.1; font-weight: 700;}
.news-date > span { display: block ; text-align: center; font-size: 15px;}
.news-date > div.font-size-56 { padding-bottom: 0; line-height: 1;}

.news-title { border-bottom: 1px solid #636363; padding-bottom: 10px; margin-bottom: 15px; display: flex; flex-direction: row; flex-wrap: wrap; align-items:flex-end;}
.news-title > div:nth-of-type(1) { width: calc(100% - 165px); padding-right: 10px;}
.news-title > div:nth-of-type(2) { width: 165px;}

.news-tag { color: #b1876d; font-size: 18px; line-height: 1; padding-bottom: 8px;}

.news-btn { height: 36px; border-radius: 18px;padding: 0 5px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items:center; justify-content: center; border: 1px solid #636363;}
.news-btn > div { font-size: 18px; padding-right: 6px;}
.news-btn > img { width: 60px;}

/*contact*/
.contact-section { padding-bottom: calc(20px + 4%); display:flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.contact-section > div:nth-of-type(1) { width: calc(100% - 430px); padding-right: 3.5%;}
.contact-section > div:nth-of-type(2) { width: 430px;}

.map-box { margin-bottom: calc(15px + 1%);}
.map-box iframe { width: 100%; border-width: 0; height: 765px;}

.contact-social {display:flex; flex-direction: row; flex-wrap: wrap; }
.contact-social > a { width: 70px; height: 70px; border-radius: 100%; border: 1px solid #666666;display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 7px 0 0;}
.contact-social > a img { filter: grayscale(100);}
.contact-social > a:hover img { filter: grayscale(0);}

.contact-form {  padding-top: 10px; }
.contact-form-list { background: #f2f2f2; margin-bottom: 20px; padding: 12px 25px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.contact-form-list > div:nth-of-type(1) { width: 120px; padding-top: 0px; position: relative;}
.contact-form-list > div:nth-of-type(1):after { content: ""; position: absolute; width: 1px; height: 16px; background: #000; top: 50%; transform: translateY(-45%); right: 12px;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 120px);}

.contact-title { font-weight: 500; position: relative; padding-left: 10px; color: #000;}
.contact-title span { color: #d81e79; position: absolute; left: -10px; top:50%; transform: translateY(-50%);}

.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(16px, 1.5vw, 20px); border-width:0 0 0px 0; border-style: solid; border-color: #d6d6d6; margin: 0px 0 0px 0; width: 100%; padding:0 ; color:#222; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 35px; border-radius: 0px; letter-spacing: 0.05rem; }
.contact-form textarea { height:222px; resize:none; line-height: 140%; padding-top: 6px;}
.contact-form select{ margin: 0 0 0px 0;  width:100%;  background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: 100% 14px; background-size: 14px 9px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: clamp(16px, 1.5vw, 20px); border-width:0 0 0px 0; border-style: solid; border-color: #999999; color:#222; font-family: 'Noto Sans TC', sans-serif;  padding:0px 18px 0px 0;  line-height: 35px; border-radius: 0px;letter-spacing: 0.05rem;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.contact-btn { text-align: left;margin-top: calc(20px + 1%);}
.contact-btn button { background: #5f789b; border-width: 0; text-align: center; width: 100px; line-height: 40px; color: #fff !important;transition: all 0.4s ease-out 0s;}
.contact-btn button:hover { transform: scale(0.9);}

.contact-layout { display:flex; flex-direction: row; flex-wrap: wrap;}
.contact-layout > div:nth-of-type(1) { width: 60px;}
.contact-layout > div:nth-of-type(2) { width: calc(100% - 60px); padding-right: 10px;}

/*download*/
.download-list { display: flex; flex-direction: row;flex-wrap: wrap; padding-bottom: calc(20px + 4%);}
.download-list > a { display: block; width: 25%; padding: 0 25px 40px 25px;}
.download-list > a:hover .download-pto:before, .download-list > a:hover .download-pto:after { display: none;}
.download-list > a:hover .download-name { opacity: 0; transform: translateY(-10px);}
.download-list > a:hover .download-over { opacity: 1;}
.download-list > a:hover .download-over > img { transform: translateY(0);}
.download-list > a:hover .download-over > div { transform: translateY(0);}
.download-pto { position: relative; padding-bottom: 142%; margin-bottom: 12px;}
.download-pto:before, .download-pto:after { position: absolute; content: ""; z-index: 5; width: 60px; height: 60px; top: 0; left: 0; display: inline-block;transition: all 0.4s ease-out 0s;}
.download-pto:before { background: #fff; clip-path: polygon(0% 0%, 100% 0%, 0% 100%);}
.download-pto:after { background: #5f789b; clip-path: polygon(100% 0, 100% 100%, 0% 100%);}
.download-name { text-align:center; transition: all 0.4s ease-out 0s; }
.download-over { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: rgba(95,120,155,.85); display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 5%;transition: all 0.4s ease-out 0s; opacity: 0;}
.download-over > img { display: inline-block; width: 44px; transition: all 0.4s ease-out 0s;transform: translateY(10px);}
.download-over > div { color: #fff; font-weight: 500;padding-top: 10px; line-height: 1;transition: all 0.4s ease-out 0s;transform: translateY(-10px);}

/*video*/
.aside-video {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0 0 calc(20px + 1%) 0; padding: 0;}
.aside-video > li > a { display: block; border-right: 1px solid #555; padding:0 20px; color: #555; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.2; font-weight: 400; }
.aside-video > li:last-child > a { border-right: 0px solid #555;}
.aside-video > li > a:hover, .aside-video > li.current > a { color: #5f789b !important ; }

.video-menu { padding: 10px 0 !important; border-bottom: 1px solid #c0c0c0;}

.video-list { display: flex; flex-direction: row;flex-wrap: wrap; }
.video-list > a { display: block; width: 33.33%; padding: 0 15px 40px 15px;}
.video-list > a:hover .video-list-name  { color: #5f789b;}
.video-list-pto { border: 1px solid #666666; padding-bottom: 56%; margin-bottom: 10px;}
.video-list-name { line-height: 1.4; border-bottom: 1px solid #666; color: 000; padding-bottom: 6px;}

/*wh-filter*/
.wh-filter .demo-section{margin-bottom: calc(10px + 2%);}
.wh-filter .seo-content{padding-bottom: calc(10px + 2%);margin-bottom: calc(10px + 2%);border-bottom: 1px solid #A5AFC8;}
.wh-filter .wh-filter-btn{display: flex;justify-content: center;flex-wrap: wrap;gap:10px 3%;}
.wh-filter .wh-filter-btn a{border-radius: 30px; background: #fff;color: #5F789B;width: 242px;text-align: center;font-size: clamp(19px, 1.8vw, 23px);padding: 5px 0;border: 1px solid #5F789B;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.wh-filter .wh-filter-btn a span{margin-left: 6px;}
.wh-filter .wh-filter-btn a  i{background: url('../images/arrow-right.svg') no-repeat center / cover;width: 37px;height: 8px;margin-left: 6px;display: inline-block;}
.wh-filter .wh-filter-btn a:hover{color: #fff;background: #5F789B;}
.wh-filter .wh-filter-btn a:hover span{display: none;}
.wh-filter .wh-filter-btn a:hover i{display: none;}
.wh-filter .wh-filter-btn a.current {color: #fff;background: #5F789B;}
.wh-filter .wh-filter-btn a.current span{display: none;}
.wh-filter .wh-filter-btn a.current i{display: none;}

.case-content{background: #F5F5F5;border-radius: 70px;padding: calc(20px + 4%) calc(20px + 4%); margin-bottom: calc(20px + 5%);position: relative;}
.case-content::before{position: absolute;content: "";top: 50%;left: -10%;transform: translateY(-50%);background: #F5F5F5;width: 120%;height: 255px;z-index: -1;}
.case-content::after{position: absolute;content: "";bottom: -110px; left: 50%;transform: translateX(-50%);background: #F5F5F5;width: 255px;height: 120px;z-index: -1;}
.case-box{display: grid;grid-template-columns: repeat(5, 1fr);gap:40px 20px;}
.case-box .case{position: relative;overflow: hidden;}
.case-box .case .pho{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 133.3%;display: block;}
.case-box .case .pho .img-center{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-size: 0;line-height: 0;}
.case-box .case .pho .img-center img{width: 100%;height: 100%;object-fit: cover;}
.case-box .case .pho:hover:before{position: absolute;content: ""; top: 0;left: 0; width: 100%;height: 100%;background: rgb(0 0 0 / 80%);z-index: 1;}
.case-box .case .pho:hover:after{position: absolute;content: ""; top:50%;left: 50%;transform: translate(-50%, -50%);background: url("../images/magnifier.svg")no-repeat;background-size: cover;width: 54px;height: 49px;z-index: 2}
.case-box .case .title{font-weight: bold;font-size: clamp(19px, 1.8vw, 23px);color: #000;line-height: 1;margin: 18px 0 5px 0;}
.case-box .case .link-more{color: #9E9E9E; font-size: clamp(16px, 1.8vw, 18px);}
.case-box .case .link-more i{background: url("../images/arrow-case.svg")no-repeat;background-size: cover;width: 19px;height: 15px;display: inline-block; margin-left: 6px;transition: all 0.4s 0s;}
.case-box .case .link-more:hover i{margin-left: 10px;}
.case-box .case .new-tab{background: #DC3610;font-weight: bold;color: #fff;text-align: center;width: 180px;position: absolute;top: 12px;left: -58px;transform: rotate(-35deg);z-index: 2;}

.case-page {display: flex;gap: 10px 20px;justify-content: center;margin-top: calc(3% + 30px);flex-wrap: wrap;}
.case-page .prev i, .case-page .next i{width: 8px !important;height: 8px !important;line-height: inherit !important;border-radius: 0 !important;border-top: 1px solid #555555;border-right: 1px solid #555555;}
.case-page .prev:hover i, .case-page .next:hover i{border-top: 1px solid #5F789B;border-right: 1px solid #5F789B;}
.case-page .prev i{transform: rotate(-135deg);margin-left: 3px;}
.case-page .next i{transform: rotate(45deg);margin-right: 3px;}
.case-page a{text-decoration: none;border-radius: 50%;background: #DFDFDF;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-size: 15px;width: 40px;height: 40px;}
.case-page a:hover{color: #5F789B;}
.case-page .current {color: #5F789B;pointer-events: none;}

.vbox-inline.vbox-child{background: transparent !important;box-shadow: none;}
.popup-box{max-width: max-content; margin: 0 auto;}
.popup-box .popup-text {margin-top: 15px;}
.popup-box .popup-text h3{color: #5F789B;margin: 0;padding: 0;}
.popup-box .popup-text .wire{background: #fff; width: 100%;height: 1px;margin: 5px 0;}
.popup-box .popup-text p{margin: 0;padding: 0;color: #fff;}
.venobox-popup{display: none;}
.popup-text{text-align: left;margin-top: 15px;}
.popup-text h3{color: #5F789B;margin: 0;padding: 0;}
.popup-text .wire{background: #fff; width: 100%;height: 1px;margin: 6px 0;}
.popup-text p{margin: 0;padding: 0;color: #fff;}


@media only screen and (max-width: 1920px) {
	
}
@media only screen and (max-width: 1600px) {
	.ab-oem-icon{ width: 130px;}
}

@media only screen and (max-width: 1365px) {
	.demo-section-2 { padding-left: calc(5% + 10px); padding-right: calc(5% + 10px);}
	
	/*.banner { height: 380px;}*/
	#path li { font-size: 15px;}
	
	.p-detail-nav { top: 110px;}
	
	.case-box{display: grid;grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px;}
	
	.title-1 { padding: 0 5%; top:45%;}
	#path { padding: 4px 5%;background: rgba(0,51,102,0.8); position: relative;  }
	
	.aside-menu-1 { padding-bottom: 15px;}
	
	.p-detail-size-content-note { position: relative; top:auto; right: auto; width: 100%; text-align: center; padding-bottom: 20px;}
	
	.products-section > div:nth-of-type(1) { width: 100%; margin-bottom: 25px;}
	.products-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
	.aside-title { display: none;}
	.aside-second-list-box, .aside-open-title, .aside-second-list-box { padding-left: 15px; }
	
	.about-layout-1 > div:nth-child(odd) { width: 100%; padding-top: 0px; text-align: center; margin-bottom: 0 !important;}
	.about-layout-1 > div:nth-child(odd) img { width: 130px;}
	.about-layout-1 > div:nth-child(even) { width: calc(100% - 0px); padding-left: 0%;}
	
	.about-section-2 > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0%;}
	.about-section-2 > div:nth-of-type(2) { width: 540px; margin: 0 auto;}

	.process-section-1, .process-section-2-water { display: none;}
	.process-section-2 { padding: 0 0 calc(20px + 4%);}
	.process-section-2-list > div:nth-of-type(2) { width: calc(100% - 238px); }
	.process-section-2-list-content { padding: calc(20px + 2%) calc(30px + 8%) calc(20px + 2%) calc(20px + 2%); width: 100%; }
	
	.process-bottom-bg { margin-top: 0px;}
	
	
	.filters-bg:after { height: 80px; }
	.filters-section { padding: calc(20px + 2.5%) calc(20px + 3%); border-radius: 25px; }
	.filters-section > a { width: 50%;padding: 0 10px 30px 10px; }
	
	.download-pto:before, .download-pto:after { width: 30px; height: 30px;}
	.download-over > img { width: 25px;}
	
	.video-menu { padding: 0px 0 !important; border-bottom: 0px solid #c0c0c0;}
	
	.case-content{border-radius: 25px;padding: calc(20px + 3%) calc(20px + 3%);}
}

@media only screen and (max-width: 1199px) {
	.case-list > div > div { font-size: 16px; padding-left: 12px; }
	.case-list > div > div:before { top:8px; }
	
	.news-date { left: 0px; transform:scale(0.6) translateY(0%); top: 0; transform-origin: 0 0;}
	.news-btn > div { font-size: 16px; }
    
    .solution-pro-name > b { font-size: 16px;}
    
    .ab-oem-icon{ top: 29%;width: 100px;}
}

@media only screen and (max-width: 980px) {
	
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important; margin: auto;}
	
	.products-detail-top > div:nth-of-type(1) { order: 1; width: 100%; padding-top: 0px;}
	.products-detail-top > div:nth-of-type(2) { order: 3; width: 100%; padding-left: 0;}
	.products-detail-top > div:nth-of-type(3) { order: 2; padding-top: calc(20px + 2%); padding-bottom: calc(20px + 2%);}
    .pro-description > div {font-size: 16pt;}
    .pro-description > div:nth-child(odd) {width: 220px; text-align: right;}
    .pro-description > div:nth-child(even) {width: calc(100% - 220px);}
	.swiper-button-next, .swiper-button-prev { transform: scale(0.6);}
	
	.case-list { justify-content: flex-start;}
	.case-list > div { width: 33.33%;}
	
	.filters-content > div { width: 100%;}
	.filters-content > div:nth-of-type(1) { margin-bottom: 10px;}
	.filters-content > div:nth-of-type(1) img { width: 100%;}
	.filters-data.flex-layout > div > img { max-width: 90px;}
	
	.news-list > div:nth-of-type(1) { width: 100%; margin-bottom: 20px;}
	.news-list > div:nth-of-type(2) { width: 100%; padding-left: 0;}
	.news-title { flex-direction: column; align-items:flex-start; padding-bottom: 15px; margin-bottom: 10px;}
	.news-title > div:nth-of-type(1) { width: 100%; padding-right: 0px; padding-bottom: 8px;}
	
	.contact-section > div:nth-of-type(1) { width: 100%; padding-right: 0%; order: 2;}
	.contact-section > div:nth-of-type(2) { width: 100%; order: 1; margin-bottom: 25px;}
	.main-box iframe { height: 300px;}
	.contact-social > a { width: 50px; height: 50px; }
	.contact-social > a img { max-width: 30px; height: 24px;}
	
	.download-list > a { width: 50%; padding: 0 15px 30px 15px;}
	
	.case-content::after{width: 162px;}
	
	.filters-content{padding: calc(40px + 2%) calc(20px + 3.5%) calc(20px + 2%) calc(20px + 3.5%);}
	.filters-content .close-btn{top: calc(10px + 2%);}
}
@media only screen and (max-width: 768px) {
	/*.banner { height: 280px;}*/
	
	.new-pro-list { justify-content:space-between; margin-right: 0;}
	.new-pro-list > a { width: calc(50% - 20px); margin: 0 0px calc(20px + 3%) 0;}
	
	.width-50-layout > div { width:100%; padding-bottom: 25px;}
	
	.core-content > div > div:nth-of-type(1) { width: 100%; border-right: 0px solid #636363; padding-right: 0; padding-bottom: 10px;}
	.core-content > div > div:nth-of-type(2) { width: 100%; padding-left: 0;}
	
	.ce-content-2 > div { width: 50%;}
	
	.case-list { justify-content: space-between;}
	.case-list > div { width: 50%;}
	
	.filters-content .width-50-layout > div {padding-bottom: 0;}
	
	
	.video-list { justify-content: space-between;}
	.video-list > a { width: 48.5%; padding: 0 0 20px 0;}
	
	.about-history .width-50-layout > div:first-child { padding-bottom: 0px;}
	
	.process-bottom-content { padding: 0; border-radius: 0px;}
	
	.case-box{grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 640px) {
	.process-section-2-list { flex-direction: column; border-radius: 30px;}
	.process-section-2-list > div:nth-of-type(1) { width: 100%;}
	.process-section-2-list > div:nth-of-type(2) { width: 100%; padding: 25px 20px 30px 20px; background: none;}
	.process-section-2-list-content { padding: 0;}
}
@media only screen and (max-width: 570px) {
	.loop3 .owl-prev, .loop4 .owl-prev , .loop5 .owl-prev { left:-10px; }
	.loop3 .owl-next, .loop4 .owl-next, .loop5 .owl-next { right:-10px;}
	
	.pro-description > div:nth-child(odd) { text-align:left; text-align-last:left; width: 100%; padding-right: 0px; margin-bottom: 10px; font-weight: 500;}
	.pro-description > div:nth-child(odd):after { content: "："; position: relative; top: auto; right: auto;}
	.pro-description > div:nth-child(even) { width: calc(100% - 0px); padding-left: 0px;}
	
	.pro-hot-link-pto {/*height: 280px;*/ }
	
	.about-right-section > div:nth-of-type(1) { display: none;}
	.about-right-section:after { display: none;}
	.about-history { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ddd;}
	.about-history > div:nth-of-type(1) { width: 80px; }
	.about-history > div:nth-of-type(2) { width: calc(100% - 100px);}

	.flex-layout-nowrap { flex-wrap: wrap;}
	
	.ce-content-2 > div { width: 100%;}
    
    .case-list > div { width: 100%;}
	
	.filters-bg:after { height: 50px; }
	.filters-section > a { width: 100%;padding: 0 0px 30px 0px; }
	.filters-bottom-section.width-50-layout > div { width: 100%; }
	
	.contact-form-list { padding-bottom: 25px;}
	.contact-form-list > div:nth-of-type(1) { width: 100%; padding-bottom: 4px;}
	.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); border-bottom: 1px solid #000;}
	.contact-form-list > div:nth-of-type(1):after { display: none;}

}

@media only screen and (max-width: 430px) {
    .case-box { grid-template-columns: 1fr;}
	
}

@media only screen and (max-width: 414px) {
	.new-pro-list > a { width: 100%; }
	
	
}

@media only screen and (max-width: 320px) {
	.download-list > a { width: 100%; padding: 0 0 30px 0;}
	
	.video-list > a { width: 100%;}
}