@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Montserrat:200');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
@import url('https://fonts.googleapis.com/css?family=Montserrat:600');
@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?2xh0m7');
	src: url('../fonts/icomoon.eot?2xh0m7#iefix') format('embedded-opentype'),  url('../fonts/icomoon.ttf?2xh0m7') format('truetype'),  url('../fonts/icomoon.woff?2xh0m7') format('woff'),  url('../fonts/icomoon.svg?2xh0m7#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
 [class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.icon-buy:before {
	content: "\e900";
}
.icon-facebook:before {
	content: "\e901";
}
.icon-twitter:before {
	content: "\e902";
}
.icon-youtube:before {
	content: "\e903";
}
body, html {
	height: 100%;
	min-height: 100%;
}
.small, small {
	font-size: 70%;
}
html {
	font-size: 62.5%;
}
body {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	background-color:#000;
}
#pageup {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  background-image:url(//www.avermedia.com/event/4Kseries/img/up.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  display: none;
  cursor: pointer;
  z-index: 99;
}
a:focus {
	outline: none;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p {
	font-family: 'Montserrat', sans-serif;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
img {
	vertical-align: top;
}
.table-cell figure, .table-cell .figcaption {
	vertical-align: middle;
}
.table-cell img {
	display: inline-block;
}
.order {
	direction: inherit;
}
.order h3, .order span {
	display: block;
	direction: ltr;
}
.bg-img {
	background-repeat: no-repeat;
	background-position: center top;
	background-size:cover;
}
.display-table {
	list-style-type:none;
	padding:0;
	margin:0;
}
header {
	overflow:hidden;
	color: #fff;
	position: relative;
	background-size: 100% 100%;
	background-color: #fff;
	text-align:center;
}
nav {
	position:absolute;
	top:0;
	left:0;
	right:0;
	padding:0;
	background-color:transparent;
	z-index:50;
}
nav .nav-item {
	padding:10px 0 8px;
}
nav .nav-item a {
	font-size: 36px;
	text-decoration: none;
	display: inline-block;
	padding: 0 12px;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
nav .nav-item a:before {
	opacity: 0.8;
	color: #fff
}
nav .nav-item a:hover:before {
	color: #fff;
	opacity: 1
}
nav #avermedia-logo {
	padding-top:15px;
	display: inline-block;
}
nav #avermedia-logo img {
	width: 150px;
	height: auto;
}
nav .community {
    margin-right: 15px;
}
nav .community img {
width:32px;
}
.community {
    margin-top: 15px;
}
.community p {
    margin-top: 15px;
}
.hero {
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.hero article {
	position:relative;
	top:inherit;
	width:100%;
	z-index:999;
	text-align:center;
}
.hero article a {
	display:inline-block;
	color:#fff;
	padding:10px 15px 8px;
	border:2px solid #fff;
	background-color:rgba(0,0,0,.3);
transition: all .3s ease-in;
}
.hero article a:hover {
	text-decoration:none;
	background-color:rgba(0,0,0,1)
}
.drop-shadow {
	 -webkit-filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.7))
}
.text-grow {
	filter: glow(color:black, strength=10);text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.hero section {
	position:relative;
	width: 100%;
	padding-bottom:5%;
}
.hero-title {
	position:absolute;
	top:20%;
	left:0;
	right:0;
	z-index:10;
	text-align:center;
}
.hero-text {
	width:80%;
}
.hero-title {
	padding:0 15px;
}
.hero-title, .hero-title h1 {
	font-size:7vw;
margin:0;
font-weight:900;
}
.hero figure {
	position:relative;
	overflow:hidden;
	padding:40% 0;
}
.hero_bg, .lg4k, .lgu {
	position:absolute;
}
.hero_bg {
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	z-index:1;
	background-size:145% auto;
}
section {
	position:relative;
	color:#fff;
}
section h2 {
	font-size:2.5rem
}
.lg4k {
	top:42%;
	left:0;
	padding:0 2% 0 8%;
	width:50%;
	z-index:5;
}
.lgu {
	top:42%;
	right:0;
	padding:0 8% 0 2%;
	width:50%;
	z-index:5;
}
.one {
	position:relative;
}
.two {
	color:#fff;
	padding:5% 0;
	background-color:#222;
}
.two figure {
	display:inline-block;
	width:50%;
}
.two figure img {
	display:inline-block;
	}
.two figure:nth-of-type(1) {
	text-align:right;
	padding:0 5% 0 5%;
}
.two figure:nth-of-type(2) {
	padding:0 5% 0 5%;
}
.copy-wrap {
	position:relative;
	z-index:500;
	padding-top:5%;
}
.copy-inner {
	padding:0 15px;
}
.five {
	text-align:center;
	background-color:#111;
}
.three .copy-wrap {
	text-align:center;
}
.three .copy-inner {
	display:inline-block;
	margin:0 auto;
}
.three figure {
	position:relative;
	z-index:1;
	margin-top:-8%;
}
.four, .six, .eight, .ten {
	padding:5% 0;
}
.four {
	background-color:#232424;
	padding:15% 0;
}
.six {
	text-align:center;
	background-color:#000;
}
.six .display-table {
direction:inherit;
	margin:0 auto;
padding:0 30px;
}
.six .display-table li:nth-of-type(1) {
	width:100%;
	vertical-align:middle;
	margin-bottom:50px
}
.six .display-table li:nth-of-type(2) {
	padding-left:0;
	margin-bottom:30px
}
.seven {
padding:50px 0;
}
.eight {
		text-align:center;
}
.eight img {
	display:inline-block;
}
.eight figure:nth-of-type(1) {
	margin:0 auto;
	padding:5% 15px 0;
}
.eight figure:nth-of-type(2) {
	margin:0 auto 15px;
	width:100%;
	padding:0 15px;
}
.ten .table {
table-layout: fixed
}
.ten .table>tbody>tr:nth-of-type(1)>td {
    border-top:none;
}
.ten .table>tbody>tr:nth-of-type(4)>td:first-child, .ten .table>tbody>tr:nth-of-type(5)>td:first-child, .ten .table>tbody>tr:nth-of-type(6)>td:first-child {
	border-right:1px solid #ddd;
}
.ten .table>tbody>tr>td {
	padding:15px 8px;
}
.product-name {
	padding:0 0 15px;
}
.product-name img {
width:300px
}
.product-name.buy_now img {
	width:150px;
	height:auto;
}
.progress_bar {
	position:relative;
}
.four .container {
	position:relative
}
.progress_position {
position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.progress_bar a {
transition: all .3s ease-in;
}
.progress_bar a:hover {
 -webkit-filter:saturate(3);
}
.progress_bar1 {
	z-index:20;
		left:85%;
	top:19.4%;
}
.progress_bar2 {
	z-index:10;
	left:13%;
	overflow:hidden;
}
.progress_bar3 {
	z-index:11;
	left:13%;
	overflow:hidden;
}
.progress_bar4 {
	z-index:13;
	padding-right:78%;
}
.progress_bar5 {
	z-index:20;
	top:inherit;
	left:85%;
	bottom:19%;
}
.cube_bar1 {
	z-index:12;
}
.cube_bar2 {
	z-index:10;
	left:13%;
	overflow:hidden;
}
.cube_bar3 {
	z-index:11;
	left:13%;
	overflow:hidden;
}
.cube_bar4 {
	z-index:13;
	padding-right:78%;
}
.cube_bar5 {
	z-index:20;
		left:85%;
	top:21%;
}
.cube_bar6 {
	z-index:20;
	top:inherit;
	left:85%;
	bottom:17.5%;
}

.chart_explain {
	margin-bottom:50px;
}
.chart_explain img, .chart_explain span  {
	display:inline-block;
	vertical-align:middle;
}
.chart_explain span {
padding-left:15px;
}
.chart_explain span:nth-of-type(1) {
padding-right:30px;
}
footer {
	color:#ccc;
	font-size: 1.5rem;
	padding: 15px;
	text-align: center;
	background-color:#222;
}
.chart_explain {
	font-size:1.8rem
}
.chart_explain img {
	width:30px;
	height:30px;
}
.one .hdr_title { position:absolute; left:0; right:50%; bottom:10%; z-index:2; text-align:center; }
.img_differences { position:relative; }
.img_differences .sdr_title { position:absolute; left:50%; right:0; bottom:10%; z-index:2; text-align:center;  }
.img_differences h1 { font-size:6vw; }
.sdr { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; }
.sdr-img  { position:absolute; top:0; left:0; right:0; bottom:0; background-image:url(../img/section1.jpg); background-repeat:no-repeat; background-size:cover; }

.buyButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
	background-color:#007dc1;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 10px;
	border-radius:3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.buyButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
	background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
	background-color:#0061a7;
	text-decoration:none;
}
.buyButton:active {
	position:relative;
	top:1px;
}
.ten_product {
	padding:0 20%;
}
.ten .community img {
	width:48px;
	height:48px;
}

/***********************************************************************************************************************************************************************/

@media (min-width:480px) {
.chart_explain img {
	width:50px;
	height:50px
}
}
@media (min-width:640px) {
section h2 {
	font-size:3rem
}
}
@media (min-width:768px) {
nav #avermedia-logo img {
    width: 200px;
    height: 42px;
}
.community a img {
    width: 40px;
    height: 40px;
}
.hero section {
    padding-bottom:0.5%;
}
.lg4k, .lgu {
	top:inherit;
	bottom:10%;
}
.hero article {
	position:absolute;
	top:40%;
	margin-top:0;
}
.eight figure:nth-of-type(1) {
	width:80%;
}
.hero-title, .hero-title h1 {
font-size:5vw;
}
.display-table {
	display:table;
	width:100%;
	height:100%;
}
.display-table li {
	display:table-cell;
	vertical-align:bottom;
}
.copy-wrap {
	position:absolute;
	top:5%;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	width:100%;
	pointer-events:none;
	padding:0;
}
.three-copy {
	text-align:center;
	margin:0 auto;
	width:980px;
}
.five .copy-inner {
	padding:0 60% 0 30px;
	position:relative;
	top:45%;
 transform:translateY(-50%);
}
section h2 {
	font-size:5rem
}
.three {
	padding:0;
}
.three figure {
	margin-top:0;
}
.five {
	background-color:transparent;
}
.six .display-table {
direction: rtl;
}
.six .display-table li:nth-of-type(1) {
	width:352px;
}
.six .display-table li:nth-of-type(2) {
	padding-right:5%;
	margin-bottom:0;
}
.six .display-table li:nth-of-type(1) {
	margin-bottom:0
}
.eight figure:nth-of-type(2) {
    width: 80%;
}
.two, .six, .eight {
	background-attachment:fixed;
}
.hero-title {
	top:15%;
}
.hero-text {
	width:55%;
}
.hero figure {
	padding:28% 0;
}
.hero_bg {
	background-size:cover;
}
.lg4k {
	padding:0 2% 0 13%;
}
.lgu {
	padding:0 13% 0 2%;
}
header {
	text-align:left;
}
.five, .six {
	text-align:left;
}
.four {
	padding:5% 0;
}
.two figure:nth-of-type(1) {
	padding:0 5% 0 22%;
}
.two figure:nth-of-type(2) {
	padding:0 22% 0 5%;
}
.chart_explain img {
	width:76px;
	height:76px
}
.buy_now span {
    margin-bottom:0;
}
}
@media (min-width:1024px) {
.three .copy-inner {
	width:81%;
}
}
@media (min-width:1367px) {
.three .copy-inner {
	width:50%;
}
.six .display-table {
	width:80%
}
.five .copy-inner {
	padding:0 65% 0 12%;
}
}