@charset 'utf-8';
@font-face {
	font-family: 'Trade';
	src: url('../fonts/Trade-Gothic-LT-Bold.ttf') format("truetype");
	font-weight: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-Regular.ttf') format("truetype");
	font-weight: normal;
}
@font-face {
	font-family: "rogfonts-regular";
	src:url('../fonts/rogfonts-regular.otf'),
		url('../fonts/rogfonts-regular.otf') format('embedded-opentype'),
		url("../fonts/rogfontsv16-regular.ttf") format("opentype"),
		url("../fonts/rogfontsv16-regular.eot");
	font-weight: normal;
	font-style: normal; 
}

/*-----scrollbar-----*/
/*
*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #1f1f1f;
}
*::-webkit-scrollbar {
  width: 10px;
  background-color:#555;
}
*::-webkit-scrollbar-thumb {
  background-color: #555;
}

::selection {
    background: #02ffff;
    color: #000000;
}
::-moz-selection {
    background: #02ffff;
    color: #000000;
}
*/


/*-----SCROLL UP-----*/
#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 #899fb4;
    z-index: 999;
    opacity: 0;
}
#scrollUp.hd-show {
    opacity: 1;
}
#scrollUp:hover {
    background-color: #899fb4;
}
#scrollUp:hover svg {
    fill: #FFF;
}
#scrollUp svg {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 5px;
    left: 0;
    fill: #899fb4;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
}


/*-----general-----*/
.section__pd{
	min-height: 250px; /*set min-height for CLS performance*/
}

/*-----general-----*/
body{
	margin: 0;
	padding: 0;
	background-color: #000;
}
body.noscroll{
	overflow: hidden;
}
.g16-wrapper {
	margin: 0;
	padding:0;
	background-color: #000;
	color: #fff;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}
/*
::selection {
	background: #1d2124;
	color: #CE0000;
}
::-moz-selection {
	background: #1d2124;
	color: #ffffff;
}
*/
.g16-wrapper * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
	word-break: break-word;
}
.g16-wrapper img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
.g16-wrapper a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
}
.g16-wrapper a:hover {
	text-decoration: none;
}
.g16-wrapper ul {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
	list-style: none;
}
.g16-wrapper p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	color: #FFF;
}
.g16-wrapper .g16-p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8em;
	margin: 0;
	padding-bottom: 40px;
	color: #FFF;
}
@media screen and (max-width: 500px) {    
.g16-wrapper .g16-p {
	font-size: 14px;
	line-height: 1.4em;
	padding-bottom: 20px;
}
}
.g16-wrapper .note {
	color: #999;
}




.g16-wrapper .btn-more{
	text-align: center;
	margin: 30px 0 30px 0;
}
.g16-wrapper .btn-more a{
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	height: 50px;
	margin: 0 10px;
}
.g16-wrapper .btn-more a span{
	background: #000;
	border: 1px solid #bf0305;
	padding: 15px 30px;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	color: #bf0305;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1.2em;
	display: inline-block;
    transition: all 0.2s;
}
.g16-wrapper .btn-more a:hover span{
	background-color: #bf0305;
	color: #fff;
}
.g16-wrapper .btn-more a.extend span{
	padding: 6px 15px;
}
@media screen and (max-width: 500px) {    
.g16-wrapper .btn-more{
	margin-bottom: 30px;
}
.g16-wrapper .btn-more a span{
	font-size: 14px;
}
.g16-wrapper .btn-more a.extend{
	margin-bottom: 20px;
}
}


.g16-wrapper .g16-title {
	text-transform: uppercase;
	font-family: 'Trade', 'Impact', sans-serif;
	font-weight: normal;
	font-size: 3em;
	line-height: 1.2em;
	margin: 0 0 0.5em 0;
	color:#fff !important;
}
@media screen and (max-width: 1280px) {    
.g16-wrapper .g16-title {
	font-size: 2em;
}
}

.g16-wrapper .cover{
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
}
@media screen and (max-width: 2300px) {    
.g16-wrapper .cover{
	max-width: 1700px;
}
}
@media screen and (max-width: 2100px) {    
.g16-wrapper .cover{
	max-width: 1500px;
}
}
@media screen and (max-width: 1900px) {    
.g16-wrapper .cover{
	max-width: 1300px;
}
}

.g16-wrapper .feature-pack{
	display: flex;
    align-items: center;
	justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}
