@charset "UTF-8";

::-webkit-scrollbar {
    width: 0;
}

#divGoTop {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

.inside-mouse.InnerGIGABYTEContent {
    max-width: 2560px;
    margin: auto;
    padding: 0;
    width: 100%;
}

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

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

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

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

@media screen and (max-width:1440px) and (min-width:1201px) {

    .InnerGIGABYTEContent h3,
    .InnerGIGABYTEContent .h3 {
        font-size: 15px;
    }

    .InnerGIGABYTEContent h4,
    .InnerGIGABYTEContent .h4 {
        font-size: 12px;
    }

    .InnerGIGABYTEContent p {
        font-size: 9px;
    }
}

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

    .InnerGIGABYTEContent h3,
    .InnerGIGABYTEContent .h3 {
        font-size: 28px;
        line-height: 1.1;
    }
}

.noise-effects {
    display: none;
}

.KVsection {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
}

.KVsection img {
    height: 100%;
}

.KV-text {
    position: absolute;
    width: 100%;
    height: 20%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.KV-text h3 {
    text-shadow: 0 0 20px #00d9ff, 0 0 20px #00d9ff;
    margin: 0;
    text-align: center;
}

@media screen and (max-width:1440px) and (min-width:1201px) {
    .KV-text h3 {
        font-size: 36px;
    }
}

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

@media screen and (max-width:800px) {
    .KV-text h3 {
        font-size: 18px;
    }
}

.sec1 {
    max-width: 2560px;
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 62px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.cycle-slideshow {
    max-width: 2560px;
    width: 100%;
    height: calc(100vh - 262px);
}

@media screen and (max-width:1200px) {
    .cycle-slideshow {
        height: 100vh;
    }
}

.cycle-slide {
    max-height: 100%;
    width: 100%;
    padding: 3% 10% 0;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.cycle-BG {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 2560px;

}

.cycle-imgs {
    position: relative;
    z-index: 1;
    width: 55%;
}

.cycle-img {
    position: relative;
    z-index: 2;
    width: 100%;
    /* -webkit-filter: url(#noise);
    filter: url(#noise); */
}

.cycle-img-frame {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    pointer-events: none;
}

.cycle-img-foot {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    pointer-events: none;
}

.sec1 .cycle-text {
    padding: 0 0 0 4%;
}

.cycle-text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 45%;
    /* -webkit-filter: url(#noise);
    filter: url(#noise); */
}

.panel-btns {
    width: 100%;
    height: 100%;
    max-height: 200px;
    overflow: hidden;
    position: relative;
    z-index: 101;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10% 0 0;
}

#panel-pager {
    height: 100%;
    max-height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#panel-pager div {
    height: 100%;
    padding: 0 0 0 30px;
    filter: grayscale(1) brightness(0.5);
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel-pager div.cycle-pager-active {
    transform: translateY(-1px);
    filter: grayscale(0);
}

.panel-btns img {
    height: 100%;
    cursor: pointer;
}

@media screen and (max-width:1440px) and (min-width:1201px) {
    .cycle-slideshow {
        height: calc(100vh - 142px);
    }

    .cycle-imgs {
        width: 40%;
    }

    .cycle-text {
        width: 50%;
    }

    .panel-btns {
        margin: 0 0 15px 0;
    }
}

@media screen and (max-width:1200px) {
    .sec1 {
        justify-content: flex-end;
        height: unset;
    }

    .cycle-slide {
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

    .cycle-text h3 {
        margin: 0;
    }

    .cycle-img-frame,
    .cycle-img-foot {
        display: none;
    }

    .panel-btns {
        width: 100%;
        height: 5px;
        position: relative;
        right: 0;
        bottom: 0;
        padding: 0;
    }

    #panel-pager {
        width: 100%;
    }

    #panel-pager div {
        background: #ff6400;
        width: 100%;
    }

    .panel-btns img {
        width: 0;
    }
}

#designconcept {
    height: calc(100vh - 62px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    background-image: url(../innergigabyteimages/designConcept/bg.jpg);
    animation: bgGlow 1s infinite linear alternate;
    background-size: cover;
}

.designconcept-bg {
    display: none;
    width: 2560px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bgGlow 1s infinite linear alternate;
}

.designconcept-text {
    width: 50%;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    backdrop-filter: blur(15px);
}

.designconcept-text h3 {
    margin: 0;
}

@media screen and (max-width:1200px) {
    #designconcept {
        background: none;
        flex-direction: column;
        margin: 10% 0 0 0;
    }

    .designconcept {
        height: 50%;
    }

    .designconcept-bg {
        display: block;
    }

    .designconcept-text {
        width: 100%;
        height: 50%;
        padding: 15% 10%;
    }
}

