@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */  
}
html{
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
  box-sizing: border-box;
  font-size: 100%; /* 根字體大小 */
}
body{
  padding-top: constant(safe-area-inset-top);   /* 針對ios APP */
  padding-right: constant(safe-area-inset-right);  /* 針對ios APP */
  padding-bottom: constant(safe-area-inset-bottom); /* 針對ios APP */
  padding-left: constant(safe-area-inset-left); /* 針對ios APP */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow-x: hidden;
}



#header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a{color: var(--primary);}
#header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active{color: var(--white);}
#header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a:hover  {color: var(--white);}
.hidden, .visible-xs, .visible-sm, .visible-md, .visible-lg {display: none !important;}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > a:after{font-family: 'Font Awesome 5 Free';}

.list-inline-item{display: inline-block;}

.dot-green{
    position: absolute;
    left: 35px;
    top: 60%;
    z-index: 999;
}

.dot-green img{
  width: 140px;
}

.dot-lightgreen{
  position: absolute;
  left: 35px;
  top: 43%;
  z-index: 999;
}

section.solar-energy{
  position: relative;
  margin: 0;
  max-width: 100%;
  min-height: 900px;
  background-color:#000;
}

section.product-solar-energy{
  position: relative;
  margin: 0;
  max-width: 100%;
  min-height: 600px;
  background-color:#000;
}

.product-solar-energy-right-bg{
  width: 100%;
  background: #000;
}

.solar-energy-right-bg{
  width: 100%;
  min-height: 900px;
  background: #354A19;
}

.solar-energy-right{
 padding-right: 150px;
 padding-left: 100px;
}

.product-solar-energy-right{
 padding-right: 150px;
 padding-left: 100px;
}

.solar-energy-right .green-button {
  position: absolute;
}

.solar-content{
  font-family:'Franklin Gothic Book', 'Arial Narrow', Arial, sans-serif;
}

.product-solar-energy-left-bg{
  position: relative;
  background-image: url(../img/solor-energy-2-p.jpg);
  width: 100%;
  min-height: 600px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position:center;
}

.solar-energy-left-bg{
  background-image: url(../img/solor-energy-2.jpg);
  width: 100%;
  min-height: 900px;
  background-size: cover;
  background-position:center;
}

