/****************body 공통************************************/
body {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: hidden;
    justify-content: center;
    align-items: center;
}

#viewport {
    width: 95vw;
    height: 100dvh;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    background: white;
    justify-content: center;
    align-items: center;
}

input[type="checkbox"] {
    accent-color: #000;
}

input[type="checkbox"] {
    accent-color: #000;
}

/*******************************헤더 공통**********************************************/
#header {
    position: fixed;
    top: 0;
    opacity: 1;
    background-color: white;
    height: 10dvh;
    width: 100vw;
    display: flex;
    align-items: center;
    z-index: 999;
}

#header .back-and-home {
    display: flex;
    padding-left: 5%;
    width: 90%;
    align-items: center;
}

.back,
.home {
    width: 50%;
}

.back-and-home a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 0.8rem;
}

.home {
    display: flex;
    justify-content: end;
}

.back img {
    width: 40px;
}

.home img {
    width: 30px;
    height: auto;
}

.back {
    margin-top: 3px;
}

.back-text {
    margin-left: 3%;
    font-weight: 800;
    color: #707070;
}

.home-text {
    margin: 0 3% 0% 15%;
    font-weight: 800;
    color: #707070;
    width: 90px;
}

.header-blank {
    height: 9%;
}

/**************section 공통**********************/
#section {
    vertical-align: top;
    width: 100vw;
    height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
}

#header+#section {
    /*position: absolute;*/
    padding-top: 10dvh;
    padding-bottom: 10dvh;
}

#section p {
    font-size: 10pt;
    color: #707070;
    font-weight: 800;
    line-height: 1.8;
}

#section span {
    color: red;
    font-weight: bold;
}

/*************footer 공통**********************************/
#footer {
    position: fixed;
    bottom: 0;
    height: 10dvh;
    width: 100vw;
    background: white;
    border-width: 10px 0px 0px 0px;
    border-color: #707070;
    border-top: 2px #707070 solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.footer-icon {
    width: 90%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-icon a {
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-box {
    width: 30px;
    height: 50px;
    line-height: 50px;
}

.footer-icon img {
    width: 30px;
    height: auto;
}

.footer-icon a p {
    text-decoration: none;
    color: #707070;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: -5px;
    width: 60px;
}

.footer-blank {
    height: 10%;
}

.footer {
    height: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/****************팝업 공통**********************************/
.translucent {
    background-color: #707070;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pop-up,
.pop-up1 {
    width: 300px;
    height: 250px;
    border-radius: 10px;
    background-color: white;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pop-up img,
.pop-up1 img {
    width: 30px;
    height: auto;
    position: relative;
}

.pop-up p {
    font-size: 0.8rem;
    color: #707070;
    width: 90%;
    margin: 10%;
    text-align: center;
    line-height: 1.8;
}

.pop-up1 p {
    font-size: 0.8rem;
    color: #707070;
    line-height: 1.8;
    width: 90%;
    margin-left: 20px;
    text-align: left;
    margin: 3%;
}

.pop-up3 p {
    font-size: 0.8rem;
    color: #707070;
    line-height: 1.8;
    width: 90%;
    margin-left: 20px;
    text-align: left;
    margin: 3%;
}

.pop-up span,
.pop-up1 span {
    color: red;
}

.pop-up-btn {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pop-up button,
.pop-up1 button {
    width: 100px;
    height: 25px;
    cursor: pointer;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    margin: 10%;
    text-align: center;
    line-height: 25px;
    background-color: #000;
    border: #000 1px;
    margin: auto;
    top: 5px;
    left: 0;
    right: 0;
    margin-left: 5px;
    position: relative;
}

.dashed {
    width: 280px;
    height: 230px;
    border-radius: 10px;
    border: #707070 1px dashed;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
}

/*****button 공통***********************************/
.start nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

button {
    width: 250px;
    height: 30px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 10px;
    line-height: 30px;
    margin-bottom: 10px;
    --margin-top: 10px;
}

button:disabled {
    background-color: #707070;
    color: #ffffff;
    font-size: 0.8rem;
}

.start nav .btn2 button {
    background-color: #707070;
}

button:hover {
    background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    background-color: #dfdfdf;
}

button:active {
    position: relative;
    top: 1px;
}

/**********************1-2 login*******************************************************************/
.header {
    display: flex;
    justify-content: center;
}

.header img {
    width: 100%;
    height: 20dvh;
}

.slogan img {
    width: 180px;
}

#section .slogan {
    width: 350px;
    text-align: center;
    margin-top: 40px;
}

#section .slogan p {
    font-weight: bold;
    color: #404040;
}

#section .login-img {
    width: 70px;
    margin-top: 2dvh;
    margin-bottom: 2dvh;
}

#section .id {
    border: 1px solid #707070;
    display: flex;
    border-radius: 20px;
    height: 30px;
    margin-bottom: 5px;
    width: 250px;
    margin-top: 20px;
}

.id img {
    width: 30px;
}

#section .id-search {
    display: flex;
    margin-left: 20px;
}

#section .id-search p {
    margin-left: 10px;
}

.id button {
    background: none;
    margin-top: 2px;
    margin-right: 2px;
}

.id button img {
    width: 20px;
}

.auto-login,
.checkbox-1 {
    display: flex;
    height: 20px;
    align-items: center;
    font-size: 10pt;
    color: #707070;
    font-weight: 800;
}

.theban {
    background-color: #EBE0D5;
    border-radius: 5px;
    padding: 10px;
}

.theban p {
    font-size: 0.6rem;
    color: #707070;
    line-height: 1.1;
}

/************************** 2-0 join/회원이용약관 **********************************************/
#section .join-note p {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #404040;
    text-align: left;
    width: 90vw;
}

#section .join-box {
    width: 90vw;
    border: 1.5px #707070 solid;
    display: flex;
    margin-bottom: 3dvh;
    margin-top: 50px;
}

#section .join-box nav li {
    font-weight: 800;
    font-size: 0.8rem;
    color: #707070;
    padding-bottom: 1px;
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

#section .join-box p {
    width: 100%;
    display: flex;
}

#section .join-box a {
    margin-right: 0;
    margin-left: auto;
    color: #707070;
    font-weight: bold;
}

