@charset "UTF-8";
/*********************************************************************
    Font.scss
**********************************************************************/
/*글꼴 설정 */
html *, body * {
  --fontSize: 17.2px;
  letter-spacing: 0 !important;
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 900;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Black.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 800;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-ExtraBold.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Bold.subset.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 600;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-SemiBold.subset.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 500;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Medium.subset.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Regular.subset.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 300;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Light.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 200;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-ExtraLight.woff2) format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 100;
  font-display: swap;
  src: url(fonts/PretendardGOV/PretendardGOV-Thin.woff2) format("woff2");
}
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
/*#bdbdbd*/
.findWrap .findArea .topTitle .imgLogo, .loginWrap.newPassword .loginArea .inputArea > dl > dd .btnEye > i, .loginWrap .loginArea > .logo, .wrapper .contentWrap .footer .bottomWrap .bottomLogo > i, .wrapper .contentWrap .contentArea .formArea .btnBottom > button > i, .wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn > i, .wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button > i, .wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.excel > i, .wrapper .header .headerWrap .menuArea .subMenu .btnCircle.ksystem i, .wrapper .header .headerWrap .menuArea .subMenu .btnCircle.blog i, .wrapper .header .headerWrap .menuArea .subMenu .btnCircle.youtube i, .wrapper .header .headerWrap .logo {
  flex-shrink: 0;
  background-image: url(../images/iconCA.svg?25042101);
  background-repeat: no-repeat;
}

