@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed:300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
@font-face {
    font-family: 'Xolonium';
    src: url("../fonts/xolonium-regular.ttf") format("opentype"), url("../fonts/xolonium-regular.eot");
    font-weight: normal;
    font-style: normal;
}

/* ---------- RESET ---------- */

html,
body {
    margin: 0;
    background-color: #000;
    overflow: visible;
}

#hd * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
}

::selection {
    background: #1d2124;
    color: #CE0000;
}

::-moz-selection {
    background: #1d2124;
    color: #ffffff;
}

#hd {
    font-family: "Roboto Condensed", "Arial", sans-serif;
    background: black;
    color: #FFF;
    font-size: 16px;
    margin: 0;
    padding: 0;
    /*background: url(../img/bg.jpg) 0 center no-repeat;*/
    background-attachment: fixed;
}

#hd ul,
#hd li,
#hd figure {
    margin: 0;
    padding: 0;
}

#hd h1,
#hd h2,
#hd h3,
#hd h4,
#hd p,
#hd a,
#hd li {
    font: inherit;
}

#hd img {
    display: block;
    height: auto;
    border: none;
    max-width: 100% !important;
    margin: 0 auto;
}

#hd img.lazyLoad {
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#hd .hd-sec-audio .hd_btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.125em;
    font-weight: bold;
    color: #989898;
    background: #000000;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 10px;
    margin: 0;
    position: relative;
    -webkit-transition: color .25s ease;
    -moz-transition: color .25s ease;
    -ms-transition: color .25s ease;
    -o-transition: color .25s ease;
    transition: color .25s ease;
}

#hd .hd-sec-audio .hd_btn:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to right, #363636, #9C9C9C, #363636);
}

#hd .hd-sec-audio .hd_btn:hover {
    color: #ffffff;
}

/* ---------- TXT ------------ */

#hd h2,
#hd h3,
#hd h5 {
    font-family: 'Xolonium', sans-serif;
}

#hd h2 {
    font-size: 3rem;
    line-height: 1;
    color: #ffffff !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    word-break: normal;
    word-wrap: normal;
}

#hd h3 {
    font-size: 2.4rem;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 20px;
}

#hd h4 {
    /*font-family: "Fjalla One", sans-serif;*/
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 20px;
    line-height: 1.25;
    color: #ffffff;
}

#hd h5 {
    font-size: 1rem;
    font-weight: 300;
    color: #ffffff;
    margin: 5px 0 10px;
}

#hd p,
#hd small,
#hd a,
#hd li {
    font-family: 'Roboto Condensed', sans-serif;
}

#hd p {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 30px;
}

#hd b {
    font-weight: bold;
}

#hd small {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

#hd .txt-center {
    text-align: center;
}

#hd .txt-left {
    text-align: left;
}

#hd .txt-italic {
    font-style: italic;
}

#hd a.txt-link {
    display: inline;
    text-decoration: underline;
}

#hd a.txt-link:hover {
    color: white;
}

#hd .txt-cyan {
    display: inline-block;
    padding-bottom: 5px;
    color: #82FFDB;
    background: #82FFDB;
    background: -webkit-linear-gradient(left, #82FFDB, #496DD3);
    background: -moz-linear-gradient(left, #82FFDB, #496DD3);
    background: -o-linear-gradient(left, #82FFDB, #496DD3);
    background: linear-gradient(to right, #82FFDB, #496DD3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-input-placeholder,
:root #hd .txt-cyan {
    background: transparent !important;
}

#hd .txt-pink {
    display: inline-block;
    padding-bottom: 5px;
    color: #AF0054;
    background-color: #AF0054;
    background: -webkit-linear-gradient(right, #8A003A 0%, #AF0054, #8A003A 100%);
    background: -moz-linear-gradient(right, #8A003A 0%, #AF0054, #8A003A 100%);
    background: -o-linear-gradient(right, #8A003A 0%, #AF0054, #8A003A 100%);
    background: linear-gradient(to left, #8A003A 0%, #AF0054, #8A003A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-input-placeholder,
:root #hd .txt-pink {
    background: transparent !important;
}

#hd .txt-purple {
    display: inline-block;
    padding-bottom: 5px;
    color: #851fff;
    background: #851fff;
    background: -webkit-linear-gradient(left, #7600FF 0%, #C61AD6);
    background: -moz-linear-gradient(left, #7600FF 0%, #C61AD6);
    background: -o-linear-gradient(left, #7600FF 0%, #C61AD6);
    background: linear-gradient(to right, #7600FF 0%, #C61AD6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-input-placeholder,
:root #hd .txt-purple {
    background: transparent !important;
}

#hd .txt-red {
    display: inline-block;
    padding-bottom: 5px;
    color: #C20011;
    background-color: #C20011;
    background: -webkit-linear-gradient(right, #550003 0%, #C20011, #550003 100%);
    background: -moz-linear-gradient(right, #550003 0%, #C20011, #550003 100%);
    background: -o-linear-gradient(right, #550003 0%, #C20011, #550003 100%);
    background: linear-gradient(to left, #550003 0%, #C20011, #550003 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-input-placeholder,
:root #hd .txt-red {
    background: transparent !important;
}

#hd .txt-normal-purple {
    color: #7600FF;
    font-weight: 400;
}

#hd .txt-normal-blue {
    color: #0b5bab;
    font-weight: 400;
}

#hd .txt-normal-cyan {
    color: #10b8b0;
    font-weight: 400;
}

#hd .txt-normal-pink {
    color: #AF0054;
    font-weight: 400;
}

#hd .txt-normal-red {
    color: #C20011;
    font-weight: 400;
}

#hd .txt-grey {
    color: #646464;
    font-weight: 400;
}

#hd .title-cyan {
    text-shadow: 0 0 35px #00ffc9;
}

#hd .title-purple {
    text-shadow: 0 0 35px #bb00ff;
}

#hd .title-red {
    text-shadow: 0 0 35px #cc0c00;
}

#hd .title-blue {
    text-shadow: 0 0 35px #0080ff;
}

/* ---------- BLOCK ---------- */

#hd .w95 {
    width: 94%;
    margin: 0 auto;
    position: relative;
}

#hd .hd-w800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#hd .hd-w1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#hd .hd-w1100,
#hd .hd-w1200,
#hd .hd-w1300,
#hd .hd-w1400 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

#hd .hd-w1100 {
    max-width: 1100px;
}

#hd .hd-w1300 {
    max-width: 1300px;
}

#hd .hd-w1400 {
    max-width: 1400px;
}

#hd .hd-col20,
#hd .hd-col25,
#hd .hd-col33,
#hd .hd-col40,
#hd .hd-col45,
#hd .hd-col50,
#hd .hd-col55,
#hd .hd-col60,
#hd .hd-col65,
#hd .hd-col70,
#hd .hd-col80 {
    display: inline-block;
    margin-left: -5px;
    vertical-align: middle;
}

#hd .hd-col20 {
    width: 20%;
}

#hd .hd-col25 {
    width: 25%;
}

#hd .hd-col33 {
    width: 33.3333%;
}

#hd .hd-col40 {
    width: 40%;
}

#hd .hd-col45 {
    width: 45%;
}

#hd .hd-col50 {
    width: 50%;
}

#hd .hd-col55 {
    width: 55%;
}

#hd .hd-col60 {
    width: 60%;
}

#hd .hd-col65 {
    width: 65%;
}

#hd .hd-col70 {
    width: 70%;
}

#hd .hd-col80 {
    width: 80%;
}

#hd .ib-top {
    display: inline-block;
    vertical-align: top;
}

#hd .ib-bottom {
    display: inline-block;
    vertical-align: bottom;
}

#hd .fleft {
    float: left;
}

#hd .fright {
    float: right;
}

#hd .cf:after {
    content: '';
    display: block;
    clear: both;
}

#hd .hd_1023_off,
#hd .hd_mobile_off {
    display: block;
}

#hd .hd_1023_on,
#hd .hd_mobile_on {
    display: none;
}

/*lib*/

#hd .twentytwenty-container img {
    left: 50%;
    transform: translateX(-50%);
}

#hd .twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    top: 32%;
}

#hd .twentytwenty-right-arrow {
    right: 5%;
}

#hd .twentytwenty-left-arrow {
    left: 5%;
}

#hd .twentytwenty-overlay {
    display: none;
}

#hd .twentytwenty-handle {
    border: 0;
    background-color: red;
    margin-left: 40px;
}

#hd .twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
    background: red;
    border: 0;
    box-shadow: 0 -3px 0 red, 0px 0px 12px rgba(51, 51, 51, 0.5) !important;
    -webkit-box-shadow: 0 3px 0 red, 0px 0px 12px rgba(113, 51, 51, 0.5);
    margin-bottom: 0;
}

/* ---------- ELEMENT -------- */

#hd .txt_decoline {
    background: url('../img/deco-line.png') right bottom no-repeat;
}

#hd .txt_decolineflip {
    background: url('../img/deco-line-flip.png') left bottom no-repeat;
}

#hd .hd-frame {
    margin: 80px auto;
    border: 80px solid transparent;
    border-image: url(../img/frame/frame-red.png) 80 round;
    border-image-outset: 80px;
    position: relative;
}

#hd .hd-frame.hd-frame-red {
    border-image: url(../img/frame/frame-red.png) 80 round;
    border-image-outset: 80px;
}

#hd .hd-frame.hd-frame-blue {
    border-image: url(../img/frame/frame-blue.png) 80 round;
    border-image-outset: 80px;
}

#hd .switch {
    width: 500px;
    max-width: 90%;
    display: block;
    margin: 50px auto;
    z-index: 3;
    position: relative;
}

#hd .switch:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #b50000;
    background-size: 100%;
    background-image: -webkit-linear-gradient(left, #000000 0%, #b50000 20%, #700808 40%, #d21313 53%, #890000 75%, #6f0000 90%, #000000 100%);
    background-image: -moz-linear-gradient(left, #000000 0%, #b50000 20%, #700808 40%, #d21313 53%, #890000 75%, #6f0000 90%, #000000 100%);
    background-image: -o-linear-gradient(left, #000000 0%, #b50000 20%, #700808 40%, #d21313 53%, #890000 75%, #6f0000 90%, #000000 100%);
    background-image: linear-gradient(to right, #000000 0%, #b50000 20%, #700808 40%, #d21313 53%, #890000 75%, #6f0000 90%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff', GradientType=1);
    /* IE6-9 */
}

#hd .switch.blue:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #398887;
    background-size: 100%;
    background-image: -webkit-linear-gradient(left, #000000 0%, #398887 20%, #2B6A6A 40%, #398887 53%, #2B6A6A 75%, #2B6A6A 90%, #000000 100%);
    background-image: -moz-linear-gradient(left, #000000 0%, #398887 20%, #2B6A6A 40%, #398887 53%, #2B6A6A 75%, #2B6A6A 90%, #000000 100%);
    background-image: -o-linear-gradient(left, #000000 0%, #398887 20%, #2B6A6A 40%, #398887 53%, #2B6A6A 75%, #2B6A6A 90%, #000000 100%);
    background-image: linear-gradient(to right, #000000 0%, #398887 20%, #2B6A6A 40%, #398887 53%, #2B6A6A 75%, #2B6A6A 90%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff', GradientType=1);
    /* IE6-9 */
}

#hd .switch li {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 35px;
    margin: 0 8px;
    background: #b50000;
    background-size: 120px;
    background-image: -webkit-linear-gradient(300deg, #b50000 0%, #700808 30%, #d21313 53%, #890000 75%, #6f0000 100%);
    background-image: -moz-linear-gradient(300deg, #b50000 0%, #700808 30%, #d21313 53%, #890000 75%, #6f0000 100%);
    background-image: -o-linear-gradient(300deg, #b50000 0%, #700808 30%, #d21313 53%, #890000 75%, #6f0000 100%);
    background-image: linear-gradient(300deg, #b50000 0%, #700808 30%, #d21313 53%, #890000 75%, #6f0000 100%);
    -webkit-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    -ms-transform: skewX(25deg);
    -o-transform: skewX(25deg);
    transform: skewX(25deg);
    position: relative;
    cursor: pointer;
}

#hd .switch.purple li {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 35px;
    margin: 0 8px;
    background: #8000e2;
    background-size: 120px;
    background-image: -webkit-linear-gradient(90deg, rgba(128, 0, 136, 1) 0%, rgba(123, 9, 245, 1) 70%, rgba(96, 53, 195, 1) 100%);
    background-image: -moz-linear-gradient(90deg, rgba(128, 0, 136, 1) 0%, rgba(123, 9, 245, 1) 70%, rgba(96, 53, 195, 1) 100%);
    background-image: -o-linear-gradient(90deg, rgba(128, 0, 136, 1) 0%, rgba(123, 9, 245, 1) 70%, rgba(96, 53, 195, 1) 100%);
    background-image: linear-gradient(90deg, rgba(128, 0, 136, 1) 0%, rgba(123, 9, 245, 1) 70%, rgba(96, 53, 195, 1) 100%);
    -webkit-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    -ms-transform: skewX(25deg);
    -o-transform: skewX(25deg);
    transform: skewX(25deg);
    position: relative;
    cursor: pointer;
}

#hd .switch.purple:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #8000e2;
    background-size: 100%;
    background-image: -webkit-linear-gradient(left, #000000 0%, rgba(128, 0, 136, 1) 20%, rgba(123, 9, 245, 1) 40%, rgba(128, 0, 136, 1) 53%, rgba(123, 9, 245, 1) 75%, rgba(123, 9, 245, 1) 90%, #000000 100%);
    background-image: -moz-linear-gradient(left, #000000 0%, rgba(128, 0, 136, 1) 20%, rgba(123, 9, 245, 1) 40%, rgba(128, 0, 136, 1) 53%, rgba(123, 9, 245, 1) 75%, rgba(123, 9, 245, 1) 90%, #000000 100%);
    background-image: -o-linear-gradient(left, #000000 0%, rgba(128, 0, 136, 1) 20%, rgba(123, 9, 245, 1) 40%, rgba(128, 0, 136, 1) 53%, rgba(123, 9, 245, 1) 75%, rgba(123, 9, 245, 1) 90%, #000000 100%);
    background-image: linear-gradient(to right, #000000 0%, rgba(128, 0, 136, 1) 20%, rgba(123, 9, 245, 1) 40%, rgba(128, 0, 136, 1) 53%, rgba(123, 9, 245, 1) 75%, rgba(123, 9, 245, 1) 90%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#c600ff', GradientType=1);
    /* IE6-9 */
}

#hd .switch li.hd-active {
    width: 100px;
}

#hd .switch li:after {
    content: '';
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#hd .switch li.hd-active:after {
    display: none;
}

#hd .switch span {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-radius: 7px;
    background-color: #eaeaea;
}

#hd .switch p {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    padding: 0 10px;
    margin: 0;
    color: #eaeaea;
    font-weight: 300;
}

#hd .switch .hd-active span {
    background-color: #cc0000;
}

#hd .switch .hd-active p {
    color: #cc0000;
    font-weight: 600;
}

/* ---------- transition ----- */

#hd a.txt-link,
#hd .btn_go,
#hd .sec_kv ul,
#hd .sec_kv li figure:before,
#hd .sec_kv h3:after,
#hd .switch li,
#hd .hd-sec-mode .hd-skewtag,
#hd .hd-sec-guardian li:first-child img,
#hd #sonic_studio .hd-content {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* ---------- scrollUp ------- */

#scrollUp {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 45px;
    height: 45px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 2px solid #ff00ff;
    opacity: 0;
}

#scrollUp.hd-show {
    opacity: 1;
}

#scrollUp svg {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 5px;
    left: 0;
    fill: #ff00ff;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
}

#scrollUp:hover {
    background-color: #ff00ff;
}

#scrollUp:hover svg {
    fill: white;
}

/* ---------- lightbox ------- */

#hd_lightbox {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 10;
}

#hd .hd_filter {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
}

#hd .hd_box {
    width: 1000px;
    height: 480px;
    background: #232323;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 35px 60px;
    box-sizing: border-box;
}

#hd .hd_close {
    position: absolute;
    top: 25px;
    right: 20px;
    cursor: pointer;
}

#hd .hd_close>span {
    display: block;
    width: 20px;
    height: 3px;
    background: #777777;
    -webkit-border-radius: 1.5px;
    -moz-border-radius: 1.5px;
    border-radius: 1.5px;
}

#hd .hd_close>span:first-child {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

#hd .hd_close>span:last-child {
    -webkit-transform: rotateZ(-45deg) translate(2px, -2px);
    -moz-transform: rotateZ(-45deg) translate(2px, -2px);
    -ms-transform: rotateZ(-45deg) translate(2px, -2px);
    -o-transform: rotateZ(-45deg) translate(2px, -2px);
    transform: rotateZ(-45deg) translate(2px, -2px);
}

#hd .hd_box>img {
    position: absolute;
    right: 40px;
    bottom: 60px;
}

#hd .hd_box iframe {
    width: 100%;
    height: 100%;
}

/* ---------- sec_kv --------- */

#hd .main_tab {
    background-color: #000;
}

#hd .hd_620_on {
    display: none;
}

#hd .sec_kv {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    position: relative;
    z-index: 1;
}

#hd .sec_kv>img {
    width: 100%;
}

#hd .sec_kv .hd-w1200,
#hd .sec_kv .hd-w1300 {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
}

#hd .sec_kv p {
    font-size: 1.125rem;
    letter-spacing: 1px;
}

#hd .sec_kv ul {
    width: 100%;
    text-align: center;
}

#hd .sec_kv li {
    position: relative;
    /*overflow: hidden;*/
    cursor: pointer;
    z-index: 2;
}

#hd .sec_kv li figure {
    width: 100%;
    padding-bottom: 64.9%;
    top: 0;
    left: 0;
    background: center top no-repeat;
    background-size: 100% 100%;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

#hd .sec_kv li:hover figure {
    background-size: 115% 115%;
}

#hd .sec_kv h3 {
    font-size: 1.5rem;
    text-transform: none;
    color: #fff;
    padding: 15px 10px;
    margin: 0 12px;
    position: relative;
}

#hd .sec_kv h3:before,
#hd .sec_kv h3:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transform: skewX(12deg);
    -moz-transform: skewX(12deg);
    -ms-transform: skewX(12deg);
    -o-transform: skewX(12deg);
    transform: skewX(12deg);
    z-index: -2;
}

#hd .sec_kv h3:after {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #000;
    z-index: -1;
}

#hd .sec_kv li.hd-col20 {
    display: inline-block;
    vertical-align: bottom;
    width: 20%;
}

#hd .rig_way li:hover:after,
#hd .design_sustom li:hover:after,
#hd .soltd_hardware li:hover:after,
#hd .tune_your li:hover:after,
#hd .rig_way li.hd-active:after,
#hd .design_sustom li.hd-active:after,
#hd .soltd_hardware li.hd-active:after,
#hd .tune_your li.hd-active:after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: -5px;
    left: calc(50% - 5px);
    z-index: 2;
}

/*SOLID HARDWARE SPECS FOR GAMING AND MORE*/

#hd .soltd_hardware li:nth-child(1):hover h3,
#hd .soltd_hardware li:nth-child(1).hd-active h3 {
    color: #00ffa3;
}

#hd .soltd_hardware li:nth-child(1):hover:after,
#hd .soltd_hardware li:nth-child(1).hd-active:after {
    background-color: #00ffa3;
}

#hd .soltd_hardware li:nth-child(2):hover h3,
#hd .soltd_hardware li:nth-child(2).hd-active h3 {
    color: #00c89a;
}

#hd .soltd_hardware li:nth-child(2):hover:after,
#hd .soltd_hardware li:nth-child(2).hd-active:after {
    background-color: #00c89a;
}

#hd .soltd_hardware li:nth-child(3):hover h3,
#hd .soltd_hardware li:nth-child(3).hd-active h3 {
    color: #00a39d;
}

#hd .soltd_hardware li:nth-child(3):hover:after,
#hd .soltd_hardware li:nth-child(3).hd-active:after {
    background-color: #00a39d;
}

#hd .soltd_hardware li:nth-child(4):hover h3,
#hd .soltd_hardware li:nth-child(4).hd-active h3 {
    color: #00969c;
}

#hd .soltd_hardware li:nth-child(4):hover:after,
#hd .soltd_hardware li:nth-child(4).hd-active:after {
    background-color: #00969c;
}

#hd .soltd_hardware li:nth-child(5):hover h3,
#hd .soltd_hardware li:nth-child(5).hd-active h3 {
    color: #007e99;
}

#hd .soltd_hardware li:nth-child(5):hover:after,
#hd .soltd_hardware li:nth-child(5).hd-active:after {
    background-color: #007e99;
}

/*SOLID HARDWARE SPECS FOR GAMING AND MORE*/

#hd .tune_your li:nth-child(1):hover h3,
#hd .tune_your li:nth-child(1).hd-active h3 {
    color: #B00054;
}

#hd .tune_your li:nth-child(1):hover:after,
#hd .tune_your li:nth-child(1).hd-active:after {
    background-color: #B00054;
}

#hd .tune_your li:nth-child(2):hover h3,
#hd .tune_your li:nth-child(2).hd-active h3 {
    color: #B00054;
}

#hd .tune_your li:nth-child(2):hover:after,
#hd .tune_your li:nth-child(2).hd-active:after {
    background-color: #B00054;
}

#hd .tune_your li:nth-child(3):hover h3,
#hd .tune_your li:nth-child(3).hd-active h3 {
    color: #B00054;
}

#hd .tune_your li:nth-child(3):hover:after,
#hd .tune_your li:nth-child(3).hd-active:after {
    background-color: #B00054;
}

/*DESIGN, CUSTOMIZATION, AND SETUP*/

#hd .design_sustom li:nth-child(1):hover h3,
#hd .design_sustom li:nth-child(1).hd-active h3 {
    color: #ae00a9;
}

#hd .design_sustom li:nth-child(1):hover:after,
#hd .design_sustom li:nth-child(1).hd-active:after {
    background-color: #ae00a9;
}

#hd .design_sustom li:nth-child(2):hover h3,
#hd .design_sustom li:nth-child(2).hd-active h3 {
    color: #a300cb;
}

#hd .design_sustom li:nth-child(2):hover:after,
#hd .design_sustom li:nth-child(2).hd-active:after {
    background-color: #a300cb;
}

#hd .design_sustom li:nth-child(3):hover h3,
#hd .design_sustom li:nth-child(3).hd-active h3 {
    color: #9900e7;
}

#hd .design_sustom li:nth-child(3):hover:after,
#hd .design_sustom li:nth-child(3).hd-active:after {
    background-color: #9900e7;
}

#hd .design_sustom li:nth-child(4):hover h3,
#hd .design_sustom li:nth-child(4).hd-active h3 {
    color: #8500fd;
}

#hd .design_sustom li:nth-child(4):hover:after,
#hd .design_sustom li:nth-child(4).hd-active:after {
    background-color: #8500fd;
}

#hd .design_sustom li:nth-child(5):hover h3,
#hd .design_sustom li:nth-child(5).hd-active h3 {
    color: #4858ba;
}

#hd .design_sustom li:nth-child(5):hover:after,
#hd .design_sustom li:nth-child(5).hd-active:after {
    background-color: #4858ba;
}

#hd .rig_way li.hd-active h3,
#hd .rig_way li:hover h3 {
    color: #7c0000;
}

#hd .rig_way li:hover:after,
#hd .rig_way li.hd-active:after {
    background-color: #7c0000;
}

/* ---------- sec_kv color --- */

#hd .sec_kv ul.hd-cyan li h3 {
    /*color: #496DD3;
		background: #496DD3;
		background: -webkit-linear-gradient(right,#496DD3 0%,#82FFDB);
		background:	   -moz-linear-gradient(right,#496DD3 0%,#82FFDB);
		background: 	 -o-linear-gradient(right,#496DD3 0%,#82FFDB);
		background:			linear-gradient(to left,#496DD3 0%,#82FFDB);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;*/
}

_:-ms-input-placeholder,
:root #hd .sec_kv ul.hd-cyan li h3 {
    background: transparent !important;
}

#hd .sec_kv ul.hd-purple li h3 {
    /*color: #7600FF;
		background: #7600FF;
		background: -webkit-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:	   -moz-linear-gradient(left,#7600FF 0%,#C61AD6);
		background: 	 -o-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:			linear-gradient(to right,#7600FF 0%,#C61AD6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;*/
}

_:-ms-input-placeholder,
:root #hd .sec_kv ul.hd-purple li h3 {
    background: transparent !important;
}

#hd .sec_kv ul.hd-red li h3 {
    /*color: #550003;
		background: #550003;
		background: -webkit-linear-gradient(right, #550003 0%,#C20011 );
		background:	   -moz-linear-gradient(right, #550003 0%,#C20011 );
		background: 	 -o-linear-gradient(right, #550003 0%,#C20011 );
		background:			linear-gradient(to left, #550003 0%,#C20011 );
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;*/
}

_:-ms-input-placeholder,
:root #hd .sec_kv ul.hd-red li h3 {
    background: transparent !important;
}

#hd .sec_kv ul.hd-cyan li h3:before {
    /*background: #0b49ae;
		background: -webkit-linear-gradient(left,#0b49ae 0%,#24afad);
		background:	   -moz-linear-gradient(left,#0b49ae 0%,#24afad);
		background: 	 -o-linear-gradient(left,#0b49ae 0%,#24afad);
		background:			linear-gradient(to right,#0b49ae 0%,#24afad);*/
}

#hd .sec_kv ul.hd-purple li h3:before {
    /*background: #7600FF;
		background: -webkit-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:	   -moz-linear-gradient(left,#7600FF 0%,#C61AD6);
		background: 	 -o-linear-gradient(left,#7600FF 0%,#C61AD6);
		background:			linear-gradient(to right,#7600FF 0%,#C61AD6);*/
}

#hd .sec_kv ul.hd-red li h3:before {
    /*background: #550003;
		background: -webkit-linear-gradient(right, #550003 0%,#C20011 );
		background:	   -moz-linear-gradient(right, #550003 0%,#C20011 );
		background: 	 -o-linear-gradient(right, #550003 0%,#C20011 );
		background:			linear-gradient(to left, #550003 0%,#C20011 );*/
}

#hd .hd-red,
#hd .hd-purple.expand,
#hd .hd-cyan.expand {
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
}

#hd .hd-cyan.expand:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 2px;
    background: linear-gradient(to right, #00ffa3, #00c89a, #00a39d, #00a39d, #00969c, #007e99);
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#00ffa3, #00a39d, ), to(#007e99));
    background-image: -webkit-linear-gradient(to left, #00ffa3, #00a39d, #007e99);
    background-image: -moz-linear-gradient(to left, #00ffa3, #00a39d, #007e99);
    background-image: -o-linear-gradient(to left, #00ffa3, #00a39d, #007e99);
}

#hd .hd-purple.expand:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 2px;
    background: linear-gradient(to right, #ae00a9, #a300cb, #9900e7, #8500fd, #4858ba, #4858ba);
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ae00a9, #9900e7, ), to(#4858ba));
    background-image: -webkit-linear-gradient(to left, #ae00a9, #9900e7, #4858ba);
    background-image: -moz-linear-gradient(to left, #ae00a9, #9900e7, #4858ba);
    background-image: -o-linear-gradient(to left, #ae00a9, #9900e7, #4858ba);
}

#hd .hd-red:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 2px;
    background-color: #7c0000;
}

/* ---------- sec_content ---------- */

#hd .sec_content {
    margin-top: 7px;
}

/* ---------- sec_hidden ---------- */

#hd .hd-sec-hidden {
    display: none;
}
/*
#hd .hd-sec-hidden.z490-performance-power {
    display: block;
    height: 1px;
    overflow: hidden;
    position: absolute;
}
#hd .hd-sec-hidden.z490-performance-power.hd-active {
    height: 500vh;
}
*/


#hd .hd-sec-hidden.hd-active {
    display: block;
    -webkit-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
    -o-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
    animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
}

#hd #outlook_imgs img {
    display: none;
}

#hd #outlook_imgs img.hd-active {
    display: block;
}

/* ---------- #kv ----------------- */

#hd #kv {
    position: relative;
    width: 100%;
    height: 800px;
}

#hd #kv .bg {
    position: absolute;
    background-size: cover 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url('../img/kv/kv-bg.jpg');
    width: 100%;
    height: 100%;
}
#hd #kv .bg::before {
	content: "";
    position: absolute;
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url('../img/kv/kv_block.png');
    width: 100%;
    height: 100%;
}

#hd #kv .imgfront,
#hd #kv .imgback {
    position: absolute;
    top: 2.5%;
    left: calc(50% - 450px);
    height: 90%;
    z-index: 2;
}

#hd #kv .imglogo {
    position: absolute;
    width: 80px;
    left: calc(50% - 384px);
    transform: rotate(8.5deg) skew(5deg);
}

#hd #kv .text {
    position: absolute;
    top: 50%;
    left: calc(50% + 430px);
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 650px;
    z-index: 5;
}

/* ---------- #specs -------------- */