#section .join-box nav li span {
    color: red;
    font-size: 0.6rem;
    width: 30px;
}

.free img {
    width: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/************************************2-1-join /이메일 인증*************************************************/
#section .join-img {
    width: 200px;
    margin-top: 5dvh;
    margin-bottom: 50px;
}

#section .join {
    margin-bottom: 5dvh;
}

#section .join1 {
    border-bottom: 1px solid #707070;
    width: 90vw;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.join1 label,
.number label,
.main_nav label {
    background-color: #000;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    width: 50px;
    height: 20px;
    margin-right: 0;
    margin-left: auto;
}

#section label p {
    font-size: 0.6rem;
    color: white;
    line-height: 20px;
}

#section .email-choice {
    width: 75px;
    font-size: 8pt;
}

#section .join img {
    width: 30px;
}

#section .number {
    width: 90vw;
    margin-top: 15px;
    border-bottom: #000 1px solid;
    font-size: 10pt;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/**팝업***/
.layerpopup,
#layerpopup,
#layerpopup1,
#layerpopup2 {
    display: none
}

.layerpopup+label,
#layerpopup+label,
#layerpopup1+label,
#layerpopup2+label {
    display: inline-block;
}

#layerpopup+label,
#layerpopup1+label,
#layerpopup2+label {
    display: inline-block;
}

.layer_bg,
.layer_bg1,
#layer_bg,
#layer-bg1 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #707070;
    opacity: 1;
    z-index: 1;
}

.layerpopup:checked+label+.layer_bg {
    display: block;
}

#layerpopup:checked+label+#layer_bg {
    display: block;
}

#layerpopup1:checked+label+#layer_bg {
    display: block;
}

#layerpopup2:checked+label+#layer_bg1 {
    display: block;
}

#layer_bg>#popup {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 200px;
    transform: translate(0%, 50%);
    background: #fff;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}

#layer_bg1>#popup {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 200px;
    transform: translate(0%, 50%);
    background: #fff;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}

/*************************2-2- 공동인증서가 있는 기기에서 다음 순서대로 진행해 주세요 *******************************************************/
#section .register-note p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #404040;
    text-align: left;
    width: 90vw;
    margin-left: 10px;
}

.pig-icon {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.pig-img {
    width: 30%;
}

#section .process {
    width: 100vw;
    margin-bottom: 20px;
    margin-top: 20px;

    line-height: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}



.process img {
    width: 10px;
    height: 20px;
    margin-top: 20px;
    margin-left: 5px;

}



#section .process p {
    line-height: 1.5;
    font-size: 0.8rem;
    width: 85px;
    border: 1px dashed #707070;
    border-radius: 10px;
    padding: 4px;
    margin-left: 5px;
    margin-bottom: 10px;

}


/********************* 2-0-0-company-setup/ 회사 정보 추가************************************************************/
#section .join-text-1 {
    font-weight: bold;
    font-size: 12pt;
    margin-top: 5px;
    color: #707070;
    margin-bottom: 20px;
}

#section .c-note {
    font-size: 0.7rem;
    color: red;
}

.company-info {
    width: 90vw;
    max-height: 61%;
    background-color: #EBE0D5;
    padding: 2%;
    border-radius: 10px;
}

.company-my,
.company-my-1 {
    display: flex;
    font-size: 0.8rem;
    font-weight: bold;
    align-items: center;
}

.company-my .text,
.company-my-1 .text {
    margin-right: 2px;
}

.company-my form,
.company-my-1 form {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: #707070 1px solid;
}

.my-number button {
    width: 30px;
    height: 20px;
    background-color: #707070;
    font-size: 0.7rem;
    border-radius: 3px;
    line-height: 20px;
    padding: 0;
    position: relative;
    top: 4px;
    left: -10px;
}

.input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="month"] {
    background: none;
    border: none;
    font-size: 0.8rem;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #707070;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 100% white inset !important;
}

input::placeholder {
    color: #abb4bd;
}

input::-webkit-input-placeholder {
    color: #abb4bd;
}

input:-ms-input-placeholder {
    color: #abb4bd;
}

.a-search,
.bk-search {
    display: inline-block;
    height: 20px;
    width: 110px;
    border-radius: 3px;
    background-color: #707070;
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 0.7rem;
    font-weight: bold;
}

.bk-search {
    margin-left: 5px;
}

.a-search {
    width: 70px;
    margin-left: auto;
    margin-right: 0;
    padding: 1px;
    position: relative;
    left: -5px
}

#section .bk-number p:nth-child(3),
#section .connection p {
    font-size: 0.5rem;
    color: red;
    text-align: center;
}

.connection {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section .e-choice {
    font-size: 0.7rem;
    width: 70px;
    background-color: #EBE0D5;
}

#section .company-my .start-date {
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    margin: 0px;
    width: 90px;
    height: 30px;
}

.company-my input,
.company-my-1 input {
    height: 20px;
    --width: 100px;
}

/** 삭제
    .my-number .start-date{
    width: 150px;
    height: 30px;
    }
    ***/
.bank-name {
    width: 60px;
    font-size: 0.7rem;
}

.bank-number button {
    margin-top: 10px;
    width: 25px;
    font-size: 1.3rem;
    font-weight: bold;
    height: 25px;
    display: flex;
    margin-left: auto;
    margin-right: 0;
    align-items: center;
    justify-content: center;
    background-color: #707070;
}

.bk-number {
    display: flex;
    --margin-left: 5px;
    margin-right: 5px;
    align-items: center;
}

#section .bk-number p {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-left: 3px;
}

.company-summary {
    width: 100vw;
    height: 40px;
    border: 1px dashed #707070;
    border-radius: 5px;
    display: flex;
    margin-top: 5px;
    justify-content: right;
    padding: 3px;
    font-size: 0.8rem;
}

.company-summary td {
    height: 50px;
    padding-right: 5px;
    text-align: left;
    line-height: 1.5;
}

/**삭제
    .edit{
    background: #707070 ;
    border-radius: 5px;
    color:white;
    text-align: center;
    line-height: 25px;
    padding: 2px;
    text-decoration: none;
    font-size: 0.8rem;
    }
    .company-summary td:nth-child(4){
    text-align: end;
    }
    **/