.product-solar-energy-left-bg svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: auto;
  }

  .circle{
    transform-origin: center ;
  }
  #arc1{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: 10s 0s rota infinite linear;
  }
  #arc3{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: 16s 0s rota infinite linear;
  }
  #arc4{
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: 20s 0s rota infinite linear reverse;
  }
  #arc5{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: 8s 0s rota infinite linear;
  }
  #arc6{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: 6s 0s rota infinite linear reverse;
  }

  text{
   fill: #ffffff;
   font: bold 24px sans-serif;
  }
  @keyframes rota{
    from{
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg);
    }
  }

  .titlebody article p {
    color: var(--primary);
    position: relative;
  }

  .intro-title{
    justify-content: center;
  }

  .intro-area{
    padding: 0 40px;
  }

  /*四個角框*/
  .border_corner{
    position: absolute;
    width: 19px;
    height: 19px;
    background: rgba(0,0,0,0);
    border: 4px solid var(--primary);
  }
  .border_corner_left_top{
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
  }
  .border_corner_right_top{
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
  }
  .border_corner_left_bottom{
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
  }
  .border_corner_right_bottom{
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
  }

  .core-area{
    background-image: url(../img/universe.jpg);
    position: relative;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .core-area::after{
    content: "";
    display: block;
    padding-bottom: 30%;
  }

  .core-arrow{
    position: absolute;
    top: -70px;
    right: calc(100%/5);
    width: 100px;
  }

  .core-circle {
    position: relative;
  }

  .core-item-1 {
    position: absolute;
    top: 170px;
    font-size: 36px;
    padding-left: 270px;
    font-weight: 900;
    color: #000;
    text-shadow: 0 1px var(--primary), 1px 0 var(--primary), -1px 0 var(--primary), 0 -1px var(--primary);
    text-shadow: 0px 0px 5px 5px rgba(174, 246, 83, 0.2);
  }

  .core-item-2 {
    position: absolute;
    font-size: 36px;
    top:380px;
    padding-left: 350px;
    font-weight: 900;
    color: #000;
    text-shadow: 0 1px var(--primary), 1px 0 var(--primary), -1px 0 var(--primary), 0 -1px var(--primary);
  }

  .core-item-3 {
    position: absolute;
    font-size: 36px;
    top:610px;
    padding-left: 270px;
    font-weight: 900;
    color: #000;
    text-shadow: 0 1px var(--primary), 1px 0 var(--primary), -1px 0 var(--primary), 0 -1px var(--primary);
  }

  .core-circle img{
    position: absolute;
    left: 0;
    width: 340px;
    top: 50px;
  }

  .core-icon img{
    position: absolute;
    top: 320px;
    width:200px ;
    left: 60px;
  }

  .core-area .core-right{
    top: 140px;
    right: 0;
    padding: 0 50px;
  }

  .core-right{
    position: relative;
  }

  .core-right .green-button {
    position: absolute;
}

  .green-button-1{
    padding-top: 30px;
  }

  html .scroll-to-top{
    background: none;
    background-image: url(../img/scroll-to-top.png);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    bottom: 50px;
    font-size: 2em;
    padding: 10px 7px;
    background-position: center;
    color: var(--dark);
    background-size: cover;
  }

  html .scroll-to-top:hover{
    color: #fff;
  }

  .type-area{
    background-image: url(../img/bg-0.jpg);
    position: relative;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .type-area:before{
    content: '';
    position: absolute;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(104,148,50,0.3) 40%,rgba(174,246,83,0.3) 100%);
    top: -80px;
    width: 100%;
    height: 80px;
  }

  .type-area-title{
    justify-content: center;
    letter-spacing: 20px;
  }
  
  .type-card-0{
    display: flex;
    justify-content: flex-end;
    margin-top: 100px;
    position: relative;
    z-index: 1;
  }

  .type-card-0 img{
    width: 550px;
  }

  .type-card-1{
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 90px;
    z-index: 1;
  }

  .type-card-1 img{
    width: 550px;
  }

  .type-card-2{
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-top: 100px;
    z-index: 1;
  }

  .type-card-2 img{
    width: 550px;
  }

.fly-left{
  position: relative;
  background-image: url(../img/fly-1-op.png);
  width: 450px;
  height: 377px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fly-left-area {
  position: absolute;
  text-align: left;
  padding-left: 50px;
  padding-top: 40px;
}

.fly-left-title, .fly-left-content {
  display: block;
  color: var(--white);
  max-width: 350px;
}

.fly-left-title {
  color: black;
  text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
}

.fly-left-content {
  font-weight: 500;
  padding-left: 20px;
}

.fly-right{
  position: relative;
  background-image: url(../img/fly-2-op.png);
  width: 450px;
  height: 377px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fly-right-area {
  position: absolute;
  text-align: left;
  padding-left: 50px;
  padding-top: 40px;
}

.fly-right-title, .fly-right-content {
  display: block;
  color: var(--white);
  max-width: 350px;
}

.fly-right-title {
  color: black;
  text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
}

.fly-right-content {
  padding-left: 20px;
}

.track-area{
  overflow: hidden;
}

.track {
  display: flex;
  justify-content: center;
  padding: 0;
  bottom: 0;
}

.track img {
  width: 100%;
  height: auto;
}

section.brand-intro-area{
  background-image: url(../img/brand-intro-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size:cover;
  width: 100%;
  height: auto;
}

.brand-intro-0 img{
  position: relative;
}

.brand-intro-1 img{
  position: relative;
}

.brand-intro-0::before{
  content: 'Innovativeness';
  position: absolute;
  color: var(--white);
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.brand-intro-1::before{
  content: 'Reliability';
  position: absolute;
  color: var(--white);
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.brand-intro-1-fr::before{
  content: 'Fiabilité';
  position: absolute;
  color: var(--white);
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.brand-intro-2 img{
  position: relative;
  margin-top: 20px;
}

.brand-intro-2::before{
  content: 'Interactive';
  position: absolute;
  color: var(--white);
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.brand-intro-2-fr::before{
  content: 'Interactif';
  position: absolute;
  color: var(--white);
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.contact-logo{
  width: 372px;
  height: 225px;
}

.contact-title{
 display: flex;
 justify-content: center;
}

section.counters{
  padding: 200px 0;
  position: relative;
  background-image: url(../img/bg-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


section.counters::before{
  position: absolute;
  content: "";
  background-image: url(../img/counter-bg-left.png);
  background-repeat: no-repeat;
  width: calc(100vw - 30px);
  height: 410px;
  bottom: -60px;
  left: 30px;
}

.counters::after{
  position: absolute;
  content: "";
  background-image: url(../img/counter-bg-right.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 410px;
  top: 0;
  background-position: right;
}

.product-step{
  position: relative;
  z-index: 0;
  padding-top: 200px;
  padding-bottom: 200px;
}

.product-step::before{
  position: absolute;
  content: "";
  background-image: url(../img/counter-bg-left.png);
  background-repeat: no-repeat;
  width: calc(100vw - 30px);
  height: 410px;
  bottom: -120px;
  left: 30px;
}

#tabsNavigation1{
  background-image: url(../img/notify-step-1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
#tabsNavigation2{
  background-image: url(../img/notify-step-2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
#tabsNavigation3{
  background-image: url(../img/notify-step-3.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.counters-arrow{
  position: absolute;
  top: -270px;
  right: calc(100% / 2);
  width: 80px;
}

.custom-text-shadow{
  text-shadow: 0px 0px 2px rgb(121, 121, 121), 0 0 1px white, 0 0 8px white;
}

section.contact-area{
  background-image: url(../img/contact-bg-1.jpg);
  background-repeat: no-repeat;
  background-position: top center;background-size: cover;
  position: relative;
}

.text-red{
  color: red;
}

.contact-area .card{
  background-color: transparent;
}

.contact-dot-lightgreen{
  position: absolute;
  right: calc(100% / 100);
  top: -120px;
  z-index: 999;
}

.form-group textarea::placeholder {
  color: #464646; 
}

.form-control{
  background-color: var(--tertiary);
  opacity: .7;
  border-radius: 0;
}

.btn-outline-custom{
  border: 1px solid var(--tertiary);
  border-radius: 0;
  color: var(--white);
}

.btn-outline-custom:hover{
  border-radius: 0;
  color: var(--dark);
  background-color: var(--primary);
}

.btn-primary-custom{
  position: relative;
  border-radius: 0;
  background-color:var(--tertiary) ;
  display: inline-block; 
  width: 100%;
  }

.btn-primary-custom:before{
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  font-size: 28px;
  top: 50%;
  right: 20px;
  width: 50px;
  height: 43px;
  border-left: 1px solid #000;
  transform: translate(50%, -50%);
}

.btn-primary-custom:hover{
  background-color:var(--primary) ;
  letter-spacing: .2rem;
  transition: all .5s;
}

#footer{
  background-image: url(../img/footer-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  border-top: 0;
}

#footer::before{
  content: url(../img/footer-line.jpg);
  position: absolute;
  width: 100%;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
}

.footer-car{
  position: absolute;
  top: -75px;
  left: 50px;
}

#iot-intro{
  background-image: url(../img/iot-intro-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

#iot-intro .iot-intro-arrow{
  position: absolute;
  top: -95px;
  right: calc(100% / 5);
  width: 100px;
}

.iot-intro-content{
  position: relative;
}

.footer-pt{
  padding-top: 15px;
}

/*按鈕*/

.green-button .border_corner{
  z-index: 2500;
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(0,0,0,0);
  border: 4px solid var(--primary);
}
.green-button .border_corner_left_top{
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}
.green-button .border_corner_right_top{
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}
.green-button .border_corner_left_bottom{
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}
.green-button .border_corner_right_bottom{
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.border_corner_center{
  z-index: 2500;
  position: absolute;
  width: 50px;
  height: 37px;
  right: 0;
  background: rgba(0,0,0,0);
  border: 1px solid var(--white);
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.green-button{
  border: 1px solid var(--white);
  box-shadow: 0px 0px 5px 5px rgba(174,246,83,0.2);
  position: relative;
  width: 200px;
  cursor: pointer;
}

.green-button:hover{
  color: var(--white);
}

.green-button article:before {
  content: '';
  background-color: rgba(0,0,0,1);
  opacity: 0.46;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
}

.green-button article p {
  font-size: 16px;
  text-transform: uppercase;
  color: var(--primary);
  position: relative;
  font-weight: 400;
  letter-spacing: .05em;
  text-indent: .1em;
  text-shadow: 0 0 0.2em var(--primary);
  margin: 5px 0;
}

.green-button article p:hover{
  font-weight: bold;
}

#sidebar-toggle-nav.btn-primary:active:not(.bg-transparent), .btn-primary.active:not(.bg-transparent) {
  background-color: var(--primary) !important;
  background-image: none !important;
}

#sidebar-toggle-nav .btn-primary:active, .btn-primary.active {
  border-color: var(--primary-300) var(--primary-300) var(--primary-300) !important;
}

#sidebar-toggle-nav.btn-primary:hover {
  color: #fff;
  background-color:var(--primary);
  border-color: var(--primary);
}

#sidebar-toggle-nav.btn-primary:hover:not(.bg-transparent), .btn-primary.hover:not(.bg-transparent) {
  background-color: var(--primary);
  border-color: var(--primary);
}

#sidebar-toggle-nav.btn-primary:focus:not(.bg-transparent), .btn-primary.focus:not(.bg-transparent) {
  background-color: var(--primary);
  border-color: var(--primary);
}

.fix-right {
  position: fixed;
  right: 5px;
  top: 50%;
  z-index: 99;
}

#sidebar-toggle-nav{
  position: fixed;
  top:48%;
  right: 5px; 
  z-index: 1000;
  border-radius: 0;
}

#sidebar-toggle-nav .collapse.show {
 display: block;
}

#fp-nav {
  z-index: 100;
  width: 140px;
  height: 160px;
  background: url(../img/fp-nav.png) no-repeat center top;
  background-size: 140px 160px;
}

#fp-nav ul, .fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul {
  position: absolute;
  top: 0%;
  left: 11%;
}

ol,ul {
  list-style: none;
}

#fp-nav ul li, .fp-slidesNav ul li {
  display: block;
  height: 12px;
  width: 8px;
  margin: 15px auto;
  position: relative;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
}

#fp-nav ul li a span {
  display: inline-flex;
  align-items: center;
}

#fp-nav ul li a span i {
  margin-right: 5px;
 
}

#fp-nav .custom-line{
  border-bottom: 1px solid var(--primary);
  width: 110px;
}

/*產品頁sidenav*/

#fp-nav-p {
  z-index: 100;
  width: 140px;
  height: 250px;
  background: url(../img/fp-nav-p.png) no-repeat center top;
  background-size: 140px 250px;
  right: 5px;
}

#fp-nav-p ul, .fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav-p ul {
  position: absolute;
  top: -2%;
  left: 8%;
}

#fp-nav-p ul li, .fp-slidesNav ul li {
  display: block;
  height: 11px;
  width: 8px;
  margin: 15px auto;
  position: relative;
}

