@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);
@import url(https://fonts.googleapis.com/css?family=Play);

@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: #000;
}

html {
    scroll-behavior: smooth;
}

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

.InnerGIGABYTEContent h1 {
    margin: 0;
    padding: 0;
    font-family: "AORUS", "Aldrich", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 3rem;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 4px;
    word-spacing: 8px;
    color: white;
}

.InnerGIGABYTEContent h2 {
    margin: 0;
    padding: 0;
    font-family: "AORUS", "Aldrich", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 3.5rem;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 4px;
    word-spacing: 8px;
    color: white;
}

.InnerGIGABYTEContent h3 {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "AORUS", "Aldrich", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.5;
    text-align: left;
    letter-spacing: 3px;
    word-spacing: 8px;
    color: white;
}

.InnerGIGABYTEContent h4 {
    margin: 0;
    padding: 0;
    font-family: "Aldrich", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0;
    word-spacing: 0;
    color: white;
}

.InnerGIGABYTEContent h5 {
    margin: 0;
    padding: 0;
    font-family: "Titillium Web", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0;
    word-spacing: 0;
    color: white;
}

.InnerGIGABYTEContent p,
.InnerGIGABYTEContent a,
.InnerGIGABYTEContent ul,
.InnerGIGABYTEContent li {
    margin: 0;
    padding: 0;
    font-family: "Titillium Web", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    text-align: left;
    line-height: 2;
    letter-spacing: 0;
    word-spacing: 0;
    color: #ccc;
}

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

:root {
    --padlr: 35px;
    --legs: 10px;
    --clipborder: 1px;
    --sqrt2: 1.4142135624;
}

.InnerGIGABYTEContent aside:has(>a.learnmore) {
    display: flex;
    height: 50px;
}

.InnerGIGABYTEContent aside:has(>a.learnmore) div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #ff6400;
}

.InnerGIGABYTEContent a.learnmore {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    background: none;
    transition: 0.2s;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: none;
    text-decoration-line: none;
    inline-size: fit-content;
    padding: 0 calc(var(--padlr) + var(--legs)) 0 var(--padlr);
}

.InnerGIGABYTEContent a.learnmore span {
    position: relative;
}

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

.InnerGIGABYTEContent a.learnmore::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ff6400;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--legs)), calc(100% - var(--legs)) 100%, calc(100% - var(--legs) - (var(--clipborder) / var(--sqrt2))) calc(100% - var(--clipborder)), calc(100% - var(--clipborder)) calc(100% - var(--legs) - (var(--clipborder) / var(--sqrt2))), calc(100% - var(--clipborder)) calc(0% + var(--clipborder)), calc(0% + var(--clipborder)) calc(0% + var(--clipborder)), calc(0% + var(--clipborder)) calc(100% - var(--clipborder)), calc(100% - var(--legs) - (var(--clipborder) / var(--sqrt2))) calc(100% - var(--clipborder)), calc(100% - var(--legs)) 100%, 0% 100%);
}

.InnerGIGABYTEContent {
    position: relative;
    display: grid;
}

#calculator,
.calculator {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rem 0;
}

