@charset "UTF-8";
body {
  background: #000000; }

section h3 {
  font-size: 1.8rem;
  text-transform: uppercase;
  line-height: 1.4em !important;
  color: #fff; }

section h4 {
  text-transform: uppercase;
  line-height: 1.4em !important; }

section p {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.8em !important; }

section h2 {
  color: #fff !important;
  font-size: 50px !important;
  text-transform: uppercase;
  line-height: 1.2em !important; }

a:hover {
  text-decoration: none !important; }

#hero {
  line-height: 0;
  height: 44vw;
  overflow: hidden;
  position: relative; }

#hero:after {
  content: "";
  background: #000000;
  width: 100%;
  height: 100%;
  opacity: .6;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99; }

#hero video {
  width: 100vw;
  height: auto; }

@media (min-width: 1024px) {
  section.hero {
    height: 48vw; } }

@media (min-width: 768px) {
  #hero video {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); } }

@media (max-width: 767px) {
  #hero {
    height: auto; } }

#hero .slogan {
  display: block !important;
  position: absolute !important;
  z-index: 100;
  margin: 0 auto;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  padding-bottom: 0 !important; }

.slogan img {
  width: 300px; }

#solar-openwording {
  line-height: 0;
  background-image: url(../images/solar-back.jpg);
  overflow: hidden;
  position: relative;
  background: transparent;
  padding-top: 0; }
  #solar-openwording .container {
    position: relative;
    z-index: 99;
    background: transparent; }
  #solar-openwording .title {
    height: 30vh;
    padding-top: 3rem; }
    #solar-openwording .title p {
      margin: 0 auto;
      width: 60%;
      margin-top: 2rem; }
  #solar-openwording div {
    margin: 0 auto;
    text-align: center;
    margin-top: 3rem; }
  #solar-openwording h2 {
    font-size: 55px; }
  #solar-openwording h2, #solar-openwording p {
    margin: 0 auto;
    text-align: center;
    margin-top: 2rem; }
  #solar-openwording .series {
    padding-top: 4rem;
    position: relative;
    z-index: 99; }
  #solar-openwording a p {
    position: relative;
    display: inline-block;
    font-size: 2vw !important;
    line-height: 1;
    margin-top: 0;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1 !important;
    font-family: 'Oswald'; }

#solar-openwording:after {
  content: "";
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 50%, black 94%);
  background: #000000;
  background: -moz-linear-gradient(top, transparent 0%, #000000 80%);
  background: -webkit-linear-gradient(top, transparent 0%, #000000 80%);
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, #000000));
  background: -o-linear-gradient(top, transparent 0%, #000000 80%);
  background: linear-gradient(to bottom, transparent 0%, #000000 80%);
  width: 100%;
  height: 100%;
  opacity: .8;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15; }

@media (min-width: 768px) {
  #solar-openwording video {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); } }

#imagesequence {
  background: transparent; }

#myimg {
  width: 100%;
  max-width: 100px; }

.pin {
  z-index: 20; }

#solar-brand-01 {
  width: 100%;
  height: auto;
  padding-bottom: 5vw !important;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  position: relative;
  overflow: hidden; }
  #solar-brand-01 p {
    width: 80%; }

/* ---滑鼠區塊---*/
.slide-buttons {
  position: relative;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  width: 90%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.slide-buttons li {
  position: relative;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  display: block;
  list-style: none;
  -webkit-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  width: calc(100%/3); }
  .slide-buttons li a {
    position: relative;
    display: inline-block;
    font-size: 48px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear; }
    .slide-buttons li a .bottom-right {
      position: fixed;
      bottom: 50px;
      right: 30px;
      z-index: 1000; }

.slide-buttons img {
  width: 100%;
  max-width: 350px; }

a:hover .effect-shine {
  -webkit-mask-image: -webkit-linear-gradient(165deg, rgba(0, 0, 0, 0.6) 30%, #222 50%, rgba(0, 0, 0, 0.6) 70%);
  -webkit-mask-size: 200%;
  -webkit-animation: shine 1.5s infinite;
  animation: shine 1.5s infinite; }

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%; }
  to {
    -webkit-mask-position: -50%; } }

/*outdoor*/
#for-outdoor {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../images/outdoor-bg-bright.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #for-outdoor .container {
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  #for-outdoor .wording {
    width: 50%;
    padding: 5rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%); }
    #for-outdoor .wording p {
      width: 40%; }
  #for-outdoor .outdoor-people {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; }

/*trip*/
#for-trip {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../images/trip-bg-bright.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #for-trip .wording {
    width: 25%;
    padding: 6rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    right: 1%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    #for-trip .wording p {
      width: 80%; }
  #for-trip .container {
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

/*green*/
#for-green {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../images/green-bg-bright.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #for-green .wording {
    width: 50%;
    padding: 6rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%); }
    #for-green .wording p {
      width: 40%; }
      #for-green .wording p span {
        font-size: .8rem !important;
        color: #cccccc !important;
        display: inline-block; }
  #for-green .container {
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.in {
  -webkit-animation: clipRectIn .4s;
  animation: clipRectIn .4s;
  -webkit-transition: -webkit-clip-path 400ms ease-in-out;
  transition: -webkit-clip-path 400ms ease-in-out;
  -o-transition: clip-path 400ms ease-in-out;
  transition: clip-path 400ms ease-in-out;
  transition: clip-path 400ms ease-in-out, -webkit-clip-path 400ms ease-in-out; }

@-webkit-keyframes clipRectIn {
  0% {
    -webkit-clip-path: circle(20% at 50% 50%);
    clip-path: circle(20% at 50% 50%);
    opacity: .1; }
  100% {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
    opacity: 1; } }

@keyframes clipRectIn {
  0% {
    -webkit-clip-path: circle(20% at 50% 50%);
    clip-path: circle(20% at 50% 50%);
    opacity: .1; }
  100% {
    -webkit-clip-path: circle(100%);
    clip-path: circle(100%);
    opacity: 1; } }

/*minisite-series*/
/*minisite-series*/
#minisite-series {
  background-image: url(../images/solar-watch-bg.jpg);
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

#minisite-series .minisite-container {
  max-height: 600px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

#minisite-series .minisite-section {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 33.3%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
  -webkit-transition: -webkit-box-flex .4s ease;
  transition: -webkit-box-flex .4s ease;
  -o-transition: flex .4s ease;
  transition: flex .4s ease;
  transition: flex .4s ease, -webkit-box-flex .4s ease, -ms-flex .4s ease;
  position: relative; }

#minisite-series .minisite-section .content {
  z-index: 2;
  width: 50%;
  position: absolute;
  line-height: 1.2;
  right: 5%; }

#minisite-series .minisite-section .content h2 {
  font-size: 42px !important;
  line-height: 1 !important; }

#minisite-series .minisite-section {
  width: 33.33%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

#minisite-series .minisite-section:hover {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto; }

#minisite-instinct {
  background-image: url(../images/minisite-bg-instinct.jpg); }

#minisite-fenix {
  background-image: url(../images/minisite-bg-fenix.jpg); }

#minisite-descent {
  background-image: url(../images/minisite-bg-descent.jpg); }

#minisite-tactix {
  background-image: url(../images/minisite-bg-tactix.jpg); }

#minisite-enduro {
  background-image: url(../images/minisite-bg-enduro.jpg); }

#minisite-forerunner {
  background-image: url(../images/minisite-bg-forerunner.jpg); }

html:lang(en-HK) #solar-openwording a p, html:lang(en-SG) #solar-openwording a p, html:lang(en-MY) #solar-openwording a p, html:lang(en-PH) #solar-openwording a p {
  font-size: 2vw !important; }

/*footernote*/
#footernote {
  padding: 3rem 0;
  text-align: center;
  margin: 0 auto; }

#footernote p {
  font-size: .8rem !important;
  color: #cccccc !important; }

/*科技部分*/
#solar-tech {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden; }
  #solar-tech .container {
    margin: 0 auto;
    height: 100%;
    z-index: 20; }
  #solar-tech h2 {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    z-index: 20;
    margin-top: 10vh; }
  #solar-tech p {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    padding-top: 30px;
    z-index: 20; }