.summary {
    width: 95vw;
    height: 150px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.middle-button button {
    width: 250px;
    background-color: #707070;
}

.company-info .middle-button {
    margin-left: 200px;
    margin-top: 10px;
    line-height: 20px;
}

.middle-button-1 button {
    width: 120px;
    background-color: #707070;
}

.scrollbar-c {
    width: 100%;
    max-height: 80px;
    overflow: auto;
    margin-bottom: 10px;
}

/*******************2-2-1, 2-2-5  은행 인증서 선택하기 / 은행 추가하기************************************************************/
#section .bank-box {
    width: 90vw;
    height: 60dvh;
    overflow: auto;
    margin-top: 0;
}

#section .bank-box button,
.box {
    width: 80vw;
    height: 10dvh;
    border-radius: 10px;
    border: #777777 1px dashed;
    margin: auto;
    margin-top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    text-align: left;
}

#section .bank-box .box p {
    line-height: 1.5;
    font-size: 0.8rem;
    width: 180px;
    overflow: hidden;
}

#section .bank-box .box .bank-img {
    width: 40px;
    height: auto;
    margin-left: 1%;
}

#section .bank-box .box .bank-img>img {
    width: 30px;
    height: auto;
    margin: 1%;
}

#section .bank-box .box>.bank-info {
    width: 70%;
    height: 50px;
    font-size: 0.7rem;
    line-height: 0.5;
}

#section .bank-box .box .bank-button button {
    width: 40px;
    height: 20px;
    margin-top: 25%;
    background-color: #000;
    border-radius: 3px;
    border: #707070;
    color: white;
    cursor: pointer;
    line-height: 20px;
}

.bank-box::-webkit-scrollbar {
    display: none;
}

.bank-box nav {
    background-color: #EBE0D5;
    text-align: center;
    display: flex;
}

.bank-box nav p {
    margin-top: 20px;
}

.bank-box img {
    width: 30px;
}

/*************************** 2-2-3 call홈텍스 및 은행 거래내역 불러오기*************************************************/
/**삭제
    #section .main-img-2{
    width: 90%;
    height: auto;
    margin-left: -50px;
    }
    #section .call  p{
    margin-top: -50%;
    width: 70%;
    margin-left: 50px;
    font-size: 0.7rem;
    }
    ../
    /*********************2-2-4-call 홈텍스 및 은행 거래내역을 불러오고 있습니다****************************************/
.main {
    width: 100%;
    text-align: center;
}

.main-img-3,
.main-img-4 {
    width: 60vw;
    height: auto;
    margin-top: 40px;
    margin-left: 40px;
}

/**삭제**
    .loading-box {
    position: fixed;
    left: 50%;
    top: 55%;
    z-index: 100;
    transform: translate(-50%, -50%);
    padding: 20px;
    width: 200px;
    text-align: center;
    background: none;
    box-shadow: 0 0px 0 rgba(0, 0, 0, .2);
    }
    .loading-box .circles {
    padding-top: 10px;
    }
    .loading-box .circles i {
    animation: scaleBounce .3s alternate infinite;
    display: inline-block;
    margin: 0 4px;
    width: 10px;
    height: 10px;
    background: #707070;
    border-radius: 50em;
    }
    .loading-box .circles i:nth-child(2) {
    animation-delay: .5s;
    }
    .loading-box .circles i:nth-child(3) {
    animation-delay: .10s;
    }
    **/
.loading-box p {
    margin-top: 20%;
    font-size: 1rem;
    line-height: 1.5;
}

.loading-bar-container {
    width: 300px;
    height: 10px;
    background-color: #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 50px;
}

.loading-bar {
    width: 0;
    height: 100%;
    background-color: black;
}

.percent {
    width: 300px;
}

.percent-number {
    width: 100%;
    display: flex;
}

.percent-number :nth-child(2) {
    margin-right: 0;
    margin-left: auto;
}

.loading-container {
    width: 80%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.loading-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 프로그레스 바 스타일 */
.progress-bar {
    width: 300px;
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

/* 애니메이션 적용된 게이지 */
.progress {
    width: 0;
    height: 100%;
    background: #070707;
    /* OK TAX 브랜드 컬러 적용 */
}

/* 애니메이션 효과 */
@keyframes loading {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.loading-box {
    position: fixed;
    left: 50%;
    top: 55%;
    z-index: 100;
    transform: translate(-50%, -50%);
    padding: 20px;
    width: 200px;
    text-align: center;
    background: none;
    box-shadow: 0 0px 0 rgba(0, 0, 0, .2);
}

.loading-box .circles {
    padding-top: 10px;
}

.loading-box .circles i {
    animation: scaleBounce .3s alternate infinite;
    display: inline-block;
    margin: 0 4px;
    width: 10px;
    height: 10px;
    background: #707070;
    border-radius: 50em;
}

.loading-box .circles i:nth-child(2) {
    animation-delay: .5s;
}

.loading-box .circles i:nth-child(3) {
    animation-delay: .10s;
}

.loading-box p {
    margin-top: 20%;
    font-size: 1rem;
    line-height: 1.5;
}

@keyframes scaleBounce {
    from {
        transform: scale(.3)
    }

    to {
        transform: scale(1.1)
    }
}



/********************** 3-2- join/ 주소검색************************************************************/
#section .title {
    margin-bottom: 20px;
    font-weight: bold;
    margin-left: -250px;
}

/********************** 3-3- join/ 주소검색 결과************************************************************/
#section .s-title {
    margin-bottom: 20px;
    font-weight: bold;
    margin-left: -250px;
    margin-top: 20px;
    color: #777777;
}

#section .result-zone {
    width: 90%;
    height: 80%;
    overflow-y: auto;
}

.result-zone::-webkit-scrollbar {
    display: none;
}

#section .result {
    line-height: 1;
    margin-bottom: 20px;
}

#section .result-zone .line {
    border: 1px solid #909090;
    width: 95%;
    margin-bottom: 10px;
}