.calculator .BG {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calculator>section {
    position: relative;
    max-width: 1600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.calculator .text {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

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

.calculator ul {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.calculator ul li label p {
    text-align: center;
}

.calculator ul li div:has(>img) {
    display: flex;
}

.calculator ul li div:has(>img) img {
    height: 30px;
}

.calculator .custom-select-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.calculator .custom-select-wrapper:after {
    content: "\25BE";
    position: absolute;
    right: 12px;
    top: 6%;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    color: #fff;
}

.calculator select {
    width: 100%;
    background: transparent;
    padding: 8px 35px 8px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}

.calculator select:hover {
    border-color: #00d0ff;
}

.calculator select option {
    color: #000;
}

.calculator select option:hover {
    color: #000;
}

.calculator .totalWattage {
    display: grid;
    justify-items: center;
    border-bottom: 1px solid white;
    padding: 0 0 0.5rem 0;
}

.calculator .totalWattage h3:has(span) {
    display: inline-block;
    background: -webkit-linear-gradient(0deg, #00d0ff, #ff00bf);
    font-family: "Aldrich", "微軟正黑體", Microsoft JhengHei, "微軟雅黑體", Microsoft YaHei, SimHei, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "新細明體", Arial, Verdana, Helvetica, sans-serif;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding: .5rem 0 0 0;
    word-spacing: 0;
}

.InnerGIGABYTEContent .calculator aside:has(>a.learnmore) div {
    background-color: #00d0ff;
}

.InnerGIGABYTEContent .calculator a.learnmore:hover {
    text-shadow: 0 0 10px #00d0ff, 0 0 20px #00d0ff, 0 0 30px #00d0ff;
}

.InnerGIGABYTEContent .calculator a.learnmore {
    padding: 0 var(--padlr);
}

.InnerGIGABYTEContent .calculator a.learnmore::before {
    background-color: #00d0ff;
    clip-path: polygon(0 0, 0% 100%, calc(0% + var(--clipborder)) 100%, calc(0% + var(--clipborder)) calc(0% + var(--clipborder)), calc(100% - var(--clipborder)) calc(0% + var(--clipborder)), calc(100% - var(--clipborder)) calc(100% - var(--clipborder)), calc(0% + var(--clipborder)) calc(100% - var(--clipborder)), calc(0% + var(--clipborder)) 100%, 100% 100%, 100% 0%);
}

#totalWattage,
#divider {
    display: none;
}

.calculator .logos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.calculator .logos img {
    max-width: 60px;
    width: 100%;
}

.calculator .logos img:nth-child(1) {
    max-width: unset;
    height: 60px;
    grid-area: pg5;
}

#aorusseries,
.aorusseries {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.aorusseries .pattern {
    position: relative;
    max-width: 120px;
    width: 100%;
}

.aorusseries section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aorusseries section .KV {
    max-width: 1200px;
    width: 100%;
}

.aorusseries .BG {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.aorusseries .text {
    position: relative;
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aorusseries .text h3 {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    white-space: nowrap;
}

.aorusseries .text h3 span.scaleUp {
    font-size: 3.5rem;
}

.aorusseries .text h3::before {
    content: '';
    background-image: url(../images/AORUS-line.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 3px;
    height: calc(2rem * 1.5);
    transform: scaleY(1.5);
}

.aorusseries .text p span {
    color: #ff6400;
}

.aorusseries .text ul {
    list-style-type: disc;
    padding: 0 0 0 1.1rem;
}

.aorusseries .text ul p {
    text-indent: -1.1rem;
}

.InnerGIGABYTEContent .aorusseries aside:has(>a.learnmore) div {
    background-color: #00d0ff;
}

.InnerGIGABYTEContent .aorusseries .text a.learnmore {
    color: #fff;
}

.InnerGIGABYTEContent .aorusseries .text a.learnmore:hover {
    text-shadow: 0 0 10px #00d0ff, 0 0 20px #00d0ff, 0 0 30px #00d0ff;
}

.InnerGIGABYTEContent .aorusseries .text a.learnmore::before {
    background-image: linear-gradient(90deg, #00d0ff, #ff00bf);
}

#udseries,
.udseries {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1dvw;
    padding: 0 5rem 0 0;
}

.udseries .pattern {
    position: relative;
    max-width: 240px;
    width: 100%;
}

.udseries .BG {
    position: relative;
    max-width: 60vw;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.udseries .BG img {
    height: 100%;
    object-fit: cover;
}

.udseries .text {
    position: relative;
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.udseries .text h3 {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    white-space: nowrap;
}

.udseries .text h3 span.scaleUp {
    font-size: 3.5rem;
}

.udseries .text h3::before {
    content: '';
    background-image: url(../images/UD-line.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 3px;
    height: calc(2rem * 1.5);
    transform: scaleY(1.5);
}

.udseries .text p span {
    color: #ff6400;
}

.udseries .text ul {
    list-style-type: disc;
    padding: 0 0 0 1.1rem;
}

.udseries .text ul p {
    text-indent: -1.1rem;
}

#pg5,
.pg5 {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: 10rem 0;
}

.pg5 .BG {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg5 .text {
    position: relative;
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pg5 .text p {
    display: grid;
    gap: 1rem;
}

.pg5 .imgs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pg5 .imgs .img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pg5 .imgs .img img {
    width: 100%;
}

.pg5 .imgs .img p {
    color: #666;
}

.footnote ol {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    list-style-type: decimal;
    padding: 0 0 0 1rem;
}

#footnote,
.footnote {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem;
}

.footnote ol li {
    line-height: 1.2;
    font-size: 1rem;
    color: #666;
}

.footnote .TDP {
    display: none;
}