#solar-tech:after {
  content: "";
  background: -webkit-radial-gradient(center, ellipse cover, black 50%, rgba(0, 0, 0, 0.1) 94%);
  background: #000000;
  background: -moz-linear-gradient(top, #000000 0%, transparent 80%);
  background: -webkit-linear-gradient(top, #000000 0%, transparent 80%);
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(80%, transparent));
  background: -o-linear-gradient(top, #000000 0%, transparent 80%);
  background: linear-gradient(to bottom, #000000 0%, transparent 80%);
  width: 100%;
  height: 100%;
  opacity: .8;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15; }

#tech-glass {
  position: relative;
  width: 100%;
  height: 120vh;
  max-height: 900px;
  background-image: url(../images/glass-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.glass-bg {
  display: none; }

#tech-glass .container {
  margin: 0 auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

#tech-glass .wording {
  width: 80%;
  padding: 6rem 0;
  text-align: left;
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-30%, -50%);
  -ms-transform: translate(-30%, -50%);
  transform: translate(-30%, -50%);
  z-index: 20; }
  #tech-glass .wording p {
    width: 37%; }

#tech-shadow {
  position: relative;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #tech-shadow .bg {
    width: 70%;
    background: url(../images/coverd-bg.jpg) top center;
    background-size: 80%;
    background-position: 50% 35%;
    background-repeat: no-repeat; }
  #tech-shadow .wording {
    width: 30%;
    padding: 6rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(-30%, -50%);
    -ms-transform: translate(-30%, -50%);
    transform: translate(-30%, -50%); }
    #tech-shadow .wording p {
      width: 100%; }
  #tech-shadow .container {
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

#electricity {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 800px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #electricity .wording {
    width: 80%;
    padding: 6rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translate(-30%, -50%);
    -ms-transform: translate(-30%, -50%);
    transform: translate(-30%, -50%);
    z-index: 20; }
    #electricity .wording p {
      width: 37%; }
      #electricity .wording p span {
        font-size: .8rem !important;
        color: #cccccc !important;
        display: block; }

#electricity:after {
  content: "";
  background: #000000;
  background: -moz-linear-gradient(left, #000000 0%, #000000 0%, transparent 50%, #000000 100%);
  background: -webkit-linear-gradient(left, #000000 0%, #000000 0%, transparent 50%, #000000 100%);
  background: -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0%, #000000), color-stop(50%, transparent), to(#000000));
  background: -o-linear-gradient(left, #000000 0%, #000000 0%, transparent 50%, #000000 100%);
  background: linear-gradient(to right, #000000 0%, #000000 0%, transparent 50%, #000000 100%);
  width: 100%;
  height: 100vh;
  opacity: .8;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15; }

#electricity video {
  width: 100vw;
  height: auto; }

@media (min-width: 768px) {
  #electricity video {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); } }

@media (max-width: 767px) {
  #electricity {
    height: auto; } }

#powermanager {
  position: relative;
  width: 100%;
  height: 150vh;
  max-height: 900px;
  background: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #powermanager .wording {
    width: 70%;
    padding: 6rem 0;
    text-align: center;
    margin: 0 auto;
    z-index: 20; }

#powermanager .wording h4,
#powermanager02 .wording h4 {
  font-size: 36px !important;
  color: #fff !important;
  margin: 2rem 0; }

#powermanager .wording p span,
#powermanager02 .wording p span {
  font-size: .8rem !important;
  color: #cccccc !important;
  display: block; }

#powermanager .power-img {
  width: 90%;
  margin: 0 auto;
  text-align: center; }
  #powermanager .power-img img {
    width: 100%;
    max-width: 750px;
    padding: 0 1rem; }

#powermanager02 {
  position: relative;
  width: 100%;
  height: 150vh;
  max-height: 1115px;
  background: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }
  #powermanager02 .power-img {
    width: 90%;
    margin: 0 auto; }
    #powermanager02 .power-img img {
      width: 100%;
      max-width: 750px;
      padding: 0 1rem; }
  #powermanager02 .wording {
    width: 50%;
    padding: 3rem 0 0 0;
    text-align: center;
    margin: 0 auto;
    z-index: 20; }
  #powermanager02 .bg {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 800px;
    background-image: url(../images/power-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
    #powermanager02 .bg .icon-total {
      width: 90%;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    #powermanager02 .bg .icon {
      width: 25%;
      max-width: 200px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 3rem; }
      #powermanager02 .bg .icon p {
        font-size: 20px !important;
        margin-left: 20px;
        line-height: 1.4 !important; }

#powermanager02 .bg .icon-total div:nth-child(3) {
  position: absolute;
  right: 20%; }

#powermanager02 .bg .icon-total div:nth-child(4) {
  position: absolute;
  right: 0%; }

@media (max-width: 1680px) {
  section h2 {
    font-size: 50px !important; }
  #powermanager .power-img {
    width: 1280px;
    margin: 0 auto; }
  #powermanager .power-img img {
    width: 50%;
    max-width: 600px;
    padding: 0 20px; }
  #powermanager02 .bg .icon {
    width: 22%;
    max-width: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 2rem; } }

@media (max-width: 1440px) {
  section h2 {
    font-size: 36px !important; }
  section p {
    font-size: 16px !important; }
  .slogan img {
    width: 250px; }
  #hero .kv-product {
    bottom: -20%; }
    #hero .kv-product img {
      width: 100%;
      max-width: 400px; }
  #imagesequence {
    margin: 0 auto;
    text-align: center;
    margin-top: 5rem; }
  #solar-openwording .title {
    height: 30vh;
    padding-top: 1rem; }
  #solar-openwording .series {
    padding-top: 0; }
  #solar-brand-01 {
    width: 100%;
    padding: 8vh 0 0 0 !important;
    padding-bottom: 5vw !important; }
  .slide-buttons img {
    width: 100%;
    max-width: 300px; }
  #for-outdoor .wording p,
  #for-green .wording p {
    width: 50%; }
  #for-trip .wording p {
    width: 90%; }
  #minisite-series .minisite-section .content h2 {
    font-size: 36px !important;
    line-height: 1 !important; }
  #tech-glass {
    height: 100vh; }
    #tech-glass .wording p {
      width: 50%; }
  #powermanager {
    max-height: 850px; }
    #powermanager .wording {
      width: 80%;
      padding: 6rem 0;
      text-align: center;
      margin: 0 auto;
      z-index: 20; }
  #powermanager02 {
    width: 100%;
    height: 123vh;
    max-height: 1200px; }
    #powermanager02 .bg {
      max-height: 600px; }
      #powermanager02 .bg .icon {
        margin: 0 1rem; }
        #powermanager02 .bg .icon img {
          width: 80px;
          height: 80px; }
  #tech-shadow .wording p {
    width: 72%; }
  html:lang(en-HK) #solar-openwording a p, html:lang(en-SG) #solar-openwording a p, html:lang(en-MY) #solar-openwording a p, html:lang(en-PH) #solar-openwording a p, html:lang(en-IN) #solar-openwording a p {
    font-size: 28px !important; }
  html:lang(en-HK) .btn-white-empty, html:lang(en-SG) .btn-white-empty, html:lang(en-MY) .btn-white-empty, html:lang(en-PH) .btn-white-empty, html:lang(en-IN) .btn-white-empty {
    text-align: center; }
  html:lang(en-HK) #tech-shadow .wording, html:lang(en-SG) #tech-shadow .wording, html:lang(en-MY) #tech-shadow .wording, html:lang(en-PH) #tech-shadow .wording, html:lang(en-IN) #tech-shadow .wording {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); }
  html:lang(en-HK) #tech-shadow .wording, html:lang(en-SG) #tech-shadow .wording, html:lang(en-MY) #tech-shadow .wording, html:lang(en-PH) #tech-shadow .wording, html:lang(en-IN) #tech-shadow .wording {
    width: 38%; }
  html:lang(en-HK) #electricity .wording p, html:lang(en-SG) #electricity .wording p, html:lang(en-MY) #electricity .wording p, html:lang(en-PH) #electricity .wording p, html:lang(en-IN) #electricity .wording p {
    width: 50%; }
  html:lang(en-HK) #powermanager02 .wording, html:lang(en-SG) #powermanager02 .wording, html:lang(en-MY) #powermanager02 .wording, html:lang(en-PH) #powermanager02 .wording, html:lang(en-IN) #powermanager02 .wording {
    width: 65%; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 116vh; }
  html:lang(en-HK) #powermanager02 .bg .icon p, html:lang(en-SG) #powermanager02 .bg .icon p, html:lang(en-MY) #powermanager02 .bg .icon p, html:lang(en-PH) #powermanager02 .bg .icon p, html:lang(en-IN) #powermanager02 .bg .icon p {
    font-size: 18px !important;
    margin-left: 20px;
    line-height: 1.4 !important; }
  html:lang(en-SG) #solar-brand-01 {
    width: 100%; } }