#hd #specs {
    padding-top: 40px;
    padding: 120px;
    background-color: #000000;
}
#hd #specs .switch_btn{
    width: 100%;
    margin-top: 3%;
    justify-content: center;
}
#hd #specs .switch_btn.mobile{
   display: none;
}
#hd #specs .switch_btn .btn{
    width: 15px;
    height: 10px;
    border-radius: 20px;
    margin: 10px;
    background-color: #373737;
    cursor: pointer
}
#hd #specs .switch_btn .btn.active{ 
    background-color: #b80202;
}

#hd #specs .spec-main {
    width: 100%;
    padding-bottom: 59%;
    background: 35% center no-repeat;
    background-size: contain;
}

#hd .spec-small {
    padding-top: 1.5%;
}

#hd #specs .spec-main.aura {
    display: none;
    background-image: url('../img/spec/spec.png');
}
#hd #specs .spec-main.noaura {
    display: block;
    background-image: url('../img/spec/spec-noaura.png');
}
#hd #specs .spec-main.noaura.change {
    background-image: url('../img/spec/spec.png');
}

#hd #specs .switch {
    display: block;
    margin: 0 auto 30px;
    z-index: 3;
}

#hd #specs .switch li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    cursor: pointer;
}

#hd #specs .switch span {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-radius: 7px;
    background-color: #eaeaea;
}

#hd #specs .switch p {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    padding: 0 10px;
    margin: 0;
    color: #eaeaea;
    font-weight: 300;
}

#hd #specs .switch .hd-active span {
    background-color: #cc0000;
}

#hd #specs .switch .hd-active p {
    color: #cc0000;
    font-weight: 600;
}

#hd #specs ol {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    counter-reset: mycounter;
}
#hd #specs .hoverdetect{
    position: absolute;
    top: 0;
    left: 44.5%;
    transform: translateX(-50%);
    display: block;
    width: 50%;
    height: 100%;
    z-index: 5;
}

#hd #specs ol li {
    position: absolute;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    max-width: 360px;
}

#hd #specs ol li:before {
    counter-increment: mycounter;
    content: counter(mycounter);
    display: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 0;
    left: -40px;
    z-index: 2;
}

#hd #specs ol li b {
    font-weight: 400;
    line-height: 1.4;
    display: block;
    letter-spacing: 0;
    font-size: 14px;
}

#hd #specs ol li p {
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #aaaaaa;
    font-size: 14px;
}

/* spec li positions (overview)*/

#specs ol li:nth-child(-n+8) {
    left: 5%;
}

#specs ol li:nth-child(n+9) {
    left: 72%;
}

#specs ol li:nth-child(1) {
    top: 0%;
}

#specs ol li:nth-child(2) {
    top: 7.5%;
}

#specs ol li:nth-child(3) {
    top: 15.5%;
}

#specs ol li:nth-child(4) {
    top: 27.5%;
}

#specs ol li:nth-child(5) {
    top: 43%;
}

#specs ol li:nth-child(6) {
    top: 48.5%;
}

#specs ol li:nth-child(7) {
    top: 55.5%;
}

#specs ol li:nth-child(8) {
    top: 73.5%;
}

#specs ol li:nth-child(9) {
    top: 10.5%;
}

#specs ol li:nth-child(10) {
    top: 19.5%;
}

#specs ol li:nth-child(11) {
    top: 28.5%;
}

#specs ol li:nth-child(12) {
    top: 36.5%;
}

#specs ol li:nth-child(13) {
    top: 44.5%;
}

#specs ol li:nth-child(14) {
    top: 55.5%;
}

#specs ol li:nth-child(15) {
    top: 64%;
}

#specs ol li:nth-child(16) {
    top: 83.5%;
}

#specs ol li:nth-child(17) {
    top: 93%;
}

#hd .hd-sec-pnetworking {
    padding: 50px 0 0;
}

#hd .hd-sec-pnetworking .hd-w1300.txt-center {
    padding: 50px 0;
}

#hd .innovation.hd-sec-outlook h6 {
    font-family: 'Xolonium', sans-serif;
}

#hd .innovation.hd-sec-outlook .fright {
    top: 15.5%;
}

#hd .innovation.hd-sec-outlook ol {
    counter-reset: mycounter;
}

#hd .innovation.hd-sec-outlook ol li:before {
    counter-increment: mycounter;
    content: counter(mycounter);
    display: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 0;
    left: -40px;
    z-index: 2;
}

#hd .innovation.hd-sec-outlook .right ol {
   padding-left: 10%;
}
#hd .innovation.hd-sec-outlook .right ol li:nth-child(2) {
   margin: 40% 0;
}
#hd .innovation.hd-sec-outlook .mobile {
   display: none;
}

#hd .display_on_1023 {
    display: none;
}

/* ---------- heatsink -------------- */

#hd .hd-sec-cooler .heatsink {
    margin-bottom: 100px;
}

#hd .hd-sec-cooler .heatsink .left,
#hd .hd-sec-cooler .heatsink .right {
    vertical-align: top;
}

#hd .hd-sec-cooler .heatsink .txt-center {
    margin-bottom: 30px;
}

#hd .hd-sec-cooler .heatsink .item {
    margin-bottom: 30px;
}

#hd .hd-sec-cooler .heatsink .item img {
    width: calc(100px);
    margin-right: 20px;
    display: inline-block;
}

#hd .hd-sec-cooler .heatsink .item .text {
    width: calc(100% - 4px);
    display: inline-block;
    vertical-align: top;
}

#hd .hd-sec-cooler .heatsink .item h5 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25em;
}

#hd .hd-sec-cooler .heatsink .item p {
    margin-bottom: 5px;
}

/* ---------- #build -------------- */

#hd #build .sec_kv .hd-w1300 {
    top: 42%;
}

#hd #build .sec_kv h2 {
    max-width: 1200px;
}

#hd #build .sec_kv p {
    max-width: 1000px;
}

#hd #build ul.switch_outlook {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    z-index: 5;
}

#hd #build ul.switch_outlook li {
    display: inline-block;
    vertical-align: top;
    width: 165px;
    padding: 6px 10px;
    margin: 5px 0;
    display: inline-block;
    background-image: url(../img/icon/black-outlook.png);
    background-position: 0 center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

#hd #build ul.switch_outlook li.hd-active {
    background-image: url(../img/icon/purple.png);
}

#hd #build .textfield {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

#hd #build .hd-sec-iddesign {
   padding-top: 6%;
}

#hd #build .hd-sec-iddesign.hd-sec-hidden {
    display: block;
    opacity: 0;
    position: absolute;
}

#hd #build .hd-sec-iddesign.hd-sec-hidden.hd-active {
    display: block;
    opacity: 1;
    position: static;
}

#hd #twentycontainer {
    text-align: center;
}

#hd #twentycontainer img {
    width: 90%;
}

#hd #twentycontainer:before,
#hd #twentycontainer:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #979797;
    background: -moz-linear-gradient(left, #000 1%, #d6d6d6 23%, rgba(187, 159, 209, 0) 50%, #fff 75%, #000 99%);
    background: -webkit-linear-gradient(left, #000 1%, #d6d6d6 23%, rgba(187, 159, 209, 0) 50%, #fff 75%, #000 99%);
    background: linear-gradient(to right, #000 1%, #d6d6d6 23%, rgba(187, 159, 209, 0) 50%, #fff 75%, #000 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#979797', GradientType=1);
    position: absolute;
    left: 0%;
    z-index: 999;
}

#hd #twentycontainer:after {
    bottom: 0;
    background: #979797;
    background: -moz-linear-gradient(left, #000 1%, #fff 18%, rgba(187, 159, 209, 0) 40%, #d6d6d6 70%, #000 99%);
    background: -webkit-linear-gradient(left, #000 1%, #fff 18%, rgba(187, 159, 209, 0) 40%, #d6d6d6 70%, #000 99%);
    background: linear-gradient(to right, #000 1%, #fff 18%, rgba(187, 159, 209, 0) 40%, #d6d6d6 70%, #000 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#979797', GradientType=1);
}

/*------- switch --------*/

#hd #custom_switch {
    width: 80%;
}

#hd #custom_switch li {
    width: 25%;
}

#hd #compatibility_switch {
    width: 80%;
}

#hd #compatibility_switch li {
    width: 25%;
}

/* ------------ outlook ----------- */

#hd .hd-sec-outlook {
    padding: 40px 0 25px;
    position: relative;
}

#hd .hd-sec-outlook h5 {
    font-size: 1.25em;
    margin-bottom: 0;
}

#hd #outlook_img {
    position: relative;
}

#hd .hd-sec-outlook .fright {
    position: absolute;
    top: 40%;
    right: 0;
    z-index: 2;
}

#hd .hd-sec-outlook .sub-bg {
    position: absolute;
    top: 0%;
    right: -35%;
}

/*img*/
#hd #img_gigabit {
	width: 80%;
}
#hd #img_storage {
	width: 70%;
	margin-left: 100px;
}
#hd #img_supremefx,
#hd #img_supremefx_sub01,
#hd #img_supremefx_sub02,
#hd #img_supremefx_sub03,
#hd #img_supremefx_sub04,
#hd #img_supremefx_sub05,
#hd #img_supremefx_mobile{
	width:80%;
}
#hd #img_supremefx_sub01,
#hd #img_supremefx_sub02,
#hd #img_supremefx_sub03,
#hd #img_supremefx_sub04,
#hd #img_supremefx_sub05{
	display: none;
}
#hd #img_supremefx_sub01.hd-active,
#hd #img_supremefx_sub02.hd-active,
#hd #img_supremefx_sub03.hd-active,
#hd #img_supremefx_sub04.hd-active,
#hd #img_supremefx_sub05.hd-active {
	display: block;
}


/* ------------ lighting ---------- */

#hd .hd-sec-lighting {
    padding-bottom: 50px;
    position: relative;
}

#hd .hd-lighting>img {
	width: 100%;
}

#hd .hd-lightingbox { /*RCD*/
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
}

#hd .hd-lightingbox p {
    display: block;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;
    position: absolute;
    left: 2%;
}

#hd .hd-lightingbox h5 {
    font-family: 'Roboto Condensed', sans-serif;
    display: block;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 0;
    position: absolute;
}

#hd .hd-lightingbox h5:nth-of-type(1) {
    top: 76%;
    left: 8%;
}

#hd .hd-lightingbox h5:nth-of-type(2) {
    top: 83.5%;
    left: 8%;
}

#hd #strip_add {
    top: 79%;
}

#hd #strip_rgb {
    top: 90%;
}

#hd .hd-w1250on {
    display: none;
}

#hd .hd-lighting {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

#hd .hd-sec-lighting .hd-col55 {
    box-sizing: border-box;
    padding: 0 1% 0 2%;
    margin-top: 2%;
    margin-left: 5%;
    position: relative;
    z-index: 2;
}

#hd .hd-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -5%;
    position: relative;
}

#hd .hd-controls li {
    /*width: 16.6666%;
		max-width: 130px;*/
    width: 25%;
    cursor: pointer;
    opacity: .5;
}

#hd .hd-controls li:hover,
#hd .hd-controls li.hd-active {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#hd .hd-controls li img {
    display: block;
    width: 65px;
    height: 65px;
    margin: 20px auto 10px;
    -webkit-filter: grayscale(100%);
    /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

#hd .hd-controls li:hover img,
#hd .hd-controls li.hd-active img {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#hd .hd-controls b {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
}

#hd .hd-controls small {
    width: 113px;
    height: 65px;
    margin: 0 auto;
}

#colorpicker { /*RCD*/
    width: 120px;
    position: absolute;
    bottom: -170px;
    left: 20px;
}

#color,
#greybg { /*RCD*/
    width: 100%;
    height: 0;
    padding-bottom: 58%;
    padding-bottom: 130%;
    margin-top: 1px;
    position: absolute;
    top: 0;
    left: 0;
	z-index: -1;
	border: 2px solid black;
}

#greybg {
    background-color: #333333;
    z-index: -2;
}

/*gen2*/

#hd .gen2 {
    margin-top: 150px;
    display: flex;
}

#hd .gen2 figure {
    width: 60%;
    margin-right: 25px;
}

#hd .gen2 .addressable {
    text-align: left;
}

#hd .addressable figure {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

#hd #gen2 .addressable p.content {
    margin-bottom: 15px;
}

#hd .addressable .run_color {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: max-content;
    z-index: -1;
}

@keyframes runrun_color_new {
    0% {
        left: calc(100% - 70px);
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
    100% {
        left: 0;
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

@-webkit-keyframes runrun_color_new {
    0% {
        left: calc(100% - 70px);
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
    100% {
        left: 0;
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

.runrun_color_new {
    -webkit-animation: runrun_color_new 1.25s infinite alternate-reverse linear;
    -o-animation: runrun_color_new 1.25s infinite alternate-reverse linear;
    animation: runrun_color_new 1.25s infinite alternate-reverse linear;
    animation-delay: .25s;
}

@keyframes runrun_color_new_old {
    0% {
        left: 145%;
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
    100% {
        left: 0;
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

@-webkit-keyframes runrun_color_new_old {
    0% {
        left: 145%;
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg);
    }
    100% {
        left: 0;
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

.runrun_color_old {
    -webkit-animation: runrun_color_new_old 2.125s infinite alternate-reverse linear;
    -o-animation: runrun_color_new_old 2.125s infinite alternate-reverse linear;
    animation: runrun_color_new_old 2.125s infinite alternate-reverse linear;
    animation-delay: .25s;
}

/* ---------- #diy ---------------- */

/* ------------ auraSync -------------- */

#hd .hd-sec-auraSync,
#hd .hd-sec-compatibility {
    padding-top: 40px;
}

#hd .hd-sec-auraSync .switch,
#hd .hd-sec-compatibility .switch {
    text-align: center;
}

#hd .hd-sec-auraSync .switch li,
#hd .hd-sec-compatibility .switch li {
    width: 30%;
    height: auto;
    background-size: 100%;
    padding: 10px 5px;
}

#hd .hd-sec-auraSync .left,
#hd .hd-sec-compatibility .left,
#hd .hd-sec-auraSync .right,
#hd .hd-sec-compatibility .right {
    display: none;
}

#hd .hd-sec-auraSync .left.hd-active,
#hd .hd-sec-auraSync .right.hd-active{
    display: flex;
}
#hd .hd-sec-compatibility .left.hd-active{
    display: flex;
}
#hd .hd-sec-compatibility .right.hd-active {
    display: block;
}

#hd .hd-sec-auraSync .switch li h4,
#hd .hd-sec-compatibility .switch li h4 {
    font-size: 1.25em;
    min-height: 50px;
    line-height: 50px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

/* ------------ aura -------------- */

#hd .hd-sec-aura {
    position: relative;
    padding-bottom: 90px;
}

#hd .hd-sec-aura .hd-w1000 {
    width: 55%;
    position: absolute;
    left: 15%;
    right: 0;
    bottom: 0;
    z-index: 2;
}

#hd .hd-sec-aura figure {
    position: relative;
}

#hd .hd-sec-aura .hd-cover {
    position: absolute;
    top: 0;
    left: 0;
}

/* ------------ guardian ---------- */

#hd .hd-sec-guardian {
    padding: 100px 0;
}

#hd .hd-sec-guardian li {
    float: left;
    width: 20%;
    padding: 8px;
    position: relative;
}

#hd .hd-sec-guardian li:first-child {
    width: 34.6%;
    /*margin-right: -2.5%;*/
    margin-right: -2.15%;
}

#hd .hd-sec-guardian li:nth-child(2) {
    margin-left: 7.5%;
}

#hd .hd-sec-guardian li:nth-child(5) {
    margin-left: 2.5%;
}

#hd .hd-sec-guardian li:nth-child(7) {
    margin-left: -2.5%;
}

#hd .hd-sec-guardian li:nth-child(4) {
    float: right;
}

#hd .hd-sec-guardian li:nth-child(4) figure {
    padding-bottom: 231%;
    margin-left: -14.5%;
}

#hd .hd-sec-guardian li:nth-child(4) img {
    top: 20px;
}

#hd .hd-sec-guardian li figure {
    width: 100%;
    height: 0;
    /*padding-bottom: 150%;*/
    padding-bottom: 111%;
    border-top: 2px solid #496DD3;
    border-bottom: 2px solid #C61AD6;
    overflow: hidden;
    cursor: crosshair;
    -webkit-transform: skewX(-12.3deg);
    -moz-transform: skewX(-12.3deg);
    -ms-transform: skewX(-12.3deg);
    -o-transform: skewX(-12.3deg);
    transform: skewX(-12.3deg);
    position: relative;
}

#hd .hd-sec-guardian li figure:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 2px 100%;
    -moz-background-size: 2px 100%;
    background-size: 2px 100%;
    background-image: -webkit-linear-gradient(top, #496DD3 0%, #C61AD6 100%), -webkit-linear-gradient(top, #496DD3 0%, #C61AD6 100%);
    background-image: -moz-linear-gradient(top, #496DD3 0%, #C61AD6 100%), -moz-linear-gradient(top, #496DD3 0%, #C61AD6 100%);
    background-image: -o-linear-gradient(top, #496DD3 0%, #C61AD6 100%), -o-linear-gradient(top, #496DD3 0%, #C61AD6 100%);
    background-image: linear-gradient(to bottom, #496DD3 0%, #C61AD6 100%), linear-gradient(to bottom, #496DD3 0%, #C61AD6 100%);
}

#hd .hd-sec-guardian li:first-child figure {
    /*padding-bottom: 173%;*/
    padding-bottom: 197%;
    overflow: visible;
}

#hd .hd-sec-guardian li img {
    max-width: none !important;
    min-width: 100%;
    min-height: 100%;
    opacity: 1 !important;
    position: absolute;
    top: 0;
    left: -15%;
    -webkit-transform: skewX(12.3deg);
    -moz-transform: skewX(12.3deg);
    -ms-transform: skewX(12.3deg);
    -o-transform: skewX(12.3deg);
    transform: skewX(12.3deg);
}

#hd .hd-sec-guardian li:hover img {
    opacity: .4 !important;
}

#hd .hd-sec-guardian li:first-child img {
    width: 125%;
    min-height: 0;
    left: -22%;
    opacity: 1 !important;
    z-index: 2;
}

#hd .hd-sec-guardian li:first-child:hover figure img {
    -webkit-filter: brightness(40%);
    /* Safari 6.0 - 9.0 */
    filter: brightness(40%);
}

#hd .hd-sec-guardian .hd-txt {
    width: 110%;
    padding: 30px 0;
    z-index: 2;
    position: absolute;
    top: 0;
    left: -5%;
    pointer-events: none;
    text-shadow: 0 0 5px #000000, 0 0 10px #000000, 0 0 30px #000000;
}

#hd .hd-sec-guardian li:first-child .hd-txt {
    width: 80%;
    top: 2%;
    left: 30%;
    text-align: right;
}

#hd .hd-sec-guardian .hd-txt span.large {
    font-size: 1.25em;
    font-weight: 400;
}

#hd .hd-sec-guardian .hd-txt span:last-child {
    width: 85%;
}

#hd .hd-sec-guardian .hd-txt span.left {
    -webkit-shape-outside: polygon(0 100%, 100% 0, 0 0);
    -moz-shape-outside: polygon(0 100%, 100% 0, 0 0);
    shape-outside: polygon(0 100%, 100% 0, 0 0);
    -webkit-clip-path: polygon(0 100%, 100% 0, 0 0);
    -moz-clip-path: polygon(0 100%, 100% 0, 0 0);
    clip-path: polygon(0 100%, 100% 0, 0 0);
    width: 70px;
    height: 250px;
    float: left;
}

#hd .hd-sec-guardian .hd-txt span.right {
    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    -moz-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    -moz-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    width: 70px;
    height: 250px;
    float: right;
}

_::-moz-progress-bar,
body:last-child #hd .hd-sec-guardian .hd-txt span.right {
    display: none;
}

_:-ms-input-placeholder,
:root #hd .hd-sec-guardian .hd-txt span.left {
    width: 60px;
}

_:-ms-input-placeholder,
:root #hd .hd-sec-guardian .hd-txt span.right {
    width: 30px;
}

#hd .hd-sec-guardian li p {
    display: none;
}

#hd .hd-sec-guardian figure:hover+div h5 {
    display: none;
}

#hd .hd-sec-guardian figure:hover+div p {
    display: block;
    -webkit-animation: fadeInFromBottom .5s forwards;
    -o-animation: fadeInFromBottom .5s forwards;
    animation: fadeInFromBottom .5s forwards;
}

/* ------------ compatibility ------------ */

#hd .hd-sec-compatibility .fright {
    margin-top: 5%;
}

/* ------------ ecosystem --------- */

#hd .hd-sec-ecosystem .rog_strix {
    max-width: 1200px;
    padding: 5% 0 1.5% 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

#hd .ecosystem_star {
    position: relative;
    text-align: center;
    margin-top: -5%;
}

#hd .star_bg {
    opacity: 0;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 51%;
    background-size: cover;
    background-position: center;
}

#hd .ecosystem_star svg#svg_star {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#hd .ecosystem_star .st0,
#hd .ecosystem_star .st1 {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-linecap: round;
}

#hd .ecosystem_star .st0 {
    stroke-width: 2;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2.25s ease-out infinite;
}

#hd .ecosystem_star .st1 {
    stroke-width: 3;
}

@keyframes lineMove {
    0% {
        stroke-dasharray: 0, 1350;
    }
    100% {
        stroke-dasharray: 1350, 1350;
    }
}

@-webkit-keyframes lineMove {
    0% {
        stroke-dasharray: 0, 1350;
    }
    100% {
        stroke-dasharray: 1350, 1350;
    }
}

@keyframes line_off {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes line_off {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.line_off {
    -webkit-animation: line_off 1.25s 1 linear;
    -o-animation: line_off 1.25s 1 linear;
    animation: line_off 1.25s 1 linear;
    animation-fill-mode: forwards;
}

@keyframes line_on {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes line_on {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.line_on {
    -webkit-animation: line_on 3.25s 1 linear;
    -o-animation: line_on 3.25s 1 linear;
    animation: line_on 3.25s 1 linear;
    animation-fill-mode: forwards;
}

.product_on {
    -webkit-animation: line_on 1.375s 1 linear;
    -o-animation: line_on 1.375s 1 linear;
    animation: line_on 1.375s 1 linear;
    animation-fill-mode: forwards;
}

#hd .ecosystem_star figure.off {
    /*display: none;*/
    opacity: 0;
}

#hd .ecosystem_star figure img {
    position: absolute;
}

#hd .ecosystem_star figure img:nth-child(1) {
    width: 7%;
    top: 10%;
    right: 25%;
}

@keyframes star_one {
    0% {
        top: 10%;
    }
    25% {
        top: 12%;
    }
    80% {
        top: 8.5%;
    }
    100% {
        top: 10%;
    }
}

@-webkit-keyframes star_one {
    0% {
        top: 10%;
    }
    25% {
        top: 12%;
    }
    80% {
        top: 8.5%;
    }
    100% {
        top: 10%;
    }
}

.star_one {
    -webkit-animation: star_one 4s 1.5s linear;
    -o-animation: star_one 4s 1.5s linear;
    animation: star_one 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(2) {
    width: 15%;
    top: 17.5%;
    right: 42.5%;
}

@keyframes star_two {
    0% {
        top: 17.5%;
    }
    50% {
        top: 22.5%;
    }
    100% {
        top: 17.5%;
    }
}

@-webkit-keyframes star_two {
    0% {
        top: 17.5%;
    }
    50% {
        top: 22.5%;
    }
    100% {
        top: 17.5%;
    }
}

.star_two {
    -webkit-animation: star_two 4s 1.5s linear;
    -o-animation: star_two 4s 1.5s linear;
    animation: star_two 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(3) {
    width: 12%;
    top: 46.5%;
    right: 20%;
}

@keyframes star_tree {
    0% {
        top: 46.5%;
    }
    40% {
        top: 43.5%;
    }
    80% {
        top: 49.5%;
    }
    100% {
        top: 46.5%;
    }
}

@-webkit-keyframes star_tree {
    0% {
        top: 46.5%;
    }
    40% {
        top: 43.5%;
    }
    80% {
        top: 49.5%;
    }
    100% {
        top: 46.5%;
    }
}

.star_tree {
    -webkit-animation: star_tree 4s 1.5s linear;
    -o-animation: star_tree 4s 1.5s linear;
    animation: star_tree 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(4) {
    width: 13%;
    top: 35%;
    left: 15%;
}

@keyframes star_fore {
    0% {
        top: 35%;
    }
    30% {
        top: 38%;
    }
    70% {
        top: 30%;
    }
    100% {
        top: 35%;
    }
}

@-webkit-keyframes star_fore {
    0% {
        top: 35%;
    }
    30% {
        top: 38%;
    }
    70% {
        top: 30%;
    }
    100% {
        top: 35%;
    }
}

.star_fore {
    -webkit-animation: star_fore 4s 1.5s linear;
    -o-animation: star_fore 4s 1.5s linear;
    animation: star_fore 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(5) {
    width: 7.5%;
    top: 40%;
    left: 35%;
}

@keyframes star_five {
    0% {
        top: 40%;
    }
    20% {
        top: 37%;
    }
    80% {
        top: 43%;
    }
    100% {
        top: 40%;
    }
}

@-webkit-keyframes star_five {
    0% {
        top: 40%;
    }
    20% {
        top: 37%;
    }
    80% {
        top: 43%;
    }
    100% {
        top: 40%;
    }
}

.star_five {
    -webkit-animation: star_five 4s 1.5s linear;
    -o-animation: star_five 4s 1.5s linear;
    animation: star_five 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(6) {
    width: 9%;
    top: 65%;
    right: 40%;
}

@keyframes star_six {
    0% {
        top: 65%;
    }
    50% {
        top: 60%;
    }
    100% {
        top: 65%;
    }
}

@-webkit-keyframes star_six {
    0% {
        top: 65%;
    }
    50% {
        top: 60%;
    }
    100% {
        top: 65%;
    }
}

.star_six {
    -webkit-animation: star_six 4s 1.5s linear;
    -o-animation: star_six 4s 1.5s linear;
    animation: star_six 4s 1.5s linear;
}

#hd .ecosystem_star figure img:nth-child(7) {
    width: 12%;
    top: 65%;
    left: 32%;
}

@keyframes star_seven {
    0% {
        top: 65%;
    }
    35% {
        top: 63%;
    }
    75% {
        top: 68%;
    }
    100% {
        top: 65%;
    }
}

@-webkit-keyframes star_seven {
    0% {
        top: 65%;
    }
    35% {
        top: 63%;
    }
    75% {
        top: 68%;
    }
    100% {
        top: 65%;
    }
}

.star_seven {
    -webkit-animation: star_seven 4s 1.5s linear;
    -o-animation: star_seven 4s 1.5s linear;
    animation: star_seven 4s 1.5s linear;
}

#hd .hd-sec-ecosystem {
    position: relative;
}

#hd .hd-sec-compatibility>img.ecosystem {
    width: 100%;
}

#hd .ecosystem.hd-w1200 {
    max-width: 700px;
    padding-right: 120px;
    margin-top: -8%;
    z-index: 3;
}

/* ------------ mode -------------- */

#hd .hd-sec-mode {
    padding: 20px 0;
}

#hd .hd-sec-mode .hd-frame {
    margin-top: 110px;
}

#hd .hd-sec-mode li .hd-col50 {
    display: none;
}

#hd .hd-sec-mode li.hd-active .hd-col50 {
    display: inline-block;
    -webkit-animation: fadeInFromBottom .8s forwards;
    -o-animation: fadeInFromBottom .8s forwards;
    animation: fadeInFromBottom .8s forwards;
}

#hd .hd-sec-mode li .hd-title {
    text-align: center;
    position: relative;
    padding: 0 15%;
    margin-bottom: 90px;
    margin-top: -100px;
    display: none;
}

#hd .hd-sec-mode li.hd-active .hd-title {
    display: block;
    -webkit-animation: fadeInFromTop .8s forwards;
    -o-animation: fadeInFromTop .8s forwards;
    animation: fadeInFromTop .8s forwards;
}

#hd .hd-sec-mode li .hd-title:before,
#hd .hd-sec-mode li .hd-title:after {
    content: '';
    display: block;
    width: 47%;
    height: 150%;
    background-color: #021216;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0 auto -2%;
    z-index: -1;
}

#hd .hd-sec-mode li .hd-title:before {
    right: 45%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
}

#hd .hd-sec-mode li .hd-title:after {
    left: 45%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    transform: skewX(-30deg);
}

#hd .hd-sec-mode .scrollbox {
    padding-bottom: 37%;
    position: relative;
}

#hd .hd-sec-mode .hd-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 8%;
}

/* scroll */

#hd .mCSB_inside>.mCSB_container {
    margin-right: 30px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
    background-color: #CE0000;
    border-radius: 0;
}

#hd .hd-sec-mode h5 {
    font-size: 1.25rem;
    margin: 0 0 15px;
}

#hd .hd-sec-mode p {
    margin-bottom: 5px;
}

#hd .hd-sec-mode p.txt-red {
    font-weight: 600;
}

#hd #mode_switch_right,
#hd #mode_switch_left {
    height: 110px;
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 103.5%;
    margin: auto 0;
    cursor: pointer;
    display: none;
}

