@font-face {
    font-family: fontStyle;
    src: url('../assets/font/NotoSansTC-Light.otf');
  }
  
  @font-face {
    font-family: fontStyle;
    src: url('../assets/font/NotoSansTC-Bold.otf');
    font-weight: bold;
  }
  *{
    font-family: fontStyle;
  }
  :root {
    --background-color: #fff;
    --text-color: #272C35;
    --sec-text-color:#314261;
    --link-color: #647697;
    
  }
  
  html[data-theme='light'] {
    --background-color: #fff;
    --coustomer-background-color:#DEDEDE;
    --text-color: #272C35;
    --link-color: #2064B4;
    --link-visited-color: #2320B4; 
    --opacity-color: rgba(255,255,255,0.3);
    --opacity-color-hover: rgba(255,255,255,0.7);
    --opacity-compared: #EDEDED;
    --main-title:#2064B4;
    --main-border:#2064B4;
    --about-color-green:#20B47F;
    --about-color-blue:#2064B4;
    --about-color-three:#155E6B;
    --works-content-footer:#DDF1F6;
    --coustomer-dialogue-green:#A7EBCA;
    --coustomer-dialogue-blue:#549BEF;
  }
  
  html[data-theme='dark'] {
    --background-color: #000;
    --coustomer-background-color:#000;
    --text-color: #F7F8F8;
    --link-color: #71B2FF;
    --link-visited-color: #71B2FF;
    --opacity-color: rgba(0,0,0,0.3);
    --opacity-color-hover: rgba(0,0,0,0.7);
    --opacity-compared: #1F1F1F;
    --main-title:#155E6B;
    --main-border:#20B47F;
    --about-color-green:#34E3A5;
    --about-color-blue:#1578ED;
    --about-color-three:#26A5BC;
    --works-content-footer:#000;
    --coustomer-dialogue-green:#155E6B;
    --coustomer-dialogue-blue:#2064B4;
  }
  
  
  
  a {
    color: var(--link-color);
  }
  a:visited
  {
    color: var(--link-color);
  }
  
  a:hover {
    color: var(--link-color);
    opacity: 0.7;
  }
  
  a:active
  {
    color: var(--link-color);
  }
  .main-title{
    background-color:var(--main-title);
  }
  .main-border{
    color: var(--main-border);
  }
  .text-color{
    color: var(--text-color);
  }
  .background-color{
    color: var(--background-color);
  }
  .background-color{
    color: var(--background-color);
  }
  .works-content-footer{
    background-color: var(--works-content-footer);
  }
  [data-theme='dark'] .form-control {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.6);
    color: var(--text-color) !important;
  }
  
  [data-theme='dark'] .form-control:focus {
    color: var(--text-color) !important;
  }
  [data-theme='light'] .d-block-light,
  [data-theme='dark'] .d-block-dark {
      display: block !important;
      color: var(--text-color);
  }
  .modal-content{
    background-color: var(--background-color) !important;
  }
  [data-theme='light'] .btn-close{
    background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  }
  [data-theme='dark'] .btn-close{
    background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  }
  
  .imgMoblieBGCover{
    height: 150vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .imgMoblieBGSet{
    height: calc(100vh);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .imgMoblieLayer03{
    z-index: -1;
  }
  .homeTitlePC{
    z-index: 99;
    position: absolute;
    top: 25vmin;
    left: 30vmin;
  }
  .fs-HomeTitle{
    font-size: 6rem;
  }
  
  @media (min-width: 416px){
    .moHidden{
       display: grid !important;
     }
    
   }
   @media (max-width: 415px){
     .moHidden{
      display: none !important;
     }
   }
  
    [data-theme='dark'] .imgMoblieLayer01{
      background-image: url('../assets/img/dark-step/homePageBG02.svg');
      z-index: -1;
      }
    [data-theme='light'] .imgMoblieLayer01{
      background-image: url('../assets/img/light-step/homePageBG02.svg');
      z-index: -1;
    }
  
    [data-theme='dark'] .imgMoblieLayer02{
      background-image: url('../assets/img/smallpanel-line.svg');
      z-index: -1;
      }
    [data-theme='light'] .imgMoblieLayer02{
      background-image: url('../assets/img/smallpanel-line.svg');
      z-index: -1;
    }
  
  
    [data-theme='dark'] .imgMoblieLayer03{
      background-image: url('../assets/img/upsolarsystem.svg');
      z-index: -1;
      }
    [data-theme='light'] .imgMoblieLayer03{
      background-image: url('../assets/img/upsolarsystem.svg');
      z-index: -1;
    }
  
  
    [data-theme='dark'] .imgMoblieBG{
      background-image: url("../assets/img/dark-step/homePageBG.svg");
      z-index: -10;
      }
    [data-theme='light'] .imgMoblieBG{
      background-image: url("../assets/img/light-step/homePageBG.svg");
      z-index: -10;
    }
  
  .img-D{
    height: calc(100vh - 4.5rem);
    z-index: -10;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
  [data-theme='dark'] .img-D{
    background-image: url("../assets/img/dark-bg.svg");
    
    }
  [data-theme='light'] .img-D{
    background-image: url("../assets/img/light-bg.svg");
  }
  .logo{
    height: 2.5rem;
    width: 10rem;
    background-repeat: no-repeat;
  }
  @media (min-width: 416px){
    .logo{
    background-size: 6em 100%;
    height:4.5rem;
    }
    .navbar-brand{
       /* padding-top: .5rem !important;
      padding-bottom: .5rem !important;*/
    }
  }
  @media (max-width: 415px){
  /* NAVBAR bootstap style change */
  .navbar-brand{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  /* NAVBAR bootstap style change */
  }
  
  /* PC NAVBAR */
  .pcNavbar{
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: calc(100vh - 4.5em);
    width: 18vw;
    min-width: 160px;
    margin: 0 auto;
  }
  @media (max-width: 416px){
    .pcNavDisplay {display: none;}
  }
  @media (min-width: 415px){
    .pcNavDisplay {display:flex;}
  }
  .fixed-right{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 8;
  }
  .pcNav-border{
  height: 2.5rem;
  border-left: 3px solid var(--text-color);
  padding-right: 15px;
  right: 0;
  transform: translate(100%, 0);
  opacity: 0.5;
  transition: all ease-in 0.4s;
  position: absolute;
  }
  .navbar-nav:hover .nav-item .pcNav-border{
    min-width: 130px;
    right: 100%;
    transform: translate(100%, 0);
    position: absolute;
  }
  .navbar-nav.active .nav-item .pcNav-border{
    width: 160px;
    right: 100%;
    transform: translate(100%, 0);
    position: absolute;
  }
  .nav-item{
    position: relative;
  }
  .navHeight{
    height: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .pcNavContent{
    opacity: 1 !important;
    color: var(--text-color);
    font-size: 1.4rem;
    transition-delay: 0.5s;
    display: none;
  }
  .navbar-nav:hover .nav-item .pcNav-border .pcNavContent{
    display:block;
    transform: translate(10%, 0);
    margin-top: -0.3rem;
  }
  .navbar-nav.active .nav-item .pcNav-border .pcNavContent{
    display:block;
    transform: translate(10%, 0);
    margin-top: -0.3rem;
  }
  #toggeOnly{
    opacity: 0;
  }

  .pcNav-item{
    display: none;
    
    color: var(--text-color);
    margin: auto;
  }
  
  /* PC NAVBAR */
  
  [data-theme='dark'] .logo{
    background-image: url("../assets/img/dark-logo.svg");
    
    }
  [data-theme='light'] .logo{
    background-image: url("../assets/img/light-logo.svg");
  }
  homepagTitle {
    position: relative;
    left: 13%;
    color: var(--main-title);
  }
  .mainBoder{
    color: var(--main-border);
    font-weight: bolder;
  }
  .homeMobileCont{
    position: absolute;
    top:0;
    width: 100%;
    margin-top: 19vh;
    text-align: left;
  }
  
  /* NAVBAR */
  .navbar {
    background-color: transparent !important;
    background: transparent !important;
  }
  .navbar-wrapper {
    background: rgba(0,0,0,0) !important;
  }
  .navbar-container{
    margin:0 8rem 0 8rem;
  }
  
  @media (min-width: 991px) and (max-width: 1200px){
    .navbar-container{
      margin:0 6rem 0 6rem;
    }
  }
  @media (min-width: 767px) and (max-width: 992px){
    .navbar-container{
      margin:0 5rem 0 5rem;
    }
  }
  @media (min-width: 575px) and (max-width: 768px){
    .navbar-container{
      margin:0 4rem 0 4rem;
    }
  }
  @media (max-width: 576px){
    .navbar-container{
      margin:0 3rem 0 3rem;
    }
  }
  
  .navbar-expand-md {
    z-index: 99;
    
    padding: 0;
  }
  .navbar-expand-md .container .navbar-toggler {
    display: block;
  }
  /*
    background:linear-gradient(
      to bottom, 
      var(--background-color) 60%,
      rgba(0,0,0,0.2) 200px,
      var(--background-color) calc(100% - 500px) 30%,
      rgba(0,0,0,0.2) 115%
    ) !important;
    background:linear-gradient(
      to bottom, 
      var(--background-color) 60%,
      var(--opacity-color) 200px,
      var(--background-color) calc(100% - 500px) 30%,
      var(--opacity-color) 115%
    ) !important;
  */
  .navbar-collapse {
    background: var(--background-color);
    position: fixed;
  
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 432px;
    height: 100%;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
  }
  @media (max-width: 576px){
    .navbar-collapse{
      overflow-y: scroll !important;
    }
  }
  .navbar-collapse ul.navbar-nav {
    margin-top: 7rem;
    min-width: 96px;
  }
  .navbar-collapse ul.navbar-nav li {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
    padding: 0;
    margin-bottom: 2em;
  }
  .navbar-collapse ul.navbar-nav li a {
    color: var(--text-color);
    font-size: 2rem;
    padding: 0;
  }
  @media (min-width: 576px){
    .navbar-collapse ul.navbar-nav li a{
      font-size: 1.5rem;
    }
    .navbar-collapse ul.navbar-nav li {
      margin-bottom: 3em;
    }
  }
  /*
  .navbar-collapse ul.navbar-nav li div {
    color: var(--text-color);
    padding: 0;
  }*/
  .navbar-collapse.show {
    min-height: 100vh;
    visibility: visible;
    opacity: 1;
    z-index: 9;
  }
  .navbar-collapse.show ul li {
    opacity: 1;
  }
  .navbar-collapse.show ul li:nth-child(1) {
    transition-delay: 0.06s;
  }
  .navbar-collapse.show ul li:nth-child(2) {
    transition-delay: 0.12s;
  }
  .navbar-collapse.show ul li:nth-child(3) {
    transition-delay: 0.18s;
  }
  .navbar-collapse.show ul li:nth-child(4) {
    transition-delay: 0.24s;
  }
  .navbar-collapse.show ul li:nth-child(5) {
    transition-delay: 0.3s;
  }
  .navbar-collapse.show ul li:nth-child(6) {
    transition-delay: 0.36s;
  }
  .navbar-toggler {
    padding: 0;
  }
  .navbar-toggler #nav-icon {
    width: 30px;
    height: 25px;
    position: relative;
    margin: 0 auto;
    transform: rotate(0deg);
    cursor: pointer;
  }
  .navbar-toggler #nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 50%;
    background: var(--text-color);
    opacity: 1;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(even) {
    left: 50%;
  }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(odd) {
    left: 0px;
  }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(1), .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(2) {
    top: 6px;
  }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(1), .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(3){
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(2), .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(4){
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    }
  .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(3), .navbar-toggler[aria-expanded="false"] #nav-icon span:nth-child(4) {
    top: 16px;
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(1), .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(4) {
    transform: rotate(45deg);
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(2), .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(1) {
    left: 5px;
    top: 9px;
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(2) {
    left: calc(50% - 5px);
    top: 9px;
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(3) {
    left: 5px;
    top: 14px;
  }
  .navbar-toggler[aria-expanded="true"] #nav-icon span:nth-child(4) {
    left: calc(50% - 5px);
    top: 14px;
  }
  
  .nav-height{
    margin-top: 5.5rem;
  }
  
  
  @media (min-width: 1050px){
    .fixed-top.scrolled {
      backdrop-filter: none;
    }
  }
  @media (max-width: 1049px){
    .fixed-top.scrolled {
      backdrop-filter: blur(10px);
      transition: backdrop-filter 200ms linear;
    }
  }
  
  .backdrop-blur {
    backdrop-filter: blur(10px);
  }
  .backdrop-blur-none {
    background: var(--background-color) !important;
  }
  /* NAVBAR */
  /* webDesign & business */
  .mt-10{
    margin-top: 6em;
  }
  .vertical-mode{
    writing-mode: vertical-rl;
    font-size: 4.5em;
    font-weight: bold;
    letter-spacing: .7rem;
  }
  .mode-ab{
    font-size: 4em;
    font-weight: bold;
    letter-spacing: .3rem;
  }
  .webD {
    background-image: url("../assets/img/desginWeb.svg");
  }
  .webD-PC{
    height: calc(100vh - 4.5rem);
    width: 65vw;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: visible !important;
  }
  [data-theme='dark'] .webDesginBGPC{
    background-image: url('../assets/img/dark-step/webD-BG.svg');
  }
  [data-theme='light'] .webDesginBGPC{
  
  }
  .webDesginBGPC{
  
  }
  .webD-Mo{
    min-height: 288px;
    width: 100%;
    height: 35vh;
    padding:0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden !important;
  }
  @media (min-width: 455px){
    .webD-Mo{
      height: 40vh;
    }}
    @media (min-width: 456px) and (max-width: 525px){
      .webD-Mo{
        height: 45vh;
      }}
      @media (min-width: 526px){
        .webD-Mo{
          height: 47vh;
        }}
  .desginPageSet{
    position: absolute;
    width: 35vw;
    right: 0;
  }
  
  .p-indent{
    text-indent:2em;
    line-height: 1.5;
  }
  .le-space{
    letter-spacing: .1em;
  }
  .le-space-price{
    letter-spacing: .5em;
    text-decoration: none;
    color: var(--text-color);
    font-size: 3rem;
  }
  .le-space-price:hover {
    text-decoration: none;
    color: var(--text-color);
  }
  .le-space-price:active {
    text-decoration: none;
    color: var(--text-color);
  }
  
  .priceMarginSet{
    margin: 8rem 3rem 3rem 5rem;
  }
  .priceMarginSetBus{
    margin: 4rem 3rem 3rem 5rem;
  }
  
  .linkPosSet{
    position: absolute;
    bottom: -4rem;
  }
  .priceHr{
    margin: 2rem 0;
  }
  
  .webProcess{
    margin: 1em auto .5em auto;
    width: 40px;
    height: 40px;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .textProcess{
    font-size: .7em;
    text-align: center;
  
  }
  [data-theme='light'] .w-idea{
    background-image: url("../assets/img/dark-step/w-idea.svg");
  }
  [data-theme='light'] .w-fristDraft{
    background-image: url("../assets/img/dark-step/w-fristDraft.svg");
  }
  [data-theme='light'] .w-doIt{
    background-image: url("../assets/img/dark-step/w-doIt.svg");
  }
  [data-theme='light'] .w-maintain{
    background-image: url("../assets/img/dark-step/w-maintain.svg");
  }
  [data-theme='light'] .b-idea{
    background-image: url("../assets/img/dark-step/b-idea.svg");
  }
  [data-theme='light'] .b-fristDraft{
    background-image: url("../assets/img/dark-step/b-fristDraft.svg");
  }
  [data-theme='light'] .b-doIt{
    background-image: url("../assets/img/dark-step/b-doIt.svg");
  }
  [data-theme='light'] .b-done{
    background-image: url("../assets/img/dark-step/b-done.svg");
  }
  [data-theme='dark'] .w-idea{
    background-image: url("../assets/img/light-step/w-idea.svg");
  }
  [data-theme='dark'] .w-fristDraft{
    background-image: url("../assets/img/light-step/w-fristDraft.svg");
  }
  [data-theme='dark'] .w-doIt{
    background-image: url("../assets/img/light-step/w-doIt.svg");
  }
  [data-theme='dark'] .w-maintain{
    background-image: url("../assets/img/light-step/w-maintain.svg");
  }
  [data-theme='dark'] .b-idea{
    background-image: url("../assets/img/light-step/b-idea.svg");
  }
  [data-theme='dark'] .b-fristDraft{
    background-image: url("../assets/img/light-step/b-fristDraft.svg");
  }
  [data-theme='dark'] .b-doIt{
    background-image: url("../assets/img/light-step/b-doIt.svg");
  }
  [data-theme='dark'] .b-done{
    background-image: url("../assets/img/light-step/b-done.svg");
  }
  .toBusinessDesgin{
    padding:0;margin-top: 4vh;
    width: 100%;
    height: 80vh;
    background-size: cover;
  }
  [data-theme='dark'] .toBusinessDesgin{
    background-image: url('../assets/img/dark-step/toBusiness.svg');
  }
  [data-theme='light'] .toBusinessDesgin{
    background-image: url('../assets/img/light-step/toBusiness.svg');
  }
  [data-theme='dark'] .processBG{
    background-image: url('../assets/img/dark-step/processBG.svg');
  }
  [data-theme='light'] .processBG{
    background-image: url('../assets/img/light-step/processBG.svg');
  }
  [data-theme='dark'] .webDesignBG{
    background-image: url('../assets/img/dark-step/webD-BG.svg');
  }
  [data-theme='light'] .webDesignBG{
    background-image: url('../assets/img/light-step/webD-BG.svg');
  }
  [data-theme='dark'] .businessDesignBG{
    background-image: url('../assets/img/dark-step/BusinessD-BG.svg');
  }
  [data-theme='light'] .businessDesignBG{
    background-image: url('../assets/img/light-step/BusinessD-BG.svg');
  }
  .processBG-Mo{
    background-size: cover;
    height: 65vh;
    width: 100%;
    margin-left: -0.75rem;
    margin-top: -21vh;
    position: absolute;
    z-index: -99;
  }
  .webDesignBG-PC{
    position: absolute;
    background-size: cover;
    height: 101%;
    width: 49%;
    background-repeat: no-repeat;
    bottom:-7em;
  }
  .businessDesignBG-PC{
    position: absolute;
    background-size: cover;
    height: 94%;
    width: 53%;
    background-repeat: no-repeat;
    bottom:-7em;
  }
  .ls-price-pc{
    letter-spacing: 0.5rem;
  }
  .webDesignBG-Mo{
    background-size: cover;
    height:58vh;
    width: 100vw;
    margin-top: -46vh;
    position: absolute;
    background-repeat: no-repeat;
  }
  
  @media (min-width: 416px){
   
  }
  .mAboutTitle{
    writing-mode: vertical-lr;
    margin-top: 122px;
  }
  @media (min-width: 700px){
    .mAboutTitle{
    margin-top: 32vh !important;
    }
    .webDesignBG-Mo{
      width: 70vw;
      margin:-46vh 0 0 20vw;
      }
    .businessDesignBG-Mo{
      height: 50vh !important;
      width: 70vw;
      margin: -86vh auto 0 auto !important;
    }
    .toBusinessDesgin{
      margin-top: -15vh !important;
      height: 98vh !important;
    }
    .homeMobileCont{
      text-align: center !important;
      left: -13vw;
    }
    .imgMoblieBGCover{
      height: 160vh !important;
    }
    .tableLimit{
      max-width: 600px;
      margin: 0 auto !important;
    }
    .priceImgM{
      top:25vh !important;
      width: calc(80% + 1.5em) !important;
    }
    .processBG-Mo{
      height: 80vh !important;
    }
    .workImgSet {
      height: 44vh !important;
  }
  }
  @media (min-width: 1000px){
    .mt-10{
      margin-top:10em
      }
   }
  

   .h-100vh{
     height: calc(100vh + 4.5em);
     overflow: hidden;
   }
  .titleImgSet{
    height: 23vh;
    width: 100%;
    background: black;
    overflow: hidden;
    position: relative;
  }
  .titleImgSetPC{
    height: 23vh;
    background: black;
    overflow: hidden;
    position: relative;
  }
  .imgMask{
    opacity: 0.5;
   width: 100vw;
   object-fit: cover;
   background-repeat: no-repeat;
  }
  .shareTitle{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sharePCImg{
    opacity: 0.5;
    width: 100%;
    height: 25vh;
    object-fit: cover;
    background-repeat: no-repeat;
  }
  .ml-20rem{
    margin-left: 20rem;
  }
  a {
    cursor: pointer;
  }

  .mt5rem{
    margin-top: 4.5rem;
  }

  .shareConterntPadding{
    padding: 2rem;
  }
  .sourceBorderBG{
    border: 1px solid var(--text-color);
    height: 100%;
    width: 100%;
    border-radius: 5px;
    position: absolute;
    top:1em;
    left:1em;
    z-index: -1;
  }
  .sourceBorder{
    border: 1px solid var(--text-color);
    border-radius: 5px;
    background-color: var(--opacity-compared);
  }
  .sourceMadeByImg{
    margin: 10vh auto 1rem auto;
    text-align: center;
  }
  .MadeBy{
    width: 70%;
    margin: 1rem auto 1rem auto;
   line-height: 2.5;
  }
  .MadeByHr{
    margin: 0 auto;
    width: 85%;
  }
  .simillarContent{
    width: 70%;
    margin: 1rem auto 0 auto;
   line-height: 2.5;
  }
  .similarSource{
    padding: .7rem;
    margin-top: 7rem;
    margin-left: -0.75rem;
    border-radius: 5px;
    font-size: 1.2rem;
    letter-spacing: 0.35rem;
    width: 50%;
    text-align: center;
    color: var(--background-color);
    background-color: var(--main-border);
  }

  .scrollDownAddBarTitle{
    position: absolute;
    left: calc(50% - 2.5rem);
    font-size: 1.5rem;
  }
  .scrollDownShow{
    background-color: var(--background-color) !important;
    height: 4.5rem;
  }
  .shareTag{
    position: absolute;
    bottom:1rem;
    right: 1rem;
  }
  .shareBack{
    position: absolute;
    left:1.2rem;
    z-index: 1;
  }
  .shareBack:hover{
    opacity: 0.6;
  }
  
  
  
  .businessDesignBG-Mo{
    min-height: 382px;
    height: 35vh;
    padding: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden !important;
    margin: -70vh auto 0 auto;
  }
  /* webDesign & business */
  /* aboutUS */
  .meb-pic-style{
    border-radius: 50%;
    border:5px solid #2064B4;
    background-color: var(--background-color);
  }
  .meb-pic-img{
    width: 30%;
    min-width: 100px;}
  /* img closer */
  .meb-special-position{
    position: absolute;
      top: 1vh;
      text-align: center;
  }
  /* img closer */
  .aboutUsTitle{
    width: 5em;
    text-align: center;
    padding: 4px 2px;
    border-radius: 5px;
  }
  .autColor{
    background-color: #155E6B;
    color: #FFF;
  }
  .svsColor{
    background-color: #20B47F;
    color: #FFF;
  }
  /* aboutUS */
  /* works */
  /* masonryLayout */
  :root {
    counter-reset: masonry;
  }
  .masonry {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
    grid-auto-rows: 0;
  }
  @media (max-width: 576px){
    .masonry {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
      grid-auto-rows: 0;
    }
  }
  
  
  .masonry-item {
     background-color: #eee;
     border-radius: 5px;
     overflow: hidden;
     cursor: pointer;
  }
  
  .masonry-item,
  .masonry-item img {
     position: relative;
  }
  .masonry-item:hover .masonry-description-layer {
    transition: all .1s ease-in;
    visibility: visible;
    opacity: 1;
  }
  
  .masonry-description-layer{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--opacity-color-hover);
    color: var(--text-color);
    visibility: hidden;
    opacity: 0;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  .masonry-item:hover .imasonry-description {
    transition: all .1s ease-in;
  }
  
  .masonry-description{
    transition: all .1s ease-in;
    font-weight: bolder;
    font-size: 1.5em;
  }
  /*
  .masonry-item:after {
    font-weight: bold;
    background-color: var(--opacity-color);
    content: counter(masonry);
    counter-increment: masonry;
    position: absolute;
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
    color: var(--text-color);
    display: flex;
    justify-content: center; 
    align-items: center;
    transition: all .1s ease-in;
    text-indent:-9999px;
  }
  
  .masonry-item:hover:after {
    font-size: 30px;
    background-color: var(--opacity-color-hover);
    text-indent:unset;}
    */
  /* masonryLayout */
  /* works */
  /* sourceShare */
  
  .triangle{
    border-radius:4px;
  }
  .triangle-rb{
    display: block;
    top: 0;
    bottom: 0;
    width: 25px;
    height: 100%;
    background: var(--main-title);
    -webkit-clip-path: polygon(-100% -100%, 0% 100%, 100% 0);
    clip-path: polygon(-100% -100%, 0% 100%, 100% 0);
  }
  .triangle-lt{
    display: block;
    top: 0;
    bottom: 0;
    left: 25px;
    height: 100%;
    background: var(--main-title);
    -webkit-clip-path: polygon(100% 0,  0 100%, 100% 100%);
    clip-path: polygon(100% 0,  0 100%, 100% 100%);
  }
  
  .img-mask-1{
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
    width: 40%;
    border-color:  transparent transparent transparent #155E6B;
  }
  .img-mask-2{
    right: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
    width: 30%;
    border-color: #155E6B transparent transparent  transparent ;
  }
  .shareHr{
    border: 2px solid #34BB8A;
    border-radius:10px;
    margin: 0.5rem 0;
    opacity: 1;
  }
  .shareBtn{
    background: var(--main-title);
    color: #F7F8F8;
    border: 1px solid grey;
    height: auto;
    border-radius: 0 5px 5px 0;
  }
  .shareSearch input[type=text]{
    border: 1px solid grey;
    padding: .375rem .75rem;
    font-size: 1em;
    vertical-align:middle;
    border-radius: 5px 0 0 5px;
  
  }
  .badge-scrool-x button {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
  }
  
  .badge-scrool-x{
    overflow: auto;
    white-space: nowrap;
  }
  /* sourceShare */
  /*webPrice*/
  .priceTitleBorder{
    border-bottom: 1px solid var(--text-color);
    line-height: 2em;
  }
  .priceTitleBorder-r{
    border-bottom: 1px solid var(--text-color);
    line-height: 2em;
    color: var(--main-border);
    font-weight: bolder;
  }
  .reverseLr{
    border-radius: 0 20px 20px 0;
    padding:1rem 0 1rem 2rem;
  }
  .priceImgM{
    padding: 0 !important;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: calc(90% + 1.5em);
    height: 71vh;
    min-height: 400px;
    bottom: 0;
    right: -3vw;
    top: 38vh;
    overflow: hidden;
  }
  .priceImgPC{
    background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      width: calc(56% + 1.5em);
      height: 71vh;
      min-height: 400px;
      overflow: hidden;
  }
  .priceBoreder{
    border: 2px solid var(--main-border);
    border-radius: 5px;
  }
  [data-theme='dark'] .priceImg{
    background-image: url('../assets/img/dark-step/webP01.svg');
    z-index: -1;
    }
  [data-theme='light'] .priceImg{
    background-image: url('../assets/img/light-step/webP01.svg');
    z-index: -1;
  }
  [data-theme='dark'] .priceImg02{
    background-image: url('../assets/img/dark-step/webP02.svg');
    z-index: -1;
    }
  [data-theme='light'] .priceImg02{
    background-image: url('../assets/img/light-step/webP02.svg');
    z-index: -1;
  }
  [data-theme='dark'] .priceImg03{
    background-image: url('../assets/img/dark-step/webP03.svg');
    z-index: -1;
    }
  [data-theme='light'] .priceImg03{
    background-image: url('../assets/img/light-step/webP03.svg');
    z-index: -1;
  }
  [data-theme='dark'] .priceImg04{
    background-image: url('../assets/img/dark-step/webP04.svg');
    z-index: -1;
    }
  [data-theme='light'] .priceImg04{
    background-image: url('../assets/img/light-step/webP04.svg');
    z-index: -1;
  }
  .priceHeight{
    width:calc(100% + 0.75rem);
    overflow: hidden;
    height: calc(111vh - 4.5rem);
    position: relative;
  }
  /*webPrice*/
  .workImgSet{
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 250px;
    height: 30vh;
  }
  .workImgSetPC{
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 250px;
    height: 28vh;
  }
  
  .workText{
    position: absolute;
    height: 100%; 
    width: 35%;
    background-color: rgba(0, 0, 0, 0.5);
    right: 0;
  }
  
  .workTextPC{
    position: absolute;
    height: 100%; 
    /*width: 35%;*/
    background-color: rgba(0, 0, 0, 0.5);
    right: 0;
    opacity: 0;
  }
  .soureText{
    position: absolute;
    height: 100%; 
    width: 35%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
  }
  /* pcHOME */
  .navHide{
    display: none !important;
  }
  .scrollDown{
    border-right: 2px solid var(--text-color);
    position: absolute;
    right: 17vw;
    height: 54vh;
    top: 7rem;
    z-index: 99;
  }
  .scrollDownText{
    position: absolute;
    bottom: -6rem;
    left: -18px;
    text-align: center;
  }
  .well {
      scroll-snap-type: y mandatory;
      overflow-y: scroll;
      height: 100vh;
      transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
  }
  @media (max-width: 416px){
    .well {display: none;}
  }
  @media (min-width: 415px){
    .well {display:block;}
  }
  
  .top {
      font-size: 80%;
      color: hsla(0, 0%, 100%, .25);
      position: relative;
      top: -.2em;
      cursor: pointer;
  }
  
  .panel {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      scroll-snap-align: start;
      position: relative;
  }
  
  [data-theme='dark'] .panel:nth-child(1) {
    background-image: url('../assets/img/dark-step/homePageBG-PC.svg');
  }
  [data-theme='light'] .panel:nth-child(1) {
    background-image: url('../assets/img/light-step/homePageBG-PC.svg');
  }
  
  [data-theme='dark'] .panelBG01 {
    background-image: url('../assets/img/dark-step/homePageBG-PCbigpanelLine.svg');
  }
  [data-theme='light'] .panelBG01 {
    background-image: url('../assets/img/light-step/homePageBG-PCbigpanelLine.svg');
  }
  [data-theme='dark'] .panelBG02 {
    background-image: url('../assets/img/dark-step/homePageBG-PCsmallpanel.svg');
  }
  [data-theme='light'] .panelBG02 {
    background-image: url('../assets/img/light-step/homePageBG-PCsmallpanel.svg');
  }
  [data-theme='dark'] .panelBG03 {
    background-image: url('../assets/img/dark-step/homePageBG-PCsmallpanelLine.svg');
  }
  [data-theme='light'] .panelBG03 {
    background-image: url('../assets/img/light-step/homePageBG-PCsmallpanelLine.svg');
  }
  [data-theme='dark'] .panelTalk {
    background-image: url('../assets/img/dark-step/homePageBG-PCTalk.svg');
  }
  [data-theme='light'] .panelTalk {
    background-image: url('../assets/img/light-step/homePageBG-PCTalk.svg');
  }
  
  .panelBG{
    background-repeat: no-repeat;
    background-size: 100vh auto;
    background-attachment: fixed;
    background-position: 35vw top;
    height: 100vh;
  }
  
  .panel:nth-child(1) {
    background-repeat: no-repeat;
    background-size: 100vh auto;
    background-position: 35vw top;
    background-attachment: fixed;
    overflow:hidden;
  }
  [data-theme='light'] .homePCBGts{
    background-image: url('../assets/img/light-step/homePCImg-BG.svg');
  }
  [data-theme='dark']  .homePCBGts{
    background-image: url('../assets/img/dark-step/homePCImg-BG.svg');
  }
  .homePCBGts{
    position: absolute;
    top: -4em;
    left: 0;
    width: 100vw;
    height: calc(100vh + 4rem);
    background-size: cover;
    background-repeat: no-repeat;
  }
  @media all and (max-width: 1700px){
  .homePCBGbs{
    display: none;
  }
  .homePCBGte{
    display: none;
  }
  }
  .panel:nth-child(2) {
      padding: 5em;
  }
  .secBorder{
      border-bottom: 1px solid var(--text-color);
    border-radius:5px;
    margin: 5em auto 5em 9%;
    width: 65vw;
    height: 80%;
    position: relative;
  }
  .switchPrice{
    position: absolute;
    right: 1rem;
    top: -1.25rem;
  }
  .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--main-border);
  }
  .nav-pills .nav-link{
    background-color: var(--background-color);
    color: var(--text-color);
  }
  .secPriceBorder{
      border-bottom: 1px solid var(--text-color);
      border-top: 1px solid var(--text-color);
      border-right: 1px solid var(--text-color);
    margin: 5em auto 5em 9%;
    width: 65vw;
    height: 80%;
    position: relative;
    z-index: 1;
  }
  .secBorderLeft{
      border-left: 1px solid var(--text-color);
    border-radius:5px;
    position: absolute;
    top:2.3rem;
    bottom: 0;
  }
  .secPriceBorderLeftTop{
    border-left: 1px solid var(--text-color);
    height: 10%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .secPriceBorderLeftbottom{
    border-left: 1px solid var(--text-color);
    height: 60%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .secBorderRight{
      border-right: 1px solid var(--text-color);
    border-radius:5px;
    position: absolute;
    top:2.3rem;
    right: 0;
    bottom: 0;
  }
  .separator {
    display: flex;
    align-items: center;
    text-align: start;
    color: var(--text-color);
    font-size: 3rem;
  }
  .secPriceTitle{
    font-size: 2.5rem;
    position: absolute;
    margin-top: 7%;
    margin-left: -2rem;
    align-items: center;
    text-align: start;
    color: var(--text-color);
    writing-mode: vertical-lr;
    letter-spacing: 0.5rem;
  }
  .aboutUsSec{
    width: 60vw;
    height: 80%;
    position: relative;
    margin: 4em auto;
  }
  .mebBorder{
    border: 5px solid var(--about-color-blue);
    z-index:1;
  }
  .mebBorderStyle01{
    height: 14px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-green);
    margin-left: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle02{
    top: 21px;
    height: 7px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-green);
    margin-left: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle03{
    top: 60px;
    height: 12px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-blue);
    margin-left: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle04{
    bottom: -3px;
    height: 6px;
    width: calc(100% + 100%);
    background-color: var(--about-color-blue);
    margin-left: -100%;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle01-r{
    top:3px;
    height: 14px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-green);
    margin-right: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle02-r{
    top: 21px;
    height: 7px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-green);
    margin-right: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle03-r{
    top: 60px;
    height: 12px;
    width: calc(100% + 3rem);
    background-color: var(--about-color-blue);
    margin-right: -3rem;
    z-index: -5;
    position: absolute;
  }
  .mebBorderStyle04-r{
    bottom: -3px;
    height: 6px;
    width: calc(100% + 100%);
    background-color: var(--about-color-blue);
    right: -100%;
    z-index: -5;
    position: absolute;
  }
  .height-20vh{
    height: 25vh;
    border-bottom: 7px solid var(--about-color-green);
  }
  .height-40vh{
    height: 45vh;
    border-bottom: 7px solid var(--about-color-three);
  }
  .aboutBorderLeft{
    position: absolute;
    top:2.3rem;
    bottom: 0;
  }
  .aboutBorderRight{
    position: absolute;
    top:2.3rem;
    right: 0;
    bottom: 0;
  }
  .p-relative{
    position: relative;
  }
  .aboutSeparator.aSec1::before,
  .aboutSeparator.aSec1::after {
    content: '';
    border-top: 7px solid var(--about-color-green);
  }
  .aboutSeparator.aSec2::before,
  .aboutSeparator.aSec2::after {
    content: '';
    border-top: 7px solid var(--about-color-three);
  }
  
  
  .aboutSeparator:not(:empty)::before {
    flex: 1;
    margin-right: .75em;
  }
  
  .aboutSeparator:not(:empty)::after {
    flex: 13;
    margin-left: .75em;
  }
  .aboutSeparator {
    display: flex;
    align-items: center;
    text-align: start;
    color: var(--text-color);
    font-size: 3rem;
  }
  .aboutSevMagin{
    margin: 1rem 4rem 1rem 4rem;
  }
  .aboutSevLineHeight{
    line-height: 3.5rem;
  }
  .separator::before,
  .separator::after {
    content: '';
    border-top: 1px solid var(--text-color);
  }
  
  .separator:not(:empty)::before {
    flex: 1;
    margin-right: .75em;
  }
  
  .separator:not(:empty)::after {
    flex: 13;
    margin-left: .75em;
  }
  
  .panel:nth-child(3) {
      padding: 5em;
  }
  
  .panel:nth-child(4) {
       padding: 5em;
  }
  
  .panel:nth-child(5) {
      padding: 5em;
      overflow: hidden;

  }
  .workTitle{
    font-size: 3rem;
    margin-top: -2rem;
    font-weight: bolder;
  }
  .panel:nth-child(6) {
      padding: 5em;
  }
  .panel:nth-child(7) {
      padding: 5em;
  }
  .panel:nth-child(8) {
      padding: 5em;
  }
  /* pcHOME */
  .splide__slide.is-active img{
    height: 30vh !important;
  }
  .splide__slide{
    overflow: hidden;
  }
  .splide__slide:not(.is-active) img{
    opacity: 0.6;
  }
  .splide__slide:not(.is-active) {
    margin-top: 1vh;
    height: 28vh !important;
    background-color: black;
  }
  .workStatsGreen{
    height: 1.5rem;
    width: 1.5rem;
    background-color: #00C850;
    border: 1px solid #fff;
    border-radius: 5px;
  }
  .workStatsGray{
    height: 1.5rem;
    width: 1.5rem;
    background-color: #C7C7C7;
    border: 1px solid #fff;
    border-radius: 5px;
  }
  .worksDottedLine{
    border-top: 1px dotted var(--main-border);
  }
  .textOverflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .scrollDownShowSwitch{
    position: absolute;
    right: .5em;
  }
  .form-check-input:checked{
    background-color: var(--compared);
    border-color: var(--compared);
  }
  [data-theme='dark'] .form-switch .form-check-input{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  }
  [data-theme='light'] .form-switch .form-check-input{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  }

  .form-switch .form-check-input{
    background-color: var(--text-color);
    border-color: var(--text-color);
  }
  .backCircleOutline{
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .backIcon {
    width: 24px;
    height: 24px;
  }
  [data-theme='dark'] .backCircleOutline{
    background-image: url("/assets/img/dark-step/chevron-back-circle-outline.svg");
  }
  [data-theme='dark'] .backIcon{
    background-image: url("/assets/img/dark-step/chevron-back.svg");
  }
  [data-theme='light'] .backCircleOutline{
    background-image: url("/assets/img/light-step/chevron-back-circle-outline.svg");
  }
  [data-theme='light'] .backIcon{
    background-image: url("/assets/img/light-step/chevron-back.svg");
  }
.indexFontSize{
  font-size: 1.5rem;
}
.aboutFontSize{
  font-size: 1.25rem;
}
.indexMarginSet{
  margin: 3rem;
}
@media (max-width: 1590px){
  .indexFontSize{
    font-size: 1.35rem;
  }
  .businessDesignBG-PC{
    height: 90%;
  }
  .aboutFontSize{
    font-size: 1rem;
  }
}
@media (max-width: 1450px){
  .secBorder{
    margin: 4em auto 4em 7%;
  }
  .webDesignBG-PC{
    height: 95%;
  }
  .businessDesignBG-PC{
    height: 85%;
  }
  .priceImgPC{
    width: calc(54% + 1.5em);
  }
  .aboutSevLineHeight{
    line-height: 2.5rem;
  }
}
@media (max-width: 1357px){
  .secBorder{
    margin: 3em auto 3em 3%;
  }
  .webDesignBG-PC{
    height: 90%;
  }
  .businessDesignBG-PC{
    height: 80%;
  }
  .indexMarginSet{
    margin: 2rem;
  }
}
@media (max-width: 1320px){
  .secBorder{
    margin: 3em auto 3em 3%;
    width: 70vw;
  }
  .webDesignBG-PC{
    height: 90%;
  }
  .businessDesignBG-PC{
    height: 75%;
  }
  .indexMarginSet{
    margin: 3rem;
  }
  .priceImgPC{
    width: calc(53% + 1.5em);
  }
}
@media (max-width: 1200px){
  .businessDesignBG-PC{
    height: 70%;
  }
  .webDesignBG-PC{
    height: 85%;
  }
}
@media (max-width: 1220px){
  
  .indexMarginSet{
    margin: 2.5rem;
  }
  .priceImgPC{
    width: calc(52% + 1.5em);
  }
}
@media (max-width: 1130px){
  .secBorder{
    margin: 2em auto 2em 0;
  }
  .indexMarginSet{
    margin: 2.5rem;
  }
  .webDesignBG-PC{
    height: 80%;
  }
  .businessDesignBG-PC{
    height: 65%;
  }
  .priceImgPC{
    width: calc(50% + 1.5em);
  }
  .aboutSevLineHeight{
    line-height: 2rem;
  }
}
@media (max-width: 1040px){
  .secBorder{
    margin: 1.5em auto 1.5em 0;
  }
  .indexMarginSet{
    margin: 2.3rem;
  }
  .webDesignBG-PC{
    height: 75%;
  }
  .priceImgPC{
    width: calc(49% + 1.5em);
  }
}
/*client*/
.client{
  height: 100vh;
  overflow: hidden;
}
.clientBG{
  position: absolute;
  z-index: -1;
  width: 105vw;
  background-size: contain;
  background-repeat: no-repeat;
  height: 83vh;
  bottom: -12rem;
  left: -2rem;
  overflow: hidden;
}
[data-theme='dark'] .clientBG{
  background-image: url("../assets/img/dark-step/clientBG.svg");
}
[data-theme='light'] .clientBG{
  background-image: url("../assets/img/light-step/clientBG.svg");
}

/*client*/
.coustomerCard{
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
  padding: 1rem 1.5rem;
  z-index: 2;
}
.coustomerGray{
 color: #5E5E5E;
}
.progressBar{
  position: relative;
  width: 94%;
  margin: 0.5rem auto;
  border-bottom: 1px solid #777777;

}
.progressBarLine{
  position: absolute;
  
  left: 0;
  margin-top: -1px;
  height: 2px;
  
  z-index: 1;
}
.seeMoreTag{
  position: absolute;
    top: 117px;
    padding: 0.3rem 0.5rem 0.3rem 0.8rem;
    right: 1rem;
    color: #fff;
    font-weight: 700;
    border-bottom-right-radius: 5px;
    width: 85px;
    z-index: 1;
}
.seeMoreTagTr{
  position: absolute;
    left: -1.8rem;
    margin-top: -0.3rem;
    width: 0;
    height: 0;
    border-bottom: 2.1rem solid transparent;
    
}
.navLoginFixBottom{
  position: absolute;
  bottom: 6rem;
}
.coustomerRightModal{
  z-index: 9999;
  width: 25vw;
  height: 100vh;
  min-width: 375px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--background-color);
}
.coustomerAddWrapper{
  height: 65vh;
  position: relative;
}
.coustomerAddScroll{
  position: absolute;
  bottom: 0;
  width: 92%;
}
.coustomerAddDialogue{
  padding: 1rem 0.5rem;
  
}
.coustomerAddDialogueTime{
  align-items: flex-end;
  display: flex;
}
.coustomerEditContentHeight{
  height: 50vh;
}
.coustomerLink{
  float: right;
  margin: auto 0;
}

.coustomerLinkBtnHr{
  margin-top:0.5rem;
  height: 2rem;
  border-left: 1px solid #000;
}