@media (max-width: 1368px) {
  #hero {
    height: 40vw; }
    #hero .slogan {
      top: 12%; }
  .slogan img {
    width: 250px; }
  #imagesequence {
    margin: 0 auto;
    text-align: center;
    margin-top: 5rem; }
  #solar-brand-01 {
    width: 100%; }
  #solar-openwording .title {
    height: 30vh;
    padding-top: 1rem; }
  #solar-openwording .series {
    padding-top: 0; }
  #for-trip .wording {
    width: 30%; }
  .slide-buttons img {
    width: 100%;
    max-width: 300px; }
  #solar-brand-01 {
    width: 100%; }
  #minisite-series .minisite-section .content h2 {
    font-size: 30px !important; }
  #minisite-series .minisite-section .content p {
    font-size: 14px !important; }
  #tech-glass .wording p {
    width: 50%; }
  #tech-shadow .wording p {
    width: 80%; }
  #powermanager {
    max-height: 800px; }
  #powermanager02 {
    width: 100%;
    max-height: 1200px; }
    #powermanager02 .bg {
      max-height: 500px; }
  #powermanager .wording h4,
  #powermanager02 .wording h4 {
    font-size: 30px !important;
    margin: 2rem 0; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 125vh; } }

@media (max-width: 1280px) {
  section h2 {
    font-size: 40px !important;
    line-height: 1.2em !important; }
  #solar-brand-01 {
    width: 100%; }
  html:lang(th-TH) #solar-tech h2,
  html:lang(th-TH) #tech-glass .wording h2,
  html:lang(th-TH) #tech-shadow .wording h2,
  html:lang(th-TH) #electricity .wording h2,
  html:lang(th-TH) #powermanager .wording h2,
  html:lang(th-TH) #powermanager .wording h2 {
    font-size: 36px !important; }
  html:lang(vi-VN) #solar-tech h2,
  html:lang(vi-VN) #tech-glass .wording h2,
  html:lang(vi-VN) #tech-shadow .wording h2,
  html:lang(vi-VN) #electricity .wording h2,
  html:lang(vi-VN) #powermanager .wording h2,
  html:lang(vi-VN) #powermanager .wording h2 {
    font-size: 36px !important; }
  html:lang(en-HK) #solar-brand-01, html:lang(en-SG) #solar-brand-01, html:lang(en-MY) #solar-brand-01, html:lang(en-PH) #solar-brand-01, html:lang(en-IN) #solar-brand-01 {
    width: 100%;
    height: auto;
    padding-bottom: 10vh !important;
    padding: 0 0 3vh 0; }
  #for-outdoor {
    background-position: 25% center; }
    #for-outdoor .wording {
      top: 50%;
      left: 8%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%); }
  #for-trip {
    background-position: 95% center; }
  #for-green {
    background-position: 25% center; }
    #for-green .wording {
      top: 50%;
      left: 8%;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%); }
  #tech-glass {
    background-position: 75% center;
    background-size: cover; }
  #powermanager {
    max-height: 770px; }
    #powermanager .power-img {
      width: 1100px;
      margin: 0 auto; }
      #powermanager .power-img img {
        width: 50%;
        max-width: 540px;
        padding: 0 10px; }
    #powermanager .wording {
      width: 80%;
      padding: 4rem 0; }
  #powermanager02 {
    width: 100%;
    height: 100vw;
    max-height: 885px; }
    #powermanager02 .wording {
      padding: 1rem 0 0 0; }
    #powermanager02 .bg .icon-total {
      width: 100%; }
  html:lang(en-HK) #solar-openwording a p, html:lang(en-SG) #solar-openwording a p, html:lang(en-MY) #solar-openwording a p, html:lang(en-PH) #solar-openwording a p, html:lang(en-IN) #solar-openwording a p {
    font-size: 24px !important; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 115vh; } }

@media (max-width: 1024px) {
  .slogan img {
    width: 200px;
    max-height: 400px; }
  #hero .kv-product {
    bottom: -40%; }
    #hero .kv-product img {
      max-width: 300px; }
  #hero .slogan {
    top: 10%; }
  #solar-openwording .title {
    height: 30vw;
    background: #000; }
  #solar-brand-01 {
    width: 100%;
    height: auto; }
  .slide-buttons {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .slide-buttons li {
    width: calc(100%/3 - 10px); }
  .slide-buttons li a::before {
    font-size: 50px;
    top: 20px; }
  .slide-buttons li a p {
    font-size: 50px; }
  #for-outdoor,
  #for-green {
    background-position: center center; }
  #for-outdoor .wording p {
    width: 60%; }
  #for-green .wording p {
    width: 100%; }
  #for-outdoor,
  #for-green,
  #for-trip {
    height: 100vh;
    overflow: hidden;
    background-position: 55% center; }
  #for-trip .wording {
    width: 40%; }
  #for-outdoor,
  #for-green {
    background-position: 65% center; }
  #minisite-series .minisite-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; }
  #minisite-series {
    height: 25vh; }
  #minisite-instinct {
    background-image: url(../images/minisite-bg-instinct-m.jpg); }
  #minisite-fenix {
    background-image: url(../images/minisite-bg-fenix-m.jpg); }
  #minisite-descent {
    background-image: url(../images/minisite-bg-descent-m.jpg); }
  #minisite-tactix {
    background-image: url(../images/minisite-bg-tactix-m.jpg); }
  #minisite-enduro {
    background-image: url(../images/minisite-bg-enduro-m.jpg); }
  #minisite-forerunner {
    background-image: url(../images/minisite-bg-forerunner-m.jpg); }
  #solar-tech {
    width: 100%;
    height: 60vh; }
    #solar-tech h2 {
      width: 100%; }
    #solar-tech p {
      width: 80%; }
  #tech-glass {
    background-position: 75% center;
    background-size: 155%;
    position: relative;
    width: 100%;
    height: 120vh;
    overflow: hidden; }
  #tech-glass:after {
    content: "";
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 50%, black 94%);
    background: #000000;
    background: -moz-linear-gradient(right, transparent 0%, #000000 90%);
    background: -webkit-linear-gradient(right, transparent 0%, #000000 90%);
    background: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(90%, #000000));
    background: -o-linear-gradient(right, transparent 0%, #000000 90%);
    background: linear-gradient(to left, transparent 0%, #000000 90%);
    width: 100%;
    height: 120vh;
    opacity: .8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15; }
  #tech-shadow {
    width: 100%;
    height: 100vh;
    max-height: 900px; }
    #tech-shadow .wording {
      width: 100%;
      padding: 1rem 0;
      text-align: center;
      position: absolute;
      margin: 0 auto;
      top: 10%;
      left: 50%;
      -webkit-transform: translate(-50%, -10%);
      -ms-transform: translate(-50%, -10%);
      transform: translate(-50%, -10%); }
      #tech-shadow .wording p {
        width: 80%;
        margin: 0 auto; }
    #tech-shadow .bg {
      width: 100%;
      height: 450px;
      background: url(../images/coverd-bg.jpg) center center;
      background-size: cover;
      position: absolute;
      bottom: 0; }
  #electricity {
    position: relative;
    width: 100%;
    height: 80vh;
    max-height: 570px; }
  #powermanager {
    max-height: 800px; }
    #powermanager .power-img {
      width: 1000px;
      margin: 0 auto;
      text-align: center; }
      #powermanager .power-img img {
        max-width: 490px;
        padding: 0 10px; }
  #powermanager02 {
    width: 100%;
    height: 100vw;
    background-size: 200%;
    max-height: 1500px; }
    #powermanager02 .wording {
      width: 80%; }
    #powermanager02 .bg {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 700px;
      background-image: url(../images/power-bg-m.jpg);
      background-repeat: no-repeat; }
      #powermanager02 .bg .icon-total {
        width: 90%;
        top: 6%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0); }
  #powermanager02 .bg .icon-total div:nth-child(3) {
    position: relative;
    right: auto; }
  #powermanager02 .bg .icon-total div:nth-child(4) {
    position: relative;
    right: auto; }
  #electricity .wording p {
    width: 100%; }
  html:lang(en-HK) #tech-shadow .wording, html:lang(en-SG) #tech-shadow .wording, html:lang(en-MY) #tech-shadow .wording, html:lang(en-PH) #tech-shadow .wording, html:lang(en-IN) #tech-shadow .wording {
    width: 100%; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 78vh; }
    html:lang(en-HK) #powermanager02 .wording, html:lang(en-SG) #powermanager02 .wording, html:lang(en-MY) #powermanager02 .wording, html:lang(en-PH) #powermanager02 .wording, html:lang(en-IN) #powermanager02 .wording {
      width: 90%; }
  html:lang(en-HK) #tech-shadow .wording, html:lang(en-SG) #tech-shadow .wording, html:lang(en-MY) #tech-shadow .wording, html:lang(en-PH) #tech-shadow .wording, html:lang(en-IN) #tech-shadow .wording {
    top: 15%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); } }

