@charset "utf-8";
@import url("font.css"); 
html, body{font-size:16px; overflow-x:hidden; color: #1E1E23;}
html h1{font-size:16px;}
body, p, img, div, ul, ol, li, dl, dt, dd, table, tr, th, td, input, select, textarea{
    margin:0; padding:0; border:none; list-style:none; border-collapse: collapse; border-spacing:0; resize:none; word-break: keep-all;
}
h1, h2, h3, h4, h5, h6, p{
    margin:0; padding:0; line-height: 1.1; letter-spacing: -0.6px; word-break: keep-all;
}
a{
    text-decoration:none; color:#1E1E23;  letter-spacing: -0.6px; word-break: keep-all;
    color: inherit;
}

table{width: 100%;}

table caption{
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

@media screen and (max-width: 1200px) {
    html, body{font-size: 15px}
    html h1{font-size:15px;} 
}

@media screen and (max-width: 600px) {
    /* a {word-break: break-word;} */
}

@media screen and (max-width: 480px) {
    html, body{font-size: 13px;}
    html h1{font-size:13px;}
}

@media screen and (max-width: 300px) {
    html, body{font-size: 12px;}
    html h1{font-size:12px;} 
}


* {	font-family: 'Pretendard', sans-serif;}


input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"]{width: 100%; height:46px; border:1px solid #c6c6c6; border-radius:7px; padding:0 20px; font-family: 'Pretendard'; font-size:1em; color:#717171; background-color:#ffffff; box-sizing: border-box; font-weight: 500;}
input[type="date"]{
    max-width: 100%;
    padding: 0 34px 0 14px;
    position: relative;
    display: block;
    -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator{
    height: 46px;
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: relative;
    right: -19px;
    z-index: 99;
}
input[type="date"]::after{
    position: absolute;
    top: 13px;
    right: 17px;
    content: '';
    width: 18px;
    height: 18px;
    background: url(../images/common/icon_calendar.svg) no-repeat;
    background-size: contain;
    z-index: 11;
}
/* 아이폰(사파리)에서 텍스트 왼쪽 정렬 */
input::-webkit-date-and-time-value {
    text-align: left;
    position: relative;
    z-index: 99;
}

input:disabled{ background-color:#f1f2f2; border-color:#bcbec0; color:#808285; opacity:1; -webkit-text-fill-color:#808285;   }
input::placeholder{ color:#ccc;    }
select{ height:32px; border:1px solid #bcbec0; border-radius:3px; font-family: 'Pretendard'; font-size:1em; background-color:#ffffff; color:#505157;   }
textarea{   min-height:32px; border:1px solid #bcbec0; border-radius:3px; font-family: 'Pretendard'; font-size:1em; color:#505157; letter-spacing:-0.3px;  box-sizing: border-box; }
button{ font-family: 'Pretendard'; font-size:0.8em; cursor:pointer;  }
input, select, textarea, button, img{   vertical-align:middle;  }
input[type="radio"] + label{    display:inline-block; margin-right:10px;    }

.datepicker {position: relative;}
.datepicker::before { text-rendering: auto; -webkit-font-smoothing: antialiased;
    font: var(--fa-font-regular);
    content: "\f133";
    position: absolute;
    right: 10px;
    top: 11px;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"]{
        height: 37px;
        line-height: 37px;
        font-size: 0.9em;
        padding: 0 14px;
    }

    input[type="date"]::after{
        top: 10px;
        right: 10px;
        width: 14px;
        height: 14px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator{
        right: -7px;
    }
}

@media screen and (max-width: 480px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"]{
        padding: 0 10px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator{
        right: -2px;
    }
}


.ml5{   margin-left:5px !important; }

.pl10{  padding-left:10px !important;   }
.pl20{  padding-left:20px !important;   }
.pl25{  padding-left:25px !important;   }
.pl35{  padding-left:35px !important;   }
.pl40{  padding-left:40px !important;   }
.pl50{  padding-left:50px !important;   }

.mt5{   margin-top:5px !important;  }
.mt10{  margin-top:10px !important; }
.mt15{  margin-top:15px !important; }
.mt20{  margin-top:20px !important; }
.mt30{  margin-top:30px !important; }
.mt40{  margin-top:40px !important; }
.mt50{  margin-top:50px !important; }
.mt60{  margin-top:60px !important; }
.mt70{  margin-top:70px !important; }
.mt80{  margin-top:80px !important; }

.mr5{   margin-right:5px !important;}
.mr10{  margin-right:10px !important; }

.mb5{  margin-bottom:5px !important;  }
.mb10{  margin-bottom:10px !important;  }
.mb15{  margin-bottom:15px !important;  }
.mb20{  margin-bottom:20px !important;  }
.mb30{  margin-bottom:30px !important;  }
.mb40{  margin-bottom:40px !important;  }
.mb50{  margin-bottom:50px !important;  }
.mb60{  margin-bottom:60px !important;  }
.mb70{  margin-bottom:70px !important;  }
.mb80{  margin-bottom:80px !important;  }

.ml5{   margin-left:5px !important;  }
.ml10{  margin-left:10px !important; }
.ml20{  margin-left:20px !important; }
.ml30{  margin-left:30px !important; }
.ml35{  margin-left:35px !important; }
.ml40{  margin-left:40px !important; }
.ml50{  margin-left:50px !important; }

.m20 {margin:20px !important;}

@media screen and (max-width: 480px) {
    .mt30{  margin-top:25px !important; }
    .mt40{  margin-top:35px !important; }
    .mt50{  margin-top:30px !important; }
    .mt60{  margin-top:40px !important; }
    .mt70{  margin-top:50px !important; }
    .mt80{  margin-top:60px !important; }
    .mb30{  margin-bottom:25px !important; }
    .mb40{  margin-bottom:35px !important; }
    .mb50{  margin-bottom:30px !important; }
    .mb60{  margin-bottom:40px !important; }
    .mb70{  margin-bottom:50px !important; }
    .mb80{  margin-bottom:60px !important; }
}


.w0p { width: 0% !important;   }
.w10p{ width:10% !important;   }
.w20p{ width:20% !important;   }
.w30p{ width:30% !important;   }
.w40p{ width:40% !important;   }
.w49p{  width:49% !important;   }
.w50p{  width:50% !important;   }
.w60p{ width:60% !important;  }
.w70p{ width:70% !important;  }
.w80p{ width:80% !important;  }
.w90p{ width:90% !important;  }
.w100p{ width:100% !important;  }
.w50{   width:50px !important;  }
.w100{  width:100px !important; }
.w130{  width:130px !important; }
.w150{  width:150px !important; }
.w200{  width:200px !important; }
.w300{  width:300px !important; }
.w400{  width:400px !important; }
.w500{  width:500px !important; }
.w600{  width:600px !important; }
.w700{  width:700px !important; }
.w800{  width:800px !important; }
.w900{  width:900px !important; }
.w1000{  width:1000px !important; }

.p5{padding:5px !important;   }
.p10{padding:10px !important;   }
.p20 {padding:20px !important;;}
.p30 {padding:30px !important;;}

.br5 {border-radius: 5px !important;}
.br10 {border-radius: 10px !important;}


.align-l{   text-align:left !important; }
.align-r{   text-align:right !important;    }
.align-c{   text-align:center !important;   }

.cursor {cursor: pointer;}

.black{ color:#000000 !important;   }

.fl {float:left !important;}
.fr {float:right !important;}

.lh16 {line-height: 1.6;}


@media screen and (max-width:430px){
    input[type="text"]{ font-size:0.9em;    }
    select{ font-size:0.9em;    }
    textarea{   font-size:0.9em;    }
}