@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Aldrich);
@import url(https://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

@font-face {
    font-family: 'AORUS';
    src: url('../../innergigabyte/fonts/AORUS.woff') format("woff");
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #222;
}

::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

@media screen and (min-width:960px) {
    #model-header {
        padding: 0.5% 0;
        position: unset;
        left: unset;
        top: unset
    }

    #model-header .header-sub-title {
        display: block
    }

    .model-content {
        margin-top: 120px;
        display: none;
    }

    .Content-TopArea .breadcrumb {
        margin-right: 0;
        margin-left: 0;
    }

    #PageMainContent .container {
        max-width: 90%;
        min-width: 90%;
    }

    .main-content .model-header>.header-sub-title {
        margin: 5px 0;
    }
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    background: black;
}

.InnerGIGABYTEContent {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    width: 100%;
    margin: auto;
    padding: 0;
}

.InnerGIGABYTEContent h3 {
    text-align: left;
    font-size: 2rem;
    font-family: "Orbitron", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    color: #ddd;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    line-height: 1.2;
}

.InnerGIGABYTEContent h4 {
    font-family: "Titillium Web", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    color: #ddd;
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
}

.InnerGIGABYTEContent p,
.InnerGIGABYTEContent ul,
.InnerGIGABYTEContent li {
    font-size: 1rem;
    line-height: 1.6rem;
    letter-spacing: 1.8px;
    color: #ddd;
    font-family: "Titillium Web", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    list-style: unset;
}

.InnerGIGABYTEContent * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
}

a.link {
    display: inline-flex;
    font-size: 0.9rem;
    color: #ffffff;
    margin: 0 0 1vw 0;
    padding: 0.5vw 2vw;
    background: #dddddd00;
    border: #46e6e6 1px solid;
    color: #46e6e6;
    font-family: "Aldrich", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    text-decoration: none;
    transition: all .3s;
}

a.link:hover {
    color: #000;
    background: #46e6e6;
    border: #ff660000 1px solid;
}

