/* ***** 색상차트 ***** */
@colro_white: #fff;
@color_dark: #666;
@color_black: #212529;
@color_red: #f01111;
@color_blue: #3570ff;
@color_navy: #10215c;
@color_green: #33b623;
@color_bg: #f7f7f7;
@color_gray: #d7dce5;
@color_lightgray: #eaedef;
// 주색상
@color_main: #1b4694;
@color_sub: #e62822;

/* ****** 디바이스 ****** */
@web: ~"screen and (max-width: 1680px)";
@laptop: ~"screen and (max-width: 1280px)";
@tab: ~"screen and (max-width: 1024px)";
@tab_l: ~"screen and (max-width: 980px)";
@tab_m: ~"screen and (max-width: 860px)";
@tab_s: ~"screen and (max-width: 768px)";
@mobile_l: ~"screen and (max-width: 520px)";
@mobile_m: ~"screen and (max-width: 420px)";
@mobile_s: ~"screen and (max-width: 340px)";

/* ********** 설정 초기화 ********** */
*,
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,
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;
    vertical-align: baseline;
    word-break: keep-all;
    white-space: normal;
    box-sizing: border-box;
    font-family: "Pretendard", "play", sans-serif;
}

html {
    font-size: 62.5%;
}

body {
    color: #212529;
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.08rem;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

a {
    text-decoration: none;
}

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

button {
    background-color: transparent;
    box-shadow: none;
    border: none;
    cursor: pointer;
}

img {
    display: block;
}
/* ***** 인풋***** */
input {
    border: none;
    outline: 1.6rem;
    &::placeholder {
        font-size: 1.6rem;
        color: #999;
    }
}

textarea::placeholder {
    color: #999;
}

// 인풋 삭제아이콘
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}

select {
    appearance: none;
    outline: 0;
    border: 0;
    padding: 0 1rem;
    cursor: pointer;
    font-size: 1.6rem;
}

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

/* ********* 텍스트 기타 ********** */
.txt_cut {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.txt_center {
    text-align: center;
}

.txt_h {
    line-height: 1.5;
}

/* ********* 인풋 ********* */
.form_con:focus {
    border: 1px solid @color_main !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 65, 164, 0.3) !important;
}

/* ***** 폰트 굵기 ***** */
.fw_300 {
    font-weight: 300;
}

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_600 {
    font-weight: 600;
}

.fw_700 {
    font-weight: 700;
}

.fw_800 {
    font-weight: 800;
}

/* ***** 패딩 ***** */
.pt_50 {
    padding-top: 5rem;
}

.pt_30 {
    padding-top: 3rem;
}

.pt_20 {
    padding-top: 2rem;
}

.pt_10 {
    padding-top: 1rem;
}

.pt_5 {
    padding-top: 0.5rem;
}

.pb_50 {
    padding-bottom: 5rem;
}

.pb_30 {
    padding-bottom: 3rem;
}

.pb_20 {
    padding-bottom: 2rem;
}

.pb_10 {
    padding-bottom: 1rem;
}

.pb_5 {
    padding-bottom: 0.5rem;
}

.pl_50 {
    padding-bottom: 5rem;
}

.pl_30 {
    padding-left: 3rem;
}

.pl_20 {
    padding-left: 2rem;
}

.pl_15 {
    padding-left: 1.5rem;
}

.pl_10 {
    padding-left: 1rem;
}

.pl_5 {
    padding-left: 5rem;
}

.pr_50 {
    padding-right: 5rem;
}

.pr_30 {
    padding-right: 3rem;
}

.pr_20 {
    padding-right: 2rem;
}

.pr_15 {
    padding-right: 1.5rem;
}

.pr_10 {
    padding-right: 1rem;
}

.pr_5 {
    padding-right: 0.5rem;
}

/* ***** 마진 ***** */
.mt_50 {
    margin-top: 5rem;
}

.mt_30 {
    margin-top: 3rem;
}

.mt_20 {
    margin-top: 2rem;
}

