:root {
    --color-black: #000;
    --color-white: #ffffff;
    --color-error: var(--color-red-400);
    --color-gray-100: #fafafa;
    --color-gray-200: #ececec;
    --color-gray-300: #cccccc;
    --color-gray-400: #808080;
    --color-gray-500: #7c7b7b;
    --color-gray-600: #696969;
    --color-gray-700: #333333;
    --color-gray-800: #222222;
    --color-gray-900: #1a1a1a;
    --color-gold-400: #9a8555;
    --color-red-300: #e92c2c;
    --color-red-400: #ea2023;
    --color-red-500: #fe0000;
    --color-green-300: #92b457;
    --color-green-400: #86b000;
    --color-green-500: #82BC00;
    --color-gaming: var(--color-red-500);
    --color-cc: var(--color-gold-400);
    --color-bp: var(--color-gold-400);
    --color-amd: var(--color-green-400);
    --color-alpha: var(--color-green-300);
    --body-bgcolor: var(--color-white);
    --body-text-color: var(--color-gray-700)
}

:root {
    --MSIBodyFont: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", "Meiryo UI", Helvetica, Arial, sans-serif;
    --body-font-size: var(--text-md);
    --title-xl: 24px;
    --title-lg: 22px;
    --title-md: 20px;
    --title-sm: 18px;
    --title-xs: 16px;
    --text-xl: 20px;
    --text-lg: 18px;
    --text-md: 17px;
    --text-sm: 16px;
    --text-xs: 15px;
    --note-lg: 16px;
    --note-xl: 14px;
    --note-md: 13px;
    --note-sm: 12px;
    --link--xl: 20px;
    --link-lg: 18px;
    --link-md: 17px;
    --link-sm: 16px;
    --link-xs: 14px;
    --line-height-xl: 2;
    --line-height-lg: 1.8;
    --line-height-md: 1.5;
    --line-height-xs: 1.3;
    --line-height-list: 1.8;
    --line-height-article: 1.8
}

@media(min-width: 992px) {
     :root {
        --title-xl: 36px;
        --title-lg: 26px
    }
}

@media(min-width: 1930px) {
     :root {
        --title-md: 22px;
        --title-sm: 20px;
        --title-xs: 17px;
        --text-lg: 19px;
        --text-md: 18px;
        --text-sm: 17px;
        --text-xs: 16px;
        --note-lg: 17px;
        --note-xl: 15px;
        --note-md: 14px;
        --note-sm: 13px;
        --link-lg: 19px;
        --link-md: 18px;
        --link-sm: 17px;
        --line-xs: 16px
    }
}

html:lang(ja-JP) body,
html:lang(JP) body {
    --MSIBodyFont: -apple-system, BlinkMacSystemFont, "Segoe UI", "Meiryo UI", "Yu Gothic", Arial, sans-serif
}

html:lang(zh-TW) body,
html:lang(zh-CN) body,
html:lang(ja-JP) body,
html:lang(JP) body,
html:lang(ko-KR) body {
    --title-sm: 17px;
    --text-md: 16px
}

@media(min-width: 1930px) {
    html:lang(zh-TW) body,
    html:lang(zh-CN) body,
    html:lang(ja-JP) body,
    html:lang(JP) body,
    html:lang(ko-KR) body {
        --title-sm: 18px;
        --text-md: 17px
    }
}

.msi__container {
    width: 100%;
    position: relative;
    padding: 0 25px;
    margin: 0 auto
}

@media(min-width: 1300px) {
    .msi__container {
        max-width: 1280px;
        padding: 0
    }
}

.fade-enter-active {
    animation: fadeIn .5s
}

.fade-leave-active {
    animation: fadeOut .5s
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

#suggestLanguage {
    background-color: var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 701
}

#suggestLanguage .suggest {
    padding-bottom: 25px
}

@media(min-width: 1300px) {
    #suggestLanguage .suggest {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0
    }
}

#suggestLanguage .suggest .mobileCross {
    text-align: right
}

@media(min-width: 1300px) {
    #suggestLanguage .suggest .mobileCross {
        display: none
    }
}

#suggestLanguage .suggest__title {
    font-size: var(--note-xl);
    color: var(--color-gray-400);
    text-align: center
}

@media(min-width: 1300px) {
    #suggestLanguage .suggest__title {
        width: 40%;
        text-align: left
    }
}

#suggestLanguage .suggest__operation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px
}

@media(min-width: 1300px) {
    #suggestLanguage .suggest__operation {
        margin-top: 0;
        justify-content: flex-start
    }
}

#suggestLanguage .suggest__operation .languageLink {
    display: inline-block;
    padding: 11px 21px;
    border-radius: 5px;
    font-size: var(--link-sm);
    background-color: var(--color-gray-400);
    color: var(--color-white)
}

#suggestLanguage .suggest__operation .languageLink:hover {
    background-color: var(--color-white);
    color: var(--color-gray-400)
}

#suggestLanguage .suggest__operation .PCCross {
    display: none
}

@media(min-width: 1300px) {
    #suggestLanguage .suggest__operation .PCCross {
        display: inline-block;
        padding: 11px 0;
        margin-left: 20px
    }
}

#suggestLanguage .suggest .customClose {
    font-size: 23px;
    vertical-align: middle;
    color: var(--color-black)
}