@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic);

/*!
 *
 * Strix Pro Main CSS Framework  
 * @author oldface
 * @version 2014-05-17 00:14:05 +0800
 *
 *
 *
 *
 *
 * 
 * !!!!!!!!!!!!!!!!!!!!!  DO NOT TOUCH  !!!!!!!!!!!!!!!!!!!!!
 * 
 * 禁止修改，以利原始檔案維護！
 * 
 * 可利用 HTML <style></style>、
 * 或 inline (style="")、
 * 或 擴充CSS檔，
 * 進行樣式繼承、覆寫
 * 
 * !!!!!!!!!!!!!!!!!!!!!  DO NOT TOUCH  !!!!!!!!!!!!!!!!!!!!!
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 *
 * #overview-top-nav .page-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
 */

.m-wrap div,
.m-wrap span,
.m-wrap applet,
.m-wrap object,
.m-wrap iframe,
.m-wrap h1,
.m-wrap h2,
.m-wrap h3,
.m-wrap h4,
.m-wrap h5,
.m-wrap h6,
.m-wrap p,
.m-wrap blockquote,
.m-wrap pre,
.m-wrap a,
.m-wrap abbr,
.m-wrap acronym,
.m-wrap address,
.m-wrap big,
.m-wrap cite,
.m-wrap code,
.m-wrap del,
.m-wrap dfn,
.m-wrap em,
.m-wrap img,
.m-wrap ins,
.m-wrap kbd,
.m-wrap q,
.m-wrap s,
.m-wrap samp,
.m-wrap small,
.m-wrap strike,
.m-wrap strong,
.m-wrap sub,
.m-wrap sup,
.m-wrap tt,
.m-wrap var,
.m-wrap b,
.m-wrap u,
.m-wrap i,
.m-wrap center,
.m-wrap dl,
.m-wrap dt,
.m-wrap dd,
.m-wrap ol,
.m-wrap ul,
.m-wrap li,
.m-wrap fieldset,
.m-wrap form,
.m-wrap label,
.m-wrap legend,
.m-wrap table,
.m-wrap caption,
.m-wrap tbody,
.m-wrap tfoot,
.m-wrap thead,
.m-wrap tr,
.m-wrap th,
.m-wrap td,
.m-wrap article,
.m-wrap aside,
.m-wrap canvas,
.m-wrap details,
.m-wrap embed,
.m-wrap figure,
.m-wrap figcaption,
.m-wrap footer,
.m-wrap header,
.m-wrap hgroup,
.m-wrap menu,
.m-wrap nav,
.m-wrap output,
.m-wrap ruby,
.m-wrap section,
.m-wrap summary,
.m-wrap time,
.m-wrap mark,
.m-wrap audio,
.m-wrap video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

.m-wrap table {
    border-collapse: collapse;
    border-spacing: 0
}

.m-wrap caption,
.m-wrap th,
.m-wrap td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

.m-wrap q,
.m-wrap blockquote {
    quotes: none
}

.m-wrap q:before,
.m-wrap q:after,
.m-wrap blockquote:before,
.m-wrap blockquote:after {
    content: "";
    content: none
}

.m-wrap a img {
    border: none
}

.m-wrap img {
    image-rendering: optimizeQuality;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic
}

.m-wrap a {
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    -webkit-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -o-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out
}

.m-wrap p {
    margin: 0 0 1em;
    padding: 0
}

.m-wrap p:last-child {
    margin-bottom: 0
}

.m-wrap b {
    font-weight: normal
}

.m-wrap small {
    font-size: inherit
}

.m-wrap h1 img,
.m-wrap h2 img,
.m-wrap h3 img,
.m-wrap h4 img,
.m-wrap h5 img,
.m-wrap h6 img {
    margin: 0;
    vertical-align: bottom
}

.m-wrap blockquote {
    margin: 0;
    padding: 0;
    border: none
}

.m-wrap ul,
.m-wrap ol {
    list-style: none;
    display: block
}

.m-wrap {
    line-height: 1.41176;
    font-family: "Roboto", "STHeiti Light", STXihei, STHeiti, "Apple LiGothic Medium", \5FAE\8EDF\6B63\9ED1\9AD4, "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #fff
}

.m-wrap a:hover {
    color: inherit;
    text-decoration: none
}