.mt_10 {
    margin-top: 1rem;
}

.mt_5 {
    margin-top: 0.5rem;
}

.mb_50 {
    margin-bottom: 5rem;
}

.mb_30 {
    margin-bottom: 3rem;
}

.mb_20 {
    margin-bottom: 2rem;
}

.mb_10 {
    margin-bottom: 1rem;
}

.mb_5 {
    margin-bottom: 0.5rem;
}

.ml_50 {
    margin-left: 5rem;
}

.ml_30 {
    margin-left: 3rem;
}

.ml_20 {
    margin-left: 2rem;
}

.ml_15 {
    margin-left: 1.5rem;
}

.ml_10 {
    margin-left: 1rem;
}

.ml_5 {
    margin-left: 0.5rem;
}

.mr_50 {
    margin-right: 5rem;
}

.mr_30 {
    margin-right: 3rem;
}

.mr_20 {
    margin-right: 2rem;
}

.mr_15 {
    margin-right: 1.5rem;
}

.mr_10 {
    margin-right: 1rem;
}

.mr_5 {
    margin-right: 0.5rem;
}

/* ***** 폰트사이즈 ***** */
.fs_100 {
    font-size: 10rem;
}

.fs_90 {
    font-size: 90rem;
}

.fs_80 {
    font-size: 8rem;
}

.fs_70 {
    font-size: 7rem;
}

.fs_60 {
    font-size: 6rem;
}

.fs_54 {
    font-size: 5.4rem;
}

.fs_52 {
    font-size: 5.2rem;
}

.fs_50 {
    font-size: 5rem;
}

.fs_48 {
    font-size: 4.8rem;
}

.fs_46 {
    font-size: 4.6rem;
}

.fs_42 {
    font-size: 4.2rem;
}

.fs_40 {
    font-size: 4rem;
}

.fs_38 {
    font-size: 3.8rem;
}

.fs_36 {
    font-size: 3.6rem;
}

.fs_34 {
    font-size: 3.4rem;
}

.fs_32 {
    font-size: 3.2rem;
}

.fs_30 {
    font-size: 3rem;
}

.fs_28 {
    font-size: 2.8rem;
}

.fs_26 {
    font-size: 2.6rem;
}

.fs_24 {
    font-size: 2.4rem;
}

.fs_22 {
    font-size: 2.2rem;
}

.fs_20 {
    font-size: 2rem;
}

.fs_18 {
    font-size: 1.8rem;
}

.fs_16 {
    font-size: 1.6rem;
}

.fs_14 {
    font-size: 1.4rem;
}

/* ***** 폰트색상 ***** */
.fc_white {
    color: @colro_white;
}

.fc_black {
    color: @color_black;
}

.fc_gray {
    color: #666;
}

.fc_blue {
    color: @color_blue;
}

.fc_red {
    color: @color_red;
}

/* ********** 애니메이션 효과  ********** */
.motion {
    opacity: 0;
    transition: all 0.8s ease;
}

.motion.on {
    opacity: 1;
    transform: none;
}

// translate3d(x가로축, y세로축, z모서리 대칭-비스듬한 박스형태로 표현)
.motion_up {
    transform: translate3d(0, 30px, 0);
}

.motion_down {
    transform: translate3d(0, -30px, 0);
}

.motion_right {
    transform: translate3d(-30px, 0, 0);
}

.motion_left {
    transform: translate3d(30px, 0, 0);
}