/**************************************4-0-bank 연동 가능한 은행을 선택해 주세요***********************************/
#section .bank-text {
    font-size: 0.9rem;
    font-weight: 800;
    color: #707070;
    height: 10dvh;
}

#section .bank-icon {
    display: flex;
    width: 100vw;
    height: 60dvh;
    flex-wrap: wrap;
    margin-top: 0dvh;
    justify-content: center;
    overflow: scroll-y;
    margin-bottom: 0dvh;
}

.bank-icon::-webkit-scrollbar {
    display: none;
}

.bank-icon button {
    background: white;
    cursor: pointer;
    width: 80px;
    height: 80px;
    border: white;
    margin: 0px;
    padding: 0;
    text-align: center;
    line-height: 10px;
}

.bank-icon button img {
    width: 70px;
    height: auto;
}

.bank-icon button.active {
    position: relative;
    top: 1px;
    border: #707070 dashed 1px;
    border-radius: 10px;
}

/*****5-1-id-search 아이디찾기*************************************************************/
#section .id p {
    width: 60px;
    margin-left: 3px;
    margin-top: 3px;
    color: #000
}

#section .btn3 button {
    margin-top: 50px;
}

/********5-2-id-search 아이디 찾기-결과******************************************/
.id-note {
    width: 80%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.id-result {
    width: 80%;
    margin-bottom: 50px;
}

.id-result .result-0 {
    height: 30px;
    border-bottom: 1px solid #707070;
    display: flex;
    margin-top: 10px;
}

.id-result .result-0 p {
    margin-left: 10px;
}

/********5-4-pw-search 비밀번호 찾기******************************************/
.number {
    display: flex;
}

.join {
    margin-top: 30px;
}

/********5-5-pw-search 비밀번호 찾기***********************/
.pw {
    border-bottom: 1px solid #707070;
    display: flex;
    width: 80%;
    margin-top: 20px;
    align-items: center;
}

.pw button,
.masking {
    width: 30px;
    background: none;
    margin-right: 0;
    margin-left: auto;
}

.pw button img {
    width: 25px;
}

.join1 button {
    margin-top: 5px;
}

#section .join1 button img {
    width: 20px;
}

.pw-search {
    width: 250px;
    height: 30px;
    background-color: #000000;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 10px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;
}

.pw p {
    margin-right: 5px;
    width: 80px;
}

/***************6-0-메인화면****************************/
.name-1 {
    width: 50vw;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
    margin-left: 3vw;
    border: #707070 dashed 1px;
}

.name-1 .name-text {
    color: #707070;
    font-size: 0.8rem;
    font-weight: 800;
}

#header .blank {
    width: 15%;
}

#header .how {
    width: 40%;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 10px;
}

.how img {
    width: 25px;
}

#header .setup-img {
    width: 40px;
    height: 35px;
    margin-right: 5%;
    display: inline-block;
}

.welcome {
    display: flex;
}

.welcome-left {
    position: relative;
    left: 10px;
}

.company-name,
.company-name-1 {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
}

.company-name-1 {
    position: relative;
    left: -10px;
}

.welcome img {
    width: 180px;
    position: relative;
    top: -20px;
    z-index: 999;
}

.company-text {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #707070;
}

.company-choice {
    width: 150px;
    height: 25px;
    background: #000 url('../img/arrow.png') no-repeat 95% 50% / 13px auto;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
}

#section .date-end p {
    color: red;
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.5;
}

#section .main-note p {
    line-height: 1.5;
    position: relative;
    text-decoration: underline;
}

#section .main-note span {
    font-size: 0.7rem;
    text-decoration: none;
    line-height: 1.5;
    position: relative;
}

.years {
    text-decoration: underline;
    position: relative;
    margin-top: -20px;
}

.post-it {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    width: 360px;
}

.post-it-1 {
    background: url(../img/post-it2.png) round;
    width: 150px;
    height: 130px;
    text-align: center;
}

.post-it-2 {
    background: url(../img/post-it1.png) round;
    width: 160px;
    height: 140px;
    text-align: center;
    position: relative;
    left: 10px;
}


.post-it-3 {
    background: url(../img/post-it3.png?v=1) round;
    width: 170px;
    height: 140px;
    text-align: center;
    position: relative;
    left: -5px;
    top: 10px;
}

.post-it-4 {
    background: url(../img/post-it4.png?v=1) round;
    width: 170px;
    height: 140px;
    text-align: center;
    position: relative;
    left: 5px;
    top: 20px;
}

#section .post-it span {
    color: #707070;
    font-size: 0.8rem;
}

#section .post-it p :nth-child(2) {
    color: #707070;
    font-size: 0.8rem;
}

#section .post-it-1 :nth-child(2),
#section .post-it-2 :nth-child(2) {
    font-size: 1.5rem;
}

#section .post-it-3 :nth-child(2),
#section .post-it-4 :nth-child(2) {
    font-size: 1.2rem;
}

.post-it p {
    position: relative;
    top: 25px;
}

.post-it-1 p {
    position: relative;
    left: -10px;
}

.post-it-2 p {
    position: relative;
    left: -10px;
}

.post-it-3 p {
    position: relative;
    left: 5px;
    top: 35px;
}

.post-it-4 p {
    position: relative;
    left: -5px;
}



/**********7-0-buy*************************************/
.company {
    width: 100vw;
    height: 10dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.company .my-company {
    width: 50vw;
    height: 20px;
    background: #000;
    border-radius: 6px;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 0.8rem;
    --margin-top: 20px;
}

#section>.calender {
    display: flex;
    align-items: center;
}

input[type="date"] {
    position: relative;
    width: 40%;
    height: 42px;
    padding: 0 5px 0 5px;
    background: url(../img/date.png) no-repeat right 5px center / 16px auto;
    border: 1px dashed #707070;
    border-radius: 10px;
    line-height: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #707070;
}

input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

input[type="date"]::before {
    content: attr(placeholder);
    width: 100%;
}

input[type="date"]:valid::before {
    display: none;
}

input[date-placeholder] ::before {
    color: #bababa;
    font-size: 14px;
    padding-left: 16px;
}

/**조회 버튼***/
.calender .myButton {
    width: 40px;
    background-color: #000;
    color: #fff;
    margin-left: 5px;
    padding: 4px;
    border-radius: 5px;
    font-size: 0.8rem;
    text-align: center;
}