.m-wrap small.ps {
    display: block;
    margin-top: 1em
}

.m-wrap .ps {
    font-size: 12px
}

@-moz-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

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

@-o-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-ms-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

br.mclear {
    display: block;
    width: 1px;
    margin-left: -1px;
    clear: both
}

br.mclear:after {
    content: " ";
    visibility: hidden;
    display: block;
    font-size: 0;
    clear: both;
    height: 0
}

* html br.mclear {
    zoom: 1
}

*:first-child+html br.mclear {
    zoom: 1
}

@font-face {
    font-family: 'octincollege-bold';
    src: url("../libs/font/octin-college-rg-bold.eot");
    src: url("../libs/font/octin-college-rg-bold.eot?#iefix") format("embedded-opentype"), url("../libs/font/octin-college-rg-bold.woff") format("woff"), url("../libs/font/octin-college-rg-bold.ttf") format("truetype"), url("../libs/font/octin-college-rg-bold.svg#octin_collegebold") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'rationalinteger';
    src: url("../libs/font/rationalinteger.eot");
    src: url("../libs/font/rationalinteger.eot?#iefix") format("embedded-opentype"), url("../libs/font/rationalinteger.woff") format("woff"), url("../libs/font/rationalinteger.ttf") format("truetype"), url("../libs/font/rationalinteger.svg#rational_integerregular") format("svg");
    font-weight: normal;
    font-style: normal
}

.m-wrap {
    font-weight: 300
}

.m-wrap .zection-title-x {
    display: block;
    line-height: 0.80233;
    font-size: 5.375em;
    font-family: "octincollege-bold", Impact, "Roboto"
}

.m-wrap .zection-title-x strong {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: baseline;
    padding-left: .1em;
    padding-right: .1em;
    background: #ff8400
}

.m-wrap .zection-title-b {
    display: block;
    line-height: 1.1;
    font-size: 1.625em;
    font-family: "Roboto"
}

.m-wrap .zection-title-x+.zection-title-b {
    margin-top: 0.33333em
}

.m-wrap .zection-descr {
    font-size: 1.0625em;
    font-weight: 300
}

.m-wrap .zection-title-x+.zection-descr,
.m-wrap .zection-title-b+.zection-descr,
.m-wrap .zection-title-s+.zection-descr {
    margin-top: 1.47059em
}

.m-wrap .ps {
    color: #d0cece
}

@media (max-width: 48em) {
    .m-wrap {
        font-size: 18px
    }
    .m-wrap .zection-title-x {
        font-size: 3em
    }
    .m-wrap .zection-title-b {
        font-size: 1.8em
    }
}

@media (max-width: 48em) {
    .m-wrap .zection-text .zection-title-x br {
        display: none
    }
    .m-wrap .zection-title-x strong {
        display: inline;
        background: transparent;
        padding: 0;
        color: #ff8400
    }
}

#videoplayer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 199999;
    width: 100%;
    height: 100%;
    background: black;
    background: rgba(0, 0, 0, 0.6)
}

#videoplayer iframe.player {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    background: black
}

#videoplayer .close {
    position: absolute;
    right: 15px;
    top: 15px;
    float: left;
    z-index: 2;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: url("../../img/ui/videoplayer-close.png") no-repeat;
    cursor: pointer;
    opacity: .6;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s
}

#videoplayer .close:hover {
    opacity: 1
}

html #main-zone {
    overflow: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important
}

html #asus-api-header {
    position: relative !important
}

html #overview #special-sectionOverview,
html #overview #sectionOverview {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    float: none !important
}

// html #overview #special-sectionOverview img,
// html #overview #sectionOverview img {
//     max-width: none !important
// }

@media (max-width: 959px) {
    .m-wrap img {
        max-width: none !important
    }
}

#product_content_area p {
    margin: 0
}

#sectionOverview p,
#special-sectionOverview p {
    margin-bottom: 1em
}

#overview #sectionOverview {
    line-height: inherit
}

.m-nav {
    position: relative;
    z-index: 10101010101;
    top: auto;
    width: 100%;
    height: 55px;
    background: #484848;
    background: rgba(72, 72, 72, 0.85);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 0;
    white-space: nowrap;
    text-align: center
}