#hd #mode_switch_right.hd-active,
#hd #mode_switch_left.hd-active {
    display: block;
}

#hd #mode_switch_left {
    left: auto;
    right: 105.5%;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

#hd #audio_switch_right,
#hd #audio_switch_left {
    height: 110px;
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 95%;
    margin: auto 0;
    cursor: pointer;
    display: block;
}

#hd #audio_switch_left {
    left: auto;
    right: 95%;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* ---------- #performance -------- */

#performance .sec_kv .hd-w1300 {
    top: 44%;
}

#performance .sec_kv h2 {
    max-width: 800px;
}

#performance .sec_kv p {
    max-width: 1000px;
}

/* ------------ power ------------- */

#hd .hd-sec-power {
    padding: 30px 0;
}

#hd .hd-sec-power .fleft {
    width: 70%;
    margin-left: -20%;
}

#hd .hd-sec-power .fright {
    margin-top: 10%;
}

#hd .hd-sec-power nav {
    margin: 30px 0;
}

#hd .hd-sec-power nav li {
    display: inline-block;
    vertical-align: top;
    width: 16.6666%;
    margin-left: -5px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

#hd .hd-sec-power nav li h5 {
    font-size: 14px;
}

#hd .hd-sec-power nav li img:nth-child(2) {
    display: none;
}

#hd .hd-sec-power nav li.hd-active img:nth-child(1) {
    display: none;
}

#hd .hd-sec-power nav li.hd-active img:nth-child(2) {
    display: block;
}

#hd .hd-sec-power nav li:nth-child(-1n+4)::after {
    content: "";
    height: 1px;
    width: 10px;
    background-color: #288496;
    position: absolute;
    top: 50px;
    left: calc(100% - 6px);
    z-index: 2;
}

#hd #power_content h4 {
    margin: 10px 0;
    line-height: 1;
}

#hd #power_content li,
#hd #power_figure li {
    display: none;
}

#hd #power_content li.hd-active,
#hd #power_figure li.hd-active {
    display: block;
}

/* ------------ heatsink ------------- */


#hd .hd-sec-heatsink .heatsink {
    padding: 80px;
}
#hd #heatsink_mobile {
	display: none;
}

#hd .hd-sec-heatsink .heatsink .itembox .text .title {
	position: relative;
}
#hd .hd-sec-heatsink .heatsink .itembox .text h5 {
	font-size: 1.25em;
}
#hd .hd-sec-heatsink .heatsink .itembox .text .number{
	display: none;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 15px;
	border: 1px solid #ffffff;
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	left: -40px;
	z-index: 2;
}

#hd .hd-sec-heatsink .heatsink .itembox .text img {
    width: 100px;
    margin-right: 20px;
    display: inline-block;
}

#hd #Active_VRM {
	white-space: nowrap;
}


/* ------------ optimization ------ */

#hd .hd-sec-optimization {
    padding: 70px 0 20px;
}

#hd .hd-sec-optimization .switch {
    width: 120%;
    margin-left: -10%;
    max-width: none;
    text-align: center;
}

#hd .hd-sec-optimization .switch li {
    width: 16% !important;
    height: auto;
    background-size: 100%;
    padding: 10px 5px;
}

#hd .hd-sec-optimization .switch li h4 {
    font-size: 1.25em;
    min-height: 50px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

#hd .hd-sec-optimization .hd-frame {
    margin-top: 100px;
}

#hd .hd-sec-optimization .hd-content li .hd-col50,
#hd .hd-sec-optimization .hd-frame h3 {
    display: none;
}

#hd .hd-sec-optimization .hd-content li {
    margin-top: 90px;
    margin-bottom: 0;
}

#hd .hd-sec-optimization .hd-content li.hd-active .hd-col50 {
    display: inline-block;
    vertical-align: top;
    -webkit-animation: fadeInFromBottom .8s forwards;
    -o-animation: fadeInFromBottom .8s forwards;
    animation: fadeInFromBottom .8s forwards;
}

#hd .hd-sec-optimization .hd-content li.hd-active h5 {
    display: block;
    -webkit-animation: fadeInFromTop .8s forwards;
    -o-animation: fadeInFromTop .8s forwards;
    animation: fadeInFromTop .8s forwards;
}

#hd .hd-sec-optimization .hd-content li h5 {
    font-family: 'Xolonium', sans-serif;
    font-size: 1.25rem;
    text-transform: none;
    position: relative;
    margin-bottom: 10px;
    padding: 0 10% 0 5%;
}

#hd .hd-sec-optimization .hd-col50 p {
    padding: 0 10% 0 5%;
    margin-bottom: 0;
}

/* ------------ bios ------ */

#hd .hd-sec-bios {
    padding: 20px 0;
}

#hd .hd-sec-bios .switch {
    width: 120%;
    margin-left: -10%;
    max-width: none;
    text-align: center;
}

#hd .hd-sec-bios .switch li {
    width: 16% !important;
    height: auto;
    background-size: 100%;
    padding: 10px 5px;
}

#hd .hd-sec-bios .switch li h4 {
    font-size: 1.25em;
    min-height: 50px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

#hd .hd-sec-bios .hd-frame {
    margin-top: 100px;
}

#hd .hd-sec-bios .hd-content li .hd-col50,
#hd .hd-sec-bios .hd-frame h3 {
    display: none;
}

#hd .hd-sec-bios .hd-content li {
    margin-top: 90px;
    margin-bottom: 0;
}

#hd .hd-sec-bios .hd-content li.hd-active .hd-col50 {
    display: inline-block;
    vertical-align: top;
    -webkit-animation: fadeInFromBottom .8s forwards;
    -o-animation: fadeInFromBottom .8s forwards;
    animation: fadeInFromBottom .8s forwards;
}

#hd .hd-sec-bios .hd-content li.hd-active h5 {
    display: block;
    -webkit-animation: fadeInFromTop .8s forwards;
    -o-animation: fadeInFromTop .8s forwards;
    animation: fadeInFromTop .8s forwards;
}

#hd .hd-sec-bios .hd-content li h5 {
    font-family: 'Xolonium', sans-serif;
    font-size: 1.25rem;
    text-transform: none;
    position: relative;
    margin-bottom: 10px;
    padding: 0 10% 0 5%;
}

#hd .hd-sec-bios .hd-col50 p {
    padding: 0 10% 0 5%;
    margin-bottom: 0;
}

/* ------------ cooler ------------ */

#hd .hd-sec-cooler,
#hd .hd-sec-innovation {
    /* max-width: 1400px; */
    padding: 80px 0 120px;
    position: relative;
}

#hd #cooler-figure {
    width: 50%;
    max-width: 857px;
    position: relative;
    top: 0;
    left: 0;
}

#hd #cooler-figure li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#hd #cooler-figure figure {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 95%;
    background-color: #000;
}

#hd #cooler-figure img {
    position: absolute;
    top: 0;
    left: 15%;
}

#hd .cooler-design {
    margin-bottom: 5%;
}

#hd #cooler-figure img:nth-child(2) {
    opacity: 0;
}

/*#hd #cooler-figure .hd-active img:nth-child(2){
		-webkit-animation: fadeOut .5s .5s forwards;
		   -moz-animation: fadeOut .5s .5s forwards;
		    -ms-animation: fadeOut .5s .5s forwards;
		     -o-animation: fadeOut .5s .5s forwards;
		        animation: fadeOut .5s .5s forwards;
	}*/

/* #hd #cooler-figure .hd-active img:last-child{
		-webkit-animation: fadeIn .5s forwards;
		   -moz-animation: fadeIn .5s forwards;
		    -ms-animation: fadeIn .5s forwards;
		     -o-animation: fadeIn .5s forwards;
		        animation: fadeIn .5s forwards;
	} */

#hd #cooler-figure .hd-hover img:nth-child(2) {
    -webkit-animation: fadeIn .5s forwards;
    -moz-animation: fadeIn .5s forwards;
    -ms-animation: fadeIn .5s forwards;
    -o-animation: fadeIn .5s forwards;
    animation: fadeIn .5s forwards;
}

#hd #cooler-figure .hd-hover img:last-child {
    -webkit-animation: fadeOut .5s forwards;
    -moz-animation: fadeOut .5s forwards;
    -ms-animation: fadeOut .5s forwards;
    -o-animation: fadeOut .5s forwards;
    animation: fadeOut .5s forwards;
}

#hd #cooler-filter {
    text-align: center;
    margin: 30px 0;
}

#hd #cooler-filter li {
    cursor: pointer;
}

/* cooler filter */

#hd #cooler-filter li h3 {
    font-size: 1.5rem;
    text-align: center;
    text-transform: none;
    padding: 15px 8px;
    margin: 0 8px;
    position: relative;
    color: #496DD3;
    background: #496DD3;
    background: -webkit-linear-gradient(right, #496DD3 0%, #82FFDB);
    background: -moz-linear-gradient(right, #496DD3 0%, #82FFDB);
    background: -o-linear-gradient(right, #496DD3 0%, #82FFDB);
    background: linear-gradient(to left, #496DD3 0%, #82FFDB);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-input-placeholder,
:root #hd #cooler-filter li h3 {
    background: transparent !important;
}

#hd #cooler-filter li h3:before,
#hd #cooler-filter li h3:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transform: skewX(12deg);
    -moz-transform: skewX(12deg);
    -ms-transform: skewX(12deg);
    -o-transform: skewX(12deg);
    transform: skewX(12deg);
    z-index: -2;
}

#hd #cooler-filter li h3:before {
    background: #0b49ae;
    background: -webkit-linear-gradient(left, #0b49ae 0%, #24afad);
    background: -moz-linear-gradient(left, #0b49ae 0%, #24afad);
    background: -o-linear-gradient(left, #0b49ae 0%, #24afad);
    background: linear-gradient(to right, #0b49ae 0%, #24afad);
}

#hd #cooler-filter li h3:after {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #000;
    z-index: -1;
}

#hd #cooler-filter li:hover h3,
#hd #cooler-filter li.hd-active h3 {
    color: #fff !important;
    background: #fff !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

_:-ms-input-placeholder,
:root #hd #cooler-filter li:hover h3,
_:-ms-input-placeholder,
:root #hd #cooler-filter li.hd-active h3 {
    background: transparent !important;
}

#hd #cooler-filter li:hover h3:after,
#hd #cooler-filter li.hd-active h3:after {
    opacity: 0;
}

#hd #cooler-content {
    min-height: 400px;
}

#hd #cooler-content h5 {
    font-size: 1.25rem;
    min-height: 50px;
    margin-top: 0;
}

#hd #cooler-content>li ul.flex_center{
	justify-content: center;
}


#hd #cooler-content>li {
    display: none;
}

#hd #cooler-content>li.hd-active {
    display: block;
}

#hd #cooler-content>li li.hd-col50 {
    vertical-align: top;
    max-width: 300px;
    padding: 0 10px;
}

#hd #cooler-content>li li.hd-col100 img,
#hd #cooler-content>li li.hd-col100 .hd-txt {
    display: inline-block;
    vertical-align: middle;
}

#hd #cooler-content>li li.hd-col100 h5 {
    min-height: 0;
}

#hd #cooler-content>li li.hd-col100 p {
    margin-bottom: 10px;
}

#hd #cooler-content>li li.hd-col100 img {
    width: 40%;
    min-width: 200px;
    max-width: 309px;
}

#hd #cooler-content>li li.hd-col100 .hd-txt {
    width: 60%;
    max-width: calc(100% - 200px);
    margin-left: -5px;
}

#hd #cooler-content>li li p {
    line-height: 1.25;
}
#hd #cooler-content>li li p span{
	color: #646464;
	font-size: 14px;
    font-weight: 400;
}

#hd #cooler-figure li {
    opacity: 0;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -ms-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
}

#hd #cooler-figure li.hd-active {
    opacity: 1;
}

#hd #cooler-figure li.hd-hover {
    z-index: 3;
    opacity: 1;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

/* ------------ ddr4 -------------- */

#hd .hd-sec-ddr4 {
    padding: 50px 0;
}

#hd .hd-sec-ddr4 h3 {
    margin-bottom: 30px;
}

#hd .hd-sec-ddr4 .m2-right {
    margin-left: -20%;
    margin-right: -22%;
    position: relative;
    margin-top: 5%;
}

#hd .hd-sec-ddr4 .tag {
    display: inline-block;
}

#hd .hd-sec-ddr4 .pcie {
    width: 80px;
    margin-top: 20px;
    display: inline-block;
}

#hd #memory-m2-set img:nth-of-type(2) {
    display: none;
}

#hd #memory-m2-set img:nth-of-type(2),
#hd #memory-m2-set img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

#hd #memory-m2-set.hd-active img:nth-of-type(2) {
    display: block;
    -webkit-animation: m2-2 1s ease-out .5s both;
}

#hd #memory-m2-set.hd-active img:nth-of-type(3) {
    -webkit-animation: m2-3 1s ease-out both;
}

@keyframes m2-2 {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes m2-3 {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-20%);
    }
}

#hd .hd-sec-ddr4 .ddr4-left {
    margin-left: -14%;
    margin-right: -25%;
}

#hd .hd-sec-ddr4 .m2-left {
    position: relative;
    margin-top: 7%;
    z-index: 2;
}

#hd .hd-sec-ddr4 .ddr4-right {
    position: relative;
    z-index: 2;
    margin-top: 7%;
    top: 160px;
    left: 80px;
}

/* ------------ x299 ---------- */

#hd .hd-sec-memory .hd-sec-x299 .text {
    text-align: center;
    margin-bottom: 30px;
}

#hd .chart-figure {
    display: table;
    width: 100%;
    line-height: 1.2;
    margin-bottom: 40px;
}

#hd .hd-sec-x299 .testing {
    padding-left: 30px;
    padding-right: -30px;
}

#hd .chart-compare {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

#hd .chart-compare .title {
    margin-bottom: .5em;
    /* color: #02b2e4; */
}

#hd .chart-compare .term {
    margin-right: 250px
}

#hd .chart-compare .term {
    margin-right: 100px
}

#hd .chart-compare .name {
    margin-bottom: .3em;
    font-size: .9375em
}

#hd .chart-compare .vol {
    position: relative;
    width: 100%;
    height: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#hd .chart-compare .vol .bar {
    display: block;
    width: 100%;
    height: 10px;
    -moz-transform: skewX(34deg);
    -ms-transform: skewX(34deg);
    -webkit-transform: skewX(34deg);
    transform: skewX(34deg)
}

#hd .chart-compare .vol .value {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    left: 100%;
    margin-left: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 10px
}

#hd .chart-compare .vol .value small {
    font-size: 75%
}

#hd .chart-compare .term.good .name {
    color: #02b2e4
}

#hd .chart-compare .term.good .name-alt {
    color: #fff
}

#hd .chart-compare .term.good .name-2 {
    color: #02b2e4;
    font-size: 2.2em;
    font-weight: bold;
}

#hd .chart-compare .term.good .vol .bar {
    background-image: -webkit-linear-gradient(left, #02b2e4 0%, #00e6d8 100%);
    background-image: linear-gradient(to right, #02b2e4 0%, #00e6d8 100%)
}

#hd .chart-compare .term.good .vol .value {
    color: #10b8b0;
    font-size: 1.6em
}

#hd .chart-compare .term.bad {
    margin-top: .5em
}

#hd .chart-compare .term.bad .name {
    color: #b3b3b3
}

#hd .chart-compare .term.bad .vol .bar {
    background-image: -webkit-linear-gradient(left, #ddd 0%, #666 100%);
    background-image: linear-gradient(to right, #dddddd 0%, #666666 100%)
}

#hd .chart-compare .term.bad .vol .value {
    color: #a0a0a0;
    font-size: 1.25em
}

#hd .chart-wrapper .cube {
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    padding-top: 10px;
    border: 2px solid #10b8b0;
    border-radius: 5px;
    display: table-cell;
    /* position: absolute;
		right: 5px;
		top: 55px; */
    text-align: center;
    color: #10b8b0;
}

#hd .chart-wrapper .cube .number {
    font-size: 2.3em;
    font-weight: bold;
}

#hd .chart-text {
    margin-top: 30px;
}

#hd .chart-text .title {
    margin-bottom: .5em;
    /* color: #02b2e4; */
}

/* ---------- #tune -------- */

#tune .sec_kv .hd-w1300 {
    top: 44%;
}

#tune .sec_kv h2 {
    max-width: 800px;
}

#tune .sec_kv p {
    max-width: 1000px;
}

/* ------------ ramcache ---------- */

#hd .hd-sec-ramcache {
    width: 80%;
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
}

#hd #ramcache-img {
    position: relative;
    transform-style: preserve-3d;
    perspective: 600px;
}

#hd #ramcache-img figure {
    width: 43%;
    max-width: 540px;
    height: 0;
    padding-bottom: 30.5%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    z-index: 3;
    -webkit-transform: rotateY(-10deg) translate3d(-20%, 0, 70px);
    -moz-transform: rotateY(-10deg) translate3d(-20%, 0, 70px);
    -ms-transform: rotateY(-10deg) translate3d(-20%, 0, 70px);
    -o-transform: rotateY(-10deg) translate3d(-20%, 0, 70px);
    transform: rotateY(-10deg) translate3d(-20%, 0, 70px);
}

#hd #ramcache-img figure li {
    opacity: 0;
}

#hd #ramcache-img figure li.hd-active {
    opacity: 1;
}

#hd #ramcache-img figure img {
    position: absolute;
    top: 0;
    right: 0;
}

#hd #ramcache-img .hd-txt {
    width: 90%;
    max-width: 400px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: left;
}

#hd #ramcache-img li:last-child .hd-txt {
    top: 65%;
}

#hd #ramcache_switch_right {
    height: 73px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    margin: auto 0;
    cursor: pointer;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

#hd #transfer_time {
    width: 25%;
    min-width: 325px;
    position: absolute;
    right: 52%;
    bottom: 0;
}

/* ------------ oled -------------- */

#hd .hd-sec-oled .hd-txt {
    margin-top: 10%;
}

#hd .hd-sec-oled .fright {
    position: relative;
}

#hd .hd-sec-oled .btnBox {
    padding-left: 5%;
}

#hd .hd-sec-oled .skew-btn {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    margin: 0 1.5%;
    background-color: #000000;
    cursor: pointer;
    border-left: 2px solid #496DD3;
    border-right: 2px solid #C61AD6;
    background-position: 100% 0, 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-image: -webkit-linear-gradient(left, #496DD3 0%, #C61AD6 100%), -webkit-linear-gradient(left, #496DD3 0%, #C61AD6 100%);
    background-image: -moz-linear-gradient(left, #496DD3 0%, #C61AD6 100%), -moz-linear-gradient(left, #496DD3 0%, #C61AD6 100%);
    background-image: -o-linear-gradient(left, #496DD3 0%, #C61AD6 100%), -o-linear-gradient(left, #496DD3 0%, #C61AD6 100%);
    background-image: linear-gradient(to right, #496DD3 0%, #C61AD6 100%), linear-gradient(to right, #496DD3 0%, #C61AD6 100%);
    -webkit-transform: skewX(35deg);
    -moz-transform: skewX(35deg);
    -ms-transform: skewX(35deg);
    -o-transform: skewX(35deg);
    transform: skewX(35deg);
    -webkit-transition: background .25s ease;
    -moz-transition: background .25s ease;
    -ms-transition: background .25s ease;
    -o-transition: background .25s ease;
    transition: background .25s ease;
}

#hd .hd-sec-oled .skew-btn h4 {
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    padding: 20px;
    margin-bottom: 0;
    -webkit-transform: skewX(-35deg);
    -moz-transform: skewX(-35deg);
    -ms-transform: skewX(-35deg);
    -o-transform: skewX(-35deg);
    transform: skewX(-35deg);
}

#hd .hd-sec-oled .skew-btn:hover {
    background-position: 0 0, 0 100%;
}

#hd .hd-sec-oled .skew-btn.active {
    background-color: rgba(83, 104, 208, .3);
}

#hd .hd-sec-oled .fleft {
    position: relative;
}

#hd .hd-sec-oled .hd-gif {
    width: 14%;
    position: absolute;
    top: 46.5%;
    left: 16.5%;
    -webkit-transform: rotate(-1deg) skewY(-7.2deg);
    -moz-transform: rotate(-1deg) skewY(-7.2deg);
    -ms-transform: rotate(-1deg) skewY(-7.2deg);
    -o-transform: rotate(-1deg) skewY(-7.2deg);
    transform: rotate(6deg) skewY(0.8deg);
}

#hd .hd-sec-oled .hd-gif li:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}

#hd .hd-sec-oled .hd-gif li {
    display: none;
}

#hd .hd-sec-oled .hd-gif li.active {
    display: block;
}

/* --- */

#hd .top_content {
    position: relative;
}

#hd .txt-content {
    position: relative;
    padding: 20px 55px;
}

#hd .txt-content p {
    margin-bottom: 0;
}

#hd .txt-content .left,
#hd .txt-content .right {
    position: absolute;
    width: 30px;
    height: 100px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(../img/arrow_red.png);
    background-size: 100% 100%;
    cursor: pointer;
    z-index: 5;
}

#hd .txt-content .left {
    left: 0;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

#hd .txt-content .right {
    right: 0;
}

#hd .hd-sec-ramcache .txt-content .right,
#hd .hd-sec-ramcache .txt-content .left {
    top: 625%;
}

#hd #lighting .txt-content .right,
#hd #lighting .txt-content .left {
    z-index: 5;
}

#hd .hd-uiChange .top_content {
    background-image: url(../img/SECTION5/bg.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#hd .screenBox {
    position: relative;
}

#hd .screenBox .ui_list img {
    width: 100%;
}

#hd .main-txt {
    padding: 30px 0;
    max-width: 800px;
}

#hd .main-txt p {
    margin-bottom: 0;
}

#hd .txt-content h3 {
    margin-bottom: 10px;
}

/*hd-sec-studio*/

#hd .hd-sec-audio .hd-sec-sonic .left,
#hd .hd-sec-audio .hd-sec-sonic .right {
    display: none;
}

#hd .hd-sec-audio .hd-sec-sonic .left.hd-active,
#hd .hd-sec-audio .hd-sec-sonic .right.hd-active {
    display: block;
}

#hd .hd-sec-audio .txt-content .right,
#hd .hd-sec-audio .txt-content .left {
    top: 450%;
}

#hd .hd-sec-audio .screenBox {
    width: 64%;
    margin-left: 5%;
}

#hd .hd-sec-audio .pd {
    position: absolute;
    width: 42%;
    right: 0;
    bottom: 0;
}

#hd .hd-sec-audio .screenBox .ui_list {
    position: relative;
    width: 86%;
    top: 11%;
    left: 11%;
}

/* ------------ armoury ----------- */

#hd .hd-sec-armoury {
    padding: 100px 0 70px;
}

#hd .hd-sec-armoury h3+p {
    margin-bottom: 50px;
}

#hd .hd_armoury_filter {
    width: 255px;
}

#hd .hd_armoury_filter li {
    border: 1px solid #B80017;
    padding: 20px 15px;
    margin-bottom: 10px;
    cursor: pointer;
}

#hd .hd_armoury_filter li.hd_active {
    background: #5d0000;
    background: -moz-linear-gradient(left, #5d0000 0%, #cf3a00 100%);
    background: -webkit-linear-gradient(left, #5d0000 0%, #cf3a00 100%);
    background: linear-gradient(to right, #5d0000 0%, #cf3a00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d0000', endColorstr='#cf3a00', GradientType=1);
}

#hd .hd_armoury_filter li h4 {
    color: #B80017;
    margin-bottom: 0;
    font-size: 1.125em;
    -webkit-transition: color .25s ease;
    -moz-transition: color .25s ease;
    -ms-transition: color .25s ease;
    -o-transition: color .25s ease;
    transition: color .25s ease;
}

#hd .hd_armoury_filter li:hover h4,
#hd .hd_armoury_filter li.hd_active h4 {
    color: #ffffff;
}

#hd .hd-sec-armoury .fright {
    width: calc(100% - 255px);
    padding-left: 20px;
}

#hd .hd_armoury_content {
    width: 100%;
}

#hd .hd_armoury_content li {
    height: 0;
    opacity: 0;
    visibility: none;
}

#hd .hd_armoury_content li.hd_active {
    height: auto;
    opacity: 1;
    visibility: visible;
}

#hd .hd_armoury_content figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.2857%;
    background: 0 0 no-repeat;
    background-size: contain;
}

#hd .hd_armoury_content .owl-dots {
    width: 100%;
    position: absolute;
    top: 100%;
    margin: 10px 0;
    text-align: center;
}

#hd .hd_armoury_content .owl-dot {
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    background: #333333;
    margin: 5px;
}

#hd .hd_armoury_content .owl-dot.active {
    background: #9E0C00;
}

#hd .hd-sec-armoury .hd_btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.125em;
    font-weight: bold;
    color: #989898;
    background: #000000;
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 10px;
    margin: 50px 0 0;
    position: relative;
    -webkit-transition: color .25s ease;
    -moz-transition: color .25s ease;
    -ms-transition: color .25s ease;
    -o-transition: color .25s ease;
    transition: color .25s ease;
}

#hd .hd-sec-armoury .hd_btn:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(to right, #363636, #9C9C9C, #363636);
}

#hd .hd-sec-armoury .hd_btn:hover {
    color: #ffffff;
}

/* #hd .hd-sec-armoury .owl-stage,
	#hd .hd-sec-armoury .owl-item{width: 100% !important;} */

/* ---------- #audio -------------- */

/* ------------ sonic ------------- */

#hd .hd-sec-sonic {
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

#hd #sonic_studio li {
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
    margin-right: -2px;
    width: 16.6666%;
    height: 0;
    padding: 10px;
    padding-bottom: 37%;
    background-repeat: no-repeat;
    background-size: 87%;
    background-position: center top;
    position: relative;
    cursor: crosshair;
}

#hd #sonic_studio li:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
    box-shadow: 0 0 50px 78px #000000;
}

#hd #sonic_studio li:nth-child(1) {
    background-image: url(../img/audio/sonic-studio-iii-1.jpg);
}

#hd #sonic_studio li:nth-child(2) {
    background-image: url(../img/audio/sonic-studio-iii-2.jpg);
}

#hd #sonic_studio li:nth-child(3) {
    background-image: url(../img/audio/sonic-studio-iii-3.jpg);
}

#hd #sonic_studio li:nth-child(4) {
    background-image: url(../img/audio/sonic-studio-iii-4.jpg);
}

#hd #sonic_studio li:nth-child(5) {
    background-image: url(../img/audio/sonic-studio-iii-5.jpg);
}

#hd #sonic_studio li:nth-child(6) {
    background-image: url(../img/audio/sonic-studio-iii-6.jpg);
}

#hd #sonic_studio h4 {
    font-family: 'Xolonium', sans-serif;
    font-size: 18px;
    text-align: center;
    text-transform: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 20px auto;
    z-index: 2;
}

#hd #sonic_studio .hd-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 20% 0;
    border-bottom: none;
    background: url(../img/audio/sonic-studio-lll-hover.jpg) 0 0 no-repeat;
    background-size: cover;
    border: 1px solid #8d0000;
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}

#hd #sonic_studio p {
    margin-bottom: 0;
    position: absolute;
    width: calc(100% + 20px);
    height: 100%;
    padding: 0 10% 150px;
    overflow-y: scroll;
}

#hd #sonic_studio li:hover .hd-content {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

#hd #sonic_studio li:hover h4 {
    color: #cc0c00;
}

#hd .hd-sec-sonic .switch {
    width: 750px;
    text-align: center;
}

#hd .hd-sec-sonic .switch li {
    width: 30%;
    height: auto;
    background-size: 100%;
    padding: 10px 5px;
    text-align: center;
}

#hd .hd-sec-sonic .switch li h4 {
    font-size: 1.25em;
    min-height: 50px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    transform: skewX(-25deg);
    line-height: 2.5;
    white-space: nowrap;
}

#hd .hd-sec-sonic figure {
    position: relative;
    width: 80%;
    max-width: 580px;
    margin: 30px auto 0;
}

#hd .hd-sec-sonic figure>img {
    cursor: pointer;
}

#hd .hd-sec-sonic .hd-num {
    display: none;
}

#hd .hd-sec-sonic figure li {
    width: 55%;
    position: absolute;
}

#hd .hd-sec-sonic figure li h4 {
    font-size: 24px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background-size: 90%;
    position: relative;
}

#hd .hd-sec-sonic figure li h4,
#hd .hd-sec-sonic figure li p {
    padding-left: 70px;
}

#hd .hd-sec-sonic figure li:nth-child(1) {
    top: 31%;
    left: -60%;
}

#hd .hd-sec-sonic figure li:nth-child(1) h4:after,
#hd .hd-sec-sonic figure li:nth-child(2) h4:after {
    content: '';
    display: block;
    width: 110%;
    height: 1px;
    background-color: #cc0000;
    position: absolute;
    bottom: 0;
    left: 0;
}

#hd .hd-sec-sonic figure li:nth-child(2) {
    top: 80%;
    left: -60%;
}

