@charset "utf-8";
/* **************************************** *
 * CSS Variables
 * **************************************** */
/*
 * File       : style.css
 * DATA       : 2022.09.16
 * Author     : @ansk28
 * Guideline  : SUPERBEE.1.1.0
 *
 * SUMMARY:
 * 1) Features
 * 2) About
 * 3) Etc
 */
/* **************************************** *
 * Features Solar Planset
 * **************************************** */
/* What's Included */
.WhatsIncluded {
  background: #fafafc;
  padding: 130px 0 80px;
}
.WhatsIncluded .container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.WhatsIncluded .container .wi-imgBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
}
.WhatsIncluded .container .wi-imgBox .wi-thum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wi-thum .slick-arrow {
  width: 65px;
  height: 100px;
  border: none;
  font-size: 0;
}
.wi-thum .wi-thum-img-wrapper {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding-right: 20px;
}
.wi-thum .wi-thum-img-wrapper .slick-prev {
  background: url(/images/sub01-prev.svg) no-repeat center;
  top: 0px;
  left: 25px;
}
.wi-thum .wi-thum-img-wrapper .slick-next {
  background: url(/images/sub01-next.svg) no-repeat center;
  bottom: 0px;
  left: 25px;
}
.wi-thum .wi-thum-img-wrapper .slick-track {
  display: flex;
  flex-flow: column nowrap;
}
.wi-thum .wi-thum-img-wrapper .slick-list {
  width: 76px;
  height: 350px !important;
  position: relative;
  box-sizing: border-box;
}
.wi-thum .wi-thum-img-wrapper .wi-thum-img-cont {
  margin-top: 14px;
  display: flex;
  flex-flow: column wrap;
  opacity: 1 !important;
}
.wi-thum .wi-thum-img-wrapper .wi-thum-img-cont:first-child {
  margin: 0px;
}
.wi-thum .wi-thum-img-wrapper .wi-thum-img-cont a {
  display: block;
  width: 75px;
  height: 75px;
}
.wi-thum .wi-thum-img-wrapper .wi-thum-img-cont a img {
  width: 75px;
  object-fit: cover;
  height: 75px;
  opacity: 0.7;
  border: 2px solid var(--gray-color-01);
}
.wi-thum .wi-thum-img-wrapper .wi-thum-img-cont.slick-current a img {
  opacity: 1 !important;
  border: 2px solid var(--orange-color);
}
.wi-b-img {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.wi-b-img .wi-active-img {
  width: 100%;
}
.wi-b-img .wi-active-img .slick-list {
  width: 760px;
  height: 514px;
  position: relative;
  box-sizing: border-box;
}
.WhatsIncluded .container .wi-txt {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
}
.WhatsIncluded .container .wi-txt h2 {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 20px;
  text-align: center;
}
.WhatsIncluded .container .wi-txt .checked li {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
}
.WhatsIncluded .container .wi-txt .checked li::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  background: url(/images/chek-icon.svg) no-repeat center;
  width: 22px;
  height: 22px;
}
.WhatsIncluded .container .wi-txt .star {
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  margin-top: 35px;
}