.m-nav .m-logo {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: baseline;
    vertical-align: top;
    width: 250px
}

.m-nav .m-logo img {
    display: block;
    margin-top: 13px
}

.m-nav ul {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: baseline;
    vertical-align: top;
    font-size: 0;
    overflow: hidden;
    *zoom: 1;
    border-left: 1px solid #ddd
}

.m-nav ul li {
    font-size: 16px
}

.m-nav ul li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    white-space: normal
}

.m-nav li {
    border-right: 1px solid #ddd;
    color: #fff;
    text-align: center
}

.m-nav li a {
    display: block;
    padding: 0 40px;
    background-color: transparent;
    font: 18px/55px "octincollege-bold", Impact, "Roboto";
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s
}

.m-nav li.on a,
.m-nav li a:active,
.m-nav li a:hover {
    background-color: #111
}

.m-nav.fixed {
    position: fixed;
    top: 0;
    height: 36px
}

.m-nav.fixed a {
    line-height: 36px
}

.m-nav.fixed li.on i {
    height: 2px
}

@media (max-width: 1000px) {
    .m-nav li a {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width: 60em) {
    .m-nav .m-logo {
        display: none
    }
    .m-nav ul {
        text-align: left
    }
}

@media (max-width: 53.125em) {
    .m-nav li a {
        padding-left: 14px;
        padding-right: 14px
    }
}

#mininav {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 64px
}

#mininav .bar {
    position: relative;
    z-index: 2;
    height: 100%;
    background: #666;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5)
}

#mininav .toggle {
    position: absolute;
    right: 0;
    top: 0;
    float: left;
    width: 64px;
    height: 100%;
    overflow: hidden;
    background: #555 url("../../img/ui/mininav-toggle.png") no-repeat 50% 50%;
    cursor: pointer
}

#mininav .toggle:hover,
#mininav .toggle:active {
    background-color: #444
}

#mininav .menu {
    display: none;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%
}

#mininav .menu ul {
    padding: 0;
    margin: 0;
    list-style: none
}

#mininav .menu li {
    padding: 0;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #333
}

#mininav .menu li a {
    display: block;
    height: 100%;
    padding: 0.66667em;
    background: #777;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #777777), color-stop(100%, #666666));
    background-image: -webkit-linear-gradient(top, #777777, #666666);
    background-image: -moz-linear-gradient(top, #777777, #666666);
    background-image: -o-linear-gradient(top, #777777, #666666);
    background-image: linear-gradient(top, #777777, #666666);
    color: #fff;
    text-shadow: 0 1px 0 #333;
    font-size: 30px;
    font-weight: 400;
    font-family: "octincollege-bold", Impact, "Roboto";
    line-height: 1.1
}

#mininav .menu li a:hover,
#mininav .menu li a:active {
    background: #555
}

#mininav.open .menu {
    -webkit-animation: mininavShowMenu 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-animation: mininavShowMenu 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-animation: mininavShowMenu 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation: mininavShowMenu 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: mininavShowMenu 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#mininav.fixed {
    position: fixed;
    top: 0;
    right: 0
}

#mininav.fixed .bar {
    position: absolute;
    right: 0;
    top: 0;
    float: left;
    width: 64px;
    opacity: .7
}

#mininav.fixed.open .bar {
    position: relative;
    width: 100%;
    opacity: 1
}

@-moz-keyframes mininavShowMenu {
    0% {
        opacity: 0;
        -moz-transform: translateY(-10%);
        transform: translateY(-10%)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@-webkit-keyframes mininavShowMenu {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@-o-keyframes mininavShowMenu {
    0% {
        opacity: 0;
        -o-transform: translateY(-10%);
        transform: translateY(-10%)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@-ms-keyframes mininavShowMenu {
    0% {
        opacity: 0;
        -ms-transform: translateY(-10%);
        transform: translateY(-10%)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0%);
        transform: translateY(0%)
    }
}

@keyframes mininavShowMenu {
    0% {
        opacity: 0;
        transform: translateY(-10%)
    }
    100% {
        opacity: 1;
        transform: translateY(0%)
    }
}

#backtop {
    display: none;
    position: fixed;
    z-index: 99999;
    right: 10px;
    bottom: 50px;
    display: block;
    float: left;
    width: 54px;
    height: 54px;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    background-repeat: no-repeat;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 0.8);
    background-image: url("../../img/ui/backtop.png");
    background-repeat: no-repeat;
    -webkit-transition: all 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation: fadein 0.5s;
    -moz-animation: fadein 0.5s;
    -ms-animation: fadein 0.5s;
    -o-animation: fadein 0.5s;
    animation: fadein 0.5s;
    cursor: pointer
}

#backtop>br,
#backtop br {
    display: none
}

.no-rgba #backtop {
    background-color: #111
}

#backtop:hover,
#backtop.pressed {
    background-color: black;
    border-color: #ddd;
    box-shadow: 0 0 10px #eee
}

.m-wrap .zection {
    position: relative
}

.m-wrap .zection-inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4.375em 0
}

.m-wrap .zection-text {
    position: relative;
    z-index: 3
}

.m-wrap .zection-display {
    z-index: 2
}

.m-wrap .zection-display img {
    display: block
}

.m-wrap .zection-display .base {
    z-index: 1
}

.m-wrap .zection-imgbg {
    position: absolute;
    left: 50%;
    top: 0;
    float: left;
    z-index: 1;
    width: 100%;
    margin-left: -50%
}

.m-wrap .zection-imgbg img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto
}

@media (max-width: 48em) {
    html #main-zone .m-wrap .zection-text {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0
    }
    html #main-zone .m-wrap .zection-display {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        float: none;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto
    }
    html #main-zone .m-wrap .zection-display .base {
        margin-bottom: 1em
    }
    html #main-zone .m-wrap .zection-display .base img,
    html #main-zone .m-wrap .zection-display .screenshot img {
        width: 100%;
        height: auto
    }
    .m-wrap .zection-inner {
        padding-top: 2.5em;
        padding-bottom: 2.5em
    }
}

#platform .computers,
#platform .others,
#in-the-scene .zection-text {
    display: inline;
    float: left;
    position: relative;
    margin-left: 1%;
    margin-right: 1%
}

#platform .computers,
#platform .others {
    width: 48.0%
}

#in-the-scene .zection-text {
    width: 56.333%
}

#overview-top-nav {
    background: white
}

html,
body {
    overflow-x: hidden
}

#strixpro-wrap {
    position: relative !important;
    margin: 0 auto;
    background: #111
}

#strixpro-content {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-left: auto !important;
    margin-right: auto !important;
    -webkit-animation: fadein 0.4s ease;
    -moz-animation: fadein 0.4s ease;
    -ms-animation: fadein 0.4s ease;
    -o-animation: fadein 0.4s ease;
    animation: fadein 0.4s ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

#strixpro-content:after {
    content: " ";
    visibility: hidden;
    display: block;
    font-size: 0;
    clear: both;
    height: 0
}

* html #strixpro-content {
    zoom: 1
}

*:first-child+html #strixpro-content {
    zoom: 1
}

.zection {
    background: #000 url("../../img/hp/bg.jpg") 50% 0 repeat-y
}

.m-wrap .zection-text .line {
    width: 166px;
    height: 3px;
    overflow: hidden;
    background: #ff8400;
    margin: 2em auto
}

@media (max-width: 48em) {
    html #main-zone .m-wrap .zection-descr {
        width: 100%
    }
    html #main-zone .m-wrap .zection-text {
        text-align: center
    }
    html #main-zone .m-wrap .zection-text .line {
        margin-left: auto;
        margin-right: auto
    }
}

#preface {
    overflow: hidden;
    background-image: url("../../img/hp/bg-preface.jpg")
}

.zection-inner {
    -webkit-transition: all 0.12s ease-out;
    -moz-transition: all 0.12s ease-out;
    -o-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out
}

#gaming-instincts {
    padding-top: 12.5em;
    padding-bottom: 8.75em
}

#gaming-instincts .logo {
    position: relative;
    z-index: 3;
    width: 86%;
    margin-left: auto;
    margin-right: auto
}

#gaming-instincts .logo img {
    display: block;
    width: 100%
}

#gaming-instincts .zection-text {
    width: 81.30081%;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

#gaming-instincts .zection-descr {
    padding-left: 1.25em;
    padding-right: 1.25em
}