#hd .hd-sec-sonic figure li:nth-child(3) {
    top: 16%;
    right: -50%;
    width: 60%;
}

#hd .hd-sec-sonic figure li:nth-child(3) h4 {
    padding-right: 70px;
    margin-bottom: 30px;
}

#hd .hd-sec-sonic figure li:nth-child(3) h4:after {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    background-color: #cc0000;
    position: absolute;
    bottom: 0;
    right: 0;
}

#hd .hd-sec-sonic figure+p {
    margin-bottom: 80px;
}

#hd .hd-sec-sonic .sound-row {
    margin-top: 30px;
}

#hd .hd-sec-sonic .sound-row .hd-col33 {
    padding: 0 15px;
    vertical-align: top;
}

#sonic_ui_on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 99;
    display: none;
}

#sonic_ui_on img {
    max-width: 90% !important;
    max-height: 80vh;
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-shadow: 0 0 50px 2px rgba(255, 255, 255, .5);
}

/* ------------ radar ------------- */

#hd .hd-sec-radar {
    background: #000000 url('../img/audio/radar_bg.jpg') left center no-repeat;
    background-size: auto 80%;
    padding: 50px 0 195px;
    position: relative;
    z-index: 2;
}

#hd .hd-sec-radar p.hd-col80 {
    margin: 0 auto 100px;
}

#hd #audiogif {
    display: block;
    transform: perspective(660px) rotateY(12deg);
    position: relative;
    left: -29px;
    top: 0;
    margin: 0;
    border: 15px solid #1e1e1e;
}

#hd .gif-focus {
    position: absolute;
    display: none;
}

#hd .ghost-bg {
    position: absolute;
    right: -8%;
    bottom: -20%;
}

#hd .hd-sec-radar li.audio-tag {
    position: absolute;
    z-index: 2;
}

#hd .hd-sec-radar li.audio-tag:before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid #cc0000;
}

#hd .hd-sec-radar .txt_decoline {
    font-size: 27px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#hd .hd-sec-radar li.audio-tag small {
    display: block;
}

#hd .hd-sec-radar li.audio-tag:nth-child(1) {
    width: 400px;
    top: 40%;
    right: 3%;
}

#hd .hd-sec-radar li.audio-tag:nth-child(1):before {
    display: none;
}

#hd .hd-sec-radar li.audio-tag:nth-child(2) {
    width: 355px;
    top: 60%;
    right: 8%;
}

#hd .hd-sec-radar li.audio-tag:nth-child(2):before {
    /*width: 185px;
		height: 40px;
		left: -197px;
		top:43px;*/
    width: 52%;
    height: 37%;
    left: -55%;
    top: 40%;
    border-top: none;
    border-left: none;
    transform: skewX(-30deg);
}

#hd .hd-sec-radar li.audio-tag:nth-child(2):after {
    content: "";
    display: block;
    position: absolute;
    width: 136px;
    height: 136px;
    border-radius: 68px;
    border: 1px solid #cc0000;
    /*left: -335px;
    	top: 50px;*/
    left: -94%;
    top: 47%;
}

#hd .hd-sec-radar li.audio-tag:nth-child(2) h4,
#hd .hd-sec-radar li.audio-tag:nth-child(2) small {
    padding-left: 45px;
}

#hd .hd-sec-radar li.audio-tag:nth-child(3) {
    width: 330px;
    top: 80%;
    right: 8%;
}

#hd .hd-sec-radar li.audio-tag:nth-child(3) h4,
#hd .hd-sec-radar li.audio-tag:nth-child(3) small {
    padding-left: 20px;
}

#hd .hd-sec-radar li.audio-tag:nth-child(3):before {
    width: 125px;
    height: 75px;
    left: -148px;
    top: -33px;
    border-bottom: none;
    border-left: none;
    transform: skewX(30deg);
}

#hd .hd-sec-radar li.audio-tag:nth-child(4) {
    width: 366px;
    bottom: -18%;
    left: 40%;
}

#hd .hd-sec-radar li.audio-tag:nth-child(4) h4,
#hd .hd-sec-radar li.audio-tag:nth-child(4) small {
    padding-left: 10px;
}

#hd .hd-sec-radar li.audio-tag:nth-child(4):before {
    /*width: 215px;
	    height: 254px;
	    left: -341px;
	    top: -189px;*/
    width: 59%;
    height: 290%;
    left: -93%;
    top: -215%;
    border-top: none;
    border-right: none;
    transform: skewX(40deg);
}

#hd .hd-sec-radar li.audio-tag:nth-child(4) small:before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 22px;
    left: -10px;
    top: 44px;
    border-right: 1px solid #cc0000;
    transform: skewX(-40deg);
}

#hd .hd-sec-radar li.audio-tag:nth-child(4):after {
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    border: 1px solid #cc0000;
    /*left: -517px;
    	top: -259px;*/
    left: -137%;
    top: -305%;
}

/* ------------ supremefx --------- */

#hd .hd-sec-supremefx {
    position: relative;
    padding: 3% 0 150px;
}

#hd .hd-sec-supremefx .hd-w1200 {
    position: relative;
    z-index: 2;
}

#hd .hd-sec-supremefx h3 {
    margin-top: 30px;
}

#hd .hd-sec-supremefx p.p-width {
    width: 60%;
    margin: 30px 0 50px;
}

#hd .hd-sec-supremefx .audio-button {
    width: 90%;
}

#hd .hd-sec-supremefx .audio-button .hd-col20 {
    padding: 15px;
}

#hd .hd-sec-supremefx .audio-button .hd-col20 div {
    border: 2px solid #b4b4b4;
    padding: 20px;
    background-color: #060606;
    cursor: crosshair;
    min-height: 250px;
}

#hd .hd-sec-supremefx .audio-button p {
    line-height: 1.2em;
    margin-bottom: 10px;
}

#hd .hd-sec-supremefx .img-position {
    position: absolute;
    top: -15%;
    right: 0;
}

#hd .hd-sec-supremefx .hd-supremefx {
    display: block;
}

#hd .hd-sec-supremefx .hd-supremefx li {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: 1;
    transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
}

#hd .hd-sec-supremefx .hd-supremefx li.hd-active {
    opacity: 1;
}

/* ---------- #networking --------- */

/* ------------ ethernet ---------- */

#hd .hd-sec-ethernet {
    padding: 0 0 10%;
    position: relative;
}

#hd .hd-sec-ethernet .right {
    display: block;
    /* max-width: calc(80% - 400px); */
    /*max-width: 50%;*/
    width: 50%;
    position: absolute;
    top: 8%;
    bottom: 0;
    right: 0;
}

#hd .hd-sec-ethernet .right img {
    margin-right: 0;
}

#hd .hd-sec-ethernet .left {
    position: relative;
    z-index: 2;
}

#hd .hd-sec-ethernet .left img {
    margin-left: 0;
}

#hd .hd-sec-ethernet h3 {
    margin-top: 30px;
}

#hd .hd-sec-ethernet figure {
    display: inline-block;
    padding: 0 8px;
}

#hd .hd-sec-ethernet .skewtag {
    text-align: center;
    background: #496DD3;
    background: -webkit-linear-gradient(right, #496DD3 0%, #23ccd2);
    background: -moz-linear-gradient(right, #496DD3 0%, #23ccd2);
    background: -o-linear-gradient(right, #496DD3 0%, #23ccd2);
    background: linear-gradient(to left, #496DD3 0%, #23ccd2);
    padding: 0 25px;
    margin-bottom: 10px;
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

#hd .hd-sec-ethernet .skewtag h6 {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;
    transform: skew(20deg);
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
}

#hd .hd-sec-ethernet ol li h3 {
    position: relative;
}

#hd .hd-sec-ethernet ol {
    counter-reset: mycounter;
}

#hd .hd-sec-ethernet ol li {
    position: relative;
}

#hd .hd-sec-ethernet ol li:before {
    counter-increment: mycounter;
    content: counter(mycounter);
    display: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 0;
    left: -40px;
    z-index: 2;
}

#hd .display_on_1366 {
    display: none;
}

/* ------------ languard ---------- */

#hd .hd-sec-languard {
    position: relative;
    padding: 30px 0;
}

#hd .hd-sec-languard .fright img {
    margin-left: 0;
}

#hd .hd-sec-languard .fleft {
    margin-top: -13%;
    margin-left: -10%;
    margin-right: -5%;
    max-width: 595px;
    position: relative;
    z-index: -1;
}

#hd .hd-sec-languard img.scroll-active {
    width: 50%;
}

#hd .hd-sec-languard .scroll-active {
    position: absolute;
    top: 32%;
    right: 25%;
    transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
}

#hd .hd-sec-languard .scroll-active.on {
    top: 10%;
}

#hd .hd-sec-languard .p-position {
    position: absolute;
    font-weight: bold;
}

#hd .hd-sec-languard .p-position:nth-child(3) {
    bottom: 21%;
    right: 5%;
}

#hd .hd-sec-languard .p-position:nth-child(4) {
    top: 30%;
    right: 15%;
    opacity: 0;
}

#hd .hd-sec-languard .p-position:nth-child(4).scroll-active.on {
    top: 25%;
    right: 10%;
    opacity: 1;
}

/* ------------ gf_network -------- */

#hd .hd-sec-gf_network {
    max-width: 1920px;
    margin: 0 auto;
    padding: 70px 0 30px;
}

#hd .rog_first {
    position: relative;
}

#hd .rog_first .rog_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -2;
}

#hd .rog_first .rog_black {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

@keyframes black_go {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

@-webkit-keyframes black_go {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

#hd .black_go {
    -webkit-animation: black_go 1.25s 1 linear;
    -o-animation: black_go 1.25s 1 linear;
    animation: black_go 1.25s 1 linear;
    animation-fill-mode: forwards;
}

#fp-nav ul li .fp-tooltip.active {
    -webkit-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
    width: auto;
    opacity: 1;
}

#hd #gf_slider .item {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 44.27%;
    background: left bottom no-repeat;
    background-size: 100% auto;
    position: relative;
}

#hd #gf_slider h5.txt-red {
    font-size: 1.75em;
    text-transform: uppercase;
    color: #990C00;
    background: none;
    -webkit-text-fill-color: #990C00;
    -webkit-background-clip: initial;
}

#hd #gf_slider img {
    width: auto;
}

#hd #gf_slider .owl-prev,
#hd #gf_slider .owl-next {
    width: 34px;
    height: 110px;
    background: url(../img/more/game_first_v/arrow-r.png) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

#hd #gf_slider .owl-prev {
    left: 3%;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

#hd #gf_slider .owl-next {
    right: 3%;
}

#hd #gf_slider .slide-1 .content {
    width: 40%;
    max-width: 556px;
    position: absolute;
    left: 50%;
    top: 5%;
}

#hd #gf_slider .slide-1 .icon_list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#hd #gf_slider .slide-1 .icon_list li {
    width: 8%;
    height: 0;
    padding-bottom: 7.0526%;
    background: center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 33%;
    left: 17%;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(1) {
    -webkit-animation: device_flow1 12s linear infinite;
    -o-animation: device_flow1 12s linear infinite;
    animation: device_flow1 12s linear infinite;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(2) {
    -webkit-animation: device_flow2 12s -2s linear infinite;
    -o-animation: device_flow2 12s -2s linear infinite;
    animation: device_flow2 12s -2s linear infinite;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(3) {
    -webkit-animation: device_flow3 12s -4s linear infinite;
    -o-animation: device_flow3 12s -4s linear infinite;
    animation: device_flow3 12s -4s linear infinite;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(4) {
    -webkit-animation: device_flow4 12s -6s linear infinite;
    -o-animation: device_flow4 12s -6s linear infinite;
    animation: device_flow4 12s -6s linear infinite;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(5) {
    -webkit-animation: device_flow5 12s -8s linear infinite;
    -o-animation: device_flow5 12s -8s linear infinite;
    animation: device_flow5 12s -8s linear infinite;
}

#hd #gf_slider .active .slide-1 .icon_list li:nth-child(6) {
    -webkit-animation: device_flow6 12s -10s linear infinite;
    -o-animation: device_flow6 12s -10s linear infinite;
    animation: device_flow6 12s -10s linear infinite;
}

#hd #gf_slider .slide-2 .content {
    width: 40%;
    max-width: 556px;
    position: absolute;
    left: 50%;
    top: 5%;
}

#hd #gf_slider .slide-2 .content .ui {
    position: relative;
}

#hd #gf_slider .slide-2 .content .ui-web,
#hd #gf_slider .slide-2 .content .ui-game {
    position: absolute;
    top: 0;
    left: 0;
}

#hd #gf_slider .slide-2 .content .ui-web {
    opacity: 0;
    -webkit-animation: show_ui 10s -8.57s linear infinite;
    -o-animation: show_ui 10s -8.57s linear infinite;
    animation: show_ui 10s -8.57s linear infinite;
}

#hd #gf_slider .slide-2 .content .ui-game {
    opacity: 0;
    -webkit-animation: show_ui 10s -2.86s linear infinite;
    -o-animation: show_ui 10s -2.86s linear infinite;
    animation: show_ui 10s -2.86s linear infinite;
}

#hd #gf_slider .slide-2 .content .runman {
    width: 9%;
    position: absolute;
    right: -3.5%;
    opacity: 0;
}

#hd #gf_slider .slide-2 .content .runman-web {
    top: 75%;
    -webkit-animation: show_runman 10s -8.57s linear infinite;
    -o-animation: show_runman 10s -8.57s linear infinite;
    animation: show_runman 10s -8.57s linear infinite;
}

#hd #gf_slider .slide-2 .content .runman-game {
    top: 20%;
    -webkit-animation: show_runman 10s -2.86s linear infinite;
    -o-animation: show_runman 10s -2.86s linear infinite;
    animation: show_runman 10s -2.86s linear infinite;
}

#hd #gf_slider .slide-2 .icon_list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#hd #gf_slider .slide-2 .icon_list li {
    width: 8%;
    height: 0;
    padding-bottom: 7.0526%;
    background: center bottom no-repeat;
    background-size: 64px auto;
    position: absolute;
    top: 33%;
    left: 17%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(7) {
    top: 63%;
    left: 43%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(1) {
    top: 60%;
    left: 39%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(3) {
    top: 57%;
    left: 35%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(2) {
    top: 53%;
    left: 31%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(4) {
    top: 49%;
    left: 27%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(5) {
    top: 44%;
    left: 23%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(6) {
    top: 36%;
    left: 23%;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(2),
#hd #gf_slider .slide-2 .icon_list li:nth-child(3),
#hd #gf_slider .slide-2 .icon_list li:nth-child(7) {
    -webkit-animation: run_web 10s -8.57s linear infinite;
    -o-animation: run_web 10s -8.57s linear infinite;
    animation: run_web 10s -8.57s linear infinite;
}

#hd #gf_slider .slide-2 .icon_list li:nth-child(4),
#hd #gf_slider .slide-2 .icon_list li:nth-child(6) {
    -webkit-animation: run_game 10s -2.86s linear infinite;
    -o-animation: run_game 10s -2.86s linear infinite;
    animation: run_game 10s -2.86s linear infinite;
}

/*#hd #gf_slider .active .slide-2 .icon_list li{
		-webkit-animation: icon_flow 10s linear infinite;
		-o-animation: icon_flow 10s linear infinite;
		animation: icon_flow 10s linear infinite;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(2){
		-webkit-animation: icon_flow_run 10s -8.57s linear infinite, change_bg_web 10s -8.57s linear infinite;
		-o-animation: icon_flow_run 10s -8.57s linear infinite, change_bg_web 10s -8.57s linear infinite;
		animation: icon_flow_run 10s -8.57s linear infinite, change_bg_web 10s -8.57s linear infinite;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(3){
		-webkit-animation: icon_flow_run_web2 10s -7.14s linear infinite, change_bg_web 10s -8.57s linear infinite;
		-o-animation: icon_flow_run_web2 10s -7.14s linear infinite, change_bg_web 10s -8.57s linear infinite;
		animation: icon_flow_run_web2 10s -7.14s linear infinite, change_bg_web 10s -8.57s linear infinite;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(4){
		-webkit-animation: icon_flow_run_game2 10s -5.7s linear infinite, change_bg_game 10s -2.86s linear infinite;
		-o-animation: icon_flow_run_game2 10s -5.7s linear infinite, change_bg_game 10s -2.86s linear infinite;
		animation: icon_flow_run_game2 10s -5.7s linear infinite, change_bg_game 10s -2.86s linear infinite;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(5){
		-webkit-animation-delay: -4.28s;
		-o-animation-delay: -4.28s;
		animation-delay: -4.28s;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(6){
		-webkit-animation: icon_flow_run 10s -2.86s linear infinite, change_bg_game 10s -2.86s linear infinite;
		-o-animation: icon_flow_run 10s -2.86s linear infinite, change_bg_game 10s -2.86s linear infinite;
		animation: icon_flow_run 10s -2.86s linear infinite, change_bg_game 10s -2.86s linear infinite;
	}
	#hd #gf_slider .active .slide-2 .icon_list li:nth-child(7){
		-webkit-animation: icon_flow_run_web3 10s -1.43s linear infinite, change_bg_web 10s -8.57s linear infinite;
		-o-animation: icon_flow_run_web3 10s -1.43s linear infinite, change_bg_web 10s -8.57s linear infinite;
		animation: icon_flow_run_web3 10s -1.43s linear infinite, change_bg_web 10s -8.57s linear infinite;
	}*/

#hd #gf_slider .slide-3 .content {
    width: 25%;
    position: absolute;
    top: 40%;
    left: 65%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#hd #gf_slider .slide-3 .content span {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 5%;
}

#hd #gf_monitor {
    width: 35%;
    height: 0;
    padding-bottom: 27%;
    position: absolute;
    top: 0;
    bottom: 15%;
    left: 14%;
    margin: auto 0;
}

#hd #gf_monitor .screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: center center no-repeat;
    background-size: contain;
}

#hd #gf_monitor .screen-1 {
    width: 82%;
    height: 0;
    padding-bottom: 40%;
    left: 1%;
    right: 0;
    top: 12.6%;
    margin: 0 auto;
    background: center top no-repeat;
    background-size: 100%;
}

#hd #gf_monitor .start_game,
#hd #gf_monitor .screen-2,
#hd #gf_monitor .status {
    opacity: 0;
}

#hd #gf_monitor .status_zoom {
    width: 35%;
    height: 0;
    padding-bottom: 35%;
    background: right bottom no-repeat;
    background-size: contain;
    position: absolute;
    top: auto;
    left: auto;
    bottom: 25%;
    right: 6%;
    opacity: 0;
}

#hd #gf_app_list {
    width: 15%;
    height: 0;
    padding-bottom: 15%;
    position: absolute;
    top: 0;
    bottom: 20%;
    left: 47%;
    margin: auto 0;
}

#hd #gf_app_list li {
    width: 100%;
    height: 0;
    padding-bottom: 25%;
    background: 0 0 no-repeat;
    background-size: contain;
}

#hd .active #gf_monitor .screen-1 {
    -webkit-animation: scrollPage 1.8s 1s ease forwards;
    -o-animation: scrollPage 1.8s 1s ease forwards;
    animation: scrollPage 1.8s 1s ease forwards;
}

#hd .active #gf_monitor .start_game {
    -webkit-animation: popup 1.4s 3s ease-in;
    -o-animation: popup 1.4s 3s ease-in;
    animation: popup 1.4s 3s ease-in;
}

#hd .active #gf_monitor .screen-2 {
    -webkit-animation: fadeIn .5s 4.4s ease forwards;
    -o-animation: fadeIn .5s 4.4s ease forwards;
    animation: fadeIn .5s 4.4s ease forwards;
}

#hd .active #gf_monitor .status {
    opacity: 0;
    -webkit-animation: fadeIn .4s 5s ease forwards;
    -o-animation: fadeIn .4s 5s ease forwards;
    animation: fadeIn .4s 5s ease forwards;
}

#hd .active #gf_monitor .status_zoom {
    -webkit-animation: popup 1s 6s cubic-bezier(.17, .67, .74, 1.24) forwards;
    -o-animation: popup 1s 6s cubic-bezier(.17, .67, .74, 1.24) forwards;
    animation: popup 1s 6s cubic-bezier(.17, .67, .74, 1.24) forwards;
}

#hd .active #gf_app_list .tab-web {
    -webkit-animation: pulse_web 1.5s ease infinite, fadeTabWeb 1.2s 4.5s ease forwards;
    -o-animation: pulse_web 1.5s ease infinite, fadeTabWeb 1.2s 4.5s ease forwards;
    animation: pulse_web 1.5s ease infinite, fadeTabWeb 1.2s 4.5s ease forwards;
}

#hd .active #gf_app_list .tab-file {
    -webkit-animation: fadeTabFile 1.2s 4.5s ease forwards;
    -o-animation: fadeTabFile 1.2s 4.5s ease forwards;
    animation: fadeTabFile 1.2s 4.5s ease forwards;
}

#hd .active #gf_app_list .tab-game {
    -webkit-animation: fadeTabGame 1.2s 4.5s ease forwards, pulse 1.5s 5.6s ease infinite;
    -o-animation: fadeTabGame 1.2s 4.5s ease forwards, pulse 1.5s 5.6s ease infinite;
    animation: fadeTabGame 1.2s 4.5s ease forwards, pulse 1.5s 5.6s ease infinite;
}

/* ---------- #more --------------- */

#more .sec_kv .hd-w1300 {
    top: 45%;
}

/* #more .sec_kv h2{max-width: 640px; } */

#more .sec_kv p {
    max-width: 1000px;
}

/* ------------ ai_overclocking --- */

#hd .ai_overclocking_top {
    padding: 50px 0 10px;
}

#hd .ai_overclocking {
    margin: 100px 0;
}

#hd .ai_overclocking .cpu_cooling,
#hd .ai_overclocking .gradation_area .overclocking_area {
    display: flex;
    justify-content: center;
    align-items: center;
}

#hd .ai_overclocking .cpu_cooling {
    border: 1px solid #82E2D9;
}

#hd .ai_overclocking .cpu_cooling .black_area {
    padding: 4.25% 0 !important;
    background-color: #000;
    width: 450px;
}

#hd .ai_overclocking .cpu_cooling #black_area_first {
    padding-left: 100px !important;
}

#hd .ai_overclocking .cpu_cooling .black_area div {
    display: inline-block;
    vertical-align: middle;
}

#hd .ai_overclocking .cpu_cooling .black_area div h4 {
    margin-bottom: 10px !important;
}

#hd .ai_overclocking .cpu_cooling .black_area div p {
    margin-bottom: 0 !important;
}

#hd .ai_overclocking .cpu_cooling .black_area .cpu_txt {
    max-width: 235px;
    padding-left: 15px !important;
    width: 90%;
}

#hd .ai_overclocking .cpu_cooling .hd-aiimg {
    display: inline-block;
    margin: 0 50px !important;
}

#hd .ai_overclocking .gradation_area {
    position: relative;
}

#hd .ai_overclocking .gradation_area .gradation_bg {
    position: relative;
    z-index: -1;
}

#hd .ai_overclocking .gradation_area .gradation_bg .red_light {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: -1;
}

#hd .ai_overclocking .gradation_area .overclocking_area {
    position: absolute;
    bottom: -20px;
    width: 100%;
}

#hd .ai_overclocking .gradation_area .overclocking_area .red_area,
#hd .ai_overclocking .gradation_area .overclocking_area .red_img {
    -webkit-box-shadow: 0 0 15px 2.5px rgba(130, 226, 217, 0.6);
    box-shadow: 0 0 15px 2.5px rgba(130, 226, 217, 0.6);
    margin: 0 15px !important;
    background-color: #090909;
}

#hd .ai_overclocking .gradation_area .overclocking_area .red_img {
    padding-left: 20px;
}

#hd .ai_overclocking .gradation_area .overclocking_area .red_area {
    position: relative;
    width: 45%;
    height: 297px;
}

#hd .ai_overclocking .gradation_area .overclocking_area .red_area .red_center {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate( -50%, -50%);
    -o-transform: translate( -50%, -50%);
    -ms-transform: translate( -50%, -50%);
    -webkit-transform: translate( -50%, -50%);
    transform: translate( -50%, -50%);
    width: 100%;
}

#hd .ai_overclocking .gradation_area .overclocking_area .red_area,
#hd .ai_overclocking .gradation_area .overclocking_area .red_img,
#hd .gradation_area .overclocking_area .red_area .ai_txt,
#hd .gradation_area .overclocking_area .red_area .cpu_img {
    display: inline-block;
    vertical-align: top;
}

#hd .gradation_area .overclocking_area .red_area .ai_txt {
    max-width: 250px;
    padding-left: 15px !important;
}

#hd .gradation_area .overclocking_area .red_area .ai_txt p {
    margin-bottom: 0;
}

#hd .ai_overclocking .gradation_area .ai_cycle {
    position: absolute;
    bottom: -45px;
    width: 100%;
    padding: 0 1.5% !important;
    z-index: -1;
}

/* ------------ grid -------------- */

#hd .hd-sec-grid {
    padding: 100px 0 70px;
    direction: rtl;
}

#hd .hd-sec-grid .hd-col40,
#hd .hd-sec-grid .hd-col70 {
    direction: ltr;
}

#hd .hd-sec-grid .hd-col70 {
    margin-left: -10%;
    transform-style: preserve-3d;
    perspective: 600px;
}

#hd .hd-sec-grid .hd-col70 img {
    -webkit-transform: rotateY(15deg);
    -moz-transform: rotateY(15deg);
    -ms-transform: rotateY(15deg);
    -o-transform: rotateY(15deg);
    transform: rotateY(15deg);
}

/* ------------ overwolf ---------- */

#hd .hd-sec-overwolf {
    position: relative;
    padding-bottom: 100px;
}

#hd .hd-sec-overwolf .hd-w1200 {
    margin-top: 5%;
}

#hd .hd-sec-overwolf p.p-width {
    max-width: 500px;
}

#hd .hd-sec-overwolf .img-position {
    position: absolute;
    top: -10%;
    right: 0;
    z-index: -1;
}

#hd .hd-sec-overwolf ul.tag_red {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    padding: 0 10px;
    margin-left: -25px;
}

#hd .hd-sec-overwolf ul.tag_black {
    display: inline-block;
    vertical-align: top;
    width: 340px;
    padding: 0 10px;
    margin-left: -25px;
}

#hd .hd-sec-overwolf ul li {
    width: 100%;
    text-align: left;
    padding: 6px 10px 6px 30px;
    margin: 14px;
    display: inline-block;
    background-image: url(../img/more/red.png);
    background-position: 0 center;
    background-size: contain;
    background-repeat: no-repeat;
}

#hd .hd-sec-overwolf ul.tag_black li {
    background-image: url(../img/more/black.png);
}

#hd .hd-sec-overwolf h6 {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.5em
}

#hd .hd-sec-overwolf .hd-button {
    font-family: "Fjalla One", sans-serif;
    background-color: #cc0000;
    padding: 10px 15px;
    border-radius: 5px;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 1.25em;
    text-transform: uppercase;
    margin: 35px 0;
    display: inline-block;
    cursor: pointer;
}

#hd .hd-sec-overwolf .hd-skewtag span {
    display: none;
}

/*video*/

#hd #video.hd-videobox2.v-open {
    height: 100vh;
}

#hd #video.hd-videobox2 {
    width: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
}

#hd #video.hd-videobox2 video {
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    /* width: auto; */
    height: auto;
    background: url(../img/gives-you-more/video_poster.jpg) no-repeat;
    background-size: cover;
}

/* ------------ clone ------------- */

#hd .hd-sec-clone {
    position: relative;
    background: url(../img/more/bg.png) right 60% no-repeat;
    background-size: contain;
    padding: 150px 0;
}

#hd .hd-sec-clone .right {
    margin-right: -15%;
}

#hd .hd-sec-clone .right img {
    margin: 0 auto;
}

/* ---------- #intel -------------- */

#hd #intel {
    padding: 150px 0 100px;
}

#hd #intel h2 {
    font-size: 5em;
    margin-bottom: 100px;
}

#hd #intel img {
    display: inline-block;
    vertical-align: top;
    width: 150px;
}

#hd #intel img+div {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 150px);
    margin-left: -5px;
    padding-left: 50px;
    margin-bottom: 50px;
}

#hd #intel .txt-grey {
    font-size: 1.1em;
    font-weight: bold;
    margin: -5px 0 10px;
}

/* ---------- ANIMATIONS ----- */

@keyframes colorrun {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(359deg);
    }
}

@-webkit-keyframes colorrun {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(359deg);
    }
}