#fp-nav-p ul li a, .fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
}

#fp-nav-p ul li a span {
  display: inline-flex;
  align-items: center;
}

#fp-nav-p ul li a span i {
  margin-right: 5px;
}

#fp-nav-p .custom-line{
  border-bottom: 1px solid var(--primary);
  width: 118px;
}

#footer .logo img{
  width: 300px;
  max-width: 100%;
}

.member-area{
  background-image: url(../img/log-bg.jpg);
  background-position:bottom center;
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  padding-left: 150px;
  padding-right: 150px;
  position: relative;
  min-height: 100vh;
  background-attachment: fixed;
}

.connect-area{
  background-color:var(--white);
  height: 700px;
  overflow-y: scroll;
}

.member-email, .verify-email{
  display: inline-block;
}
.btn-set{
  padding: 0.3rem 1rem;
  color: #000;
  background-color: var(--primary);
  border-radius: 50px;
  border-color: transparent;
  width: 100%;
  font-weight: bold;
  }

.btn-tertiary:hover:not(.bg-transparent), .btn-tertiary.hover {
  background-color: var(--primary);
}

.btn-tertiary:hover, .btn-tertiary.hover {
  border-color: transparent;
  color: var(--tertiary-inverse);
}

.member-left{
  background-color: transparent;
}

.member-left .card{
  background-color: transparent;
}

.member-left .card-header{
  border-bottom: 2px solid var(--primary);
}

.member-area .toggle-title{
  border-radius: 0px;
  color: var(--dark);
} 

.member-content{
  border: 2px solid var(--tertiary);
  border-top: none;
  padding: 15px;
}

.emergency-step-title{
  position: relative;
}
.emergency-step-title::before{
  position: absolute;
  content: url('../img/counter-bg-right-1.png');
  height: auto;
  top: 25px;
  left: 50%;
  transform: translateX(15%);
  z-index: -1;
  overflow-x: hidden;
}

.emergency-title{
  background-color: var(--primary);
}

.emergency-content{
  border-top: 2px solid var(--tertiary);
}

.member-area .location{
  line-height: 1.5em;
  color: var(--primary);
  font-weight: 500;
}

.card-info.card-body{
  padding: 1rem;
}

.sign-up-area{
  margin-top: 60px;
  margin-bottom: 80px;
}

.form-control:not(.form-control-sm):not(.form-control-lg){
  line-height: 1;
}

