* {
    box-sizing: border-box;
    font-family:
        /* cursive, */
        /* 붓 느낌 */
        "Comic Sans MS",
        /* 귀엽고 장난스러운 느낌 */
        "Arial Rounded MT",
        /* 둥글고 부드러운 느낌 */
        "Trebuchet MS",
        /* 조금 더 개성 있는 느낌 */
        "Tahoma",
        /* 가독성이 좋고 부드러운 느낌 */
        sans-serif;
    /* 마지막 대체 폰트 */
}


a {
    text-decoration: none;
}

body {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
}

@media (max-width: 1279px) {
    .main {
        padding: 0 40px;
    }
}

@media (max-width: 1023px) {
    .main {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .main {
        padding: 0 16px;
    }
}

.w {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
}

.w_center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
}

.w_end {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
}

.w_line {
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
}

.content {
    margin-top: 70px;
}

.bt:hover {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.bt:active {
    transition: all 0.1s ease-in-out;
    transform: translateY(0);
}

.bt2:hover {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.bt3:hover {
    cursor: pointer;
    transform: scale(1.2);
    transition: all 0.2s ease-in-out;
}

.bt3:active {
    transform: scale(1);
    transition: all 0.1s ease-in-out;
}