.sec2 {
    max-width: 2560px;
    width: 100%;
    margin: 5% 0;
}

.rgb-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10% 1%;
}

.rgb-text .left {
    width: 100%;
    max-width: 1000px;
}

.rgb-text h3,
.rgb-text h4 {
    text-align: left;
}

.rgb-text p {
    text-align: left;
    width: 100%;
    max-width: 870px;
}

.rgb-text span {
    margin-top: 10px;
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ff6400;
}

.rgb-text a {
    font-weight: bold;
}

.rgb-text a:hover {
    color: #fff;
    text-shadow: 0 0 10px #ff6400, 0 0 20px #ff6400, 0 0 30px #ff6400;
    text-decoration-line: none;
}

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

.rgb-logo {
    width: 100%;
    max-width: 120px;
}

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

.rgb-imgs {
    width: 100%;
    position: relative;
}

.rgb-bgs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 0 99%, 100% 99%, 100% 0);
}

.rgb-bgs img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.rgb-bgs img.active {
    display: flex;
}

.rgb-cover {
    width: 100%;
    position: relative;
    z-index: 1;
}

.huerotate {
    animation: huerotate 4s linear infinite;
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0);
    }

    100% {
        filter: hue-rotate(359deg);
    }
}

.flash {
    animation: flash .5s linear infinite;
}

@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.doubleflash {
    animation: doubleflash 1s linear infinite;
}

@keyframes doubleflash {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.pulse {
    animation: pulse 4s linear infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .1;
    }

    100% {
        opacity: 1;
    }
}

.rgb-btn-colorpicker {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.rgb-btns {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 1% 5% 0 10%;
}

.rgb-btns::-webkit-scrollbar {
    height: 0px;
}

.rgb-btns>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 25px;
    cursor: pointer;
    filter: grayscale(1);
    max-width: 110px;
    transition: all .5s;
}

.rgb-btns>div:hover {
    filter: grayscale(0);
    transform: translateY(-1px)
}

.rgb-gesture {
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
    animation-name: rgb-gesture;
    height: 60px;
    position: absolute;
    pointer-events: none;
    top: 20%;
    left: 0;
    display: none;
    opacity: .6;
    transition: all 1s;
}

@keyframes rgb-gesture {
    0% {
        left: 40%;
    }

    100% {
        left: 60%;
    }
}

#wheelPicker {
    display: block;
}

#sliderPicker {
    display: none;
    padding: 5% 0 0 0;
}

@media screen and (max-width:1200px) {
    .rgb-btns {
        padding: 0;
    }
}

@media screen and (max-width:900px) {
    .rgb-btn-colorpicker {
        flex-direction: column;
    }

    .rgb-btns {
        justify-content: flex-start;
        overflow: auto;
        padding: 0;
        margin: 0 10%;
        width: 100%;
    }

    .rgb-btns>div {
        padding: 0 6px;
    }

    .rgb-btns p {
        font-size: 12px;
        line-height: 1.5;
        display: none;
    }

    .rgb-gesture {
        display: block;
    }

    #wheelPicker {
        display: none;
    }

    #sliderPicker {
        display: block;
    }
}

.rgb-btns p {
    color: #ff6400;
    text-align: center;
    line-height: 1;
}

.sec3 {
    max-width: 2560px;
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 62px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.sec3 .cycle-slide {
    flex-direction: row-reverse;
}

.sec3 .cycle-text {
    padding: 0 4% 0 0;
}

.anc-ani {
    position: absolute;
    top: 0;
    left: 0;
    animation: anc-ani 6s infinite;
}

@keyframes anc-ani {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.feature-btns {
    width: 100%;
    height: 100%;
    max-height: 200px;
    overflow: hidden;
    position: relative;
    z-index: 101;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 0 10%;
}

#feature-pager {
    max-height: 100px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#feature-pager div {
    height: 100%;
    padding: 0 30px 0 0;
    filter: grayscale(1) brightness(0.5);
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#feature-pager div.cycle-pager-active {
    transform: translateY(-1px);
    filter: grayscale(0);
}

.feature-btns img {
    height: 100%;
    cursor: pointer;
}

@media screen and (max-width:1440px) and (min-width:1201px) {
    .feature-btns {
        margin: 0 0 15px 0;
    }
}

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

    .cycle-img-frame,
    .cycle-img-foot {
        display: none;
    }

    .cycle-imgs {
        width: 100%;
        pointer-events: none;
    }

    .sec1 .cycle-text,
    .sec3 .cycle-text {
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width:1200px) {
    .sec3 {
        justify-content: flex-end;
        height: unset;
    }

    .sec3 .cycle-slide {
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

    .feature-btns {
        width: 100%;
        height: 5px;
        margin: 0;
        padding: 0;
        left: 0;
        position: relative;
        bottom: 0;
    }

    #feature-pager {
        width: 100%;
    }

    #feature-pager div {
        background: #ff6400;
        width: 100%;
    }

    .feature-btns img {
        width: 0;
    }
}