@media only screen and (min-width: 769px) and (max-width: 1023px) {
  #hero .slogan {
    top: 35%; }
  #hero .kv-product {
    bottom: -56%; }
  #solar-brand-01 {
    width: 100%; }
  .slogan img {
    width: 180px;
    max-height: 400px; }
  #solar-openwording .title {
    background: #000; }
  #for-trip .wording {
    width: 40%; }
  #tech-glass {
    background-size: 205%; }
  #tech-glass .wording p {
    width: 100%; }
  #powermanager02 {
    height: 130vw;
    max-height: 966px; } }

@media (max-width: 768px) {
  #hero {
    height: 50vw; }
    #hero .kv-product {
      bottom: -55%; }
      #hero .kv-product img {
        max-width: 280px; }
  #hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translate(-50%, -50%); }
  #hero .kv-product {
    bottom: auto;
    top: 50%; }
  .slogan img {
    width: 140px;
    max-height: 400px; }
  html:lang(zh-TW) #hero .slogan {
    top: 25%; }
  #solar-openwording .title {
    height: auto;
    background: #000; }
  #solar-openwording h2 {
    margin-top: 0;
    width: 80%; }
  #solar-openwording p {
    width: 80%; }
  #solar-openwording a p {
    font-size: 4vw !important; }
  #solar-brand-01 p {
    width: 80%; }
  #solar-brand-01 .title {
    height: 80vw;
    background: #000; }
  html:lang(zh-TW) #solar-brand-01 {
    width: 100%; }
  .scrollmagic-pin-spacer {
    min-width: 700px !important; }
  #for-outdoor .wording h2,
  #for-trip .wording h2,
  #for-green .wording h2 {
    font-size: 40px !important; }
  #for-outdoor {
    background-image: url(../images/outdoor-bg-bright-m.jpg);
    background-position: right center; }
    #for-outdoor .wording {
      top: auto;
      width: 90%;
      bottom: 3rem;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      padding: 0;
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      background-position: left center; }
      #for-outdoor .wording p {
        width: 100%; }
  #for-trip {
    background-image: url(../images/trip-bg-bright-m.jpg); }
    #for-trip .wording {
      top: auto;
      width: 90%;
      bottom: 3rem;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      padding: 0;
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      background-position: left center; }
      #for-trip .wording p {
        width: 100%; }
  #for-green {
    background-image: url(../images/green-bg-bright-m.jpg);
    background-position: right center; }
    #for-green .wording {
      top: auto;
      width: 90%;
      bottom: 3rem;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      padding: 0;
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      background-position: left center; }
  #for-green
#for-green .wording p {
    width: 100%; }
  #for-outdoor,
  #for-green,
  #for-trip {
    overflow: hidden;
    height: 100vh; }
  #minisite-series .minisite-section {
    background-position: 31% center; }
  #solar-tech h2,
  #tech-glass .wording h2,
  #tech-shadow .wording h2,
  #electricity .wording h2,
  #powermanager .wording h2,
  #powermanager .wording h2 {
    font-size: 40px !important; }
  #solar-tech {
    width: 100%;
    height: 70vh;
    background-size: 160% !important; }
  .glass-bg {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0; }
  #tech-glass {
    background: #000000;
    width: 100%;
    height: 140vh;
    max-height: 1300px;
    overflow: hidden; }
    #tech-glass .wording {
      width: 85%;
      padding: 2rem 0;
      text-align: center;
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      z-index: 20; }
      #tech-glass .wording h2 {
        text-align: center; }
      #tech-glass .wording p {
        width: 100%;
        text-align: center;
        padding-bottom: 30px; }
  #tech-glass:after {
    background: transparent; }
  #tech-shadow {
    position: relative;
    width: 100%;
    height: 110vh;
    max-height: 1200px; }
  #electricity {
    height: 70vh; }
  #electricity:after {
    content: "";
    background: #000000;
    width: 100%;
    height: 100vh;
    opacity: .5;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15; }
  #electricity .wording h2,
  #electricity .wording p {
    text-align: center; }
  #electricity .wording {
    width: 100%;
    padding: 3rem 0;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20; }
    #electricity .wording p {
      width: 90%;
      margin: 0 auto; }
  #electricity video {
    width: 250vw;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: auto; }
  #powermanager {
    max-height: 1200px; }
    #powermanager .power-img {
      width: 700px;
      margin: 0 auto;
      text-align: center; }
      #powermanager .power-img img {
        width: 100%;
        max-width: 490px;
        padding: 10px 10px; }
  #powermanager02 {
    width: 100%;
    height: 140vw;
    max-height: 1200px; }
    #powermanager02 .bg {
      background-position: bottom center; }
      #powermanager02 .bg .icon {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        #powermanager02 .bg .icon p {
          margin-left: 0; }
  html:lang(zh-TW) #tech-glass {
    height: 110vw; }
  html:lang(zh-TW) #tech-shadow {
    height: 100vw; }
  html:lang(zh-TW) #powermanager02 {
    height: 131vw; }
  html:lang(ko-KR) #tech-glass {
    height: 110vw; }
  html:lang(ko-KR) #tech-shadow {
    height: 100vw; }
  html:lang(ko-KR) #powermanager {
    max-height: 1000px; }
  html:lang(en-HK) #tech-shadow, html:lang(en-SG) #tech-shadow, html:lang(en-MY) #tech-shadow, html:lang(en-PH) #tech-shadow, html:lang(en-IN) #tech-shadow {
    height: 90vh; }
  html:lang(en-HK) #electricity .wording p, html:lang(en-SG) #electricity .wording p, html:lang(en-MY) #electricity .wording p, html:lang(en-PH) #electricity .wording p, html:lang(en-IN) #electricity .wording p {
    width: 80%; }
  html:lang(en-HK) #tech-glass, html:lang(en-SG) #tech-glass, html:lang(en-MY) #tech-glass, html:lang(en-PH) #tech-glass, html:lang(en-IN) #tech-glass {
    height: 230vw; }
  html:lang(en-HK) #powermanager, html:lang(en-SG) #powermanager, html:lang(en-MY) #powermanager, html:lang(en-PH) #powermanager, html:lang(en-IN) #powermanager {
    height: 240vw; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 109vh; }
  html:lang(en-HK) #powermanager02 .bg .icon p, html:lang(en-SG) #powermanager02 .bg .icon p, html:lang(en-MY) #powermanager02 .bg .icon p, html:lang(en-PH) #powermanager02 .bg .icon p, html:lang(en-IN) #powermanager02 .bg .icon p {
    margin-left: 0;
    margin-top: 10px; }
  html:lang(en-HK) #tech-shadow .wording, html:lang(en-SG) #tech-shadow .wording, html:lang(en-MY) #tech-shadow .wording, html:lang(en-PH) #tech-shadow .wording, html:lang(en-IN) #tech-shadow .wording {
    top: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    position: relative;
    left: auto;
    margin-top: 30px; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  section h2 {
    font-size: 36px !important; }
  html:lang(zh-TW) #solar-brand-01 {
    width: 100%; }
  #solar-brand-01 {
    width: 100%; }
  #hero .slogan {
    top: 45%; }
  #tech-glass {
    height: 140vh; }
  .scrollmagic-pin-spacer {
    min-width: 400px !important; }
  #solar-openwording .title {
    height: 100vw;
    background: #000; }
  html:lang(zh-TW) #hero .slogan {
    top: 30%; }
  #hero .kv-product {
    bottom: 0;
    top: 50%; }
  #solar-openwording a p {
    font-size: 30px !important; }
  #for-trip .wording {
    width: 100%; }
  #for-outdoor,
  #for-green {
    background-position: right center; }
  #for-trip {
    background-position: left center; }
  #electricity .wording p {
    width: 90%; }
  html:lang(zh-TW) #powermanager02 {
    height: 200vw; }
  #powermanager {
    max-height: 1300px; }
  #powermanager02 {
    height: 250vw; }
  #powermanager .power-img {
    width: 400px;
    margin: 0 auto;
    text-align: center; }
  #powermanager02 .bg .icon p {
    margin-left: 0; }
  #powermanager02 .bg .icon {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; } }

