/* ==========================================================
   File Name : base.css
   Project   : Palette Global
   CMS       : SocialCast
   Version   : 1.0.0
   ========================================================== */


/* ==========================================================
   01. CSS Variables
   ========================================================== */

:root{

    /* Layout */
    --container-width:1280px;

    /* Header */
    --header-height:100px;

    /* Logo */
    --logo-width:220px;

    /* Spacing */
    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
    --space-2xl:64px;

    /* Brand */

    --color-primary:#674498;
    --color-primary-light:#8162af;
    --color-primary-dark:#51357b;

    /* Gray */

    --color-text:#444;
    --color-text-light:#666;

    --color-border:#ececec;

    --color-bg:#fff;

    /* Animation */

    --transition:.3s ease;

}


/* ==========================================================
   02. Reset
   ========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    font-size:16px;

    scroll-behavior:smooth;

}

body{

    margin:0;

    color:var(--color-text);

    background:#fff;

    line-height:1.7;

    font-family:
        "Noto Sans TC",
        "Noto Sans JP",
        sans-serif;

    -webkit-font-smoothing:antialiased;

}


/* ==========================================================
   03. Typography
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-weight:700;

    line-height:1.4;

}

p{

    margin:0 0 1.5em;

}

small{

    font-size:.875rem;

}


/* ==========================================================
   04. Link
   ========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}


/* ==========================================================
   05. Image
   ========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================================
   06. List
   ========================================================== */

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}


/* ==========================================================
   07. Table
   ========================================================== */

table{

    width:100%;

    border-collapse:collapse;

}


/* ==========================================================
   08. Form
   ========================================================== */

input,
textarea,
select,
button{

    font:inherit;

}

button{

    cursor:pointer;

}


/* ==========================================================
   09. Common Container
   ========================================================== */

.site-container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding-inline:24px;

}


/* ==========================================================
   10. Utility
   ========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.pc-only{

    display:block;

}

.sp-only{

    display:none;

}


/* ==========================================================
   11. Selection
   ========================================================== */

::selection{

    background:rgba(103,68,152,.15);

}


/* ==========================================================
   End
   ========================================================== */