/* 스플래쉬 pages */
body {
  overflow-x: hidden;
}
.lawReceiptSplash_container {
  width:100%;
  /* max-height:50vw; */

  position: relative;
  height:100%;
}
.law_splash {
  width:100%;
  height:100%;
  /* margin-bottom:150px; */
}
.lawS_Contents {
  outline:blue;
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%, -50%);
}
.law_splash .wrap {
  width: 100%;
  height:30vw;
  position: relative;
}
.splashImg { 
  position:absolute; 
  top:70%;
  left:50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:1s;
}
.splashImg.view {
  top:50%;
  opacity: 1;
}
.law_splash .wrap h1 {
  font-size:160px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
}
.law_splash .text {
  position: relative;
  z-index:2;
}
.law_splash .text p {
  font-size:20px;
  line-height: 1.8;
  text-align:center;
}



/* 진행 1 */
.lawReceipt_container {
  width:100%;
  position: relative;
}
.lawOrder {
  width:auto;
  display:flex; 
  justify-content: center;
  align-items: center;
  gap:8px; 
  /* outline:solid 1px red; */
}
.orderBox {
  display:flex;
  justify-content:center;
  align-items: center;
  flex-wrap:wrap;
}
.orderBox:nth-child(odd) {
  width:10%;
  text-align:center;
}
.orderBox:nth-child(even) {
  width:5%;
  /* outline:solid 1px red; */
}

.orderBox > .num {
  outline:none;
  background-color: var(--color-f8);
  border:solid 1px var(--color-e8);
  color:var(--color-76);
  border-radius: 90%;
  width:42px;
  height:42px;
  font-weight: 600;
  font-size:18px;
  cursor: pointer;
  display:block;

  display:flex;
  justify-content: center;
  align-items: center;
}
.orderBox > p {
  font-size:18px;
  font-weight: 500;
  color:var(--color-76);
  padding-top:12px;
  width:100%;
}
.orderBox > .num.here {
  outline:none;
  border:solid 1px var(--color-main);
  background-color:var(--color-main10);
  color:var(--color-main);
  border-radius: 90%;
  width:42px;
  height:42px;
  font-weight: 600;
  font-size:18px;
}
.orderBox > p.here {
  font-size:18px;
  font-weight: 700;
  color:var(--color-main);
  padding-top:12px;
}

.orderBox > .num.disable {
  background-color: transparent;
  outline: none;
  border: none;
}
.orderBox > .num.disable > div {
  width:34px;
  height:1px;
  background-color:var(--color-e8);
}

.receiptContainer {
  width:100%;
  margin-top:50px;
  margin-bottom:150px;
}
.receiptContainer .rBox, .rBox2 {
  padding:60px 0;  
  border-bottom:solid 1px var(--color-e8);
}
.receiptContainer .lastrBox {
  border-bottom:none;
}


.rBox .title,
.rBox2 .title {
  width:100%;
  margin-bottom: 24px;
  text-align:left;
}
.rBox .title h2,
.rBox2 .title h2 {
  font-size:24px;
  font-weight: 600;
  padding-bottom:6px;
}
.rBox .title p {
  font-size:18px;
  color:var(--color-76);
}
.rChoice_wrap {
  display:flex;
  gap:24px;
  justify-content: space-between;
  align-items: stretch;
}
.rChoice_wrap button {
  width:50%;
  height:auto;
  padding:32px;
  background-color: white;
  border: solid 1px var(--color-e8);
  border-radius: 20px;
  text-align:left;
  cursor: pointer;

  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content: flex-start;
  align-content: flex-start;
}
.rChoice_wrap button h4 {
  font-size:18px;
  font-weight: 600;
}
.rChoice_wrap button p {
  color:var(--color-76);
  font-size:16px;
  word-break: keep-all;
}
.rChoice_wrap button.choice {
  border: solid 1px var(--color-main);
}
.rChoice_wrap button.choice h4,
.rChoice_wrap button.choice p {
  color:var(--color-main);
}