.InnerGIGABYTEContent {
    &>div {
        background-color: #000;
        max-width: 2560px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .keyfeature {
        background: url('../../innergigabyte/images/kfbg.jpg') no-repeat, linear-gradient(239.1deg, #303030, #111, #111, #111);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #111;
        padding: 10rem;

        @media screen and (max-width: 1200px) {
            padding: 15vw 10%;
            background-size: cover;
        }

        .rgb-icon {
            width: 100px;
        }

        &>div {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1600px;
            width: 100%;

            @media screen and (max-width: 1200px) {
                flex-direction: column;
                gap: 10vw;
            }

            &>img {
                width: 45vw;

                @media screen and (max-width: 1200px) {
                    width: 100%;
                }
            }
        }

        .text {
            position: relative;
            max-width: 25dvw;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            @media screen and (max-width: 1200px) {
                max-width: unset;
                width: unset;
            }

            ul {
                list-style-type: none;
            }
        }
    }

    .airflow {
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding: 5vw 0 0 0;

        @media screen and (max-width:1200px) {
            padding: 15vw 0 0 0;
        }

        @media screen and (max-width: 700px) {
            padding: 20vw 0;
        }

        .text {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 1vw;

            @media screen and (max-width: 414px) {
                padding: 0 5vw;
            }
        }

        h3 {
            @media screen and (max-width:1200px) {
                text-align: center;
            }
        }

        p {
            max-width: 600px;

            @media screen and (max-width:1200px) {
                padding: 0 5vw;
            }
        }

        video {
            position: relative;
            height: 80vh;
        }

        .imgs {
            position: relative;
            overflow: hidden;
            max-width: 1920px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            @media screen and (max-width:1200px) {
                width: 150%;
            }

            img {
                position: relative;
                width: 100%;
            }

            svg {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .max {
        position: relative;
        overflow: hidden;
        max-width: 2560px;
        width: 100%;
        height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;

        @media screen and (max-width: 1200px) {
            min-height: 90vh;
            height: unset;
            padding: 15vw 0;
        }

        .sec-container {
            position: relative;
            max-width: 1920px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .max-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .max-container {
            position: relative;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .text {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 1vw;
            z-index: 1;

            @media screen and (max-width: 1200px) {
                width: 100%;
                padding: 0;
            }

            h3 {
                @media screen and (max-width: 1200px) {
                    text-align: center;
                }
            }

            &>p {
                max-width: 600px;
                text-align: center;

                @media screen and (max-width: 1200px) {
                    padding: 0 5vw;
                }
            }

            .max-btns-group {
                max-width: 1440px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
                margin: 0 0 1dvh;

                @media screen and (max-width: 1200px) {
                    padding: 0;
                    margin: 4vw 0 0 0;
                    height: unset;
                }
            }
        }

        .max-btns-left,
        .max-btns-right {
            width: 30%;
            height: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;

            @media screen and (max-width: 1200px) {
                width: 10%;
            }

            &.transparent {
                opacity: 0;
                cursor: default;
                pointer-events: none;
            }

            &>div {
                width: 33px;
                height: 33px;
                border: #ccc 1px solid;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: all 0.5s;
                margin: 0 1vw;

                &>div {
                    position: absolute;
                    width: 9px;
                    height: 9px;
                    border-top: #ccc 1px solid;
                    border-right: #ccc 1px solid;
                    transition: all 0.5s;
                }
            }
        }

        .max-btns-left {
            justify-content: flex-end;

            &>div>div {
                transform: rotate(225deg);
                left: unset;
                right: 9px;
            }
        }

        .max-btns-right {
            justify-content: flex-start;

            &>div>div {
                transform: rotate(45deg);
                left: 9px;
            }
        }

        .max-btns-left:hover>div,
        .max-btns-right:hover>div {
            border: #46e6e6 1px solid;

            &>div {
                border-top: #46e6e6 1px solid;
                border-right: #46e6e6 1px solid;
            }
        }

        .max-btns-right>div,
        .max-btns-left>div,
        .max-btns-right:hover>div,
        .max-btns-left:hover>div {
            @media screen and (max-width: 1200px) {
                border: transparent;
            }
        }

        .max-btns {
            width: 100%;
            height: 100%;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            font-size: 0;

            .max-btn {
                vertical-align: bottom;
                position: relative;
                cursor: pointer;
                transition: all 0.5s;
                margin: 0;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                text-align: center;
                width: calc(100% / 3);
                height: 100%;
                transform: translateX(0);

                h4 {
                    position: relative;
                    margin: 0;
                    font-size: 1.2rem;
                    color: #ddd;
                    transition: all 0.5s;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    text-align: center;
                    width: 100%;
                    height: 100%;
                    padding: 0 10%;
                    white-space: normal;

                    @media screen and (max-width:1500px) {
                        font-size: .9rem;
                    }
                }

                &:hover h4,
                &.active h4 {
                    color: #46e6e6;
                }

                &>div {
                    width: 100%;
                    height: 2px;
                    margin: 1dvh 0 0 0;
                    position: relative;
                    transition: all 0.5s;
                    background-color: #565656;

                    @media screen and (max-width: 1200px) {
                        margin: 0;
                        margin: 2vh 0 0 0;
                    }
                }

                &:hover>div,
                &.active>div {
                    background-color: #46e6e6;
                }
            }
        }

        .max-imgs {
            position: relative;
            max-height: 60dvh;
            height: 65%;
            display: flex;
            justify-content: center;
            align-items: center;

            @media screen and (max-width: 1200px) {
                height: 75vw;
            }

            p {
                position: absolute;
                text-align: center;
                transform: translateY(-1rem);
                max-width: 700px;
                font-size: 0.75rem;
                line-height: 1.5;
                letter-spacing: 1px;

                @media screen and (max-width: 1200px) {
                    padding: 0 2.5vw;
                }
            }

            div {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: 0;
                transition: all 0.5s linear;

                &:first-child {
                    position: relative;
                }

                &.active {
                    opacity: 1;
                    z-index: 1;

                    & img {
                        cursor: pointer;
                    }
                }

                img {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }

    .glass {
        position: relative;
        overflow: hidden;
        max-width: 2560px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        @media screen and (max-width: 1200px) {
            padding: 10vw 0 0 0;
            flex-direction: column-reverse;
        }

        @media screen and (max-width: 414px) {
            flex-direction: column-reverse;
            padding: 0 5dvw;
        }

        &>img {
            position: relative;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        &>div {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;

            @media screen and (max-width: 1200px) {
                position: relative;
            }

            .text {
                max-width: 600px;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 1dvw;
                margin: 10rem 0 0 0;

                @media screen and (max-width: 1200px) {
                    margin: 0 5.5dvw;
                }

                h3,
                p {
                    text-align: center;
                }
            }
        }
    }

    .io {
        position: relative;
        overflow: hidden;
        max-width: 2560px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        @media screen and (max-width: 1200px) {
            margin: 0;
        }

        &>img {
            position: relative;
            object-fit: cover;
            width: 100%;
            height: 100%;

            @media screen and (max-width: 1200px) {
                width: 200%;
            }
        }

        &>div {
            position: absolute;
            max-width: 1920px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 5% 0 0;

            .text {
                position: absolute;
                width: 40%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: 1dvw;
            }
        }
    }

    .easyinstall {
        position: relative;
        overflow: hidden;
        max-width: 2560px;
        width: 100%;
        display: grid;
        justify-items: center;
        align-items: center;
        gap: 2.5vw;
        padding: 5vw;
        background-color: #121212;

        @media screen and (max-width: 1200px) {
            padding: 15vw 5vw;
        }

        &>div {
            max-width: 1440px;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                'img0 txt0'
                'txt1 img1'
                'img2 txt2';

            @media screen and (max-width: 1200px) {
                display: flex;
                flex-direction: column;
                gap: 1dvw;
            }

            @media screen and (max-width: 414px) {
                gap: 10dvw;
            }

            .img0 {
                grid-area: img0;
            }

            .txt0 {
                grid-area: txt0;
            }

            .img1 {
                grid-area: img1;
            }

            .txt1 {
                grid-area: txt1;
            }

            .img2 {
                grid-area: img2;
            }

            .txt2 {
                grid-area: txt2;
            }

            &>div {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                flex-direction: column;
                gap: 1dvw;

                &:nth-child(even) {
                    padding: 0 10%;

                    @media screen and (max-width: 1200px) {
                        padding: 0 5% 15%;
                    }
                }

                &:nth-child(4n+2) {
                    align-items: flex-start;
                }

                &:nth-child(4n+1) h3,
                &:nth-child(4n+1) p,
                &:nth-child(4n+2) h3,
                &:nth-child(4n+2) p {
                    text-align: left;
                }

                &:nth-child(4n+3) {
                    align-items: flex-end;
                }

                &:nth-child(4n+3) h3,
                &:nth-child(4n+3) p,
                &:nth-child(4n+4) h3,
                &:nth-child(4n+4) p {
                    text-align: right;

                    @media screen and (max-width: 1200px) {
                        text-align: left;
                    }
                }

                &:last-child {
                    @media screen and (max-width: 1200px) {
                        padding: 0 5% 0;
                    }
                }

                .text {
                    padding: 0 2.5dvw;

                    @media screen and (max-width: 1200px) {
                        margin: 10dvw 0 0 0;
                    }

                    h3 {
                        @media screen and (max-width: 414px) {
                            text-align: center;
                        }
                    }
                }
            }

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

    .dots {
        position: fixed;
        right: 1dvw;
        top: 50%;
        color: white;
        z-index: 9999;
        display: grid;
        justify-items: flex-end;
        gap: 16px;
        overflow: hidden;
        transform: translateY(-50%);
        background-color: unset;
        max-width: unset;
        width: unset;
        justify-content: unset;
        align-items: unset;

        @media screen and (max-width: 1200px) {
            display: none;
        }

        a {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            &:hover {
                text-decoration-color: #00000000;
            }

            p {
                white-space: nowrap;
                color: #ffffff90;
                font-size: 8px;
                text-align: right;
                opacity: 0;
                pointer-events: none;
                padding: 0 8px 0 0;
                position: relative;
                left: 100%;
                font-family: "Titillium Web", 'Arial', "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
                width: 0;
            }

            &:hover p {
                opacity: 1;
                pointer-events: unset;
                left: 0;
                width: 100%;
                transition: all .5s;
            }

            div {
                background-color: #ffffff30;
                width: 6px;
                height: 26px;
                border-radius: 3px;
                transition: .2s;

                &.active {
                    background-color: #ffffff90;
                }
            }

            &:hover div {
                background-color: #ffffff90;
            }
        }
    }
}

/* overlay popup */
.InnerGIGABYTEContent {
    .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        width: unset;
        translate: -50% -50%;
        z-index: 100;
        display: flex;
        flex-direction: column;
        max-width: 95dvw;
        max-height: 95dvh;
        overflow: unset;
        background-color: #00000000;

        .popup-content {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            backdrop-filter: blur(50px);

            &::after {
                content: '\00D7';
                position: absolute;
                width: 32px;
                height: 32px;
                font-size: 32px;
                line-height: 32px;
                right: 0;
                top: 0;
                translate: 100% -100%;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: none;
            }

            img {
                position: relative;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 75%);
        z-index: 99;
    }
}