#section .calender button {
    width: 50px;
    background-color: #707070;
    font-size: 0.6rem;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
}

/**액샐 메일로 발송 버튼***/
.deal label,
.deal-detail label {
    width: 100px;
    height: 15px;
    background-color: #000;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 5px;
    text-decoration: none;
    text-align: center;
    line-height: 15px;
    --margin-left: 170px;
    --margin-bottom: 10px;
}

.deal-detail label {
    width: 100px;
    height: 15px;
    font-size: 0.8rem;
}

.deal-no-maching label {
    width: 100px;
    height: 15px;
}

.myButton:hover {
    background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    background-color: #dfdfdf;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.matching-button {
    display: flex;
    align-items: center;
    justify-content: center;
    --margin-top: 5px;
    --border: 1px solid black;
    width: 100%;
    margin-top: 0px;
}

#section .matching-button a,
.matching-button button {
    width: 100px;
    height: 25px;
    font-size: 0.8rem;
    border-radius: 6px;
    line-height: 25px;
    color: white;
    background-color: black;
    text-align: center;
    cursor: pointer;
    margin: 1%;
}

.matching-button button {
    width: 100px;
    background-color: #707070;
}

/**조회 버튼 끝***/
.deal {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.note-date {
    margin-top: 5px;
    color: #909090;
    display: flex;
    font-size: 0.7rem;
    --border: 1px solid black;
}

.note-date1 {
    margin-left: 5px;
}

.scrolltable {
    display: block;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 5%;
    margin-bottom: 10px;
    overflow: auto;
    height: 75%;
}

.scrolltable thead {
    color: #707070;
    font-weight: bold;
    border-bottom: 1px solid #707070;
    display: block;
    height: 8%;
    text-align: center;
    line-height: 30px;
    font-size: 0.7em;
    font-weight: bold;
}

.scrolltable tbody {
    display: block;
    overflow: auto;
    height: 100%;
}

.scrolltable::-webkit-scrollbar {
    display: none;
}

.scrolltable td {
    width: 120px;
    height: 30px;
    vertical-align: middle;
    font-size: 0.7em;
    border-bottom: 1px solid #707070;
    padding-left: 10px;
    padding-right: 10px;
    --border: 1px solid black;
}

.scrolltable th {
    width: 140px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 0.8rem;
    font-weight: bold;
    --border: 1px black solid;
}

.scrolltable tr td:last-child {
    text-align: right;
}

.scrolltable tr td:nth-child(2) {
    text-align: right;
}

.scrolltable td a {
    display: block;
    width: 100px;
    height: 20px;
    background-color: black;
    text-decoration: none;
    color: white;
    border-radius: 7px;
    text-align: center;
    line-height: 20px;
    white-space: nowrap;
    overflow-x: hidden;
}

.total {
    background-color: #EBE0D5;
    margin: 0 auto;
    margin-bottom: 10px;
}

.total td {
    font-weight: bold;
    font-size: 0.9rem;
    width: 120px;
    height: 30px;
    text-align: end;
    --border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}

.total td:nth-child(1) {
    text-align: center;
}

/***********************7-1-withraw-detail/ 8-1- sales-detail******************************************/
#section .company .account-name {
    font-size: 1.2rem;
    color: #707070;
    font-weight: 800;
    margin-top: 5px;
}

.customer-info {
    width: 360px;
    height: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
    font-size: 0.7rem;
    --margin-top: 2%;
}

#section .comparison {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90vw;
    --height: 20%;
    border-radius: 10px;
    border: 1px dashed #707070;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.comparison-1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sum {
    width: 130px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #707070;
    font-size: 1rem;
}

.sum-text {
    margin-top: 2%;
    font-size: 0.8rem;
    color: #707070;
}

.amount {
    margin-top: 5%;
    font-weight: bold;
}

.comparison .sign {
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.comparison .sign>img {
    width: 40px;
    height: 40px;
}

.comparison .difference {
    margin-top: 10%;
    font-weight: bold;
    color: #707070;
    font-size: 1rem;
}

.option-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

/**
    .comparison .note {
    margin-top: 1%;
    color: #909090;
    display: flex;
    font-size: 0.7rem;
    text-align: end;
    }
    **/
.list-head {
    display: flex;
    width: 100vw;
    height: 20px;
    justify-content: center;
    margin-top: 10px;
}

.list-head button {
    width: 50px;
    background-color: #707070;
    font-size: 0.6rem;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
}

.invoice-text {
    width: 180px;
    --background-color: #CFBEBE;
    text-align: center;
}

.invoice-text-1 {
    width: 130px;
    text-align: center;
}

.list-arrow {
    width: 100%;
    display: flex;
    justify-content: right;
    --background-color: #bababa;
    margin-top: 0px;
}

.arrow-down {
    margin-top: 0px;
}

.list-arrow img,
.list-head img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.deal {
    width: 100vw;
    height: 65dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deal-detail {
    width: 95vw;
    height: 65dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deal-1 {
    width: 100%;
    display: flex;
    height: 40dvh;
}

.invoice-list::-webkit-scrollbar {
    display: none;
}

.list::-webkit-scrollbar {
    display: none;
}

.list,
.invoice-list {
    width: 50%;
    --height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
}

.text,
.invoice-text {
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 800;
    color: #707070;
}

.border,
.border-1,
.border-2,
.border-3 {
    border: 1px solid darkgray;
    border-radius: 10px;
    --width: 90%;
    margin-top: 5%;
    background-color: #EBE0D5;
    width: 160px;
    margin-left: 3px;
}

.border-1 {
    background-color: white;
}

.border-3 {
    background-color: #ededed;
}

#section .border-2 {
    background-color: white;
    border: 1px dashed #707070;
    margin-top: auto;
    margin-bottom: 0px;
    padding-bottom: 5px;
}

#section .border-2 p {
    font-size: 0.6rem;
    margin-left: 10px;
    color: red;
}

.list img {
    width: 30px;
    margin-top: 20px;
}

.bank-go a {
    font-size: 0.6rem;
    width: 150px;
    height: 20px;
    background-color: #707070;
    color: white;
    border-radius: 5px;
    padding: 2px;
    margin-left: 10px;
}

#section .option-1 span {
    color: #707070;
}

