@import url("reset.css");

body{ background:url(../images/bg_p.png) #fff; position: relative; /*background: url(../images/bg.jpg);*/}

#wrapper{width: 100%;height: 100%; overflow: hidden; /position: relative;}

/*top BEGIN*/
#top{
	width: 100%; 
	height: 860px; 
	margin: auto;position: relative;
/*	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 47.2%, 50% 100%, 0% 47.2%);
	clip-path: polygon(0% 0%, 100% 0%, 100% 47.2%, 50% 100%, 0% 47.2%);*/

}
.logo_block{
	width: 100%;
	height: 70px; 
	margin: 0 auto auto 0;
	padding: 0;
	position: absolute;
	z-index: 1000;
}
.benq_logo {width: 96px;height: 50px; display: block;position: absolute;top: 10px;left: 20px;}
.mobile01_logo {display: block;position: absolute; top: 15px;right: 20px;}
.fb{
	width:40px;
	height:40px;
	position:absolute;
	top:15px;
	right:223px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../images/share_fb.png) no-repeat top left;
	}
.fb:hover{background:url(../images/share_fb.png) no-repeat bottom left}


.kv_bg{	
	width: 100%;
	height: 860px;
	position: absolute;
	background: url(../images/kv_bg.png) no-repeat top center;
}
.slogan_block{width: 1200px;height: 860px; margin: auto;padding: 0; position:relative;}
.diamond_bg{position: absolute;bottom: 30px;right: 230px;}
.slogan_a{position: absolute;bottom: 216px;right: 411px;}
.rainbow_line{position: absolute;bottom: 202px;right: 347px;}
.slogan_b{position: absolute;bottom: 114px;right: 357px;}
.hd_4k{position: absolute;bottom: 451px;left: 350px;}
.hdr{position: absolute;bottom: 365px;left: 350px;}
/*top END*/

/*menu BEGIN*/
.menu{
	width: 800px;
	height: 86px;
	padding: 0;
	position: absolute;
	bottom: 15px;
	right: 200px;
	/*background: url(../images/menu_bg.png)no-repeat center center;*/
}
.menu a{display: block; width: 200px;height: 84px;float: left;}
.menu a:hover{margin-top: 2px;}
/*.menu a:hover{background-position: bottom;}*/
.m01{background: url(../images/m01.png) no-repeat;}
.m02{background: url(../images/m02.png) no-repeat;}
.m03{background: url(../images/m03.png) no-repeat;}
.m04{background: url(../images/m04.png) no-repeat;}
.m05{background: url(../images/m05.png) no-repeat;}
/*menu END*/



#middle{
	width:100%;
	height:780px;
	margin: 40px auto auto auto;
	position:relative;
}
.tv_title{width: 170px;height: 46px;margin: auto;}
.tv{
	width:1200px;
	height:674px;
	background:url(../images/tv.png) no-repeat center;
	margin: 20px auto auto auto;
	position:relative;
	/*top:46px;
	left:50%;
	-moz-transform:translate(-50%, 0);
	-ms-transform:translate(-50%, 0);
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0)*/
}
.tv_content{
	width:1030px;
	height:580px;
	overflow:hidden;
	position:absolute;
	top:9px;
	left:85px
}
.swiper-wrapper{
	width:1030px;
	height:580px
}
/*.swiper-button-prev{
	border-left:15px solid #fff;
	border-bottom:15px solid #fff;
	width:50px;
	height:50px;
	background:none;
	position:absolute;
	top:46%;
	left:-45px;
	-moz-transform:translate(0, -30%) rotate(45deg);
	-ms-transform:translate(0, -30%) rotate(45deg);
	-webkit-transform:translate(0, -30%) rotate(45deg);
	transform:translate(0, -30%) rotate(45deg)
}
.swiper-button-next{
	border-right:15px solid #fff;
	border-bottom:15px solid #fff;
	width:50px;
	height:50px;
	background:none;
	position:absolute;
	top:46%;
	right:-30px;
	-moz-transform:translate(0, -30%) rotate(-45deg);
	-ms-transform:translate(0, -30%) rotate(-45deg);
	-webkit-transform:translate(0, -30%) rotate(-45deg);
	transform:translate(0, -30%) rotate(-45deg)
}*/
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{
	height:150px;
	bottom:0;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	margin:0;
}

.black_bg{
	width: 100%;
	height: 160px;
	padding-top:10px; 
	background: #000;
}
.swiper-pagination{
	width: 1440px;
	height: 150px;
	background:#000;
	margin: auto;
	position: none;
	padding-left: 10px;
}
.swiper-pagination-bullet{
	width:150px;
	height:150px;
	opacity:1;
	position:relative;
	float: left;
	margin-right: 10px;

}
/*.swiper-pagination-bullet.swiper-pagination-bullet-active::before{
	content:"";
	width:100%;
	font-size:18px;
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%)
}*/
.swiper-pagination-bullet.swiper-pagination-bullet-active::after{
	content:"";
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
	opacity:1;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}