@media (max-width: 599px) {
  section h2 {
    font-size: 32px !important; }
  section p {
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.8em !important; }
  #hero {
    height: 60vw !important; }
  #hero video {
    width: 180vw;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .slogan img {
    width: 120px;
    max-height: 400px; }
  html:lang(zh-TW) .slogan img {
    width: 100%;
    max-width: 120px; }
  #hero .kv-product {
    min-height: 200px;
    bottom: -25%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    padding-bottom: 0 !important; }
  section h2 {
    font-size: 32px !important;
    padding: 1rem 0; }
  #solar-openwording div {
    margin: 0 auto;
    text-align: center;
    margin-top: 0;
    background-size: cover; }
  #solar-openwording h2 {
    text-align: center;
    margin: 2rem 0;
    width: 90%;
    padding: 0 1rem;
    margin: 2rem auto; }
  #solar-openwording .title {
    background: #000;
    padding-bottom: 50px !important;
    overflow: hidden;
    margin-top: 0; }
  #solar-openwording a p {
    font-size: 28px !important;
    padding: 0; }
  #myimg {
    width: 90%;
    max-width: 90px; }
  #solar-openwording .title p {
    margin: 0 auto;
    width: 80%;
    margin-top: 0;
    padding: 0; }
  #solar-brand-01 {
    width: 100%;
    height: auto;
    background-size: contain; }
    #solar-brand-01 p {
      width: 90%;
      padding: 0;
      margin: 0 auto; }
    #solar-brand-01 a {
      margin-bottom: 30px; }
  .slide-buttons {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90%; }
    .slide-buttons li {
      margin: 10px 0;
      width: 40%;
      padding: 0; }
    .slide-buttons li:nth-child(3) {
      width: 50%; }
    .slide-buttons li:nth-child(3) img {
      width: 100%;
      max-width: 400px; }
  .scrollmagic-pin-spacer {
    min-width: 300px !important; }
  .slide-buttons li a::before {
    font-size: 40px;
    top: 16px; }
  .slide-buttons {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .slide-buttons li {
      margin: 10px 0;
      width: 50%; }
      .slide-buttons li a {
        font-size: 40px;
        -webkit-text-stroke: 1px var(--white) !important; }
  #for-outdoor {
    background-size: 110%;
    background-image: url(../images/outdoor-bg-bright-m.jpg);
    background-position: top center;
    height: 100vh; }
  #for-trip {
    background-size: 110%;
    background-image: url(../images/trip-bg-bright-m.jpg);
    background-position: top center;
    height: 100vh; }
  #for-green {
    background-image: url(../images/green-bg-bright-m.jpg);
    background-size: 110%;
    background-position: top center;
    height: 100vh; }
  #for-outdoor .wording,
  #for-trip .wording,
  #for-green .wording {
    top: auto;
    width: 90%;
    bottom: 2rem;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0 auto; }
  #for-outdoor .wording h2,
  #for-trip .wording h2,
  #for-green .wording h2 {
    font-size: 28px !important;
    margin-bottom: 0; }
  #for-outdoor p,
  #for-trip p,
  #for-green p {
    font-size: 14px !important;
    width: 100%; }
  html:lang(zh-TW) #for-outdoor,
  html:lang(zh-TW) #for-trip,
  html:lang(zh-TW) #for-green {
    height: 150vw; }
  .minisite-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .minisite-container h2 {
    font-size: 24px !important;
    padding: 0; }
  .minisite-section .content {
    z-index: 2;
    width: 70%; }
  #minisite-series .minisite-section .content {
    width: 70%;
    right: -5px; }
  #minisite-series {
    height: 80vh;
    background-image: url(../images/solar-watch-bg-m.jpg); }
  #minisite-series .btn-size-default {
    width: 80%; }
  #minisite-series .minisite-section .content p {
    font-size: 14px !important;
    line-height: 1.2 !important;
    width: 80%;
    margin: 10px auto; }
  html:lang(zh-TW) #minisite-series .minisite-container {
    height: 200vw; }
  html:lang(zh-TW) #minisite-series .minisite-section .content p {
    font-size: 15px !important;
    width: 80%;
    margin: 10px auto; }
  .btn-size-default {
    width: 50%;
    font-size: 13px !important; }
  #footernote p {
    color: #fff;
    font-size: .8em !important;
    line-height: 1.8em !important;
    padding: 0 2rem; }
  #solar-tech h2, #tech-glass .wording h2, #tech-shadow .wording h2, #electricity .wording h2, #powermanager .wording h2, #powermanager .wording h2 {
    font-size: 32px !important; }
  #solar-tech {
    width: 100%;
    height: 165vw;
    background-size: 160% !important;
    background-position: bottom center !important; }
    #solar-tech h2 {
      width: 80%;
      margin-top: 3vh; }
    #solar-tech p {
      padding-top: 0; }
  #tech-glass {
    width: 100%;
    height: 280vw;
    max-height: 2200px;
    overflow: hidden; }
    #tech-glass .wording p {
      font-size: 16px !important; }
    #tech-glass .wording h2 {
      width: 80%;
      margin: 0 auto;
      text-align: center; }
    #tech-glass .bg {
      width: 100%;
      height: 250px; }
  html:lang(th-TH) #tech-glass .wording h2 {
    width: 100%; }
  #tech-glass:after {
    background: transparent; }
  .glass-bg {
    display: block;
    width: 100%; }
  #tech-shadow {
    position: relative;
    width: 100%;
    height: 120vh;
    max-height: 1200px; }
    #tech-shadow .wording {
      width: 100%;
      padding: 1rem 0;
      text-align: center; }
      #tech-shadow .wording h2 {
        padding: 0; }
      #tech-shadow .wording p {
        font-size: 16px !important;
        width: 100%;
        padding: 0;
        width: 90%;
        margin: 0 auto; }
  html:lang(th-TH) #tech-shadow .wording, html:lang(vi-VN) #tech-shadow .wording {
    padding: 1em; }
  #electricity {
    height: 160vw; }
    #electricity .wording h2 {
      font-size: 32px !important;
      padding: 0 1em; }
  #electricity video {
    width: 215vw;
    margin: 0 auto;
    text-align: center;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #electricity .wording p {
    font-size: 16px !important;
    padding: 0;
    width: 90%; }
  #powermanager {
    height: 280vw;
    max-height: 1200px; }
    #powermanager .power-img {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      padding: 0; }
      #powermanager .power-img img {
        width: 90%;
        max-width: 490px;
        padding: 10px 0 10px 0; }
    #powermanager .wording {
      width: 80%;
      padding: 2rem 0; }
      #powermanager .wording p {
        font-size: 16px !important; }
  #powermanager02 {
    width: 100%;
    height: 300vw;
    max-height: 2000px; }
    #powermanager02 .wording p {
      font-size: 16px !important; }
    #powermanager02 .bg {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 600px;
      background-position: bottom center;
      position: absolute;
      bottom: 0; }
      #powermanager02 .bg .icon-total {
        width: 100%;
        margin: 0 auto;
        top: 0;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
      #powermanager02 .bg .icon {
        width: 50%;
        max-width: 100px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        align-items: center;
        margin: 0 2rem; }
      #powermanager02 .bg .icon p {
        font-size: 14px !important;
        margin-left: 0; }
      #powermanager02 .bg .icon-total img {
        width: 70px;
        height: 70px; }
  html:lang(ko-KR) #for-outdoor, html:lang(ko-KR) #for-green, html:lang(ko-KR) #for-trip {
    height: 160vw; }
  html:lang(ko-KR) #tech-glass {
    height: 200vw; }
  html:lang(ko-KR) #tech-shadow {
    height: 200vw; }
  html:lang(ko-KR) #powermanager {
    max-height: 1000px;
    height: 220vw; }
  html:lang(en-HK) #solar-openwording .title p, html:lang(en-HK) #solar-brand-01 p, html:lang(en-SG) #solar-openwording .title p, html:lang(en-SG) #solar-brand-01 p, html:lang(en-MY) #solar-openwording .title p, html:lang(en-MY) #solar-brand-01 p, html:lang(en-PH) #solar-openwording .title p, html:lang(en-PH) #solar-brand-01 p, html:lang(en-IN) #solar-openwording .title p, html:lang(en-IN) #solar-brand-01 p, html:lang(id-ID) #solar-openwording .title p, html:lang(id-ID) #solar-brand-01 p, html:lang(th-TH) #solar-openwording .title p, html:lang(th-TH) #solar-brand-01 p, html:lang(vi-VN) #solar-openwording .title p, html:lang(vi-VN) #solar-brand-01 p {
    font-size: 14px !important; }
  html:lang(en-HK) #for-outdoor,
  html:lang(en-HK) #for-trip,
  html:lang(en-HK) #for-green, html:lang(en-SG) #for-outdoor,
  html:lang(en-SG) #for-trip,
  html:lang(en-SG) #for-green, html:lang(en-MY) #for-outdoor,
  html:lang(en-MY) #for-trip,
  html:lang(en-MY) #for-green, html:lang(en-PH) #for-outdoor,
  html:lang(en-PH) #for-trip,
  html:lang(en-PH) #for-green, html:lang(en-IN) #for-outdoor,
  html:lang(en-IN) #for-trip,
  html:lang(en-IN) #for-green, html:lang(id-ID) #for-outdoor,
  html:lang(id-ID) #for-trip,
  html:lang(id-ID) #for-green, html:lang(th-TH) #for-outdoor,
  html:lang(th-TH) #for-trip,
  html:lang(th-TH) #for-green, html:lang(vi-VN) #for-outdoor,
  html:lang(vi-VN) #for-trip,
  html:lang(vi-VN) #for-green {
    height: 170vw; }
    html:lang(en-HK) #for-outdoor .wording p,
    html:lang(en-HK) #for-trip .wording p,
    html:lang(en-HK) #for-green .wording p, html:lang(en-SG) #for-outdoor .wording p,
    html:lang(en-SG) #for-trip .wording p,
    html:lang(en-SG) #for-green .wording p, html:lang(en-MY) #for-outdoor .wording p,
    html:lang(en-MY) #for-trip .wording p,
    html:lang(en-MY) #for-green .wording p, html:lang(en-PH) #for-outdoor .wording p,
    html:lang(en-PH) #for-trip .wording p,
    html:lang(en-PH) #for-green .wording p, html:lang(en-IN) #for-outdoor .wording p,
    html:lang(en-IN) #for-trip .wording p,
    html:lang(en-IN) #for-green .wording p, html:lang(id-ID) #for-outdoor .wording p,
    html:lang(id-ID) #for-trip .wording p,
    html:lang(id-ID) #for-green .wording p, html:lang(th-TH) #for-outdoor .wording p,
    html:lang(th-TH) #for-trip .wording p,
    html:lang(th-TH) #for-green .wording p, html:lang(vi-VN) #for-outdoor .wording p,
    html:lang(vi-VN) #for-trip .wording p,
    html:lang(vi-VN) #for-green .wording p {
      font-size: 14px !important; }
  html:lang(en-HK) #solar-tech h2, html:lang(en-HK) #tech-glass .wording h2, html:lang(en-HK) #tech-shadow .wording h2, html:lang(en-HK) #electricity .wording h2, html:lang(en-HK) #powermanager .wording h2, html:lang(en-HK) #powermanager .wording h2, html:lang(en-HK) #powermanager02 .wording h2, html:lang(en-SG) #solar-tech h2, html:lang(en-SG) #tech-glass .wording h2, html:lang(en-SG) #tech-shadow .wording h2, html:lang(en-SG) #electricity .wording h2, html:lang(en-SG) #powermanager .wording h2, html:lang(en-SG) #powermanager .wording h2, html:lang(en-SG) #powermanager02 .wording h2, html:lang(en-MY) #solar-tech h2, html:lang(en-MY) #tech-glass .wording h2, html:lang(en-MY) #tech-shadow .wording h2, html:lang(en-MY) #electricity .wording h2, html:lang(en-MY) #powermanager .wording h2, html:lang(en-MY) #powermanager .wording h2, html:lang(en-MY) #powermanager02 .wording h2, html:lang(en-PH) #solar-tech h2, html:lang(en-PH) #tech-glass .wording h2, html:lang(en-PH) #tech-shadow .wording h2, html:lang(en-PH) #electricity .wording h2, html:lang(en-PH) #powermanager .wording h2, html:lang(en-PH) #powermanager .wording h2, html:lang(en-PH) #powermanager02 .wording h2, html:lang(en-IN) #solar-tech h2, html:lang(en-IN) #tech-glass .wording h2, html:lang(en-IN) #tech-shadow .wording h2, html:lang(en-IN) #electricity .wording h2, html:lang(en-IN) #powermanager .wording h2, html:lang(en-IN) #powermanager .wording h2, html:lang(en-IN) #powermanager02 .wording h2, html:lang(id-ID) #solar-tech h2, html:lang(id-ID) #tech-glass .wording h2, html:lang(id-ID) #tech-shadow .wording h2, html:lang(id-ID) #electricity .wording h2, html:lang(id-ID) #powermanager .wording h2, html:lang(id-ID) #powermanager .wording h2, html:lang(id-ID) #powermanager02 .wording h2, html:lang(th-TH) #solar-tech h2, html:lang(th-TH) #tech-glass .wording h2, html:lang(th-TH) #tech-shadow .wording h2, html:lang(th-TH) #electricity .wording h2, html:lang(th-TH) #powermanager .wording h2, html:lang(th-TH) #powermanager .wording h2, html:lang(th-TH) #powermanager02 .wording h2, html:lang(vi-VN) #solar-tech h2, html:lang(vi-VN) #tech-glass .wording h2, html:lang(vi-VN) #tech-shadow .wording h2, html:lang(vi-VN) #electricity .wording h2, html:lang(vi-VN) #powermanager .wording h2, html:lang(vi-VN) #powermanager .wording h2, html:lang(vi-VN) #powermanager02 .wording h2 {
    font-size: 28px !important; }
  html:lang(en-HK) #solar-tech p, html:lang(en-HK) #tech-glass .wording p, html:lang(en-HK) #tech-shadow .wording p, html:lang(en-HK) #electricity .wording p, html:lang(en-HK) #powermanager .wording p, html:lang(en-HK) #powermanager .wording p, html:lang(en-HK) #powermanager02 .wording p, html:lang(en-SG) #solar-tech p, html:lang(en-SG) #tech-glass .wording p, html:lang(en-SG) #tech-shadow .wording p, html:lang(en-SG) #electricity .wording p, html:lang(en-SG) #powermanager .wording p, html:lang(en-SG) #powermanager .wording p, html:lang(en-SG) #powermanager02 .wording p, html:lang(en-MY) #solar-tech p, html:lang(en-MY) #tech-glass .wording p, html:lang(en-MY) #tech-shadow .wording p, html:lang(en-MY) #electricity .wording p, html:lang(en-MY) #powermanager .wording p, html:lang(en-MY) #powermanager .wording p, html:lang(en-MY) #powermanager02 .wording p, html:lang(en-PH) #solar-tech p, html:lang(en-PH) #tech-glass .wording p, html:lang(en-PH) #tech-shadow .wording p, html:lang(en-PH) #electricity .wording p, html:lang(en-PH) #powermanager .wording p, html:lang(en-PH) #powermanager .wording p, html:lang(en-PH) #powermanager02 .wording p, html:lang(en-IN) #solar-tech p, html:lang(en-IN) #tech-glass .wording p, html:lang(en-IN) #tech-shadow .wording p, html:lang(en-IN) #electricity .wording p, html:lang(en-IN) #powermanager .wording p, html:lang(en-IN) #powermanager .wording p, html:lang(en-IN) #powermanager02 .wording p, html:lang(id-ID) #solar-tech p, html:lang(id-ID) #tech-glass .wording p, html:lang(id-ID) #tech-shadow .wording p, html:lang(id-ID) #electricity .wording p, html:lang(id-ID) #powermanager .wording p, html:lang(id-ID) #powermanager .wording p, html:lang(id-ID) #powermanager02 .wording p, html:lang(th-TH) #solar-tech p, html:lang(th-TH) #tech-glass .wording p, html:lang(th-TH) #tech-shadow .wording p, html:lang(th-TH) #electricity .wording p, html:lang(th-TH) #powermanager .wording p, html:lang(th-TH) #powermanager .wording p, html:lang(th-TH) #powermanager02 .wording p, html:lang(vi-VN) #solar-tech p, html:lang(vi-VN) #tech-glass .wording p, html:lang(vi-VN) #tech-shadow .wording p, html:lang(vi-VN) #electricity .wording p, html:lang(vi-VN) #powermanager .wording p, html:lang(vi-VN) #powermanager .wording p, html:lang(vi-VN) #powermanager02 .wording p {
    font-size: 14px !important; }
  html:lang(en-HK) #tech-glass, html:lang(en-SG) #tech-glass, html:lang(en-MY) #tech-glass, html:lang(en-PH) #tech-glass, html:lang(en-IN) #tech-glass, html:lang(id-ID) #tech-glass, html:lang(th-TH) #tech-glass, html:lang(vi-VN) #tech-glass {
    height: 230vw; }
  html:lang(en-HK) #tech-shadow, html:lang(en-SG) #tech-shadow, html:lang(en-MY) #tech-shadow, html:lang(en-PH) #tech-shadow, html:lang(en-IN) #tech-shadow, html:lang(id-ID) #tech-shadow, html:lang(th-TH) #tech-shadow, html:lang(vi-VN) #tech-shadow {
    height: 105vh; }
  html:lang(en-HK) #electricity .wording p, html:lang(en-SG) #electricity .wording p, html:lang(en-MY) #electricity .wording p, html:lang(en-PH) #electricity .wording p, html:lang(en-IN) #electricity .wording p, html:lang(id-ID) #electricity .wording p, html:lang(th-TH) #electricity .wording p, html:lang(vi-VN) #electricity .wording p {
    width: 100%; }
  html:lang(en-HK) #powermanager02 .wording, html:lang(en-SG) #powermanager02 .wording, html:lang(en-MY) #powermanager02 .wording, html:lang(en-PH) #powermanager02 .wording, html:lang(en-IN) #powermanager02 .wording, html:lang(id-ID) #powermanager02 .wording, html:lang(th-TH) #powermanager02 .wording, html:lang(vi-VN) #powermanager02 .wording {
    width: 80%; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02, html:lang(id-ID) #powermanager02, html:lang(th-TH) #powermanager02, html:lang(vi-VN) #powermanager02 {
    width: 100%;
    height: 280vw;
    max-height: 2200px; }
    html:lang(en-HK) #powermanager02 .bg, html:lang(en-SG) #powermanager02 .bg, html:lang(en-MY) #powermanager02 .bg, html:lang(en-PH) #powermanager02 .bg, html:lang(en-IN) #powermanager02 .bg, html:lang(id-ID) #powermanager02 .bg, html:lang(th-TH) #powermanager02 .bg, html:lang(vi-VN) #powermanager02 .bg {
      max-height: 600px; }
  html:lang(en-HK) #powermanager02 .bg .icon p, html:lang(en-SG) #powermanager02 .bg .icon p, html:lang(en-MY) #powermanager02 .bg .icon p, html:lang(en-PH) #powermanager02 .bg .icon p, html:lang(en-IN) #powermanager02 .bg .icon p, html:lang(id-ID) #powermanager02 .bg .icon p, html:lang(th-TH) #powermanager02 .bg .icon p, html:lang(vi-VN) #powermanager02 .bg .icon p {
    margin-left: 0;
    margin-top: 10px;
    font-size: 14px !important; }
  html:lang(en-HK) #powermanager .wording h4, html:lang(en-HK) #powermanager02 .wording h4, html:lang(en-SG) #powermanager .wording h4, html:lang(en-SG) #powermanager02 .wording h4, html:lang(en-MY) #powermanager .wording h4, html:lang(en-MY) #powermanager02 .wording h4, html:lang(en-PH) #powermanager .wording h4, html:lang(en-PH) #powermanager02 .wording h4, html:lang(en-IN) #powermanager .wording h4, html:lang(en-IN) #powermanager02 .wording h4, html:lang(id-ID) #powermanager .wording h4, html:lang(id-ID) #powermanager02 .wording h4, html:lang(th-TH) #powermanager .wording h4, html:lang(th-TH) #powermanager02 .wording h4, html:lang(vi-VN) #powermanager .wording h4, html:lang(vi-VN) #powermanager02 .wording h4 {
    font-size: 24px !important;
    color: #fff !important;
    margin: 2rem 0; }
  html:lang(vi-VN) #solar-tech h2, html:lang(vi-VN) #tech-glass .wording h2, html:lang(vi-VN) #tech-shadow .wording h2, html:lang(vi-VN) #electricity .wording h2, html:lang(vi-VN) #powermanager .wording h2, html:lang(vi-VN) #powermanager .wording h2 {
    font-size: 32px !important; }
  html:lang(zh-TW) #tech-glass {
    height: 200vw; }
    html:lang(zh-TW) #tech-glass .wording {
      position: relative; }
  html:lang(zh-TW) #tech-shadow {
    height: 200vw; }
  html:lang(zh-TW) #powermanager {
    height: 250vw; }
  html:lang(zh-TW) #powermanager02 {
    height: 131vw; }
  html:lang(zh-TW) #powermanager .wording h4, html:lang(zh-TW) #powermanager02 .wording h4 {
    font-size: 24px !important; } }

