html,body{
    margin:0;
    font-size: max(14px, 2.5vmin);
}
button, input, select, a{
    border:0;
    background-color: transparent;
    font-size: max(14px, 2.5vmin);
}

input:focus{outline: none;}

select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

body > .layout{
    position: relative;
    width:100vw;
    min-width:280px;
    max-width:800px;
    height:auto;
    margin:0px auto;
    overflow: hidden;
}

/* header */
#header{
    width:calc(100% - 30px);
    padding:0 15px;
    min-height:32px;
    height:18vmin;
    max-height:120px;
}

#header > div{
    position: relative;
    height:100%;
    display: inline-block;
}

#header > .logo{
    width:60%;
    min-width:150px;
    max-width:470px;
    float:left;
}

#header > .logo.main{
    width:70%;
    min-width:250px;
    max-width:700px;
}

#header > .logo img{
    position:absolute; 
    top:50%; 
    transform:translateY(-50%);
    width:100%;
}

#header > .button{
    width:30%;
    min-width:100px;
    max-width:150px;
    float:right;
}

#header > .button button{
    position:absolute; 
    top:50%; 
    right:0;
    transform:translateY(-50%);
    width:calc(100% - 50px);
    height:10vmin;
    min-height:30px;
    max-height:70px;
    margin:0 0 0 15px;
    padding-right:20px;
    border:1px solid #707070;
    border-radius: 15px;
}

#header > .button img{
    height:40%;
}

#header > .button img:last-child{
    position:absolute; 
    top:50%; 
    right:10px;
    transform:translateY(-50%);
}

/* main */
#main{
    width:calc(100% - 30px);
    padding:0 15px;
    height:auto;
    overflow: hidden;
}

/* width */
.size20{width:20%;}
.size80{width:80%;}
.size100{width:100%;}


/* select */
.select{position: relative;}
.select select{
    width:100%;
    border:1px solid #707070;
    border-radius: 5px;
}
.select .option{
    width:100%;
    border:1px solid #d6d6d6;
    border-radius: 5px;
    background: url('/static/img/arrow_right.png') no-repeat, #fff;
    background-position: 95% center;
    background-size:clamp(10px,3vmin,20px);
    margin-bottom:15px;
}
.select .option.active{
    background: url('/static/img/arrow_right2.png') no-repeat, #FC8800;
    background-position: 95% center;
    background-size:clamp(10px,3vmin,20px);
    color:#fff;
}
.select .option p{
    margin:0 10%;
    width:80%;
}
.select.size1 select{padding:0 60px 0 15px;}
.select.size2 select{padding:0 40px 0 15px;}
.select.size1 img{width:25px;}
.select.size2 img{width:15px;}
.select span img{
    position: absolute;
    top:50%; 
    right:20px;
    transform:translateY(-50%);
}


/* input */
.input{position: relative;}
.input input{width:100%;}
.input input.type1{
    padding:0 60px 0 15px;
    border:1px solid #707070;
    border-radius: 5px;
}
.input input.type2{
    padding:0 60px 0 15px;
    border:1px solid #707070;
    border-radius: 5px;
}
.input p{
    display: inline-block;
    margin:0;
}

.input span{
    position: absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    width:25px;
    overflow: hidden;
}
.input span.type1{right:14px;}
.input span.type2 {
    right: 8px;
    display: inline-block; /* span의 width와 height를 조절하기 위해 필요한 속성 */
    width: 50px;  /* 원하는 너비로 설정 */
    height: 30px;  /* 원하는 높이로 설정 */
}
.input span img{width:100%;}

/*button*/
.button{position: relative;}
.button.type1 button {
    width: 100%;
    height: 11.5vmin;
    min-height: 60px;
    border-radius: 5px;
}
.button.type2 button{
    width:100%;
    height:11.5vmin;
    min-height:60px;
    border-radius: 5px;
}

.button.type1 button.divideBy2{width:calc(50% - 10px);}
.button.type1 button.divideBy2:not(:last-child){margin-right:10px;}

.button.type1 button.gray{
    background-color:#707070;
    color:#fff;
}

.button.type1 button.orange{
    background-color:#FC8800;
    color:#fff;
}

/* */
.button.type2 button.divideBy2{width:calc(50% - 10px);}
.button.type2 button.divideBy2:not(:last-child){margin-right:10px;}

.button.type2 button.gray{
    background-color:#707070;
    color:#fff;
}

.button.type2 button.orange{
    background-color:#FC8800;
    color:#fff;
}

/* note */
.note_box{
    position: relative;
    margin-bottom:50px;
}
.note{
    width:calc(100% - 30px);
    margin:10px 0;
    padding-left:30px;
    background: url('/static/img/check.png') no-repeat, #fff;
    background-position: 0% 7px;
    background-size:clamp(10px,3vmin,20px);
}