@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,input,button,textarea,select,option
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
}

html, body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0px;
    color: #fff;
    overflow-x: hidden;
}

body {
    background: #202137;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--a-color);
}

a:hover {
    text-decoration: none;
    color: #fff;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* font */
/* lato */
.lato {
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
}


/* pre */
pre {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--pre-color);
}


/* table */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* button */
button {
    border: 0;
}

button,
select {
    cursor: pointer;
    font-size: 14px;
}

button:focus {
    outline: none;
}

/* a */
a {
    cursor: pointer;
}


/* input */
input::placeholder {
    color: var(--input-placeholder-color) !important;
}

input[type=range] {
    -webkit-appearance: none;
    /* 기본슬라이드 숨기기*/
    width: 100%;
    /* Firefox에서는 특정한 넓이가 필요*/
    background: transparent;
    /* Chrome에서 투명하게 출력 */
}

input[type=color] {
    -webkit-appearance: none;
    /* 기본슬라이드 숨기기*/
    background: transparent;
    /* Chrome에서 투명하게 출력 */
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
    /* input range에 포커스 되었을 경우 기본 블러처리 제거 */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* IE에서 기본슬라이드 숨기기  */
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input {
    background: transparent;
    border: 1px solid #616380;
    height: 36px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search] {
    background: transparent;
    border: 1px solid #616380;
    height: 36px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input[type=search]:focus {
}

input:disabled,
input:read-only {
    color: #5C5D7C !important;
}

input {
    /*ios대응*/
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=radio] {
    -webkit-appearance: checkbox;
    /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;
    /* Firefox */
}

input[type=radio] {
    display: none;
}

input[type=radio]+label {
    text-indent: -999em;
    margin-right: 0;
    display: inline-block;
    cursor: pointer;
    padding: 0px 0px 0px 22px;
    background: var(--radio-normal-background);
    background-size: 18px 18px;
}

input[type=radio]:checked+label {
    background: var(--radio-normal-checked-background);
    background-size: 18px 18px;
    background-position: center center;
}

input[type=checkbox] {
    -webkit-appearance: checkbox;
    /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;
    /* Firefox */
    width: 15px;
    height: 15px;
}


/* input 클릭시 placeholder 지우기 
input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder {
  color: transparent;
}
input:focus::-ms-input-placeholder {
  color: transparent;
} */


/* textarea */
textarea {
    width: 100%;
    border: 0;
    resize: none;
    border-radius: 5px;
    height: 180px;
    color: #fff;
    font-size: 16px;
    background: transparent;
}

input::placeholder,
textarea::placeholder {
    color: #5C5D7C !important;
}


/* select */
select:focus,
input:focus,
textarea:focus {
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

select {
    background: url('../../images/arrow1.png') no-repeat;
    background-size: 14px;
    background-position: 90% 14px;
    border: 0;
    border-radius: 10px;
    padding: 0 15px;
    width: 100%;
    height: 36px;
    /*ios대응*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 14px;
    color: #fff;
}

select::-ms-expand {
    display: none;
    /* 화살표 없애기 for IE10, 11*/
}

option {
    background: #0D0E22;
}

/* icon */
i {
    color: #333;
}


/* th, td */
th,
td {
    vertical-align: middle;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}



/* +++ Use Only this project +++ */
.dp_none {
    display: none;
}


/* bootstrap */
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    padding: 0;
}

/* -- desktop( 1200px ~ ? ) -- */
@media screen and (min-width: 1200px) {}