/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

:root {
    --green-header: linear-gradient(90deg, #96be78, #28786e);
    --red-header: linear-gradient(90deg, #dcb4a0, #f07850);
    --purple-header: linear-gradient(90deg, #b6babf, #8282b4);
    --white: #fff;
    --black: #000;
    --font-b-color: #2878d2;
    --font-gray: #969696;
    --font-black-deep: #323232;
    --text-mute: #6c757d;
    --purple-deep: #655985;
    --bg-light: rgba(0, 0, 0, .1);
    --bg-dark: rgba(0, 0, 0, .4);
    --bg-dark-cover: rgba(0, 0, 0, .7);
    --bg-gray: hsla(0, 0%, 98%, .9);
    --bg-blue-deep: #3264f0;
    --header-btn: #00000066;
    --line-gray: #00000010;
    --blue-deep: #354458;
    --blue-new: #3a9ad9;
    --bluedeep-new: #2181bf;
    --border-gray: #aeaeaf;
    --bluelight: #eef7ff;
    --btn-style-green: #46bebe;
    --btn-style-blue: #6478b4;
    --btn-style-red: #f06478;
    --btn-style-purple: #96648c;
    --btn-blue: #3264f0;
    --btn-blue-light: #ecedef;
    --btn-green: #148c50;
    --btn-red: #d43343;
    --btn-red-deep: #ba1f2d;
    --btn-yellow: #faa01e;
    --btn-yellow-light: #e2e3e5;
    --btn-orange: #ff5000;
    --btn-gray: #dcdcdc;
    --btn-gray-deep: #646464;
    --btn-gray-black: #323232;
    --btn-bo-blue-deep: #0000001a;
    --input-blue: #d2f0f0;
    --input-orange: #ffe6c8;
    --input-gray-light: #f0f0f0;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: Noto Sans TC, Helvetica;
}

html {
    position: relative;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-gray);
}

input,
select,
span,
textarea {
    outline: none;
}

button {
    border: none;
}

button:hover {
    cursor: pointer;
}

img {
    width: 100%;
    height: 100%;
}

input,
textarea {
    width: 196px;
    font-size: 14px;
    padding: 12px 20px;
    margin-right: 0;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid;
    border-color: #0000001a;
    cursor: pointer;
}

input {
    height: 48px;
}

textarea {
    min-height: 48px;
}

input:read-only,
input:disabled,
textarea:read-only,
textarea:disabled,
select:disabled {
    cursor: default !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

@media only screen and (max-width: 767px) {
    .desktop {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .container .desktop {
        display: none;
    }
}