.border td,
.border-1 td,
.border-3 td {
    width: 85px;
    height: 30px;
    font-size: 0.7rem;
    --border: 1px solid black;
}

#section .border td p,
#section .border-1 td p,
#section .border-3 td p {
    font-size: 0.7rem;
    text-align: left;
    line-height: 1.2;
    margin-left: 5px;
}

#section .border td:nth-child(2),
#section .border-1 td:nth-child(2),
#section .border-3 td:nth-child(2) {
    text-align: right;
    color: #707070;
    font-weight: bold;
    padding-right: 5px;
    width: 120px;
}

#section .border td p:nth-child(1),
#section .border-1 td p:nth-child(1),
#section .border-3 td p:nth-child(1) {
    margin-top: 5px;
    width: 50px;
}

.list input {
    margin-top: 10px;
    margin-left: 40px;
}

.invoice-date {
    display: flex;
}

.border .tax,
.border-1 .tax,
.border-3 .tax {
    font-size: 0.6rem;
    display: flex;
    margin-top: 10px;
    margin-left: 5px;
}

.cash,
.tax-invoice,
.tax-exemption {
    width: 30px;
    height: 15px;
    border-radius: 3px;
    background: darkgrey;
    color: white;
    text-align: center;
    line-height: 15px;
    margin-left: 2px;
}

/**계산서 발행 버튼***/
.list tr a {
    width: 50px;
    display: inline-block;
    background: darkgray;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: bold;
    text-decoration: none;
    color: white;
    margin-left: 5px;
    padding: 3px;
    margin-bottom: 3px;
}

/**계산서 발행 버튼***/
/** 삭제
    .total{
    width: 95%;
    background-color: #EBE0D5;
    margin: 0 auto;
    margin-bottom: 10px;
    }
    .total-text{
    height: 30px;
    width: 90%;
    border-color: #707070;
    border-top: 1.5px darkgray solid;
    border-bottom: 1.5px darkgrey solid;
    display: flex;
    align-items: center;
    margin: auto ;
    font-size: 0.8rem;
    font-weight: bold;
    }
    .total-text .text, .buy-total {
    width: 30%;
    text-align: left;
    }
    .total-text .invoice-total {
    text-align: right;
    width: 40%;
    }
    ***/
.arrow-down,
.arrow-up {
    -webkit-animation: blink 1.3s ease-in-out infinite alternate;
    -moz-animation: blink 1.3s ease-in-out infinite alternate;
    animation: blink 1.3s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*********7-3-3 증빙 내역 상세 페이지 *************************************/
.tax-type {
    display: flex;
    flex-direction: row;
    margin-top: 5%;
    margin-bottom: 3%;
}

.tax-1,
.tax-2,
.tax-3 {
    width: 95vw;
}

.type1,
.type2 {
    width: 30px;
    height: 20px;
    border-radius: 5px;
    background-color: #707070;
    color: white;
    margin-left: 5px;
    text-align: center;
    line-height: 20px;
    font-size: 0.7rem;
}

.type2 {
    background-color: black;
}

.tax-table td,
.tax-table th {
    height: 30px;
    border: 1px solid #707070;
    text-align: center;
    vertical-align: middle;
    font-size: 0.7rem;
    color: #404040;
    padding: 2px;
}

.tax-table th {
    background-color: #EBE0D5;
    color: black;
}

/*****************************9-0-거래처 리스트 ******************************************************/

.customer::-webkit-scrollbar {
    display: none;
}

#section .search {
    width: 80vw;
    height: 25px;
    border-radius: 10px;
    border: #707070 1px solid;
    padding: 5px;
    display: flex;
    margin-bottom: 10px;
    margin-top: 5px;
}

#section .search .search-img {
    margin-right: 0;
    margin-left: auto;
}

#section .search .search-img img {
    width: 20px;
}

.customer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 55dvh;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: auto;
}

#section .customer-summary {
    width: 90vw;
    height: 4dvh;
    border: 1px dashed #707070;
    border-radius: 5px;
    display: flex;
    margin-top: 5px;
    justify-content: left;
    --align-items: center;
    padding: 3px;
    font-size: 0.8rem;
}

#section .customer-summary td {
    --width: 150px;
    height: 4dvh;
    text-align: center;
    line-height: 1.5;
    --border: 1px solid black;
}

#section .customer-summary td:nth-child(1) {
    width: 30vw;
    overflow-x: hidden;
    text-align: center;
    --border: 1px solid red;
}

.customer-summary td a {
    overflow-y: hidden;
}

.customer-summary td:nth-child(2) {
    width: 30vw;
    overflow: hidden;
    text-align: center;
}

#section .customer-summary td:nth-child(3) {
    width: 30vw;
    --border: #000 1px solid;
}

.edit {
    display: block;
    background: black;
    border-radius: 5px;
    width: 30vw;
    height: 15px;
    color: white;
    text-align: center;
    line-height: 15px;
    padding: 2px;
    text-decoration: none;
    font-size: 0.8rem;
    overflow-x: hidden;
}

/***********************************10-1 거래처 등록 및 편집******************************************************************************/
.account-info {
    width: 95%;
    overflow-x: hidden;
    margin-top: 40px;
    height: 50%;
}

.company .note {
    margin-top: 10px;
    width: 80%;
}

.plus-button button {
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #707070;
}

.plus-button {
    margin-left: auto;
    margin-right: 5px;
}

.bank-note {
    margin-top: 10px;
}

/******************11-0-bank-list 은행 거래내역으로 확인하기*********************************/
#section .bank-t {
    width: 80vw;
    height: 35px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #707070;
    line-height: 1.5;
    margin-bottom: 5px;
    text-align: left;
}