#gaming-instincts .zection-title-x {
    font-size: 2.8125em;
    line-height: 1
}

#gaming-instincts .zection-display .headset {
    position: absolute;
    left: 50%;
    top: -6.25em;
    float: left;
    z-index: 2;
    margin-left: 23%;
    -webkit-transition: all 0.12s ease-out;
    -moz-transition: all 0.12s ease-out;
    -o-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out
}

#gaming-instincts .zection-display .controlbox {
    position: absolute;
    left: 50%;
    top: 18.75em;
    float: left;
    z-index: 1;
    margin-left: -66%;
    -webkit-transition: all 0.12s ease-out;
    -moz-transition: all 0.12s ease-out;
    -o-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out
}

@media (max-width: 48em) {
    #gaming-instincts {
        padding-top: 4.375em;
        padding-bottom: 0em
    }
    #gaming-instincts .zection-descr {
        padding-left: 0;
        padding-right: 0
    }
    #gaming-instincts .zection-display .headset,
    #gaming-instincts .zection-display .controlbox {
        float: none;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto
    }
    #gaming-instincts .zection-display .headset img,
    #gaming-instincts .zection-display .controlbox img {
        width: 100%;
        height: auto
    }
    #gaming-instincts .zection-display .headset {
        width: 94%;
        margin-left: auto;
        margin-right: -10%
    }
    #gaming-instincts .zection-display .controlbox {
        width: 86%;
        margin-top: -45%;
        margin-left: auto;
        margin-right: 40%
    }
}

#sharpen-hearing {
    padding-top: 8.75em
}

#sharpen-hearing .zection-text {
    text-align: center
}

#sharpen-hearing .zection-descr {
    width: 81.30081%;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 48em) {
    #sharpen-hearing {
        padding-top: 0
    }
}

#highlights {
    overflow: hidden
}

#highlights .item {
    position: relative;
    overflow: hidden
}

#highlights .item .pic {
    position: relative;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.15s ease-out;
    -moz-transition: -moz-transform 0.15s ease-out;
    -o-transition: -o-transform 0.15s ease-out;
    transition: transform 0.15s ease-out
}

#highlights .item .pic img {
    display: block;
    width: 100%;
    height: auto
}

#highlights .item .title {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    z-index: 2;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em
}

#highlights .item .title .t {
    display: block;
    margin-bottom: 0.22222em;
    font-size: 2.25em;
    line-height: 0.83333;
    font-family: 'rationalinteger', sans-serif;
    color: #ff8400
}

#highlights .item .title .d {
    font-size: 1.25em;
    line-height: 1.1
}

#highlights .item:hover .pic {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

#highlights .main {
    float: left;
    width: 50%;
    overflow: hidden;
    position: relative
}

#highlights .main .play {
    width: 92px;
    height: 92px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -46px;
    margin-top: -46px;
    z-index: 2;
    width: 92px;
    height: 92px;
    background: url("../../img/ui/icn-play.png")
}

#highlights .main .item:hover .play {
    opacity: .8
}

#highlights .sub {
    float: left;
    width: 50%;
    overflow: hidden
}

#highlights .sub .item {
    width: 50%;
    float: left
}

@media (max-width: 60em) {
    #highlights .item .title .t {
        font-size: 1.5em
    }
    #highlights .item .title .d {
        font-size: 0.9375em
    }
}

@media (max-width: 48em) {
    #highlights .item .title .t {
        font-size: 1.75em
    }
    #highlights .item .title .d {
        font-size: 1.125em
    }
    #highlights .main,
    #highlights .sub {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }
}

@media (max-width: 30em) {
    #highlights .sub .item {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }
}

#in-the-scene {
    background-position: 50% 100%
}

#in-the-scene .zection-inner {
    padding-top: 8.75em;
    padding-bottom: 12.5em
}

#in-the-scene .zection-inner:before,
#in-the-scene .zection-inner:after {
    content: "";
    display: table
}

#in-the-scene .zection-inner:after {
    clear: both
}

#in-the-scene .zection-inner {
    zoom: 1
}

#in-the-scene .zection-text .line {
    margin-left: 0
}

#in-the-scene .zection-descr {
    width: 85.19856%
}

#in-the-scene .zection-display {
    position: absolute;
    right: -3.75em;
    top: 5em;
    float: left
}

