@charset "utf-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
/* font-family: 'Ubuntu', sans-serif; */

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	src: local('Pretendard Black'), url('../font/static/woff2/Pretendard-Black.woff2') format('woff2'), url('../font/static/woff/Pretendard-Black.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src: local('Pretendard Bold'), url('../font/static/woff2/Pretendard-Bold.woff2') format('woff2'), url('../font/static/woff/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src: local('Pretendard Medium'), url('../font/static/woff2/Pretendard-Medium.woff2') format('woff2'), url('../font/static/woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: local('Pretendard Regular'), url('../font/static/woff2/Pretendard-Regular.woff2') format('woff2'), url('../font/static/woff/Pretendard-Regular.woff') format('woff');
}
/* font */

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-size:16px;
    color:#333;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
}
ul, ol, li{
    list-style-type:none;
}
img, fieldset{
    border:none;
    vertical-align: middle;
}
a {
    color:inherit;
    text-decoration:none;
}
table{
    border-collapse:collapse;
}
input, textarea, select, button{
    color:inherit;
    font-size:inherit;
    font-family:inherit;
    vertical-align: middle;
}


/* flex */
.f-row{display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row;-webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.f-culumn{display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;-webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.jc-s{-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
.jc-e{-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.jc-c{-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.jc-b{-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.ai-s{-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
.ai-e{-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
.ai-c{-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
/* flex */


/* margin */
.m0{margin: 10px !important;}
.m5{margin: 10px !important;}
.m10{margin: 10px !important;}
.m15{margin: 10px !important;}
.m20{margin: 10px !important;}
.m25{margin: 10px !important;}
.m30{margin: 10px !important;}
.m35{margin: 10px !important;}
.m40{margin: 10px !important;}
.m45{margin: 10px !important;}
.m50{margin: 10px !important;}

.ml0{margin-left: 0px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}
.ml25{margin-left: 25px !important;}
.ml30{margin-left: 30px !important;}
.ml35{margin-left: 35px !important;}
.ml40{margin-left: 40px !important;}
.ml45{margin-left: 45px !important;}
.ml50{margin-left: 50px !important;}

.mr0{margin-right: 0px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr25{margin-right: 25px !important;}
.mr30{margin-right: 30px !important;}
.mr35{margin-right: 35px !important;}
.mr40{margin-right: 40px !important;}
.mr45{margin-right: 45px !important;}
.mr50{margin-right: 50px !important;}

.mt0{margin-top: 0px !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt25{margin-top: 25px !important;}
.mt30{margin-top: 30px !important;}
.mt35{margin-top: 35px !important;}
.mt40{margin-top: 40px !important;}
.mt45{margin-top: 45px !important;}
.mt50{margin-top: 50px !important;}

.mb0{margin-bottom: 0px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb25{margin-bottom: 25px !important;} 
.mb30{margin-bottom: 30px !important;}
.mb35{margin-bottom: 35px !important;}
.mb40{margin-bottom: 40px !important;}
.mb45{margin-bottom: 45px !important;}
.mb50{margin-bottom: 50px !important;}
/* margin */


/* padding */
.p0{padding: 10px !important;}
.p5{padding: 10px !important;}
.p10{padding: 10px !important;}
.p15{padding: 10px !important;}
.p20{padding: 10px !important;}
.p25{padding: 10px !important;}
.p30{padding: 10px !important;}
.p35{padding: 10px !important;}
.p40{padding: 10px !important;}
.p45{padding: 10px !important;}
.p50{padding: 10px !important;}

.pl0{padding-left: 0px !important;}
.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl15{padding-left: 15px !important;}
.pl20{padding-left: 20px !important;}
.pl25{padding-left: 25px !important;}
.pl30{padding-left: 30px !important;}
.pl35{padding-left: 35px !important;}
.pl40{padding-left: 40px !important;}
.pl45{padding-left: 45px !important;}
.pl50{padding-left: 50px !important;}

.pr0{padding-right: 0px !important;}
.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr15{padding-right: 15px !important;}
.pr20{padding-right: 20px !important;}
.pr25{padding-right: 25px !important;}
.pr30{padding-right: 30px !important;}
.pr35{padding-right: 35px !important;}
.pr40{padding-right: 40px !important;}
.pr45{padding-right: 45px !important;}
.pr50{padding-right: 50px !important;}

.pt0{padding-top: 0px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt25{padding-top: 25px !important;}
.pt30{padding-top: 30px !important;}
.pt35{padding-top: 35px !important;}
.pt40{padding-top: 40px !important;}
.pt45{padding-top: 45px !important;}
.pt50{padding-top: 50px !important;}

.pb0{padding-bottom: 0px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb25{padding-bottom: 25px !important;} 
.pb30{padding-bottom: 30px !important;}
.pb35{padding-bottom: 35px !important;}
.pb40{padding-bottom: 40px !important;}
.pb45{padding-bottom: 45px !important;}
.pb50{padding-bottom: 50px !important;}
/* padding */


/* width */
.w-5{width: 5% !important}
.w-10{width: 10% !important}
.w-15{width: 15% !important}
.w-20{width: 20% !important}
.w-25{width: 25% !important}
.w-30{width: 30% !important}
.w-35{width: 35% !important}
.w-40{width: 40% !important}
.w-45{width: 45% !important}
.w-50{width: 50% !important}
.w-55{width: 55% !important}
.w-60{width: 60% !important}
.w-65{width: 65% !important}
.w-70{width: 70% !important}
.w-75{width: 75% !important}
.w-80{width: 80% !important}
.w-85{width: 85% !important}
.w-90{width: 90% !important}
.w-95{width: 95% !important}
.w-100{width: 100% !important}
/* width */


/* toggle */
.toggle input{
    display: none;
}
.toggle label{
    display: inline-block;
    width: 45px !important;
    height: 25px;
    cursor: pointer;
    position: relative;
    background-color: #ccc;
    border-radius: 20px;
}
.toggle label::before{
    content: '';
    display: block;
    width: 19px;
    height: 19px;
    left: 3px;
    bottom: 3px;
    position: absolute;
    background-color: #fff;
    transition: all .4s ease;
    border-radius: 50%;
}
.toggle input:checked + label{
    background-color: #00b0ff;
}
.toggle input:checked + label::before{
    transform: translateX(20px);
}
/* toggle */

/* errorBox */
.errorBox{width:100%;height: 100vh;position: relative;}
.errorBox .errorCont{text-align:center;}
.errorBox .errorCont h1{font-size: 60px; margin-bottom: 30px;color: red;}
.errorBox .errorCont h1.icon i{color: #999; margin: 0; font-size: 60px;}
.errorBox .errorCont h3{font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #333;}
.errorBox .errorCont p{color: #999;}
.errorBox .errorCont p span{margin-top: 10px;display: block;}
/* errorBox End */

.brandFont{font-family: 'Ubuntu', sans-serif !important;letter-spacing: -1px;font-weight: bold;}
.redColor{color: #ff3100 !important;}
.vingoColor{color: #00b0ff !important;}
.warringMessage{color: #ff3100 !important;font-size: 14px !important;margin-top: 5px !important;padding: 0 5px !important;}
p.warring{color: #ff3100 !important;}
span.error{color: #ff3100 !important;font-size: 14px !important;margin-top: 5px !important;padding: 0 5px !important;}
.infoMessage{color: #999 !important;font-size: 14px !important;margin-top: 5px !important;padding: 0 5px !important;}
.successMessage{color: #00b0ff !important;font-size: 14px !important;margin-top: 5px !important;padding: 0 5px !important;}