/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,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:1440px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 18px; line-height:1.5; color: #666; letter-spacing: 0; font-weight: 400; padding-top: 90px;}

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

header { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); }

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

.font-size-18 { font-size: 18px}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.6vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-32 { font-size: clamp(22px, 2.6vw, 32px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(26px, 3.3vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(26px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(26px, 3.5vw, 48px); line-height: 1.3;}
.font-size-50 { font-size: clamp(28px, 3.5vw, 50px); line-height: 1.3;}
.font-size-60 { font-size: clamp(32px, 4vw, 60px); line-height: 1.2;}

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

.color-white { color: #fff !important;}
.color-red { color: #cb1d20 !important;}
.color-blue { color: #184598 !important;}
.color-blue-2 { color: #218fc5 !important;}
.color-orange { color: #e17a15 !important;}
.color-gray { color: #a3a7af !important;}
.color-green { color: #32a2b0 !important;}
.color-black { color: #333 !important;}

.bg-blue-1 { background: #1468b0;}
.bg-blue-2 { background: #118ac3;}

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

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

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

.width-1120 { max-width: 1120px; margin: 0 auto;}

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

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

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

.banner { position:relative; height: 410px; }
.banner img { object-fit: cover; width: 100%; height: 100%; object-position: center right;}
.banner-pc { }
.banner-mobile { display: none;}

.title-1 { padding:0 0 calc(20px + 2%) 0; margin:0 0 calc(20px + 2%) 0; font-weight: 700; color: #184598; font-size: clamp(28px, 3.2vw, 50px); position: relative; border-bottom: 1px solid #e8eaeb; line-height: 1.1; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,sans-serif; letter-spacing: 0;}
.title-1:after { content: ""; position: absolute; left: 0; bottom: -1px; background: #1c81cf; width: 145px; height: 1px;}

.btn-1 { display: block; width: 220px; height: 50px; border-radius: 25px; position: relative; background: linear-gradient(90deg, #0e509a 0%, #47c3ca 100%); overflow: hidden; border-width: 0;}
.btn-1:hover > div { left: 50%;}
.btn-1:hover > img { right: -30px;}
.btn-1 > div { position:absolute; color: #fff; font-size: 15px; font-weight: 500; left: 42%; top:50%; transform: translate(-50%, -50%);transition: all 0.4s ease-out 0s; }
.btn-1 > img { position:absolute; width: 25px; top:50%; right: 18px; transform: translateY(-50%);transition: all 0.4s ease-out 0s; }

.idx-main-section { position: relative;}
.left-bg-pto  { position: absolute; z-index: 1; top:50%; transform: translateY(-50%); left: 24px;  width: 8%; pointer-events:none;}

.bottom-bg { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; mix-blend-mode: multiply; display: none;}

.inner-top-section { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap;}
.inner-top-section > div:nth-of-type(3) { position: absolute; z-index: 2; top:25%; left: 0; width: 100%; padding: 0 3%;}

#path { padding: 15px 3% 12px 3%; background: #fff; border-bottom: 1px solid #efefef;}
#path ul { margin: 0 auto; padding: 0; text-align: right; line-height: 1;}
#path li { display: inline-block; vertical-align: top; line-height: 1.2; font-size: 13px; letter-spacing: 0rem; position: relative; font-weight: 400;padding: 0 20px 0 0; margin-bottom: 3px;}
#path li img { width: 15px; display: inline-block; position: relative; margin-right: 4px; top:-2px;}
#path li:after { content:""; display: inline-block; width: 5px; height: 5px; background: #e3edf2; top:50%; border-radius: 100%; transform: translateY(-50%); right: 6px;  position: absolute;}
#path li:last-child { pointer-events: none; padding-right: 0;}
#path li:last-child:after { display: none;}
#path li a { color: #72a6c0; }
#path li a:hover { color: #184598;}
#path li:last-child { color: #184598;}

.banner-title { display: flex; flex-direction: column; flex-wrap: nowrap; max-width: 670px; position: relative;}
.banner-title > div { line-height: 0.9; opacity: 0.35; color: #d0dee4; font-size: 5vw; font-weight: 700; position: absolute; top: -50px;z-index: -1;display: none;}
.banner-title > h1 { position: relative; z-index: 2;padding:0 0 20px 0; margin:0 0 0 0; font-weight: 700; color: transparent; font-size: 3vw; line-height: 1.2; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,sans-serif; letter-spacing: 0; background: linear-gradient(90deg, #04509c 0%, #189dd4 50%, #76c8c1 100%); background-clip:text; width: fit-content;}
.banner-title > span { display: block;position: relative; z-index: 2; color: #b1babe; line-height: 1.3;}

.seo-data { text-align: center; padding-bottom: calc(20px + 1.5%);}
.seo-data-2 { padding-top: calc(20px + 1.5%);}

/*composition*/
.composition-section-1 {
background-image: url("../images/composition-bg-1.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.aside-menu-1 { width: 100%; margin: 0 auto calc(20px + 2%) auto; border-bottom: 1px solid #efefef; padding: 10px 3%; position: relative; z-index: 5;}

.composition-section-1-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.composition-section-1-content > div:nth-of-type(1) { width: calc(50% - 60px); text-align: center; padding: 30px 5% 0 5%;}
.composition-section-1-content > div:nth-of-type(2) { width: calc(50% + 60px);}

.data-type-1 { position:relative; padding-bottom: calc(20px + 2%); padding-left: 30px;}
.data-type-1:before { content: ""; position: absolute; width: 15px; height: 15px; background: url("../images/list-icon.png") no-repeat top center / contain; left: 3px; top: 8px;}
.data-type-1 .title-type-1 { padding-bottom: 10px;}

.composition-section-2 { position: relative; padding: calc(20px + 4%) 3% calc(20px + 2%) 3%;}
.composition-section-2:before { position: absolute; content: ""; background:url("../images/composition-bg-2.jpg") no-repeat top center / cover; height: 480px; top: 0; left: 0;  width: 100%; z-index: -1;}

.composition-section-2-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding-top: calc(20px + 2%);}
.composition-section-2-content > div { width: 30%; padding-bottom: calc(20px + 2%);}
.composition-section-2-pto { border-radius: 20px; overflow: hidden; margin-bottom: 12px;}
.composition-section-2-title { color: #184598; font-weight: 600;font-size: clamp(20px, 1.9vw, 24px); text-align: center; padding-bottom: 8px;}

.composition-bottom-section { position: relative;}

.composition-section-3 { position: relative; padding: calc(20px + 4%) 10% 0 10%;}
.composition-section-3:before { position: absolute; content: ""; background:#f0f4f8; height: 700px; top: 0; left: 0;  width: 100%; z-index: -1;}
.composition-section-3 .title-1 { width: fit-content; margin: 0 auto 20px auto; padding-bottom: calc(20px + 1%)}

.font-gradient { color: transparent; background: linear-gradient(90deg, #184598 0%, #46b6d2 50%, #2cdfc4 100%); background-clip:text;}
.font-gradient-2 { color: transparent; background: linear-gradient(90deg, #2e86ba 0%, #46b6d2 50%, #39d0c9 100%); background-clip:text;}

.composition-section-3-content { background: #fff; position: relative; z-index: 3; border-radius: 4vw 4vw 0 0; padding: calc(20px + 4%) 7%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.composition-section-3-content > div { width: 45%;}

.composition-section-3-data { border-bottom: 1px solid #e4e4e4; padding: 14px 18px; }
.composition-section-3-data > b { display: block; color: #00a1e4; font-weight: 700; }

.idx-service-section { background: #ddeff9; position: relative; padding: calc(20px +  5%) 0;}
.idx-service-section:after { content: ""; position: absolute; z-index: 0; width: 65%; height: 100%; background: #fff; top: 0; right: 0;border-radius: 0 0 0 7vw;}
.idx-service-left-top-bg {  position: absolute; z-index: 0; width: 35%; height: 150px; background: #fff; top: 0; left: 0;}
.idx-service-left-top-bg:before {  content: ""; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: #ddeff9; border-radius: 0 7vw 0 0;}

.idx-service-section .content-Box { z-index: 2;}
.idx-service-section .title-1 { width: fit-content; margin: 0 auto 20px auto; padding-bottom: calc(20px + 1%)}

.composition-section-4-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.composition-section-4-content > div { width: calc(50% - 20px); background: rgba(255,255,255,.7); border-radius: 20px; padding: calc(20px + 2%) calc(20px + 1%) calc(5px + 1%) calc(20px + 1%); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}

.composition-section-5 { background: url("../images/bottom-bg-2.jpg") no-repeat bottom center #ddeff9; background-size:100%; padding: calc(20px + 3.5%) 3% 20px 3%;}
.composition-section-5-content { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.composition-section-5-content > div:nth-of-type(1) { width: 33%;}
.composition-section-5-content > div:nth-of-type(2) { width: 67%; padding-left: 4%;}

/*products*/
/*.inner-top-bg { background: url("../images/top-bg.png") no-repeat top right; background-size: 27%;}*/

.products-section { padding: 0 2% calc(20px + 3.5%) 2%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;} 
.products-section > div { width: calc(50% - 6px); margin-bottom: 12px; background: radial-gradient(circle, #fff 20%, #f4f8fa 100%); position: relative; padding: calc(20px + 2.5%) calc(20px + 2%) calc(20px + 2%) calc(20px + 2%); border-radius: 20px; } 

.title-2 { padding:0 0 20px 0; margin:0 0 25px 0; font-weight: 700; color: #04509c; font-size: clamp(22px, 3.3vw, 36px); position: relative; }
.title-2:after { content: ""; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg, #04509c 0%, #26ccd5 90%); width: 50px;; height: 2px;}

.title-2-b { padding:0 0 20px 0; margin:0 auto 25px auto; font-weight: 700; color: #04509c; font-size: clamp(28px, 3.5vw, 50px); position: relative; max-width: 588px; text-align: center; border-bottom: 1px solid #d7dbe3; z-index: 3;}
.title-2-b:after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; background: linear-gradient(90deg, #0062c3 0%, #31d8c2 90%); width: 80px;; height: 2px;}

.products-section-pto { border: 1px solid #e5e9eb; border-radius: 20px; width: 38%; overflow: hidden; margin-top: calc(20px + 5%);}
.products-section-pto img { width: 100%; }

.products-pro { position: absolute; bottom: 0; right: 0; transform-origin: 100% 100%;transition: all 0.4s ease-out 0s; width: 50%; display: block;}
.products-pro img { width: 100%; }
.products-pro:hover { transform: scale(1.1);}

/*products-list*/
/*.inner-bottom-bg { background: url("../images/bottom-bg.png") no-repeat bottom center; background-size: 100%;}*/

.products-list-section {display: flex; flex-direction: row; flex-wrap: wrap; padding: calc(20px + 2%) 2% calc(20px + 5%) 2%;}
.products-list-section > div:nth-of-type(1) { width: 300px;}
.products-list-section > div:nth-of-type(2) { width: calc(100% - 300px); padding-left: 5%; padding-top: 25px;}

.aside-title > a { padding: 20px 10px !important; font-weight: 700 !important;font-size: clamp(22px, 2.5vw, 30px) !important;color: transparent !important; background: linear-gradient(90deg, #184598 0%, #46b6d2 50%, #2cdfc4 100%); background-clip:text;}
.aside-title:hover > a { background: linear-gradient(90deg, #184598 0%, #46b6d2 50%, #2cdfc4 100%) !important; background-clip:text !important;}
.aside-title:hover:after { height: 1px !important; background:#ededed !important;}

.filter-bar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: 20px;}
.filter-bar > div:nth-of-type(1) { width: 124px; height: 40px; position: relative; border-radius: 20px; border: 1px solid #e1e3e6;display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background: #fff;}
.filter-bar > div:nth-of-type(1) > img { width: 24px;}
.filter-bar > div:nth-of-type(1) > span { display: inline-block; padding-left: 12px; line-height: 1; color: #184598; font-weight: 600; font-size: 16px}
.filter-bar-btn { position: absolute; top:0; left: 0; width: 100%; height: 100%;display:none; z-index: 2; cursor: pointer;}
.filter-bar > div:nth-of-type(2) { width: calc(100% - 124px); padding-left: 13px;display: flex; flex-direction: row; flex-wrap: wrap;transition: all 0.4s ease-out 0s; }
.filter-bar > div:nth-of-type(2) > div { padding-right: 13px; padding-bottom: 13px;}
.filter-bar-select-box { cursor: pointer; position: relative;}
.filter-bar-select { height: 40px; border-radius: 20px; background: #f2f4f7;display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 20px; min-width: 170px;}
.filter-bar-select > span { display: inline-block; font-weight: 600; font-size: 15px; color: #184598; padding-right: 12px;}
.filter-bar-select > img { width: 9px;}
.filter-bar-select-open { position: absolute; z-index: 3; left: 0; width: 100%; border-radius: 10px; background: #f2f4f7; padding: 15px;display: none;}
.filter-bar-select-open > div { padding-bottom: 10px;}
.filter-bar-select-open-show { display: block;}

.filter-bar-mobile-close { display: none; top:80px; right: 20px; cursor: pointer; position: absolute;}
.filter-bar-mobile-close img { width: 20px;}

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

.filter-result { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; padding-bottom: calc(20px + 2%);}
.filter-result > div:nth-of-type(1) { width: 53px; font-size: 15px; color: #72a6c0; line-height: 1.1;}
.filter-result > div:nth-of-type(2) { width: calc(100% - 53px); display: flex; flex-direction: row; flex-wrap: wrap; }
.filter-result > div:nth-of-type(2) > div { line-height: 1.1; padding: 0 20px 0 0; margin: 0 20px 15px 0;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-right: 1px solid #d1d5da; cursor: pointer;}
.filter-result > div:nth-of-type(2) > div > span { font-size: 15px; color: #72a6c0; display: inline-block; padding-right: 8px;}
.filter-result > div:nth-of-type(2) > div > img { width: 9px;}

.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.pro-list > a { width: 33.33%; border-radius: 30px; padding: 2px; background: none;box-shadow: 0px 0px 30px 0px rgba(0,0,0,0);}
.pro-list > a:hover { background: linear-gradient(46deg, #1661a1 0%, #3dafc2 50%, #4fd7b7 100%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);}
.pro-list > a > div { background: none; padding: 35px; border-radius: 28px;}
.pro-list > a:hover > div { background: #fff;}
.pro-list-pto { padding-bottom: 100%;}
.pro-list-title { text-align:center; font-weight: 700;font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; padding-bottom: 15px; color: #184598;}
.pro-list-data { color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}

#page { text-align: center; padding:0 0 calc(10px + 1%) 0;}
#page a { font-size: 16px; color: #333; font-weight: 400; width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 100%; display: inline-block;}
#page a:hover, #page a.current { background: #004a9a; 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);}

/*products-detail*/
.products-detail-top {display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 0 calc(20px + 2%) 0;}
.products-detail-top > div { width: 50%;}
.products-detail-top > div:nth-of-type(1) { padding: calc(20px + 3.5%) 2.5%;}
.products-detail-top > div:nth-of-type(2) { background: #ecf3f8; border-bottom-left-radius: 4vw; padding: calc(20px + 3.5%) calc(20px + 6%);}


.products-detail-top-left { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.products-detail-top-left > div:nth-of-type(1) { width: 110px;position: relative;}
.products-detail-top-left > div:nth-of-type(2) { width: calc(100% - 110px); position: relative; padding: 0 3%;}


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

.swiper-container-wrapper {
  display: flex;
  flex-flow: column nowrap;
}
@media (min-width: 280px) {
  .swiper-container-wrapper {
    flex-flow: row nowrap;
  }
}

.gallery-next, .gallery-prev {position: absolute; width: 16px; height: 16px; border-width: 3px 3px 0 0; border-style: solid; border-color: #348fba; left: 50%; }
.gallery-prev { top: -25px; transform:translateX(-50%) rotate(-45deg);}
.gallery-next { bottom: -25px; transform:translateX(-50%) rotate(135deg);}

.swiper-slide {
  text-align: center;
  background-size: cover;
  background-position: center;
  /* Center slide text vertically */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  /* Slide content */
}


.gallery-top {
  position: relative;
  width: 100%;
}
@media (min-width: 280px) {
  .gallery-top {
    width: 100%;
    margin-right: 10px;
  }
	.gallery-swiper-pagination { bottom: -30px !important;}
}

.gallery-thumbs {
  width: 100%;min-height: 420px;
    height: 0;
  padding-top: 0px;
}
@media only screen and (max-width: 980px) {
  	.gallery-thumbs {min-height: 300px;}
}
@media only screen and (max-width: 679px) {
  	.gallery-thumbs {min-height: 200px;}
}
.gallery-thumbs .swiper-wrapper {
  flex-direction: row;
}
@media (min-width: 280px) {
  .gallery-thumbs .swiper-wrapper {
    flex-direction: column;
  }
}
.gallery-thumbs .swiper-slide {
  width: 100%;
  flex-flow: row nowrap;
  height: 100%;
  cursor: pointer;
}
@media (min-width: 280px) {
  .gallery-thumbs .swiper-slide {background: #e1e3e6; overflow:hidden; padding: 1px;
    ;border-radius: 10px; 
    width: 100%;
  }
	.gallery-thumbs .swiper-slide > div { background: #fff;display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; height: 100%;border-radius: 8px; }
}
.gallery-thumbs .swiper-slide-thumb-active {padding: 2px; background: linear-gradient(46deg, #1661a1 0%, #3dafc2 50%, #4fd7b7 100%);
  
}


.p-detail-title { padding:0 0 12px 0; margin:0 0 0 0; font-weight: 700; font-size: clamp(26px, 3.5vw, 44px); line-height: 1.2; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,sans-serif; letter-spacing: 0; color: #04509c;}
.p-detail-type { font-weight: 600; color: #b4c1cd; line-height: 1.3; padding-bottom: calc(20px + 2%);}

.p-detail-description { height: 300px;}

.p-detail-ce-list { margin: 20px 0 30px 0; border-top: 1px solid #dfe1e3;  border-bottom: 1px solid #dfe1e3; padding: 12px 12px 6px 12px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.p-detail-ce-list > div { margin-right:calc(10px + 1vw); margin-bottom: 6px;}

.p-detail-bottom-box { position: relative;}
.p-detail-bottom-box .left-bg-pto { top:auto; bottom: 10%; transform: none;}
.p-detail-bottom-section { position: relative; z-index: 3;}

.p-detail-tab-section { padding-left: 3%; padding-right: 3%;}

.p-detail-video-section { width: 100%; margin: 0 auto calc(20px + 4%) auto; background: #ecf3f8; border-radius: 4vw; padding: calc(20px + 2.5%) 10px calc(20px + 1.5%) 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center;}
.p-detail-video-section > a { display: block; max-width: 280px; margin: 0 15px 20px 15px; border-radius: 10px; border: 2px solid #21b0c3; overflow: hidden; position: relative;}
.p-detail-video-section > a:hover .p-detail-video-btn { transform:translate(-50%, -50%) scale(0.7);}
.p-detail-video-section > a > img { width: 100%;}
.p-detail-video-btn { position: absolute; z-index: 1; top:50%; left: 50%; transform: translate(-50%, -50%); width: 20%;transition: all 0.4s ease-out 0s;}

.title-3 { padding:0 0 20px 0; margin:0 0 20px 0; font-weight: 700; color: #184598; font-size: clamp(26px, 3.5vw, 45px);border-bottom: 1px solid #e8eaeb; position: relative; line-height: 1.2; width: fit-content; }
.title-3:after { content: ""; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg, #0062c3 0%, #31d8c2 90%); width: 150px;; height: 2px;}

.p-detail-feature { display: flex; flex-direction: row; flex-wrap: wrap;}
.p-detail-feature > div:nth-of-type(1) { width: 68%; padding-right: 4%;}
.p-detail-feature > div:nth-of-type(2) { width: 32%; }

.p-detail-feature-pto { position: relative; border-radius: 20px; border: 1px solid #cecece; padding: 28px; display:block;}
.p-detail-feature-pto-btn { position: absolute; top: 10px; right: 10px; z-index: 2;}

.data-type-2 { position:relative; border-bottom: 1px dotted #c8d0d5; padding-bottom: 20px; margin-bottom: 20px; padding-left: 50px;}
.data-type-2 > span { position: absolute; display: block; width: 30px; height: 30px; border-radius: 100%; text-align: center; line-height: 28px; color: #fff; font-weight: 700; background: linear-gradient(31deg, #2e7dbe 0%, #22badb 50%, #46d1c0 100%); left: 0; top: 0;}
.data-type-2 > b {  color: #184598; font-weight: 600;font-size: clamp(18px, 1.5vw, 20px); display: block; padding-bottom: 8px;}

.related-pro-section { background: #ecf3f8; padding: calc(20px + 5%) 3%;}
.related-pro-section .content-Box { z-index: 3;}
.related-pro-section .title-3 { font-size: clamp(26px, 3.3vw, 40px); margin-left: auto; margin-right:auto;}

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

.related-pro-link { display: block;}
.related-pro-link:hover .related-pro-pto-box{ transform: scale(0.9);box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.related-pro-pto-box { background: #fff; border-radius: 20px; margin-bottom: 18px; padding: 20px; transition: all 0.4s ease-out 0s;}
.related-pro-pto { padding-bottom: 100%;}
.related-pro-pto { padding-bottom: 100%;}
.related-pro-title { font-weight: 700;font-size: clamp(18px, 1.5vw, 20px); text-align: center; color: #184598;}

.datatable .bg-blue-1 { background: #1468b0;}
.datatable .bg-blue-2 { background: #118ac3;}

.pro-download-section { display: flex ;flex-direction: row; flex-wrap: wrap; padding-top: 20px;}
.pro-download-section > a { width:25%; padding: 0 0.6vw 20px 0.6vw; display: block; }
.pro-download-section > a:hover .pro-download-box{ background: linear-gradient(40deg, #2278ab 0%, #14d0db 100%); }
.pro-download-section > a:hover .pro-download-name { color: #184598;}
.pro-download-section > a:hover .pro-download-btn { background: linear-gradient(30deg, #3398c3 0%, #77dbd3 90%);}
.pro-download-box { overflow: hidden; border-radius: 20px; transition: all 0.4s ease-out 0s; padding: 3px;  border: 1px solid #dadfe1; }
.pro-download-content { background: #fff;position: relative;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-radius: 18px; padding: 0 7%;  min-height: 190px;}
.pro-download-name { font-weight: 700;font-size: clamp(18px, 1.7vw, 22px); color: #333; width: 65%; line-height: 1.2;}
.pro-download-icon { position: absolute; top:14px ;right: 14px;}
.pro-download-icon img { width: 50px;}
.pro-download-btn { position: absolute; display: inline-block; bottom: 14px; left: 7%; line-height: 30px; border-radius: 15px; padding: 0 10px; color: #fff; font-size: 12px; font-weight: 600;background: linear-gradient(30deg, #49b1d0 0%, #49b1d0 90%);}
.pro-download-btn-2 {position: absolute; bottom: 14px; right: 14px; }
.pro-download-btn-2 img { width: 20px; }

/*application*/
/*.application-section-bg { padding: 0 3% calc(20px + 5%) 3%; background: url("../images/bottom-bg.png") no-repeat bottom center; background-size: 100%;}*/

.application-section { display: flex ;flex-direction: row; flex-wrap: wrap;}
.application-section > a { display: block; padding: 2px; border-radius: 20px; background: linear-gradient(46deg, #fff 0%, #fff 50%, #fff 100%); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0); margin: 0 35px calc(20px + 2.5%) 35px; width: calc(33.33% - 70px);}
.application-section > a:hover { background: linear-gradient(46deg, #1661a1 0%, #3dafc2 50%, #4fd7b7 100%); box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);}
.application-section > a:hover .application-content  { border: 0px solid transparent;}
.application-content { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e3eaf0;}
.application-pto { padding-bottom: 60.7%; }
.application-icon { width: 82px; height: 82px; border-radius: 100%; background: #fff; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content:center; position: absolute; z-index: 3; top: -41px; left: 30px;}
.application-icon img { max-height: 50px; max-width: 50px;}
.application-data { padding: 60px 30px 40px 30px;position: relative;}
.application-title { font-weight: 700; color: #333;font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; padding-bottom: 15px;}
.application-info { color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

/*download*/
.download-search { width: 100%; max-width: 595px; margin: 0 auto calc(20px + 2%) auto; height: 60px; border-radius: 30px; border: 1px solid rgba(204,218,228,.35); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); padding: 0 22px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; background: #fff;}
.download-search > input { background: none; border-width: 0; width: calc(100% - 23px); padding-right: 10px; font-size: 18px; color: #666;}
.download-search > a { width: 23px;}
.download-search > a img{ filter: brightness(0);transition: all 0.4s ease-out 0s;}
.download-search > a:hover img{ transform: scale(0.8);}

.download-header { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 3px solid #dadada; padding: 20px 0; font-weight: 600;  font-size: 15px; color: rgba(102,102,102,.54);}
.download-header > div:nth-of-type(1) { width: 230px; text-align: center;}
.download-header > div:nth-of-type(2) { width: calc(100% - 230px - 180px); text-align: left; padding: 0 1.4vw;}
.download-header > div:nth-of-type(3) { width: 180px; text-align: center;}

.sort-group { display: flex; flex-flow: wrap; align-items: flex-end; justify-content: flex-end; border-bottom: 3px solid #dadada;}
.sort-group .sort-item { margin-right: calc(20px + 0.5%); display: flex; flex-flow: row; align-items: flex-end; padding-bottom: 20px;}
.sort-group .sort-item:last-child { margin-right: 0;}
.sort-group .sort-item label { font-size: 18px; margin-right: 10px; color: #575757; font-weight: 600; margin-bottom: 0;}
.sort-group .sort-item select { padding: 0px 35px 0px 15px; line-height: 35px; border-radius: 5px; background-color: #fff; color: #333; font-size: 16px; border: 1px solid #ddd; outline: none; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 8px) 8px; background-size: 20px 19px; -webkit-appearance: none; -moz-appearance: none; min-width: 108px; transition: all 0.4s ease-out 0s;}

.download-list-section { padding-bottom: calc(20px + 2.5%);}
.download-list { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e3e3e3; padding: 30px 0;}
.download-list:after { position: absolute; content: ""; width: 0%; height: 100%; top: 0; right: 0; background: linear-gradient(90deg, #ebf2fa 0%, #effafd 100%);transition: all 0.4s ease-out 0s; }
.download-list:hover:after { width: 100%; left: 0; }
.download-list > div { position: relative; z-index: 3;}
.download-list > div:nth-of-type(1) { width: 230px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;justify-content: center; position: relative;}
.download-list > div:nth-of-type(1):after { content: ""; position: absolute; width: 1px; height: 22px; background: #d0d0d0; right: 0; top:50%; transform: translateY(-50%);}
.download-list > div:nth-of-type(1) > img { width: 30px; }
.download-list > div:nth-of-type(1) > div { color: #333; font-size: 15px; padding-left: 20px;}
.download-list > div:nth-of-type(2) { width: calc(100% - 230px - 180px); text-align: left; padding: 0 1.4vw; font-weight: 500; color: #333;}
.download-list > div:nth-of-type(3) { width: 180px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;justify-content: center;}
.download-list > div:nth-of-type(3) > div { color: #333; font-size: 15px; padding-right: 20px;}
.download-list > div:nth-of-type(3) > img { width: 26px; }

/*news*/
.news-section { padding-bottom: calc(20px + 2.5%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.news-section > a { width: calc(50% - 23px); border-radius: 20px; border: 1px solid #dcdcdc; padding: 28px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; background: #fff; margin-bottom: calc(20px + 1%);}
.news-section > a:hover { transform: scale(0.95); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.news-section > a > div:nth-of-type(1) { width: 40%; padding-right: 40px;}
.news-section > a > div:nth-of-type(2) { width: 60%; position: relative; padding-left: 30px; }
.news-section > a > div:nth-of-type(2):before { content: ""; position: absolute; width: 1px; height: 100%; background: #dcdcdc; left: 0; top: 50%; transform: translateY(-50%);}
.news-pto { padding-bottom: 100%;}
.news-top-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.news-top-tag { line-height: 30px; border-radius: 15px; padding: 0 15px; background: #3bacc0; color: #fff; font-size: 14px; font-weight: 500; }
.news-top-date { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.news-top-date > div:nth-of-type(1) { line-height: 1; color: #3bacc0; font-weight: 700; padding-right: 12px; font-size: 50px;}
.news-top-date > div:nth-of-type(2) { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; color: #3bacc0; font-size: 14px; font-weight: 500; }

.news-title { font-weight: 700;font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; margin-bottom: 14px; color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.news-data { font-size: 16px; color: #777; line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}

/*about*/
.about-section-1-a { display:flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding-bottom: 30px;}
.about-section-1-a > div:nth-of-type(1) { width: calc(50% - 30px); padding-right: 8%;}
.about-section-1-a > div:nth-of-type(2) { width: calc(50% + 30px); }

.about-section-1-b { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 30px;}
.about-section-1-b > div:nth-of-type(1) { width: calc(50% + 30px);}
.about-section-1-b > div:nth-of-type(2) { width: calc(50% - 30px);  padding-left: 8%;}

.about-section-2 { background: url("../images/about-bg.jpg") no-repeat center center; background-size: cover; padding: calc(20px + 4%) 3%;}
.about-section-2-content { display:flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;}
.about-section-2-content > div:nth-of-type(1) { width: 48%;}
.about-section-2-content > div:nth-of-type(2) { width: 40%;}

.about-section-2-data { border-radius: 20px; background: rgba(255,255,255,.15);display:flex; flex-direction: row; flex-wrap: wrap; padding: calc(20px + 2%);}
.about-section-2-data > div { width: 33.33%; padding: 0 3%; position: relative; text-align: center; color: #fff; font-weight: 500; font-size: 16px; line-height: 1.4;}
.about-section-2-data > div:after { content: ""; position: absolute; width: 1px ; height: 90px; background: #fff; opacity: 0.2; top:0; right: 0;}
.about-section-2-data > div:last-child:after { display: none;}

.about-section-3-bg { background: #f1f3f6; position: relative;}
.about-section-3 { padding: calc(20px + 5%) 0 calc(40px + 6%); position: relative; z-index: 3;}

.history-section { position: relative; padding: 30px 0;}
.history-section:before { position: absolute; content: ""; width: 1px; height: 100%; background: #dfdfdf; top: 0; left: 50%; transform: translateX(-50%);}
.history-section:after { position: absolute; content: ""; width: 1px; height: 22px; background: #dfdfdf; transform-origin: 50% 0%; top: 0; left: 50%; transform: translateX(-50%) rotate(-40deg);}
.history-list { position: relative; margin-bottom:28px;display:flex; flex-direction: row; flex-wrap: wrap;  justify-content: space-between; align-items: center; }
.history-list > div { width: calc(50% - 45px);}
.history-list > div:nth-of-type(1) { padding: 25px; background: #fff; border-radius: 15px; color: #333;}
.history-list > div:nth-of-type(2) { color: #cccfd4; font-size: 30px; font-weight: 700;}
.history-list-b > div:nth-of-type(1) { order: 2;}
.history-list-b > div:nth-of-type(2) { order: 1; text-align: right;}
.history-list > img { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
.history-data { position: relative; padding-left: 22px; font-weight: 500; line-height: 1.4;}
.history-data:before { content: ""; position: absolute; width: 12px; height: 3px; background: #cccfd4; left: 0; top:11px;}

.history-layout { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.history-layout > div:nth-of-type(1) { width: 170px;}
.history-layout > div:nth-of-type(2) { width: calc(100% - 170px); padding-left: 20px;}

/*contact*/
/*.contact-bg { background: url("../images/bottom-bg.png") no-repeat bottom center; background-size: 100%; padding-bottom: calc(20px + 6%);}*/

.contact-info { display:flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 1.5%); padding-top: 15px;}
.contact-info > div { width: 25%;display:flex; flex-direction: row; flex-wrap: wrap; padding: 0 15px 20px 15px;}
.contact-info > div > div:nth-of-type(1) { width: 60px;}
.contact-info > div > div:nth-of-type(2) { width: calc(100% - 60px); padding-left: 1.5vw; line-height: 1.3;}
.contact-info > div > div:nth-of-type(2) > b { color: #184598; font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; display: block; padding-bottom:6px; line-height: 1.3;}

.contact-form {  border: 1px solid rgba(196,196,196,.22); background: rgba(230,239,245,.4); padding: calc(20px + 2%) calc(20px + 3.5%); border-radius: 4vw; margin-bottom: 50px; }
.contact-layout-50 { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-50 > div { width: 49.5%; margin-bottom: 15px;}
.contact-layout-100 { margin-bottom: 15px;}

.contact-row-1 { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.contact-row-1 > div:nth-of-type(1) { width: 130px; font-weight: 500; color: #333;}
.contact-row-1 > div:nth-of-type(1) span { color: #47a4fc;}
.contact-row-1 > div:nth-of-type(2) { width: calc(100% - 130px);}

.contact-row-1-b> div:nth-of-type(1) { width: 230px; }
.contact-row-1-b > div:nth-of-type(2) { width: calc(100% - 230px);}

.contact-row-2 { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.contact-row-2 > div:nth-of-type(1) { width: 38%; }
.contact-row-2 > div:nth-of-type(2) { width: 62%; }

.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:1px; border-style: solid; border-color: rgba(233,233,233,.72); margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: #fff; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,sans-serif; line-height: 55px; border-radius: 5px; }
.contact-form textarea { height:200px; padding:15px; resize:none; line-height: 140%;}
.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% - 12px) 18px; background-size: 20px 19px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; font-size: 16px; border-width:1px; border-style: solid; border-color: rgba(233,233,233,.72); color:#333; font-family: 'Microsoft JhengHei', '微軟正黑體', Helvetica, Arial,sans-serif;  padding:0px 35px 0px 15px;  line-height: 55px; border-radius: 5px; font-weight: 400; letter-spacing: 0;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}

.contact-note3 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 22px; 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: 1.3; color: #333; margin-bottom: 0; font-weight: 400; font-size: 18px;}
.contact-note3 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.contact-note3 .checkmark {position: absolute;top: 4px;left: 0;height: 16px;width: 16px;background-color: transparent; border: 1px solid #cccccc; border-radius: 100%;}
.contact-note3:hover input ~ .checkmark {}
.contact-note3 input:checked ~ .checkmark {border-color: #1b90f8;}
.contact-note3.checkmark:after {content: "";position: absolute;display: none;}
.contact-note3 input:checked ~ .checkmark:after {display: block;}
.contact-note3 .checkmark:after {left: 50%;top: 50%; transform: translate(-50%, -50%);width: 7px;height: 7px; background: #1b90f8; border-radius: 100%;}

.contact-policy { padding-bottom: calc(15px + 1%); text-align: center;}
.contact-policy a { color: #333; text-decoration: underline;}

.contact-note4 {  margin-top: 20px; display: inline-block;position: relative;padding-left: 22px; 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; margin-bottom: 0; font-weight: 400;}
.contact-note4 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.contact-note4 .checkmark2 {position: absolute;width: 24px;height: 24px; background: #fff; border-radius: 5px; left: -8px; top: -2px; border:1px solid #d1d1d1;}
.contact-note4:hover input ~ .checkmark2 {background-color: #fff;}
.contact-note4 input:checked ~ .checkmark2 {border-color: #0e509a;}
.contact-note4 .checkmark2:after {content: "";position: absolute;display: none;}
.contact-note4 input:checked ~ .checkmark2:after {display: block;}
.contact-note4 .checkmark2:after {top: 2px;left:6px;height: 15px;width: 10px;background-color: transparent; border-width: 0 3px 3px 0; border-color: #0e509a; border-style: solid; transform: rotate(45deg);}

.contact-form .btn-1 { margin-left: auto; margin-right: auto;}

.imgCenter-full {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-full img {width: 100%!important;height: 100%!important;object-fit: cover;margin: 0;padding: 0;}

.mb-xl{margin-bottom: 100px;}
.mb-l{margin-bottom: 80px;}
.mb-m{margin-bottom: 60px;}
.category-head {text-align: center;}
.category-head h1{font-weight: 700;color: #184598;font-size: clamp(28px, 3.2vw, 50px);line-height: 1.3;margin: 0 0 20px 0;}
.category-head .category-desc{max-width: 960px;margin: 0 auto;}
.category-title{font-weight: 700;color: #184598;font-size: clamp(28px, 3.2vw, 50px);line-height: 1.3;margin: 0 0 20px 0;position: relative;border-bottom: 1px solid #e8eaeb;padding: 0 0 10px 0;}
.category-title::before{content: "";position: absolute;left: 0;bottom: -1px;background: #1c81cf;width: 145px;height: 1px;}

.sec-category img{margin: 0;}
.wei-A .grid {display: grid;grid-template-columns: repeat(3, 1fr);gap:45px;}
.wei-A .grid .item{background: #fff;border: 1px solid #b1d6e7;padding: 35px 35px 40px 35px;border-radius: 20px;}
.wei-A .grid .item .pho{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 58.302%;border-radius: 20px;}
.wei-A .grid .item .title{color: #184598;font-weight: 600;font-size: 24px;margin: 20px 0 10px 0;}
.wei-B .prod-wrap {background: #fff;box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, .07);}
.wei-B .prod-wrap:not(:last-child) {margin-bottom: 60px;}
.wei-B .prod-wrap .prod{display: flex;flex-wrap: wrap;align-items: center;padding: 80px 0px;position: relative;}
.wei-B .prod-wrap .prod::before{position: absolute;content: "";top: 50%;left: 50%; transform: translate(-50%, -50%);width: 1px;height: 70%;background: #e8e8e8;}
.wei-B .prod-wrap .prod:nth-child(even) {margin-top: -80px;}
.wei-B .prod-wrap .prod .text-block {width: 50%;z-index: 2;position: relative;flex: auto;padding: 0 50px 0 65px;}
.wei-B .prod-wrap .prod .text-block .icon {font-size: 0;line-height: 0;}
.wei-B .prod-wrap .prod .text-block .icon img{height: 99px;margin: 0;}
.wei-B .prod-wrap .prod .pho-block {width: 50%;text-align: center;position: relative;z-index: 1;flex: auto;padding: 0 65px 0 50px;}
.wei-B .prod-wrap .prod .pho-block img{margin: 0;padding: 0;}
.wei-B .prod-wrap .prod .text-block .title{position: relative;font-size: clamp(22px, 3.3vw, 36px);line-height: 1.3;font-weight: bold;margin: 12px 0 20px 0;color: #333333;}
.wei-B .prod-wrap .prod .text-block .title::before {position: absolute;content: "";bottom: -5px;left: 0;width: 145px;height: 2px;background: #333a42;}
.wei-B .prod-wrap .prod .text-block .topic{color: #184598;font-weight:bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;}
.wei-B .prod-wrap:nth-child(even) .prod .text-block{order: 2;padding: 0 65px 0 50px;}
.wei-B .prod-wrap:nth-child(even) .prod .pho-block{order: 1;padding: 0 50px 0 65px;}

.mus-A .intro{display: grid;grid-template-columns: 1fr 45.323%;gap:30px 60px;margin-bottom: 50px;}
.mus-A .intro .text-block .text-wrap{display: flex;flex-flow: column;gap:20px;}
.mus-A .intro .text-block .text-wrap .wrap .topic{color: #333333;font-weight: bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;}
.mus-A .intro .pho-block{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 58.984%;border-radius: 20px;}
.mus-A .con .item{padding: 30px 40px; box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, .07);border-radius: 20px;background: #fff;}
.mus-A .con .item .title{color: #333333;font-weight: bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;padding-bottom: 5px;border-bottom: 1px solid #e8eaeb;}
.mus-B {display: grid;grid-template-columns: 1fr 1fr;gap:50px;}
.mus-B .item{background: #ffffff;box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, .07);border-radius: 20px;padding: 50px 40px 55px 40px;}
.mus-B .item .title{color: #218fc5;font-weight: bold;text-align: center;font-size: clamp(26px, 1.9vw, 30px);}
.mus-B .item .pho-wrap{display: grid;grid-template-columns: 1fr 1fr;gap:40px;margin: 30px 0;}
.mus-B .item .pho-wrap .pho{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 90.32%;box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, .07);border-radius: 20px;}
.mus-B .item .text-wrap{display: flex;flex-flow: column;gap:15px;}

.in-A .intro{display: flex;flex-flow: wrap;gap:30px 5%;justify-content: center;align-items: center;}
.in-A .intro .pho-block{width: 36.21%;}
.in-A .intro .text-block{width: 53.307%;}
.in-A .intro .text-block .text-wrap{display: flex;flex-flow: column;gap: 20px;margin-bottom: 20px;}
.in-A .intro .text-block .text-wrap .wrap .topic{color: #333333;font-weight: bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;}
.in-A .intro .text-block .pho-sm-block{display: flex;flex-flow: nowrap;}
.in-A .intro .text-block .pho-sm-block .pho-sm {font-size: 0;line-height: 0;}
.in-A .intro .text-block .pho-sm-block .pho-sm img{max-height: 270px;}
.in-B{margin-bottom: 170px;}
.in-B .category-title{max-width: max-content;margin: 0 auto 110px auto;}
.in-B .intro{position: relative;display: grid;grid-template-columns: 1fr 1fr;gap:60px 100px;}
.in-B .intro::before{position: absolute;content: "";top: 50%;left: 50%;transform: translate(-50%,-50%);width: 1px;height: 137.8%;background: #333333;}
.in-B .intro .item{display: grid;grid-template-rows: subgrid;grid-row: span 3;gap: 0;text-align: center;}
.in-B .intro .item .title{color: #218fc5;font-weight: bold;text-align: center;font-size: clamp(26px, 1.9vw, 30px);margin-bottom: 15px;}
.in-B .intro .item .text{margin-bottom: 60px;}
.in-B .intro .item .pho-sm-block{display: flex;flex-flow: nowrap;justify-content: center;gap:20px;}
.in-B .intro .item .pho-sm-block .pho-sm {font-size: 0;line-height: 0;}
.in-B .intro .item .pho-sm-block .pho-sm img{max-height: 170px;}

.in-C .category-title{max-width: max-content;margin: 0 auto 60px auto;}
.in-C .intro{display: grid;grid-template-columns: 1fr 1fr;gap:30px 50px;margin-bottom: 30px;}
.in-C .text-wrap {display: flex;flex-flow: column;gap: 20px;}
.in-C .text-wrap .wrap .topic{color: #333333;font-weight: bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;}
.in-C .text-wrap .wrap .topic{color: #333333;font-weight: bold;font-size: clamp(20px, 1.9vw, 24px);margin-bottom: 10px;}
.in-C .eval .text-block {margin-bottom: 30px;}
.in-C .eval .pho-block {display: grid;grid-template-columns: 1fr 1fr;gap:50px;}
.in-C .eval .pho-block .pho{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 55.295%;}

.rec-models .rec-models-title{font-weight: 700;color: #184598;font-size: clamp(28px, 3.2vw, 50px);line-height: 1.3;margin: 0 0 4% 0;position: relative;text-align: center;}

.cms-title-2 { width:100%; height: auto; margin:30px auto 2% auto;  padding-top: 0px;  padding-bottom: 0;  display: flex; justify-content: center; align-items: center;  flex-wrap: wrap; flex-direction:column; background: none;  position: relative; z-index: 0;   }
.cms-title-2 h1,.cms-title-2 h2{ margin:0 auto;padding: 0px; width: 100%;  font-size:2.75rem; font-weight: 700;text-align: center; color:#184598;  position: relative; z-index: 1;   }
.cms-title-2 h3{ margin:0px;  font-size:1.063rem; font-weight: 500; color:#9e2b2f;}
.cms-title-2 h3::before {content: ""; position: absolute; z-index: 1; left: auto; transform: translate(-60%,-30%);  width: 18px; height: 18px; border-radius:99rem; background:rgba(158,43,47,.35);}
.cms-title-2 p{ margin:0px; font-size:1rem; font-weight: 700!important;color:#6c7280;  }

/* u310 style */
.section_feat{position: relative;margin-bottom: 60px;}
.section_feat .cms-title-2 h2 {font-size: 32px;line-height: 1.8;text-align: left;}
.feat_box{width: 100%;display: flex;flex-wrap: wrap;margin-bottom: 20px;}
.feat_box_w{width: 100%;padding: 0;}
.feat_box_bg{background-image: url(../images/coach-ipad.jpg);background-size: cover;height: 392px;background-repeat: no-repeat;position: relative;}
.feat_model{position: absolute;right: 0;top: -57%;}
.feat_model_hand{position: absolute;right: 27%;top: -60%;}
.feat_model_text{position: absolute; width: 300px;bottom: 8%;right: 5%;}
.feat_pr50{padding-right: 50%;}
.feat_pr40{padding-right: 40%;}
.feat_text{display: flex;flex-wrap: wrap;margin-top: 20px;}
.feat_text > div:nth-of-type(1) {width: 20%;text-align: center;} 
.feat_text > div:nth-of-type(1) img{width: 100px;} 
.feat_text > div:nth-of-type(2) {width: 80%;text-align: left;padding-left: 4%;display: flex;flex-wrap: wrap;align-content: center;} 
.feat_text > div:nth-of-type(2) .feat_h4{color: #008BA4;line-height: 1.5;margin-bottom: 12px;}
.feat_text > div:nth-of-type(2) p{margin: 0 !important;width: 100%;}
.feat_text_title_2{display: flex;flex-wrap: wrap;width: 100%;margin-bottom: 12px;}
.feat_textbox .feat_text .feat_text_title_2 .feat_h4 {width: 30%;margin-right: 4.5%;margin-bottom: 0;max-width: 100px;}
.feat_text_title_2 .feat_s {width: 30%;margin-right: 4.5%; border: 1px solid #184598;display: block;color: #184598;padding: 6px 12px;text-align: center;border-radius: 8px;align-content: center;}
.feat_text_title_2 .feat_s:last-child {margin-right: 0;}

/*video*/
.desc_video{display: flex;flex-direction: column;align-items: center;max-width: 800px;margin: 0 auto;}
.video_contents{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 56.25%;margin-bottom: 12px;}
.video_contents > iframe{position: absolute;top:0;left: 0;right: 0;bottom: 0;line-height: 0;}

.img_h {text-align: center;}
.img_h img{width: auto;height: 250px !important;}

@media only screen and (max-width: 1365px) {
	#content { padding-top: 55px; }
	#content , .p-layout { font-size: 16px;}
	
	.banner { height: 220px; }
	.banner-pc { display: none}
	.banner-mobile { display: block;}
	
	#path { margin-bottom: calc(20px + 2%);}
	#path ul { text-align:left;}
	
	.inner-top-section > div:nth-of-type(3) { position: inherit; top:auto; left: auto; padding-bottom: 20px; }
	
    .banner-title {padding-top: 20px;}
    .banner-title > div { font-size: clamp(30px, 5vw, 100px); top: 0;}
	.banner-title > h1 { font-size: clamp(28px, 4vw, 55px); line-height: 1;}
	
	.composition-section-1 { padding: 20px 0;}
	
	.aside-menu-1 { border-bottom: 0px solid #efefef; padding: 0px 3%; margin-bottom: 20px;}
	
	.inner-top-bg { background: none;}
	
	.products-list-section { padding-top: 0;}
	.products-list-section > div:nth-of-type(1) { width: 100%;}
	.products-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0;}
	
	.seo-data { text-align: left;}
	.seo-data-2 { padding-top: 0;}
}

@media only screen and (max-width: 1279px) {
	.composition-section-2:before {  height: 350px;}
	
	.pro-download-name { width: 100%;}
	
	.application-section > a { margin: 0 15px calc(20px + 2.5%) 15px; width: calc(33.33% - 30px);}
	
	.contact-info > div > div:nth-of-type(1) { width: 100%; text-align: center; padding-bottom: 10px;}
	.contact-info > div > div:nth-of-type(1) > img { width: 45px;}
	.contact-info > div > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 1vw; padding-left: 0; text-align: center;}
}

@media only screen and (max-width: 980px) {
	.title-1 { padding:0 0 calc(10px + 2%) 0; margin:0 0 calc(10px + 2%) 0; }
	
	.composition-section-1-content > div:nth-of-type(1) { width: 100%; padding: 0px 5% 0 5%;}
	.composition-section-1-content > div:nth-of-type(1) img { max-height: 350px;}
	.composition-section-1-content > div:nth-of-type(2) { width: 100%;}
	
	.composition-section-2-content { padding-top: 0;}
	.composition-section-2-content > div { width: 46%;}
	
	.left-bg-pto { display: none;}
	
	.composition-section-3 { padding: calc(20px + 4%) 3% 0 3%;}
	.composition-section-3-content { padding: calc(20px + 4%) 3%; }
	.composition-section-3-content > div { width: 48%;}
	
	.filter-bar-btn { display: block;}
	.filter-bar > div:nth-of-type(2) { background: #fff; position: fixed; top:0; left: -100%;height: 100%; width: 100%; padding:120px calc(20px + 2.5%) calc(20px + 2.5%) calc(20px + 2.5%); z-index: 10; display: block; overflow-y: auto;}
	.filter-bar > div:nth-of-type(2) > div { padding-right: 0; padding-bottom: 13px; width: 100%;}
	.filter-bar-mobile-close { display: block;}
	.filter-bar-select-open { position: relative; display: block; background: #fff;}
	
	.products-detail-top > div { width: 100%;}
	.products-detail-top > div:nth-of-type(1) { padding-bottom: 40px;}
	.products-detail-top-left > div:nth-of-type(1) { width: 60px;}
	.products-detail-top-left > div:nth-of-type(2) { width: calc(100% - 60px); }

	.products-detail-top > div:nth-of-type(2) { padding: calc(20px + 3%);}
	
	.application-icon { width: 60px; height: 60px; top:-30px; }
	.application-icon img { max-height: 40px; max-width: 40px;}
	.application-data { padding-top: 35px;}
	
	.application-section > a { margin: 0 10px calc(20px + 2.5%) 10px; width: calc(50% - 20px);}
	
	.news-section > a { width: 100%; }
	
	.about-section-1-a > div:nth-of-type(1) { width: 100%; padding-right: 0%;}
	.about-section-1-a > div:nth-of-type(2) { width: 100%; text-align: center;}
	
	.about-section-1-b > div:nth-of-type(1) { width: 100%; order: 2; text-align: center; padding-bottom: 30px;}
	.about-section-1-b > div:nth-of-type(2) { width: 100%; order: 1;  padding-left: 0;}
	
	.about-section-2 { 
	background-image: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 100%), url("../images/about-bg.jpg");
background-position: top right, top center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;
	}
	.about-section-2-content > div:nth-of-type(1) { width: 100%; padding-bottom: 30px; color: #fff;}
	.about-section-2-content > div:nth-of-type(2) { width: 100%;}
	
	.history-section { width: 96%; margin: 0 0 0 auto;}
	.history-section:before { left: 0%; transform: translateX(0%);}
	.history-section:after { left: 0%; transform: translateX(0%) rotate(-40deg);}
	.history-list { padding-left: 20px;}
	.history-list > img { left: 0%; }
	.history-list > div { width: 100%;}
	.history-list > div:nth-of-type(1) { order: 2; padding:20px 15px; }
	.history-list > div:nth-of-type(2) { order: 1; }
	.history-list-b > div:nth-of-type(1) { }
	.history-list-b > div:nth-of-type(2) { text-align: left;}
	.history-layout > div:nth-of-type(1) { width: 70px;}
	.history-layout > div:nth-of-type(2) { width: calc(100% - 70px); padding-left: 0;}
	
	.contact-info > div { width: 50%;}
	
	.contact-layout-50 > div { width: 100%; }
	.contact-row-2 > div:nth-of-type(1) { width: 100%; margin-bottom: 15px; }
	.contact-row-2 > div:nth-of-type(2) { width: 100%; }
	
	.wei-A .grid{grid-template-columns: repeat(2, 1fr);}
	.wei-B .prod-wrap .prod{padding: 60px 0;}
	.wei-B .prod-wrap .prod .text-block{padding: 0 40px;}
	.wei-B .prod-wrap .prod .pho-block{padding: 0 40px;}
	.wei-B .prod-wrap:nth-child(even) .prod .text-block{padding: 0 40px;}
	.wei-B .prod-wrap:nth-child(even) .prod .pho-block{padding: 0 40px;}
	
	.mus-A .intro{grid-template-columns: 1fr;margin-bottom: 40px;}
	.mus-A .intro .text-block{order: 2;}
	.mus-A .intro .pho-block{order: 1;}
	.mus-A .con .item{padding: 20px 30px;}
	.mus-B{gap: 40px;}
	.mus-B .item{padding: 40px 30px 45px 30px;}
	.mus-B .item .pho-wrap{gap: 30px;}
	
	.in-A .intro .pho-block{width: 41.21%;}
	
	.feat_box_bg{background-image: url(../images/coach-ipad-m.jpg);height: auto;padding-bottom: 68%;}
  	.feat_model_hand, .feat_model_text, .feat_model{display: none;}
  	.feat_pr50, .feat_pr40{padding-right: 0;}
  	.section_feat .cms-title-2 h2{font-size: 28px;}
  	.table_ctrl_rwd table tr{display: flex;flex-wrap: wrap;}
  	.table_ctrl_rwd_1 table td{width:33.3% !important;}
  	.table_ctrl_rwd_1 table td:first-child{width: 100% !important;}
  	.table_ctrl_rwd_2 table td{width: 50% !important;}
}
@media only screen and (max-width: 768px) {
	.cms-title-2 {padding:0px 10px; }   
	.cms-title-2 h3{  font-size: 1.875rem;  }  
	.cms-title-2 h1,.cms-title-2 h2{ font-size: 1.875rem;   }
	
	.composition-section-4-content > div { width: 100%;}
	.composition-section-4-content > div:nth-of-type(1) { margin-bottom: 25px;}
	
	.products-section > div { width: 100%; } 
	
	.pro-list > a { width: 50%; }
	
	.p-detail-feature > div:nth-of-type(1) { width: 100%; padding-right: 0%;}
	.p-detail-feature > div:nth-of-type(2) { width: 85%; margin: 20px auto 30px auto; }
	
	.pro-download-section > a { width:50%; }
	
	.download-header { display: none;}
	
	.download-list > div:nth-of-type(1) { width: 100%; justify-content: flex-start; padding-bottom: 15px; padding-left: 15px;}
	.download-list > div:nth-of-type(1):after { display: none;}
	.download-list > div:nth-of-type(2) { width: calc(100% - 180px); padding-left: 15px;}
	
	.mb-xl{margin-bottom: 80px;}
	.mb-l{margin-bottom: 60px;}
	.mb-m{margin-bottom: 40px;}
	.category-head h1{margin: 0 0 10px 0;}
	.wei-A .grid{grid-template-columns: 1fr;gap: 40px;}
	.wei-B .prod-wrap .prod{padding: 50px 0;}
	.wei-B .prod-wrap .prod:nth-child(even){margin-top: -50px;}
	.wei-B .prod-wrap .prod::before{display: none;}
	.wei-B .prod-wrap .prod .text-block{width: 100%;order: 2;}
	.wei-B .prod-wrap .prod .pho-block{width: 100%;order: 1;margin-bottom: 20px;}
	.wei-B .prod-wrap:not(:last-child){margin-bottom: 40px;}

	.mus-B{grid-template-columns: 1fr;}
	
	.in-A .intro .pho-block{width: 100%;}
	.in-A .intro .text-block{width: 100%;}
	.in-B{margin-bottom: 80px;}
	.in-B .intro{grid-template-columns: 1fr;}
	.in-B .intro::before{display: none;}
	.in-B .intro .item .text{margin-bottom: 40px;}
	.in-B .category-title{margin: 0 auto 40px auto;}
	.in-C .category-title{margin: 0 auto 40px auto;}
	.in-C .intro{grid-template-columns: 1fr;}
	.in-C .eval .pho-block{gap:30px;}
	
	.rec-models .rec-models-title{margin: 0 0 20px 0;}
}
@media only screen and (max-width: 640px) {
	.composition-section-2:before {  height: 320px;}
	
	.about-section-2-data > div { width: 100%; padding-bottom: 30px;}
	.about-section-2-data > div:after { display:none;}
}
@media only screen and (max-width: 570px) {
	.banner { height: 180px; }
	
	.composition-section-5-content > div:nth-of-type(1) { width: 100%; margin-bottom: 25px; text-align: center;}
	.composition-section-5-content > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.data-type-2 { padding-left: 40px;}
	
	.application-section > a { margin: 0 0px 20px 0px; width: calc(100% - 0px);}
	
	.download-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-right: 15px; padding-bottom: 15px;}
	.download-list > div:nth-of-type(3) { justify-content: flex-end; padding-right: 15px;padding-left: 15px; width: 100%;}
	.download-list > div:nth-of-type(3) > img { width: 20px;}
	.download-list > div:nth-of-type(3) > div { padding-right: 10px;}
	
	.news-section > a { padding:20px 15px;}
	.news-section > a > div:nth-of-type(1) { width: 100%; padding-right: 0px; padding-bottom: 15px;}
	.news-section > a > div:nth-of-type(2) { width: 100%; padding-left: 0px; }
	.news-section > a > div:nth-of-type(2)::before { display: none;}
	
	.contact-form { padding:30px 20px;}
	.contact-info > div { width: 100%;}
	
	.contact-row-1 > div:nth-of-type(1) { width: 100%; padding-bottom: 5px;}
	.contact-row-1 > div:nth-of-type(2) { width: 100%;}
	
	.in-C .eval .pho-block{grid-template-columns: 1fr;}
	
	.feat_textbox .feat_text .feat_text_title_2 .feat_h4{width: 100%;max-width: unset;margin-bottom: 8px;}
  	.feat_text_title_2 .feat_s{width: 46%;font-size: 13px;}
  	.table_ctrl_rwd_1 table td{width:100% !important;}
  	.table_ctrl_rwd_2 table td{width:100% !important;}
  	.section_feat{margin-bottom: 40px;}
    
    .sort-group { justify-content: flex-start;}
    .sort-group .sort-item { margin-right: 20px;}
    .sort-group .sort-item select { min-width: auto; padding: 0 30px 0px 13px; background-position: calc(100% - 5px) 11px; background-size: 17px 16px;}
}

@media only screen and (max-width: 414px) {
	.composition-section-3-content > div { width: 100%; padding-bottom: 30px;}
	.composition-section-3-data { padding: 12px 10px;}
	
	.products-section-pto { display: none;}
	.products-pro { position: relative; bottom: auto; right: auto; transform-origin: 50% 50%;width: 100%;}
	
	.pro-list > a { width: 100%; }
	
	.pro-download-section > a { width:100%; }
	
	.history-layout > div:nth-of-type(1) { width: 100%; text-align: center; padding-bottom: 10px;}
	.history-layout > div:nth-of-type(1) img { width: 120px;}
	.history-layout > div:nth-of-type(2) { width: calc(100% - 0px);}
	
	.mb-xl{margin-bottom: 70px;}
	.mb-l{margin-bottom: 50px;}
	.mb-m{margin-bottom: 30px;}
	.wei-A .grid{gap:30px;}
	.wei-A .grid .item{padding: 20px 20px 25px 20px;}
	.wei-B .prod-wrap:not(:last-child){margin-bottom: 30px;}
	.wei-B .prod-wrap .prod{padding: 25px 0;}
	.wei-B .prod-wrap .prod:nth-child(even){margin-top: -10px;}
	.wei-B .prod-wrap .prod .text-block .icon img{height: 70px;}
	.wei-B .prod-wrap .prod .text-block{padding: 0 20px;}
	.wei-B .prod-wrap .prod .pho-block{padding: 0 20px;}
	.wei-B .prod-wrap:nth-child(even) .prod .text-block{padding: 0 20px;}
	.wei-B .prod-wrap:nth-child(even) .prod .pho-block{padding: 0 20px;}
	
	.mus-A .con .item{padding: 20px;}
	.mus-B{gap:30px;}
	.mus-B .item{padding: 30px 20px 35px 20px;}
	.mus-B .item .pho-wrap{gap:20px;}
	
	.in-B{margin-bottom: 70px;}
	.in-B .category-title{margin: 0 auto 20px auto;}
	.in-B .intro{gap:40px;}
	.in-C .category-title{margin: 0 auto 20px auto;}
}

@media only screen and (max-width: 320px) {
	.composition-section-2-content > div { width: 100%;}
	.composition-section-2:before {  height: 400px;}

}

/*esg*/
.esg-r2{ display: flex;flex-wrap: wrap; align-items: center; padding: 10% 0;   }
.esg-r2 > div{ width: 50%;  }
.esg-r2 .esg-r2-txt{ padding-left: 5%; }
.esg-con-item{position: relative; padding: 60px 0;}
.esg-con-item .esg-tit{font-size: clamp(28px, 4vw, 55px);color: #05539e;text-align: center;margin-bottom: 20px; font-weight: 800;}
.esg-con-item .esg-tit span{ font-size: clamp(36px, 10vw, 120px); color: #c2c5c7; opacity: .15; position: absolute;left: 0;top: -20px;z-index: -1;font-weight: 800;}
.esg-con-item .esg-txt{margin-bottom: 20px;}
.esg-con-item .esg-txt p{line-height: 1.5;}
.esg-con-item .esg-pic{ width: 100%; }

@media only screen and (max-width: 768px) {
    .esg-con-item{ padding: 40px 0;}
	.esg-con-item .esg-tit::after{ font-size: 66px; top: 0px; }
    .esg-r2{ padding: 0; }
    .esg-r2 > div{ width: 100%; }
    .esg-r2 .esg-r2-txt{ padding-left: 0; margin-top: 20px; }    
}
@media only screen and (max-width: 576px) {
    .esg-con-item .esg-tit span{ top: 0;}
}