/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: "Open Sans", 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:1600px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}
.content-Box-2 { max-width:1460px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

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

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

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


.banner { position: relative; margin-bottom: 25px; height: 253px;}
.banner img { object-fit: cover; width: 100%; height: 100%;}
.banner-pc { }
.banner-mobile { display: none;}

.banner-title { position: absolute; z-index: 3; top:50%; transform: translateY(-50%); right: 10%; text-shadow: 0px 0px 3px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff; display: flex; flex-direction: column; flex-wrap: nowrap;}
.banner-title > h1, .banner-title > div { font-size:clamp(26px, 2.4vw, 36px); ; font-weight: 700; font-family: "Cinzel Decorative", serif; line-height: 1.1; padding: 0 0 5px 0; margin: 0; color: #0e1a92;}
.banner-title > h1 > font, .banner-title > div > font { font-size:clamp(35px, 3.5vw, 48px); }
.banner-title > span { font-size:16px; color: #3a3a3a; font-weight: 500; line-height: 1.2;}

#path { padding: 0 0 calc(20px + 2%) 0;}
#path ul { margin: 0; padding: 0 0; ;line-height: 1.3;}
#path li { display: inline-block; vertical-align: middle; font-size: 14px; }
#path li img { display: inline-block; vertical-align: middle; margin-right: 5px; position: relative; top:-1px;}
#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: #4c4c4c; }
#path li a:hover { opacity: 0.6;}
#path li:last-child a { color: #0e1a92; font-size: 16px; font-weight: 700;}

/*about*/
.about-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 4%);}
.about-section-1 > div:nth-of-type(1) { width: 60%; padding-right: 5%; padding-top: 15px;}
.about-section-1 > div:nth-of-type(2) { width: 40%;}
.title02 { font-size:clamp(20px, 1.7vw, 28px); font-weight: 700; font-family: "Cinzel Decorative", serif; line-height: 1.4; margin: 0 0 calc(10px + 1.5%) 0;padding: 0; color: #0e1a92;}
.title02-2 { font-size:clamp(20px, 1.7vw, 28px); font-weight: 700; line-height: 1.2; margin: 0 0 12px 0;padding: 0; color: #4079ed; display: block;}

.about-section-2 { margin-bottom: calc(20px + 4%); padding: calc(20px + 2%) 5%; background: #0e1a92;}

.color-white { color: #fff;}
.color-blue { color: #0e1a92;}
.align-center { text-align:center !important;}

.title03 { font-size:clamp(26px, 2.4vw, 36px); font-weight: 700; font-family: "Cinzel Decorative", serif; line-height: 1.4; margin: 0 0 calc(10px + 1.5%) 0;padding: 0;}

.about-section-2-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.about-section-2-list > div { background: #fff; border-radius: 40px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 23.5%; padding: 30px 20px;}
.about-section-2-list > div > div { text-align: center;}
.about-section-2-list > div > div:nth-of-type(1) { margin-bottom: 8px; padding: 0 10%;}
.about-section-2-list > div > div:nth-of-type(2) { font-size:clamp(18px, 1.7vw, 28px); color: #000; line-height: 1.2;}

.about-section-3 { padding-bottom: calc(20px + 2%); }

.about-section-3-list { display: flex; flex-direction: column; flex-wrap: nowrap;padding-top: calc(20px + 1%); }
.about-section-3-list > div { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.about-section-3-list > div > div:nth-of-type(1) { width: 60%; padding-right: 5%; padding-top: calc(20px + 1%);}
.about-section-3-list > div > div:nth-of-type(2) { width: 40%;}
.about-section-3-list > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.about-section-3-list > div:nth-child(even) > div:nth-of-type(1) { padding-right: 0; padding-left: 5%;;}
.about-section-3-list > div:nth-child(even) > div:nth-of-type(2) { order: 1;}
.about-section-3-list > div:nth-child(even) > div:nth-of-type(2) .about-section-3-pto > div { left: auto; right: 0; background: #fff; border-radius: 0 0 0 40px; padding: 10px 8px 10px 40px;}
.about-section-3-pto { position: relative;}
.about-section-3-pto > div { position: absolute; top: -10px; left: 0; background: #fff; border-radius: 0 0 40px 0; padding: 10px 40px 10px 8px;font-size:clamp(18px, 1.7vw, 28px); line-height: 1.1; font-weight: 700;font-family: "Cinzel Decorative", serif; }
.about-section-3-pto > img { box-shadow: 0px 15px 15px 0px rgba(0,0,0,0.15); border-radius: 50px;}

/*proudcts*/
.proudcts-desc-content { position: relative; margin-top: -15px; border-left: 6px solid #4079ed; padding: 10px 0 10px 30px; margin-bottom: calc(20px + 2%);}
.proudcts-list { padding-bottom: calc(20px + 2%); display: flex; flex-direction: column; flex-wrap: nowrap;}
.proudcts-list > div { padding-bottom: calc(30px + 6%); display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
background-image: url("../images/pro-bg-1.png"), url("../images/pro-bg-2.png");
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: 55%, auto;}
.proudcts-list > div:nth-child(even) { 
background-image: url("../images/pro-bg-1.png"), url("../images/pro-bg-2b.png");
background-position: right top, left bottom;}
.proudcts-list > div > div:nth-of-type(1) { width: 50%; text-align: center;}
.proudcts-list > div > div:nth-of-type(2) { width: 42%;}
.proudcts-list > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.proudcts-list > div:nth-child(even) > div:nth-of-type(2) { order: 1;}
.proudcts-list-pto img {  border-radius: 100%; border: 1px solid #4079ed; }

.btn01 { width: 210px; line-height: 50px; overflow: hidden; display: block; background: #4079ed; position: relative; padding: 0 40px 0 35px; text-align: left; font-size: 16px; color: #fff !important;}
.btn01 span { position: absolute; top:50%; transform: translateY(-50%); right: 20px; transition: all 0.4s ease-out 0s;}
.btn01:hover { background: #0e1a92; padding-left: 58px }
.btn01:hover span { right: -40px; }

#page { text-align: center; padding:0 0 calc(20px + 5%) 0;}
#page a { font-size: 16px; color: #666666; font-weight: 400; padding: 0 15px; line-height: 40px; text-align: center; border-radius: 5px; display: inline-block; border: 1px solid #bababa; margin: 0 3px 6px 3px;}
#page a:hover, #page a.current { background: #4c82ef; color: #fff; border-color: #4c82ef;}
.page-prev, .page-next { padding: 0 10px !important; }
.page-prev span, .page-next span { display: inline-block; width: 6px; height: 6px; border-width: 1px 1px 0 0; border-style: solid; border-color: #666666; margin: 0 6px; position: relative; top:-3px;}
.page-prev span { transform: rotate(-135deg);}
.page-next span { transform: rotate(45deg);}
.page-prev:hover span, .page-next:hover span { border-color: #fff;}
.page-lock { border-width: 0 !important; pointer-events:none;}

/*proudcts-list*/
.proudcts-list-box-bg { background: url("../images/pro-bg-2b.png") no-repeat 50px -260px;
background-image: url("../images/pro-bg-2b.png"), url("../images/pro-bg-2.png");
background-position: 50px -260px, 100% 95%;;
background-repeat: no-repeat, no-repeat;}
.aside-menu-1 { padding-bottom: calc(20px + 1.5%);}

.proudcts-list-2 { margin-right: -32px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.proudcts-list-2 > a { margin: 0 32px 22px 0; width: calc(33.33% - 32px);}
.proudcts-list-2 > a:hover .proudcts-list-2-pto { transform: scale(0.95);box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.proudcts-list-2 > a:hover .proudcts-list-2-name { color: #4079ed;}
.proudcts-list-2-pto { margin: 0 0 14px 0; padding-bottom: 100%; border: 1px solid #c4c4c4;transition: all 0.4s ease-out 0s;}
.proudcts-list-2-name { font-weight: 700; font-size: clamp(18px, 1.3vw, 24px); text-align: center;}

/*proudcts-detail*/
.proudcts-detail-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 4%); }
.proudcts-detail-section > div { width: 50%;}
.proudcts-detail-section > div:nth-of-type(1) { padding-right: 5%;}
.proudcts-detail-section > div:nth-of-type(1) .btn01 { margin: 40px 0 35px auto; background: #171717;}
.proudcts-detail-section > div:nth-of-type(1) .btn01:hover { background: #0e1a92;}
.proudcts-detail-section > div:nth-of-type(2) .title03 { margin-bottom: 5px;}
.proudcts-detail-section > div:nth-of-type(2) .btn01 { margin-right: 0; margin-left: auto; margin-bottom: 25px; background: #171717;}
.proudcts-detail-section > div:nth-of-type(2) .btn01:hover { background: #0e1a92;}

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

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

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

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

    .mySwiper2 {
      height: 100%;
      width: 100%; margin-bottom: 25px;border: 1px solid #c4c4c4; background: #fff;
    }

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

    .mySwiper .swiper-slide {border: 1px solid #c4c4c4;
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

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

.swiper-next, .swiper-prev { width: 30px !important; height: 30px !important; border-radius: 100%; background: #3e3a39; border: 0px solid #074151; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%);}
.swiper-next:hover, .swiper-prev:hover { opacity: 0.6 !important;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 12px; height: 12px ; border-width: 1px 1px 0 0; border-color: #fff; border-style: solid; position: relative;}
.swiper-prev:after { transform: rotate(-135deg); left: 3px;}
.swiper-next:after { transform: rotate(45deg); right: 3px;}
.swiper-prev { left: -10px;}
.swiper-next { right: -10px;}

.aling-left { text-align:left !important;}
/*.products-detail-data { padding-bottom: calc(20px + 2%); margin-bottom: calc(20px + 1%); border-bottom: 1px solid #dedede;}*/

.title04 { font-family: "Cinzel Decorative", serif; font-size: clamp(18px, 1.3vw, 24px); font-weight: 700; color: #0e1a92; padding-bottom: 10px;}

.color-list { display: flex;flex-direction: row; flex-wrap: wrap; padding-bottom: 15px;}
.color-list > div { width: 25%; padding-bottom: calc(20px + 2%); padding-right: 10px; cursor: pointer;}
.color-list > div:hover .color-type, .color-list > div.current .color-type { border-color: #0e1a92;}
.color-list > div .active { border-color: #0e1a92;}  /* 20250417 規格樣式 */
.color-type-box { width: 82px;}
.color-type { margin-bottom: 10px; border: 1px solid #e1e1e1; border-radius: 100%; width: 82px; height: 82px; padding: 10px;}
.color-type > div {  border-radius: 100%; width: 60px; height: 60px;}
.color-name {  color: #2c2c2c; font-size: 16px; text-align: center; line-height: 1.1;}

.share-tool { justify-content: flex-end; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}

.products-detail-bottom { background: #d6eeff; padding-top: calc(20px + 2%); padding-bottom: calc(20px + 2%)}

.title05 { margin-bottom: calc(10px + 1%);}
.title05 > div { padding: 12px 30px 12px 15px; background: #0e1a92; border-radius: 30px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.title05 > div > img { display: inline-block; margin-right: 12px;}
.title05 > div > div { color: #fff; font-weight: 700; text-transform: uppercase;}

.products-detail-box {padding-top: calc(20px + 2%);margin-top: calc(20px + 1%);border-top: 1px solid #cfcfcf;}
.products-detail-desc { padding: 0;}

.line-type-1 { border-bottom: 1px solid #cfcfcf; margin-bottom: calc(20px + 2%);}

.btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: calc(20px + 1%) 0 calc(10px + 1%) 0;}
.btn-box > a { margin-bottom: 10px;}
.btn-box > a:hover { transform: scale(0.95);}
.btn-box-prev, .btn-box-next, .btn-box-back { width: 200px; line-height: 50px; text-align: center; position: relative; border: 1px solid #180f19; display: block;}
.btn-box-prev img{ display:inline-block; position: absolute; top:50%; transform:translateY(-50%); left: 18px;}
.btn-box-next img{ display:inline-block; position: absolute; top:50%; transform:translateY(-50%); right: 18px;}
.btn-box-back { color: #fff !important; background: #171717; border-color: #171717;}
.btn-box-back img { display:inline-block; position: relative; margin-right: 10px; top:-2px;}

/*application*/
.application-list { padding-bottom: calc(10px + 1%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.application-list > a { width: calc(50% - 25px); margin-bottom: calc(20px + 2%);}
.application-list > a:hover .application-pto img { transform: scale(1.03);}
.application-list > a:hover .application-pto-box { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4); transform: scale(1.01);}
.application-title { color: #0e1a92; font-weight: 700; font-size: clamp(18px, 1.3vw, 24px); margin-bottom: 13px; padding-left: 28px; background: url("../images/title-icon2.png") no-repeat 5px calc(50% + 1px); line-height: 1.2;}
.application-pto-box { border-radius: 0 50px 50px 50px; border: 1px solid #bebebe; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); position: relative; overflow: hidden;transition: all 0.4s ease-out 0s;}
.application-pto-mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3;box-shadow:inset 0px 0px 0px 15px rgba(255,255,255,.5); mask-image:linear-gradient(60deg, #000 0%, transparent 45%, transparent 50%, transparent 55%, #000 100%);border-radius: 0 50px 50px 50px; }
.application-pto-box > img { width: 100%;}
.application-pto { padding-bottom: 45.9%;}
.application-pto img { transition: all 2s ease-out 0s;}

/*blog*/
.blog-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(10px + 1%);}
.blog-section > div:nth-of-type(1) { width: 415px; position: sticky; top:110px;}
.blog-section > div:nth-of-type(2) { width: calc(100% - 415px); padding-left: 5%;}

.aside-title { padding: 25px 30px; background: linear-gradient(110deg, #074db6 0%, #0e1a92 100%); font-weight: 700; font-size: clamp(18px, 1.3vw, 24px); line-height: 1.1; color: #fff; border-radius: 0 50px 0 0;}

.blog-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px;}
.blog-list > div { width: calc(50% - 27px); padding-bottom: calc(20px + 2%);}
.blog-list > div:hover .blog-pto { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); transform: scale(0.97);}
.blog-list > div:hover .blog-title { color: #0e1a92;}
.blog-pto { padding-bottom: 58%; margin-bottom: 20px;transition: all 0.4s ease-out 0s; display: block;}
.blog-date { line-height: 1; font-size: 16px; padding-bottom: calc(15px + 1%);}
.blog-title { display: block; font-weight: 700; font-size: clamp(18px, 1.3vw, 24px); padding-bottom: calc(5px + 1%); line-height: 1.1;}
.blog-data { padding-bottom: calc(10px + 1%);}

.blog-list > div .btn01 { margin-right: 0; margin-left: auto; width: 160px; line-height: 40px; font-size: 14px;background: #171717;}
.blog-list > div .btn01:hover { background: #0e1a92; padding-left: 40px;}

/*news*/
.news-list { margin-right: -50px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 20px;}
.news-list > div { margin: 0 50px calc(20px + 2%) 0; width: calc(33.33% - 50px); background: #fff; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); padding:18px 13px 13px 13px;}
.news-list > div .title02-2 { color: #0e1a92;}
.news-list > div:hover .idx-news-pto { transform: scale(0.95);}
.idx-news-pto { padding-bottom: 58%; margin-bottom: 14px;transition: all 0.4s ease-out 0s; }
.idx-news-data { padding-bottom: 14px; margin-bottom: 14px; text-align: left;}
.idx-news-bottom { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.idx-news-bottom > div { padding-bottom: 10px;}
.idx-news-date { display: flex; flex-direction: row; flex-wrap: nowrap ; align-items: center;}
.idx-news-date > img { display: inline-block; margin-right: 6px; width: auto !important;}
.idx-news-date > div { color: #ff7800; font-size: 16px; line-height: 1;}
.idx-news-bottom > div .btn01 { margin-right: 0; margin-left: auto; width: 160px; line-height: 40px; font-size: 14px;background: #171717;}
.idx-news-bottom > div .btn01:hover { background: #0e1a92; padding-left: 40px;}

/*contact*/
.color-red { color: #ff0000;}

.contact-section { max-width: 1120px; margin: 0 auto; text-align: left; padding-bottom: calc(20px + 5%);}
.contact-info-section { margin-bottom: calc(20px + 1%); display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-info-section > div { width: 33.33%; border-right: 1px solid #e3e3e3;display: flex; flex-direction: row; flex-wrap: wrap; padding: 15px;}
.contact-info-section > div > div:nth-of-type(1) { width: 53px;}
.contact-info-section > div > div:nth-of-type(2) { width: calc(100% - 53px); padding-left: 10px; font-size: 15px; line-height: 1.3;}
.contact-info-section > div > div:nth-of-type(2) > b { display: block; color: #0e1a92; font-weight: 700;}
.contact-info-section > div:last-child { border-right: 0px solid #e3e3e3;}

.contact-bottom-section { background: #fff; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); padding: calc(20px + 2%) calc(20px + 3%);}

.contact-form {  }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #333; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */
  color: #333; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
  color: #333; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */
  color: #333; opacity:1;
}
.contact-info { max-width: 490px; margin: 0 auto 0 0; padding: 0 7%;}

.contact-main input[type="text"], .contact-main input[type="number"], .contact-main input[type="tel"], .contact-main input[type="phone"], .contact-main input[type="date"], .contact-main input[type="email"], .contact-main input[type="password"], .contact-main input[type="button"], .contact-main textarea { font-size: 16px; border-width:0 0 0px 0; border-style: solid; border-color: #666; margin: 0px 0 25px 0; width: 100%; padding: 12px 20px; color:#333; background: #f5f6fa; font-family: 'Open Sans', sans-serif; letter-spacing: 0; height: 51px; border-radius: 25px;}
.contact-main textarea { height:225px; padding:15px 20px; letter-spacing: 1px; resize: none;border-radius: 25px; }
.contact-main select{  margin: 0px 0 25px 0; min-width: 80px; width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 20px) 19px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   margin-right:4px; background-color: #f5f6fa; font-size: 16px; border-width:0 0 0px 0; border-style: solid; border-color: #666; mwidth: 100%; color:#333; font-family: 'Open Sans', sans-serif; height: 51px; padding: 0 35px 0 20px;  letter-spacing: 0;border-radius: 25px;}
.contact-main option { padding:1px 5px;}
.contact-main select::-ms-expand {
    display: none;
}

.contact-form-3 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-form-3 > div { width: 47.5%;}

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 0px;
}
.input-placeholder input:valid + .placeholder, .input-placeholder textarea:valid + .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  pointer-events: none;
  top: 10px;
  bottom: 2px;
  left: 20px;
  margin: auto;
  color: #333;
}
.placeholder span {
  color: red;
}


.idx-contact-btn { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; background: #0e1a92; font-size: 16px; line-height: 1; color: #fff !important; padding: 14px 5px; width: 210px; margin: 0 auto calc(20px + 1%) auto; border-width: 0; transition: all 0.4s ease-out 0s;}
.idx-contact-btn:hover { transform: scale(0.9);}
.idx-contact-btn > img { display: inline-block; margin-right: 10px;}

.contact-map iframe { width: 100%; border-width: 0; height: 375px;}

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

	
}
@media only screen and (max-width: 1365px) {
    #content { padding-top: 100px;}

	.banner-title { width: 100%; right: auto; left: 0; padding: 0 5%; text-align: center;}
	
}
@media only screen and (max-width: 1279px) {
	.blog-section > div:nth-of-type(1) { width: 100%; position: relative; top:auto; margin-bottom: 20px;}
	.blog-section > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	.aside-title { display: none;}
	
	.news-list { margin-right: -20px; }
	.news-list > div { margin: 0 20px calc(20px + 2%) 0; width: calc(33.33% - 20px); }
}

@media only screen and (max-width: 980px) {
	.banner { margin-bottom: 20px; height: 200px;}
	.banner-pc { display: none;}
	.banner-mobile { display: block;}
	
	.about-section-1 > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-top: 0;}
	.about-section-1 > div:nth-of-type(2) { width: 100%;}
	
	.about-section-3-list > div > div:nth-of-type(1) { width: 100%; padding-right: 0%; order: 2;}
	.about-section-3-list > div > div:nth-of-type(2) { width: 100%; order: 1;}
	.about-section-3-list > div:nth-child(even) > div:nth-of-type(1) { padding-left: 0;}
	.about-section-3-list > div:nth-child(even) > div:nth-of-type(2) .about-section-3-pto > div { left: 0; right: auto; border-radius: 0 0 40px 0; padding: 10px 40px 10px 8px;}
	
	.proudcts-detail-section > div { width: 100%;}
	.proudcts-detail-section > div:nth-of-type(1) { padding-right: 0%; padding-bottom: 25px;}
	
	.blog-list > div { width: calc(50% - 12px); }
}
@media only screen and (max-width: 768px) {
	.about-section-2-list > div { width: 48.5%; margin-bottom: 20px;}
	
	.proudcts-list > div { 
background-position: center top, right bottom;
background-size: contain, contain;}
	.proudcts-list > div > div:nth-of-type(1) { width: 100%; padding-bottom: 25px;}
	.proudcts-list > div > div:nth-of-type(2) { width: 100%;}
	.proudcts-list > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.proudcts-list > div:nth-child(even) > div:nth-of-type(2) { order: 2;}
	.proudcts-list > div:nth-child(even) { 
background-position: center top, right bottom;}

	.proudcts-list-2 { margin-right: 0px; justify-content: space-between;}
	.proudcts-list-2 > a { margin: 0 0 22px 0; width: calc(50% - 10px);}
	
	.application-list > a { width: calc(50% - 10px);}
	
	.news-list { margin-right: 0; justify-content: space-between;}
	.news-list > div { width: calc(50% - 10px); margin-right: 0; }
	
	.contact-form-3 > div { width: 100%;}
}
@media only screen and (max-width: 640px) {
	.btn-box-prev, .btn-box-next, .btn-box-back { width: 100%;}
	
	.application-list > a { width: 100%;}
	
	
}
@media only screen and (max-width: 570px) {
	.banner-title > span { display: none;}
	
	.color-list > div { width: 33.33%; }
	
	.news-list > div { width: 100%; }
}

@media only screen and (max-width: 414px) {
	.proudcts-list-2 > a { width: 100%;}
	
	.blog-list > div { width: 100%;}
}

@media only screen and (max-width: 320px) {
	.color-list > div { width: 50%; }
	
	
}

/* 20250416 詳細頁的返回按鈕樣式 - 參考公版 b10 */
.btn-more-01 {
    padding: 10px 40px;
    color: #fff!important;
    background: #171717;
    line-height: 1.2;
    transition: all 0.4s ease-out 0s; display: table; margin: auto;
}
.btn-more-01:hover {
    transform: scale(0.95);
}
.btn-more-01::before {content: ""; position: absolute; right: -29px; top:calc(50% - 5px);  width: 10px; height: 10px; border-width: 1px 1px 0 0;border-style: solid; border-color: #2a4d9c; transform: rotate(45deg); opacity: 0; mix-blend-mode: exclusion; transition: 0.3s;display: none;}
.btn-more-01:hover::before {border-color: #ccdeff; opacity: 1; right: -40px;}
.btn-more-01::after {content: ''; width: 60px; height: 1px; background: #2a4d9c; position: absolute; right: -30px; top: 50%; z-index: 10; mix-blend-mode: exclusion; transition: 0.3s;display: none;}
.btn-more-01:hover::after {background: #ccdeff; right: -40px;}