.wrapper .contentWrap .contentTop {
  /* CSS gradients */
  background-image: url(../images/bgCATop.png?2024111101), -moz-linear-gradient(top, #181818 0%, #5489D9 100%);
  background-image: url(../images/bgCATop.png?2024111101), -webkit-gradient(linear, left top, right bottom, color-stop(0%, #181818), color-stop(100%, #5489D9));
  background-image: url(../images/bgCATop.png?2024111101), linear-gradient(to right, #181818, #5489D9);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* IE */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="##181818", endColorstr="##5489D9", GradientType=0);
}

.wrapper .contentWrap .contentTop .titleArea {
  background-image: url(../images/bgCloud.png);
  background-repeat: no-repeat;
  background-position: right center;
}

.loginWrap {
  background-image: url(../images/bgLogin.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/*********************************************************************
    Reset.scss
**********************************************************************/
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html *, body * {
  margin: 0;
  padding: 0;
  font-family: "Pretendard GOV", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  letter-spacing: 0 !important;
  box-sizing: border-box;
  outline: none;
  -webkit-text-size-adjust: none;
}

ul, ol, li, dl, dt, dd {
  padding: 0;
  margin: 0;
  list-style: none;
}

p, h1, h2, h3, h4, h5, h6 {
  padding: 0px;
  margin: 0;
  color: #333;
}

img {
  margin: 0;
  border: 0px;
}

p {
  padding: 0px;
  margin: 0;
}

a {
  color: rgb(71.4, 71.4, 71.4);
  text-decoration: none;
}
a:hover {
  color: #217AFF;
}
a:focus-visible {
  outline: 1px solid #333;
}

input[type=checkbox] {
  vertical-align: middle;
  -webkit-appearance: checkbox;
}

input[type=radio] {
  vertical-align: middle;
  -webkit-appearance: radio;
}

button {
  border: 0;
  background-color: transparent;
}
button:focus-visible {
  outline: 1px solid #333;
}

select {
  padding: 0px;
}

textarea {
  resize: none;
}

/*********************************************************************
    _Reset.scss <- 최상위레벨 파일명(파일설명은 //로 표기)
**********************************************************************/
/*********************************************************************
    _Common.scss
**********************************************************************/
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-track:hover {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
*::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.4);
}
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  background-color: transparent;
}
* {
  scrollbar-face-color: transparent;
  scrollbar-track-color: transparent;
  scrollbar-3dlight-color: transparent;
  scrollbar-highlight-color: transparent;
  scrollbar-darkshadow-color: transparent;
  scrollbar-shadow-color: transparent;
  scrollbar-arrow-color: transparent;
}

.loadiongWrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.loadiongWrap .loadingArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 360px;
  height: 260px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(0, 0, 0, 0.07);
}
.loadiongWrap .loadingArea .loadingBox {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -38%);
  transform-style: preserve-3d;
  perspective: 2000px;
  transform: rotateX(-30deg) rotateY(-45deg);
}
.loadiongWrap .loadingArea .loadingBox .holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transform: translate3d(0em, 1.5em, 0.75em);
}
.loadiongWrap .loadingArea .loadingBox .holder:last-child {
  transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 1.5em, 0.75em);
}
.loadiongWrap .loadingArea .loadingBox .holder:first-child {
  transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 1.5em, 0.75em);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(1) .box {
  background-color: #A0BBF1;
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(1) .box:before {
  background-color: rgb(71.1009174312, 123.3669724771, 227.8990825688);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(1) .box:after {
  background-color: rgb(115.5504587156, 155.1834862385, 234.4495412844);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(2) .box {
  background-color: #9EF09B;
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(2) .box:before {
  background-color: rgb(71.9652173913, 226.6956521739, 66.3043478261);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(2) .box:after {
  background-color: rgb(114.9826086957, 233.347826087, 110.652173913);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(3) .box {
  background-color: #F59CCD;
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(3) .box:before {
  background-color: rgb(235.6422018349, 63.3577981651, 158.2110091743);
}
.loadiongWrap .loadingArea .loadingBox .holder:nth-child(3) .box:after {
  background-color: rgb(240.3211009174, 109.6788990826, 181.6055045872);
}
.loadiongWrap .loadingArea .loadingBox .holder .box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  animation: ani-box 8s infinite;
}
.loadiongWrap .loadingArea .loadingBox .holder .box:before, .loadiongWrap .loadingArea .loadingBox .holder .box:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.loadiongWrap .loadingArea .loadingBox .holder .box:before {
  left: 100%;
  bottom: 0;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
}
.loadiongWrap .loadingArea .loadingBox .holder .box:after {
  left: 0;
  bottom: 100%;
  transform: rotateX(90deg);
  transform-origin: 0 100%;
}
.loadiongWrap .loadingArea .txt {
  padding-top: 120px;
  font-weight: 600;
}
@keyframes ani-box {
  8.33% {
    transform: translate3d(-50%, -50%, 0) scaleZ(2);
  }
  16.7% {
    transform: translate3d(-50%, -50%, -1.5em) scaleZ(1);
  }
  25% {
    transform: translate3d(-50%, -100%, -1.5em) scaleY(2);
  }
  33.3% {
    transform: translate3d(-50%, -150%, -1.5em) scaleY(1);
  }
  41.7% {
    transform: translate3d(-100%, -150%, -1.5em) scaleX(2);
  }
  50% {
    transform: translate3d(-150%, -150%, -1.5em) scaleX(1);
  }
  58.3% {
    transform: translate3d(-150%, -150%, 0) scaleZ(2);
  }
  66.7% {
    transform: translate3d(-150%, -150%, 0) scaleZ(1);
  }
  75% {
    transform: translate3d(-150%, -100%, 0) scaleY(2);
  }
  83.3% {
    transform: translate3d(-150%, -50%, 0) scaleY(1);
  }
  91.7% {
    transform: translate3d(-100%, -50%, 0) scaleX(2);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scaleX(1);
  }
}
.loadiongWrap.Show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.msgWrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.msgWrap .msgBox {
  display: flex;
  flex-direction: column;
  width: 400px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(0, 0, 0, 0.07);
}
.msgWrap .msgBox .msgTitle {
  display: flex;
  align-items: center;
  padding: 20px 15px 30px 15px;
}
.msgWrap .msgBox .msgTitle .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: rgba(33, 122, 255, 0.1);
  color: #217AFF;
  font-weight: bold;
}
.msgWrap .msgBox .msgTitle .txtTitle {
  font-size: 17px;
  font-weight: bold;
}
.msgWrap .msgBox .msgContent {
  padding: 0 15px 20px 15px;
}
.msgWrap .msgBox .msgContent .txtDescription {
  font-size: 15px;
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
}
.msgWrap .msgBox .msgContent .txtDescriptionSub {
  font-size: 14px;
  color: #999;
  margin-top: 15px;
  white-space: pre-line;
}
.msgWrap .msgBox .btnWrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgb(229.5, 229.5, 229.5);
  padding: 15px;
}
.msgWrap .msgBox .btnWrap button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  min-width: 80px;
  height: 36px;
  border-radius: 30px;
  background-color: #217AFF;
  color: #fff;
  border: 0;
  font-size: 15px;
  padding: 0 15px;
  transition: all 0.3s;
}
.msgWrap .msgBox .btnWrap button.btnDefault {
  background-color: #217AFF;
  color: #fff;
}
.msgWrap .msgBox .btnWrap button.btnDefault:hover {
  background-color: rgb(7.5, 106.722972973, 255);
  cursor: pointer;
}
.msgWrap .msgBox .btnWrap button.btnDefault:active {
  background-color: rgb(0, 101.1472972973, 252.3);
  cursor: pointer;
}
.msgWrap .msgBox .btnWrap button.btnLine {
  border: 1px solid rgb(229.5, 229.5, 229.5);
  background-color: transparent;
  color: #217AFF;
}
.msgWrap .msgBox .btnWrap button.btnLine:hover {
  background-color: rgba(33, 122, 255, 0.1);
  border-color: rgba(33, 122, 255, 0.1);
  cursor: pointer;
}
.msgWrap .msgBox .btnWrap button.btnLine:active {
  background-color: rgba(33, 122, 255, 0.15);
  border-color: rgba(33, 122, 255, 0.15);
  cursor: pointer;
}
.msgWrap .msgBox.Error .msgTitle .icon {
  background-color: rgba(248, 89, 98, 0.1);
  color: #F85962;
}
.msgWrap .msgBox.Error .btnWrap button.btnDefault {
  background-color: #F85962;
}
.msgWrap .msgBox.Error .btnWrap button.btnDefault:hover {
  background-color: rgb(246.9682080925, 64.5317919075, 74.8583815029);
  cursor: pointer;
}
.msgWrap .msgBox.Error .btnWrap button.btnDefault:active {
  background-color: rgb(245.936416185, 40.063583815, 51.7167630058);
  cursor: pointer;
}
.msgWrap .msgBox.Error .btnWrap button.btnLine {
  color: #F85962;
}
.msgWrap .msgBox.Error .btnWrap button.btnLine:hover {
  background-color: rgba(248, 89, 98, 0.1);
  border-color: rgba(248, 89, 98, 0.1);
}
.msgWrap .msgBox.Error .btnWrap button.btnLine:active {
  background-color: rgba(248, 89, 98, 0.15);
  border-color: rgba(248, 89, 98, 0.15);
}
.msgWrap.customerInfo .msgBox .msgTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px 15px 30px 25px;
}
.msgWrap.customerInfo .msgBox .msgTitle .btnClose {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.msgWrap.customerInfo .msgBox .msgTitle .btnClose::before, .msgWrap.customerInfo .msgBox .msgTitle .btnClose::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1px;
  background-color: #333;
}
.msgWrap.customerInfo .msgBox .msgTitle .btnClose::before {
  transform: rotate(45deg);
}
.msgWrap.customerInfo .msgBox .msgTitle .btnClose::after {
  transform: rotate(135deg);
}
.msgWrap.customerInfo .msgBox .msgTitle .btnClose:hover {
  background-color: rgba(51, 51, 51, 0.15);
  cursor: pointer;
}
.msgWrap.customerInfo .msgBox .msgContent {
  padding: 0 25px 25px;
}
.msgWrap.customerInfo .msgBox .msgContent dl {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
}
.msgWrap.customerInfo .msgBox .msgContent dl > dt {
  flex-shrink: 0;
  width: 110px;
  font-size: 13px;
  color: rgba(51, 51, 51, 0.8);
}
.msgWrap.customerInfo .msgBox .msgContent dl > dd {
  width: 100%;
  font-size: 14px;
}
.msgWrap.customerInfo .msgBox .msgContent dl + dl {
  border-top: 1px solid #cccccc;
}
.msgWrap.Show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toastUI {
  position: fixed;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 20px;
  border-radius: 25px;
  background-color: rgba(51, 51, 51, 0.9);
  transform: translateX(-50%) translateY(150%);
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
  z-index: 1100;
}
.toastUI > p {
  color: #fff;
  font-size: 0.875rem;
}
.toastUI.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}
.toastUI.hide {
  animation: toast-fade-out 0.5s forwards;
}
@keyframes toast-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(150%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes toast-fade-out {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(150%);
  }
}

[data-tooltip] {
  position: relative;
  display: inline-block;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -100%;
  left: 20px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #263238;
  color: #eee;
  font-size: 0.8125rem;
  font-weight: normal;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.35s ease 0.25s;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 1;
}
[data-tooltip].ttMulti:after {
  width: 100vw;
  max-width: 240px;
  white-space: normal;
}
[data-tooltip][class*=ttB]:after {
  transform: translate(-50%, 7px);
  bottom: auto;
  top: 100%;
}
[data-tooltip].ttBL:after {
  transform: translate(-18px, 7px);
}
[data-tooltip].ttBR:after {
  left: auto;
  right: 50%;
  transform: translate(18px, 7px);
}
[data-tooltip].ttTL:after {
  transform: translate(-18px, -7px);
}
[data-tooltip].ttTR:after {
  left: auto;
  right: 50%;
  transform: translate(18px, -7px);
}
[data-tooltip]:hover::after {
  opacity: 1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.wrapper .header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  z-index: 11;
}
.wrapper .header .headerWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  height: 100%;
  min-width: 800px;
}
.wrapper .header .headerWrap .logo {
  width: 210px;
  height: 33px;
  background-position-x: -609px;
}
.wrapper .header .headerWrap .menuArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.wrapper .header .headerWrap .menuArea .mainMenu {
  flex-shrink: 0;
  height: 100%;
}
.wrapper .header .headerWrap .menuArea .mainMenu > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(51, 51, 51, 0.5);
}
.wrapper .header .headerWrap .menuArea .mainMenu > a:hover {
  color: rgba(51, 51, 51, 0.7);
}
.wrapper .header .headerWrap .menuArea .mainMenu.Selected > a {
  color: #333;
}
.wrapper .header .headerWrap .menuArea .subMenu {
  display: flex;
  align-items: center;
  padding-left: 60px;
}
.wrapper .header .headerWrap .menuArea .subMenu a + a {
  margin-left: 20px;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnCircle.youtube i {
  width: 18px;
  height: 13px;
  background-position-x: -333px;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnCircle.blog i {
  width: 18px;
  height: 19px;
  background-position: -371px 2px;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnCircle.ksystem i {
  width: 18px;
  height: 16px;
  background-position-x: -409px;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnCircle:hover {
  border-color: #aaa;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnLogin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  border: 1px solid #217AFF;
  border-radius: 30px;
  color: #217AFF;
  font-size: 14px;
  font-weight: 500;
}
.wrapper .header .headerWrap .menuArea .subMenu .btnLogin:hover {
  background-color: rgba(33, 122, 255, 0.07);
}
.wrapper .contentWrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.wrapper .contentWrap .contentTop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  height: 220px;
}
.wrapper .contentWrap .contentTop .titleArea {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 1200px;
  height: 100%;
}
.wrapper .contentWrap .contentTop .titleArea .title {
  color: #eee;
  font-size: 32px;
  font-weight: 600;
}
.wrapper .contentWrap .contentTop .titleArea .subTitle {
  padding-top: 10px;
  color: rgba(238, 238, 238, 0.7);
  font-size: 18px;
}
.wrapper .contentWrap .contentTop.estimateList {
  height: auto;
  background: none;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  padding: 40px 0 15px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 588px);
  overflow: hidden;
  gap: 8px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  flex-shrink: 0;
  padding: 0 16px;
  border-radius: 30px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.primary {
  background-color: #217AFF;
  color: #fff;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.primary:hover {
  background-color: rgb(0, 95.0135135135, 237);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.line {
  border: 1px solid #217AFF;
  background-color: rgba(33, 122, 255, 0.1);
  color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.line:hover {
  background-color: rgba(33, 122, 255, 0.2);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.green {
  border: 1px solid #00B451;
  background-color: rgba(0, 180, 81, 0.1);
  color: #00B451;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.green:hover {
  background-color: rgba(0, 180, 81, 0.2);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.red {
  border: 1px solid #F85962;
  background-color: rgba(248, 89, 98, 0.1);
  color: #F85962;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.red:hover {
  background-color: rgba(248, 89, 98, 0.2);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.gray {
  border: 1px solid #666;
  background-color: rgba(102, 102, 102, 0.1);
  color: #666;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.gray:hover {
  background-color: rgba(102, 102, 102, 0.2);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.excel {
  border: 1px solid #666;
  background-color: #fff;
  color: #333;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.excel > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background-position-x: -954px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn.excel:hover {
  border-color: #207245;
  color: #207245;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .btnArea .btn:hover {
  cursor: pointer;
  transition: background-color 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea {
  position: absolute;
  top: 10px;
  right: -30px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 640px;
  height: 76px;
  padding: 30px;
  border: 1px solid transparent;
  gap: 8px;
  overflow: hidden;
  transition: height 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding-left: 12px;
  border: 1px solid #666;
  border-radius: 30px;
  overflow: hidden;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .combo {
  flex-shrink: 0;
  height: 100%;
  border: none;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .combo:focus {
  color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .line {
  flex-shrink: 0;
  width: 1px;
  height: 100%;
  margin: 0 10px;
  background-color: #999;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > input[type=text] {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  border: none;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > input[type=text]:focus {
  color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .btnSearch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 100%;
  border-radius: 40px;
  color: #333;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .btnSearch > i {
  position: absolute;
  top: 9px;
  left: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .btnSearch::after {
  position: absolute;
  top: 20px;
  left: 25px;
  content: "";
  width: 2px;
  height: 9px;
  background-color: currentColor;
  transform: rotate(-45deg);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchPrimary > .btnSearch:hover {
  color: #217AFF;
  cursor: pointer;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand {
  display: none;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand + label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #333;
  border-radius: 20px;
  font-size: 0.9375rem;
  transition: 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand + label > i {
  width: 10px;
  height: 10px;
  margin-top: -3px;
  margin-left: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  transition: 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand + label:hover {
  border-color: #217AFF;
  color: #217AFF;
  cursor: pointer;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand + label:hover > i {
  border-color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand:checked + label {
  border-color: #333;
  background-color: #333;
  color: #fff;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchPrimaryArea .searchExpand:checked + label > i {
  margin-top: 4px;
  border-color: #fff;
  transform: rotate(-135deg);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 36px;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 0 12px 0 16px;
  overflow: hidden;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-right: 20px;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dt::after {
  position: absolute;
  right: 10px;
  content: "";
  width: 1px;
  height: 12px;
  background-color: #ccc;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd {
  width: 100%;
  height: 40px;
  /* number 화살표없애기 Chrome, Safari, Edge, Opera */
  /*  number 화살표없애기 Firefox  */
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd > input {
  width: 100%;
  height: 40px;
  font-size: 0.9375rem;
  border: none;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd > input:focus {
  color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd input::-webkit-outer-spin-button,
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd input[type=number] {
  -moz-appearance: textfield;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd.date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control > dd.date input[type=date] {
  width: 115px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchDetailArea .control:nth-child(even) {
  width: 250px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 20px;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  border-radius: 30px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn.primary {
  background-color: #217AFF;
  color: #fff;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn.primary:hover {
  background-color: rgb(0, 95.0135135135, 237);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn.line {
  border: 1px solid #217AFF;
  color: #217AFF;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn.line:hover {
  background-color: rgba(33, 122, 255, 0.1);
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea .searchBottomBtn > .btn:hover {
  cursor: pointer;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea.Expand {
  height: auto;
  border-color: #cccccc;
  background-color: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea.Expand .searchPrimaryArea .searchPrimary .btnSearch {
  display: none;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea.Expand .searchDetailArea, .wrapper .contentWrap .contentTop.estimateList .conditionWrap .searchArea.Expand .searchBottomBtn {
  opacity: 1;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap.relative .searchArea {
  position: relative;
  top: unset;
  right: unset;
  width: 500px;
  height: auto;
  padding: 0;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap.relative .searchArea .searchPrimary > .btnSearch {
  flex-shrink: 0;
  width: 50px;
}
.wrapper .contentWrap .contentTop.estimateList .conditionWrap.relative .btnArea {
  width: auto;
}
.wrapper .contentWrap .contentArea {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.wrapper .contentWrap .contentArea .formArea {
  width: 1200px;
  padding: 0;
}
.wrapper .contentWrap .contentArea .formArea .stepArea {
  width: 100%;
  padding-top: 30px;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  counter-reset: circle 0;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li {
  position: relative;
  padding-left: 38px;
  padding-right: 50px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(51, 51, 51, 0.4);
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li::before {
  content: counter(circle);
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(51, 51, 51, 0.4);
  border-radius: 50%;
  font-size: 16px;
  transform: translateY(-50%);
  counter-increment: circle 1;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 1px;
  background-color: rgba(51, 51, 51, 0.4);
  transform: translateY(-50%);
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li:last-child {
  padding-right: 0;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li:last-child::after {
  display: none;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li.Active {
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .stepArea .stepList > li.Active::before {
  border-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section {
  padding-top: 30px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .title {
  padding-top: 10px;
  padding-bottom: 12px;
  color: #333;
  font-size: 1rem;
  font-weight: 700;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .title .txtBlue {
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .titleArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 12px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .titleArea > .txt {
  width: 100%;
  color: #333;
  font-size: 1rem;
  font-weight: 700;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .titleArea > .right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection > .titleArea > .right .txtLabel {
  padding: 5px 12px;
  border-radius: 3px;
  background-color: rgba(33, 122, 255, 0.1);
  font-size: 14px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio {
  display: flex;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio input[type=radio] {
  display: none;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio input[type=radio]:checked + label {
  border-color: #217AFF;
  background-color: rgba(33, 122, 255, 0.15);
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 36px;
  padding: 0 30px;
  border: 1px solid #666;
  border-radius: 30px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #666;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio label:hover {
  cursor: pointer;
  border-color: #217AFF;
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .tabRadio label ~ label {
  margin-left: 10px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table {
  width: 100%;
  border-collapse: collapse;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table tr.contractItem:hover {
  background-color: #eee;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table th, .wrapper .contentWrap .contentArea .formArea .section .partialSection .table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table th {
  background-color: #F8FAFB;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td {
  font-weight: 500;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox {
  padding: 0;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox textarea.multiLineThree {
  height: 78px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox textarea:hover {
  outline: 1px solid #999;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox textarea:focus {
  outline: 1px solid #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox input {
  width: 100%;
  border: none;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox input.inputInfo {
  height: 50px;
  padding: 0.75rem 1.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox input.inputNumber {
  height: 78px;
  text-align: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox input:hover {
  outline: 1px solid #999;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox input:focus {
  outline: 1px solid #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox select {
  width: 100%;
  height: 78px;
  border: none;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox select:hover {
  outline: 1px solid #999;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox select:focus {
  outline: 1px solid #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea .inputText {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  background-color: transparent;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea .inputNum {
  width: 100%;
  height: 40px;
  background-color: transparent;
  text-align: right;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea > span {
  flex-shrink: 0;
  padding: 0 10px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea .inputText {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  background-color: transparent;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.inputBox .inputTextArea > span {
  flex-shrink: 0;
  padding: 0 10px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.horizontal .inputInfo {
  width: calc(100% - 80px);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.horizontal .btnNumOk {
  width: 80px;
  height: 50px;
  background-color: #333;
  color: #fff;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table td.horizontal .btnNumOk:hover {
  background-color: #111;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .ellipsis {
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .ellipsis > span {
  display: table-cell;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .customerName:hover {
  color: #217AFF;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnAdd {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #217AFF;
  border-radius: 50%;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnAdd::before {
  position: absolute;
  content: "";
  width: 11px;
  height: 2px;
  background-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnAdd::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 11px;
  background-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnAdd:hover {
  background-color: rgba(33, 122, 255, 0.1);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnDel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #FB4242;
  border-radius: 50%;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnDel::before {
  position: absolute;
  content: "";
  width: 11px;
  height: 2px;
  background-color: #FB4242;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .btnDel:hover {
  background-color: rgba(251, 66, 66, 0.1);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .bgGrey {
  background-color: #F8FAFB;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .bgBlue {
  background-color: rgba(33, 122, 255, 0.1);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .bgPoint {
  background-color: #fff7d2;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .bgDis {
  background-color: #F8FAFB;
  color: rgba(51, 51, 51, 0.6);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .disData {
  height: 50px;
  padding: 0.75rem 1.5rem;
  background-color: #F8FAFB;
  color: rgba(51, 51, 51, 0.6);
  font-weight: normal;
  text-align: left;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtLeft {
  text-align: left;
  padding: 0.75rem 1.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtCenter {
  text-align: center;
  padding: 0.75rem 1.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtRight {
  text-align: right;
  padding: 0.75rem 1.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtBold {
  font-weight: bold;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox] {
  display: none;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox]:disabled + i {
  border-color: #eee;
  background-color: #eee;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox]:checked + i {
  position: relative;
  border-color: #217AFF;
  background-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox]:checked + i::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 10px;
  margin-top: -4px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox]:checked:disabled + i {
  border-color: transparent;
  background-color: transparent;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox input[type=checkbox]:checked:disabled + i::before {
  width: 7px;
  height: 12px;
  border-color: #217AFF;
  border-width: 4px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #fff;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .checkbox.Dis input[type=checkbox]:checked:disabled + i::before {
  border-color: #ccc;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup {
  display: inline-flex;
  align-items: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup input[type=radio] {
  display: none;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup input[type=radio]:checked + label > i::before {
  background-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup label > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .radioGroup label > i::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: transparent;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table ~ .table {
  margin-top: 30px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtHelp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtHelp > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin: -10px 0 0 5px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  cursor: help;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .txtHelp > i::after {
  width: 180px;
  text-align: left;
  white-space: pre-line;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea {
  display: inline-flex;
  align-items: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .txtUser {
  display: inline-flex;
  min-width: 90px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea {
  display: flex;
  align-items: center;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background-color: #333;
  color: #fff;
  font-size: 22px;
  line-height: 14px;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button > i {
  display: block;
  width: 12px;
  height: 12px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button.btnPlus > i {
  background-position-x: -447px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button.btnMinus {
  margin-left: 5px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea .btnArea > button.btnMinus > i {
  background-position-x: -479px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table .addUserArea + .addUserArea {
  margin-left: 20px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList th {
  padding: 0.5rem;
  background-color: #EFFAFF;
  font-size: 13px;
  font-weight: 500;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td {
  padding: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td * {
  font-size: 14px;
  font-weight: 500;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #CAD6DC;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn > i {
  width: 16px;
  height: 16px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.delete {
  background-color: #FFE0E0;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.delete i {
  background-position-x: -918px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.delete:hover {
  background-color: rgb(255, 198.5, 198.5);
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.edit i {
  background-position: -537px -2px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.view i {
  background-position: -573px -1px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.rectangle {
  width: auto;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 13px;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn:hover {
  background-color: rgb(171.2840909091, 190.2386363636, 199.7159090909);
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .btn.Dis {
  opacity: 0.2;
  pointer-events: none;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status.blueLine {
  border: 1px solid #217AFF;
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status.blue {
  background-color: rgba(33, 122, 255, 0.1);
  color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status.green {
  background-color: rgba(0, 180, 81, 0.1);
  color: #00B451;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status.red {
  background-color: rgba(248, 89, 98, 0.1);
  color: #F85962;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList td .status.grey {
  background-color: rgba(102, 102, 102, 0.1);
  color: #666;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList .txtCenter {
  text-align: center;
  padding: 0.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList .txtRight {
  text-align: right;
  padding: 0.5rem;
}
.wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList tr:nth-child(4n-1) td, .wrapper .contentWrap .contentArea .formArea .section .partialSection .table.estimateList tr:nth-child(4n) td {
  background-color: #EBEBEC;
}
.wrapper .contentWrap .contentArea .formArea .section .estimateDate {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 30px 0;
}
.wrapper .contentWrap .contentArea .formArea .section .estimateDate > span {
  display: flex;
  margin-right: 10px;
  font-size: 1.0625rem;
}
.wrapper .contentWrap .contentArea .formArea .section .estimateDate > input[type=date] {
  width: 130px;
  height: 30px;
  padding-left: 10px;
  border: 1px solid #cccccc;
  font-size: 0.9375rem;
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 30px 0 20px;
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: rgba(51, 51, 51, 0.4);
  font-size: 15px;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn:hover {
  color: #333;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn.prev > i, .wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn.next > i {
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn.prev i {
  margin-left: 4px;
  transform: rotate(135deg);
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn.next i {
  margin-right: 4px;
  transform: rotate(-45deg);
}
.wrapper .contentWrap .contentArea .formArea .section .pagingArea > .btn.current {
  color: #333;
  background-color: #eee;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 30px 0 60px;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 56px;
  border-radius: 40px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button > .txt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button > .txt::before {
  content: "";
  width: 1px;
  height: 14px;
  margin-right: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button > i {
  width: 8px;
  height: 14px;
  background-position: -510px 0px;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnPrev {
  padding-left: 16px;
  background-color: #333;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnPrev > i {
  position: absolute;
  top: calc(50% - 7px);
  left: 16px;
  transform: rotate(180deg);
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnPrev:hover {
  background-color: rgb(25.5, 25.5, 25.5);
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnNext {
  padding-right: 16px;
  background-color: #217AFF;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnNext > i {
  position: absolute;
  top: calc(50% - 7px);
  right: 16px;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button.btnNext:hover {
  background-color: rgb(0, 95.0135135135, 237);
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button::before {
  content: attr(data-step);
  padding-right: 10px;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button:hover {
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button:disabled {
  background-color: #ddd;
  pointer-events: none;
}
.wrapper .contentWrap .contentArea .formArea .btnBottom > button + button {
  margin-left: 20px;
}
.wrapper .contentWrap .contentArea .fixedRight {
  position: fixed;
  top: 80px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 80px);
}
.wrapper .contentWrap .contentArea .fixedRight > input[type=checkbox] {
  display: none;
}
.wrapper .contentWrap .contentArea .fixedRight > input[type=checkbox]:checked + .btnViewRight > i {
  margin-left: -5px;
  transform: rotate(-135deg);
}
.wrapper .contentWrap .contentArea .fixedRight > input[type=checkbox]:checked ~ .contractSummary {
  margin-right: unset;
}
.wrapper .contentWrap .contentArea .fixedRight .btnViewRight {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 20px 0;
  writing-mode: vertical-lr;
  border-radius: 4px 0 0 4px;
  background-color: #949798;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .fixedRight .btnViewRight > i {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  margin-left: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.wrapper .contentWrap .contentArea .fixedRight .btnViewRight:hover {
  background-color: #666;
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary {
  width: 480px;
  height: 100%;
  margin-right: -480px;
  padding: 30px 20px;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.05);
  transition: margin 0.3s;
  overflow-y: auto;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .title {
  padding-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .title ~ .title {
  margin-top: 30px;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table {
  width: 100%;
  border-collapse: collapse;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table th, .wrapper .contentWrap .contentArea .fixedRight .contractSummary .table td {
  padding: 0.5rem;
  border: 1px solid #ddd;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table th {
  background-color: #F8FAFB;
  text-align: left;
  font-weight: normal;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table td {
  text-align: right;
  font-weight: 500;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table td.inputBox {
  padding: 0;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table td.inputBox .inputInfo {
  width: 100%;
  height: 50px;
  padding: 0.75rem 1.5rem;
  border: none;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table td.inputBox .inputInfo:focus {
  outline: 1px solid #217AFF;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .bgGrey {
  background-color: #F8FAFB;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .txtTotal {
  background-color: rgba(33, 122, 255, 0.1);
  font-weight: bold;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .txtRed {
  color: #F85962;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .txtPromotion {
  font-size: 14px;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .btnPromotion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .btnPromotion:hover {
  cursor: pointer;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .btnPromotion:hover + .proInfoBox {
  display: flex;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox {
  position: absolute;
  bottom: 33px;
  left: 10px;
  display: none;
  flex-direction: column;
  min-width: 360px;
  padding: 16px 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  gap: 10px;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox .proTitle {
  font-size: 14px;
  font-weight: 700;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox > dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox > dd > .txtPrice {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox > dd > .txtPrice .txtLine {
  color: #666;
  font-size: 13px;
  text-decoration: line-through;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox > dd > .txtPrice .txtRed {
  font-weight: 700;
}
.wrapper .contentWrap .contentArea .fixedRight .contractSummary .table .proInfoBox > dd > .txtLabel {
  padding: 4px 8px;
  border-radius: 10px;
  background-color: rgba(248, 89, 98, 0.1);
  color: #F85962;
  font-size: 11px;
  font-weight: 700;
}
.wrapper .contentWrap .footer {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  background-color: #222;
}
.wrapper .contentWrap .footer .bottomWrap {
  display: flex;
  width: 1200px;
  padding: 40px 0;
}
.wrapper .contentWrap .footer .bottomWrap * {
  color: #ddd;
}
.wrapper .contentWrap .footer .bottomWrap .bottomLogo {
  width: 210px;
  flex-shrink: 0;
}
.wrapper .contentWrap .footer .bottomWrap .bottomLogo > i {
  display: block;
  width: 130px;
  height: 25px;
  background-position-x: -183px;
}
.wrapper .contentWrap .footer .bottomWrap .bottomInfo {
  width: 100%;
  font-size: 13px;
}
.wrapper .contentWrap .footer .bottomWrap .bottomNumber {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 200px;
}
.wrapper .contentWrap .footer .bottomWrap .bottomNumber .txtSmall {
  margin-bottom: 4px;
  font-size: 13px;
}
.wrapper .contentWrap .footer .bottomWrap .bottomNumber .txtBig {
  font-size: 24px;
}
.wrapper .contentWrap .estimateWrap {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea {
  position: fixed;
  top: 50%;
  left: 8px;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
  /*.moveArrow {
      @include flex;
      @include size(70px, 30px);
      background-color:$MainColor;
      border-radius: 0 0 8px 8px;

      >i{
          @include size(10px, 10px);
          margin-top: -5px;
          border-right: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(45deg);
      }

      &:hover{
          background-color: darken($MainColor, 5);
          cursor: pointer;
      }
  }*/
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .moveMenu {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-width: 120px;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .moveMenu > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .moveMenu > a:hover {
  color: #000;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .moveMenu > a.On {
  background-color: #eceaea;
  color: #000;
  font-weight: 700;
  transition: all 0.3s;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .btnDownloadPdf {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 8px;
  border: 1px solid #D22323;
  border-radius: 4px;
  background-color: #FBE9E9;
  color: #D22323;
  font-size: 13px;
}
.wrapper .contentWrap .estimateWrap .moveSectionArea .btnDownloadPdf:hover {
  background-color: #F9DCDC;
  cursor: pointer;
}

.loginWrap {
  position: relative;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  isolation: isolate;
}
.loginWrap::after {
  content: "";
  position: absolute;
  background-color: #333;
  z-index: -1;
  inset: 0;
  opacity: 0.4;
}
.loginWrap .loginArea {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 50px 40px;
  border-radius: 10px;
  background-color: #fff;
}
.loginWrap .loginArea > .logo {
  display: block;
  flex-shrink: 0;
  width: 210px;
  height: 33px;
  margin-bottom: 40px;
  background-position-x: -609px;
}
.loginWrap .loginArea .inputArea {
  display: flex;
  flex-direction: column;
}
.loginWrap .loginArea .inputArea > dl {
  position: relative;
  width: 360px;
}
.loginWrap .loginArea .inputArea > dl > dd {
  display: flex;
  flex-direction: column;
}
.loginWrap .loginArea .inputArea > dl > dd .txtName {
  position: absolute;
  top: 11px;
  left: 20px;
  font-weight: normal;
  opacity: 0;
  transition: 0.3s;
}
.loginWrap .loginArea .inputArea > dl > dd > input {
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 1px solid #bbb;
  border-radius: 30px;
}
.loginWrap .loginArea .inputArea > dl > dd > input:focus {
  border-color: #217AFF;
}
.loginWrap .loginArea .inputArea > dl > dd > input:valid + .txtName {
  top: -10px;
  left: 10px;
  padding: 0 10px;
  background-color: #fff;
  font-size: 13px;
  opacity: 1;
}
.loginWrap .loginArea .inputArea > dl + dl {
  margin-top: 20px;
}
.loginWrap .loginArea .inputArea .ulLoginInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 40px;
}
.loginWrap .loginArea .inputArea .ulLoginInfo > li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginWrap .loginArea .inputArea .ulLoginInfo > li input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.loginWrap .loginArea .inputArea .ulLoginInfo > li * {
  font-size: 14px;
  font-weight: 500;
}
.loginWrap .loginArea .inputArea .btnLogin {
  height: 46px;
  border-radius: 30px;
  background-color: #333;
  color: #fff;
}
.loginWrap .loginArea .inputArea .btnLogin:hover {
  background-color: rgb(25.5, 25.5, 25.5);
  cursor: pointer;
}
.loginWrap .loginArea .inputArea .txtError {
  padding-top: 10px;
}
.loginWrap .loginArea .txtError {
  padding-top: 2px;
  padding-left: 12px;
  color: #FB4242;
  font-size: 14px;
}
.loginWrap .loginArea .txtError * {
  font-size: 14px;
}
.loginWrap .txtAdmin {
  padding-top: 10px;
  color: #ccc;
  font-size: 14px;
}
.loginWrap.newPassword {
  background-image: none;
  background-color: #E8ECF3;
}
.loginWrap.newPassword .loginArea {
  gap: 30px;
}
.loginWrap.newPassword .loginArea > .titleArea > .txt {
  padding-bottom: 20px;
  font-size: 24px;
}
.loginWrap.newPassword .loginArea > .titleArea > .subTxt {
  color: rgba(51, 51, 51, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.loginWrap.newPassword .loginArea .inputArea > dl > dd > input {
  padding-right: 44px;
}
.loginWrap.newPassword .loginArea .inputArea > dl > dd .btnEye {
  position: absolute;
  top: 7px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.loginWrap.newPassword .loginArea .inputArea > dl > dd .btnEye > i {
  width: 20px;
  height: 20px;
  background-position-x: -838px;
}
.loginWrap.newPassword .loginArea .inputArea > dl > dd .btnEye.Show i {
  background-position-x: -878px;
}
.loginWrap.newPassword .loginArea .inputArea > dl > dd .txtInfo {
  padding: 10px 0 0 12px;
  color: rgba(51, 51, 51, 0.7);
  font-size: 14px;
}
.loginWrap.newPassword .loginArea .inputArea .btnOk {
  height: 46px;
  margin-top: 30px;
  border-radius: 30px;
  background-color: #333;
  color: #fff;
}
.loginWrap.newPassword .loginArea .inputArea .btnOk:hover {
  background-color: rgb(25.5, 25.5, 25.5);
  cursor: pointer;
}
.loginWrap.newPassword .loginArea .inputArea .btnOk.Dis {
  background-color: #ddd;
  pointer-events: none;
}

.findWrap {
  position: relative;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #E8ECF3;
  overflow: auto;
}
.findWrap .findArea {
  display: flex;
  flex-direction: column;
}
.findWrap .findArea .topTitle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-bottom: 30px;
}
.findWrap .findArea .topTitle .imgLogo {
  display: block;
  flex-shrink: 0;
  width: 210px;
  height: 33px;
  margin-right: 16px;
  background-position-x: -609px;
}
.findWrap .findArea .topTitle .txt {
  padding-top: 2px;
  color: #666;
  font-size: 27px;
  font-weight: 700;
}
.findWrap .findArea .tabArea {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  background-color: #C9D3E4;
}
.findWrap .findArea .tabArea > input[type=radio] {
  display: none;
}
.findWrap .findArea .tabArea > input[type=radio]:checked + label {
  border-radius: 3px;
  background-color: #fff;
  font-weight: 700;
  color: #333;
}
.findWrap .findArea .tabArea > label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 40px;
  color: #666;
}
.findWrap .findArea .tabArea > label:hover {
  cursor: pointer;
}
.findWrap .findArea .formArea .inputArea {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding-top: 40px;
}
.findWrap .findArea .formArea .inputArea > dl {
  position: relative;
  width: 400px;
}
.findWrap .findArea .formArea .inputArea > dl > dd {
  display: flex;
  flex-direction: column;
}
.findWrap .findArea .formArea .inputArea > dl > dd .txtName {
  position: absolute;
  top: 11px;
  left: 20px;
  font-weight: normal;
  opacity: 0;
  transition: 0.3s;
}
.findWrap .findArea .formArea .inputArea > dl > dd > input {
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: none;
  border-bottom: 1px solid #bbb;
  background-color: transparent;
}
.findWrap .findArea .formArea .inputArea > dl > dd > input:focus {
  border-color: #217AFF;
}
.findWrap .findArea .formArea .inputArea > dl > dd > input:valid + .txtName {
  top: -10px;
  left: 10px;
  padding: 0 10px;
  background-color: #E8ECF3;
  font-size: 13px;
  color: #666;
  opacity: 1;
}
.findWrap .findArea .formArea .inputArea > dl + dl {
  margin-top: 20px;
}
.findWrap .findArea .formArea .inputArea .ulLoginInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 10px 10px;
}
.findWrap .findArea .formArea .inputArea .ulLoginInfo > li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.findWrap .findArea .formArea .inputArea .ulLoginInfo > li input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.findWrap .findArea .formArea .inputArea .ulLoginInfo > li * {
  font-size: 14px;
  font-weight: 500;
}
.findWrap .findArea .formArea .inputArea .btnLogin {
  height: 46px;
  border-radius: 30px;
  background-color: #333;
  color: #fff;
}
.findWrap .findArea .formArea .inputArea .txtError {
  padding-top: 4px;
}
.findWrap .findArea .formArea .txtError {
  padding-top: 2px;
  padding-left: 20px;
  padding-bottom: 10px;
  color: #FB4242;
  font-size: 14px;
}
.findWrap .findArea .formArea .txtError * {
  font-size: 14px;
}
.findWrap .findArea .formArea .btnArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
}
.findWrap .findArea .formArea .btnArea > button {
  width: 195px;
  height: 46px;
  border-radius: 30px;
}
.findWrap .findArea .formArea .btnArea > button.btnLine {
  border: 1px solid #aaa;
}
.findWrap .findArea .formArea .btnArea > button.btnLine:hover {
  border-color: #333;
}
.findWrap .findArea .formArea .btnArea > button.btnDefault {
  background-color: #333;
  color: #fff;
}
.findWrap .findArea .formArea .btnArea > button.btnDefault:hover {
  background-color: rgb(25.5, 25.5, 25.5);
}