@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@font-face {
    font-family: 'SCoreDream';
    font-weight: 100; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 200; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 300; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 400; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 500; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 600; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 700; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 800; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 900; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff');
    font-display: swap;
}
/* ¸íÇ°»ó´ã Äü pop ¸®´º¾ó 230717 */
.wrap{background: linear-gradient(122deg, rgba(26,162,215,1) 0%, rgba(8,140,241,1) 100%);  }
.container{padding: 95px 60px 60px; margin: 0 auto;max-width:790px;}
.wrap .top{position: relative; padding-top: 100px; padding-left: 40px; height: 290px; background: url(https://img.self-tax.kr/selfTax/rending/luxury_bg.png) no-repeat ; background-position: calc(100% - 50px) bottom;}
.wrap .top h1{margin-bottom: 30px; font-size: 36px; color: #fff; font-family: 'SCoreDream';}
.wrap .top p{color: #fff; font-size: 20px; line-height:1.4; font-family: 'Spoqa Han Sans';}

.wrap .inner{padding: 50px 40px 70px ; background-color: #fff; border-radius: 50px 0 50px 0 ; overflow: hidden;}
.wrap .inner .input_wrap{margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 20px; }
.wrap .inner .input_wrap > div{position:relative; display:flex; width: calc(50% - 10px);}
.wrap .inner .input_wrap > div.full{width:100%;}
.wrap .inner .input_wrap .label{position:absolute; left :20px; top:50%; transform:translateY(-50%);background-color:#fff; transition:all 0.4s;}
.wrap .inner .input_wrap  > div textarea + .label{ top:20px;}

.wrap .inner .input_wrap div > input, 
.wrap .inner .input_wrap div > select{position:relative; z-index:1; padding: 0 20px; width: 100%; height: 50px; border:1px solid #a1acb8; border-radius: 3px; cursor:pointer; }
.wrap .inner .input_wrap div > select{background: url(https://img.self-tax.kr/selfTax/rending/select_bg.png) no-repeat; background-position: calc(100% - 20px) center;}
.wrap .inner .input_wrap div .checks_wrap{display:flex; align-items:center; gap:10px; margin-left:15px; width:45%;}
.wrap .inner .input_wrap div > input:focus + label,
.wrap .inner .input_wrap div > select:focus + label{ z-index:2; top:0; left:10px;}
.wrap .inner .input_wrap div > textarea:focus + label{ z-index:2; top:0; left:10px;}

.wrap .inner .input_wrap .label.on{ z-index:2; top:0; left:10px;}

.wrap .inner h2{padding: 14px 0 ; border-block: 1px solid #d0d5db; font-size: 18px; color: #3dadcf; font-family: 'Spoqa Han Sans';}
.wrap .inner .li_txt{padding-left:20px; position:relative; margin:20px 0; color:#e7890f; font-size:16px;font-family: 'SCoreDream'; word-break:keep-all;}
.wrap .inner .li_txt::before{position:absolute; left:0; top:0; color:#e7890f; font-size:16px; font-family: 'SCoreDream'; content:'\203B';}
.wrap .inner ul{margin-bottom:30px; height: 155px; display: flex; flex-wrap: wrap; flex-direction: column; row-gap: 10px;}
.wrap .inner ul li{display: flex; gap: 10px; align-items: center; width: 60%;}
.wrap .inner ul li > label{font-size: 16px; color: #2e2e2e; cursor: pointer;}


.wrap .inner textarea{padding: 15px 20px; width: 100%; height: 120px; border: 1px solid #a1acb8; border-radius: 3px;  cursor:pointer;}

.wrap .inner .agree_chk{display:flex; justify-content:space-between; margin-top: 26px;}

.wrap .inner .agree_chk p {margin-bottom: 5px; display: flex; align-items: center;}
.wrap .inner .agree_chk p > label{padding-left: 10px; font-size: 18px;  font-weight: bold; color:#515151; letter-spacing: -1.5px; font-family: 'Spoqa Han Sans';}
.wrap .inner .agree_chk p > label.on{color:#1391f2;}


.wrap .inner .agree_chk .etc_txt{padding-left: 38px; font-size: 16px; color: #a5aab0;  letter-spacing: -1.5px;  font-family: 'Spoqa Han Sans';}
.wrap .inner .agree_chk > button{display:flex;align-items:center; justify-content:center; width:185px; font-size:16px; color:#fff; border-radius:3px; background-color:#a1acb8;}

.wrap .inner .btn_modi{margin: 70px auto 0; display: block; width: 260px; height: 60px; font-size: 22px; text-align: center; color: #fff; line-height: 60px; background-color: #00aad0; border-radius: 7px;}
.wrap .inner .btn_modi:disabled{background-color:#ddd;}



/*¿¬±¸¼Ò*/
.wrap.lab .inner ul{height:122px;}


/*########## üũ¹Ú½º ##########*/
/* üũ¹Ú½º - È­»ìÇ¥¸ð¼Ç */
input[type='checkbox']{-webkit-appearance:checkbox;}
.checks {position: relative; height: 23px;}
.checks input[type="checkbox"] {  /* ½ÇÁ¦ üũ¹Ú½º´Â È­¸é¿¡¼­ ¼û±è */  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip:rect(0,0,0,0);  border: 0;}
.checks input[type="checkbox"] + label {  display: inline-block; padding-left: 23px; cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;}
.checks input[type="checkbox"] + label:before {  /* °¡Â¥ üũ¹Ú½º */
  position: absolute;  left: 0;  top: 0; 
  opacity:0.6;
  content: ' ';  display: inline-block;
  width: 21px;  /* üũ¹Ú½ºÀÇ ³Êºñ¸¦ ÁöÁ¤ */
  height: 21px;  /* üũ¹Ú½ºÀÇ ³ôÀ̸¦ ÁöÁ¤ */
  line-height: 21px; /* ¼¼·ÎÁ¤·ÄÀ» À§ÇØ ³ôÀÌ°ª°ú ÀÏÄ¡ */
 text-align: center;   vertical-align: middle;  background: #fafafa;  border: 1px solid #a1acb8;  border-radius : 3px; -webkit-transition: all .12s; -o-transition: all .12s; transition: all .12s;
}
.checks input[type="checkbox"]:checked + label:before {  position: absolute;  content: "";  width: 10px;  top: -5px;  left: 5px;  border-radius: 0;  opacity:1;   background: transparent;  border-color:transparent #a1acb8 #a1acb8 transparent;  border-top-color:transparent;  border-left-color:transparent;  -ms-transform:rotate(45deg);  -webkit-transform:rotate(45deg);  transform:rotate(45deg);}


/* checkbox */

.checkbox {display: inline-block; height: 26px; width: 26px;overflow:hidden;}
.checkbox label {display: block;  position: relative; width:100% !important; height:100%; border: 1px solid #c8cccf; border-radius:100%;  background-color:#fff;}
.checkbox label:after {
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 2px solid #c8cccf;
  border-top: 2px solid #c8cccf;
  content: '';
  display: block;
  height: 11px;
  left: 5px;
  position: absolute;
  top: 12px;
  width: 6px;
}
.checkbox input, .checkbox-alt input {
  display: none;
}
.checkbox input:checked + label{background-color:transparent; border-color:#1391f2;}
.checkbox input:checked + label:after, .checkbox-alt input:checked + label:after {
  -webkit-animation: check 0.8s;
  -moz-animation: check 0.8s;
  -o-animation: check 0.8s;
  animation: check 0.8s;
  border-color: #1391f2;
}
.checkbox.checkbox-alt label:hover:after, .checkbox-alt.checkbox-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.checkbox.checkbox-alt input:checked + label:after, .checkbox-alt.checkbox-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}


@keyframes check {
    0% {
        height: 0;
        width: 0;
    }

    25% {
        height: 0;
        width: 6px;
    }

    50% {
        height: 11px;
        width: 6px;
    }
}



.pop_up{display:none; z-index:10; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); max-width:670px; width:96%; background-color:#fff;box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.2); }
.pop_up .inner{padding:50px 40px 30px; border:1px solid #cfcfcf; border-bottom:none;} 
.pop_up .btn_closed{position:absolute; right:40px; top:22px;width:22px; height:22px; background:url(https://img.self-tax.kr/selfTax/rending/pop_closed.png) no-repeat;}
.pop_up .inner h1 {margin-bottom:30px; font-size:24px;  font-family: 'SCoreDream'; color:#3f3f3f;}
.pop_up .inner .cont{padding: 40px 30px;/* max-height:500px; */background-color:#f8f8f8;}
.pop_up .inner .cont p{font-size:18px; color:#3b3b3b; text-align:left;}
.pop_up .btn_wrap{display:flex;}
.pop_up .btn_wrap label,
.pop_up .btn_wrap button{display:flex; width:100%; height:80px; align-items:center; justify-content:center; font-size:22px; color:#fff;}

.pop_up .btn_wrap label{background-color:#088cf1;}
.pop_up .btn_wrap button{background-color:#bebebe;}

.pop_bg{display:none; z-index:3; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.4;}

div[class*=scroll_wrap]{overflow:auto;}
div[class*=scroll_wrap]::-webkit-scrollbar{width: 10px !important; }
div[class*=scroll_wrap]::-webkit-scrollbar-thumb{background-color: #909090; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05); border-radius:5px;}
div[class*=scroll_wrap]:hover::-webkit-scrollbar-thumb{background-color: #5d5d5d;}
div[class*=scroll_wrap]::-webkit-scrollbar-track{background-color: #f7f7f7; box-shadow: inset 0px 1px 2.7px 0.3px rgba(0, 0, 0, 0.15); border-radius:5px;}

@media (max-width: 480px) {
    html, body{font-size:0.9rem;}
    .container{padding: 2.4rem 0.6rem 6rem;}
    .wrap .top{padding-top: 2rem; padding-left: 0.9rem; height: 10rem;background-size:auto 100%; background-position: right bottom;}
    .wrap .top h1{margin-bottom: 1rem; font-size: 1.4rem;}
    .wrap .top p{font-size: 1rem;}

    .wrap .inner{padding: 1.5rem 1.5em 3rem ;border-radius: 1.2rem 0 1.2rem 0 ;}
    .wrap .inner .input_wrap{margin-bottom: 1.5rem;gap: 1.2rem; }
    .wrap .inner .input_wrap > div{width:100%;}
    .wrap .inner .input_wrap .label{left :1rem; font-size:1rem; }
    .wrap .inner .input_wrap  > div textarea + .label{top:1rem;}
    .wrap .inner .input_wrap div > input, 
    .wrap .inner .input_wrap div > select{ padding: 0 1rem; height:2.8rem; border-radius:0.2rem;}
    .wrap .inner .input_wrap div > select{ background-position: calc(100% - 1rem) center;}
    .wrap .inner .input_wrap div .checks_wrap{gap:0.6rem; margin-left:1rem;}
    .wrap .inner .input_wrap div > input:focus + label,
    .wrap .inner .input_wrap div > select:focus + label{left:0.6rem;}
    .wrap .inner .input_wrap div > textarea:focus + label{left:0.6rem;}
    .wrap .inner .input_wrap .label.on{top:0; left:0.6rem;}

    .wrap .inner h2{padding: 0.6rem 0 ;font-size: 1.1rem;}
    .wrap .inner .li_txt{padding-left:1rem; margin:0.6rem 0; font-size:0.9rem ;}
    .wrap .inner .li_txt::before{ font-size:0.9rem;}
    .wrap .inner ul{margin-bottom:1rem; height:auto; row-gap: 1rem;}
    .wrap .inner ul li{gap: 0.6rem;width: 100%;}
    .wrap .inner ul li > label{font-size: 1rem;}

    .wrap .inner textarea{padding: 0.6rem; height: 10rem; }

    .wrap .inner .agree_chk{flex-direction:column;gap:0.6rem; margin-top: 1.1rem;}
    .wrap .inner .agree_chk p {margin-bottom: 5px;}
    .wrap .inner .agree_chk p > label{padding-left: 0.6rem; font-size: 1.1rem;}
    .wrap .inner .agree_chk .etc_txt{font-size: 0.9rem;}
    .wrap .inner .agree_chk > button{ width:100%; height:2.4rem; font-size:1rem; border-radius:0.2rem; }

    .wrap .inner .btn_modi{margin: 1.2rem auto 0;width: 100%; height: 3.4rem; font-size: 1.1rem; line-height: 3.4rem;}

    
    .pop_up .inner{padding:1rem} 
    .pop_up .btn_closed{ right:1rem; top:1rem; width:1.2rem; height:1.2rem; background-size:100% auto; }
    .pop_up .inner h1 {margin-bottom:1rem; font-size:1.1rem; }
    .pop_up .inner .cont{padding: 0.8rem; max-height:60vh; }
    .pop_up .inner .cont p{font-size:1rem;}

    .pop_up .btn_wrap label,
    .pop_up .btn_wrap button{height:3rem;font-size:1rem;}


    /*¿¬±¸¼Ò*/
    .wrap.lab .inner ul{height:auto;}




}