.colorrun {
    -webkit-animation: colorrun 4s infinite linear;
    -o-animation: colorrun 4s infinite linear;
    animation: colorrun 4s infinite linear;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

@-webkit-keyframes fadeInFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(8%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(8%);
        -ms-transform: translateY(8%);
        -o-transform: translateY(8%);
        transform: translateY(8%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
        -o-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes icon_flow {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(100%, 100%);
        -moz-transform: scale(1) translate(100%, 100%);
        -ms-transform: scale(1) translate(100%, 100%);
        -o-transform: scale(1) translate(100%, 100%);
        transform: scale(1) translate(100%, 100%);
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(320%, 200%);
        -moz-transform: scale(1) translate(320%, 200%);
        -ms-transform: scale(1) translate(320%, 200%);
        -o-transform: scale(1) translate(320%, 200%);
        transform: scale(1) translate(320%, 200%);
    }
}

@keyframes icon_flow_run {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    55% {
        -webkit-transform: scale(1) translate(0, 90%);
        -moz-transform: scale(1) translate(0, 90%);
        -ms-transform: scale(1) translate(0, 90%);
        -o-transform: scale(1) translate(0, 90%);
        transform: scale(1) translate(0, 90%);
    }
    60% {
        opacity: 1;
    }
    61% {
        opacity: 0;
        -webkit-transform: scale(1) translate(150%, 250%);
        -moz-transform: scale(1) translate(150%, 250%);
        -ms-transform: scale(1) translate(150%, 250%);
        -o-transform: scale(1) translate(150%, 250%);
        transform: scale(1) translate(150%, 250%);
    }
    100% {
        opacity: 0;
    }
}

@keyframes device_flow1 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    28% {
        -webkit-transform: scale(.9) translate(100%, 20%);
        -moz-transform: scale(.9) translate(100%, 20%);
        -ms-transform: scale(.9) translate(100%, 20%);
        -o-transform: scale(.9) translate(100%, 20%);
        transform: scale(.9) translate(100%, 20%);
    }
    32% {
        -webkit-transform: scale(1) translate(-10%, 20%);
        -moz-transform: scale(1) translate(-10%, 20%);
        -ms-transform: scale(1) translate(-10%, 20%);
        -o-transform: scale(1) translate(-10%, 20%);
        transform: scale(1) translate(-10%, 20%);
    }
    40% {
        opacity: 1;
    }
    45% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(1000%, 1400%);
        -moz-transform: scale(1) translate(1000%, 1400%);
        -ms-transform: scale(1) translate(1000%, 1400%);
        -o-transform: scale(1) translate(1000%, 1400%);
        transform: scale(1) translate(1000%, 1400%);
    }
}

@keyframes device_flow2 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    45% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    47% {
        -webkit-transform: scale(1) translate(5%, 90%);
        -moz-transform: scale(1) translate(5%, 90%);
        -ms-transform: scale(1) translate(5%, 90%);
        -o-transform: scale(1) translate(5%, 90%);
        transform: scale(1) translate(5%, 90%);
    }
    55% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(800%, 1100%);
        -moz-transform: scale(1) translate(800%, 1100%);
        -ms-transform: scale(1) translate(800%, 1100%);
        -o-transform: scale(1) translate(800%, 1100%);
        transform: scale(1) translate(800%, 1100%);
    }
}

@keyframes device_flow3 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    62% {
        -webkit-transform: scale(1) translate(150%, 120%);
        -moz-transform: scale(1) translate(150%, 120%);
        -ms-transform: scale(1) translate(150%, 120%);
        -o-transform: scale(1) translate(150%, 120%);
        transform: scale(1) translate(150%, 120%);
    }
    65% {
        -webkit-transform: scale(1) translate(15%, 130%);
        -moz-transform: scale(1) translate(15%, 130%);
        -ms-transform: scale(1) translate(15%, 130%);
        -o-transform: scale(1) translate(15%, 130%);
        transform: scale(1) translate(15%, 130%);
    }
    65% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(900%, 1000%);
        -moz-transform: scale(1) translate(900%, 1000%);
        -ms-transform: scale(1) translate(900%, 1000%);
        -o-transform: scale(1) translate(900%, 1000%);
        transform: scale(1) translate(900%, 1000%);
    }
}

@keyframes device_flow4 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    78% {
        -webkit-transform: scale(1) translate(220%, 150%);
        -moz-transform: scale(1) translate(220%, 150%);
        -ms-transform: scale(1) translate(220%, 150%);
        -o-transform: scale(1) translate(220%, 150%);
        transform: scale(1) translate(220%, 150%);
    }
    81% {
        -webkit-transform: scale(1) translate(80%, 150%);
        -moz-transform: scale(1) translate(80%, 150%);
        -ms-transform: scale(1) translate(80%, 150%);
        -o-transform: scale(1) translate(80%, 150%);
        transform: scale(1) translate(80%, 150%);
    }
    83% {
        opacity: 1;
    }
    88% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(650%, 780%);
        -moz-transform: scale(1) translate(650%, 780%);
        -ms-transform: scale(1) translate(650%, 780%);
        -o-transform: scale(1) translate(650%, 780%);
        transform: scale(1) translate(650%, 780%);
    }
}

@keyframes device_flow5 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    95% {
        -webkit-transform: scale(1) translate(280%, 180%);
        -moz-transform: scale(1) translate(280%, 180%);
        -ms-transform: scale(1) translate(280%, 180%);
        -o-transform: scale(1) translate(280%, 180%);
        transform: scale(1) translate(280%, 180%);
    }
    98% {
        -webkit-transform: scale(1) translate(80%, 180%);
        -moz-transform: scale(1) translate(80%, 180%);
        -ms-transform: scale(1) translate(80%, 180%);
        -o-transform: scale(1) translate(80%, 180%);
        transform: scale(1) translate(80%, 180%);
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(200%, 250%);
        -moz-transform: scale(1) translate(200%, 250%);
        -ms-transform: scale(1) translate(200%, 250%);
        -o-transform: scale(1) translate(200%, 250%);
        transform: scale(1) translate(200%, 250%);
    }
}

/*@keyframes device_switch_runway{
		0%, 25%{margin:0; }
		30%, 90%{
			filter:opacity(1);
			margin-left:-10%;
			margin-top: 2%;
		}
		91%{
			filter:opacity(0);
			margin-left:-10%;
			margin-top: 2%;
		}
		95%{
			filter:opacity(0);
			margin:0;
		}
		100%{ filter:opacity(1); }
	}*/

@keyframes icon_flow_run_game2 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    78% {
        -webkit-transform: scale(1) translate(200%, 150%);
        -moz-transform: scale(1) translate(200%, 150%);
        -ms-transform: scale(1) translate(200%, 150%);
        -o-transform: scale(1) translate(200%, 150%);
        transform: scale(1) translate(200%, 150%);
    }
    83% {
        -webkit-transform: scale(1) translate(50%, 150%);
        -moz-transform: scale(1) translate(50%, 150%);
        -ms-transform: scale(1) translate(50%, 150%);
        -o-transform: scale(1) translate(50%, 150%);
        transform: scale(1) translate(50%, 150%);
    }
    88% {
        opacity: 1;
    }
    89% {
        opacity: 0;
        -webkit-transform: scale(1) translate(200%, 300%);
        -moz-transform: scale(1) translate(200%, 300%);
        -ms-transform: scale(1) translate(200%, 300%);
        -o-transform: scale(1) translate(200%, 300%);
        transform: scale(1) translate(200%, 300%);
    }
    100% {
        opacity: 0;
    }
}

@keyframes icon_flow_run_web2 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    41% {
        -webkit-transform: scale(1) translate(100%, 90%);
        -moz-transform: scale(1) translate(100%, 90%);
        -ms-transform: scale(1) translate(100%, 90%);
        -o-transform: scale(1) translate(100%, 90%);
        transform: scale(1) translate(100%, 90%);
    }
    45% {
        -webkit-transform: scale(1) translate(0, 90%);
        -moz-transform: scale(1) translate(0, 90%);
        -ms-transform: scale(1) translate(0, 90%);
        -o-transform: scale(1) translate(0, 90%);
        transform: scale(1) translate(0, 90%);
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
        -webkit-transform: scale(1) translate(150%, 250%);
        -moz-transform: scale(1) translate(150%, 250%);
        -ms-transform: scale(1) translate(150%, 250%);
        -o-transform: scale(1) translate(150%, 250%);
        transform: scale(1) translate(150%, 250%);
    }
    100% {
        opacity: 0;
    }
}

@keyframes icon_flow_run_web3 {
    0% {
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.7) translate(0, 0);
        -moz-transform: scale(.7) translate(0, 0);
        -ms-transform: scale(.7) translate(0, 0);
        -o-transform: scale(.7) translate(0, 0);
        transform: scale(.7) translate(0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(.8) translate(110%, 20%);
        -moz-transform: scale(.8) translate(110%, 20%);
        -ms-transform: scale(.8) translate(110%, 20%);
        -o-transform: scale(.8) translate(110%, 20%);
        transform: scale(.8) translate(110%, 20%);
    }
    40% {
        -webkit-transform: scale(.9) translate(90%, 70%);
        -moz-transform: scale(.9) translate(90%, 70%);
        -ms-transform: scale(.9) translate(90%, 70%);
        -o-transform: scale(.9) translate(90%, 70%);
        transform: scale(.9) translate(90%, 70%);
    }
    50% {
        -webkit-transform: scale(1) translate(120%, 90%);
        -moz-transform: scale(1) translate(120%, 90%);
        -ms-transform: scale(1) translate(120%, 90%);
        -o-transform: scale(1) translate(120%, 90%);
        transform: scale(1) translate(120%, 90%);
    }
    71% {
        -webkit-transform: scale(1) translate(150%, 130%);
        -moz-transform: scale(1) translate(150%, 130%);
        -ms-transform: scale(1) translate(150%, 130%);
        -o-transform: scale(1) translate(150%, 130%);
        transform: scale(1) translate(150%, 130%);
    }
    75% {
        -webkit-transform: scale(1) translate(0, 130%);
        -moz-transform: scale(1) translate(0, 130%);
        -ms-transform: scale(1) translate(0, 130%);
        -o-transform: scale(1) translate(0, 130%);
        transform: scale(1) translate(0, 130%);
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
        -webkit-transform: scale(1) translate(150%, 250%);
        -moz-transform: scale(1) translate(150%, 250%);
        -ms-transform: scale(1) translate(150%, 250%);
        -o-transform: scale(1) translate(150%, 250%);
        transform: scale(1) translate(150%, 250%);
    }
    100% {
        opacity: 0;
    }
}

@keyframes change_bg_web {
    50% {
        background-image: url(../img/more/game_first_v/extreme/icon-web.png);
    }
    55% {
        background-image: url(../img/more/game_first_v/extreme/icon-web-r.png);
    }
}

@keyframes change_bg_game {
    50% {
        background-image: url(../img/more/game_first_v/extreme/icon-game.png);
    }
    55% {
        background-image: url(../img/more/game_first_v/extreme/icon-game-r.png);
    }
}

@keyframes show_runman {
    40% {
        opacity: 0;
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
        -ms-transform: scale(3);
        -o-transform: scale(3);
        transform: scale(3);
    }
    43% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    70% {
        opacity: 1;
    }
    71% {
        opacity: 0;
    }
}

@keyframes show_ui {
    38% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    71% {
        opacity: 0;
    }
}

@keyframes run_web {
    0%,
    44%,
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    42.5% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    45% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    47.5% {
        background-image: url(../img/more/game_first_v/extreme/icon-web.png);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        background-image: url(../img/more/game_first_v/extreme/icon-web-r.png);
        opacity: 1;
        -webkit-transform: translate(-200%, 0%);
        -moz-transform: translate(-200%, 0%);
        -ms-transform: translate(-200%, 0%);
        -o-transform: translate(-200%, 0%);
        transform: translate(-200%, 0%);
    }
    65% {
        opacity: 0;
        -webkit-transform: translate(150%, 280%);
        -moz-transform: translate(150%, 280%);
        -ms-transform: translate(150%, 280%);
        -o-transform: translate(150%, 280%);
        transform: translate(150%, 280%);
    }
    66% {
        background-image: url(../img/more/game_first_v/extreme/icon-web.png);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes run_game {
    0%,
    44%,
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    42.5% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    45% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    47.5% {
        background-image: url(../img/more/game_first_v/extreme/icon-game.png);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        background-image: url(../img/more/game_first_v/extreme/icon-game-r.png);
        opacity: 1;
        -webkit-transform: translate(-160%, 0%);
        -moz-transform: translate(-160%, 0%);
        -ms-transform: translate(-160%, 0%);
        -o-transform: translate(-160%, 0%);
        transform: translate(-160%, 0%);
    }
    65% {
        opacity: 0;
        -webkit-transform: translate(200%, 300%);
        -moz-transform: translate(200%, 300%);
        -ms-transform: translate(200%, 300%);
        -o-transform: translate(200%, 300%);
        transform: translate(200%, 300%);
    }
    66% {
        background-image: url(../img/more/game_first_v/extreme/icon-game.png);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes scrollPage {
    0% {
        background-position: center 0%;
    }
    40% {
        background-position: center 30%;
    }
    70%,
    100% {
        background-position: center 50%;
    }
}

@keyframes popup {
    0%,
    20% {
        opacity: 0;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
    }
    50%,
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fadeTabWeb {
    0% {
        background-image: url(../img/more/game_first_v/monitor/tab-web-r.png);
    }
    50% {
        background-image: url(../img/more/game_first_v/monitor/tab-web.png);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        background-image: url(../img/more/game_first_v/monitor/tab-web.png);
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes fadeTabFile {
    50% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes fadeTabGame {
    0% {
        background-image: url(../img/more/game_first_v/monitor/tab-gaming-rup.png);
    }
    50% {
        -webkit-transform: scale(1.02) translateY(0);
        -ms-transform: scale(1.02) translateY(0);
        -o-transform: scale(1.02) translateY(0);
        transform: scale(1.02) translateY(0);
    }
    100% {
        background-image: url(../img/more/game_first_v/monitor/tab-gaming-r.png);
        -webkit-transform: scale(1.02) translateY(-200%);
        -ms-transform: scale(1.02) translateY(-200%);
        -o-transform: scale(1.02) translateY(-200%);
        transform: scale(1.02) translateY(-200%);
    }
}

@keyframes pulse {
    0%,
    100% {
        -webkit-transform: scale(1) translateY(-200%);
        -moz-transform: scale(1) translateY(-200%);
        -ms-transform: scale(1) translateY(-200%);
        -o-transform: scale(1) translateY(-200%);
        transform: scale(1) translateY(-200%);
    }
    50% {
        -webkit-transform: scale(1.02) translateY(-195%);
        -moz-transform: scale(1.02) translateY(-195%);
        -ms-transform: scale(1.02) translateY(-195%);
        -o-transform: scale(1.02) translateY(-195%);
        transform: scale(1.02) translateY(-195%);
    }
}

@keyframes pulse_web {
    0%,
    100% {
        -webkit-transform: scale(1) translateY(0%);
        -moz-transform: scale(1) translateY(0%);
        -ms-transform: scale(1) translateY(0%);
        -o-transform: scale(1) translateY(0%);
        transform: scale(1) translateY(0%);
    }
    50% {
        -webkit-transform: scale(1.02) translateY(5%);
        -moz-transform: scale(1.02) translateY(5%);
        -ms-transform: scale(1.02) translateY(5%);
        -o-transform: scale(1.02) translateY(5%);
        transform: scale(1.02) translateY(5%);
    }
}

/* ---------- color effect ---------- */

.hd-rainbow {
    background: #ff0000;
    background: -moz-linear-gradient(180deg, #ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
    background: -webkit-linear-gradient(180deg, #ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
    background: linear-gradient(180deg, #ff0000 0%, #ff9707 20%, #ff9707 30%, #ffeb3b 40%, #ffeb3b 50%, #00ff29 60%, #00ff29 70%, #00ffa3 80%, #00ffa3 90%, #00d0ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff', GradientType=1);
    /* IE6-9 */
}

.hd-rainbow:before {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #333333;
}

.hd-rainbow:after {
    content: '';
    display: block;
    width: 100%;
    height: 4%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #ff0000;
    background: -moz-linear-gradient(90deg, #ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
    background: -webkit-linear-gradient(90deg, #ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
    background: linear-gradient(90deg, #ff0000 0%, #ff0000 20%, #ff9707 20%, #ff9707 42%, #ffeb3b 42%, #ffeb3b 52%, #00ff29 52%, #00ff29 66.5%, #00ffa3 66.5%, #00ffa3 78%, #00d0ff 78%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#c600ff', GradientType=1);
}

.hd-cycle:before {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #333333;
}

.hd-cycle:after {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #ff0000;
    -webkit-animation: cycle reverse infinite 8s;
    -o-animation: cycle reverse infinite 8s;
    animation: cycle reverse infinite 8s;
}

.hd-comet {
    background: #ff0000;
    background: -moz-linear-gradient(left, #333333 30%, #ff0000 45%, #ffff00 50%, #333333 60%);
    background: -webkit-linear-gradient(left, #333333 30%, #ff0000 45%, #ffff00 50%, #333333 60%);
    background: linear-gradient(to right, #333333 30%, #ff0000 45%, #ffff00 50%, #333333 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#333333', GradientType=1);
}

.hd-comet:before {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #333333;
    -webkit-animation: cometReverse infinite 3s -.5s;
    -o-animation: cometReverse infinite 3s -.5s;
    animation: cometReverse infinite 3s -.5s;
}

.hd-comet:after {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #ff0000;
    -webkit-animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
    -o-animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
    animation: cometReverse infinite 3s -.5s, cometStrobing infinite 3s;
}

.hd-flash {
    background: #b70b00;
    background: -moz-linear-gradient(-45deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
    background: -webkit-linear-gradient(left, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
    background: linear-gradient(135deg, #810000 30%, #810000 40%, #ff0000 50%, #810000 60%, #810000 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b70b00', endColorstr='#b70b00', GradientType=1);
}

.hd-flash:before {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #333333;
    -webkit-animation: flashReverse infinite 3s -.5s;
    -o-animation: flashReverse infinite 3s -.5s;
    animation: flashReverse infinite 3s -.5s;
}

.hd-flash:after {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #ff0000;
    -webkit-animation: flashReverse infinite 3s -.5s, flashStrobing infinite 2.21s -2.45s;
    -o-animation: flashReverse infinite 3s -.5s, flashStrobing infinite 2.21s -2.45s;
    animation: flashReverse infinite 3s -.5s, flashStrobing infinite 2.21s -2.45s;
}

.hd-wave .starry_night {
    display: block !important;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 91%;
    left: 47%;
    background: #333333;
    box-shadow: 0 0 50px #333333;
    -webkit-animation: yoyo infinite reverse 5s -.5s;
    -o-animation: yoyo infinite reverse 5s -.5s;
    animation: yoyo infinite reverse 5s -.5s;
}

.hd-wave .starry_night li {
    display: none;
}

.hd-wave:before {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #333333;
}

.hd-wave:after {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #ff0000;
    -webkit-animation: breathing infinite 8s -.5s;
    -o-animation: breathing infinite 8s -.5s;
    animation: breathing infinite 8s -.5s;
}

.hd-yoyo {
    width: 200%;
    background: #333333;
    background: -moz-linear-gradient(left, #ffff00 0%, #ffff00 50%, #ff0000 90%, #333333 100%);
    background: -webkit-linear-gradient(left, #ffff00 0%, #ffff00 50%, #ff0000 90%, #333333 100%);
    background: linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ff0000 90%, #333333 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333', GradientType=1);
}

.hd-yoyo:before {
    content: '';
    display: block;
    width: 100%;
    height: 17%;
    position: absolute;
    top: 91%;
    left: 0;
    background: #000000;
}

.hd-yoyo .starry_night {
    display: block !important;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 91%;
    left: 47%;
    background: #333333;
    background: -moz-linear-gradient(left, #ff0000 0%, #333333 10%, #333333 35%, #ff0000 40%, #333333 45%, #333333 100%);
    background: -webkit-linear-gradient(left, #ff0000 0%, #333333 10%, #333333 35%, #ff0000 40%, #333333 45%, #333333 100%);
    background: linear-gradient(to right, #ff0000 0%, #333333 10%, #333333 35%, #ff0000 40%, #333333 45%, #333333 100%);
    box-shadow: 0 0 50px #333333;
    -webkit-animation: yoyoStrobing infinite 4s;
    -o-animation: yoyoStrobing infinite 4s;
    animation: yoyoStrobing infinite 4s;
    z-index: 2;
}

.hd-yoyo .starry_night li {
    display: none;
}

.hd-yoyo .starry_night:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    background: #ff0000;
    z-index: 0;
}

.hd-yoyo:after {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 84%;
    left: 0;
    background: #ff0000;
    -webkit-animation: breathing infinite 8s -.5s;
    -o-animation: breathing infinite 8s -.5s;
    animation: breathing infinite 8s -.5s;
}

.hd-starryNight {
    /*background: #1a1a1a !important;*/ /*20200406*/
}

.hd-starryNight .starry_night {
    display: block;
}

.starry_night_back {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #fff;
}

.starry_night_color {
    content: '';
    display: block;
    width: 100%;
    height: 5%;
    position: absolute;
    top: 81%;
    left: 0;
    background: #ff0000;
    -webkit-animation: flashStrobing infinite 5s;
    -o-animation: flashStrobing infinite 5s;
    animation: flashStrobing infinite 5s;
}

.starry_night {
    display: none;
}

.starry_night li { /*20200406*/
    width: 5%;
    height: 5%;
    background-color: #FFF;
    background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0) 50% );
    position: absolute;
    /* border-radius: 100%; */
    /*background: radial-gradient(circle, #ff0000,#ff0000, #990000, #550000, #550000);*/
    /*background: radial-gradient(circle, transparent 0%, #0000003a 20%, #000000bf 50%, #000 100%);
    mix-blend-mode: lighten;*/
    animation: breathing 3s infinite;
}

.starry_night li:nth-child(1) { /*RCD*/
    left: 56%;
    top: 18%;
}

.starry_night li:nth-child(2) {
    left: 23%;
    top: 18%;
    animation: breathing 3s -1s infinite;
}

/*.starry_night li:nth-child(3) {left: 62%; top: 25%; animation: breathing 2s -1s infinite;}*/

/*.starry_night li:nth-child(4) {left: 85%;  top: 27%; }
	.starry_night li:nth-child(5) {left: 88%; top: 19%; }
	.starry_night li:nth-child(6) {left: 1%;  top: 38%; }*/

.starry_night li:nth-child(3) { /*RCD*/ /*20200330*/
    left: 24%;
    top: 12%;
    animation: breathing 3s -2s infinite;
}

.starry_night li:nth-child(4) { /*RCD*/
    left: 24%;
    top: 22%;
    animation: breathing 3s infinite;
}

.starry_night li:nth-child(5) { /*RCD*/
    left: 40%;
    top: 32%;
    animation: breathing 4s -3s infinite;
}

.starry_night li:nth-child(6) {
    left: 32%;
    top: 87%;
    animation: breathing 3s infinite;
}

.starry_night li:nth-child(7) {
    left: 64%;
    top: 36%;
    animation: breathing 3s infinite;
}

.starry_night li:nth-child(8) {
    left: 68%;
    top: 57%;
    animation: breathing 3s 1s infinite;
}

.starry_night li:nth-child(9) {
    left: 73%;
    top: 63%;
    animation: breathing 3s -1s infinite;
}

@-webkit-keyframes static {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
}

@keyframes static {
    0% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
}

@-webkit-keyframes breathing {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes breathing {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@-webkit-keyframes strobing {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes strobing {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@-webkit-keyframes cometStrobing {
    0% {
        opacity: 1
    }
    20%,
    100% {
        opacity: 0
    }
}

@keyframes cometStrobing {
    0% {
        opacity: 1
    }
    20%,
    100% {
        opacity: 0
    }
}

@-webkit-keyframes flashStrobing {
    2%,
    12% {
        opacity: 1
    }
    0%,
    4%,
    11%,
    13%,
    100% {
        opacity: .6
    }
}

@keyframes flashStrobing {
    2%,
    12% {
        opacity: 1
    }
    0%,
    4%,
    11%,
    13%,
    100% {
        opacity: .6
    }
}

@-webkit-keyframes music {
    0% {
        opacity: 1
    }
    10% {
        opacity: .3
    }
    40% {
        opacity: 1
    }
    60% {
        opacity: .3
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: .3
    }
}

@keyframes music {
    0% {
        opacity: 1
    }
    10% {
        opacity: .3
    }
    40% {
        opacity: 1
    }
    60% {
        opacity: .3
    }
    70% {
        opacity: 1
    }
    100% {
        opacity: .3
    }
}

@-webkit-keyframes cycle {
    0% {
        background-color: red
    }
    15% {
        background-color: orange
    }
    30% {
        background-color: yellow
    }
    45% {
        background-color: #00CB07
    }
    60% {
        background-color: #07A9FF
    }
    75% {
        background-color: #1044FF
    }
    90% {
        background-color: #a12fd9
    }
    100% {
        background-color: red
    }
}

@keyframes cycle {
    0% {
        background-color: red
    }
    15% {
        background-color: orange
    }
    30% {
        background-color: yellow
    }
    45% {
        background-color: #00CB07
    }
    60% {
        background-color: #07A9FF
    }
    75% {
        background-color: #1044FF
    }
    90% {
        background-color: #a12fd9
    }
    100% {
        background-color: red
    }
}

@-webkit-keyframes rainbow {
    0% {
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg)
    }
    100% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg)
    }
}

@keyframes rainbow {
    0% {
        -webkit-filter: hue-rotate(359deg);
        filter: hue-rotate(359deg)
    }
    100% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg)
    }
}

@-webkit-keyframes cpu {
    0% {
        background-color: red
    }
    30% {
        background-color: yellow
    }
    60% {
        background-color: green
    }
    90% {
        background-color: yellow;
    }
}

@keyframes cpu {
    0% {
        background-color: red
    }
    30% {
        background-color: yellow
    }
    60% {
        background-color: green
    }
    90% {
        background-color: yellow;
    }
}

@-webkit-keyframes comet {
    0% {
        z-index: -1;
        width: 200%;
        -webkit-transform: translateX(-100%);
    }
    100% {
        z-index: -1;
        width: 200%;
        -webkit-transform: translateX(50%);
    }
}

@keyframes comet {
    0% {
        z-index: -1;
        width: 200%;
        transform: translateX(-100%);
    }
    100% {
        z-index: -1;
        width: 200%;
        transform: translateX(50%);
    }
}

@-webkit-keyframes cometReverse {
    0% {
        width: 200%;
        -webkit-transform: translateX(50%);
    }
    100% {
        width: 200%;
        -webkit-transform: translateX(-100%);
    }
}

@keyframes cometReverse {
    0% {
        width: 200%;
        transform: translateX(50%);
    }
    100% {
        width: 200%;
        transform: translateX(-100%);
    }
}

@-webkit-keyframes flash {
    0% {
        z-index: -1;
        width: 200%;
        -webkit-transform: translateX(-50%);
    }
    100% {
        z-index: -1;
        width: 200%;
        -webkit-transform: translateX(0%);
    }
}

@keyframes flash {
    0% {
        z-index: -1;
        width: 200%;
        transform: translateX(-50%);
    }
    100% {
        z-index: -1;
        width: 200%;
        transform: translateX(0%);
    }
}

@-webkit-keyframes flashReverse {
    0% {
        width: 200%;
        -webkit-transform: translateX(0%);
    }
    100% {
        width: 200%;
        -webkit-transform: translateX(-50%);
    }
}

@keyframes flashReverse {
    0% {
        width: 200%;
        transform: translateX(0%);
    }
    100% {
        width: 200%;
        transform: translateX(-50%);
    }
}

@-webkit-keyframes yoyo {
    0% {
        -webkit-transform: translateX(-50%);
    }
    50% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(-50%);
    }
}

@keyframes yoyo {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes yoyoStrobing {
    0% {
        -webkit-transform: translateX(-50%);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateX(50%);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    69.5%,
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes yoyoStrobing {
    0% {
        transform: translateX(-50%);
        opacity: 1;
    }
    50% {
        transform: translateX(50%);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    69.5%,
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }
}









/*-------------------RCD2020----------------------*/

/*-overwrite-*/
/*
.overview-wrapper {
    width: 100%;
}
#overview #sectionOverview {
    width: 100%;
    padding: 0;
    line-height: inherit;
}
*/
#special-sectionOverview {/*2020409*/
    margin-bottom: 100px;
}
.width-line-gray { /*20200330*/
    background: none;
}


#hd .z490-section, #hd .z490-section p, #hd .z490-section small, #hd .z490-section a, #hd .z490-section li {
    font-family: 'Roboto', sans-serif;
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
    background-color: #ff00ff;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    background-color: #ff00ff
}

#fp-nav ul li .fp-tooltip {
    color: #ff00ff;
}

/*-------sec nav tab----------*/

#hd .z490-section-title{
    background-image: linear-gradient(90deg, #fc32da, #0078ff);
    position: relative;
    z-index: 10;
}
#hd .z490-section-title .inner{
    max-width: 1200px;
    padding: 50px 20px 30px 20px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}
#hd .z490-section-title p{
    margin-bottom: 0;
}
#hd .z490-section-title .z490-title{
    font-size: 3em;
}
#hd .rcd-tab{
    background-image: linear-gradient(90deg, #fc32da, #0078ff);
    /*transition: all 0.3s;*/ /*20200330*/
    position: relative;
    z-index: 10;
}
#hd .rcd-tab ul{
    max-width: 1200px;
    padding: 10px 10px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    vertical-align: middle;
    align-items: stretch;
}
#hd .rcd-tab ul li{
    padding: 10px;
    box-sizing: border-box;
    width: 30%;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}
#hd .rcd-tab ul li:hover{
    background: rgba(0,0,0,0.2);
}
#hd .rcd-tab ul li.hd-active{
    background: #000;
}
#hd .rcd-tab ul h3{
    font-size: 1.4em;
    font-weight: normal;
    margin: 0;
}
#hd .rcd-tab ul li.hd-active h3{
    color: #ff00ff;
}

#hd .z490-section-content{
    min-height: 500px;
    position: relative;
}

@media screen and (max-width: 1400px) {    
#hd .z490-section-title .z490-title{
    font-size: 2em;
}
#hd .rcd-tab ul h3{
    font-size: 1em;
}
}


@media screen and (max-width: 768px) {    
#hd .z490-section-title .inner{
    padding: 30px 20px 30px 20px;
}
#hd .z490-section-title .z490-title{
    font-size: 1.2em;
}
#hd .rcd-tab ul{
    padding: 6px 0;
}
#hd .rcd-tab ul li{
    width: auto;
}
#hd .rcd-tab ul h3{
    font-size: 0.8em;
    font-weight: normal;
}
}

@media screen and (max-width: 450px) {    
#hd .rcd-tab ul li{
    padding: 10px 5px;
}
#hd .rcd-tab ul h3{
    font-size: 0.6em;
}
}

/*-------sec sub tab----------*/

#hd .z490-sub-tab{
    text-align: center;
    padding: 30px;
    margin-top: 80px; /*20200330*/
    position: relative;
}
#hd .z490-sub-tab .tab{
    display: inline-block;
    padding: 3px 10px;
    cursor: pointer;
    margin: 0 40px;
    color: #888;
    transition: all 0.3s;
    font-size: 1.3em;
    position: relative;
}
#hd .z490-sub-tab .tab:hover{
    color: #fff;
}
#hd .z490-sub-tab .tab.active{
    background: #ff00ff;
    color: #fff;
}
#hd .z490-sub-tab .tab:not(:last-child):after{
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #ff00ff;
    position: absolute;
    right: -60px;
    top: 50%;
}
@media screen and (max-width: 767px) {    
#hd .z490-sub-tab{
    padding: 10px;
}
#hd .z490-sub-tab .tab{
    margin: 0 10px;
    font-size: 1.1em;
}
#hd .z490-sub-tab .tab:not(:last-child):after{
    width: 10px;
    right: -20px;
}
}
@media screen and (max-width: 450px) {    
#hd .z490-sub-tab .tab{
    margin: 0 0 10px 0;
    padding: 15px;
    display: block;
}
#hd .z490-sub-tab .tab:not(:last-child):after{
    display: none;
}
}