.bank-zone {
    width: 90vw;
    height: 70%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.checked-matching-1 {
    margin-top: 10px;
}

.checked-matching {
    margin-top: 5px;
    display: flex;
}

.checked-matching input {
    text-align: center;
    vertical-align: middle;
}

.checked-matching .no-matching,
.checked-matching .matching,
.checked-matching .search-1 {
    width: 150px;
    height: 20px;
    background-color: white;
    border: #707070 1px dashed;
    margin-left: 10px;
    font-size: 0.7rem;
    text-align: left;
    line-height: 20px;
    border-radius: 5px;
    padding-left: 1px;
    color: #707070;
}

.checked-matching .matching {
    border-radius: 5px;
    background-color: #EBE0D5;
    margin-left: 5px;
}

.search-1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#section .search-1 img {
    width: 15px;
    height: auto;
    vertical-align: middle;
}

.search-1 input {
    --border: #000 1px solid;
    text-align: left;
    width: 130px;
}

.bank-zone::-webkit-scrollbar {
    display: none;
}

.toggle,
.toggle1,
.toggle2 {
    display: flex;
    width: 90%;
    height: 35px;
    border: 1px dashed #707070;
    border-radius: 5px;
    margin-top: 5px;
    cursor: pointer;
    padding: 5px;
    background-color: #EBE0D5;
}

.toggle1 {
    background-color: white;
}

#toggle,
#toggle1,
#toggle2 {
    display: none;
}

#section .c_toggle {
    display: none;
}

#section .main_nav {
    display: none;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#section .main_nav a {
    border-radius: 3px;
    background-color: #707070;
    color: white;
    text-align: center;
    font-size: 0.7rem;
    text-decoration: none;
    padding: 1%
}

.toggle:checked+.main_nav {
    display: block;
}

.toggle1:checked+.main_nav {
    display: block;
}

.toggle2:checked+.main_nav {
    display: block;
}

#section .toggle p,
#section .toggle1 p {
    font-size: 0.8rem;
    font-weight: 800;
    color: #707070;
}

#section .toggle p~p,
#section .toggle1 p~p {
    font-size: 0.6rem;
    margin-top: -7px;
}

#section .toggle .bank-d,
#section .toggle1 .bank-d {
    height: 10dvh;
    flex: 1 0 aut0;
}

#section .toggle .memo,
#section .toggle1 .memo {
    flex: 2 0 aut0;
    text-align: center;
    overflow: hidden;
    height: 10dvh;
    margin-left: 3%;
    --width: 20%;
    --border: #000 1px solid;
}

#section .toggle .memo p,
#section .toggle1 .memo P {
    line-height: 1.5;
}

#section .toggle .money,
#section .toggle .money1,
#section .toggle1 .money,
#section .toggle1 .money1 {
    margin-left: auto;
    margin-right: 0;
    text-align: end;
    margin-left: 5%;
    flex: 4 0 auto;
    --width: 40%;
}

#section .toggle .money1 p,
#section .toggle1 .money1 p {
    color: red;
}

#section .toggle .money p,
#section .toggle1 .money p {
    color: blue;
}

/********************************12-0 / 12-1 unsettled 미수금/ 미정산금*************************************************************************************/
#section .bank-t span {
    color: red;
    font-size: 0.7rem;
}

#section .unsettled {
    width: 90vw;
    height: 60dvh;
    display: flex;
    flex-direction: column;
    --justify-content: center;
    align-items: center;
    overflow: auto;
    margin-top: 10px;
}

#section .unsettled .toggle {
    background-color: white;
}

.unsettled::-webkit-scrollbar {
    display: none;
}

#section .unsettled .memo {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

#section .unsettled .memo p {
    height: 24px;
    overflow: hidden;
    font-size: 0.8rem;
}

#section .unsettled .money1 p {
    color: #707070;
}

#section .unsettled .toggle span {
    color: red;
    font-size: 0.8rem;
}


#section .unsettled .toggle1 span {
    color: blue;
    font-size: 0.8rem;
}

/************13-1-setup***************************************/
.setup-zone {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.setup1 {
    width: 100%;
    height: 100px;
    background-color: #EBE0D5;
    border-radius: 10px;
    margin-bottom: 10px;
}

.setup1 a {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    margin-left: 50px;
}

.setup1 img {
    width: 40px;
    height: auto;
    margin-right: 40px;
}

.end {
    display: flex;
    margin-top: 20px;
}

.end a {
    margin-left: 20px;
    border-bottom: 1px solid #707070;
}

/************13-2-setup 고객센터***************************************/
.cs-note {
    margin-left: -200px;
    margin-bottom: 20dvh;
}

.etc {
    width: 100%;
}

.qna {
    width: 90%;
    height: 60px;
    border-bottom: 1px solid #707070;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.qna a {
    display: flex;
    align-items: center;
}

.qna img {
    position: absolute;
    left: 90vw;
    width: 20px;
}

.qna a p {
    width: 120px;
    margin-right: 180px;
}

/***********13-3-setup Q & A***************************************/
.note-choice {
    display: flex;
    margin-left: 5%;
}

.note-choice select {
    margin-left: 5px;
    border-radius: 5px;
}

.question {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qna-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.qna-title p {
    margin-top: 20px;
}

.qna-title input {
    border: 1px solid #707070;
    border-radius: 5px;
    margin-left: 5px;
    width: 80vw;
    height: 20px;
    margin-top: 30px;
}

.body textarea,
.body .answer {
    height: 200px;
    border: 1px solid #707070;
    resize: none;
    border-radius: 5px;
    width: 80vw;
    overflow: auto;
    margin-left: 30px;
}

.body {
    margin: 0 auto;
}

.question button {
    width: 100px;
    margin-right: 5vw;
    margin-left: auto;
    margin-top: 5px;
}

.scrolltable-a {
    width: 100vw;
    height: 200px;
    overflow: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.scrolltable-a::-webkit-scrollbar {
    display: none;
}

.qna-summary {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.qna-text {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #707070;
    width: 95%;
}

.qna-text p:nth-child(1) {
    margin-right: 0;
    width: 70vw;
}

.qna-text p:nth-child(2) {
    margin-right: 0;
    width: 130px;
}

.process-1 {
    font-size: 0.6rem;
    border-radius: 5px;
    background-color: #707070;
    color: white;
    width: 50px;
    padding: 4px;
    text-align: center;
    margin-top: 3px;
}

/***********13-3-setup Q & A***************************************/
.question img {
    width: 20px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.question .datetime {
    text-align: end;
    margin-right: 25px;
}

#section .datetime p {
    font-size: 0.7rem;
}

/**********************13-5-pay******************************************************/
.scrolltable-3 {
    height: 90%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.company1,
.company4 {
    border: 1px dashed #707070;
    border-radius: 10px;
    width: 90vw;
    display: flex;
    margin-top: 10px;
    height: 200px;
    overflow: auto;
}

.company2 {
    display: flex;
    flex-direction: column;
    --justify-content: center;
    align-items: first baseline;
    margin-left: 10px;
}

.company3 {
    display: flex;
    align-items: center;
    justify-content: center;
    --border: #000 1px solid;
}

#section .card {
    height: 100px;
    overflow: auto;
}

#section .company3 button {
    width: 120px;
    margin-left: 10px;
}

.company4 {
    height: 30%;
    overflow: auto;
}

.name-2 {
    margin-top: 5px;
    padding: 1%;
    margin-bottom: 10px;
    border-bottom: 1px solid #707070;
}

.name-text {
    color: #707070;
    font-size: 0.8rem;
    font-weight: 800;
}

.pay-note td {
    font-size: 0.7rem;
    padding-left: 5px;
}

#section .pay-note td p {
    font-size: 0.7rem;
}

.pay-note td:nth-child(1) {
    width: 60px;
}

.pay-note td:nth-child(2) {
    width: 120px;
}

.pay-note span {
    font-size: 0.5rem;
}

#section .pay-note-1 {
    width: 70%;
    text-align: left;
}

.change,
.change1 {
    display: flex;
    align-items: end;
    margin-right: 10px;
    margin-left: auto;
    margin-top: 20px;
}

.change button,
.change1 button {
    width: 70px;
    height: 20px;
    background-color: #707070;
    margin-right: 0;
    margin-left: auto;
    border-radius: 3px;
}

.change1 button {
    width: 100px;
}

#section .change p,
#section .change1 p {
    color: white;
    font-size: 0.7rem;
}