.nextBtn {
  width:100%;
  height:76px;
  border-radius: 20px;
  font-size:20px;
  font-weight: 500;
  background-color: var(--color-main);
  color:white;
  border:solid 1px var(--color-main); 
  cursor: pointer;
  margin-top:92px;
  transition: background-color 0.3s, opacity 0.3s;
}
.nextBtn:not(.disable):hover {
  background-color: #5a4fcf;
  opacity: 0.95;
}
.nextBtn.disable {
  background-color: var(--color-f8);
  border: solid 1px var(--color-e8);
  color:var(--color-76);
  cursor: not-allowed;
  opacity: 0.6;
}


/*  */
/* 서류첨부 */
.perCheckBox {
  width:100%;
  background-color: white;
  border: solid 1px var(--color-e8);
  border-radius:20px;
  padding:32px;
  text-align:left;
}
.perCheckBox div {
  margin-bottom:24px;
}
.perCheckBox div h5 {
  font-size:16px;
  font-weight: 600;
  padding-bottom:2px;
}
.perCheckBox div p {
  font-size:14px;
  line-height: 1.8;
  color:var(--color-76);
}
.perCheckBox nav ul li:not(:first-child) {
  margin-top:6px;
}
.perCheckBox nav ul li {
  position: relative;
  padding-left:12px;
}
.perCheckBox nav ul li::before {
  content:"";
  display:block;
  width:3px;
  height: 3px;
  background-color:var(--color-black);
  position: absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  border-radius: 90%;
}
.perCheck {
  margin-top:12px;
  width:100%;
  background-color:var(--cloor-f9);
  border:solid 1px var(--color-e8);
  padding:32px;
  border-radius: 20px;
  
  display:flex;
  justify-content: flex-start;
  gap:16px;
  align-items: center;
}
#perCheck {
  display:none;
  width:22px;
  height:22px;
}
#perCheck+.checkIcon {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  cursor: pointer;
}
.checkIcon {
  width:22px;
  height:22px;
  background-image: url("../images/check_dis.png");
  background-size:cover;
  background-position:center;
}
.checkText {
  font-size:18px;
  font-weight: 600;
  cursor: pointer;
}
#perCheck:checked+.checkIcon {
  background-image: url("../images/check.png");
}


.lawRForm input.error {
  border:solid 1px var(--color-red);
}
.lawRForm {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.lawRForm .one {
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}
.lawRForm section {
  display:flex;
  gap:24px;
}
.lawRForm section div {
  display:flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  gap:8px;
}
.lawRForm section label {
  font-size:18px;
  font-weight: 500;
  width:100%;
}
.lawRForm section label > span {
  color:var(--color-red);
  padding-left:4px;
}
.lawRForm section input {
  background-color:white;
  border:solid 1px var(--color-e8);
  padding-left:24px;
  font-weight: 500;
  width:100%;
  height:60px;
  border-radius: 12px;
  outline:none;
}

.lawRForm section .left,
.lawRForm section .right {
  width:50%;
}
.rrnum > div {
  display:flex;
  gap:12px;
}
.rrnum > div input {
  width:48%;
}

.lawRForm p {
  color:var(--color-76);
  font-size:16px;
  font-weight: 300;
}

.lawAdd_wrap {
  display:flex;
  flex-wrap:wrap;
}
.lawAdd_wrap > label,
.lawDA_wrap > label  {
  padding-left:8px;
}
.lawAdd_wrap > div {
  display:flex;
  gap:8px;
  width:100%;
}
.lawAdd_wrap > div > div > div,
.lawAdd_wrap > div > div {
  width:100%;
}
.lawAdd_wrap > div #lawAddress1 {
  width:50%;
}
.lawAdd_wrap > div button {
  width:20%;
  background-color:white;
  border:solid 1px var(--color-main);
  font-size:18px;
  font-weight: 700;
  color:var(--color-main);
  border-radius: 12px;
}

.lawRForm .lawDA_wrap {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  gap:8px;
}