.sign-up-content .form-control{
  background-color: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.sign-up-content .form-control option{
  color: var(--dark);
}

.social-icon-goole, .social-icon-apple{
  height: auto;
  border-radius: 50px;
  max-width: 400px;
}

.social-icon-goole:hover, .social-icon-apple:hover{
  font-size: 14px;
  transition: all .2s;
  box-shadow: 0 0 0.5em var(--primary);
}

.sign-up-content svg{
  position: relative;
  left: 0;
}

.sign-up-content .divider {
  position: relative;
  height: 1.5px;
  border-radius: 10px;
  border: 1px solid #fff;
}

.sign-up-content .divider p {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 3rem;
  top: -25px;
  border-radius: 50px;
  background-color: var(--primary);
  left: 50%;
  color: var(--white);
  border: 2px solid var(--white);
  transform: translateX(-50%);
}

.sign-up-email{
  text-shadow: 0 0 0.1em var(--dark);
}

.custom-btn-style-1{
  border-radius: 50px;
}
.sign-up-header-title{
  font-size: 42px;
}

.reset-green-button .green-button, .sign-green-button .green-button, .log-green-button .green-button{
  background-color: transparent;
  width: 100%;
}

.reset-green-button .green-button:hover, .sign-green-button .green-button:hover, .log-green-button .green-button:hover{
  box-shadow: 0 0 1.5em var(--primary);
}

.reset-green-button .green-button article:before{
  content: '';
  background-color: var(--grey-800);
  opacity: 1;
}

.sign-green-button .green-button article:before{
  content: '';
  background-color: var(--primary);
  opacity: 1;
}

.log-green-button .green-button article:before{
  content: '';
  background-color: var(--primary);
  opacity: 1;
}

.reset-green-button .green-button article p, .sign-green-button .green-button article p, .log-green-button .green-button article p{
  color: var(--dark);
  font-weight: bold;
  margin: 8px 0;
  text-align: center;
  text-shadow: none;
}

.log-green-button .border_corner_center{
  height: 43px;
}

.log-green-button .fa-chevron-right:before{
  line-height: 35px;
}

.tos-area{
  border-radius: 0 0 5px 5px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background-color: #FFF;
  border: 1px solid #EEE;
  border-top: 0;
  padding: 30px;
  height: 400px;
  overflow-y: scroll;
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.disabled.green-button{
  opacity: .4;
}

.form-check-inline .form-check-input {
  width: 20px;
  height: 20px;
}

.log-area{
  margin-top: 60px;
  margin-bottom: 80px;
}

.product-bg{
  background-image: url(../img/product-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.product-bg h1{
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 0.2em var(--primary);
  font-size: 100px;
}
.product-bg p{
  font-weight: 400;
  letter-spacing: 2px;
  text-shadow: 0 0 0.2em var(--primary);
  font-size: 36px;
}

#product-core-functions {
  background-image: url(../img/product-core-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

#functions-intro{
  position: relative;
  background-color: #354A19;
}

#functions-intro::before{
position: absolute;
content: "TREGEN";
width: 500px;
height: 800px;
transform: rotate(90deg);
font-size: 400px;font-weight: bolder;
opacity: .2;
left: -30rem;
top: -50px;
}

#feature-details{
  background-image: url(../img/details-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.overlay:hover:before{
  opacity: 0;
}

.overlay:before {
  content: ' ';
  position: absolute;
  right: 5px;
  left: 5px;
  z-index: 2;
  height: 91%;
  margin: auto 0;
  background: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: ease opacity 100ms 100ms;
}

.index-overlay:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: ease opacity 300ms 100ms;
}

.index-overlay.overlay-show:before{
  opacity: .5;
}

.scale-9{
  transform: scale(.9);
}

.details-item-1{
  position: relative;
}

.details-item-1 img{
  width: 100%;
}

.details-item-1-intro{
  position: absolute;
  width: 97%;
  height:80px ;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(1,39,63,0.8) 0%,rgba(174,246,83,0.8) 40%,rgba(174,246,83,0.8) 50%,rgba(174,246,83,0.8) 60%,rgba(1,39,63,0.8) 100%);;
  color: #fff;
  bottom: 5px;
  z-index: 3;
  align-items: center;
  display: flex;
}

.details-item-2{
  position: relative;
}

.details-item-2 img{
  width: 100%;
}
  
.details-item-2-intro{
  position: absolute;
  width: 97%;
  height:80px ;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(1,39,63,0.8) 0%,rgba(174,246,83,0.8) 40%,rgba(174,246,83,0.8) 50%,rgba(174,246,83,0.8) 60%,rgba(1,39,63,0.8) 100%);;
  color: #fff;
  bottom: 5px;
  z-index: 3;
  align-items: center;
  display: flex;
}

.details-item-3{
  position: relative;
}

.details-item-3 img{
  width: 100%;
}

.details-item-3-intro{
  position: absolute;
  width: 97%;
  height:80px ;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(1,39,63,0.8) 0%,rgba(174,246,83,0.8) 40%,rgba(174,246,83,0.8) 50%,rgba(174,246,83,0.8) 60%,rgba(1,39,63,0.8) 100%);;
  color: #fff;
  bottom: 5px;
  z-index: 3;
  align-items: center;
  display: flex;
}

.details-item-4{
  position: relative;
}

.details-item-4 img{
  width: 100%;
}

.details-item-4-intro{
  position: absolute;
  width: 97%;
  height:80px ;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(1,39,63,0.8) 0%,rgba(174,246,83,0.8) 40%,rgba(174,246,83,0.8) 50%,rgba(174,246,83,0.8) 60%,rgba(1,39,63,0.8) 100%);;
  color: #fff;
  bottom: 5px;
  z-index: 3;
  align-items: center;
  justify-content: center;
  display: flex;
}

.tabs-navigation .nav-tabs > li .nav-link:before{
  font-family:'Font Awesome 5 Free' ;
}

.tabs-navigation .nav-tabs > li .nav-link {
  color: var(--default);
  padding: 15px;
  line-height: 100%;
}

.product-step .nav-tabs li .nav-link{
  background-color: transparent;
  border-left: none;
  border-right: none;
}

.product-step .nav-tabs .nav-link.active{
  background-color:rgb(141,221,18,.6);
}

.product-step .tabs .nav-tabs .nav-link{
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items:self-end;
  line-height: 1.5rem;
}

.product-step .tabs .nav-tabs .nav-link.active{
  color: var(--white);
}

.product-step .tabs-vertical{
  border-top: none;
}

.product-step .tabs .left-content {
  margin-right: 20px;
  color: transparent;
  -webkit-text-stroke: 2px white;
}

.product-step .tabs .right-content {
  flex-grow: 1;
}

.product-step .tabs-left .nav-tabs > li:last-child .nav-link{
  border-bottom: none;
}

#field{
  position: relative;
  background-image: url(../img/field-bg-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#field:before{
  position: absolute;
  content: '';
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(165, 165, 165, 0) 100%);
  width: 100%;
  height: 300px;
  top: 0;
}

#field:after{
  position: absolute;
  content: '';
  background: linear-gradient(to bottom, rgba(165, 165, 165, 0) 0%, rgba(0, 0, 0, 1) 100%);
  width: 100%;
  height: 100px;
  bottom: 0;
}

.field-area .responsive-video{
    width: 100%;
    max-width: 800px;
    height: 450px;
    object-fit: cover;
}

.field-area .tab-pane.active {
  height: auto;
}

#app-function{
  background-image: url(../img/app-function-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:bottom center;
  background-attachment: fixed;
  width: 100%;
}

.app-function-area .img-thumbnail{
  background-color: transparent;
}

.app-function-area .owl-carousel .owl-nav button.owl-next:before {
  font-family:'Font Awesome 5 Free' ;
  font-size: 2rem;
  left: 36px;
  color: var(--primary);
}

.app-function-area .owl-carousel .owl-nav button.owl-prev:before{
  font-family:'Font Awesome 5 Free' ;
  font-size: 2rem;
  left: -36px;
  color: var(--primary);
}

.bg-lines {
  display:inherit;
  width: 100%;
  height: 100%;
  color: #000;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 1) 100%);

}

.app-function-area{
  position: relative;
  background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(165,165,165,0.8) 30%,rgba(165,165,165,0.8) 70%,rgba(0,0,0,1) 100%); 
}

.app-function-area:before{
  position: absolute;
  content: '';
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(165,165,165,0) 100%);
  top: 0;
  width: 100%;
  height: 200px;
}

.app-function-area::after{
  position: absolute;
  content: '';
  background: linear-gradient(to bottom, rgba(165,165,165,0) 0%,rgba(0,0,0,1) 100%);
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}


.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 50vw;
  z-index: 0;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 100%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  -webkit-animation: drop 10s 0s infinite;
          animation: drop 10s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.line:nth-child(1) {
  margin-left: -75%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

.line:nth-child(2) {
  margin-left: -50%;
}
.line:nth-child(2)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.line:nth-child(3) {
  margin-left: -25%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.line:nth-child(5) {
  margin-left: 25%;
}
.line:nth-child(5)::after {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.line:nth-child(6) {
  margin-left: 50%;
}
.line:nth-child(6)::after {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.line:nth-child(7) {
  margin-left: 75%;
}
.line:nth-child(7)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

.detail-function{
  position: relative;
  z-index: 1;
}

.detail-function .owl-carousel .owl-nav button.owl-next:before{
  font-family: 'Font Awesome 5 Free';
  font-size: 2rem;
  left: 40px;
  color: var(--primary);
}

.detail-function .owl-carousel .owl-nav button.owl-prev:before{
  font-family: 'Font Awesome 5 Free';
  font-size: 2rem;
  left: -40px;
  color: var(--primary);
}

.detail-function .card{
  background-color: transparent;
}

.detail-function .card-body{
  padding: 0;
}

.detail-function .owl-carousel .owl-item{
  width: 200px;
  margin-right: 50px;
}

.col-custom-cards .app-item {
  bottom: 0;
  position: relative;
}

.tregen-app-btn-primary-custom {
  position: relative;
  border-radius: 0;
  background-color: var(--primary);
  display: inline-block;
  width: 145px;
  height: 40px;
  text-align: left;
  margin-top: 15px;
}

.tregen-app-btn-primary-custom:hover{
  background-color: var(--tertiary);
}

.tregen-app-btn-primary-custom:before {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  font-size: 28px;
  top: 50%;
  right: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  border-left: 1px solid #000;
  transform: translate(50%, -50%);
}

.tregen-app .transform3dy-n60 {
  transform: translate3d(0, -60%, 0);
}

.tregen-app .transform3dy-n40 {
  transform: translate3d(0, -40%, 0);
}

.app-right img{
  width: 170px;
}

#spec-qa{
  background-color: #000;
  position: relative;
  z-index: 0;
  padding-bottom: 50px;
}

#spec-qa .dot-green{
  position: absolute;
  z-index: -1;
  top: -20px;
}

#spec-qa .dot-green img{
 width: 190px;
}

#customer-area{
  background-color: #000;
}

.spec-qa-area .tabs .nav-tabs .nav-link{
  color: #000;
  background: rgb(210,225,215);
}

.spec-qa-area .nav-tabs.nav-justified li:first-child .nav-link{
  border-radius: 0;
}

.spec-qa-area .nav-tabs.nav-justified li:last-child .nav-link{
  border-radius: 0;
}

.spec-qa-area .nav-tabs.nav-justified li:first-child{
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.spec-qa-area .nav-tabs.nav-justified li:last-child{
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

.spec-qa-area .tabs .nav-tabs.nav-justified .nav-link.active{
  color: #000;
}

.spec-qa-area .nav-tabs.nav-justified li{
  margin-bottom: 0;
}

.spec-qa-area .table-striped-columns>:not(caption)>tr>:nth-child(odd){
  background-color: rgb(150,205,180,.4);
}

.spec-qa-area .accordion.accordion-modern-status.accordion-modern-status-arrow > .card .card-header a:after{
  font-family: 'Font Awesome 5 Free';
}

.spec-qa-area .tabs{
  position: relative;
}

.spec-qa-area .tabs::before{
  position: absolute;
  content: url(../img/spec-qa-table.png);
  width: 180px;
  height: 42px;
  bottom: -41px;
  right: 50px;
}

/* .spec-qa-area .tabs::after{
  position: absolute;
  content: url(../img/dot-green.png);
  width: 160px;
  height: auto;
  bottom: -100px;
  right: 320px;
  z-index: -1;
} */

.spec-qa-area .tab-content{
  max-height: 480px;
  overflow-y: scroll; 
  border-radius: 0;
}

.tab-content .tab-pane.active{
  min-height: calc(100% + 5px);
}

.spec-qa-area .accordion.accordion-modern-status > .card .card-header a{
  padding: 13px 30px;
}

.customer-area-content .owl-carousel .owl-nav button.owl-next:before,
.customer-area-content  .owl-carousel .owl-nav button.owl-prev:before{
  font-family: 'Font Awesome 5 Free';
}
.customer-area-content .card-container{
  position: relative;
  z-index: 0;
}

.customer-area-content .card{
  border-radius: 0;
  border: none;
}

.customer-photo-area{
  position: relative;
  height: 20px;
}

.customer-photo-bg{
  position: absolute;
  background-color: transparent;
  background-image: url(../img/customer-logo-bg.png);
  width: 100px;
  height: 100px;
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  top: -70px;
  left: 50%;
  filter:drop-shadow(0px 0px 5px rgba(0,0,0,.2));
  display: flex;
  justify-content: center;
  align-items: center; 
  z-index: 0;
}

.customer-photo-bg::before{
  position: absolute;
  content: url(../img/customer-logo-arrow.png);
  width: 34px;
  height: 22px;
  z-index: 1;
  bottom: 0;
  right: -20px;
}

.customer-photo-bg img{
    position: absolute;
    width: 80px !important; 
    height: auto;
    vertical-align: middle;
}

.customer-area-content .owl-carousel.nav-position-1 .owl-nav button.owl-prev{
  left: 0;
}

.customer-area-content .owl-carousel.nav-position-1 .owl-nav button.owl-next{
  right: 25px;
}

.customer-area-content .owl-carousel.nav-dark:not(.nav-style-1):not(.nav-style-2):not(.nav-style-3):not(.show-nav-title):not(.nav-arrows-1) .owl-nav .owl-next, .customer-area-content .owl-carousel.nav-dark:not(.nav-style-1):not(.nav-style-2):not(.nav-style-3):not(.show-nav-title):not(.nav-arrows-1) .owl-nav .owl-prev{
  background-color: var(--primary) !important; 
}

.index-home h1{
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 0.2em var(--primary);
  font-size: 100px;
}

.fa-circle-user:before{
  content:'\f2bd' ;
  font-family: 'Font Awesome 6 Free';
}

.lost-form-control{
  border: 2px solid var(--primary);
  padding-left: 15px;
}

.app-function-ui{
  position: relative;
}
.app-function-ui:before{
  position: absolute;
  content: '';
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(165, 165, 165, 0) 100%);
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
}

.contain {
  background-size: cover;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  border-radius:50%;
  margin: 0 auto;
  background-size: cover;
}

section.video {
  aspect-ratio: 16 / 9;
}

.btn-sound-control {
  position: absolute;
  bottom: 15%;
  left: 30px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  color: var(--primary);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(141, 221, 18, 1) 0px 0px 10px;
}

.btn-sound-control:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #464646;
  transition: all .5s;
}

:root{
    /* --font:'Microsoft JhengHei',-apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; */
    /* --main:;
    --maindark:;
    --maindlight:;
    --second:;
    --seconddark:;
    --seconddlight:; */
}

/* Font Size */
.text-0 {
	font-size: .7em !important;
}
.text-1 {
	font-size: .8em !important;
}
.text-2 {
	font-size: .9em !important;
}
.text-2-3,
.text-2-5 {
	font-size: .95em !important;
}
.text-3 {
	font-size: 1em !important;
  letter-spacing: .3px;
}
.text-3-4,
.text-3-5 {
	font-size: 1.1em !important;
}
.text-4 {
	font-size: 1.2em !important;
}
.text-4-5 {
	font-size: 1.35em !important;
}
.text-5 {
	font-size: 1.50em !important;
}
.text-5-6,
.text-5-5 {
	font-size: 1.65em !important;
}
.text-6 {
	font-size: 1.80em !important;
}
.text-6-7,
.text-6-5 {
	font-size: 1.9em !important;
}
.text-7 {
	font-size: 2em !important;
}
.text-8 {
	font-size: 2.30em !important;
}
.text-9 {
	font-size: 2.50em !important;
}
.text-10 {
	font-size: 2.75em !important;
}
.text-11 {
	font-size: 3em !important;
}
.text-12 {
	font-size: 3.5em !important;
}
.text-12-13,
.text-12-5 {
	font-size: 3.75em !important;
}
.text-13 {
	font-size: 4em !important;
}
.text-14 {
	font-size: 4.5em !important;
}
.text-15 {
	font-size: 5em !important;
}
.text-16 {
	font-size: 5.33em !important;
}
.text-17 {
	font-size: 5.66em !important;
}
.text-18 {
	font-size: 6em !important;
}
.text-19 {
	font-size: 6.33em !important;
}
.text-20 {
	font-size: 6.66em !important;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 5px;
}
::-webkit-scrollbar:horizontal {
    height: 2px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: var(--dark); 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1920px) {.copyright{display: block;}
.copyright-1{display: none;}
.log-area{padding-left: 90px;padding-right: 90px;}
}

@media (max-width: 1367px) {.copyright{display: block;}
.copyright-1{display: none;}
.log-area{padding-left: 30px;padding-right: 30px;}
.member-area{padding-left: 30px;padding-right: 30px;}
.emergency-step-title::before{left: 15%;transform: translateX(0%);top: -120px;}
}

@media (max-width: 1181px) {
  .core-circle img {position: absolute;width: 240px;top: 50px;}
  .core-icon img {position: absolute;top: 250px;width: 130px;}
  .core-item-1{top: 120px;padding-left: 200px;}
  .core-item-2{top: 280px;padding-left: 250px;}
  .core-item-3{top: 440px;padding-left: 200px;}
  .core-arrow {position: absolute;top: -60px;width: 80px;}
  .type-card-0 img ,.type-card-1 img,.type-card-2 img {width: 100%;}
  .type-card-0 {margin-top: 300px;}
    #iot-intro .iot-intro-arrow {top: -50px;width: 80px;right: calc(100% / 9);}
  .contact-logo{width: 250px;height: auto;}
  .core-circle img {position: relative;}
  .core-area::after{padding-bottom: 50%;}
  .copyright{display: none;}
  .copyright-1{display: block;}
  .fly-left-image, .fly-right-image {width: 420px;}
  .brand-intro-2 img{margin-top: 0;}
  .member-area{padding-left: 0px; padding-right: 0px;}
  .btn-set{width: 50%;padding: .5rem 1rem;margin-top: 5px;}
  .sign-up-header-title{font-size: 32px;}
  .social-icon-container{ flex: 0 0 100%;max-width: 100%;}
  .log-area{padding-left: 20px;padding-right: 20px;}
  .solar-energy-right {padding-right: 40px;padding-left: 20px;}
  .product-solar-energy-right{padding-right: 120px;padding-left: 20px;}
  
}