.g16-wrapper .feature-pack.side{
    text-align: left;
    justify-content: flex-start;
    margin-left: -15px;
}
.g16-wrapper .feature-pack .item{
    margin: 0 15px 40px 15px;
}
.g16-wrapper .feature-pack .center-word{
	font-family: 'Trade', 'Impact', sans-serif;
	font-weight: normal;
	font-size: 38px;
	line-height: 1.3em;
	white-space: nowrap;
	color: #ff98ea;
	background: linear-gradient(to right, #4e9efd 20%, #c56ff2 80%);
	background-size: auto;
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.g16-wrapper .feature-pack .top-word{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 1.2em;
	letter-spacing: 2px;
}
.g16-wrapper .feature-pack .bottom-word{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 1.2em;
	letter-spacing: 2px;
}
.g16-wrapper .feature-pack .center-word sup{
	position: absolute;
}
@media screen and (max-width: 1400px) {    
.g16-wrapper .feature-pack .center-word{
	font-size: 24px;
}
.g16-wrapper .feature-pack .top-word{
	font-size: 12px;
	letter-spacing: 1px;
}
.g16-wrapper .feature-pack .bottom-word{
	font-size: 12px;
	letter-spacing: 1px;
}
}
@media screen and (max-width: 768px) {    
.g16-wrapper .feature-pack .item{
    margin: 0 25px 40px 25px;
}
}
@media screen and (max-width: 650px) {    
.g16-wrapper .feature-pack.side{
    margin-left: -10px;
}
.g16-wrapper .feature-pack .item{
    margin: 0 10px 30px 10px;
}
.g16-wrapper .feature-pack .center-word{
}
}
@media screen and (max-width: 500px) {    
.g16-wrapper .feature-pack{
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: -10px;
}
.g16-wrapper .g16-pop .feature-pack{
    margin-left: 10px;
}
}




.side-decor {
	background: url(../img/general/decor-side.png) center top no-repeat;
	width: 30px;
	height: 90vh;
	background-size: auto 100%;
	position: fixed;
	left: 2vw;
	bottom: 5vh;
	z-index: 2;
}
@media screen and (min-height: 1500px) {    
.side-decor {
	width: 25px;
	height: 1210px;
}
}
@media screen and (max-width: 1350px) {    
.side-decor {
	display: none;
}
}




/*sidenav*/

.sidenav-wrapper {
    /*display: none;*/
}
.sidenav-wrapper.active {
    display: block;
}
#sidenav {
    height: 100vh;
    position: fixed;
    right: 20px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    text-align: right;
}
#sidenav > .main-nav{
    position: relative;
}
#sidenav > .main-nav:before{
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: calc(100% + 50px);
    right: 17px;
    top: -50px;
    background: #555;
    z-index: 0;
}
#sidenav > .main-nav:after{
    content: '';
    display: block;
    position: absolute;
    width: 50px;
    height: 100px;
    right: -7px;
    bottom: -120px;
    background: url(../img/general/side-decor.png) center top no-repeat;
    background-size: 100% auto;
}
#sidenav > .main-nav > li{
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
#sidenav > .main-nav > li > button{
    color: #777;
    border: 0;
	font-family: 'Roboto', sans-serif;
    font-size: 1em;
    line-height: 1em;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 5px 35px 5px 0;
    transition: all 0.3s;
}
#sidenav > .main-nav > li.active > button{
    padding-right: 50px;
    color: #05fffa;
}
#sidenav > .main-nav > li > button:after{
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    right: 13px;
    top: 10px;
    background-color: #555;
    background-size: cover;
}
#sidenav > .main-nav > li.active > button:after{
    width: 40px;
    height: 40px;
    right: -2px;
    top: -5px;
    background-image: url(../img/general/side-square.png);
    background-color: transparent;
}

#sidenav .sub-nav button{
    color: #ff9e1b;
    border: 0;
    font-size: 1em;
    line-height: 1em;
    background: transparent;
    cursor: pointer;
    font-family: "DINPro", "Roboto", "Arial", sans-serif;
    position: relative;
    padding-right: 30px;
    padding-bottom: 5px;
}
#sidenav .sub-nav button span{
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}
#sidenav .sub-nav button.active span{
    /*border-color: #fff;*//*20220922*/
}
#sidenav .sub-nav button:hover span{/*20220922*/
    border-color: #fff;
}
#sidenav .sub-nav button:after{
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    position: absolute;
    right: 8px;
    top: 5px;
    background: #fff;
}
#sidenav > .main-nav > li .sub-nav{
    display: none;
}
#sidenav > .main-nav > li.active .sub-nav{
    display: block;
}


@media screen and (max-width: 1700px) {
#sidenav{
    right: 5px;
}
#sidenav > .main-nav > li > button span{
    opacity: 0;
    transition: opacity 0.3s;
}
#sidenav .sub-nav button span{
    opacity: 0;
    transition: opacity 0.3s;
}
#sidenav > .main-nav:hover > li > button span{
    opacity: 1;
}
#sidenav > .main-nav:hover .sub-nav button span{
    opacity: 1;
}
/*
#sidenav .sub-nav button:hover span{
    opacity: 1;
}
*/
#sidenav .sub-nav button{
    padding-right: 20px;
}
}
@media screen and (max-width: 1280px) {    
.sidenav-wrapper {
    display: none;
}
}





/*-------ROG STRIX G16 sections start-------*/


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

.g16-kv{
}
.g16-kv .main-image{
	margin-top: -6%;
	min-height: 50vw; /*set min-height for CLS performance*/
}
.g16-kv .main-image img{
	width: 100%;
}
.g16-kv .inner{
	max-width: 1300px;
	margin: 0 auto 50px auto;
	padding: 0 30px;
	text-align: center;
	box-sizing: border-box;
	min-height: 620px; /*set min-height for CLS performance*/
}
.g16-kv .text{
}
.g16-kv h2{
	text-transform: uppercase;
	font-family: 'rogfonts-regular', sans-serif;
	font-weight: normal;
	font-size: 5em;
	line-height: 1.2em;
	margin: 0 0 0.2em 0;
	padding: 0;
	background-image: linear-gradient(to bottom, #fff 30%, #999 33%, #efefef 100%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@-moz-document url-prefix() { /*漸層色在FireFox有點差距*/
	.g16-kv h2{
		background-image: linear-gradient(to bottom, #aaa 0%, #aaa 5%, #fff 6%, #fff 26%, #999 28%, #999 38%, #fff 60%, #aaa 100%); 
	}
}

@media screen and (max-width: 1280px) {    
.g16-kv .main-image{
	margin-top: -70px;
}
.g16-kv .g16-title{
	font-size: 3em;
}
}
@media screen and (max-width: 1279px) {    
.g16-kv .main-image{
	min-height: 68vw; /*set min-height for CLS performance*/
}
}
@media screen and (max-width: 1024px) {    
.g16-kv h2{
	font-size: 7vw;
}
.g16-kv .g16-title{
	font-size: 6vw;
}
}
@media screen and (max-width: 768px) {    
.g16-kv .main-image{
	margin-top: 0px;
}
}
@media screen and (max-width: 500px) {    
.g16-kv .inner{
	padding: 0 20px;
}
}




/*-guide-*/

.g16-kv .guide-wrapper{
}
.g16-kv .guide-wrapper .guide{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
}
.g16-kv .guide-wrapper .guide li{
    width: 33.33%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}
.g16-kv .guide-wrapper .guide .image{
    width: 30%;
}
.g16-kv .guide-wrapper .guide .image a{
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    display: block;
    transition: all 0.3s;
}
.g16-kv .guide-wrapper .guide .image a:hover{
    border-color: rgba(5,255,250,0.5);
    box-shadow: 0px 0px 15px rgba(5,255,250,0.7);
}
.g16-kv .guide-wrapper .guide .text{
    width: 70%;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
}
.g16-kv .guide-wrapper .guide h3{
    margin-bottom: 0.5em;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}
.g16-kv .guide-wrapper .guide p{
    font-size: 1em;
    margin: 0;
    line-height: 1.2em;
}
.g16-kv .guide-wrapper .guide a{
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
    text-transform: uppercase;
    transition: all 0.2s;
    font-size: 1.1em;
}
.g16-kv .guide-wrapper .guide a:hover{
    color: #ff9e1b;
}


@media screen and (max-width: 1024px) {    
.g16-kv .guide-wrapper .guide{
    align-items: flex-start;
}
.g16-kv .guide-wrapper .guide li{
    width: 50%;
    justify-content: center;
}
.g16-kv .guide-wrapper .guide .image{
    width: 60%;
    max-width: 140px;
}
.g16-kv .guide-wrapper .guide .text{
    width: 100%;
    text-align: center;
}
.g16-kv .guide-wrapper .guide .text p{
    max-width: 300px;
    margin: 0 auto;
}
}

@media screen and (max-width: 500px) {    
.g16-kv .guide-wrapper .guide h3{
    font-size: 0.9em;
}
.g16-kv .guide-wrapper .guide p{
    font-size: 0.8em;
}
}


/*-icon-*/

.g16-kv .icon{
	text-align: center;
	margin-top: 30px;
}
.g16-kv .icon img{
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px;
}

@media screen and (max-width: 767px) { /*WCAG*/
.g16-kv .icon img{
	/*max-height: 13vw;*/
	margin: 10px;
	max-height: 10vw;
	width: auto;
}
}



/*-------title-------*/

/*demo*/
.title-image{
}
.title-image img{
	width: 100%;
}
@media screen and (max-width: 1024px) {    
.title-image{
	overflow: hidden;
}
.title-image img{
	width: 200%;
	max-width: 200%;
	margin-left: -50%;
}
}

/*animation*/
.title-wrapper{
	height: 20vw;
	position: relative;
}
.title-wrapper .projection .top{
	background: url(../img/title/title-design-projection-top.webp) center top no-repeat;
	background-size: auto 50%;
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	filter: grayscale(1);
	transition: all 0.1s;
}
.title-wrapper .projection .top.active{
	filter: grayscale(0);
}
.title-wrapper .projection .bottom{
	background: url(../img/title/title-design-projection-bottom.webp) center bottom no-repeat;
	background-size: auto 50%;
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	filter: grayscale(1);
	transition: all 0.1s;
}
.title-wrapper .projection .bottom.active{
	filter: grayscale(0);
}

.title-wrapper .name{
	background: url(../img/title/title-design-main.webp) center no-repeat;
	background-size: auto 100%;
	height: 5vw;
	width: 100%;
	position: absolute;
	left: 0;
	top: calc(50% - 2.5vw);
	z-index: 2;
}
.title-wrapper .name.active{
	animation: glow 0.8s 0s linear;
	animation-iteration-count: 1;
}

@keyframes glow {
	0%{opacity: 1;}
	30%{opacity: 0.7;}
	60%{opacity: 1;}
	70%{opacity: 0.5;}
	80%{opacity: 0.9;}
	90%{opacity: 0.7;}
	100%{opacity: 1;}
}

.g16-performance .title-wrapper .projection .top{
	background-image: url(../img/title/title-performance-projection-top.webp);
}
.g16-performance .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-performance-projection-bottom.webp);
}
.g16-performance .title-wrapper .name{
	background-image: url(../img/title/title-performance-main.webp);
}
.g16-personalization .title-wrapper .projection .top{
	background-image: url(../img/title/title-personalization-projection-top.webp);
}
.g16-personalization .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-personalization-projection-bottom.webp);
}
.g16-personalization .title-wrapper .name{
	background-image: url(../img/title/title-personalization-main.webp);
}
.g16-thermal .title-wrapper .projection .top{
	background-image: url(../img/title/title-thermal-projection-top.webp);
}
.g16-thermal .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-thermal-projection-bottom.webp);
}
.g16-thermal .title-wrapper .name{
	background-image: url(../img/title/title-thermal-main.webp);
}
.g16-audio .title-wrapper .projection .top{
	background-image: url(../img/title/title-audio-projection-top.webp);
}
.g16-audio .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-audio-projection-bottom.webp);
}
.g16-audio .title-wrapper .name{
	background-image: url(../img/title/title-audio-main.webp);
}
.g16-connectivity .title-wrapper .projection .top{
	background-image: url(../img/title/title-connectivity-projection-top.webp);
}
.g16-connectivity .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-connectivity-projection-bottom.webp);
}
.g16-connectivity .title-wrapper .name{
	background-image: url(../img/title/title-connectivity-main.webp);
}
.g16-software .title-wrapper .projection .top{
	background-image: url(../img/title/title-software-projection-top.webp);
}
.g16-software .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-software-projection-bottom.webp);
}
.g16-software .title-wrapper .name{
	background-image: url(../img/title/title-software-main.webp);
}
.g16-bundle .title-wrapper .projection .top{
	background-image: url(../img/title/title-bundle-projection-top.webp);
}
.g16-bundle .title-wrapper .projection .bottom{
	background-image: url(../img/title/title-bundle-projection-bottom.webp);
}
.g16-bundle .title-wrapper .name{
	background-image: url(../img/title/title-bundle-main.webp);
}