.add {
    margin-top: 10px;
    display: flex;
}

.add button {
    width: 40vw;
    margin-left: 10px;
    margin-right: 10px;
}

.pass-box {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 10px;
}

.pass {
    width: 90vw;
    height: 70px;
    background-color: #EBE0D5;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.pass-note {
    margin-bottom: 10px;
    margin-left: 40px;
    width: 80%;
}

#section .pass-note p {
    font-size: 0.6rem;
}

.pass span {
    font-size: 0.6rem;
}

.refund-note {
    width: 85vw;
}

.refund {
    width: 90vw;
    display: flex;
    font-size: 0.8rem;
    color: #707070;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}

.refund input {
    border: none;
    border-bottom: 1px dashed #707070;
    height: 25px;
    padding: 2px;
}

.tax-info {
    width: 90vw;
    margin-left: 10px;
    background-color: #EBE0D5;
    border-radius: 10px;
    padding: 5px;
}

/**********************13-7-terms******************************************************/
.text-area {
    height: 100%;
    overflow: auto;
}

.terms-table td {
    border: 1px #707070 solid;
}

.next-button {
    text-align: center;
    align-items: center;
}


/*************16-0-0-knowhow**************************************/
.scroll-t {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how-to {
    width: 95%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #EBE0D5;
    margin-top: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}

#section .scroll-t p {
    margin-top: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 400;
    margin-left: 10px;
    width: 300px;
}

.how-to img {
    width: 220px;
    margin-top: 20px;
}

.icon,
.ff,
.icon-1 {
    display: flex;
    align-items: center;
}

.icon,
.ff {
    position: relative;
    top: -20px;
}

.icon img,
.icon-1 img {
    width: 70px;
    height: auto;
}

.ff img {
    width: 100px;
}

.icon :nth-child(2),
.icon-1 :nth-child(2),
.ff :nth-child(2) {
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}

.cc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.ee {
    width: 200px;
}

.ee img {
    border: 1px solid #707070;
    width: 220px;
}

.dd {
    display: flex;
    flex-direction: column;
    --justify-content: center;
}

.point1 {
    width: 220px;
    height: 40px;
    border: 2px dashed red;
    border-radius: 10px;
    position: relative;
    top: -80px;
}

.point2,
.point5 {
    width: 70px;
    height: 17px;
    border: 2px dashed red;
    border-radius: 10px;
    position: relative;
    top: -60px;
}

.point3 {
    width: 30px;
    height: 30px;
    border: 2px dashed red;
    border-radius: 25px;
    position: relative;
    left: 95px;
    top: -62px;
}

#section .dd :nth-child(2) {
    margin-top: -20px;
}

.point4 {
    color: red;
    font-size: 1.5rem;
    position: relative;
    top: -90px;
    left: 5px;
}

.point5 {
    position: relative;
    left: 70px;
    top: -50px;
    width: 70px;
}

.point6,
.point7,
.point7-1 {
    width: 70px;
    height: 17px;
    border: 2px dashed red;
    border-radius: 10px;
    position: relative;
    top: -26px;
    left: 140px;
}

.point7 {
    position: relative;
    width: 210px;
    left: 5px;
    top: -20px;
}

.point7-1 {
    position: relative;
    left: 10px;
    width: 100px;

}

.point8 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 2px dashed red;
    position: relative;
    top: -90px;
    left: -90px;
}

.point9 {
    width: 80px;
    height: 17px;
    border: 2px red dashed;
    border-radius: 5px;
    position: relative;
    top: -70px;
}

.point10 {
    width: 160px;
    height: 17px;
    border: 2px dashed red;
    border-radius: 5px;
    position: relative;
    top: -45px;
    left: 30px;
}

.point11,
.point12 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 2px dashed red;
    position: relative;
    top: -50px;
    left: 50px;
}

.point12 {
    top: -70px;
    left: 70px;
}

#section .landing-note p {
    font-size: 0.8rem;
    line-height: 1.5;
}

#section .landing-note {
    height: 90%;
    overflow: scroll;
}

.landing-note::-webkit-scrollbar {
    display: none;
}

.landing-img {
    width: 200px;
    height: auto;
    margin-bottom: 30px;
}