/* 약정내용 */
.lawAgreement {
  width:100%;
  background-color:white;
  border:solid 1px var(--color-e8);
  border-radius: 20px;
  /* padding:0 32px 24px 32px; */
}
.lawAgreement section {
  display:flex;
  justify-content: space-between;
  cursor: pointer;
}
.lawAgreement section:first-child {
  padding:24px 32px;
}
.lawAgreement section h4 {
  font-size:18px;
  font-weight: 600;
}
.lawAgreement section img {
  width:24px;
  height:24px;
  transform:rotate(180deg);
  transition:.3s;
}
.lawAgreement section img.view {
  transform:rotate(0);
}
.lA_contents {
  background-color:var(--color-f8);
  padding:0 32px;
  
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  /* display:block; */
  border-radius: 20px;

  max-height:0;
  overflow:hidden;

  transition:.3s;
  margin:auto 32px;
}
.lA_contents > div:first-child {
  padding-top:42px;
}
.lA_contents > div:last-child {
  padding-bottom:42px;
}
.lA_contents div h4 {
  font-weight: 600;
}
.lA_contents div p {
  line-height: 1.8;
  color:var(--color-66);
  font-size:16px;
}

.lawbank_form {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.lawbank_form section {
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  gap:8px;
  width:100%;
}
.lawbank_form > section label {
  font-size:18px;
  font-weight: 500;
}
.lawbank_form section > label span {
  color:var(--color-red);
  padding-left:4px;
}
.lawbank_form section > button,
.lawbank_form section > input {
  width:100%;
  height:60px;
  border-radius: 12px;
  background-color:white;
  border:solid 1px var(--color-e8);
  font-weight: 500;
  color:var(--color-black);
  text-align:left;
  padding-left:24px;
  outline:none;
}
.lawbank_form section:first-child {
  position: relative;
}
.bank_list {
  width:100%;
  display:flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  gap:0;
  align-items: center;

  background-color:var(--color-f8);
  border:solid 1px var(--color-e8);
  border-radius: 20px;
  overflow:hidden;

  position:absolute;
  top:100%;
  transition: .3s;
  z-index:90;

  opacity: 0;
  visibility: hidden;
}
.bank_list li {
  width:20%;
  text-align:center;
  padding:24px 0;
  border:dotted 1px var(--color-e8);
  cursor: pointer;
  transition:.3s;
}
.bank_list li:hover {
  background-color:var(--color-lightMBg);
}
.bank_list li:last-child {
  border:none;
}
.bank_list.view {
  opacity: 1;
  visibility: visible;
}
#lawBank {
  cursor: pointer;
  color:var(--color-black)
}


/* 신분증 */
#lawRFile {
  width:100%;
  border-radius: 12px;
  background-color:white;
  border:solid 1px var(--color-e8);
  font-weight: 500;
  color:var(--color-black);
  text-align:left;
  padding-left:24px;
  outline:none;

  padding:16px 24px;
}
.lawRPaperBox {
  width:100%;
  height:200px;
  border:dotted 2px var(--color-e8);
  border-radius: 12px;
  background-color: #fafbfc;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}
.lawRPaperBox:hover {
  border-color: var(--color-main);
  background-color: #f8f7ff;
}
.lawRPaperBox input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}
.lawRPaperBox input::file-selector-button {
  display:none;
}
.law_comment {
  width:100%;
  padding:32px 24px;
}
.law_comment p:first-of-type {
  font-size:16px;
  width:100%;
}
.law_comment p:last-of-type {
  padding-top:4px;
  font-size:14px;
  font-weight: 500;
  color:var(--color-red);
  width:100%;
}