#hd .placeholder{
    text-align: center;
    padding: 100px 20px;
    font-size: 4em;
    color: #555;
}



/*-------section : kv----------*/
#hd #z490-kv{
    height: 960px;
    background: url('../img/z490/kv/bg.jpg') left bottom no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    z-index: 4;
    overflow: hidden; /*20200330*/
}
#hd #z490-kv .slash{
    height: 100%;
    width: 70%;
    position: absolute;
    left: 30%;
    top: 0;
    /*background-image: linear-gradient(-75deg, rgba(193,0,252,1) 70%, rgba(193,0,252,0) 70.01%);*/
    background: url('../img/z490/kv/slash.png') left bottom no-repeat;
    background-size: cover;
}
#hd #z490-kv .hero{
    height: 100%;
    width: 40%;
    max-width: 720px;
    position: absolute;
    left: 20%;
    top: 2%;
    /*background: rgba(0,0,0,0.1);*/
}
#hd #z490-kv .hero img{
    width: 100%;
    display: block;
}
#hd #z490-kv .text{
    width: 30%;
    max-width: 590px;
    position: absolute;
    left: 62%;
    top: 20%;
    /*background: rgba(0,0,0,0.1);*/
}
#hd #z490-kv .text img{
    width: 100%;
    display: block;
    margin-bottom: 20px;
}


#hd #z490-kv .icon{
    position: absolute;
    left: 50px;
    bottom: 50px;
}

@media screen and (min-width: 2300px) {    
#hd #z490-kv .slash{
    width: 60%;
    left: 40%;
}
#hd #z490-kv .hero{
    left: 30%;
    top: 2%;
}
}
@media screen and (min-width: 3200px) {    
#hd #z490-kv .text{
    left: 52%;
    top: 20%;
}
}
@media screen and (max-width: 1400px) {    
#hd #z490-kv .text{
    top: 10%;
}
#hd #z490-kv{
    height: 750px;
}
}

@media screen and (max-width: 1100px) {    
#hd #z490-kv{
    height: 600px;
}
#hd #z490-kv .slash{
    width: 85%;
    left: 20%;
}
#hd #z490-kv .hero{
    left: 12%;
    top: 8%;
    width: 35%;
}
#hd #z490-kv .text{
    width: 40%;
    left: 50%;
    top: 9%;
}
#hd #z490-kv .text img{
    width: 80%;
    margin-left: 0;
}
#hd #z490-kv .icon{
    left: 20px;
    bottom: 20px;
    width: 130px;
}
}

@media screen and (max-width: 767px) {    
#hd #z490-kv{
    height: auto;
    padding-bottom: 50px;
}
#hd #z490-kv .slash{
    width: 85%;
    left: 15%;
}
#hd #z490-kv .hero{
    position: relative;
    left: auto;
    top: auto;
    width: 80%;
    margin: 0 auto;
}
#hd #z490-kv .text{
    position: relative;
    height: auto;
    left: auto;
    top: auto;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 50px;
}
}

/*-------section : video----------*/
#hd #z490-video{
    background: #000;
    width: 100%;
    position: relative;
    z-index: 4;
    overflow: hidden;
}
#hd #z490-video .text{
    text-align: center;
    color: #333;
    font-size: 15em;
    margin-top: 150px;
    margin-bottom: 150px;
}
@media screen and (max-width: 1023px) {    
#hd #z490-video .text{
    font-size: 5em;
    margin-top: 100px;
    margin-bottom: 100px;
}
}

/*-------section : spec----------*/
#hd #z490-spec{
    width: 100%;
    position: relative;
    padding-bottom: 100px;
    padding-top: 50px;
    background: #000;
    z-index: 9;
}
#hd #z490-spec .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
#hd #z490-spec .spec-entry#spec-3{
    display: none;
}
#hd #z490-spec .spec-content{
    max-width: 1335px;
    position: relative;
    margin: 0 auto;
}




#hd #z490-spec .spec-control a{
    width: 51px;
    height: 114px;
    display: block;
    background: url('../img/z490/spec/spec-arrow.png') center;
    background-size: cover;
    position: absolute;
    top: 45%;
    z-index: 2;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}
#hd #z490-spec.intoView .spec-control a{ /*單元進入視窗才出現箭頭*/
    opacity: 0.4;
}



#hd #z490-spec .spec-control a:hover{
    opacity: 0.8;
    cursor: pointer;
}
#hd #z490-spec .spec-control a.left{
    left: 80px;
}
#hd #z490-spec .spec-control a.right{
    right: 80px;
    transform: rotate(180deg);
}



#hd #z490-spec .spec-content .mobile{
    display: none;
}
#hd #z490-spec .spec-content .text > div{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0%;
    top: 0%;
}
#hd #z490-spec .spec-content .text > div .number{
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: #ff00ff;
    display: none;
}
#hd #z490-spec .spec-content .text > div p{
    font-weight: bold;
    margin-bottom: 0;
}
#hd #z490-spec .spec-content .text > div ul{ /*20200330*/
    font-size: 0.9em;
    font-weight: normal;
    margin-left: 20px;
    margin-top: 5px;
    color: #999;
}
#hd #z490-spec .spec-content .text > div ul li{
    margin-bottom: 3px;
    list-style-type: disc;
}


#hd #z490-spec #spec-1 .spec-content .text .t1{
    left: 3%;
    top: 25%;
}
#hd #z490-spec #spec-1 .spec-content .text .t2{
    left: 3%;
    top: 34.5%;
}
#hd #z490-spec #spec-1 .spec-content .text .t3{
    left: 3%;
    top: 44%;
}
#hd #z490-spec #spec-1 .spec-content .text .t4{
    left: 3%;
    top: 52%;
}
#hd #z490-spec #spec-1 .spec-content .text .t5{
    left: 3%;
    top: 65%;
}

#hd #z490-spec #spec-2 .spec-content .text > div{ left: 13.5%;}
#hd #z490-spec #spec-2 .spec-content .text .t1{ top: 5.2%;}
#hd #z490-spec #spec-2 .spec-content .text .t2{ top: 20.2%;}
#hd #z490-spec #spec-2 .spec-content .text .t3{ top: 33.2%;}
#hd #z490-spec #spec-2 .spec-content .text .t4{ top: 43%;}
#hd #z490-spec #spec-2 .spec-content .text .t5{ top: 50%;}
#hd #z490-spec #spec-2 .spec-content .text .t6{ top: 55.5%;}
#hd #z490-spec #spec-2 .spec-content .text .t7{ top: 70.6%;}


#hd #z490-spec #spec-3 .spec-content .text > div{ left: 62%;}
#hd #z490-spec #spec-3 .spec-content .text .t1{ top: 8.5%;}
#hd #z490-spec #spec-3 .spec-content .text .t2{ top: 22.5%;}
#hd #z490-spec #spec-3 .spec-content .text .t3{ top: 37%;}
#hd #z490-spec #spec-3 .spec-content .text .t4{ top: 45.8%;}
#hd #z490-spec #spec-3 .spec-content .text .t5{ top: 51.5%;}
#hd #z490-spec #spec-3 .spec-content .text .t6{ top: 76%;}
#hd #z490-spec #spec-3 .spec-content .text .t7{ top: 82.2%;}



@media screen and (max-width: 1500px) {    
#hd #z490-spec .spec-content{
    max-width: 1000px;
}
#hd #z490-spec .spec-control a{
    width: 30px;
    height: 60px;
}
#hd #z490-spec .spec-control a.left{
    left: 20px;
}
#hd #z490-spec .spec-control a.right{
    right: 60px;
}
#hd #z490-spec #spec-2 .spec-content .text > div{ 
    left: 7%;
}
#hd #z490-spec .spec-content .text > div p{
    font-weight: bold;
    margin-bottom: 0;
    font-size: 0.9em;
}
#hd #z490-spec .spec-content .text > div ul{
    margin-left: 15px;
    margin-top: 0px;
}
}
@media screen and (max-width: 1023px) {    
#hd #z490-spec .z490-title{
    padding: 0 10px;
    font-size: 1.5em;
}
#hd #z490-spec .z490-title{
    font-size: 1em;
}
#hd #z490-spec .spec-content .default{
    display: none;
}
#hd #z490-spec .spec-content .mobile{
    display: block;
    max-width: 700px;
    margin: 0 auto 20px auto;
}
#hd #z490-spec .spec-content .text{
    max-width: 700px;
    margin: 0 auto 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
}
#hd #z490-spec .spec-content .text > div{
    margin: 0 0 15px 0;
    padding-left: 45px;
    position: relative;
    left: auto !important;
    top: auto !important;
}
#hd #z490-spec .spec-content .text > div .number{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
}

@media screen and (max-width: 768px) {    
#hd #z490-spec .spec-control a{
    width: 20px;
    height: 40px;
    top: 35vh;
}
#hd #z490-spec .spec-control a.left{
    left: 5px;
}
#hd #z490-spec .spec-control a.right{
    right: 45px;
}
}

@media screen and (max-width: 620px) {    
#hd #z490-spec .spec-control a.right{
    right: 5px;
}
}

/*-------section : performance----------*/


/* performance : power */
#hd #z490-performance .performance-power-content{
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(25deg, rgba(0,0,0,1) 0%, rgba(21,28,49,1) 100%);
}
#hd #z490-performance .performance-power-content .inner{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 50px 0 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
}
/*
#hd #z490-performance .performance-power-content .base{
    width: 60%;
}
#hd #z490-performance .performance-power-content .base img{
    width: 100%;
    display: block;
}
*/
#hd #z490-performance .performance-power-content .text{
    width: 40%;
    box-sizing: border-box;
    padding-left: 50px;
}
#hd #z490-performance .performance-power-content .text h3{
    text-transform: uppercase;
}

@media screen and (max-width: 767px) {    
#hd #z490-performance .performance-power-content .inner{
    display: block;
}
#hd #z490-performance .performance-power-content .base{
    width: 100%;
}
#hd #z490-performance .performance-power-content .text{
    width: 100%;
    padding-left: 0px;
    margin-top: 30px;
}
}

/* swiper */
/*
.swiper-container {
  width: 100%;
  height: 400px;
  background: #ccc;
}

.swiper-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide {
  font-size: 5em;
  color: #222;
}
.swiper-slide.slide-1{
  background: red;
}
.swiper-slide.slide-2{
  background: blue;
}
.swiper-slide.slide-3{
  background: green;
}

.swiper-pagination{
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    left: 50%;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: 0.2;
    background: #aaa;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ff00ff;

}
*/


#hd #z490-performance .z490-section-content{
}

#hd .z490-performance-power{
    /*height: 250vh;*/ /*20200423*/
    padding-top: 100px;
}

/*20200423 add*/
#hd .z490-performance-power .new-power{ 
    display: flex;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
}
#hd .z490-performance-power .new-power .img{
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;
}
#hd .z490-performance-power .new-power .text{
    width: 50%;
    box-sizing: border-box;
    padding: 0 80px 0 20px;
}
#hd .z490-performance-power .new-power .text h3{/*20200505*/
    font-size: 1.3em;
    margin-bottom: 10px;
}
#hd .z490-performance-power .new-power .text p{/*20200505*/
    margin-bottom: 25px;
}
@media screen and (max-width: 600px) { /*20200505*/
#hd .z490-performance-power .new-power .text {
    padding: 0 20px;
}
#hd .z490-performance-power .new-power .text h3{
    font-size: 1em;
}
}
@media screen and (max-width: 767px) {
#hd .z490-performance-power .new-power{ 
    display: block;
}
#hd .z490-performance-power .new-power .img{
    width: 100%;
}
#hd .z490-performance-power .new-power .text{
    width: 100%;
}
}





#hd .fixbox .scroll-text{
    position: absolute;
    left: 60%;
    top: 0;
    width: 35%;
    padding-right: 40px;
    max-width: 600px;
    box-sizing: border-box;
}

#hd .fixbox .scroll-text .entry{
    1min-height: 100vh;
    box-sizing: border-box;
    transition: all 0.6s;
    position: absolute;
    opacity: 0;
    /*
    width: calc(100% - 40px);
    padding-right: 40px;
    left: 0;
    top: 0;
    */
    transform:translateY(20%);
}
#hd .fixbox .scroll-text .entry-1{
}
#hd .fixbox .scroll-text .entry-2{
}
#hd .fixbox .scroll-text .entry-3{
}
#hd .fixbox .scroll-text .entry-4{
}
#hd .fixbox .scroll-text .entry-5{
}



#hd .fixbox .scroll-text .entry.active{
    opacity: 1;
    transform:translateY(-5%);
}


#hd .fixbox .scroll-text .context{
    padding-top: calc(50vh - 150px);
}
#hd .fixbox .scroll-text h3{
    text-transform: uppercase;
    font-size: 2.2em;
}



#hd .performance-power-content .scroll-image{
    min-height: 200vh;
    width: 100%;
    background: red;
    position: relative;
}







.screen{
    width: 100px;
    height: 100px;
    background: red;
    position: fixed;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 1.5em;
    z-index: 100;
}
.fixbox{
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0;
    color: #fff;
    z-index: 1;
}

.mybox{
    width: 100%;
    1height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
}
.myinnerbox{
    margin-top: 0;
    transition: all 0.005s;
}
#hd .fixbox .img-wrapper{
    width: 50%;
    position: absolute;
    left: 5%;
    top: 0;
    min-height: 100vh;
}
#hd .fixbox .img-wrapper img{
    width: 100%;
    display: block;
}
#hd .fixbox .img-wrapper .show{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.5s;
}




#hd .fixbox.hd-active {

    display: block;
    -webkit-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
    -o-animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;
    animation: fadeInFromBottom .8s cubic-bezier(.5, .38, .22, .98) forwards;

}


#hd .fixbox .dot-wrapper {
    position: fixed;
    left: 0;
    111top: calc(100vh - 150px);
    bottom: 50px;
    height: 10px;
    width: 100%;
    z-index: 3;
    display: none;
}
#hd .fixbox .dot-wrapper .dot-inner{
    height: 100%;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}
#hd .fixbox .dot-wrapper .dot-inner:after{
    height: 1px;
    width: 100%;
    background: #777;
    position: absolute;
    left: 0;
    top: 3px;
    content: '';
    z-index: 1;
}
#hd .fixbox .dot-wrapper .dot-inner .dot{
    height: 7px;
    width: 7px;
    background: #777;
    transition: all 0.3s;
    position: relative;
    z-index: 2;
}
#hd .fixbox .dot-wrapper .dot-inner .dot.active{
    background: #fff;
    box-shadow: 0 0 10px #fff;
}









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

#hd .fixbox .scroll-text h3{
    font-size: 1.4em;
}
#hd .fixbox .dot-wrapper {
    bottom: 30px;
}
}

@media screen and (max-width: 1023px) {    
#hd .fixbox .img-wrapper{
    width: 40%;
}
#hd .fixbox .scroll-text{
    left: 50%;
    width: 42%;
}
#hd .fixbox .scroll-text .context{
    padding-top: 80px;
}
#hd .fixbox .scroll-text h3{
    font-size: 1em;
}
}

@media screen and (max-width: 767px) {    
#hd .fixbox .img-wrapper{
    width: 90%;
    left: 5%;
}
#hd .fixbox .scroll-text{
    width: 90%;
    left: 5%;
    position: relative;
    left: auto;
    top: auto;
    padding-top: 200px;
    padding-left: 20px;
    text-shadow: 1px 1px 2px #000, 0px 0px 5px #000, 0px 0px 5px #000;
}
.fixbox{
    /*top: 50px;*/ /*20200330*/
}
}







/* performance : Cooling Innovation */

/* Old version (stactic) */
/*
#hd .performance-cooling-target-1{
    width: 100%;
    padding-top: 20px;
}

#hd .performance-cooling-target-1 .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
#hd .performance-cooling-target-1 .spec-content{
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}
#hd .performance-cooling-target-1 .spec-content .default{
    width: 70%;
}
#hd .performance-cooling-target-1 .spec-content .mobile{
    display: none;
}
#hd .performance-cooling-target-1 .spec-content .text > div{
    margin: 0;
    padding: 0 50px 0 0;
    position: absolute;
    top: 100%;
    left: 71%;
}
#hd .performance-cooling-target-1 .spec-content .text .number{
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: #ff00ff;
    display: none;
}
#hd .performance-cooling-target-1 .spec-content .text h4{
    margin-bottom: 10px;
    font-size: 1.3em;
}
#hd .performance-cooling-target-1 .spec-content .text p{
    color: #888;
}
#hd .performance-cooling-target-1 .spec-content .text .t1{
    top: 7%;
}
#hd .performance-cooling-target-1 .spec-content .text .t2{
    top: 35%;
}
#hd .performance-cooling-target-1 .spec-content .text .t3{
    top: 56%;
}
#hd .performance-cooling-target-1 .spec-content .text .t4{
    top: 78%;
}


@media screen and (max-width: 1300px) {    
#hd .performance-cooling-target-1 .spec-content .text h4{
    margin-bottom: 5px;
    font-size: 1em;
}
#hd .performance-cooling-target-1 .spec-content .default{
    width: 45%;
}
#hd .performance-cooling-target-1 .spec-content .text > div{
    left: 46%;
}
}

@media screen and (max-width: 1150px) {    
#hd .performance-cooling-target-1 .z490-title{
    padding: 0 10px;
    font-size: 1.5em;
}
#hd .performance-cooling-target-1 .spec-content .default{
    display: none;
}
#hd .performance-cooling-target-1 .spec-content .mobile{
    display: block;
    max-width: 700px;
    margin: 0 auto 30px auto;
}
#hd .performance-cooling-target-1 .spec-content .text{
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
#hd .performance-cooling-target-1 .spec-content .text > div{
    margin: 0 0 15px 0;
    padding-left: 45px;
    position: relative;
    left: auto !important;
    top: auto !important;
}
#hd .performance-cooling-target-1 .spec-content .text .number{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
}
*/

#hd .performance-cooling-target-1{
    width: 100%;
    padding-top: 20px;
    display: none;
}
#hd .performance-cooling-target-1 .blow-wrapper{
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}
#hd .performance-cooling-target-1 .blow-wrapper .layers img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
#hd .performance-cooling-target-1 .blow-wrapper .mobile{
    display: none;
}

#hd .performance-cooling-target-1 .blow-wrapper h2{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 61%;
    font-size: 2.2em;
    padding-right: 30px;
}
#hd .performance-cooling-target-1 .blow-wrapper .text{
    display: block;
    width: 100%;
    height: 100%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .number{
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: #ff00ff;
    display: none;
}
#hd .performance-cooling-target-1 .blow-wrapper .text > div{
    margin: 0;
    padding: 0 50px 0 0;
    position: absolute;
    top: 100%;
    left: 61%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text h4{
    margin-bottom: 10px;
    font-size: 1.3em;
}
#hd .performance-cooling-target-1 .blow-wrapper .text p{
    color: #888;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .t1{
    top: 8%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .t2{
    top: 23%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .t3{
    top: 45%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .t4{
    top: 60%;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .t5{
    top: 81%;
}

@media screen and (max-width: 1300px) {    
#hd .performance-cooling-target-1 .blow-wrapper h2{
    font-size: 1.6em;
    padding-right: 20px;
}
#hd .performance-cooling-target-1 .blow-wrapper .text > div{
    padding-right: 30px;
}
#hd .performance-cooling-target-1 .blow-wrapper .text h4{
    margin-bottom: 4px;
    font-size: 1em;
}
#hd .performance-cooling-target-1 .blow-wrapper .text p{
    font-size: 0.9em;
    line-height: 1.3em;
}
}

@media screen and (max-width: 950px) {    
#hd .performance-cooling-target-1 .blow-wrapper .base{
    display: none;
}
#hd .performance-cooling-target-1 .blow-wrapper .layers{
    display: none;
}
#hd .performance-cooling-target-1 .blow-wrapper .mobile{
    display: block;
    max-width: 700px;
    margin: 0 auto 30px auto;
}
#hd .performance-cooling-target-1 .blow-wrapper h2{
    position: relative;
    left: auto;
    top: auto;
    text-align: center;
    padding: 0 20px;
}
#hd .performance-cooling-target-1 .blow-wrapper .text{
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
#hd .performance-cooling-target-1 .blow-wrapper .text > div{
    margin: 0 0 15px 0;
    padding-left: 45px;
    position: relative;
    left: auto !important;
    top: auto !important;
}
#hd .performance-cooling-target-1 .blow-wrapper .text .number{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
#hd .performance-cooling-target-1 .blow-wrapper .text h4{
    margin-bottom: 12px;
    font-size: 1.2em;
}
#hd .performance-cooling-target-1 .blow-wrapper .text p{
    font-size: 1em;
    line-height: 1.6em;
}
}







/* performance : COOLER BY DESIGN */
#hd .performance-cooling-target-2{
    width: 100%;
    padding-top: 120px;
}

#hd .performance-cooling-target-2 .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
@media screen and (max-width: 768px) { /*20200330*/
#hd .performance-cooling-target-2 .z490-title{
    font-size: 1.5em;
}
}
#hd .performance-cooling-target-2 .z490-intro{
    text-align: center;
    padding: 0 20px;
}
#hd .performance-cooling-target-2 .spec-content{
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}

#hd .performance-cooling-target-2 .cooler-content{
    max-width: 1400px;
    box-sizing: border-box;
    padding: 0 40px 0 20px;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
}
#hd .performance-cooling-target-2 .cooler-content .graph{
    width: 50%;
    position: relative;
}
#hd .performance-cooling-target-2 .cooler-content .script{
    width: 50%;
}

#hd .performance-cooling-target-2 .cooler-content .script .list{
    display: flex;
    margin-top: 150px;
    margin-bottom: 50px;
}
#hd .performance-cooling-target-2 .cooler-content .script .list > div{
    width: 33.33%;
    margin: 0 5px;
    font-size: 1.5em;
    font-family: 'Xolonium', sans-serif;
    background: #13202c;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    transition: all 0.2s;
    transform: skewX(-15deg);
    cursor: pointer;
}
#hd .performance-cooling-target-2 .cooler-content .script .list > div span{
    transform: skewX(15deg);
    display: block;
}
#hd .performance-cooling-target-2 .cooler-content .script .list > div:hover{
    background: #2b4359;
}
#hd .performance-cooling-target-2 .cooler-content .script .list > div.active{
    background: #fff;
    color: #000;
}




#hd .performance-cooling-target-2 .cooler-content .script .context .entry:not(.active){
    display: none;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup{
    display: flex;
    justify-content: center;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup .item{
    width: 50%;
    margin: 0 10px;
    text-align: center;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup .item img{
    max-width: 100%;
    margin: 0 auto 15px auto;
    display: block;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup .item h4{
    color: #ff00ff;
    font-size: 1.3em;
    min-height: 2.5em;
    margin-bottom: 10px;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup .item .note{
    color: #ff00ff;
    display: block;
    margin-top: 5px;
}



#hd .performance-cooling-target-2 .cooler-content .graph .base img{
    width: 100%;
    display: block;
}

#hd .performance-cooling-target-2 .cooler-content .graph .bubble:not(.active){
    display: none;
}


#hd .performance-cooling-target-2 .cooler-content .graph .bubble img{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble:not(.active) img{
    /*transform: scale(50%);*/
}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble.active img{
    /*transform: scale(100%);*/
}

#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.fan{
    width: 30px;
    border-radius: 0;
    border: 0;
}


#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b1a{ left: 60%; top: 6%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b1b{ left: 23%; top: 44%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b1c{ left: 62%; top: 80%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b2a{ left: 62%; top: 80%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b3a{ left: 23%; top: 44%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.b3b{ left: 62%; top: 80%;}

#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.f1{ left: 28%; top: 61%;}
#hd .performance-cooling-target-2 .cooler-content .graph .bubble img.f2{ left: 53%; top: 77%;}

@media screen and (max-width: 1200px) {    
#hd .performance-cooling-target-2 .cooler-content .script .list{
    margin-top: 80px;
    margin-bottom: 20px;
}
}
@media screen and (max-width: 1023px) {    
#hd .performance-cooling-target-2 .cooler-content{
    padding: 0 40px;
    display: block;
}
#hd .performance-cooling-target-2 .cooler-content .graph{
    width: 100%;
}
#hd .performance-cooling-target-2 .cooler-content .script{
    width: 100%;
}
}

@media screen and (max-width: 767px) {    
#hd .performance-cooling-target-2 .cooler-content{
    padding: 0 10px;
}
#hd .performance-cooling-target-2 .cooler-content .script .list > div{
    font-size: 1em;
}
#hd .performance-cooling-target-2 .cooler-content .script .context .lineup .item h4{
    font-size: 1em;
}
}














/* performance : Intelligent control */
#hd .z490-performance-control{
    width: 100%;
}
#hd .z490-performance-control .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
#hd .z490-performance-control .z490-intro{
    text-align: center;
    padding: 0 20px;
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {    
#hd .z490-performance-control .z490-title{
    font-size: 1.6em;
}
}



#hd .performance-control-target-1{
    width: 100%;
    padding-top: 20px;
    display: none;
}
#hd .performance-control-target-1 .overclocking-1{
    max-width: 1300px;
    position: relative;
    margin: 50px auto 50px auto;
    padding: 30px 0;
    background: #13202c;
    display: flex;
    align-items: center;
}

#hd .performance-control-target-1 .overclocking-1 .entry{
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
#hd .performance-control-target-1 .overclocking-1 .entry-1{
    width: 40%;
}
#hd .performance-control-target-1 .overclocking-1 .entry-2{
    width: 60%;
}
#hd .performance-control-target-1 .overclocking-1 .add{
    width: 10%;
}

#hd .performance-control-target-1 .overclocking-1 .add img{
    display: block;
    margin: 0 auto;
}

#hd .performance-control-target-1 .overclocking-1 .entry .img{
    flex-shrink: 0.5;
}
#hd .performance-control-target-1 .overclocking-1 .entry .text{
    padding-left: 20px;
}
#hd .performance-control-target-1 .overclocking-1 .entry .text .title{
    color: #ff00ff;
    font-size: 1.4em;
    font-weight: normal;
    font-family: 'Xolonium', sans-serif;
    margin: 0 0 5px 0;
}
#hd .performance-control-target-1 .overclocking-1 .entry .text .caption{
    margin: 0;
}