@media (max-width: 375px) {
  section h2 {
    font-size: 28px !important; }
  #solar-tech h2,
  #tech-glass .wording h2,
  #tech-shadow .wording h2,
  #electricity .wording h2,
  #powermanager .wording h2,
  #powermanager .wording h2 {
    font-size: 32px !important; }
  #hero .slogan {
    min-height: 200px; }
  #hero .kv-product img {
    max-width: 150px; }
  .slogan img {
    width: 140px; }
  #solar-brand-01 {
    width: 100%; }
  html:lang(zh-TW) #solar-brand-01 {
    width: 100%; }
  #solar-openwording .container {
    margin-top: 15vw !important; }
  #solar-openwording h2 {
    width: 80%; }
  .slide-buttons li a {
    -webkit-text-stroke: 0.5px var(--white) !important; }
  #for-outdoor,
  #for-trip,
  #for-green {
    height: 100vh; }
  .minisite-container .btn-size-default {
    width: 45%;
    font-size: 14px !important; }
  #minisite-series .minisite-section {
    background-position: 33% center; }
  #minisite-series .minisite-section .content p {
    font-size: 15px !important;
    width: 60%;
    margin: 0 auto;
    line-height: 1.5em !important;
    margin-bottom: 10px; }
  #solar-openwording .series {
    padding-top: 30px; }
  #solar-tech {
    width: 100%;
    height: 175vw;
    background-size: 160% !important; }
  #tech-glass {
    height: 330vw; }
  #tech-shadow {
    width: 100%;
    height: 240vw;
    max-height: 1500px; }
  #electricity {
    height: 220vw; }
  #electricity video {
    width: 320vw; }
  #electricity:after {
    height: 81vh; }
  #powermanager {
    height: 320vw;
    max-height: 2000px; }
  #powermanager02 {
    height: 330vw; }
  html:lang(th-TH) #tech-glass, html:lang(vi-VN) #tech-glass {
    height: 280vw; }
  html:lang(th-TH) #powermanager02, html:lang(vi-VN) #powermanager02 {
    height: 330vw; }
  html:lang(en-HK) #hero .kv-product, html:lang(en-SG) #hero .kv-product, html:lang(en-MY) #hero .kv-product, html:lang(en-PH) #hero .kv-product, html:lang(en-IN) #hero .kv-product {
    bottom: auto;
    top: 60%; }
  html:lang(en-HK) .minisite-container .btn-size-default, html:lang(en-SG) .minisite-container .btn-size-default, html:lang(en-MY) .minisite-container .btn-size-default, html:lang(en-PH) .minisite-container .btn-size-default, html:lang(en-IN) .minisite-container .btn-size-default {
    width: 60%; }
  html:lang(en-HK) #tech-glass, html:lang(en-SG) #tech-glass, html:lang(en-MY) #tech-glass, html:lang(en-PH) #tech-glass, html:lang(en-IN) #tech-glass {
    height: 260vw; } }

