@font-face { font-family: "Noto Sans"; src: url("/assets/us/fonts/NotoSansLight.eot"); src: local("Noto Sans Light"), local("NotoSans-Light"), url("/assets/us/fonts/NotoSans-Light.eot?#iefix") format("embedded-opentype"), url("/assets/us/fonts/NotoSans-Light.woff2") format("woff2"), url("/assets/us/fonts/NotoSans-Light.woff") format("woff"), url("/assets/us/fonts/NotoSans-Light.ttf") format("truetype"), url("/assets/us/fonts/NotoSans-Light.svg#NotoSans-Light") format("svg"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Noto Sans"; src: url("/assets/us/fonts/NotoSansRegular.eot"); src: local("Noto Sans Regular"), local("NotoSans-Regular"), url("/assets/us/fonts/NotoSans-Regular.eot?#iefix") format("embedded-opentype"), url("/assets/us/fonts/NotoSans-Regular.woff2") format("woff2"), url("/assets/us/fonts/NotoSans-Regular.woff") format("woff"), url("/assets/us/fonts/NotoSans-Regular.ttf") format("truetype"), url("/assets/us/fonts/NotoSans-Regular.svg#NotoSans-Regular") format("svg"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Noto Sans"; src: url("/assets/us/fonts/NotoSansBold.eot"); src: local("Noto Sans Bold"), local("NotoSans-Bold"), url("/assets/us/fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/us/fonts/NotoSans-Bold.woff2") format("woff2"), url("/assets/us/fonts/NotoSans-Bold.woff") format("woff"), url("/assets/us/fonts/NotoSans-Bold.ttf") format("truetype"), url("/assets/us/fonts/NotoSans-Bold.svg#NotoSans-Bold") format("svg"); font-weight: 700; font-style: normal; }
* { font-weight: 400; }

.font-light { font-weight: 300 !important; }

.font-normal { font-weight: 400 !important; }

.font-bold { font-weight: 700 !important; }

.maintitle { font-size: 40px; line-height: 48px; letter-spacing: .025em; font-weight: 400 !important; color: #5da69f; }

.subtitle { font-size: 22px; line-height: 1.8; letter-spacing: .04em; font-weight: 400 !important; }

.desc, .page-pdh main .h4 { font-size: 20px !important; line-height: 1.75 !important; letter-spacing: .04em !important; font-weight: 300; }
@media (max-width: 1199px) { .desc, .page-pdh main .h4 { font-size: 16px !important; line-height: 1.5 !important; } }

.font-mark { font-size: 16px !important; letter-spacing: .075em; font-weight: 400; }

.font-note { font-size: 12px !important; line-height: 1.83 !important; letter-spacing: .025em !important; }

.fs-14 { font-size: 14px; line-height: 1.5; letter-spacing: .05em; }

.fs-28 { font-size: 28px; line-height: 1.28; letter-spacing: .05em; }

.fs-18 { font-size: 18px !important; line-height: 1.5; letter-spacing: .05em; }
@media (max-width: 1199px) { .fs-18 { font-size: 16px !important; } }

.page-teaser .subtitle { line-height: 1; margin-bottom: 1rem; }
@media (min-width: 769px) and (max-width: 1199px) { .page-teaser .maintitle { font-size: 3vw !important; }
  .page-teaser .subtitle { font-size: 1.8vw !important; } }
.page-teaser .desktop section.section-2 .box-slogan { white-space: nowrap; }
.page-teaser .desktop section.section-5 .box-slogan { padding-left: 40%; white-space: nowrap; }
.page-teaser .desktop section.section-5 .section-8-slogan .slogan1, .page-teaser .desktop section.section-5 .section-8-slogan .slogan2 { left: 0; right: 0; }
.page-teaser .desktop section .section-7 .maintitle { color: #76c6ce; }
.page-teaser .desktop section.section-10 .tagline { font-size: 32px; font-weight: 400; color: #000; }
.page-teaser .mobile .box-slogan { padding-left: 5% !important; padding-right: 5% !important; }
.page-teaser .mobile .box-slogan img { width: auto !important; max-width: 100% !important; }
.page-teaser .mobile .s7-slogan, .page-teaser .mobile .s8-slogan, .page-teaser .mobile .s8-slogan2 { left: 3% !important; width: 100%; }
.page-teaser .mobile .s7-slogan { padding-left: 0 !important; top: 11%; bottom: auto; }
.page-teaser .mobile .s8-slogan { top: 11%; bottom: auto; }
.page-teaser .mobile .s8-slogan2 { top: 11%; bottom: auto; }
.page-teaser .mobile section.section-10 .section-10-inner .box-slogan .tagline { width: 70% !important; }

@media (max-width: 1199px) { .page-pdh main .section-1 .position-relative .box-slogan { padding-left: 0; padding-right: 0; } }
.page-pdh main .section-2 .box-content .texts { width: 640px; }
@media (max-width: 1199px) { .page-pdh main .section-2 .box-content .texts { padding-left: 20px; padding-right: 20px; } }
.page-pdh main .section-2 .box-content .indicator { width: 100%; max-width: 300px; }
.page-pdh main .section-2 .box-content .indicator .bar .bullet { width: 33.4%; }
.page-pdh main .section-5 .box-text { width: 900px !important; }
.page-pdh main .section-6 .box-text { width: 100% !important; }
.page-pdh main .section-7 .section-7-inner .box-list .card { padding-left: 10px; padding-right: 10px; }
@media (min-width: 1200px) { .page-pdh main .section-7 .section-7-inner .box-list .card { padding-top: 20px; padding-bottom: 20px; }
  .page-pdh main .section-7 .section-7-inner .box-list .card .h4 { min-height: 80px; display: flex; align-items: center; justify-content: center; } }
/* .page-pdh main .section-12 .container { max-width: 100% !important; } */
.page-pdh main .section-12 .container .container-inner { position: relative; max-width: 640px; }

@keyframes aniFadeInOut { 0% { opacity: 1; }
  45% { opacity: 1; }
  55% { opacity: 0; }
  100% { opacity: 0; } }
.p-desc:nth-child(1) { animation-name: aniFade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate-reverse; }

.p-desc:nth-child(2) { animation-name: aniFade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate; }

@keyframes aniFade { 0%,45% { opacity: 0; }
  100% { opacity: 1; } }
.page-design-excellence main #design-excellence section.section-1 .s1-images .s1-images-img { height: 140px; }
.page-design-excellence main #design-excellence section.section-1 .s1-images .s1-images-img .fs-18 { font-size: 14px !important; }
@media (min-width: 768px) { .page-design-excellence main #design-excellence section.section-1 .s1-images .s1-images-img .fs-18 { font-size: 18px !important; } }
@media (max-width: 1199px) { .page-design-excellence main #design-excellence section.section-1 .s1-images .s1-images-img { margin-bottom: 5px; } }
@media (max-width: 1199px) { .page-design-excellence main #design-excellence section.section-2 .s2-content { bottom: 3%; } }
@media (max-width: 767px) { .page-design-excellence main #design-excellence section.section-2 .s2-content { bottom: -3%; } }
.page-design-excellence main #design-excellence section.section-2 .s2-content .p-desc:nth-child(1) { animation-name: aniFade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 3s; animation-direction: alternate-reverse; }
.page-design-excellence main #design-excellence section.section-2 .s2-content .p-desc:nth-child(2) { position: absolute; top: 0; z-index: -1; animation-name: aniFade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 3s; animation-direction: alternate; }
.page-design-excellence main #design-excellence .btn-assembly { padding-top: 10px; padding-bottom: 10px; max-width: 400px; height: auto; line-height: 1.5; }
@media (min-width: 768px) { .page-design-excellence main #design-excellence .section-4 .s4-text-wrap { max-width: 960px; } }
@media (max-width: 767px) { .page-design-excellence main #design-excellence .section-8-1 .s8-text .h4 { width: 78%; font-size: 17px; } }
.page-design-excellence main #design-excellence .section-8-1 .s8-text.style-2 { top: 30%; }
.page-design-excellence main #design-excellence .section-8-1 .s8-text.style-2 .s8-paint { top: 15px; }
.page-design-excellence main #design-excellence .s9-item-text-display { line-height: 0.8; }

.row.style-table .col > * { padding-left: 10px; padding-right: 10px; }

.article p, .article li { line-height: 1.4; }
@media (max-width: 1199px) { .article .h1 { font-size: 26px; line-height: 30px; letter-spacing: 0.25rem; } }

body.page-pdh main .section-8 .slogan{
  grid-column: 3/6;
}
body.page-pdh main .section-8 .slogan-m{
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 992px) {
  body.page-pdh main .section-8 .slogan {
      min-height: 440px;
      padding-top: 190px;
  }
  body.page-pdh main .section-8 .slogan-innerbox {
    top: 0;
    padding-top: 0;
    bottom: auto;
  }
}
@media (min-width: 1200px){
  body.page-pdh main .section-8 .slogan {
      min-height: 240px;
      padding-top: 0;
  }
}

body.page-pdh main .section-18 .title.d-lg-none{
  max-width: 240px;
}

body.page-brand-story .section .title{
  max-width: 240px;
}
@media (min-width: 992px) {
  body.page-brand-story .section .title{
    max-width: 100%;
  } 
}

.desc, .page-pdh main .h4, .page-pdh-app main .h4 { font-weight: 300!important; }

.page-pdh-app .section-8-inner .phone5 {
  pointer-events: none;
}

/*20230224 start*/
.page-pdh main .section-27 .tablebox-head .h4, .page-pdh-app main .section-27 .tablebox-head .h4 {
  font-weight: 700!important;
}
.page-pdh main .section-27 .tablebox .h4, .page-pdh-app main .section-27 .tablebox .h4 {
  font-weight: 600!important;
}
/*20230224 end*/