/* CSS RESET - START */
*, :after, :before {box-sizing:border-box}
* {margin:0}
body, html {height:100%}
body {-webkit-font-smoothing:antialiased;line-height:1.5}
canvas, img, picture, svg, video {display:block;max-width:100%}
button, input, select, textarea {font:inherit}
h1, h2, h3, h4, h5, h6, p {overflow-wrap:break-word}
#__next, #root {isolation:isolate}
button  {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

select {
   -webkit-appearance:none; /* for chrome */
   -moz-appearance:none; /*for firefox*/
   appearance:none;
}

select::-ms-expand{
   display:none;/*for IE10,11*/
}

 
select::-ms-expand { display: none; }
a {
  text-decoration: none;
}
input, select, textarea, button, a, label {-webkit-tap-highlight-color:rgba(0,0,0,0);}
select{
    background-color: #fff;
}
/* CSS RESET - END */

html, body{
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  color: #000;

}


.main-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto;
    /* overflow-y: scroll;
    overflow-x: hidden; */
    align-items: center;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-vertical{
    display: flex;
    align-items: center;
}
.center-horizontal{
    display: flex;
    justify-content: center;
}

.section{
  padding: 1rem;
  min-width: 20rem;
  padding-top: 3rem;
  width: 100%;
  max-width: 40rem;
}

.text01{
  font-family: NotoSansKR;
  font-size: 1.125rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.56;
  letter-spacing: normal;
  text-align: left;
  color: #000;
}

.text02{
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  color: #000;
}

.text-3{
    font-family: NotoSansKR;
    font-size: .875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #000;
}

.text-4{
    font-family: NotoSansKR;
    font-size: .75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.33;

    letter-spacing: normal;
    text-align: left;
    color: #000;
}

.button:disabled{
  background-color: #c7c7c7;
}
.button{
    background-color: #000;
    color: #fff;
    font-family: NotoSansKR;
    font-size: .875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3rem;
}

select{
  width: 100%;
  height: 3.5rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-radius: 8px;
  border: solid 1px #d7d7d7;
  color: #000;
  background-color: #fff;
}

.select-arrow{

    background-image: url('assets/arrow-down.png'); 
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    position: absolute;
    right: .75rem;
    bottom: 1rem;
    height: 1.5rem;
    width: 1.5rem;
    background-size: cover;
}

.relative{
    position: relative;
}

.check-wrap{
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.checkbox-label{
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-family: NotoSansKR;
    font-size: .875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #000;
}
.checkbox-detail{
  display: flex;
  align-items: center;
    margin-left:auto;
    font-family: NotoSansKR;
    font-size: .75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.33;
    letter-spacing: normal;
    text-align: right;
    color: #000;
    height: auto;
    text-decoration: underline;
    cursor: pointer;
}
.terms-check{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

        label[for="termsCheck"] {
            display: inline-block;
            cursor: pointer;
            width: 1.75rem;
            height: 1.75rem;
            background-image: url('assets/check-off.png');
            background-position: center;
            background-size: 100% 100%;
            
        }

        .terms-check:checked + label {
            background-image: url('assets/check-on.png');
        }
.section-bottom{
  margin-top:auto;
  
}

.grid{
  margin-top: 1.25rem;
  background-color: #f7f7f7;
  padding: .75rem;
  gap: .75rem;
  display: flex;
  flex-direction: column;
}
.gird-item{
  display: flex;
}
.grid .left{
  height: 1.5rem;
  flex-grow: 0;
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: -0.36px;
  text-align: left;
  color: #000;
    display: flex;
  justify-content: center;
  align-items: center;
}

.grid .right{
  margin-left: auto;
  height: 1.5rem;
  
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: -0.36px;
  text-align: right;
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid .left1{
  flex-grow: 0;
  flex-shrink: 0;
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.36px;
  text-align: left;
  color: #555;
  width: .6rem;
}

.grid .right1{
  
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.36px;
  
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.875rem;
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: normal;
  text-align: center;
  color: #000;

}

.dimm{
    z-index: 90;
    position: fixed;
    top: 0;
    bottom: 0;
    left : 0;
    right: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.policy-wrapper{
  position: relative;
  background-color: #fff;
  padding: 1rem;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
}
.policy-title{
  height: 1.75rem;
  align-self: stretch;
  flex-grow: 0;
  font-family: NotoSansKR;
  font-size: 1rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}
.policy-sub{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  flex-grow: 0;
  font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: -0.36px;
  text-align: center;
  color: #000;
}
.policy-subtitle{
    align-self: stretch;
  flex-grow: 0;
  font-family: NotoSansKR;
  font-size: .875rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: -0.39px;
  text-align: left;
  color: #000;
  margin-bottom: -.5rem;
}
.title{
    font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.36px;
  text-align: left;
  color: #000;
}
.content{
  margin-top: -.5rem;
    font-family: NotoSansKR;
  font-size: .75rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.36px;
  text-align: left;
  color: #555;
}
.policy-sub2{
  
}



.dimmed{
    z-index: 90;
    position: fixed;
    top: 0;
    bottom: 0;
    left : 0;
    right: 0;
    display: flex;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

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

.dialog{
  position: relative;
  background-color: #fff;
  padding: 1rem;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
  width: 20rem;

}

.dialog-title{
  font-size: 1.2rem;
  padding-bottom: .5rem;
}

.dialog-content{
  font-size: 1.1rem;
  padding-bottom: .5rem;
}



.custom-arrow{
    background-image: url('assets/arrow-down.png'); 
    background-position: calc(100% - .75rem) center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
}