@media (max-width: 360px) {
  #solar-brand-01 {
    width: 100%; }
  #solar-openwording .title {
    height: 105vw;
    padding: 0 0 2rem 0 !important; }
  #solar-openwording h2 {
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem; }
  #minisite-series .minisite-container {
    height: 350vw; }
  #minisite-series .minisite-section .content h2 {
    font-size: 20px !important; }
  #minisite-series .minisite-section .content p {
    width: 85%; }
  #tech-glass {
    height: 290vw; }
  #tech-shadow {
    width: 100%;
    height: 220vw;
    max-height: 1500px; }
  #electricity {
    height: 197vw; }
  #electricity video {
    width: 265vw; }
  #electricity:after {
    height: 87vh; }
  #powermanager02 {
    height: 360vw; }
  .minisite-container .btn-size-default {
    width: 60%;
    font-size: 14px !important; }
  #solar-tech h2, #tech-glass .wording h2, #tech-shadow .wording h2, #electricity .wording h2, #powermanager .wording h2, #powermanager .wording h2 {
    font-size: 28px !important; }
  html:lang(zh-TW) #powermanager02 {
    height: 275vw; }
  html:lang(ko-KR) #tech-glass {
    height: 230vw; }
  html:lang(ko-KR) #tech-shadow {
    height: 240vw; }
  html:lang(ko-KR) #powermanager {
    max-height: 1000px;
    height: 250vw; }
  html:lang(ko-KR) #powermanager02 {
    height: 400vw; }
  html:lang(ko-KR) #solar-tech p,
  html:lang(ko-KR) #tech-glass .wording p,
  html:lang(ko-KR) #tech-shadow .wording p,
  html:lang(ko-KR) #electricity .wording p,
  html:lang(ko-KR) #powermanager .wording p,
  html:lang(ko-KR) #powermanager02 .wording p {
    font-size: 14px !important; }
  html:lang(en-HK) .slogan img, html:lang(en-SG) .slogan img, html:lang(en-MY) .slogan img, html:lang(en-PH) .slogan img, html:lang(en-IN) .slogan img {
    width: 120px; }
  html:lang(en-HK) #hero .kv-product, html:lang(en-SG) #hero .kv-product, html:lang(en-MY) #hero .kv-product, html:lang(en-PH) #hero .kv-product, html:lang(en-IN) #hero .kv-product {
    bottom: auto;
    top: 57%; }
  html:lang(en-HK) #tech-glass, html:lang(en-SG) #tech-glass, html:lang(en-MY) #tech-glass, html:lang(en-PH) #tech-glass, html:lang(en-IN) #tech-glass {
    height: 250vw; }
  html:lang(en-HK) #tech-shadow, html:lang(en-SG) #tech-shadow, html:lang(en-MY) #tech-shadow, html:lang(en-PH) #tech-shadow, html:lang(en-IN) #tech-shadow {
    height: 250vw; }
  html:lang(en-HK) #powermanager, html:lang(en-SG) #powermanager, html:lang(en-MY) #powermanager, html:lang(en-PH) #powermanager, html:lang(en-IN) #powermanager {
    height: 320vw; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 300vw; } }