.sec4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../innergigabyteimages/ergonomic/ergonomicbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5% 10% 10%;
}

.ergonomic-text {
    width: 100%;
    padding: 0 0 2%;
}

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

.ergonomic-imgs>div {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.ergonomic-imgs>div img {
    width: 100%;
    pointer-events: none;
}

.ergonomic1-2 {
    position: absolute;
    left: 0;
    top: 0;
    animation: ergonomic1-2 2s infinite alternate ease-in-out;
}

@keyframes ergonomic1-2 {
    0% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

.ergonomic2-2 {
    position: absolute;
    left: 0;
    top: 0;
    animation: ergonomic2-2 2s infinite alternate ease-in-out;
}

@keyframes ergonomic2-2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

.ergonomic3-1 {
    position: absolute;
    left: 0;
    top: 0;
    animation: ergonomic3-1 2s infinite alternate ease-in-out;
}

@keyframes ergonomic3-1 {
    0% {
        transform: translateY(11%);
    }

    100% {
        transform: translateY(-8%);
    }
}

.ergonomic3-2 {
    position: relative;
}

.ergonomic4-1 {
    position: absolute;
    left: 0;
    top: 0;
    animation: ergonomic4-1 2s infinite alternate ease-in-out;
}

@keyframes ergonomic4-1 {
    0% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(21deg);
    }
}

@media screen and (max-width:1200px) {
    .ergonomic-imgs {
        flex-direction: column;
    }
}

.sec5 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 10%;
}

.features {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.sec5 h3 {
    margin: 60px 0 30px;
}

.features h4 {
    margin: 0;
    text-align: left;
}

.features p {
    text-align: left;
}

.features>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 750px;
    padding: 0 0 25px 0;
}

.features>div>div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.features img {
    width: 100%;
    max-width: 130px;
}

@media screen and (max-width:1200px) {
    .features {
        flex-direction: column;
    }
}

.GameAssistImgs {
    overflow: hidden;
}

.GameAssistImgs img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all .5s cubic-bezier(0, 0, 0, 1);
}

.GameAssistImgs img:first-child {
    position: relative;
}

.GameAssistDots {
    width: 100%;
    height: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 3;
    transform: translateY(0%);
    transition: all 1s;
    opacity: 0;
}

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

.cycle-slide-active .GameAssistDots {
    transform: translateY(-100%);
    opacity: 1;
}

.GameAssistDots div {
    width: 100%;
    height: 100%;
    background: #242424cc;
    filter: saturate(0);
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff6400;
    font-family: 'Aldrich';
    font-size: .9rem;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: none;
}

.GameAssistDots div:first-child {
    border-left: 1px solid #000;
    border-right: none;
}

.GameAssistDots div:last-child {
    border-left: none;
    border-right: 1px solid #000;
}

.GameAssistDots div.active {
    filter: saturate(1);
    background: #515151e0;
}

.GameAssistDots div:hover {
    filter: brightness(1.1);
}

@media screen and (max-width:1440px) and (min-width:1201px) {
    .GameAssistDots div {
        font-size: 8px;
    }
}

.sec6 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 10%;
}

.io {
    width: 100%;
    text-align: center;
}

.io img {
    width: 100%;
    max-width: 1500px;
}

.InnerGIGABYTEContent .sec5 a:hover,
.InnerGIGABYTEContent .sec5 a:focus {
    color: #fff;
    text-decoration: none;
}

.illustration-announce {
    position: relative;
    z-index: 999;
}

.illustration-announce p {
    text-align: center;
}

/************************************************************************** dots **************************************************************************/
.dots {
    position: fixed;
    right: 0;
    top: 50%;
    color: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    margin: 0 20px 0 0;
    overflow: hidden;
    transform: translateY(calc(-50% + 30px));
}

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

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

.dots a div {
    background-color: white;
    width: 10px;
    height: 10px;
}

.dots a div.active {
    background-color: #ff6400;
}

.dots a:hover {
    text-decoration-color: #00000000;
}

.dots a:hover p {
    opacity: 1;
    pointer-events: unset;
    left: 0;
}

.dots a:hover div {
    background-color: #ff6400;
}

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

.hide-dot {
    display: none;
}

/************************************************************************** dots **************************************************************************/