/* How it Works */
.howWork {
  overflow: hidden;
  position: relative;
  width: 1720px;
  margin: 130px auto 80px;
  height: 400px;
}
.howWork .howWork-tit {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.progress {
  display: flex;
  width: 70%;
  position: absolute;
  top: calc(50% + 80px);
  left: 0%;
  transform: translateY(-50%);
  margin-left: 10%;
  z-index: 10;
}
.progress-fin {
  display: flex;
  width: 30%;
  position: absolute;
  top: calc(48% + 80px);
  right: 0;
  transform: translateY(-50%);
  z-index: 9;
}
.step {
  flex-grow: 1;
  position: relative;
}
.progress-fin .step {
  flex-grow: inherit;
  margin-right: 5px;
}
.step-progress {
  width: 100%;
  height: 20px;
  background: #fafafc;
}
.progress-fin .step-progress {
  width: 10px;
  height: 2px;
}
.icon-wrapper {
  text-align: center;
  display: inline-block;
  width: 350px;
}
.progress-fin .step.done .step-progress:after {
  width: 0px;
  height: 4px;
  border-radius: 4px;
  -webkit-animation: growLine2 0.3s linear forwards;
  animation: growLine2 0.3s linear forwards;
}
.step.done .step-progress:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 0;
  background-color: var(--orange-color);
  -webkit-animation: growLine 1s linear forwards;
  animation: growLine 1s linear forwards;
}
.icon-checkmark {
  position: absolute;
  top: 10px;
  left: 0;
  border: 8px solid #f8f8f8;
  background: var(--gray-color-01);
  width: 107px;
  height: 107px;
  border-radius: 50%;
  padding: 0.125em;
  border-radius: 50%;
  transition: all 0.25s linear;
  transform: translate(-50%, -50%);
}
.progress-fin .icon-checkmark {
  top: 0;
}
.step.done .icon-checkmark {
  background: var(--orange-color);
  border-color: #fff2d0;
}
.icon-checkmark .path1 {
  fill: #cecece;
}
.icon-checkmark.special .path1 {
  fill: var(--gray-color-01);
}
.icon-checkmark .path3 {
  fill: var(--gray-color-02);
}
.step.done .icon-checkmark .path1 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  fill: var(--white-color);
}
.step.done .icon-checkmark .path2 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  stroke: var(--white-color);
}
.step.done .icon-checkmark .path3 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  fill: var(--gray-color-01);
}
.step-text {
  position: relative;
  margin-left: -100%;
  margin-top: 60px;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.progress-fin .step-text {
  margin-top: 50px;
}
.progress-fin .icon-clock-wrapper {
  position: absolute;
  top: 20px;
  left: 130px;
  color: var(--yellow-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.03em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.progress-fin .icon-clock-wrapper .icon-clock {
  width: 22px;
  margin-right: 9px;
}

/* How it Works Keyframes */
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes growLine {
  to {
    width: 100%;
  }
}
@keyframes growLine {
  to {
    width: 100%;
  }
}
@-webkit-keyframes growLine2 {
  to {
    width: 10px;
  }
}
@keyframes growLine2 {
  to {
    width: 10px;
  }
}
@-webkit-keyframes growLine3 {
  to {
    height: 150px;
  }
}
@keyframes growLine3 {
  to {
    height: 150px;
  }
}
@-webkit-keyframes growLine4 {
  to {
    height: 10px;
  }
}
@keyframes growLine4 {
  to {
    height: 10px;
  }
}

/* Our Works */
.ourworks {
  background: url("/images/ourworks_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 100px 0 160px;
  width: 100%;
}
.ourworks .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.ourworks .container .our-worksText {
  margin-top: 100px;
}
.ourworks .container .our-worksText .ow-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 20px;
}
.ourworks .container .our-worksText .ow-txt {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
}
.ourworks .container .our-worksBox {
  display: flex;
  flex-flow: row wrap;
}
.ourworks .container .our-worksBox .owb-left {
  margin-right: 20px;
}
.ourworks .container .our-worksBox .owb-content {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--gray-color-01);
  border-radius: 10px;
  margin-bottom: 25px;
  overflow: hidden;
  width: 414px;
  height: 410px;
  background-color: var(--white-color);
  text-align: center;
  position: relative;
  transition-duration: 1.5s, 0.1s;
}
.ourworks .container .our-worksBox .owb-content .owbc-tit {
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--orange-color);
  margin-top: 35px;
  transition-duration: 1.5s, 0.1s;
}
.ourworks .container .our-worksBox .owb-content .btn {
  width: 242px;
}
.ourworks .container .our-worksBox .owb-content .btn a {
  font-size: 16px;
  margin-top: 20px;
  background-color: var(--orange-color);
  color: var(--white-color);
}
.ourworks .container .our-worksBox .owb-content .owb-content-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  display: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ff9110 0%, #ffb801 100%);
  align-content: center;
  justify-content: center;
  align-items: center;
}
.ourworks .container .our-worksBox .owb-content .owb-content-hover .btn {
  width: 242px;
  margin: 20px auto 0;
}
.ourworks .container .our-worksBox .owb-content .owb-content-hover .owbc-tit {
  color: var(--white-color);
  position: initial;
  left: initial;
  top: initial;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.ourworks .container .our-worksBox .owb-content:hover .owbc-tit {
  color: var(--white-color);
  opacity: 1;
}
/* .ourworks .container .our-worksBox .owb-content:hover .btn a::after{content:"VIEW SAMPLE";font-size: 16px;} */
.ourworks
  .container
  .our-worksBox
  .owb-content:hover
  .btn.residential
  a::after {
  content: "RESIDENTIAL";
  font-size: 16px;
}
.ourworks .container .our-worksBox .owb-content:hover .btn.commercial a::after {
  content: "COMMERCIAL";
  font-size: 16px;
}

/* **************************************** *
 * Features Solar Layout
 * **************************************** */
/* Service Features */
.Service_features {
  background: #fafafc;
  padding: 130px 0;
}
.Service_features .container {
  display: flex;
  flex-flow: row nowrap;
}
.Service_features .container .sf-txt {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding-left: 130px;
}
.Service_features .container .sf-txt h2 {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 20px;
  text-align: center;
}
.Service_features .container .sf-txt .checked li {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
}
.Service_features .container .sf-txt .checked li::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  background: url(/images/chek-icon.svg) no-repeat center;
  width: 22px;
  height: 22px;
}
.Service_features .container .sf-txt .checked li span {
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  margin-top: 35px;
}

/* How it Works */
.howWork02 {
  overflow: hidden;
  position: relative;
  width: 1720px;
  margin: 130px auto 80px;
  height: 400px;
}
.howWork02 .howWork-tit {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.howWork02 .how_work_contwrap .progress {
  display: flex;
  width: 86%;
  position: absolute;
  top: calc(50% + 80px);
  left: 0%;
  transform: translateY(-50%);
  margin-left: 10%;
  z-index: 10;
}
.howWork02 .how_work_contwrap .progress-fin {
  display: flex;
  width: 30%;
  position: absolute;
  top: calc(50% + 80px);
  right: 0;
  transform: translateY(-50%);
  z-index: 9;
}
.howWork02 .how_work_contwrap .step {
  flex-grow: 1;
  position: relative;
}
.howWork02 .how_work_contwrap .progress-fin .step {
  flex-grow: inherit;
  margin-right: 5px;
}
.howWork02 .how_work_contwrap .step-progress {
  width: 100%;
  height: 20px;
  background: #fafafc;
}
.howWork02 .how_work_contwrap .progress-fin .step-progress {
  width: 10px;
  height: 2px;
}
.howWork02 .how_work_contwrap .icon-wrapper {
  text-align: center;
  display: inline-block;
  width: 350px;
}
.howWork02 .how_work_contwrap .progress-fin .step.done .step-progress:after {
  width: 0px;
  height: 4px;
  border-radius: 4px;
  -webkit-animation: growLine2 0.3s linear forwards;
  animation: growLine2 0.3s linear forwards;
}
.howWork02 .how_work_contwrap .step.done .step-progress:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 0;
  background-color: var(--orange-color);
  -webkit-animation: growLine 1s linear forwards;
  animation: growLine 1s linear forwards;
}
.howWork02 .how_work_contwrap .icon-checkmark {
  position: absolute;
  top: 10px;
  left: 0;
  border: 8px solid #f8f8f8;
  background: var(--gray-color-01);
  width: 107px;
  height: 107px;
  border-radius: 50%;
  padding: 0.125em;
  border-radius: 50%;
  transition: all 0.25s linear;
  transform: translate(-50%, -50%);
}
.howWork02 .how_work_contwrap .progress-fin .icon-checkmark {
  top: 10px;
}
.howWork02 .how_work_contwrap .step.done .icon-checkmark {
  background: var(--orange-color);
  border-color: #fff2d0;
}
.howWork02 .how_work_contwrap .icon-checkmark .path1 {
  fill: #cecece;
}
.howWork02 .how_work_contwrap .icon-checkmark.special .path1 {
  fill: var(--gray-color-01);
}
.howWork02 .how_work_contwrap .icon-checkmark .path3 {
  fill: var(--gray-color-02);
}
.howWork02 .how_work_contwrap .step.done .icon-checkmark .path1 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  fill: var(--white-color);
}
.howWork02 .how_work_contwrap .step.done .icon-checkmark .path2 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  stroke: var(--white-color);
}
.howWork02 .how_work_contwrap .step.done .icon-checkmark .path3 {
  -webkit-animation: dash 5s linear forwards;
  animation: dash 5s linear forwards;
  fill: var(--gray-color-01);
}
.howWork02 .how_work_contwrap .step-text {
  position: relative;
  margin-left: -100%;
  margin-top: 60px;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.howWork02 .how_work_contwrap .progress-fin .step-text {
  margin-top: 50px;
}
.howWork02 .how_work_contwrap .progress-fin .icon-clock-wrapper {
  position: absolute;
  top: 20px;
  left: 102px;
  color: var(--yellow-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.03em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.howWork02 .how_work_contwrap .progress-fin .icon-clock-wrapper .icon-clock {
  width: 22px;
  margin-right: 9px;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes growLine {
  to {
    width: 100%;
  }
}
@keyframes growLine {
  to {
    width: 100%;
  }
}
@-webkit-keyframes growLine2 {
  to {
    width: 10px;
  }
}
@keyframes growLine2 {
  to {
    width: 10px;
  }
}
@-webkit-keyframes growLine3 {
  to {
    height: 150px;
  }
}
@keyframes growLine3 {
  to {
    height: 150px;
  }
}
@-webkit-keyframes growLine4 {
  to {
    height: 10px;
  }
}
@keyframes growLine4 {
  to {
    height: 10px;
  }
}
/* @-webkit-keyframes dropText {to {padding-top: 50px;opacity: 1;}}
 @keyframes dropText {to {padding-top: 50px;opacity: 1;}} */

/* Our Works */
.ourworks02 {
  background: url("/images/ourworks02_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 100px 0 160px;
  width: 100%;
}
.ourworks02 .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.ourworks02 .container .our-worksText {
  margin-top: 100px;
}
.ourworks02 .container .our-worksText .ow-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 20px;
}
.ourworks02 .container .our-worksText .ow-txt {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
}
.ourworks02 .container .our-worksBox {
  display: flex;
  flex-flow: row wrap;
}
.ourworks02 .container .our-worksBox .owb-left {
  margin-right: 20px;
}
.ourworks02 .container .our-worksBox .owb-content {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--gray-color-01);
  border-radius: 10px;
  margin-bottom: 25px;
  overflow: hidden;
  width: 414px;
  height: 410px;
  background-color: var(--white-color);
  text-align: center;
  position: relative;
  transition-duration: 1.5s, 0.1s;
}
.ourworks02 .container .our-worksBox .owb-content .owbc-tit {
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--orange-color);
  margin-top: 35px;
  transition-duration: 1.5s, 0.1s;
}
.ourworks02 .container .our-worksBox .owb-content .btn {
  width: 242px;
}
.ourworks02 .container .our-worksBox .owb-content .btn a {
  font-size: 16px;
  margin-top: 20px;
  background-color: var(--orange-color);
  color: var(--white-color);
}
.ourworks02 .container .our-worksBox .owb-content .owb-content-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  display: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ff9110 0%, #ffb801 100%);
  align-content: center;
  justify-content: center;
  align-items: center;
}
.ourworks02 .container .our-worksBox .owb-content .owb-content-hover .btn {
  width: 242px;
}
.ourworks02 .container .our-worksBox .owb-content .owb-content-hover .owbc-tit {
  color: var(--white-color);
  position: initial;
  left: initial;
  top: initial;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
}
.ourworks02 .container .our-worksBox .owb-content:hover .owbc-tit {
  color: var(--white-color);
  opacity: 1;
}
/* .ourworks02 .container .our-worksBox .owb-content:hover .btn a::after{content:"VIEW SAMPLE";font-size: 16px;} */
.ourworks02
  .container
  .our-worksBox
  .owb-content:hover
  .btn.residential
  a::after {
  content: "RESIDENTIAL";
  font-size: 16px;
}
.ourworks02
  .container
  .our-worksBox
  .owb-content:hover
  .btn.commercial
  a::after {
  content: "COMMERCIAL";
  font-size: 16px;
}

/* **************************************** *
 * Features Design tool
 * **************************************** */
/* You can us our Design tool for */
.Design_tool {
  background: #fafafc;
  padding: 130px 0;
}
.Design_tool .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.Design_tool .container .dt-tit,
.Design_tool .container .dt-iconBox {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.Design_tool .container .dt-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  text-align: center;
}
.Design_tool .container .dt-content .dtc-tit {
  display: flex;
  flex-flow: row wrap;
  width: auto;
  position: relative;
  align-content: center;
}
.Design_tool .container .dt-content .dtc-tit a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--gray-color-01);
  border-radius: 10px;
  width: 620px;
  height: 104px;
  text-align: left;
  padding: 0 10%;
  cursor: pointer;
  color: var(--orange-color);
  font-weight: bold;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  transition-duration: 1.5s, 0.1s;
  background-color: var(--white-color);
}
.Design_tool .container .dt-content .dtc-tit .dtc-tit-hover {
  display: none;
  flex-flow: row wrap;
  position: absolute;
  top: 0;
  right: 0;
}
.Design_tool .container .dt-content .dtc-tit .dtc-tit-hover a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--gray-color-01);
  border-radius: 10px;
  width: 620px;
  height: 104px;
  text-align: left;
  padding: 0 10%;
  cursor: pointer;
  color: var(--white-color);
  font-weight: bold;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  transition-duration: 1.5s, 0.1s;
  background-image: linear-gradient(180deg, #ff9110 0%, #ffb801 100%);
}
.Design_tool .container .dt-content .dtc-tit02 {
  margin-top: 20px;
}

/* How to use? */
.howtouse {
  padding: 130px 0;
  background: url(/images/howtouse-bg.png) no-repeat center bottom;
}
.howtouse .container {
  width: 1222px;
}
.howtouse .container .htu-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  padding-bottom: 80px;
  color: var(--black-color);
  text-align: center;
}

/* How to use timeline */
.ag-format-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.ag-timeline_item {
  margin: 0 0 50px;
  text-align: right;
  position: relative;
}
.ag-timeline_item:nth-child(2n) {
  text-align: left;
}
.ag-timeline {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.ag-timeline_line {
  width: 2px;
  background-color: var(--gray-color-01);
  position: absolute;
  top: 2px;
  left: 50%;
  bottom: 0;
  overflow: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.ag-timeline_line-progress {
  width: 100%;
  height: 20%;
  background-color: var(--orange-color);
}
.ag-timeline-card_box {
  padding: 0 0 20px 50%;
}
.ag-timeline_item:nth-child(2n) .ag-timeline-card_box {
  padding: 0 50% 20px 0;
}
.ag-timeline-card_point-box:nth-child(2n + 1) {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* .ag-timeline-card_point-box {display: inline-block;margin: 0 14px 0 -28px;} */
.ag-timeline-card_point {
  height: 40px;
  line-height: 40px;
  width: 40px;
  background: url(/images/timeline-pointer.svg) no-repeat center;
  text-align: center;
  font-size: 20px;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.ag-timeline-card_item {
  display: inline-block;
  width: 45%;
  border: 1px solid var(--gray-color-01);
  opacity: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  -moz-transition: -moz-transform 0.5s, opacity 0.5s;
  -o-transition: -o-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
  position: relative;
}
.ag-timeline_item:nth-child(2n + 1) .ag-timeline-card_item {
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  -o-transform: translateX(200%);
  transform: translateX(200%);
}
.ag-timeline_item:nth-child(2n) .ag-timeline-card_item {
  -webkit-transform: translateX(-200%);
  -moz-transform: translateX(-200%);
  -ms-transform: translateX(-200%);
  -o-transform: translateX(-200%);
  transform: translateX(-200%);
}
.js-ag-active.ag-timeline_item:nth-child(2n + 1) .ag-timeline-card_item,
.js-ag-active.ag-timeline_item:nth-child(2n) .ag-timeline-card_item {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.ag-timeline-card_img-box {
  padding: 25px;
  background-color: var(--gray-color-01);
}
.ag-timeline-card_img {
  width: 100%;
}
.ag-timeline-card_info {
  padding: 0 23px 30px;
  background-color: var(--white-color);
}
.ag-timeline-card_title {
  padding: 25px 0 0;
  font-weight: 700;
  font-size: 28px;
  color: var(--orange-color);
  text-align: center;
}
.ag-timeline-card_desc {
  line-height: 28px;
  font-size: 18px;
  color: var(--gray-color-03);
  margin: 10px 0 0;
  text-align: center;
}
.ag-timeline-card_desc span {
  line-height: 25px;
  font-weight: 400;
  font-size: 15px;
  color: var(--gray-color-03);
  margin: 10px 0 0;
  text-align: center;
  letter-spacing: -0.04em;
}

/* See How it Works */
.see_how_it_works {
  padding: 130px 0;
}
.see_how_it_works .container .shiw-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  padding: 0 0 80px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  text-align: center;
}
.see_how_it_works .container .shiw-videoBox {
  text-align: center;
  width: 100%;
}
.see_how_it_works .container .shiw-videoBox img {
  text-align: center;
  width: 100%;
}

/* **************************************** *
 * Project management
 * **************************************** */
/* Service features */
.serfe_wrap {
  padding: 130px 0;
}
.serfe_wrap .container {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 1620px;
}
.serfe_wrap .container .serfe_tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 80px;
  text-align: center;
}
.serfe_wrap .container .serfe_cont {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  height: 520px;
}
.serfe_wrap .container .serfe_cont .serfe-box {
  margin-right: 20px;
  border: 1px solid var(--gray-color-01);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: 100%;
  padding: 0 20px;
}
.serfe_wrap .container .serfe_cont .serfe-box:last-child {
  margin-right: 0px;
}
.serfe_wrap .container .serfe_cont .serfe-box .sefebox-ico {
  margin-bottom: 42px;
}
.serfe_wrap .container .serfe_cont .serfe-box .sefebox-textbox .sefebox-tit {
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  color: var(--orange-color);
  margin-bottom: 20px;
  text-align: center;
}
.serfe_wrap .container .serfe_cont .serfe-box .sefebox-textbox .sefebox-txt {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  text-align: center;
}
.serfe_wrap .container .serfe_cont .serfe-box:hover {
  background: linear-gradient(180deg, #ff9110 0%, #ffb801 100%);
}
.serfe_wrap
  .container
  .serfe_cont
  .serfe-box:hover
  .sefebox-textbox
  .sefebox-tit,
.serfe_wrap
  .container
  .serfe_cont
  .serfe-box:hover
  .sefebox-textbox
  .sefebox-txt {
  color: var(--white-color);
}

/* **************************************** *
 * About Us
 * **************************************** */
/* Company */
/* common */
.company_title {
  text-align: center;
  padding-bottom: 100px;
}
.company_title h2 {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.company_title span {
  margin-bottom: 55px;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: #5b5b5b;
}
.text_fff {
  color: #fff !important;
}
.grid_body {
  width: 100%;
  margin: 0 auto;
  max-width: 1620px;
}
.gird_wrap {
  text-align: center;
  margin: 100px 0;
}
.col_3 {
  padding: 60px;
  width: 30%;
  display: inline-block;
  text-align: center;
  background: #fff;
  margin: 0 5px;
  border-bottom: solid 13px #29b2ff;
  border-radius: 10px;
  max-height: 259px;
  vertical-align: middle;
}

/* our future section */
.our_future_body {
  padding: 85px 0;
}
.our_future_wrap {
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
}
.map_wrap {
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  display: inline-block;
}
.map_body {
  text-align: center;
}
.map_box img {
  width: 100%;
  height: auto;
}
.map_box {
  display: inline-block;
  width: 50%;
  margin-top: 30px; /* background: url(/images/map.png) no-repeat center bottom; */
}
.map_text {
  display: inline-block;
  width: 40%;
  text-align: left;
  border: solid 1px #e9e9e9;
  border-radius: 10px;
  padding: 40px 40px 20px 40px;
  max-width: 100%;
  height: 100%;
  float: right;
}
.map_text > span {
  padding-bottom: 30px;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.04em;
  color: #5b5b5b;
  display: block;
}
.map_text > .point {
  color: #ff9110;
  font-size: 28px;
  text-align: left;
}
.map_text ul li span {
  font-size: 20px;
  font-weight: normal;
  padding-left: 14px;
}
.map_text ul li {
  padding: 0 0 22px 0;
}
.map_text:before {
  content: "";
  background: url(/images/map_text_icon.png) no-repeat;
  width: 35px;
  height: 46px;
  position: absolute;
  margin-left: -75px;
  margin-top: 140px;
}

/* reliable solar solution section */
.raliable_body {
  background: url(/images/reliable_bg.png) no-repeat;
  background-size: cover;
  background-color: #ffb801;
  height: 598px;
  padding: 80px 0;
  background-position-y: 12px;
}
.raliable_wrap {
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
}
.raliable_wrap h2 {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  text-align: center;
  letter-spacing: -0.03em;
}
.point {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  letter-spacing: -0.03em;
  color: #ff9110;
}
.point_title {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  line-height: 36px;
  text-align: center;
  letter-spacing: -0.03em;
  color: #ff9110;
}
.sub_text {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 200;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  letter-spacing: -0.03em;
  color: #5b5b5b;
  display: block;
  padding-top: 20px;
}

/* partners section */
.partners_body {
  padding: 85px 0;
}
.partners_wrap {
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
}
.partners_wrap h2 {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--black-color);
}
.partners_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  grid-gap: 10px;
  text-align: center;
}
.partners_grid a img {
  width: 100%;
  height: 100%;
}

/* Pricing */
.pricing-projects {
  height: 600px;
  position: relative;
}
.pricing-projects .container .pricing-pros {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  top: -270px;
}
.pricing-projects .container .pricing-pros .pp-list {
  margin-right: 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background-color: var(--white-color);
  padding: 35px 20px 80px;
  border-radius: 10px;
  width: 434px;
  filter: drop-shadow(0px 0px 30px rgba(185, 185, 185, 0.25));
}
.pricing-projects .container .pricing-pros .pp-list:last-child {
  margin-right: 0px;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top,
.pricing-projects .container .pricing-pros .pp-list .pp-list-bottom {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top {
  border-bottom: 1px solid var(--gray-color-01);
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top .pp-tit {
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 54px;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top .pp-img {
  margin-bottom: 20px;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top .pp-price {
  font-weight: 700;
  font-size: 45px;
  line-height: 54px;
  letter-spacing: -0.03em;
  color: var(--orange-color);
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-top .pp-price-txt {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--gray-color-03);
  margin: 5px 0 35px;
}
.pricing-projects .container .pricing-pros .ppb-wrap {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-bottom {
  padding-top: 35px;
  align-items: flex-start;
  height: 140px;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-bottom li.plb-txt {
  position: relative;
  padding-left: 70px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  margin-bottom: 10px;
  width: 100%;
  padding-right: 10px;
}
.pricing-projects
  .container
  .pricing-pros
  .pp-list
  .pp-list-bottom
  li.plb-txt:last-child {
  margin-bottom: 0;
}
.pricing-projects
  .container
  .pricing-pros
  .pp-list
  .pp-list-bottom
  li.plb-txt::before {
  position: absolute;
  content: "";
  display: block;
  left: 35px;
  top: 1px;
  width: 22px;
  height: 22px;
  background: url("/images/pp-list-ico.svg") no-repeat;
}
.pricing-projects .container .pricing-pros .pp-list .pp-list-bottom .last-plb {
  display: grid;
  gap: 5px;
  position: absolute;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  width: 100%;
}
.pricing-projects
  .container
  .pricing-pros
  .pp-list
  .pp-list-bottom
  .last-plb
  li {
  position: relative;
  padding-left: 5px;
  padding-right: 100px;
}
.pricing-projects
  .container
  .pricing-pros
  .pp-list
  .pp-list-bottom
  .last-plb
  li::before {
  position: absolute;
  content: "*";
  display: block;
  left: -4px;
  top: 0;
}
.pricing-projects .container .pricing-pros .pp-list.last-spec .pp-list-top {
  border-bottom: none;
  margin-bottom: 68px;
}
.pricing-projects
  .container
  .pricing-pros
  .pp-list.last-spec
  .pp-list-top
  .pp-price-txt {
  display: none;
}
.pricing-projects .container .pricing-pros .pp-list.last-spec .pp-btn {
  margin-top: 0;
}
.pricing-projects .container .pricing-pros .pp-list .pp-btn {
  width: 242px;
  height: 65px;
  border-radius: 50px;
  margin-top: 100px;
}
.pricing-projects .container .pricing-pros .pp-list .pp-btn a {
  width: 100%;
  height: 100%;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.04em;
  color: var(--white-color);
  background-color: var(--orange-color);
  border: 1px solid var(--orange-color);
  border-radius: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.pricing-projects .container .pricing-pros .pp-list .pp-btn a:hover {
  color: var(--orange-color);
  background-color: var(--white-color);
}
.pp-chart-wrap {
  margin-bottom: 130px;
}
.pp-chart-wrap .container {
  width: 1620px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.pp-chart-wrap .container .pao-chart {
  width: 100%;
  margin-bottom: 50px;
}
.pp-chart-wrap .container .add-chart {
  width: 100%;
}
.pp-chart-wrap .container ul li {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  padding: 24px 22px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray-color-01);
}
.pp-chart-wrap .container .chart-tit {
  width: 100%;
  height: 67px;
  font-weight: 700;
  font-size: 28px;
  line-height: 67px;
  letter-spacing: -0.04em;
  color: var(--orange-color);
  background-color: rgba(233, 233, 233, 0.3);
  padding-left: 33px;
  position: relative;
}
.pp-chart-wrap .container .chart-tit::after {
  position: absolute;
  display: block;
  content: "*USD";
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #000;
  right: 22px;
  bottom: 16px;
}
.pp-chart-wrap .container .pao-tit {
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  width: 100%;
  margin-right: 20px;
}
.pp-chart-wrap .container .pao-sub-tit {
  margin-top: 5px;
  width: 100%;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
}
.pp-chart-wrap .container .pao-txt {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
}

/* Contact Us */
.contact-projects {
  height: 700px;
  position: relative;
}
.contact_body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -270px;
  width: 1350px;
  margin-right: 20px;
  background-color: var(--white-color);
  padding: 0 0 80px;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 30px rgba(185, 185, 185, 0.25));
}
.contact_wrap {
  width: 58%;
  display: inline-block;
  float: left;
  padding: 40px;
}
.contact_location_wrap {
  display: inline-block;
  float: right;
  width: 38%;
  padding: 40px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #5b5b5b;
}
.contact_location_wrap h2 {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
  color: #ff9110;
}
.contact_location_wrap ul li img {
  padding: 30px 0 40px 0;
}
.contact_location_wrap a {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #5b5b5b;
}
.contact_location_wrap ul li {
  padding: 0 0 20px 0;
}
.contact_wrap:before {
  content: "";
  background: #e9e9e9;
  width: 1px;
  height: 787px;
  position: absolute;
  right: 540px;
  top: 0;
}

/* contact form */
.contact_form_field > li.contact_form_field_half {
  width: 50%;
  margin-top: 0;
}
.contact_form_field > li {
  float: left;
  width: 100%;
  margin-top: 15px;
}
.contact_form_field > li .form-control {
  resize: vertical;
}
.form-control-wrap {
  position: relative;
}
.form_field_recruit {
  width: 100%;
  height: 250px;
  background: #fff;
}
.contact_form_field {
  display: inline-block;
  vertical-align: middle;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.04em;
  color: #a9a9a9;
}
.contact_form_field > li.contact_form_field_first_name {
  padding-right: 2%;
  margin-top: 0;
}
#your-first-name,
#your-last-name,
#your-email,
#your-number,
#your-company {
  height: 55px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.04em;
  padding: 0 20px;
}
.form_field {
  border: solid 1px #e9e9e9 !important;
  border-radius: 10px;
  padding: 14px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.04em;
  padding: 15px 20px;
}

/* send btn */
.form-send {
  background: #ff9110;
  display: inline-block;
  border: 1px solid #ff9110;
  border-radius: 50px;
  margin-top: 30px;
}
.form-send a {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  width: 242px;
  height: 65px;
  display: inline-block;
  text-align: center;
  line-height: 65px;
}

/* location svg icon */
.help_mail_icon {
  margin-right: 20px;
}
.help_clock_icon {
  margin-right: 20px;
  margin-bottom: -2px;
}
.help_tal_icon {
  margin-right: 20px;
  margin-bottom: -2px;
}

/* Thank You */
.thankyou_body {
  background: url(/images/thankyou_bg.png) no-repeat;
  background-size: cover;
  height: 845px;
}
.thankyou_wrap {
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  height: 100%;
  align-items: center;
}
.thankyou_cont h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  text-align: center;
  letter-spacing: -0.03em;
  text-transform: capitalize;
  color: #ffffff;
  padding: 40px 0 30px 0;
}
.thankyou_cont span {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  text-align: center;
  letter-spacing: -0.04em;
  color: #ffffff;
}
.thankyou_cont h3 {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
  letter-spacing: -0.04em;
  color: #ffffff;
  padding: 50px 0 20px 0;
}
.thankyou_cont ul {
  padding-bottom: 50px;
}
.thankyou_cont ul li {
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  letter-spacing: -0.04em;
  color: #ffffff;
}
.thankyou_cont ul li:after {
  content: "";
  opacity: 0.5;
  width: 1px;
  height: 14px;
  background: #fff;
  display: inline-block;
}
.thankyou_cont ul li a {
  color: #fff;
  padding: 0 20px;
}
.thankyou_cont ul li:last-child:after {
  display: none;
}
.thank_btn {
  background: #ff9110;
  display: inline-block;
  border: 1px solid #ff9110;
  border-radius: 50px;
  margin-top: 30px;
}
.thank_btn a {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  width: 242px;
  height: 65px;
  display: inline-block;
  text-align: center;
  line-height: 65px;
}

/* **************************************** *
 * Etc
 * **************************************** */
/* Faq */
.faq-list-wrap {
  padding: 130px 0;
}
.faq-list-wrap .container {
  width: 1620px;
  display: flex;
  flex-flow: row nowrap;
}
.faq-list-wrap .container .flw-menu-category {
  width: 320px;
  margin-right: 100px;
}
.faq-list-wrap .container .flw-menu-category li {
  height: 70px;
  width: 100%;
  display: flex;
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--orange-color);
  border: 1px solid var(--orange-color);
  border-radius: 10px;
  flex-flow: row nowrap;
  align-items: center;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
}
.faq-list-wrap .container .flw-menu-category li:last-child {
  margin-bottom: 0;
}
.faq-list-wrap .container .flw-menu-category li svg {
  margin-right: 29px;
}
.faq-list-wrap .container .flw-menu-category li svg .icoPath1 {
  fill: var(--orange-color);
}
.faq-list-wrap .container .flw-menu-category li svg .icoPath2 {
  fill: var(--white-color);
}
.faq-list-wrap .container .flw-menu-category li.on {
  background-color: var(--orange-color);
  color: var(--white-color);
}
.faq-list-wrap .container .flw-menu-category li.on svg .icoPath1 {
  fill: var(--white-color);
}
.faq-list-wrap .container .flw-menu-category li.on svg .icoPath2 {
  fill: var(--orange-color);
}
.faq-list-wrap .container .flwc-cont {
  width: calc(100% - 420px);
}
.faq-list-wrap .container .flwc-cont > div {
  display: none;
  width: 100%;
}
.faq-list-wrap .container .flwc-cont > div.on {
  display: block;
}
.faq-list-wrap .container .flwc-cont > div .flwc-cont-tit {
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 50px;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box {
  width: 100%;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li {
  padding: 35px;
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: rgba(233, 233, 233, 0.3);
  width: 100%;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li:last-child {
  margin-bottom: 0;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li .flwc-box-tit {
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: -0.05em;
  color: var(--black-color);
  position: relative;
  transition: all 0.3s ease-in-out;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li .flwc-box-txt {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.05em;
  color: var(--gray-color-03);
  display: none;
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid #ddd;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li .flwc-box-tit::after {
  position: absolute;
  display: block;
  content: "";
  width: 21px;
  height: 21px;
  background: url("/images/faq-toggle.png") no-repeat center/cover;
  background-size: 100% 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: all 0.3s ease-in-out;
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li.active {
  border: 1px solid var(--orange-color);
  background-color: var(--white-color);
}
.faq-list-wrap .container .flwc-cont > div .flwc-box li.active .flwc-box-tit {
  color: var(--orange-color);
}
.faq-list-wrap
  .container
  .flwc-cont
  > div
  .flwc-box
  li.active
  .flwc-box-tit::after {
  transform: translateY(-50%) rotate(-45deg);
}
.faq-list-wrap .container .flwc-cont > div .last-manual {
  padding: 50px;
  background-color: rgba(233, 233, 233, 0.3);
  border-radius: 10px;
}
.faq-list-wrap .container .flwc-cont > div .last-manual .lm-tit {
  font-weight: 700;
  font-size: 45px;
  line-height: 54px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 20px;
}
.faq-list-wrap .container .flwc-cont > div .last-manual .lm-txt {
  font-weight: 500;
  font-size: 26px;
  line-height: 33px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
  margin-bottom: 55px;
}
.faq-list-wrap .container .flwc-cont > div .last-manual .btn {
  width: 242px;
  height: 65px;
}
.faq-list-wrap .container .flwc-cont > div .last-manual .btn a {
  width: 100%;
  height: 100%;
  padding: 0;
}
.faq-list-wrap .container .flwc-cont > div .last-manual .btn a::after {
  content: "CONTACT US";
}

/* Blog */
.blog-gall-wrap {
  padding: 130px 0;
}
.blog-gall-wrap .container {
  width: 1620px;
}
.blog-gall-wrap .container .bgw-info {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.blog-gall-wrap .container .bgw-info .bgw-list {
  margin-right: 20px;
  border: 1px solid var(--gray-color-01);
  border-radius: 10px;
  overflow: hidden;
}
.blog-gall-wrap .container .bgw-info .bgw-list:last-child {
  margin-right: 0px;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-thumb {
  width: 100%;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-thumb img {
  object-fit: cover;
  width: 100%;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-cont {
  padding: 10px 30px 50px;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-cont .bgwc-tit {
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.03em;
  color: var(--black-color);
  margin-bottom: 10px;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-cont .bgwc-txt {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.04em;
  color: var(--gray-color-03);
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-cont .bgwc-desc {
  margin-top: 40px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.blog-gall-wrap .container .bgw-info .bgw-list .bgw-cont .bgwc-desc .bgwc-date {
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: -0.04em;
  color: var(--gray-color-02);
}
.bgw-pagination {
  text-align: center;
  margin-top: 80px;
}
.bgw-pagination ul {
  display: inline-block;
}
.bgw-pagination ul li {
  display: inline;
  text-align: center;
}
.bgw-pagination ul li a {
  float: left;
  display: block;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #bbb;
  padding: 11px 12px;
}
.bgw-pagination ul li.bgw-prev a {
  padding: 0;
  margin-right: 30px;
}
.bgw-pagination ul li.bgw-next a {
  padding: 0;
  margin-left: 30px;
}
.bgw-pagination ul li.active a {
  cursor: default;
}
.bgw-pagination ul li.active a,
.bgw-pagination ul li a:hover {
  color: var(--black-color);
}

/* Blog Detail */
.blog-detailWrap {
  width: 100%;
  max-width: 1620px;
  /* margin: 130px auto 200px; */
  margin: 130px auto 100px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
.blog-write-data {
  width: 320px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01px;
  color: #262626;
  position: relative;
}
.blog-write-data span {
  margin-top: 15px;
  display: block;
}
.blog-write-data::after {
  content: "";
  height: 2px;
  background: #262626;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.blog-write-txt {
  width: calc(100% - 500px);
}
.blog-write-txt .blog-txt img {
  width: 100%;
}
.blog-write-txt .blog-txt {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: -0.32px;
  color: #262626;
  border-bottom: 1px solid #e9e9e9;
}
.blog-write-txt .blog-txt p {
  margin-bottom: 50px;
}
.blog-detailWrap .social-link {
  text-align: right;
  margin-top: 40px;
}
.blog-detailWrap .social-link a {
  display: inline-block;
  margin-left: 40px;
}