@media (max-width: 320px) {
  #solar-openwording a p {
    font-size: 20px !important; }
  html:lang(zh-TW) #hero .slogan {
    top: 20%; }
  html:lang(zh-TW) #powermanager02 {
    height: 320vw; }
  #solar-brand-01 p {
    font-size: 14px !important; }
  #powermanager02 .bg .icon {
    max-width: 80px; }
  #powermanager02 .bg {
    max-height: 660px; }
  html:lang(en-HK) .slogan img, html:lang(en-SG) .slogan img, html:lang(en-MY) .slogan img, html:lang(en-PH) .slogan img, html:lang(en-IN) .slogan img {
    width: 100px; }
  html:lang(en-HK) #hero .kv-product, html:lang(en-SG) #hero .kv-product, html:lang(en-MY) #hero .kv-product, html:lang(en-PH) #hero .kv-product, html:lang(en-IN) #hero .kv-product {
    bottom: auto;
    top: 50%; }
  html:lang(en-HK) .minisite-container h2, html:lang(en-SG) .minisite-container h2, html:lang(en-MY) .minisite-container h2, html:lang(en-PH) .minisite-container h2, html:lang(en-IN) .minisite-container h2 {
    font-size: 22px !important;
    padding: 0; }
  html:lang(en-HK) #minisite-series .minisite-section .content p, html:lang(en-SG) #minisite-series .minisite-section .content p, html:lang(en-MY) #minisite-series .minisite-section .content p, html:lang(en-PH) #minisite-series .minisite-section .content p, html:lang(en-IN) #minisite-series .minisite-section .content p {
    font-size: 14px !important; }
  html:lang(en-HK) #tech-glass, html:lang(en-SG) #tech-glass, html:lang(en-MY) #tech-glass, html:lang(en-PH) #tech-glass, html:lang(en-IN) #tech-glass {
    height: 280vw; }
  html:lang(en-HK) #tech-shadow, html:lang(en-SG) #tech-shadow, html:lang(en-MY) #tech-shadow, html:lang(en-PH) #tech-shadow, html:lang(en-IN) #tech-shadow {
    height: 280vw; }
  html:lang(en-HK) #electricity:after, html:lang(en-SG) #electricity:after, html:lang(en-MY) #electricity:after, html:lang(en-PH) #electricity:after, html:lang(en-IN) #electricity:after {
    height: 110vh; }
  html:lang(en-HK) #powermanager02, html:lang(en-SG) #powermanager02, html:lang(en-MY) #powermanager02, html:lang(en-PH) #powermanager02, html:lang(en-IN) #powermanager02 {
    height: 400vw; }
  html:lang(en-HK) #tech-shadow .wording h2, html:lang(en-SG) #tech-shadow .wording h2, html:lang(en-MY) #tech-shadow .wording h2, html:lang(en-PH) #tech-shadow .wording h2, html:lang(en-IN) #tech-shadow .wording h2 {
    font-size: 28px !important;
    padding: 0 2rem; } }

/* 動畫部分 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); } }

@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); } }

.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

.hvr-buzz:hover,
.hvr-buzz:focus,
.hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }