@media screen and (max-width: 1680px) {
    .InnerGIGABYTEContent h4 {
        margin: 0;
        padding: 0;
        font-family: "Titillium Web", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.0rem;
        text-align: left;
        line-height: 1;
        letter-spacing: 0;
        word-spacing: 0;
        color: #ddd;
    }

    .diagram.diagram1 .spectext[data-spectext="1"] {
        left: -24.5572%;
        top: -6.04861%;
    }

    .diagram.diagram1 .spectext[data-spectext="2"] {
        left: -24.4871%;
        top: 5.38194%;
    }

    .diagram.diagram1 .spectext[data-spectext="3"] {
        left: -24.765%;
        top: 25.6435%;
    }

    .diagram.diagram1 .spectext[data-spectext="4"] {
        left: -24.4344%;
        top: 34.5278%;
    }

    .diagram.diagram1 .spectext[data-spectext="5"] {
        left: -24.5923%;
        top: 41.6759%;
    }

    .diagram.diagram1 .spectext[data-spectext="6"] {
        left: -24.5572%;
        top: 50.8634%;
    }

    .diagram.diagram1 .spectext[data-spectext="7"] {
        left: -24.4336%;
        top: 64.1921%;
    }

    .diagram.diagram1 .spectext[data-spectext="8"] {
        left: -24.0846%;
        top: 85.8877%;
    }

    .diagram.diagram1 .spectext[data-spectext="9"] {
        left: 98.313%;
        top: 81.25%;
    }

    .diagram.diagram1 .spectext[data-spectext="10"] {
        left: 97.8693%;
        top: 3.27894%;
    }

    .diagram.diagram1 .spectext[data-spectext="11"] {
        left: 98.0973%;
        top: 23.5417%;
    }

    .diagram.diagram1 .spectext[data-spectext="12"] {
        left: 97.7667%;
        top: 34.3264%;
    }

    .diagram.diagram1 .spectext[data-spectext="13"] {
        left: 97.7843%;
        top: 54.2083%;
    }

    .diagram.diagram1 .spectext[data-spectext="14"] {
        left: 98.0973%;
        top: 69.912%;
    }

    .diagram.diagram1 .spectext[data-spectext="15"] {
        left: -24.3476%;
        top: 72.5%;
    }

    .diagram.diagram1 .spectext[data-spectext="16"] {
        left: 98.2437%;
        top: 97.6204%;
    }

    .diagram.diagram1 .specpoint[data-spectext="1"] {
        left: 35.1852%;
        top: 2.2963%;
    }

    .diagram.diagram1 .specpoint[data-spectext="2"] {
        left: 6.90236%;
        top: 5.70139%;
    }

    .diagram.diagram1 .specpoint[data-spectext="3"] {
        left: 9.14703%;
        top: 32.5139%;
    }

    .diagram.diagram1 .specpoint[data-spectext="4"] {
        left: 10.7183%;
        top: 41.25%;
    }

    .diagram.diagram1 .specpoint[data-spectext="5"] {
        left: 4.65769%;
        top: 40.963%;
    }

    .diagram.diagram1 .specpoint[data-spectext="6"] {
        left: 11.9529%;
        top: 51.7778%;
    }

    .diagram.diagram1 .specpoint[data-spectext="7"] {
        left: 38.1033%;
        top: 64.9583%;
    }

    .diagram.diagram1 .specpoint[data-spectext="8"] {
        left: 24.2968%;
        top: 92.5116%;
    }

    .diagram.diagram1 .specpoint[data-spectext="9"] {
        left: 81.9971%;
        top: 95%;
    }

    .diagram.diagram1 .specpoint[data-spectext="10"] {
        left: 40.1235%;
        top: 33.7014%;
    }

    .diagram.diagram1 .specpoint[data-spectext="11"] {
        left: 80.3013%;
        top: 31.0301%;
    }

    .diagram.diagram1 .specpoint[data-spectext="12"] {
        left: 59.8748%;
        top: 30%;
    }

    .diagram.diagram1 .specpoint[data-spectext="13"] {
        left: 64.5886%;
        top: 57.2593%;
    }

    .diagram.diagram1 .specpoint[data-spectext="14"] {
        left: 67.5032%;
        top: 62.2963%;
    }

    .diagram.diagram1 .specpoint[data-spectext="15"] {
        left: 45.7334%;
        top: 94.1412%;
    }

    .diagram.diagram1 .specpoint[data-spectext="16"] {
        left: 53.1408%;
        top: 93.8519%;
    }
}

