/* to embed a font */
@import url('./font.css');

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 1rem */
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--black);
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    letter-spacing: -0.5px;
    color: var(--black);
    font-weight: 400;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
    margin: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: var(--black);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:active, a:focus {
    color: var(--black);
    text-decoration: none;
}

/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}

:focus {
    outline: none;
}

:root {
    --black: #000000;
    --white: #ffffff;

    --gray05: #24252A;
    --gray04: #747474;
    --gray03: #A4A4A4;
    --gray02: #E5E5E5;
    --gray01: #F9FAFB;

    --red: #F64141;
    --blue: #148EFF;
}

/* responsive */
br.mobile {display: none;}
img.mobile {display: none;}

@media screen and (max-width: 768px) {
    br.mobile {display: block;}
    
    img.desktop {display: none;}
    img.mobile {display: block;}
}

/* scroll */
::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: transparent;}
::-webkit-scrollbar-track {background-color: transparent;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

/* text overflow */
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* layout */
.cont-box:last-child {padding-bottom: 16rem;}
.cont-box + .cont-box {margin-top: 16rem;}
.box + .box {margin-top: 16rem!important;}

@media screen and (max-width: 768px) {
    .cont-box:last-child {padding-bottom: 5rem;}
    .cont-box + .cont-box {margin-top: 5rem;}
    .box + .box {margin-top: 5rem!important;}
}

.cont-box.bg-color {padding: 16rem 0; position: relative;}
.cont-box.bg-color > * {position: relative; z-index: 2;}
.cont-box.bg-color::before {content: ''; width: 100vw; height: 100%; z-index: 1!important; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.cont-box.bg-color + .cont-box.bg-color {margin-top: 0;}
.cont-box.bg-color .box {width: 100%; max-width: 112rem; margin: 0 auto;}

@media screen and (max-width: 768px) {
    .cont-box.bg-color {padding: 5rem 0;}
}

.cont-box.bg-color.black::before {background-color: var(--black);}
.cont-box.bg-color.black .title > p {color: var(--white);}
.cont-box.bg-color.black .title > span {color: var(--gray03);}

.cont-box.bg-color.gray::before {background-color: var(--gray01);}

.cont-box.bg-color.blue::before {background-color: var(--blue);}
.cont-box.bg-color.blue .title > p {color: var(--white);}
.cont-box.bg-color.blue .title > span {color: var(--white);}

/* font color */
.font-red {color: var(--red)!important;}
.font-blue {color: var(--blue)!important;}

/* font weight */
.font600 {font-weight: 600!important;}
.font-blue {color: var(--blue)!important;}

/* title */
.title {display: flex; flex-flow: column; row-gap: 3.6rem; margin-bottom: 8rem;}
.title > p {font-size: 5rem; font-weight: 700; line-height: 1.4; word-break: keep-all;}
.title > span {font-size: 2.2rem; font-weight: 500; line-height: 1.6; color: var(--gray04); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .title {row-gap: 2.4rem; margin-bottom: 3rem; align-items: center;}
    .title > p {font-size: 2.4rem; text-align: center;}
    .title > span {font-size: 1.4rem; text-align: center;}
}

.title.center {align-items: center;}
.title.center > p {text-align: center;}
.title.center > span {text-align: center;}

/* input */
input {width: 100%; height: 4.8rem; padding: 0 1.6rem; font-size: 1.4rem; border: 1px solid var(--gray02); border-radius: .8rem; background-color: var(--white); cursor: auto;}
input::placeholder {color: var(--gray03);}

/* input:checkbox */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; column-gap: .8rem; cursor: pointer;}
input[type="checkbox"] + label::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-chk-24.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type="checkbox"] + label > p {flex: 1; font-size: 1.4rem; line-height: 2.4rem; word-break: keep-all;}

input[type="checkbox"]:checked + label::before {background-image: url(../img/ico/ic-chk-24-ov.svg);}

/* button */
.btn-wrap {margin-top: 2.8rem; display: flex; align-items: center; column-gap: 1.6rem;}
.btn-wrap > button {width: 100%;}
.btn-wrap > button:nth-child(1):nth-last-child(2), .btn-wrap > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - 1.6rem) / 2);}

button {width: fit-content; height: 6rem; padding: 0 2.4rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem; font-size: 1.6rem; font-weight: 700; color: var(--white); background-color: var(--blue); border: 1px solid transparent; border-radius: .8rem; cursor: pointer;}
button.line {background-color: var(--white); border-color: var(--blue); color: var(--blue);}

@media screen and (max-width: 768px) {
    button {height: 4.4rem; font-size: 1.4rem; border-radius: .4rem; column-gap: .6rem;}
}