@media screen and (max-width: 767px) {    
#hd .performance-control-target-1 .overclocking-1{
    padding: 30px 0;
    display: block;
}
#hd .performance-control-target-1 .overclocking-1 .entry-1{
    width: 100%;
}
#hd .performance-control-target-1 .overclocking-1 .entry-2{
    width: 100%;
}
#hd .performance-control-target-1 .overclocking-1 .add{
    width: 100%;
}
#hd .performance-control-target-1 .overclocking-1 .entry .img{
    flex-shrink: 1;
}
}




#hd .performance-control-target-1 .overclocking-2{
    max-width: 1300px;
    margin: 0 auto 100px auto;
    position: relative;
}
#hd .performance-control-target-1 .overclocking-2 .text{
    position: absolute;
    left: 38%;
    top: 30%;
    width: 27%;
}
#hd .performance-control-target-1 .overclocking-2 .text .title{
    color: #ff00ff;
    font-size: 1.4em;
    font-weight: normal;
    font-family: 'Xolonium', sans-serif;
    margin: 0 0 5px 0;
}
#hd .performance-control-target-1 .overclocking-2 .text .caption{
    margin: 0;
}

@media screen and (max-width: 1023px) {    
#hd .performance-control-target-1 .overclocking-2 .text{
    top: 25%;
}
#hd .performance-control-target-1 .overclocking-2 .text .title{
    font-size: 1.2em;
}
}


@media screen and (max-width: 850px) {    
#hd .performance-control-target-1 .overclocking-2 .text{
    top: 18%;
}
#hd .performance-control-target-1 .overclocking-2 .text .title{
    font-size: 1em;
}
#hd .performance-control-target-1 .overclocking-2 .text .caption{
    font-size: 0.8em;
}
}


@media screen and (max-width: 650px) {    
#hd .performance-control-target-1 .overclocking-2 .text{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}
#hd .performance-control-target-1 .overclocking-2 .text .title{
    font-size: 1.5em;
}
#hd .performance-control-target-1 .overclocking-2 .text .caption{
    font-size: 1em;
}
}





#hd .performance-control-target-1 .overclocking-3{
    max-width: 1300px;
    margin: 0 auto 100px auto;
    box-sizing: border-box;
    padding: 0 20px;
}
#hd .performance-control-target-1 .overclocking-3 .list{
    display: flex;
    margin-bottom: 50px;
}
#hd .performance-control-target-1 .overclocking-3 .list > div{
    width: 25%;
    margin: 0 5px;
    font-size: 1.5em;
    font-family: 'Xolonium', sans-serif;
    background: #13202c;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    transition: all 0.2s;
    transform: skewX(-15deg);
    cursor: pointer;
}
#hd .performance-control-target-1 .overclocking-3 .list > div span{
    transform: skewX(15deg);
    display: block;
}
#hd .performance-control-target-1 .overclocking-3 .list > div:hover{
    background: #2b4359;
}
#hd .performance-control-target-1 .overclocking-3 .list > div.active{
    background: #fff;
    color: #000;
}




#hd .performance-control-target-1 .overclocking-3 .context .entry:not(.active){
    display: none;
}

#hd .performance-control-target-1 .overclocking-3 .img{
    margin-bottom: 20px;
}
#hd .performance-control-target-1 .overclocking-3 .text{
    text-align: center;
}
#hd .performance-control-target-1 .overclocking-3 .text h4{
    color: #ff00ff;
    font-size: 1.4em;
    font-weight: normal;
    font-family: 'Xolonium', sans-serif;
    margin: 0 0 5px 0;
}
#hd .performance-control-target-1 .overclocking-3 .text .caption{
    margin: 0;
}

@media screen and (max-width: 1200px) {    
#hd .performance-control-target-1 .overclocking-3 .list > div{
    font-size: 1.2em;
}
}
@media screen and (max-width: 767px) {    
#hd .performance-control-target-1 .overclocking-3 .list > div{
    font-size: 1em;
}
}
@media screen and (max-width: 600px) {    
#hd .performance-control-target-1 .overclocking-3 .list > div{
    font-size: 0.8em;
    margin: 0 1px;
}
}







/* AI Cooling */
#hd .performance-control-target-2{
    width: 100%;
    padding-top: 20px;
}
#hd .performance-control-target-2 .inner{
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}

#hd .rc-ai-cooling{
}
#hd .rc-ai-cooling .content-2{
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 100px auto 100px auto;
    text-align: center;
}
#hd .rc-ai-cooling .content-2 .list{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
#hd .rc-ai-cooling .content-2 .list .entry{
    width: 31%;
    text-align: center;
}
#hd .rc-ai-cooling .content-2 .list .entry h4{
    margin-top: 15px;
}
#hd .rc-ai-cooling .content-2 .list .entry .note{
    display: block;
    line-height: 1.3em;
    margin-top: 15px;
    font-size: 0.9em;
    color: #999;
}
@media screen and (max-width: 768px) {
#hd .rc-ai-cooling .content-2 .list{
    display: block;
}
#hd .rc-ai-cooling .content-2 .list .entry{
    width: 100%;
    margin-bottom: 20px;
}
}

#hd .rc-ai-cooling .content-3{
    margin-top: 50px;
    margin-bottom: 50px;
}



#hd .rc-ai-cooling .content-3 .hd-ac-tab-content-2{
    display: none;
}

#hd .rc-ai-cooling .content-3 .inner{
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 30px auto 0 auto;
    padding: 20px;
}
#hd .rc-ai-cooling .content-3 .inner .text{
    padding-left: 30px;
    width: 50%;
    box-sizing: border-box;
}

#hd .rc-ai-cooling .content-3 .inner .img{
    width: 50%;
}

@media screen and (max-width: 768px) {
#hd .rc-ai-cooling .content-3 .inner{
    display: block;
}
#hd .rc-ai-cooling .content-3 .inner .text{
    padding-left: 0;
    margin-top: 20px;
    width: 100%;
}
#hd .rc-ai-cooling .content-3 .inner .img{
    width: 100%;
}
}




/* sub tab */

#hd .rc_sub_tab {
    padding: 10px 0;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#hd .rc_sub_tab ul {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
#hd .rc_sub_tab ul li {
    /*width: 20%;*/
    margin: 0 5px;
    background: #13202c;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 10px 30px;
    transition: all 0.2s;
    transform: skewX(-15deg);
    cursor: pointer;
}
#hd .rc_sub_tab li:hover {
    background: #2b4359;
}
#hd .rc_sub_tab li.active {
    background: #fff;
    color: #000;
}
#hd .rc_sub_tab li a {
    display: block;
    width: 100%;
    transform: skewX(15deg);
    color: #fff;
    font-size: 1em;
    font-family: 'Xolonium', sans-serif;
}
#hd .rc_sub_tab li.active a{
    color: #000;
}
#hd .rc_sub_tab li a p{
    margin: 0;
}
#hd .rc_sub_tab li a p.title{
    font-size: 1.6em;
    line-height: 1.2em;
    font-family: 'Xolonium', sans-serif;
}

@media screen and (max-width: 767px) {    
#hd .rc_sub_tab ul li {
    padding: 6px 6px;
}
#hd .rc_sub_tab li a {
    font-size: 0.8em;
}
}









/* ai-overclocking */

#hd .rc-ai-overclocking{
    margin-bottom: 50px;
}
#hd .rc-ai-overclocking .content-1{
    display: flex;
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 0 auto 100px auto;
    align-items: center;
}
#hd .rc-ai-overclocking .content-1 .text{
    text-align: center;
    padding-left: 20px;
}
#hd .rc-ai-overclocking .content-1 .img{
    flex-shrink: 0;
}

@media screen and (max-width: 1200px) {
#hd .rc-ai-overclocking .content-1 .img{
    flex-shrink: 0.5;
}
}
@media screen and (max-width: 500px) {
#hd .rc-ai-overclocking .content-1{
    display: block;
}
#hd .rc-ai-overclocking .content-1 .text{
    padding-left: 0px;
}
}



#hd .rc-ai-overclocking .content-2{
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#hd .rc-ai-overclocking .content-2 .list{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
#hd .rc-ai-overclocking .content-2 .list .entry{
    width: 31%;
    text-align: center;
}
#hd .rc-ai-overclocking .content-2 .list .entry h4{
    margin-top: 15px;
}
@media screen and (max-width: 768px) {
#hd .rc-ai-overclocking .content-2 .list{
    display: block;
}
#hd .rc-ai-overclocking .content-2 .list .entry{
    width: 100%;
    margin-bottom: 20px;
}
}





#hd .rc-ai-overclocking .content-3{
    margin-top: 50px;
}


#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list{
    max-width: 1000px;
    margin: 30px auto 0 auto;
    padding: 0 20px;
}
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list .entry{
    display: flex;
    align-items: top;
    min-height: 200px;
}

#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list .entry .img{
    flex-shrink: 0;
}
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list .entry .text{
    padding-left: 30px;
}

@media screen and (max-width: 768px) {
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list .entry{
    display: block;
    text-align: center;
}
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-1 .list .entry .img{
    margin-bottom: 10px;
}
}






#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2{
    display: none;
}

#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2 .inner{
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 30px auto 0 auto;
    padding: 20px;
}
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2 .inner .text{
    padding-left: 30px;
}

#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2 .inner .img{
    flex-shrink: 0;
}

@media screen and (max-width: 550px) {
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2 .inner{
    display: block;
}
#hd .rc-ai-overclocking .content-3 .hd-ao-tab-content-2 .inner .text{
    padding-left: 0;
    margin-top: 20px;
}
}



#hd .rc-ai-overclocking .content-4{
    /*display: none;*/
    margin-top: 50px;
}
#hd .rc-ai-overclocking .content-4.active{
    display: block;
}
#hd .rc-ai-overclocking .content-4 > .text{
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 0 auto;
    text-align: center;
}




#hd .read-more{
    text-align: center;
}
#hd .read-more span{
    width: 200px;
    margin: 0 auto;
}
#hd .read-more span:after{
    content: '+';
    background: #ff00ff;
    border-radius: 100%;
    width: 43px;
    height: 43px;
    display: block;
    margin: 8px auto 0 auto;
    background-image: linear-gradient(90deg, #fc32da 0%, #0078ff 100%);
    cursor: pointer;
    font-size: 26px;
    line-height: 43px;
}
#hd .read-more.active span:after{
    content: '-';
}






/* ai-networking */

#hd .performance-control-target-3{
    width: 100%;
    padding-top: 120px;
}
#hd .performance-control-target-3 .inner{
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}

#hd .rc-ai-networking{
    margin-bottom: 50px;
}
#hd .rc-ai-networking .content-1{
    display: flex;
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 0 auto 100px auto;
    align-items: center;
}
#hd .rc-ai-networking .content-1 .text{
    text-align: center;
    padding-left: 20px;
}
#hd .rc-ai-networking .content-1 .img{
    flex-shrink: 0;
}

@media screen and (max-width: 1200px) {
#hd .rc-ai-networking .content-1 .img{
    flex-shrink: 0.5;
}
}
@media screen and (max-width: 500px) {
#hd .rc-ai-networking .content-1{
    display: block;
}
#hd .rc-ai-networking .content-1 .text{
    padding-left: 0px;
}
}



#hd .rc-ai-networking .content-2{
    max-width: 1200px;
    box-sizing: border-box;
    padding: 0 30px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#hd .rc-ai-networking .content-2 .list{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
#hd .rc-ai-networking .content-2 .list .entry{
    width: 31%;
    text-align: center;
}
#hd .rc-ai-networking .content-2 .list .entry h4{
    color: #fff;
    margin-top: 15px;
}
@media screen and (max-width: 768px) {
#hd .rc-ai-networking .content-2 .list{
    display: block;
}
#hd .rc-ai-networking .content-2 .list .entry{
    width: 100%;
    margin-bottom: 20px;
}
}



#hd .rc-ai-networking .content-3{
    margin-top: 100px;
}



/*-------section : storage----------*/


/* connectivity : storage */
#hd #z490-connectivity .connectivity-storage-content{
    width: 100%;
    background-image: linear-gradient(180deg, #000000 0%, #101526 100%);
}
#hd #z490-connectivity .connectivity-storage-content .inner{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 50px 0 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: flex-start;
}
#hd #z490-connectivity .connectivity-storage-content .inner .entry{
    width: 50%;
    box-sizing: border-box;
    padding: 80px;
}
#hd #z490-connectivity .connectivity-storage-content .img img{
    width: 100%;
}
#hd #z490-connectivity .connectivity-storage-content .text{
    margin-top: 60px;
    text-align: center;
}
#hd #z490-connectivity .connectivity-storage-content .title{
    font-family: 'Xolonium', sans-serif;
    margin-bottom: 20px;
}
#hd #z490-connectivity .connectivity-storage-content .title .t1{
    font-size: 1.8em;
    display: block;
    margin: 0 auto 22px auto; /*20200330*/
}
#hd #z490-connectivity .connectivity-storage-content .title .t2{
    font-size: 3.5em;
    display: inline-block;
    margin-right: 10px;
}
#hd #z490-connectivity .connectivity-storage-content .title .t3{
    font-size: 1.8em;
    display: inline-block;
}
#hd #z490-connectivity .connectivity-storage-content .title .t4{
    font-size: 3.7em;
    display: block;
    margin: 0 auto 22px auto; /*20200330*/
}
#hd #z490-connectivity .connectivity-storage-content .title .t5{
    font-size: 1.2em;
}
#hd #z490-connectivity .connectivity-storage-content p{
    padding: 0 40px;
}


@media screen and (max-width: 1300px) {    
#hd #z490-connectivity .connectivity-storage-content .inner{
    padding: 0 20px;
}
#hd #z490-connectivity .connectivity-storage-content .inner .entry{
    padding: 30px;
}
}

@media screen and (max-width: 767px) {    
#hd #z490-connectivity .connectivity-storage-content .inner{
    padding: 0 10px;
}
#hd #z490-connectivity .connectivity-storage-content .inner .entry{
    padding: 40px 20px;
}
#hd #z490-connectivity .connectivity-storage-content p{
    padding: 0;
}
#hd #z490-connectivity .connectivity-storage-content .title{
    font-size: 0.7em;
}
}


@media screen and (max-width: 550px) {    
#hd #z490-connectivity .connectivity-storage-content .inner{
    display: block;
}
#hd #z490-connectivity .connectivity-storage-content .inner .entry{
    width: 100%;
}
#hd #z490-connectivity .connectivity-storage-content .text{
    margin-top: 20px;
}
}




/* connectivity : networking */

#hd #z490-connectivity .z490-connectivity-networking{
    background: #000;
    overflow: hidden;
}

/*
#hd #z490-connectivity .connectivity-networking-content{
    width: 100%;
    overflow: hidden;
    padding-top: 60px;
    background-image: linear-gradient(180deg, #000000 0%, #000000 30%, #1f2843 30.01%, #101526 100%);
}
#hd #z490-connectivity .connectivity-networking-content .img img{
    width: 100%;
}
#hd #z490-connectivity .connectivity-networking-content .group{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: flex-start;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry{
    width: 50%;
    box-sizing: border-box;
    padding: 0px 50px 40px 50px;
    text-align: center;
    position: relative;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(1):after{
    content: '';
    display: block;
    width: 1px;
    height: calc(100% - 150px);
    position: absolute;
    right: 0;
    top: 100px;
    background: #999;
}
#hd #z490-connectivity .connectivity-networking-content .group .title{
    font-family: 'Xolonium', sans-serif;
    font-size: 2em;
    margin-bottom: 10px;
    text-transform: uppercase;
    min-height: 2.5em;
    box-sizing: border-box;
}
#hd #z490-connectivity .connectivity-networking-content .group .title .small{
    font-size: 0.6em;
    text-transform: none;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(1) .title,
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(2) .title{
    padding-top: 20px;
}
#hd #z490-connectivity .connectivity-networking-content .group .text{
}
#hd #z490-connectivity .connectivity-networking-content .group .text img{
    float: left;
    width: 99px;
    margin-right: 10px;
    margin-bottom: 20px;
}
#hd #z490-connectivity .connectivity-networking-content .group .graph{
    text-align: left;
}

#hd #z490-connectivity .connectivity-networking-content .graph-wrapper{
    display: flex;
    width: 100%;
    align-items: center;
}
#hd #z490-connectivity .connectivity-networking-content .graph{
    flex-grow: 1;
    padding-right: 40px;
}
#hd #z490-connectivity .connectivity-networking-content .graph p{
    margin-bottom: 5px;
}
#hd #z490-connectivity .connectivity-networking-content .graph .name1{
    font-weight: bold;
}
#hd #z490-connectivity .connectivity-networking-content .graph .name2{
    font-weight: bold;
}
#hd #z490-connectivity .connectivity-networking-content .graph .name1 span{
    font-weight: normal;
}
#hd #z490-connectivity .connectivity-networking-content .graph .bar{
    margin-bottom: 15px;
    position: relative;
    text-align: right;
    font-style: italic;
    height: 30px;
    line-height: 1em;
    transform-origin: left center;
}
#hd #z490-connectivity .connectivity-networking-content .graph .bar1{
    font-size: 1.3em;
    color: #6bb6fd;
}
#hd #z490-connectivity .connectivity-networking-content .graph span{
    position: relative;
    z-index: 2;
}
#hd #z490-connectivity .connectivity-networking-content .graph .bar:after{
    width: 100%;
    height: 20px;
    background: #444;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
#hd #z490-connectivity .connectivity-networking-content .graph .bar1:after{
    content: '2400 Mbps';
    background-image: linear-gradient(90deg, #0f8aff 0%, #0211ff 100%);
}
#hd #z490-connectivity .connectivity-networking-content .graph .bar2:after{
    width: 70%;
    content: '876 Mbps';
}



@media screen and (max-width: 1300px) {    
#hd #z490-connectivity .connectivity-networking-content .group .title{
    font-size: 1.3em;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry{
    padding: 0px 20px 40px 20px;
}
#hd #z490-connectivity .connectivity-networking-content .graph{
    padding-right: 20px;
}
}
@media screen and (max-width: 1023px) {    
#hd #z490-connectivity .connectivity-networking-content{
    background-image: linear-gradient(180deg, #000000 0%, #000000 20%, #1f2843 20.01%, #101526 100%);
}
}
@media screen and (max-width: 767px) {    
#hd #z490-connectivity .connectivity-networking-content{
    background-image: linear-gradient(180deg, #000000 0%, #000000 10%, #1f2843 10.01%, #101526 100%);
}
#hd #z490-connectivity .connectivity-networking-content .group{
    display: block;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry{
    width: 100%;
    padding: 0px 0px 20px 0px;
    margin-bottom: 40px;
}
#hd #z490-connectivity .connectivity-networking-content .group .title{
    min-height: auto;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(1) .title,
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(2) .title{
    padding-top: 0px;
}
#hd #z490-connectivity .connectivity-networking-content .group .entry:nth-child(1):after{
    display: none;
}
#hd #z490-connectivity .connectivity-networking-content .group .text img{
    float: none;
    margin: 0 auto 10px auto;
}
}

*/

/* connectivity-networking ( copy from style : DIY ) */
#hd #z490-connectivity .connectivity-networking-content{
    padding-top: 100px;
}
#hd #z490-connectivity .connectivity-networking-content .list{
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px 30px 50px 30px;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry{
    min-height: 250px;
    background: #13202c;
    margin-bottom: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry h4{
    font-family: 'Xolonium', sans-serif;
    text-transform: uppercase;
    font-size: 2.5em;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry p{
    margin-bottom: 0;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry .text{
    padding: 20px;
    width: 45%;
    position: relative;
    z-index: 1;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry .img{
    position: absolute;
    left: 0;
    top: 0;
}



#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-1{
    border: 15px solid #13202c;
    background: #000;
    min-height: 350px;
    overflow: visible;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-1 .img{
    top: auto;
    bottom: 0;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-2 .img{ /*20200427*/
    left: auto;
    right: 0;
    bottom: 0;
    top: auto;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-4 .img{
    left: auto;
    right: 0;
}


#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-1 .text{
    margin-left: 50%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-2 .text{
    margin-left: 2%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-3 .text{
    margin-left: 60%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-4 .text{
    margin-left: 2%;
}

@media screen and (max-width: 1300px) {
#hd #z490-connectivity .connectivity-networking-content .list .entry h4{
    font-size: 2em;
}
}

@media screen and (max-width: 1024px) {
#hd #z490-connectivity .connectivity-networking-content .list .entry h4{
    font-size: 1.5em;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry .text{
    width: 55%;
    text-shadow: 1px 1px 2px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 8px #000, 0px 0px 12px #000;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-1 .img{
    width: 70%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-2 .img{
    /*right: -25%;*/ /*20200427*/
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-3 .img{
    left: -30%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-3 .text{
    margin-left: 40%;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-4 .img{
    right: -30%;
}
}

@media screen and (max-width: 700px) {
#hd #z490-connectivity .connectivity-networking-content{
    padding-top: 50px; /*20200330*/
}
#hd #z490-connectivity .connectivity-networking-content .list .entry{
    display: block;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry .text{
    margin-left: 0% !important;
    width: 100% !important;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry .img{
    position: relative;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}
#hd #z490-connectivity .connectivity-networking-content .list .entry.entry-1 .img{
    width: 100%;
}
}











/* connectivity : audio */

#hd #z490-connectivity .z490-connectivity-audio{
    background: #000;
    overflow: hidden;
}

/*SupremeFX*/
#hd #z490-connectivity .connectivity-audio-content{
    width: 100%;
    background: #000;
    overflow: hidden;
    position: relative;
    padding-bottom: 100px;
}
#hd #z490-connectivity .connectivity-audio-content .context{
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 250px 550px 0 30px;
    position: relative;
    z-index: 1;
}
#hd #z490-connectivity .connectivity-audio-content .graph-wrapper{
    display: flex;
    margin-top: 50px;
}
#hd #z490-connectivity .connectivity-audio-content .graph-wrapper .img img{
    display: block;
    width: 100%;
}


#hd #z490-connectivity .connectivity-audio-content .graph{
    flex-grow: 1;
}
#hd #z490-connectivity .connectivity-audio-content .graph .title{
    font-weight: bold;
    margin-bottom: 5px;
}
#hd #z490-connectivity .connectivity-audio-content .graph p{
}
#hd #z490-connectivity .connectivity-audio-content .graph .name1{
    font-style: italic;
    color: #ff00ff;
    margin-bottom: 0;
}
#hd #z490-connectivity .connectivity-audio-content .graph .name2{
    font-style: italic;
    color: #fff;
    margin-bottom: 0;
}
#hd #z490-connectivity .connectivity-audio-content .graph .bar{
    margin-bottom: 15px;
    position: relative;
    text-align: right;
    font-style: italic;
    height: 30px;
    line-height: 1em;
    transform-origin: left center;
}
#hd #z490-connectivity .connectivity-audio-content .graph span{
    position: relative;
    z-index: 2;
}
#hd #z490-connectivity .connectivity-audio-content .graph .bar:after{
    width: 100%;
    height: 20px;
    background: #444;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding-right: 10px;
    padding-top: 3px;
}
#hd #z490-connectivity .connectivity-audio-content .graph .bar1:after{
    content: '113dB';
    background: #ff00ff;
}
#hd #z490-connectivity .connectivity-audio-content .graph .bar2:after{
    width: 80%;
    content: '108dB';
}







#hd #z490-connectivity .connectivity-audio-content .list{
    display: flex;
    max-width: 1200px;
    box-sizing: border-box;
    margin: 50px auto 0 auto;
    padding: 0 30px;
    justify-content: space-between;
    align-content: stretch;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry{
    width: calc(25% - 10px);
    border: 15px solid #13202c;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s;
    background: #000;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry:hover{
    background: #13202c;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry.active{
    background: #13202c;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry a{
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 25px 10px 20px 20px;
    color: #fff; /*20200409*/
}
#hd #z490-connectivity .connectivity-audio-content .list .entry h4{
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 10px 0;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry p{
    margin-bottom: 0;
}






#hd #z490-connectivity .connectivity-audio-content .visual{
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    max-width: 800px;
}
#hd #z490-connectivity .connectivity-audio-content .visual img{
    display: block;
    width: 100%;
}
#hd #z490-connectivity .connectivity-audio-content .visual .glow .entry{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all 0.3s;
}
#hd #z490-connectivity .connectivity-audio-content .visual .glow .entry.active{
    opacity: 1;
}

@media screen and (min-width: 2000px) {    
#hd #z490-connectivity .connectivity-audio-content .visual{
    right: auto;
    left: 55%;
}
}


@media screen and (max-width: 1400px) {    
#hd #z490-connectivity .connectivity-audio-content .context{
    padding: 150px 650px 0 30px;
}
#hd #z490-connectivity .connectivity-audio-content .visual{
    width: 50%;
}
}
@media screen and (max-width: 1100px) {    
#hd #z490-connectivity .connectivity-audio-content .context{
    padding: 100px 550px 0 30px;
}
}

@media screen and (max-width: 1024px) {    
#hd #z490-connectivity .connectivity-audio-content .context{
    padding: 50px 50% 0 30px;
}
#hd #z490-connectivity .connectivity-audio-content .graph-wrapper{
    margin-top: 20px;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry a{
    padding: 10px;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry{
    width: calc(25% - 5px);
    border: 8px solid #13202c;
}
#hd #z490-connectivity .connectivity-audio-content .visual{
    top: 10%;
}
}


@media screen and (max-width: 767px) {    
#hd #z490-connectivity .connectivity-audio-content .context{
    padding: 100px 30px 0 30px; /*20200330*/
}
#hd #z490-connectivity .connectivity-audio-content .visual{
    top: auto;
    left: auto;
    width: 100%;
    position: relative;
}
#hd #z490-connectivity .connectivity-audio-content .list{
    margin-top: 0;
    margin-top: -100px;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry{
    width: calc(50% - 5px);
    border: 5px solid #13202c;
    margin-bottom: 10px;
}
#hd #z490-connectivity .connectivity-audio-content .list .entry h4{
    font-size: 1em;
}
}

@media screen and (max-width: 450px) {    
#hd #z490-connectivity .connectivity-audio-content .list .entry{
    width: 100%;
}
#hd #z490-connectivity .connectivity-audio-content .graph-wrapper .img{
    width: 100px;
}
}




/*Audio type C 20200423*/
/*
#hd #z490-connectivity .connectivity-audio-target-2{
    display: none;
}
#hd #z490-connectivity .connectivity-audio-type-c{ 
    display: flex;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
}
#hd #z490-connectivity .connectivity-audio-type-c .img{
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;
}
#hd #z490-connectivity .connectivity-audio-type-c .text{
    width: 50%;
    box-sizing: border-box;
    padding: 0 80px 0 20px;
}
@media screen and (max-width: 767px) {
#hd #z490-connectivity .connectivity-audio-type-c{ 
    display: block;
}
#hd #z490-connectivity .connectivity-audio-type-c .img{
    width: 100%;
}
#hd #z490-connectivity .connectivity-audio-type-c .text{
    width: 100%;
}
}

*/

/* connectivity-audio audio type c ( copy from style : DIY ) */

#hd #z490-connectivity .connectivity-audio-target-2{
    display: none;
}

#hd #z490-connectivity .connectivity-audio-type-c{
    padding-top: 100px;
}
#hd #z490-connectivity .connectivity-audio-type-c .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
#hd #z490-connectivity .connectivity-audio-type-c .z490-intro{
    text-align: center;
    padding: 0 20px;
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {    
#hd #z490-connectivity .connectivity-audio-type-c .z490-title {
    font-size: 1.6em;
}
}
#hd #z490-connectivity .connectivity-audio-type-c .list{
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px 30px 50px 30px;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry{
    min-height: 250px;
    background: #13202c;
    margin-bottom: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry h4{
    font-family: 'Xolonium', sans-serif;
    font-size: 2.5em;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry p{
    margin-bottom: 0;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry .text{
    padding: 20px;
    width: 45%;
    position: relative;
    z-index: 1;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry .img{
    position: absolute;
    left: 0;
    top: 0;
}



#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-1{
    border: 15px solid #13202c;
    background: #000;
    min-height: 350px;
    overflow: visible;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-1 .img{
    top: auto;
    bottom: 0;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-2 .img{
    left: auto;
    right: 0;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-4 .img{
    left: auto;
    right: 0;
}


#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-1 .text{
    margin-left: 50%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-2 .text{
    margin-left: 2%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-3 .text{
    margin-left: 60%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-4 .text{
    margin-left: 2%;
}

@media screen and (max-width: 1300px) {    
#hd #z490-connectivity .connectivity-audio-type-c .list .entry h4{
    font-size: 2em;
}
}

@media screen and (max-width: 1024px) {    
#hd #z490-connectivity .connectivity-audio-type-c .list .entry h4{
    font-size: 1.5em;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry .text{
    width: 55%;
    text-shadow: 1px 1px 2px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 8px #000, 0px 0px 12px #000;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-1 .img{
    width: 70%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-2 .img{
    right: -25%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-3 .img{
    left: -30%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-3 .text{
    margin-left: 40%;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-4 .img{
    right: -30%;
}
}

@media screen and (max-width: 700px) {    
#hd #z490-connectivity .connectivity-audio-type-c{
    padding-top: 50px; /*20200330*/
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry{
    display: block;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry .text{
    margin-left: 0% !important;
    width: 100% !important;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry .img{
    position: relative;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}
#hd #z490-connectivity .connectivity-audio-type-c .list .entry.entry-1 .img{
    width: 100%;
}
}






/* style : customization */

#hd .style-customization-target-1{
    width: 100%;
    position: relative;
    padding: 0 50px 150px 50px;
    overflow: hidden;
}
#hd .style-customization-target-1 .z490-title{
    font-size: 2em;
}
#hd .style-customization-target-1 .box{
    max-width: 1500px;
    position: relative;
    margin: 120px auto 50px auto;
    padding-bottom: 100px;
    box-sizing: border-box;
    border: 20px solid #13202c;
}
#hd .style-customization-target-1 .text{
    max-width: 350px;
    margin: 30px;
}

#hd .style-customization-target-1 .product{
}
#hd .style-customization-target-1 .product .front{
    max-width: 700px;
    width: 45%;
    position: absolute;
    left: 45%; /*20200422*/
    top: 0;
    z-index: 2;
}
#hd .style-customization-target-1 .product .back{
    max-width: 700px;
    width: 45%;
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 1;
}
#hd .style-customization-target-1 .product img{
    width: 100%;
    display: block;
}


@media screen and (max-width: 1500px) {    
#hd .style-customization-target-1{
    padding-bottom: 100px;
}
}


@media screen and (max-width: 1450px) {    
#hd .style-customization-target-1 .box{
    margin-bottom: 0;
}
}

@media screen and (max-width: 1350px) {    
#hd .style-customization-target-1 .box{
    margin-top: 60px;
    padding-bottom: 30px;
}
#hd .style-customization-target-1 .product .front{
    left: 45%;
    width: 40%;
}
#hd .style-customization-target-1 .product .back{
    left: 55%;
    width: 40%;
}
}
@media screen and (max-width: 1200px) {    
#hd .style-customization-target-1 .product .front{
    left: 40%;
    width: 45%;
}
#hd .style-customization-target-1 .product .back{
    left: 50%;
    width: 45%;
}
}