@media screen and (max-width: 1366px) {
    .InnerGIGABYTEContent h3 {
        letter-spacing: 4px;
    }

    .InnerGIGABYTEContent h4 {
        letter-spacing: 1px;
    }

    .InnerGIGABYTEContent h5 {
        letter-spacing: 1px;
        line-height: 1.2;
    }

    #keyf,
    .keyf {
        padding: 3rem;
    }

    .keyf>div {
        flex-direction: column;
        gap: 3rem;
    }

    .keyf>div .text h3,
    .keyf>div .text p {
        text-align: center;
    }

    .keyf>div .text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #overview,
    .overview {
        padding: 3rem;
        gap: 2rem;
    }

    .overview>div {
        flex-direction: column;
        gap: 2rem;
    }

    .diagram .spectext {
        display: none;
        pointer-events: none;
        opacity: 0;
    }

    :root {
        --pointsize: 20px;
    }

    .diagram .specpoint span {
        max-width: var(--pointsize);
        max-height: var(--pointsize);
        color: var(--linecolor);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        z-index: 2;
        clip-path: unset;
    }

    .diagram .specpoint::after {
        width: var(--pointsize);
        height: var(--pointsize);
        background-color: transparent;
    }

    .diagram .specpoint span.topright {
        border-top: unset;
        border-right: unset;
        right: unset;
        bottom: unset;
    }

    .diagram .specpoint span.topleft {
        border-top: unset;
        border-left: unset;
        left: unset;
        bottom: unset;
    }

    .diagram .specpoint span.bottomright {
        border-bottom: unset;
        border-right: unset;
        right: unset;
        top: unset;
    }

    .diagram .specpoint span.bottomleft {
        border-bottom: unset;
        border-left: unset;
        left: unset;
        top: unset;
    }

    .overview ul.diagram-list {
        list-style-type: decimal;
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: .4rem;
    }

    .overview ul.diagram-list li {
        cursor: unset;
    }

    .overview ul.diagram-list li ul li {
        font-size: .9rem;
    }

    .overview ul.diagram-list h4 {
        font-weight: normal;
        font-size: 1rem;
        letter-spacing: 2px;
    }

    #ud,
    .ud {
        padding: 0 3rem;
    }

    .ud section>div {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    .ud .cols>div.col .text {
        position: relative;
        padding: 5rem 2rem 0;
    }

    .ud .cols>div {
        width: 100%;
    }

    .ud section>div svg {
        display: none;
    }

    .ud section>div p,
    .ud section>div ul {
        opacity: 1;
    }

    .ud .cols>div>div.pgsbar {
        width: 100%;
        padding: 0;
        bottom: unset;
        top: 1rem;
    }

    #slidecard,
    .slidecard {
        padding: 0 3rem;
    }

    .slidecard .spacers {
        display: none;
    }

    .slidecard .camera {
        gap: 5vw;
        height: unset;
        position: relative;
        overflow: unset;
        padding: 10vw 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slidecard .camera>img {
        margin: unset;
        inset: unset;
        object-fit: cover;
    }

    .slidecard .sliders {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .slidecard .slider {
        width: 100%;
        padding: 2rem 2rem 0;
    }

    .slidecard .text {
        padding: 0;
        min-width: unset;
    }

    .slidecard .text h4,
    .slidecard .text p {
        max-width: 100%;
    }

    .slidecard .text span {
        display: none;
    }

    .slidecard .imgs {
        height: 50%;
        bottom: 0;
    }

    .slidecard .audio .imgs img {
        opacity: .2;
    }

    #easy,
    .easy {
        padding: 0 3rem;
    }

    .easy .main .text h3,
    .easy .main .text h5 {
        text-align: center;
    }

    .easybg {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .easybg img {
        width: unset;
        height: 100%;
        top: unset;
        left: unset;
    }

    .easy .cols {
        display: flex;
        flex-direction: column;
    }

    .easy .cols>div {
        width: 100%;
    }

    .easy .col:not(.gcc):not(.smartfan):nth-child(even),
    .easy .col:not(.gcc):not(.smartfan):nth-child(odd) {
        transform: translateX(0);
    }

    .easy .cols>div.smartfan {
        flex-direction: column;
    }

    .easy .cols>div.gcc img {
        width: 190%;
    }

    .brandslide {
        padding: 3rem;
    }

    .brandslide .spacers {
        display: none;
    }

    .brandslide .camera {
        position: relative;
        height: unset;
    }

    .brandslide .camera>img {
        display: none;
    }

    .brandslide .sliders {
        width: 100%;
        flex-direction: column;
    }

    .brandslide .slider {
        width: 100%;
        height: unset;
        border-radius: unset;
    }

    .brandslide .imgs {
        position: relative;
    }

    div.dots {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .keyf>div .text aside {
        gap: 1rem;
    }

    .keyf>div .text aside p {
        letter-spacing: 0;
    }

    .easy .cols>div.gcc .text,
    .easy .cols>div.gcc .text .title,
    .easy .cols>div.gcc .text ul {
        align-items: flex-start;
    }

    .easy .cols>div.gcc .text p {
        text-align: left;
    }
}