.swiper-pagination-bullet:nth-child(1){
	background:url(../images/swiper1.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active::after{
	background:url(../images/swiper1_h.jpg) no-repeat center
}
.swiper-pagination-bullet:nth-child(2){
	background:url(../images/swiper2.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active::after{
	background:url(../images/swiper2_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(3){
	background:url(../images/swiper3.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active::after{
	background:url(../images/swiper3_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(4){
	background:url(../images/swiper4.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active::after{
	background:url(../images/swiper4_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(5){
	background:url(../images/swiper5.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active::after{
	background:url(../images/swiper5_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(6){
	background:url(../images/swiper6.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(6).swiper-pagination-bullet-active::after{
	background:url(../images/swiper6_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(7){
	background:url(../images/swiper7.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(7).swiper-pagination-bullet-active::after{
	background:url(../images/swiper7_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(8){
	background:url(../images/swiper8.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(8).swiper-pagination-bullet-active::after{
	background:url(../images/swiper8_h.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(9){
	background:url(../images/swiper9.jpg) no-repeat center;
}
.swiper-pagination-bullet:nth-child(9).swiper-pagination-bullet-active::after{
	background:url(../images/swiper9_h.jpg) no-repeat center;
}


/*bottom BEGIN*/
#bottom{
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 40px 0 50px 0;
	background: url(../images/bottom_bg.jpg) top center;
}

/*report BEGIN*/
#report{
	width: 100%;
	height: auto;
	margin: 40px auto auto auto;
	overflow: hidden;
	padding: 0;
}
.report_title{width: 170px;height: 46px;margin: auto;}
.report_block{width: 960px;height: 350px;margin: 30px auto 0 auto;position: relative;}
.report_in {
	display: block;
	width: 960px;
	height: 350px;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
.report_in_h{
	width: 960px;
	height: 350px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/report_in_hover.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.report_in:hover .report_in_h{ opacity:1; filter: alpha(opacity=100);}
/*report_block END*/


/*article BEGIN*/
#article{
	width: 100%;
	height: auto;
	margin: auto;
	overflow: hidden;
	padding: 0;
}
.article_block_title{width: 170px;height: 46px;margin: auto;}
.S75_900_title ,.S55_700_title{width: 960px;height: 41px;margin: 30px auto auto auto;}
.article_block_a ,.article_block_b{
	width: 960px;
	height: 330px; 
	overflow: hidden;
	margin: 30px auto 0 auto;
	position: relative;
}
.article_block_c{
	width: 960px;
	height: 330px; 
	overflow: hidden;
	margin: 20px auto 0 auto;
	position: relative;
}
/* A01*/
.article_a01 {
	display: block;
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
.article_a01_h{
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_a01_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_a01:hover .article_a01_h{ opacity:1; filter: alpha(opacity=100);}


/* A02*/
.article_a02 {
	display: block;
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
.article_a02_h{
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_a02_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_a02:hover .article_a02_h{ opacity:1; filter: alpha(opacity=100);}

/* B01*/
.article_b01 {
	display: block;
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
.article_b01_h{
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_b01_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_b01:hover .article_b01_h{ opacity:1; filter: alpha(opacity=100);}

/* B02*/
.article_b02 {
	display: block;
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
.article_b02_h{
	width: 470px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_b02_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_b02:hover .article_b02_h{ opacity:1; filter: alpha(opacity=100);}

/* B03*/
.article_b03 {
	display: block;
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
.article_b03_h{
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_b03_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_b03:hover .article_b03_h{ opacity:1; filter: alpha(opacity=100);}

/* B04*/
.article_b04 {
	display: block;
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 325px;
	text-decoration: none;
}
.article_b04_h{
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_b04_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_b04:hover .article_b04_h{ opacity:1; filter: alpha(opacity=100);}

/* B05*/
.article_b05 {
	display: block;
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
.article_b05_h{
	width: 310px;
	height: 330px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/article_b05_h.jpg) no-repeat;
	opacity:0;
	filter: alpha(opacity=0);
	transition:0.6s;
	-moz-transition:0.6s;
	-webkit-transition:0.6s;
	-o-transition:0.6s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.article_b05:hover .article_b05_h{ opacity:1; filter: alpha(opacity=100);}
/*article END*/
.gotop{
	display: block;
	width:60px;
	height:60px;
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index: 150;
	background:url(../images/goTop.png) no-repeat ;
}
.gotop:hover{background-position: bottom;}
#jSplash { 
    margin: auto;
    width: 96px;
    height: 50px;
    background: url(../images/benq_logo.png) no-repeat;
    }