@keyframes motion_none {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes motion_hight_up {
    0% {
        transform: translate3d(0, 80px, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_up {
    0% {
        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0);
        opacity: 1;
    }
}

@keyframes motion_hight_down {
    0% {
        transform: translate3d(0, -80px, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_down {
    0% {
        transform: translate3d(0, -30px, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_hight_right {
    0% {
        transform: translate3d(-80px, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_right {
    0% {
        transform: translate3d(-30px, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_hight_left {
    0% {
        transform: translate3d(80px, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_left {
    0% {
        transform: translate3d(30px, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes motion_zoom_in {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes motion_zoom_out {
    0% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes motion_w100 {
    0% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

@keyframes motion_h100 {
    0% {
        height: 100%;
    }

    100% {
        height: 0;
    }
}

@keyframes motion_w50 {
    0% {
        width: 50%;
    }

    100% {
        width: 0;
    }
}

/* ********** 반응형 ********** */
@media screen and (max-width: 1440px) {
    html {
        font-size: 0.6944vw !important;
    }
}

@media screen and (max-width: 1280px) {
    html {
        font-size: 0.78125vw !important;
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 0.9766vw !important;
    }

    .fs_100 {
        font-size: 9rem;
    }

    .fs_90 {
        font-size: 8rem;
    }

    .fs_80 {
        font-size: 7rem;
    }

    .fs_70 {
        font-size: 6rem;
    }

    .fs_60 {
        font-size: 5rem;
    }

    .fs_54,
    .fs_52 {
        font-size: 4.8rem;
    }

    .fs_50,
    .fs_48 {
        font-size: 4.6rem;
    }

    .fs_46 {
        font-size: 4.4rem;
    }
}

@media screen and (max-width: 980px) {
    html {
        font-size: 1.0204vw !important;
    }

    .pt_50 {
        padding-top: 4rem;
    }

    .pt_30 {
        padding-top: 2.5rem;
    }

    .pb_50 {
        padding-bottom: 4rem;
    }

    .pb_30 {
        padding-bottom: 2.5rem;
    }

    .pl_50 {
        padding-left: 4rem;
    }

    .pl_30 {
        padding-left: 2.5rem;
    }

    .pr_50 {
        padding-right: 4rem;
    }

    .pr_30 {
        padding-right: 2.5rem;
    }

    .mt_50 {
        margin-top: 4rem;
    }

    .mt_30 {
        margin-top: 2.4rem;
    }

    .mb_50 {
        margin-bottom: 4rem;
    }

    .mb_30 {
        margin-bottom: 2.5rem;
    }

    .ml_50 {
        margin-left: 4rem;
    }

    .ml_30 {
        margin-left: 2.4rem;
    }

    .mr_50 {
        margin-right: 4rem;
    }

    .mr_30 {
        margin-right: 2.5rem;
    }
}

@media screen and (max-width: 780px) {
    html {
        font-size: 1.2821vw !important;
    }
}

@media screen and (max-width: 600px) {
    html {
        font-size: 1.6667vw !important;
    }
}

@media screen and (max-width: 520px) {
    html {
        font-size: 1.9231vw !important;
    }
    .fs_100 {
        font-size: 7rem;
    }

    .fs_90 {
        font-size: 6.4rem;
    }

    .fs_80 {
        font-size: 5.8rem;
    }

    .fs_70 {
        font-size: 5.4rem;
    }

    .fs_60 {
        font-size: 4.2rem;
    }

    .fs_54,
    .fs_52 {
        font-size: 4rem;
    }

    .fs_50 {
        font-size: 3.8rem;
    }

    .fs_48,
    .fs_46 {
        font-size: 3.6rem;
    }

    .fs_42,
    .fs_40 {
        font-size: 3.4rem;
    }

    .fs_38,
    .fs_36,
    .fs_34 {
        font-size: 3rem;
    }

    .fs_32,
    .fs_30 {
        font-size: 2.6rem;
    }

    .fs_28,
    .fs_26 {
        font-size: 2.4rem;
    }

    .fs_24 {
        font-size: 2.2rem;
    }

    .fs_22 {
        font-size: 2rem;
    }

    .fs_20,
    .fs_18 {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 420px) {
    html {
        font-size: 2.381vw !important;
    }

    body {
        font-size: 1.4rem;
    }
}

// @media screen and (max-width: 380px) {
//     html {
//         font-size: 2.6316vw !important;
//     }
// }

// @media screen and (max-width: 340px) {
//     html {
//         font-size: 2.9412vw !important;
//     }
// }