@media (max-width:1024px) {
  .product-core-area .row:nth-child(-n+4){padding-left: 0px;}
  .details-item-1::after,.details-item-2::after,.details-item-3::after,.details-item-4::after{font-size: 16px;}
  .details-item-1-fr::after,.details-item-2-fr::after,.details-item-3-fr::after,.details-item-4-fr::after{font-size: 16px;}
  .tabs-navigation .nav-tabs > li .nav-link{padding: 10px;}
  .product-step::before{left: -70px;bottom: -90px;}
  section.solar-energy{background-position: -300px center;}
  .solar-energy-left svg{top: 8vh;left: calc(100vw / 4)};
  .solar-energy-right {padding-right: 10px;padding-left: 10px;}
  .product-solar-energy-right{padding-right: 120px;padding-left: 20px;}
  .btn-set{width: 100%;}
  .core-area .core-right{top: 90px;}
  .emergency-step-title::before{left: 0%;transform: translateX(0%);top: -120px;}
}

@media (max-width: 913px) {
  .tabs-navigation .nav-tabs > li .nav-link{padding: 25px;}
  .spec-qa-area{padding-left: 10px; padding-right: 10px;}
  .app-right{margin-top: 150px;}
  .product-step::before{left: -120px;}
  .detail-function .owl-carousel .owl-nav button.owl-prev{left: 40px;}
  .detail-function .owl-carousel .owl-nav button.owl-next{right: 40px;}
  section.solar-energy{background-position: -400px center;}
  .solar-energy-left svg{top: 6vh;left: calc(100vw / 10);width: 180%;height: auto};
  .solar-energy-right {padding-right: 10px;padding-left: 10px;}
  .btn-set{width: 50%;}
  .emergency-step-title::before{left: -38%;transform: translateX(0%);top: -120px;}
}

@media (max-width: 821px) {
  .type-card-0 img ,.type-card-1 img,.type-card-2 img {width: 100%;}
  section.counters::after{right: calc(-50px);}
  section.counters::before{left: calc(-80px);}
  .fly-left-image, .fly-right-image{width: 350px;}
  .fly-left-content, .fly-right-content {padding-left: 0;}
  .type-area-title{display: flex; flex-wrap: inherit;}
  .custom-mt-10 {margin-top: 0px;}
  .core-circle img {position: relative;}
  .copyright{display: none;}
  .copyright-1{display: block;}
  .member-area{padding-left: 40px; padding-right: 50px;}
  .sign-up-header-title{font-size: 38px;}
  .details-item-1::after,.details-item-2::after,.details-item-3::after,.details-item-4::after{font-size: 18px;}
  .details-item-1-fr::after,.details-item-2-fr::after,.details-item-3-fr::after,.details-item-4-fr::after{font-size: 18px;}
  .tabs-navigation .nav-tabs > li .nav-link{padding: 20px;}
  .product-step{padding-top: 100px;}
  .product-solar-energy-right{padding-right: 20px;padding-left: 20px;}
  .emergency-step-title::before{left: -42%;transform: translateX(0%);top: -120px;}
}


@media (max-width: 769px) {
  .type-card-0 {margin-top: 160px;}
  .btn-set{width: 50%;padding: .5rem 1rem;margin-top: 5px;}
  .owl-carousel.nav-inside.nav-inside-edge .owl-nav button.owl-next{right: 12px;}
  .owl-carousel.nav-inside.nav-inside-edge .owl-nav button.owl-prev{left: 12px;}
  .app-right img{width: 200px;}
  .product-step::before{left: -120px;}
  .solar-energy-left svg{top: 10vh;left: calc(100vw / 4);width: 180%;height: auto};
  .product-solar-energy-right{padding-right: 20px;padding-left: 20px;}
}

 /*iphone plus*/
@media (max-width: 430px) {
  .dot-green{left: 15px;top: 70%;}
  .dot-green img{width: 100px;}
  #iot-intro .iot-intro-arrow{top: -50px;width: 60px;right: calc(100% / 8);}
  .iot-intro-content {margin-bottom: 30px;}
  .core-arrow {top: -50px;width: 60px;right: calc(100% / 8);}
  .type-card-1, .type-card-2{margin-top: 0px;}
  .type-card-0 {margin-top: 100px;}
  .custom-mt-10 {margin-top: 0px;}
  .solar-energy-area{padding-left: 10px; padding-right: 10px;}
  .type-area-title{margin-top: 100px;}
  .fly-left-image, .fly-right-image{width: 350px;}
  .fly{display: flex;justify-content: center;}
  .fly-left-content, .fly-right-content{padding-left: 0;padding-right: 40px;}
  .fly-left-title, .fly-right-title{display: flex;}
  .counters-arrow{top: -250px;width: 60px;left: calc(100% / 8);}
  section.counters::after{right: -80px;}
  section.counters::before{left: -100px;}
  .contact-logo{width: 300px;height: auto;}
  .track img{width: 100%;overflow-x: hidden;}
  .footer-car{left: 10px;}
  .solar-energy-area {display: flex; justify-content:center ;}
  .core-circle img {position: relative; width: 150px;}
  .core-icon img{top: 170px;width: 100px;left: 30px;}
  .core-area::after{padding-bottom: 90%;}
  .core-item-1{top: 90px;padding-left: 130px;font-size: 24px;}
  .core-item-2{top: 190px;padding-left: 160px;font-size: 24px;}
  .core-item-3{top: 290px;padding-left: 130px;font-size: 24px;}
  .core-area .core-right{padding: 0 40px;}
  .dot-lightgreen{top: 40%; z-index: 0;}
  .core-area::after {content: "";display: block;padding-bottom: 100%;}
  .member-area{padding-left: 20px; padding-right: 20px;}
  .btn-set{width: 90%;padding: .5rem 1rem;margin-top: 5px;}
  .product-bg p{font-size: 30px;}
  .solar-energy-right{padding-right: 10px;padding-left: 10px;}
  #product-core-functions{padding-left: 10px;padding-right: 10px;}
  #functions-intro{padding-left: 10px;padding-right: 10px;}
  #feature-details{padding-left: 10px;padding-right: 10px;}
  .details-item-1::after,.details-item-2::after,.details-item-3::after,.details-item-4::after{font-size: 18px;}
  .details-item-1-fr::after,.details-item-2-fr::after,.details-item-3-fr::after,.details-item-4-fr::after{font-size: 18px;}
  .tabs-navigation .nav-tabs > li .nav-link{padding: 20px;}
  .spec-qa-area{padding-left: 10px; padding-right: 10px;}
  .spec-qa-area .nav-tabs.nav-justified li:first-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  .spec-qa-area .nav-tabs.nav-justified li:last-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  .app-right img{width: 130px;}
  .app-right{margin-top: 50px;}
  .product-step{padding-top: 100px;}
  .detail-function .owl-carousel.stage-margin .owl-stage-outer{margin-left: 10px !important; margin-right: 10px !important;}
  .detail-function .owl-carousel .owl-nav button.owl-prev{left: 25px;}
  .detail-function .owl-carousel .owl-nav button.owl-next{right: 25px;}
  section.solar-energy{background-position:right center;}
  .fix-right{display: none;}
  .solar-energy-left svg{top: 44vh;left:50%;width: 180%;height: auto;}
  .product-solar-energy-right{padding-right: 20px;padding-left: 20px;}
  .emergency-step-title::before{left: -160%;transform: translateX(0%);top: -100px;}
  .btn-sound-control {bottom: 10%;left: 10px;width: 30px;height: 30px;font-size: 15px;}
  .product-solar-energy-left-bg{min-height: 450px;}
  .solar-energy-left-bg{min-height: 400px;}
  .solar-energy-right-bg{min-height: 650px;}
}