.lawRPaper_upload {
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  cursor: pointer;
  color: var(--color-76);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lawRPaper_upload img {
  width:34px;
  height:34px;
  opacity: 0.6;
}
.lawRPaper_upload p {
  font-weight: 500;
  padding-top:12px;
  color: var(--color-76);
}
.lawRPaperBox:hover .lawRPaper_upload img {
  opacity: 0.8;
}
.lawRPaperBox:hover .lawRPaper_upload p {
  color: var(--color-main);
}

.paperHis {
  width:100%;
}

.paperHis li {
  width:100%;
}

/* 파일 업로드 상태 표시 스타일 */
.upload-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f7ff 0%, #f0efff 100%);
  border: solid 1px #e8e6ff;
  border-radius: 12px;
  margin-top: 12px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.upload-status .file-name {
  margin: 0;
  color: var(--color-main);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-status .remove-btn {
  background: white;
  color: #ff4444;
  border: solid 1px #ff4444;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.upload-status .remove-btn:hover {
  background: #ff4444;
  color: white;
}

/* 파일이 업로드된 상태의 박스 스타일 */
.lawRPaperBox.has-file {
  border-style: solid;
  border-color: var(--color-main);
  background-color: #f8f7ff;
}

.paperHis li {
  padding:10px 16px;
  background-color:var(--color-f8);
  border-radius: 12px;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  gap:12px;
}
.paperHis .delete {
  padding-right:12px;
  text-decoration: underline;
  color:var(--color-76);
  cursor: pointer;
}

.paperEx {
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  margin-top:42px;
}
.paperEx label {
  width:100%;
  padding-left:8px;
}
.paperEx ul {
  width:100%;
  display:flex;
  justify-content: space-between;
  gap:12px;
  align-items: center;
}
.paperEx ul li {
  width:33%;
  height:130px;
  border-radius: 12px;
  overflow:hidden;
  border:dotted 1px var(--color-e8);
  background-color:white;
  cursor: pointer;
}
.paperEx ul li img {
  width:100%;
  height:100%;
  object-fit: cover;
}


/* 증명서 보기 */
#paper_view {
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  position: fixed;
  z-index:999;

  opacity: 0;
  visibility: hidden;
  transition:.3s;
}
#paper_view.view {
  opacity: 1;
  visibility: visible;
}
#paper_view .closeBtn {
  position: absolute;
  top:10%;
  right:10%;
  cursor: pointer;
}
#paper_view .imgBox {
  width:50%;
  height:auto;
  border-radius: 20px;
  overflow:hidden;

  
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  top:20%;
}
#paper_view .imgBox img {
  width:100%;
  object-fit: cover;
}


/* 동의사항 */
.rBox2 .title h2 span {
  color:var(--color-red);
  padding-left:4px;
}
.check_wrap form div {
  width:100%;
  padding:26px 32px;
  border-radius: 20px;
  background-color:var(--color-f8);

  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap:12px;
}
.check_wrap form div label:last-child {
  font-size:18px;
  font-weight: 600;
  width:80%;
}
.check_wrap form {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
#checkOne1,
#checkOne2,
#checkOne3 {
  display:none;
}
#checkOne1+label,
#checkOne2+label,
#checkOne3+label {
  width:22px;
  height:22px;
  background-image: url("../images/check_dis.png");
  background-size:cover;
  background-position:center;
  cursor: pointer;
}
#checkOne1:checked+label,
#checkOne2:checked+label,
#checkOne3:checked+label {
  background-image: url("../images/check.png");
}
.check_wrap form div label:last-child {
  cursor: pointer;
}

.lawR2Btn_wrap {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:92px;
}
.lawR2Btn_wrap button {
  font-size:20px;
  font-weight: 500;
  line-height: 1.8;
  height:76px;
  width:200px;
  border-radius: 20px;
  background-color:var(--color-f8);
  border: solid 1px var(--color-e8);
  color:var(--color-76);
  transition: all 0.3s ease;
  cursor: pointer;
}
.lawR2Btn_wrap button a {
  color:var(--color-76);
  display: block;
  width: 100%;
  height: 100%;
  line-height: 76px;
  text-decoration: none;
}
.lawR2Btn_wrap button:first-child:not(.disable) {
  background-color: var(--color-main);
  border: solid 1px var(--color-main);
  color: white;
}
.lawR2Btn_wrap button:first-child:not(.disable):hover {
  background-color: #5a4fcf;
  opacity: 0.95;
}
.lawR2Btn_wrap button:first-child:not(.disable) a {
  color: white;
}
.lawR2Btn_wrap button:first-child.disable {
  background-color: var(--color-f8);
  border: solid 1px var(--color-e8);
  color: var(--color-76);
  cursor: not-allowed;
  opacity: 0.6;
}
.lawR2Btn_wrap button:first-child.disable a {
  color: var(--color-76);
  cursor: not-allowed;
}
.lawR2Btn_wrap button.nextLaw2:not(.disable),
.lawR2Btn_wrap button.nextLaw3:not(.disable),
.lawR2Btn_wrap button.nextLaw4:not(.disable) {
  background-color:var(--color-main);
  border: solid 1px var(--color-main);
  color:white;
}
.lawR2Btn_wrap button.nextLaw2:not(.disable):hover,
.lawR2Btn_wrap button.nextLaw3:not(.disable):hover,
.lawR2Btn_wrap button.nextLaw4:not(.disable):hover {
  background-color: #5a4fcf;
  opacity: 0.95;
}
.lawR2Btn_wrap button.disable {
  background-color: var(--color-f8);
  border: solid 1px var(--color-e8);
  color:var(--color-76);
  cursor: not-allowed;
  opacity: 0.6;
}