@media (max-width: 48em) {
    #in-the-scene .zection-inner {
        padding-top: 4.375em;
        padding-bottom: 0
    }
    #in-the-scene .zection-display {
        margin-bottom: -12.5em
    }
    #in-the-scene .zection-display img {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto
    }
}

#clarity {
    background-position: 50% -120px
}

#clarity .zection-text {
    margin-left: auto;
    margin-right: auto;
    margin-top: -11.875em;
    text-align: center
}

#clarity .zection-descr {
    width: 64.63415%;
    margin-left: auto;
    margin-right: auto
}

#clarity .controlbox {
    position: relative;
    min-height: 577px;
    margin-left: auto;
    margin-right: auto
}

#clarity .controlbox .base {
    position: absolute;
    left: 50%;
    bottom: 0;
    float: left;
    z-index: 1;
    margin-left: -535px
}

#clarity .controlbox .point {
    position: absolute;
    left: 50%;
    top: 235px;
    float: left;
    z-index: 2;
    margin-left: -60px;
    width: 362px;
    height: 82px;
    background: url("../../img/hp/clarity-controlbox-point-1.png") no-repeat
}

#clarity .controlbox .point span {
    display: block;
    width: 200px;
    padding-top: 8px;
    padding-left: 165px;
    line-height: 1.3;
    color: #ff8400
}

@media (max-width: 48em) {
    #clarity .zection-inner {
        padding-top: 0
    }
    #clarity .zection-text {
        margin-top: -6.25em
    }
    #clarity .controlbox {
        min-height: inherit
    }
    #clarity .controlbox .base {
        float: none;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        width: 100%;
        height: auto;
        width: 150%;
        margin-left: -25%;
        margin-right: auto
    }
    #clarity .controlbox .point {
        top: 62%;
        background: url("../../img/hp/clarity-controlbox-point-1-m.png") no-repeat;
        margin-left: -14%
    }
    #clarity .controlbox .point span {
        margin-left: 40px;
        margin-top: 30px;
        padding: 5px;
        background: rgba(0, 0, 0, 0.5)
    }
}

#platform .zection-inner {
    padding-top: 5.625em
}

#platform .zection-inner:before,
#platform .zection-inner:after {
    content: "";
    display: table
}

#platform .zection-inner:after {
    clear: both
}

#platform .zection-inner {
    zoom: 1
}

#platform .zection-text:before,
#platform .zection-text:after {
    content: "";
    display: table
}

#platform .zection-text:after {
    clear: both
}

#platform .zection-text {
    zoom: 1
}

#platform .zection-text .line {
    margin-left: 0
}

#platform .platform-title {
    margin-bottom: 0.90909em;
    font-size: 1.5em;
    font-weight: 400;
    color: #ff8400
}

#platform .platform-icon {
    margin-bottom: 0.625em
}

#platform .computers .zection-descr {
    margin-right: 13.13559%
}

#platform .zection-display {
    position: absolute;
    right: 0;
    top: 0;
    float: left;
    overflow: hidden
}

#platform .zection-display .headset {
    margin-top: -10.625em
}

@media (max-width: 60em) {
    #platform .platform-icon img {
        width: 100%;
        height: auto
    }
}

@media (max-width: 48em) {
    #platform .zection-inner {
        padding-top: 0
    }
    #platform .computers,
    #platform .others {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0
    }
    #platform .zection-display .headset {
        max-width: 31.25em;
        margin: 1.25em auto 3.125em
    }
    #platform .zection-display .headset img {
        width: 100%;
        height: auto
    }
}

@media (max-width: 30em) {
    #platform .computers,
    #platform .others {
        display: block;
        width: 95%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0
    }
}

#foldable .zection-inner {
    padding-top: 0
}

#foldable .zection-text {
    text-align: center
}

#foldable .zection-text .ps {
    margin-top: 7.5em;
    text-align: left
}

#foldable .zection-descr {
    width: 64.63415%;
    margin-left: auto;
    margin-right: auto
}

#foldable .zection-display img {
    width: 100%;
    height: auto
}

@media (max-width: 30em) {
    #foldable .headset {
        max-width: 31.25em
    }
    #foldable .headset img {
        width: 100%;
        height: auto
    }
}