/*iphone: 7px*/
@media (max-width: 400px) {
  .footer-car{left: 0;}
  .btn-set{width: 80%;padding: .5rem 1rem;margin-top: 5px;}
  .sign-button-container{flex: 0 0 100%;max-width: 100%;}
  .app-right img{width: 120px;}
  .app-right{margin-top: 50px;}
  .solar-energy-left svg{top: 48vh;left:50%;width: 180%;height: auto};
  .emergency-step-title::before{left: -147%;transform: translateX(0%);top: -100px;}
}

/*iphone SE*/
@media (max-width: 376px) { 
  .solar-energy-left svg{top: 55vh;left:50%;width: 200%;height: auto};
  .emergency-step-title::before{left: -200%;transform: translateX(0%);top: -100px;}
}

/*iphone SE*/
@media (max-width: 376px) { 
  .solar-energy-left svg{top: 55vh;left:50%;width: 200%;height: auto};
}

/*iphone 5*/
@media (max-width: 321px) {}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) {}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) {}

/*Nest hub*/
@media only screen 
    and (device-width : 1024px) 
    and (device-height : 600px) 
    and (-webkit-device-pixel-ratio : 2) { 
      section.counters::after{right: calc(-70px);}
      section.counters::before{left:calc(-100px);}
      #footer .logo img{top:5px;width: 200px;}
      .core-area::after {content: "";display: block;padding-bottom: 40%;}
      .core-area .core-right{top: 100px;}
      .member-area {padding-left: 50px;padding-right: 50px;}
      .btn-set{width: 100%;padding: .3rem 1rem;margin-top: 5px;}
      .sign-up-header-title{font-size: 36px;}
      .tabs-navigation .nav-tabs > li .nav-link{padding: 15px;}
      .app-right img{width: 150px;}
      .solar-energy-left svg{top: 17vh;left: calc(100vw / 4);width: 120%;height: auto};
}

/*Nest hub max*/
@media only screen 
    and (device-width : 1280px) 
    and (device-height : 800px) 
    and (-webkit-device-pixel-ratio : 2) {
      section.counters::after{right: calc(-70px);}
      section.counters::before{left:calc(-40px);}
      #footer .logo img{top:5px;width: 200px;}
      .core-area::after {content: "";display: block;padding-bottom: 35%;}
      .member-area {padding-left: 100px;padding-right: 100px;}
      .btn-set{width: 100%;padding: .3rem 1rem;margin-top: 5px;}
      .sign-up-header-title{font-size: 42px;}
      .social-icon-container{ flex: 0 0 100%;max-width: 100%;}
      .log-area{padding-left: 30px;padding-right: 30px;}
      .details-item-1::after,.details-item-2::after,.details-item-3::after,.details-item-4::after{font-size: 18px;}
      .details-item-1-fr::after,.details-item-2-fr::after,.details-item-3-fr::after,.details-item-4-fr::after{font-size: 18px;}
      section.solar-energy{background-position:-200px center;}
      .solar-energy-left svg{top: 17vh;left: calc(100vw / 4);width: 120%;height: auto};
}

/*surface duo*/
@media only screen and (max-width: 540px)and (min-width: 431px) {
  .core-area::after {content: "";display: block;padding-bottom: 80%;}
  .fly {display: flex;justify-content: center;}
  .type-card-0 img, .type-card-1 img, .type-card-2 img {width: 100%;}
  .fly-left-image, .fly-right-image {width: 400px;}
  section.solar-energy{background-position:right center;}
  #iot-intro .col-lg-6{display: inline-grid;justify-content: center;}
  .details-item-1::after,.details-item-2::after,.details-item-3::after,.details-item-4::after{font-size: 20px;}
  .details-item-1-fr::after,.details-item-2-fr::after,.details-item-3-fr::after,.details-item-4-fr::after{font-size: 20px;}
  .spec-qa-area .nav-tabs.nav-justified li:first-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  .spec-qa-area .nav-tabs.nav-justified li:last-child{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    .app-right img{width: 150px;}
    .app-right{margin-top: 50px;}
    .solar-energy-right{margin-top: 80px;}
    .solar-energy-left svg{top: 56vh;left:50%;width: 180%;height: auto};
    .emergency-step-title::before{left: -85%;transform: translateX(0%);top: -120px;}
    
}
/*橫拿*/
@media screen and  (orientation:landscape) {
  .member-icon{align-self: start; margin-top: 10px;}
  .sign-button-container{flex: 0 0 50%;max-width: 100%;}
}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}


@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
        #app-function{background-image: url(../img/app-function-bg-1@2x.jpg);
          background-attachment: initial;}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-device-pixel-ratio: 3),
       only screen and (min-resolution: 288dpi) {
        #app-function{background-image: url(../img/app-function-bg-1@2x.jpg);
          background-attachment: initial;}
}