/*  */
/* 본인인증 */
.lawCerForm {
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  gap:24px;
}
.lawCerForm section {
  width:100%;
}
.lawCerForm .roundTitle8:first-child {
  font-size:18px;
  font-weight: 500;
}
.lawCerForm .roundTitle8:last-child {
  padding-top:8px;
  font-size:16px;
  font-weight: 500;
}

.lawCerForm .roundTitle8:last-child.blue {
  color:var(--color-main);
}
.lawCerForm .roundTitle8:last-child.red {
  color:var(--color-red);
}
.lawCerForm .roundTitle8 span {
  color:var(--color-red);
  padding-left:4px;
}
.lawCerForm section div {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.lawCerForm section div input,
.lawCerForm section div button {
  height:60px;
  border-radius: 12px;
}
.lawCerForm section div input {
  width:80%;
  background-color: white;
  border: solid 1px var(--color-e8);
  padding-left:24px;
  font-weight: 500;
  outline:none;
  color:var(--color-black);
}
.lawCerForm section div input::placeholder{
  font-family: "Pretendard", sans-serif;
}
.lawCel_Btn {
  width:18%;
  height: 60px;

  font-size:16px;
  font-weight: 500;
  border-radius: 12px;
  outline:none;
  cursor: pointer;
}
.lawCel_Btn.disa {
  background-color: var(--color-f8);
  border:solid 1px var(--color-e8);
  color:var(--color-76);
}
.lawCerTel_Btn,
.lawCerNum_Btn {
  background-color: var(--color-main);
  border:solid 1px var(--color-main);
  color:white;
}
.lawCerForm .blue.none,
.lawCerForm .red.none {
  display: none;
}
.lawCerContainer .rBox2:last-child {
  border-bottom:none;
}



/*  */
/* 완료 */
.lawFinishContainer {
  margin-top:110px;
}
.lawFinishBox {
  width:100%;
  height:100%;
  text-align:center;

  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  gap:70px;
}
.lawFinishBox .title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.lawFinishBox .title h1 {
  font-size:42px;
  font-weight: 700;
  width:100%;
}
.lawFinishBox .title p{
  font-size:18px;
  width:auto;
  color:var(--color-main);
  padding:10px 24px;
  border-radius: 90px;
  background-color:var(--color-main10);
  border:solid 1px var(--color-main);
} 
.lawFinishBox .title p span{
  font-weight: 700;
  color:var(--color-main);
} 

.lawFinishImg {
  width:50%;
}
.lawFinishImg img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.lawFinishText {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:32px;
}
.lawFinishText p {
  width:100%;
}
.lawFinishBtn_more {
  width:46%;
  height:76px;
  border-radius: 20px;
  font-size:20px;
  font-weight: 500;
  color:var(--color-main);
  border:solid 1px var(--color-main);
  background-color:white;

  display:flex;
  justify-content: center;
  align-items: center;
  gap:12px;
  cursor: pointer;
  transition:.3s;
}
.lawFinishBtn_more img {
  width:18px;
  height:18px;
}
.lawFinishBtn_more:hover {
  background-color:var(--color-main10);
}