.title-wrapper .beam{
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.title-wrapper .beam-1{
	position: absolute;
	left: 54%;
	top: 65%;
	transition: all 0.1s;
	width: 10vw;
	height: 3px;
	filter: blur(1px);
	background-image: linear-gradient(to right, #e724ff 0%, #321edc 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
}
.title-wrapper .beam-1:after{
	display: block;
	content: '';
	position: absolute;
	left: 120%;
	top: 300%;
	transition: all 0.1s;
	width: 8vw;
	height: 5px;
	opacity: 0.5;
	background-image: linear-gradient(to right, #e724ff 0%, #321edc 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
}
.title-wrapper .beam-2{
	position: absolute;
	left: 51%;
	top: 30%;
	transition: all 0.1s;
	width: 7vw;
	height: 3px;
	filter: blur(1px);
	background-image: linear-gradient(to right, #e724ff 0%, #321edc 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
}
.title-wrapper .beam-2:after{
	display: block;
	content: '';
	position: absolute;
	left: 120%;
	top: 300%;
	transition: all 0.1s;
	width: 8vw;
	height: 6px;
	opacity: 0.6;
	background-image: linear-gradient(to right, #17c2ff 0%, #be24ff 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
    transform: skewX(-45deg);
}
.title-wrapper .beam-3{
	position: absolute;
	left: 24%;
	top: 45%;
	transition: all 0.1s;
	width: 6vw;
	height: 5px;
	filter: blur(1px);
	background-image: linear-gradient(to right, #0088bf 0%, #7e83d0 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
    transform: skewX(-45deg);
}
.title-wrapper .beam-3:after{
	display: block;
	content: '';
	position: absolute;
	left: -100%;
	top: -300%;
	transition: all 0.1s;
	width: 4vw;
	height: 3px;
	opacity: 0.6;
	background-image: linear-gradient(to right, #17c2ff 0%, #17c2ff 100%); 
    transform: skewX(-45deg);
}
.title-wrapper .beam-4{
	position: absolute;
	left: 17%;
	top: 62%;
	transition: all 0.1s;
	width: 4vw;
	height: 3px;
	filter: blur(1px);
	background-image: linear-gradient(to right, #0088bf 0%, #7e83d0 100%); 
    box-shadow: 0px 0px 10px rgba(214,17,238,1);
    transform: skewX(-45deg);
}
.title-wrapper .beam-4:after{
	display: block;
	content: '';
	position: absolute;
	left: -200%;
	top: -300%;
	transition: all 0.1s;
	width: 4vw;
	height: 3px;
	opacity: 0.6;
	background-image: linear-gradient(to right, #17c2ff 0%, #17c2ff 100%); 
    transform: skewX(-45deg);
}

@media screen and (max-width: 1400px) {    
.title-wrapper .name{
	height: 8vw;
	top: calc(50% - 4vw);
}
}
@media screen and (max-width: 768px) {    
.title-wrapper{
	height: 30vw;
}
.title-wrapper .name{
	height: 12vw;
	top: calc(50% - 6vw);
}
}





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

.g16-performance{
	overflow: hidden;
}
.g16-performance .inner{
	max-width: 1500px;
	margin: 0 auto 50px auto;
	padding: 0 50px;
	text-align: center;
	box-sizing: border-box;
}
.g16-performance .text{
	max-width: 1200px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {    
.g16-performance .inner{
	padding: 0 20px;
}
}


/*-----chip animation----*/
.g16-performance .performance-main{
	position: relative;
	min-height: 656px; /*20230207*/
}
.g16-performance .performance-main .front{/*20230207*/
	position: relative;
	z-index: 2;
}
.g16-performance .performance-main .backlight{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.g16-performance .performance-main .chip-nvdia{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
.g16-performance .performance-main .chip-intel{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
@media screen and (max-width: 1500px) {    
.g16-performance .performance-main{
	min-height: 47vw; /*20230207*/
}
}

@media screen and (max-width: 1024px) {    
.g16-performance .performance-main{
	width: 140%;
	margin-left: -20%;
}
}
/*20230208*/
@media screen and (max-width: 768px) {    
.g16-performance .performance-main{
	background: url(../img/performance/performance-demo.jpg) center top no-repeat;
	background-size: 110% auto;
	min-height: 65vw;
}
.g16-performance .performance-main .front{
	display: none;
}
.g16-performance .performance-main .backlight{
	display: none;
}
.g16-performance .performance-main .chip-nvdia{
	display: none;
}
.g16-performance .performance-main .chip-intel{
	display: none;
}
}
/*20230207*/
/*
@media screen and (max-width: 768px) {    
.g16-performance .performance-main{
	width: 180%;
	margin-left: -40%;
}
}
*/

/*-----list----*/
.g16-performance .performance-list{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 100px;
	margin-top: 30px;
}
.g16-performance .performance-list .entry{
	width: 25%;
	box-sizing: border-box;
	padding: 0 20px;
	margin-bottom: 50px;
}
.g16-performance .performance-list .text-block-wrapper{
	text-align: left;
	margin-top: 10px;
	max-height: 150px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-left: 8px;
	padding-right: 5px;
}

.g16-performance .performance-list .text-block-wrapper::-webkit-scrollbar{
  width: 8px;
}
.g16-performance .performance-list .text-block-wrapper::-webkit-scrollbar-track{
  background: #000;
  border: 1px solid #0193b7;
}
.g16-performance .performance-list .text-block-wrapper::-webkit-scrollbar-thumb{
  background: #0193b7;
}
.g16-performance .performance-list .text-block-wrapper::-webkit-scrollbar-thumb:hover{
  background: #00acd6;
}

.g16-performance .performance-list .text-block-wrapper{
  scrollbar-face-color: #0193b7; /* Firefox 63 compatibility */
  scrollbar-track-color: #000; /* Firefox 63 compatibility */
  scrollbar-color: #0193b7 #444;
  scrollbar-width: thin;
}

.g16-performance .performance-list .text-block-wrapper p{
	font-size: 0.9em;
}
@media screen and (max-width: 1024px) {    
.g16-performance .performance-list .entry{
	width: 50%;
}
.g16-performance .performance-list .text-block-wrapper{
	max-height: inherit;
}
}
@media screen and (max-width: 600px) {    
.g16-performance .performance-list .entry{
	width: 100%;
}
}



/*-----nv----*/
.g16-performance .nv-content{
}
.g16-performance .nv-content h3{
	font-family: 'Trade', 'Impact', 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 1.6em;
}
.g16-performance .nv-content .row{
	display: flex;
	flex-wrap: wrap;
	max-width: 750px;
	margin: 0 auto;
	align-items: center;
}
.g16-performance .nv-content .row .image{
	width: 50%;
}
.g16-performance .nv-content .row .copy{
	text-align: left;
	width: 50%;
}
.g16-performance .nv-content .row .copy p:first-child{
	font-family: 'Trade', 'Impact', 'Roboto', sans-serif;
	margin: 0;
	font-weight: normal;
	font-size: 1.2em;
}
.g16-performance .nv-content .row .copy p:last-child{
	margin: 0 0 1em 0;
}

.g16-performance .nv-content .list{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 1300px;
	margin: 20px auto 0px auto;
}
.g16-performance .nv-content .list .entry{
	width: 25%;
	margin-bottom: 25px;
}
.g16-performance .nv-content .list .image img{
	display: block;
	margin: 0 auto;
}
.g16-performance .nv-content .list p:first-child{
	font-family: 'Trade', 'Impact', 'Roboto', sans-serif;
	margin: 0.4em 0;
	font-weight: normal;
	font-size: 1.3em;
}
@media screen and (max-width: 768px) {    
.g16-performance .nv-content .list .entry{
	width: 33.33%;
	margin-bottom: 15px;
}
}
@media screen and (max-width: 600px) {    
.g16-performance .nv-content h3{
	font-size: 1.2em;
}
.g16-performance .nv-content .row .image{
	width: 100%;
}
.g16-performance .nv-content .row .copy{
	width: 100%;
	text-align: center;
}
.g16-performance .nv-content .list .entry{
	width: 50%;
}
.g16-performance .nv-content .list p:first-child{
	font-size: 1.1em;
}
}

/*-------------design---------------*/

.g16-design{
	/*background: url(../img/design/design-bg.jpg) center top no-repeat;
	background-size: cover;*/
}
.g16-design .inner{
	max-width: 1500px;
	margin: 0 auto 50px auto;
	padding: 0 30px;
	text-align: center;
	box-sizing: border-box;
}
.g16-design .text{
	max-width: 1200px;
	margin: 0 auto;
}
.g16-design .design-main{
	padding: 0 30px;
}
.g16-design .design-main .row{
	display: flex;
	flex-wrap: wrap;
}
.g16-design .design-main .row .column:first-child{
	width: 59.35%;
}
.g16-design .design-main .row .column:last-child{
	width: 40.65%;
}
.g16-design .design-main .grid{
	position: relative;
}
.g16-design .design-main .grid .image{
	opacity: 1;
	transition: all 0.5s;
}
.g16-design .design-main .grid:hover .image{
	opacity: 0.5;
}
.g16-design .design-main .text-wrapper{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.5s;
	transform: translateY(20px);
}
.g16-design .design-main .grid:hover .text-wrapper{
	opacity: 1;
	transform: translateY(0);
}
.g16-design .design-main .text-inner{
	padding: 25px;
	box-sizing: border-box;
	max-width: 480px;
}
.g16-design .design-main .text-wrapper h3{
	border-bottom: 1px solid #05fffa;
	text-transform: uppercase;
	font-family: 'Trade', 'Impact', 'Roboto', sans-serif;
	font-size: 2.4em;
	font-weight: normal;
	padding-bottom: 0.4em;
	margin: 0 0 0.4em 0;
}


.g16-design .design-main .grid:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: 2;
}
.g16-design .design-main .grid-1:before{
	background-image: url(../img/design/design-grid-1.png);
}
.g16-design .design-main .grid-2:before{
	background-image: url(../img/design/design-grid-2.png);
}
.g16-design .design-main .grid-3:before{
	background-image: url(../img/design/design-grid-3.png);
}


.g16-design .design-main .grid .arrow{
	position: absolute;
	z-index: 4;
}
.g16-design .design-main .grid .arrow:before{
	position: absolute;
	content: '';
	display: block;
	background: url(../img/design/design-arrow-after.png) center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.3s;
	transform: translateY(-10px);
}
.g16-design .design-main .grid .arrow img{
	display: block;
	opacity: 1;
	transition: all 0.3s;
	transform: translateY(0px);
}
.g16-design .design-main .grid:hover .arrow img{
	opacity: 0;
	transform: translateY(10px);
}
.g16-design .design-main .grid:hover .arrow:before{
	opacity: 1;
	transform: translateY(0px);
}
.g16-design .design-main .grid-1 .arrow{
	right: 2%;
	top: 2%;
	width: 7%;
}
.g16-design .design-main .grid-2 .arrow{
	right: 4%;
	top: 3%;
	width: 10%;
}
.g16-design .design-main .grid-3 .arrow{
	left: 3%;
	top: 4%;
	width: 10%;
}

@media screen and (max-width: 1024px) {    
.g16-design .design-main .text-wrapper h3{
	font-size: 1.8em;
}
}
@media screen and (max-width: 850px) {    
.g16-design .design-main .row .column:first-child{
	width: 100%;
}
.g16-design .design-main .row .column:last-child{
	width: 100%;
}
.g16-design .design-main .text-wrapper{
	position: relative;
	left: auto;
	top: auto;
	height: auto;
	opacity: 1;
	transform: translateY(0px);
}
.g16-design .design-main .grid{
	margin-bottom: 20px;
	border-left: 1px solid #555;
	border-right: 1px solid #555;
}
.g16-design .design-main .grid:hover .image{
	opacity: 1;
}
.g16-design .design-main .grid:before{
	background: url(../img/design/design-grid-top.png) center top no-repeat,
	            url(../img/design/design-grid-bottom.png) center bottom no-repeat;
	background-size: 100% auto;
}
.g16-design .design-main{
	padding: 0;
}
.g16-design .design-main .grid-1 .arrow{
	top: 1%;
	width: 7%;
}
.g16-design .design-main .grid-2 .arrow{
	right: 2%;
	top: 1%;
	width: 7%;
}
.g16-design .design-main .grid-3 .arrow{
	left: auto;
	right: 2%;
	top: 1%;
	width: 7%;
}
}


/*-------------thermal---------------*/

.g16-thermal{
	background: url(../img/thermal/thermal-bg.webp) center bottom no-repeat;
	background-size: 100% auto;
}
.g16-thermal .inner{
	max-width: 1500px;
	margin: 0 auto 50px auto;
	padding: 0 50px;
	text-align: center;
	box-sizing: border-box;
}
.g16-thermal .text{
	max-width: 1200px;
	margin: 0 auto;
}
.g16-thermal video{
	width: 100%;
}
@media screen and (max-width: 768px) {    
.g16-thermal .inner{
	padding: 0 20px;
}
}

/* video control */

.video-wraper{
    position: relative !important;
}
.video-wraper video{
    width: 100%;
}
.video-control{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
}
.video-control button{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    font-synthesis: none;
    -moz-font-feature-settings: "kern";
    border: 4px solid #fff;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    background: url(../img/general/play-pause.png);
    background-size: auto 18px;
    background-repeat: no-repeat;
    background-position: -69px center;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.video-control button:focus{
    border-color: #05fffa;
}
.video-control button:hover{
    opacity: 1;
}
.video-control button:active{
    opacity: 0.7;
}
.video-control button.play{
    background-position: -69px center;
    background-position: 9px center;
}

@media screen and (max-width: 1700px) {    
.video-wraper .video-control{
	right: 100px;
}
}
@media screen and (max-width: 1280px) {    
.video-wraper .video-control{
	right: 20px;
}
}


.g16-thermal .list{
	display: flex;
	flex-wrap: wrap;
	margin-top: 60px;
}
.g16-thermal .list .entry{
	width: 50%;
	padding: 0 30px;
	box-sizing: border-box;
}
.g16-thermal .list h3{
	text-transform: uppercase;
	margin: 0 0 0.5em 0;
	font-size: 1.5em;
	font-weight: normal;
	font-family: 'Trade', 'Impact', 'Roboto', sans-serif;
}
.g16-thermal .list p{
	text-align: left;
	padding: 0 50px;
}

@media screen and (max-width: 1280px) {    
.g16-thermal .list p{
	padding: 0;
}
}

@media screen and (max-width: 767px) {    
.g16-thermal .list .entry{
	width: 100%;
	padding: 0;
}
.g16-thermal .list p{
	text-align: center;
}
}



/*-------------personalization---------------*/

.g16-personalization{
	padding-bottom: 30px;
}
.g16-personalization .inner{
	max-width: 1800px;
	margin: 0 auto 50px auto;
}
.g16-personalization .text{
	max-width: 1200px;
	padding: 0 50px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width: 768px) {    
.g16-personalization .text{
	padding: 0 20px;
}
}




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

.g16-audio{
}
.g16-audio .inner{
	max-width: 1800px;
	margin: 0 auto 50px auto;
}
.g16-audio .text{
	max-width: 1000px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}
.g16-audio .feature-pack{
	position: relative;
	z-index: 1;
}
.g16-audio .feature-pack .center-word{
	color: #fff;
	background: transparent;
	-webkit-text-fill-color: #fff;
}
.g16-audio .feature-pack .image{
	max-width: 300px;
	margin-right: 20px;
	position: relative;
	z-index: 0;
}

.g16-audio .audio-main{
	position: relative;
	margin-top: -8%;
	min-height: 400px;
}
.g16-audio .audio-main .space{
}
.g16-audio .audio-main .copy{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
    flex-direction: column;
}
.g16-audio .audio-main .copy .copy-inner{
	max-width: 600px;
}
.g16-audio .audio-main .copy .image img{
	max-width: 400px;
	width: 90%;
	margin: 0 auto 20px auto;
	display: block;
}
/*
.g16-audio .wave.w4{
	position: absolute;
	top: 35%;
	right: 15%;
	width: 9vw;
	height: 9vw;
	border-radius: 50%;
	border: 2px solid rgba(68,182,255,1);
	transform: rotate(45deg) skewX(50deg);
	transform: rotate(80deg) scaleY(40%);
	filter: blur(1px);
}
.g16-audio .wave.w4:after{
	content: '';
	display: block;
	position: absolute;
	top: -40%;
	right: 15%;
	width: 70%;
	height: 70%;
	border-radius: 50%;
	border: 2px solid rgba(68,182,255,1);
	animation: wave 1s 0s infinite linear;
}
.g16-audio .wave.w4:before{
	content: '';
	display: block;
	position: absolute;
	top: -80%;
	right: 40%;
	width: 20%;
	height: 20%;
	border-radius: 50%;
	border: 2px solid rgba(68,182,255,1);
	animation: wave 1.5s 0.3s infinite linear;
}
@keyframes wave {
	0%{opacity: 0;}
	50%{opacity: 0.9; transform: translate(0%,-15%);}
	100%{opacity: 0; transform: translate(0%,-30%);}
}
*/

.g16-audio .wave{
	position: absolute;
	width: 9vw;
	height: 9vw;
	max-width: 200px;
	max-height: 200px;
	transform: rotate(20deg) skewY(40deg);
	filter: blur(1px);
}
.g16-audio .wave.w1{
	top: 20%;
	left: 20%;
	transform: rotate(-90deg) skewY(40deg);
}
.g16-audio .wave.w2{
	top: 10%;
	left: 45%;
	transform: rotate(-60deg) skewY(40deg);
}
.g16-audio .wave.w3{
	top: 15%;
	left: 65%;
	transform: rotate(-30deg) skewY(40deg);
}
.g16-audio .wave.w4{
	right: 15%;
	top: 35%;
	transform: rotate(20deg) skewY(40deg);
}
.g16-audio .wave.w5{
	right: 25%;
	top: 65%;
	transform: rotate(90deg) skewY(40deg);
}
.g16-audio .wave.w6{
	top: 70%;
	left: 25%;
	transform: rotate(150deg) skewY(40deg);
}
.g16-audio .wave.w7{
	top: 50%;
	left: 15%;
	transform: rotate(210deg) skewY(40deg);
}
.g16-audio .wave > div{
	width: 90%;
	height: 90%;
	position: absolute;
	left: 5%;
	top: 5%;
	border-radius: 50%;
	border: 2px solid rgba(68,182,255,1);
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.4);
	filter: blur(1px);
}
.g16-audio .wave .c1{
    animation: soundwaveCircle 2s 1s linear infinite;
}
.g16-audio .wave .c2{
    animation: soundwaveCircle 2s 0.5s linear infinite;
	left: 25%;
	width: 70%;
	height: 70%;
}
.g16-audio .wave .c3{
    animation: soundwaveCircle 2s 0s linear infinite;
	left: 55%;
	width: 40%;
	height: 40%;
}
.g16-audio .wave > div.pause{
    animation-play-state: paused;
}
@keyframes soundwaveCircle {
    0% {
    opacity: 0;
    transform: scale(0.4);
    }
    50% {
    opacity: 1;
    transform: scale(0.7);
    }
    100% {
    opacity: 0;
    transform: scale(1);
    }
}

.g16-audio .wave-group .video-control{
    right: 15%;
    bottom: 15%;
}

@media screen and (max-width: 768px) {    
.g16-audio .audio-main{
	margin-top: 0;
	margin-bottom: 50px;
}
.g16-audio .wave-group .video-control{
    right: 10px;
    bottom: auto;
    top: 0px;
}
.g16-audio .audio-main .copy{
	position: relative;
	left: auto;
	top: auto;
	height: auto;
}
.g16-audio .audio-main .copy .image{
	width: 60%;
	margin: 0 auto;
}
.g16-audio .feature-pack .image {
	width: 60%;
	margin: 0 auto;
}
}

@media screen and (max-width: 650px) {
.g16-audio .feature-pack {
  justify-content: center !important;
  text-align: center !important;
  margin-left: 0px;
}
.g16-audio .feature-pack .item {
  margin: 0 10px 30px 30px;
}
}





/* hear the difference */

.g16-audio .sound{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.g16-audio .sound .text{
    text-align: center;
    padding: 0 20px;
}
.g16-audio .sound .text p{
    max-width: 800px;
    margin: 0 auto;
    margin-top: 40px;
}
.g16-audio .sound .note{
    font-weight: lighter;
    max-width: 1100px;
    margin: 50px auto;
    font-size: 0.8em;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

.g16-audio .sound .player{
}
.g16-audio .sound .play-btn-wrapper{
    margin-top: 50px;
    padding-top: 50px;
    height: 250px;
    position: relative;
}
.g16-audio .sound .play-btn{
    /*background: url('../img/mic-icon.png') center center no-repeat;*/
    background-color: rgba(0,0,0,1);
    background-size: 60%;
    height: 140px;
    width: 140px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #05fffa;
    box-sizing: border-box;
	z-index: 2;
	position: relative;
}
.g16-audio .sound .play-btn > div{
    background: #000 url('../img/audio/mic-icon-3.png') center center no-repeat;
    background-size: 100%;
    /*background-color: rgba(0,0,0,0.6);*/
    height: 134px;
    width: 134px;
    border-radius: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.g16-audio .sound .play-btn > div.pause{
    background-image: url('../img/audio/play-icon-pause.png');
    display: none;
}

.g16-audio .sound .play-btn > div:before{
    border: 2px solid #05fffa;
	/*background-image: radial-gradient(#000000 0%, rgba(5,255,250,0.5) 100%);*/
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    content: '';
    transition : all 0.5s;
    transform: scale(1);
    opacity: 0;
    animation: bubble 2.5s ease-in-out infinite;
    z-index: 1;
}
.g16-audio .sound .play-btn.pause > div:before{
    animation-play-state: paused;
}
.g16-audio .sound .play-btn > div:after{
    border: 1px solid #05fffa;
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 2;
    transition : all 0.5s;
    transform: scale(1);
    opacity: 0;
    animation: bubble 2s ease-in-out infinite;
}
.g16-audio .sound .play-btn.pause > div:after{
    animation-play-state: paused;
}
@keyframes bubble {
    0% {
    transform: scale(1);
    opacity: 0.6;
    }
    100% {
    transform: scale(2);
    opacity: 0;
    }
}

.g16-audio .switch-btn{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	justify-content: space-between;
}
.g16-audio .switch-btn .entry{
	width: 50%;
	max-width: 400px;
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	color: #fff;
	transition: all 0.3s;
	padding: 22px 5px 8px 5px;
	display: block;
	box-sizing: border-box;
	min-height: 60px;
	background: url(../img/general/btn-bg.png) center no-repeat;
	background-size: auto 100%;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
}
.g16-audio .switch-btn .entry a{
}
.g16-audio .switch-btn .entry:hover{
	color: #05fffa;
}
.g16-audio .switch-btn .entry.active{
	color: #05fffa;
}
.g16-audio .switch-btn br{
	display: none;
}



.g16-audio .sound .caption{
    max-width: 800px;
    display: flex;
    padding: 0 20px;
    margin: 50px auto 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.g16-audio .sound .caption p{
    font-weight: lighter;
    position: relative;
}
.g16-audio .sound .caption p:before{
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 5px;
    background: red;
    margin-right: 20px;
    content: '';
}

.g16-audio .sound .caption p.background:before{
    background: #666;
}
.g16-audio .sound .caption p.voice:before{
    background: #a200ff;
}
.g16-audio .sound .caption p.speech:before{
    background: #70e2ff;
}
.g16-audio .sound .note-platform{
    font-weight: lighter;
    max-width: 1100px;
    margin: -50px auto 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}


.soundstage { 
  height:100%;
  width:50%;
  position:absolute;
  top: 70px;
  z-index: 1;
  overflow: hidden;
  animation: swell2 1s infinite;
}
.soundstage.left { 
  left:0%;
}
.soundstage.right { 
  left:50%;
}
.soundwave {
  background: url(../img/audio/wave-n1.svg) repeat-x;
  background-size: auto 100%;
  position: absolute;
  top: -198px;
  top: 0;
  width: 6400px;
  height: 100px;
  animation: wave 12s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.soundstage.left .soundwave {
  background-image: url(../img/audio/wave-n1.svg);
}

.soundstage.left .soundwave.active {
  background-image: url(../img/audio/wave-smooth.svg);
}
.soundwave.pause{
  animation-play-state:paused;
}
.soundstage.pause{
  animation-play-state:paused; /*20230202*/
}


.g16-audio .sound .video-control{
    right: 10%;
    z-index: 3;
}

@keyframes wave {
  0% {
    /*margin-left: 0;*/
    transform: translateX(0px);
  }
  100% {
    /*margin-left: -1600px;*/
    transform: translateX(-1600px);
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

@keyframes swell2 {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.1);
  }
}


@media screen and (max-width: 768px) {    
.g16-audio .sound .text p{
    font-size: 1em;
}
.g16-audio .sound .caption{
    display: block;
    padding-left: calc(50vw - 100px);
}
.g16-audio .switch-btn{
	margin: 20px auto 20px auto;
}
.g16-audio .switch-btn .entry{
	font-size: 1em;
}
.g16-audio .switch-btn br{
	display: block;
}
}

@media screen and (max-width: 650px) {    
.g16-audio .switch-btn{
	justify-content: center;
}
.g16-audio .switch-btn .entry{
	width: 100%;
	margin-bottom: 20px;
}
.g16-audio .sound .play-btn-wrapper {
  margin-top: 0px;
}
}

@media screen and (max-width: 500px) {    
.g16-audio .switch-btn .entry{
	font-size: 0.8em;
}
}





/*-------------connectivity---------------*/

.g16-connectivity{
}
.g16-connectivity .inner{
	max-width: 2560px;
	margin: 0 auto;
}
.g16-connectivity .text{
	max-width: 1200px;
	padding: 0 50px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width: 768px) {
.g16-connectivity .text{
	padding: 0 20px;
}
}

.g16-connectivity .connectivity-spec{
	position: relative;
}
.g16-connectivity .connectivity-spec .image img{
	display: block;
	width: 100%;
}
.g16-connectivity .connectivity-spec .spec .entry{
	position: absolute;
	font-family: 'Roboto', sans-serif;
}
.g16-connectivity .connectivity-spec .spec .entry.back{
	right: 75%;
	text-align: right;
}
.g16-connectivity .connectivity-spec .spec .entry.front{
	left: 81%;
	text-align: left;
}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(1){ top: 13%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(2){ top: 15%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(3){ top: 19%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(4){ top: 22%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(5){ top: 24.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(6){ top: 27%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(7){ top: 30%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(8){ top: 41%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(9){ top: 43%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(10){ top: 45%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(11){ top: 47%;}

@media screen and (max-width: 1599px) {
.g16-connectivity .connectivity-spec .spec .entry.back{
	right: 69%;
}
.g16-connectivity .connectivity-spec .spec .entry.front{
	left: 70%;
}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(1){ top: 8%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(2){ top: 10%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(3){ top: 13%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(4){ top: 15%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(5){ top: 17%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(6){ top: 19%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(7){ top: 21%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(8){ top: 57%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(9){ top: 58.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(10){ top: 60%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(11){ top: 61.5%;}
}


@media screen and (max-width: 1023px) {
.g16-connectivity .connectivity-spec .spec .entry.back{
	right: 52%;
}
.g16-connectivity .connectivity-spec .spec .entry.front{
	left: 56%;
}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(1){ top: 9%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(2){ top: 11%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(3){ top: 14%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(4){ top: 16.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(5){ top: 18.3%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(6){ top: 20.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(7){ top: 22.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(8){ top: 55.7%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(9){ top: 57.5%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(10){ top: 59%;}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(11){ top: 60.5%;}
}

@media screen and (max-width: 767px) {
.g16-connectivity .connectivity-spec .spec .entry{
	font-size: 0.9em;
}
}

@media screen and (max-width: 549px) {
.g16-connectivity .connectivity-spec .spec .entry.back{
	padding-left: 10px;
}
.g16-connectivity .connectivity-spec .spec .entry:nth-child(3){ top: 13%;}
.g16-connectivity .connectivity-spec .spec .entry.front{
	left: 46%;
}
}
@media screen and (max-width: 350px) {
.g16-connectivity .connectivity-spec .spec .entry{
	font-size: 0.7em;
}
}



/*-------------software---------------*/

.g16-software{
	background: url(../img/software/software-bg.webp) center 450px no-repeat;
	background-size: 100% auto;
	padding-bottom: 60px;
}
.g16-software .inner{
	max-width: 1800px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto 50px auto;
}
.g16-software .text{
	max-width: 1200px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}

.g16-software .software-switch-wrapper{
	display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    width: 100%;
    position: relative;
}
.g16-software .software-switch{
}
.g16-software .software-switch .entry{
    opacity: 0;
    position: absolute;
    transition: all 0.5s;
    left: 100vw;
    top: 0;
    width: 100%;
    transform: translateY(30px);
}
.g16-software .software-switch .entry.active{
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: translateY(0px);
}
.g16-software .software-switch .text{
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.g16-software .software-switch .software-image{
	max-width: 1000px;
	margin: 0 auto;
    box-shadow: 0px 0px 60px rgba(0,222,255,0.7), 0px 0px 20px rgba(0,222,255,1);
}


.g16-software .software-switch-control{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin: 50px auto 50px auto;
}
.g16-software .software-switch-control .entry{
	width: 32%;
	margin: 0 0.6%;
}
.g16-software .software-switch-control .entry a{
	text-align: center;
	text-transform: uppercase;
	font-size: 1.2em;
	color: #fff;
	transition: all 0.3s;
	padding: 18px 5px 8px 5px;
	display: block;
	box-sizing: border-box;
	min-height: 50px;
	background: url(../img/general/btn-bg.png) center no-repeat;
	background-size: auto 100%;
	cursor: pointer;
}
.g16-software .software-switch-control .entry a:hover{
	color: #05fffa;
}
.g16-software .software-switch-control .entry.active a{
	color: #05fffa;
}
.g16-software .software-switch-control br{
	display: none;
}

@media screen and (max-width: 767px) {    
.g16-software .software-switch-control{
	margin: 20px auto 20px auto;
}
.g16-software .software-switch-control .entry a{
	font-size: 1em;
}
.g16-software .software-switch-control br{
	display: block;
}
}

@media screen and (max-width: 500px) {    
.g16-software .software-switch-control .entry a{
	font-size: 0.8em;
}
}



/*-------------bundle---------------*/

.g16-bundle{
	background: url(../img/bundle/bundle-bg.jpg) center 450px no-repeat;
	background-size: 100% auto;
}
.g16-bundle .inner{
	max-width: 1300px;
	margin: 0 auto 50px auto;
}
.g16-bundle .text{
	max-width: 900px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width: 1600px) {    
.g16-bundle .bundle-image{
	max-width: 900px;
	margin: 0 auto;
}
}
@media screen and (max-width: 1280px) {    
.g16-bundle .bundle-image{
	max-width: 700px;
}
}
@media screen and (max-width: 768px) {    
.g16-bundle .bundle-image{
	max-width: 80vw;
}
}