@media screen and (max-width: 1024px) {    
#hd .style-customization-target-1{
    padding: 0 20px 0px 20px;
    min-height: 450px;
}
#hd .style-customization-target-1 .box{
    padding-bottom: 0;
}
#hd .style-customization-target-1 .text{
    max-width: 250px;
}
}




@media screen and (max-width: 768px) {    
#hd .style-customization-target-1 .box{
    padding-top: 60vw;
}
#hd .style-customization-target-1 .text{
    max-width: 100%;
}
#hd .style-customization-target-1 .z490-title{
    font-size: 1.5em;
}
#hd .style-customization-target-1 .product .front{
    left: 12%;
    width: 70%;
}
#hd .style-customization-target-1 .product .back{
    left: 35%;
    width: 70%;
    top: 5%;
}
}






/* customization Aura Sync */

#hd .style-customization-target-2{
    display: none;
    max-width: 2560px;
    margin: 0px auto 200px auto;
    overflow: hidden; /*20200330*/
}

#hd .style-customization-target-2 .strips {
    margin-top: 30px;
    margin-right: 30px;
}
#hd .style-customization-target-2 .aurasync-wrapper{
    min-height: 60vw;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 {
    margin-top: 8%;
    margin-left: 55%;
    margin-right: 50px;
    width: 40%;
    max-width: 600px;
    float: none;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 h3 img {
    display: block;
    float: right;
    margin-top: -35px;
    width: 70px;
}

#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 p {
    margin-bottom: 0;
}


@media screen and (min-width: 2560px) { /*20200330*/
#hd .style-customization-target-2 .aurasync-wrapper{
    min-height: 1600px;
}
}


@media screen and (max-width: 1750px) {    
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 {
    margin-top: 3%;
}
}

@media screen and (max-width: 1550px) {    
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 {
    margin-top: 0;
}
#colorpicker{
    transform: scale(50%);
    bottom: -120px;
    left: auto;
}
}

@media screen and (max-width: 1250px) {    
#hd .style-customization-target-2{
    margin-bottom: 50px;
    margin-top: 0;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 {
    width: 100%;
    margin: 0 auto;
    max-width: 700px;
    padding: 0 20px;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 h3 {
    text-align: center;
    margin-top: 30px;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 > p {
    text-align: center;
}
#hd .style-customization-target-2 .hd-sec-lighting .hd-col55 h3 img {
    float: none;
    margin-top: 20px;
}
#colorpicker {
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    position: relative;
    margin-top: 40px;
}
#hd .hd-lightingbox {
    top: auto;
    left: auto;
    width: 100% !important;
    /*padding-bottom: 70% !important;*/
}

.starry_night li:nth-child(2) {
    left: 34% !important;
    top: 17% !important;
}
.hd-starryNight::before, .hd-starryNight::after, .starry_night_back, .starry_night_color {
    top: auto !important;
}
}





#hd .style-customization-target-2 .add{
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
#hd .style-customization-target-2 .add:after{
    background: #13202c;
    content: '';
    display: block;
    width: 150%;
    height: 200px;
    position: absolute;
    left: 8%;
    top: 90px;
    z-index: 0;
}
#hd .style-customization-target-2 .add .text{
    padding-right: 20px;
    padding-left: 10%;
    position: relative;
    z-index: 1;
}
#hd .style-customization-target-2 .add h4{
    font-family: 'Xolonium', sans-serif;
}

#hd .style-customization-target-2 .add .img{
    width: 250px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
#hd .style-customization-target-2 .add .img img{
    width: 100%;
    display: block;
}





@media screen and (max-width: 1250px) {    
#hd .style-customization-target-2 .add .img{
    width: 200px;
    margin-right: 30px;
}
#hd .style-customization-target-2 .add:after{
    height: 170px;
    top: 60px;
}
}

@media screen and (max-width: 767px) {    
#hd .style-customization-target-2 .add:after{
    display: none;
}
#hd .style-customization-target-2 .add{
    margin-top: 50px;
}
}

@media screen and (max-width: 600px) {    
#hd .style-customization-target-2 .add{
    display: block;
}
#hd .style-customization-target-2 .add .text{
    padding-right: 20px;
    padding-left: 20px;
}
#hd .style-customization-target-2 .add .img{
    width: 250px;
    padding-left: 20px;
}
}






/* style : DIY */
#hd #z490-style .style-diy-content{
    padding-top: 200px; /*20200330*/
}
#hd #z490-style .style-diy-content .list{
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 50px 30px 50px 30px;
}
#hd #z490-style .style-diy-content .list .entry{
    min-height: 250px;
    background: #13202c;
    margin-bottom: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
#hd #z490-style .style-diy-content .list .entry h4{
    font-family: 'Xolonium', sans-serif;
    text-transform: uppercase;
    font-size: 2.5em;
}
#hd #z490-style .style-diy-content .list .entry p{
    margin-bottom: 0;
}
#hd #z490-style .style-diy-content .list .entry .text{
    padding: 20px;
    width: 45%;
    position: relative;
    z-index: 1;
}
#hd #z490-style .style-diy-content .list .entry .img{
    position: absolute;
    left: 0;
    top: 0;
}



#hd #z490-style .style-diy-content .list .entry.entry-1{
    border: 15px solid #13202c;
    background: #000;
    min-height: 350px;
    overflow: visible;
}
#hd #z490-style .style-diy-content .list .entry.entry-1 .img{
    top: auto;
    bottom: 0;
}
#hd #z490-style .style-diy-content .list .entry.entry-2 .img{
    left: auto;
    right: 0;
}
#hd #z490-style .style-diy-content .list .entry.entry-4 .img{
    left: auto;
    right: 0;
}


#hd #z490-style .style-diy-content .list .entry.entry-1 .text{
    margin-left: 50%;
}
#hd #z490-style .style-diy-content .list .entry.entry-2 .text{
    margin-left: 2%;
}
#hd #z490-style .style-diy-content .list .entry.entry-3 .text{
    margin-left: 60%;
}
#hd #z490-style .style-diy-content .list .entry.entry-4 .text{
    margin-left: 2%;
}

@media screen and (max-width: 1300px) {    
#hd #z490-style .style-diy-content .list .entry h4{
    font-size: 2em;
}
}

@media screen and (max-width: 1024px) {    
#hd #z490-style .style-diy-content .list .entry h4{
    font-size: 1.5em;
}
#hd #z490-style .style-diy-content .list .entry .text{
    width: 55%;
    text-shadow: 1px 1px 2px #000, 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 8px #000, 0px 0px 12px #000;
}
#hd #z490-style .style-diy-content .list .entry.entry-1 .img{
    width: 70%;
}
#hd #z490-style .style-diy-content .list .entry.entry-2 .img{
    right: -25%;
}
#hd #z490-style .style-diy-content .list .entry.entry-3 .img{
    left: -30%;
}
#hd #z490-style .style-diy-content .list .entry.entry-3 .text{
    margin-left: 40%;
}
#hd #z490-style .style-diy-content .list .entry.entry-4 .img{
    right: -30%;
}
}

@media screen and (max-width: 700px) {    
#hd #z490-style .style-diy-content{
    padding-top: 50px; /*20200330*/
}
#hd #z490-style .style-diy-content .list .entry{
    display: block;
}
#hd #z490-style .style-diy-content .list .entry .text{
    margin-left: 0% !important;
    width: 100% !important;
}
#hd #z490-style .style-diy-content .list .entry .img{
    position: relative;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}
#hd #z490-style .style-diy-content .list .entry.entry-1 .img{
    width: 100%;
}
}








/* style : compatibilty */
#hd #z490-style .style-compatibilty-content{
    padding-top: 100px; /*20200330*/
}
#hd #z490-style .style-compatibilty-content .compatibilty-1{
    display: flex;
    max-width: 1900px;
    margin: 0 auto 50px auto;
    flex-direction: row-reverse;
    align-items: center;
}
#hd #z490-style .style-compatibilty-content .compatibilty-1 .img{
    width: 40%;
}
#hd #z490-style .style-compatibilty-content .compatibilty-1 .text{
    width: 60%;
    box-sizing: border-box;
    padding: 0 15% 0 8%;
}
#hd #z490-style .style-compatibilty-content h4{
    font-family: 'Xolonium', sans-serif;
    text-transform: uppercase;
    font-size: 2.5em;
}
#hd #z490-style .style-compatibilty-content p{
    margin-bottom: 0;
}
#hd #z490-style .style-compatibilty-content a{
    color: #ce00e9;
    transition: all 0.2s;
}
#hd #z490-style .style-compatibilty-content a:hover{
    color: #ff00ff;
}


#hd #z490-style .style-compatibilty-content .compatibilty-2{
    position: relative;
    background-image: linear-gradient(90deg, #0b0840 0%, #0b0840 50%, #6c1132 50.1%, #6c1132 100%);
}
#hd #z490-style .style-compatibilty-content .compatibilty-2 .text{
    position: absolute;
    left: 50%;
    top: 20%;
    width: 35%;
    max-width: 600px;
    transform: translateX(-130%);
}




@media screen and (max-width: 1600px) {    
#hd #z490-style .style-compatibilty-content h4{
    font-size: 2em;
}
#hd #z490-style .style-compatibilty-content .compatibilty-2 .text{
    top: 10%;
}
}



@media screen and (max-width: 1300px) {    
#hd #z490-style .style-compatibilty-content .compatibilty-1 .img{
    width: 50%;
}
#hd #z490-style .style-compatibilty-content .compatibilty-1 .text{
    width: 50%;
    padding: 0 50px 0 20px;
}
#hd #z490-style .style-compatibilty-content h4{
    font-size: 1.5em;
}
}
@media screen and (max-width: 1000px) {    
#hd #z490-style .style-compatibilty-content .compatibilty-2 .img{
    margin-left: -50%;
}
#hd #z490-style .style-compatibilty-content .compatibilty-2 .img img{
    max-width: calc(1920 * 1) !important;
    height: calc(613 * 1);
}
#hd #z490-style .style-compatibilty-content .compatibilty-2 .text{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 50px 30px 0 30px;
    transform: translateX(0%);
    background-image: linear-gradient(90deg, #140e70 0%, #511555 65%, #6c1132 100%);
}
}

@media screen and (max-width: 768px) {    
#hd #z490-style .style-compatibilty-content .compatibilty-1{
    display: block;
}
#hd #z490-style .style-compatibilty-content .compatibilty-1 .img{
    width: 100%;
}
#hd #z490-style .style-compatibilty-content .compatibilty-1 .text{
    width: 100%;
    padding: 0 30px;
}
}


@media screen and (max-width: 500px) {    
#hd #z490-style .style-compatibilty-content h4{
    font-size: 1.2em;
}
}








/* more : audio */
#hd .more-audio-target-1{
    margin-top: 30px;
}
#hd .more-audio-target-2{
    margin-top: 30px;
    display: none;
}

#hd .z490-more-audio .z490-title{
    font-size: 2.5em;
    text-align: center;
    padding: 0 20px;
    max-width: 1000px;
    margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) { /*20200330*/
#hd .z490-more-audio .z490-title{
    font-size: 1.5em;
}
}
#hd .z490-more-audio .z490-intro{
    text-align: center;
    padding: 0 30px;
    max-width: 1000px;
    margin: 0 auto 20px auto;
}
#hd .z490-intro .note{
    font-style: 0.8em;
    color: #777;
}


#hd .ui-3d{
    position: relative;
    max-width: 1500px;
    min-height: 600px;
    margin: 60px auto 30px auto;
    overflow: hidden; /*20200330*/
}

#hd .ui-3d .ui-3d-inner{
    min-height: 520px;
}


#hd .ui-3d .box{
    position: absolute;
    left: calc(50% - 400px);
    top: 0;
    width: 800px;
    border: 1px solid #777;
    background: #333;
    background-image: linear-gradient(45deg, #000000 0%, #2f2f2f 100%);
    height: 500px;
    box-sizing: border-box;
    transform: translateX(0%) rotateY(0deg); 
    transition: all 0.5s;
    z-index: 2;
}

#hd .ui-3d #box1{
    1display: none;
}
#hd .ui-3d #box2{
    1display: none;
}
#hd .ui-3d #box3{
    1display: none;
}


#hd .ui-3d .leftbox{
    left: 0;
    111right: calc(50% + 410px);
    111transform: perspective(2000px) translateX(0) rotateY(-55deg); 
    transform: perspective(3000px) translateX(-57%) rotateY(-55deg); 
    transform-origin : right center;
    z-index: 0;
}
#hd .ui-3d .rightbox{
    111left: calc(50% + 410px);
    111transform: perspective(2000px) translateX(0%) rotateY(55deg); 
    transform: perspective(4000px) translateX(101%) rotateY(55deg); 
    transform-origin : left center;
    z-index: 1;
}


#hd .ui-3d .box .inner{
    display: flex;
    align-items: center;
    height: 100%;
}
#hd .ui-3d .box .inner .img{
    width: 60%;
    padding: 20px;
    box-sizing: border-box;
}
#hd .ui-3d .box .inner .text{
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
}
#hd .ui-3d .box .inner .text h4{
    font-family: 'Xolonium', sans-serif;
    text-transform: uppercase;
}
#hd .ui-3d .box .inner .text p{
    margin-bottom: 0;
}


#hd .ui-3d .control{
    text-align: center;
}
#hd .ui-3d .control a{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}
#hd .ui-3d .control a:hover{
    opacity: 0.7;
}
#hd .ui-3d .control a.right{
    transform: rotate(180deg);
}

#hd .ui-3d .control a:before{
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: #ec0000;
    position: absolute;
    left: 10px;
    top: 13px;
    transform: rotate(-45deg) translateX(0px) translateY(0px);
}
#hd .ui-3d .control a:after{
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: #ec0000;
    position: absolute;
    left: 10px;
    top: 26px;
    transform: rotate(45deg) translateX(0px) translateY(0px);
}

#hd .ui-3d .more{
    text-align: center;
    margin: 40px;
}
#hd .ui-3d .more a{
    display: inline-block;
    background: #fff;
    padding: 6px 15px;
    color: #000;
    transition: all 0.2s;
    text-transform: uppercase;
}
#hd .ui-3d .more a:hover{
    background: #ccc;
}

#hd .ui-3d .note{
    text-align: center;
    color: #777;
    padding: 0 25px;
    margin: 0 auto 100px auto;
    max-width: 1200px;
}


@media screen and (max-width: 1480px) {    
#hd .ui-3d .rightbox{
    margin-left: -20px;
}
}

@media screen and (max-width: 1350px) {    
#hd .ui-3d .rightbox{
    transform: perspective(4000px) translateX(101%) rotateY(55deg) scale(90%); 
}
}


@media screen and (max-width: 1023px) {    
#hd .ui-3d{
    min-height: auto;
}

#hd .ui-3d .ui-3d-inner{
    min-height: auto;
}


#hd .ui-3d .box{
    position: relative;
    left: auto;
    top: auto;
    width: 90%;
    height: auto;
    margin: 0 auto;
    transform: none !important;
    transition: all 0.3s;
}
#hd .ui-3d .leftbox{
    display: none;
}
#hd .ui-3d .rightbox{
    display: none;
}
#hd .ui-3d .box .inner .img{
    width: 40%;
    padding: 10px;
}
#hd .ui-3d .box .inner .text{
    width: 60%;
}
}


@media screen and (max-width: 768px) {    
#hd .ui-3d .box{
    min-height: 250px;
}
#hd .ui-3d .box .inner .text h4{
    font-size: 1em;
    margin-bottom: 5px;
}
#hd .ui-3d .box .inner .text p{
    font-size: 0.9em;
}
}


@media screen and (max-width: 450px) {    
#hd .ui-3d .box{
    width: 95%;
}
#hd .ui-3d .box .inner{
}
#hd .ui-3d .box .inner{
    display: block;
}
#hd .ui-3d .box .inner .img{
    width: 90%;
    margin: 0 auto;
}
#hd .ui-3d .box .inner .text{
    width: 100%;
    padding: 0 15px 15px 15px;
}
}











#hd .more-audio-target-2 .z490-title img{
    display: inline-block;
    vertical-align: text-bottom;
}
#hd .z490-more-audio .dts{
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto 50px auto;
    display: flex;
}
#hd .z490-more-audio .dts .entry{
    width: 33.33%;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;
}
#hd .z490-more-audio .dts .entry h4{
    font-family: 'Xolonium', sans-serif;
    text-transform: uppercase;
    color: #ff00ff;
    font-style: 1em;
}
#hd .z490-more-audio .dts .entry p{
    padding: 0 20px;
}

@media screen and (max-width: 767px) {    
#hd .z490-more-audio .dts{
    display: block;
}
#hd .z490-more-audio .dts .entry{
    width: 100%;
    margin-bottom: 30px;
}
#hd .z490-more-audio .dts .entry p{
    padding: 0;
}
}




/* more : armoury */
#hd .z490-more-armoury{
    margin-top: 100px;
    margin-bottom: 100px;
}
#hd .z490-more-armoury .z490-title{
    font-size: 2.5em;
    text-align: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) { /*20200330*/
#hd .z490-more-armoury .z490-title{
    font-size: 1.5em;
}
}
#hd .z490-more-armoury .z490-intro{
    text-align: center;
    padding: 0 30px;
    max-width: 1200px;
    margin: 0 auto 20px auto;
}

#hd .more-armoury-ui{
    display: flex;
    padding: 0 30px;
    max-width: 1200px;
    margin: 80px auto 0 auto;
    position: relative;
}
#hd .more-armoury-ui .list{
    width: 30%;
}
#hd .more-armoury-ui .list ul{
    margin: 0;
    padding: 0;
}
#hd .more-armoury-ui .list li{
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s;
}
#hd .more-armoury-ui .list li:hover{
    background: #0f1923;
}
#hd .more-armoury-ui .list li.active{
    background: #13202c;
    font-weight: bold;text-align: center;
}

#hd .more-armoury-ui .screenshot{
    width: 70%;
}
#hd .more-armoury-ui .screenshot .img{
    display: none;
}
#hd .more-armoury-ui .screenshot .img.active{
    display: block;
}

#hd .more-armoury-ui .screenshot .img img{
    display: block;
    max-width: 100%;
    border: 1px solid #555;
}


#hd .more-armoury-ui .download{
    position: absolute;
    left: 40px;
    bottom: 0;
}
#hd .more-armoury-ui .download a{
    display: block;
    padding: 8px 15px 8px 35px;
    color: #000;
    transition: all 0.2s;
    text-transform: uppercase;
    font-style: 0.9em;
    background: #fff url('../img/z490/more/arrow.png') 10px center no-repeat;
}
#hd .more-armoury-ui .download a:hover{
    background-color: #ccc;
    background-position: 10px 70%;
}


@media screen and (max-width: 767px) {    
#hd .more-armoury-ui{
    display: block;
    margin-top: 20px;
    position: relative;
    padding-bottom: 50px;
}
#hd .more-armoury-ui .list{
    width: 100%;
    padding-top: 70px;
    margin-bottom: 10px;
}
#hd .more-armoury-ui .screenshot{
    width: 100%;
}
#hd .more-armoury-ui .download{
    left: calc(50% - 60px);
    bottom: 0px;
    top: auto;
}
}




/* more : ramcache */
#hd .z490-more-ramcache{
    margin-top: 100px;
    margin-bottom: 100px;
}
#hd .z490-more-ramcache .z490-title{
    font-size: 2.5em;
    text-align: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto 20px auto;
}
@media screen and (max-width: 768px) { /*20200330*/
#hd .z490-more-ramcache .z490-title{
    font-size: 1.5em;
}
}
#hd .z490-more-ramcache .z490-intro{
    text-align: center;
    padding: 0 30px;
    max-width: 1200px;
    margin: 0 auto 20px auto;
}


#hd .z490-more-ramcache .inner{
    background: url('../img/z490/more/ramcache-bg.jpg') left top no-repeat;
    max-width: 1200px;
    margin: 0 auto;
}
#hd .z490-more-ramcache .inner:after{
    content: '';
    display: block;
    clear: both;
}
#hd .more-ramcache-ui{
    width: 500px;
    float: right;
    margin-right: 50px;
    margin-top: 50px;
}
#hd .more-ramcache-ui .list{
    width: 400px;
    margin: 0 auto;
}
#hd .more-ramcache-ui .list .entry{
    display: none;
}
#hd .more-ramcache-ui .list .entry.active{
    display: block;
}
#hd .more-ramcache-ui .list .entry p{
    margin-bottom: 10px;
    min-height: 3.5em;
}


#hd .more-ramcache-ui .control{
    position: relative;
}
#hd .more-ramcache-ui .control a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    position: absolute;
    top: 200px;
    cursor: pointer;
    transition: all 0.2s;
}
#hd .more-ramcache-ui .control a.left{
    left: 0;
}
#hd .more-ramcache-ui .control a.right{
    transform: rotate(180deg);
    right: 0;
}
#hd .more-ramcache-ui .control a:hover{
    opacity: 0.7;
}

#hd .more-ramcache-ui .control a:before{
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 10px;
    top: 13px;
    transform: rotate(-45deg) translateX(0px) translateY(0px);
}
#hd .more-ramcache-ui .control a:after{
    display: block;
    content: '';
    width: 20px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 10px;
    top: 26px;
    transform: rotate(45deg) translateX(0px) translateY(0px);
}

@media screen and (max-width: 767px) {    
#hd .more-ramcache-ui{
    float: none;
    margin:  50px auto 0 auto;
}
}

@media screen and (max-width: 600px) {    
#hd .z490-more-ramcache .inner{
    background: none;
}
#hd .more-ramcache-ui{
    width: 100%;
}
#hd .more-ramcache-ui .list{
    width: 80%;
}
}





/* more : control & optimization*/
#hd .z490-more-control{
    width: 100%;
    padding-top: 100px;
}
#hd .z490-more-control .z490-title{
    text-align: center;
    padding: 0 20px;
    font-size: 2.5em;
}
#hd .z490-more-control .z490-intro{
    text-align: center;
    padding: 0 20px;
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {    
#hd .z490-more-control .z490-title{
    font-size: 1.6em;
}
}


/*list-wrapper*/
#hd .z490-more-control .list-wrapper{
    max-width: 1300px;
    margin: 50px auto 100px auto;
    box-sizing: border-box;
    padding: 0 20px;
}
#hd .z490-more-control .list-wrapper .list{
    display: flex;
    margin-bottom: 50px;
    justify-content: center;
    align-items: stretch;
}
#hd .z490-more-control .more-control-2 .list-wrapper .list{
}
#hd .z490-more-control .list-wrapper .list > div{
    width: 20%;
    margin: 0 5px;
    font-size: 1em;
    font-family: 'Xolonium', sans-serif;
    background: #13202c;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    transition: all 0.2s;
    transform: skewX(-15deg);
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
#hd .z490-more-control .more-control-2 .list-wrapper .list > div{
    width: auto;
    min-width: 250px;
    font-size: 1.2em;
    padding: 10px;
}
#hd .z490-more-control .list-wrapper .list > div span{
    transform: skewX(15deg);
    display: block;
}
#hd .z490-more-control .list-wrapper .list > div:hover{
    background: #2b4359;
}
#hd .z490-more-control .list-wrapper .list > div.active{
    background: #fff;
    color: #000;
}


@media screen and (max-width: 1200px) {    
#hd .z490-more-control .list-wrapper .list > div{
    font-size: 0.9em;
}
}
@media screen and (max-width: 767px) {    
#hd .z490-more-control .list-wrapper .list > div{
    font-size: 0.8em;
}
}
@media screen and (max-width: 600px) {    
#hd .z490-more-control .list-wrapper .list{
    flex-wrap: wrap;
}
#hd .z490-more-control .list-wrapper .list > div{
    font-size: 0.8em;
    margin: 0 0 10px 0;
    width: 50%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .list > div{
    font-size: 0.9em;
    padding: 5px;
}
}

/*list content*/
#hd .z490-more-control .more-control-1 .list-wrapper .context .entry:not(.active){
    display: none;
}

#hd .z490-more-control .more-control-1 .list-wrapper .img{
    margin-bottom: 20px;
}
#hd .z490-more-control .more-control-1 .list-wrapper .text{
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
#hd .z490-more-control .more-control-1 .list-wrapper .text h4{
    color: #ff00ff;
    font-size: 1.4em;
    font-weight: normal;
    font-family: 'Xolonium', sans-serif;
    margin: 0 0 5px 0;
}
#hd .z490-more-control .more-control-1 .list-wrapper .text .caption{
    margin: 0;
}


#hd .z490-more-control .more-control-2 .list-wrapper .context .entry:not(.active){
    display: none;
}
#hd .z490-more-control .more-control-2 .list-wrapper .context .entry .mode-wrapper{
    display: flex;
    flex-wrap: wrap;
    background: #13202c;
    max-width: 1200px;
    margin: 0 auto;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-img{
    width: 45%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text{
    width: 55%;
    position: relative;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-img img{
    width: 100%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .brief{
    height: 100%;
    box-sizing: border-box;
    padding: 50px;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .brief .more-btn{
    background: #fff;
    color: #000;
    padding: 10px;
    font-size: 0.9em;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .brief .more-btn:hover{
    background: #ddd;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details{
    display: none;
    box-sizing: border-box;
    height: 27vw;
    max-height: 320px; /*20200330*/
    margin: 2.5vw 50px;
    overflow: hidden;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper{
    height: 100%;
    overflow-y: scroll; 
    padding-right: 10px;
    -webkit-overflow-scrolling: touch;
}


#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper::-webkit-scrollbar-track {
  background: #203243;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper::-webkit-scrollbar-thumb {
  background: #ff00ff;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #df00df;
}


#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper h4{
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    color: #ff00ff;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details-content-wrapper p{
    margin: 0 0 15px 0;
}


#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details .close-btn{
    background: url('../img/z490/more/close.png') center no-repeat;
    width: 21px;
    height: 21px;
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    transition: all 0.4s;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details .close-btn:hover{
    transform: rotate(90deg);
}

@media screen and (max-width: 1100px) {    
#hd .z490-more-control .more-control-2 .list-wrapper .mode-img{
    width: 50%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text{
    width: 50%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .brief{
    padding: 20px;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .brief .more-btn{
    padding: 5px 10px;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details{
    height: 30vw;
    margin: 2.5vw 50px 2.5vw 50px;
}
}


@media screen and (max-width: 900px) {    
#hd .z490-more-control .more-control-2 .list-wrapper .mode-img{
    width: 100%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text{
    width: 100%;
}
#hd .z490-more-control .more-control-2 .list-wrapper .mode-text .details{
    display: none;
    height: 50vw;
    box-sizing: border-box;
    margin: 2.5vw 50px;
    overflow: hidden;
}
}



/* gallery */
#hd #z490-gallery .album{
    display: flex;
    flex-wrap: wrap;
}
#hd #z490-gallery .album .img{
    width: 33.33%;
}
#hd #z490-gallery .album .img img{
    width: 100%;
    display: block;
}
@media screen and (max-width: 1024px) {    
#hd #z490-gallery .album .img{
    width: 50%;
}
}
@media screen and (max-width: 450px) {    
#hd #z490-gallery .album .img{
    width: 100%;
}
}